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

Redocly GraphQL docs

import{jsx as n,jsxs as t,Fragment as f}from"react/jsx-runtime";import{useCallback as w,memo as b}from"react";import{useNavigate as y}from"react-router-dom";import{breakpoints as e,Button as k,useThemeHooks as S,PageActions as $}from"@redocly/theme";import{styled as o}from"../../styled-components.js";import{ShareLink as z}from"./ShareLink.js";import{getNavigationIdProp as m}from"../hooks/utils.js";import{joinPath as j}from"../utils/join.js";import{StyledItemHeader as I}from"../../common/components/Headers.js";import{useIsExpanded as C,normalizePath as g}from"./hooks/use-is-expanded.js";import{SectionOverview as G}from"./SectionOverview.js";const P=o.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: ${e.small}) {
    padding-left: var(--spacing-horizontal);
    padding-right: var(--spacing-horizontal);
  }
`,H=o.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: ${e.small}) {
    padding: 0 var(--spacing-horizontal);
    padding-top: var(--spacing-vertical);
  }
`,T=o(k)`
  width: 100%;
  margin-top: var(--spacing-unit);
  margin-bottom: var(--spacing-unit);

  @media screen and (min-width: ${e.medium}) {
    --button-margin-md: calc(var(--spacing-xl) * 2);
  }
`,_=o.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;
  }
`,B=o.div`
  display: flex;
  width: calc(var(--panel-samples-width) - 32px);

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