@redocly/graphql-docs/lib-esm/src/navigation/components/Section.js

Redocly GraphQL docs

import{jsx as o,jsxs as t,Fragment as f}from"react/jsx-runtime";import{useCallback as b,memo as k}from"react";import{useNavigate as w}from"react-router-dom";import{breakpoints as c,Button as y,useThemeHooks as S}from"@redocly/theme";import{styled as r}from"../../styled-components.js";import{ShareLink as z}from"./ShareLink.js";import{getNavigationIdProp as m}from"../hooks/utils.js";import{joinPath as $}from"../utils/join.js";import{StyledItemHeader as j}from"../../common/components/Headers.js";import{useIsExpanded as I,normalizePath as g}from"./hooks/use-is-expanded.js";import{SectionOverview as C}from"./SectionOverview.js";const G=r.div`
  padding: 0 calc(var(--spacing-horizontal) * 2);
  padding-top: ${({hasGroupName:a})=>a?"calc(var(--spacing-vertical) / 2)":"calc(var(--spacing-vertical) * 1.5)"};
  border-bottom: 1px solid var(--border-color-secondary);
  ${({expanded:a})=>!a&&`
    background-color: var(--layer-color);
  `}

  @media screen and (max-width: ${c.small}) {
    padding-left: var(--spacing-horizontal);
    padding-right: var(--spacing-horizontal);
  }
`,P=r.div`
  padding: 0 calc(var(--spacing-horizontal) * 2);
  padding-top: var(--spacing-vertical);
  ${({expanded:a})=>!a&&`
    background-color: var(--layer-color);
  `}

  @media screen and (max-width: ${c.small}) {
    padding: 0 var(--spacing-horizontal);
    padding-top: var(--spacing-vertical);
  }
`,T=r(y)`
  width: 100%;
  margin-top: var(--spacing-unit);
  margin-bottom: var(--spacing-unit);

  @media screen and (min-width: ${c.medium}) {
    --button-margin-md: calc(var(--spacing-xl) * 2);
  }
`,_=r.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  margin-bottom: var(--spacing-lg);
  margin-top: var(--h2-margin-top);

  @media screen and (min-width: 1280px) {
    flex-direction: row;
  }
`;function B({item:a,children:v,baseUrl:d,groupName:e}){const{useTranslate:h}=S(),{translate:u}=h(),n=I({item:a}),{name:s,id:l}=a,i=$(d,l),p=w(),x=b(()=>{p(i)},[i,p]);return t(f,{children:[e&&o(P,{expanded:n,children:e}),t(G,{...!n&&m(g(i)),expanded:n,hasGroupName:!!e,children:[t(_,{children:[t(j,{...m(g(i)),style:{display:"inline-block"},"data-testid":"group-title",children:[o(z,{to:i,"data-testid":"section-title-link","aria-label":`link to ${s}`}),s]}),o(C,{items:a.items,typeGroupId:a.typeGroupId,baseUrl:d,id:l})]}),o("div",{children:n?v:t(T,{type:"button",variant:"text",size:"medium",onClick:x,children:["+ ",u("graphql.action.show","Show")]})})]})]})}const J=k(B);export{J as Section};