Skip to contentSkip to navigationSkip to topbar
Figma
Star

Summary Detail

Version 1.0.0GithubStorybookDesign assets pendingPeer review pending

A Summary Detail is a collapsible container that can be used to hide or show content.


<SummaryDetail>
  <SummaryDetailHeading>
    <SummaryDetailToggleButton aria-label="BOOP" />
    <SummaryDetailHeadingContent>
      <Text as="p" fontWeight="fontWeightBold">
        Inbound Call
      </Text>
      <Text as="p" fontSize="fontSize20" fontWeight="fontWeightLight">
        Jan 11, 2023
        <Anchor href="#" marginLeft="space30">
          (View transcript)
        </Anchor>
      </Text>
    </SummaryDetailHeadingContent>
  </SummaryDetailHeading>
  <SummaryDetailContent>
    <Text as="strong">Agent: </Text>
    <Text as="span">John Doe</Text>
    <Text as="span" marginX="space40" color="colorTextWeaker">
      |
    </Text>
    <Text as="strong">Duration: </Text>
    <Text as="span">3m 14s</Text>
  </SummaryDetailContent>
</SummaryDetail>

Guidelines

Guidelines page anchor

About Summary Detail

About Summary Detail page anchor

The Summary Detail component displays a summary of information that can be expanded to show more information. It can be used when you need more click targets and actions in a Disclosure Heading.

  • Only the toggle button is tabbable and clickable to reveal the content.
  • The toggle button is labelled by the SummaryDetailHeadingContent component.
    • If the heading content is unclear or too verbose, you can provide an aria-label to SummaryDetailToggleButton directly to enable a more descriptive label.

This example shows how you can compose the Text component to compose a basic Summary Detail.


<SummaryDetail>
  <SummaryDetailHeading>
    <SummaryDetailToggleButton aria-label="BOOP" />
    <SummaryDetailHeadingContent>
      <Text as="p" fontWeight="fontWeightBold">
        Inbound Call
      </Text>
      <Text as="p" fontSize="fontSize20" fontWeight="fontWeightLight">
        Jan 11, 2023
        <Anchor href="#" marginLeft="space30">
          (View transcript)
        </Anchor>
      </Text>
    </SummaryDetailHeadingContent>
  </SummaryDetailHeading>
  <SummaryDetailContent>
    <Text as="strong">Agent: </Text>
    <Text as="span">John Doe</Text>
    <Text as="span" marginX="space40" color="colorTextWeaker">
      |
    </Text>
    <Text as="strong">Duration: </Text>
    <Text as="span">3m 14s</Text>
  </SummaryDetailContent>
</SummaryDetail>

You can set the content to be visible by default with the visible prop.


<SummaryDetail visible>
  <SummaryDetailHeading>
    <SummaryDetailToggleButton aria-label="BOOP" />
    <SummaryDetailHeadingContent>
      <Text as="p" fontWeight="fontWeightBold">
        Inbound Call
      </Text>
      <Text as="p" fontSize="fontSize20" fontWeight="fontWeightLight">
        Jan 11, 2023
      </Text>
    </SummaryDetailHeadingContent>
  </SummaryDetailHeading>
  <SummaryDetailContent>
    <Text as="strong">Agent: </Text>
    <Text as="span">John Doe</Text>
    <Text as="span" marginX="space40" color="colorTextWeaker">
      |
    </Text>
    <Text as="strong">Duration: </Text>
    <Text as="span">3m 14s</Text>
  </SummaryDetailContent>
</SummaryDetail>

You can control the internal behavior of the Summary Detail component by way of inversion of control(link takes you to an external page). This is useful for when you want to control the visibility of the Summary Detail component from a parent component.

const useDelayedSummaryDetailState = ({
  delay,
  ...initialState
}) => {
  const disclosure = useSummaryDetailState(initialState);
  const [transitioning, setTransitioning] = React.useState(false);
  return {
    ...disclosure,
    transitioning,
    toggle: () => {
      setTransitioning(true);
      setTimeout(() => {
        disclosure.toggle();
        setTransitioning(false);
      }, delay);
    },
  };
};
const StateHook = () => {
  const { transitioning, ...summaryDetailState } = useDelayedSummaryDetailState({
    delay: 500,
  });
  const clickableHeading = summaryDetailState.visible ? "Hide with delay" : "Show with delay";
  return (
    <>
      <Paragraph>This Disclosure should be visible on load, and take 1 second to open and close.</Paragraph>
      <SummaryDetail state={summaryDetailState}>
        <SummaryDetailHeading>
          <SummaryDetailToggleButton />
          <SummaryDetailHeadingContent>
            {transitioning ? "Please wait..." : clickableHeading}
          </SummaryDetailHeadingContent>
        </SummaryDetailHeading>
        <SummaryDetailContent>
          <Text as="strong">Agent: </Text>
          <Text as="span">John Doe</Text>
          <Text as="span" marginX="space40" color="colorTextWeaker">
            |
          </Text>
          <Text as="strong">Duration: </Text>
          <Text as="span">3m 14s</Text>
        </SummaryDetailContent>
      </SummaryDetail>
    </>
  );
};