Summary Detail

Version 1.0.0Github StorybookDesign 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

About Summary Detail

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.

Accessibility

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.

Examples

Basic usage

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

Open in Storybook


<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>

Open by default

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

Open in Storybook


<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>

State hook

You can control the internal behavior of the Summary Detail component by way of inversion of control. This is useful for when you want to control the visibility of the Summary Detail component from a parent component.

Open in Storybook

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>
    </>
  );
};