<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>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
SummaryDetailHeadingContentcomponent.- If the heading content is unclear or too verbose, you can provide an
aria-labeltoSummaryDetailToggleButtondirectly to enable a more descriptive label.
- If the heading content is unclear or too verbose, you can provide an
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. 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>
</>
);
};