diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts index ee40c5a4d7..42470f6941 100644 --- a/cypress/integration/sitemap-vrt/constants.ts +++ b/cypress/integration/sitemap-vrt/constants.ts @@ -203,6 +203,9 @@ export const SITEMAP = [ "/components/slider/", "/components/slider/api", "/components/slider/changelog", + "/components/summary-detail/", + "/components/summary-detail/api", + "/components/summary-detail/changelog", "/components/switch/", "/components/switch/api", "/components/switch/changelog", diff --git a/packages/paste-core/components/summary-detail/stories/index.stories.tsx b/packages/paste-core/components/summary-detail/stories/index.stories.tsx index 1f55a88a34..7f732a2933 100644 --- a/packages/paste-core/components/summary-detail/stories/index.stories.tsx +++ b/packages/paste-core/components/summary-detail/stories/index.stories.tsx @@ -1,4 +1,5 @@ import type { StoryFn } from "@storybook/react"; +import { Anchor } from "@twilio-paste/anchor"; import { Box } from "@twilio-paste/box"; import { Card } from "@twilio-paste/card"; import { Paragraph } from "@twilio-paste/paragraph"; @@ -32,6 +33,9 @@ export const Default: StoryFn = () => { Jan 11, 2023 + + (View transcript) + diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json index 313977abd6..4c12500af7 100644 --- a/packages/paste-website/package.json +++ b/packages/paste-website/package.json @@ -117,6 +117,7 @@ "@twilio-paste/status": "^2.1.1", "@twilio-paste/style-props": "^9.1.1", "@twilio-paste/styling-library": "^3.0.0", + "@twilio-paste/summary-detail": "^1.0.0", "@twilio-paste/switch": "^5.1.1", "@twilio-paste/syntax-highlighter-library": "^3.0.0", "@twilio-paste/table": "^8.2.0", diff --git a/packages/paste-website/src/pages/components/summary-detail/api.mdx b/packages/paste-website/src/pages/components/summary-detail/api.mdx new file mode 100644 index 0000000000..b15bb7bd78 --- /dev/null +++ b/packages/paste-website/src/pages/components/summary-detail/api.mdx @@ -0,0 +1,76 @@ +export const meta = { + title: 'Summary Detail - Components - API', + description: + 'A Summary Detail is a collapsible container that can be used to hide or show content.', + slug: '/components/summary-detail/api', +}; + +import Changelog from '@twilio-paste/summary-detail/CHANGELOG.md'; // I don't know why this is needed but if you remove it the page fails to render +import packageJson from '@twilio-paste/summary-detail/package.json'; + +import {SidebarCategoryRoutes} from '../../../constants'; +import ComponentPageLayout from '../../../layouts/ComponentPageLayout'; +import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api'; + +export default ComponentPageLayout; + +export const getStaticProps = async () => { + const navigationData = await getNavigationData(); + const feature = await getFeature('Summary Detail'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/summary-detail'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + componentApi, + mdxHeadings: [...mdxHeadings, ...componentApiTocData], + navigationData, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/summary-detail', + storybookUrl: '/?path=/story/components-summarydetail--default', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/summary-detail - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import { + SummaryDetail, + SummaryDetailContent, + SummaryDetailHeading, + SummaryDetailHeadingContent, + SummaryDetailToggleButton, +} from '@twilio-paste/core/summary-detail'; +import {Text} from '@twilio-paste/core/text'; + +const SummaryDetailExample = () => { + return ( + + + + + Inbound Call + + + + This is the content of the summary detail. + + + ); +}; +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/summary-detail/changelog.mdx b/packages/paste-website/src/pages/components/summary-detail/changelog.mdx new file mode 100644 index 0000000000..aea5cce961 --- /dev/null +++ b/packages/paste-website/src/pages/components/summary-detail/changelog.mdx @@ -0,0 +1,37 @@ +export const meta = { + title: 'Summary Detail - Components - Changelog', + description: + 'A Summary Detail is a collapsible container that can be used to hide or show content.', + slug: '/components/summary-detail/changelog', +}; + +import Changelog from '@twilio-paste/summary-detail/CHANGELOG.md'; +import packageJson from '@twilio-paste/summary-detail/package.json'; + +import {SidebarCategoryRoutes} from '../../../constants'; +import ComponentPageLayout from '../../../layouts/ComponentPageLayout'; +import {getFeature, getNavigationData} from '../../../utils/api'; + +export default ComponentPageLayout; + +export const getStaticProps = async () => { + const navigationData = await getNavigationData(); + const feature = await getFeature('Summary Detail'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/summary-detail', + storybookUrl: '/?path=/story/components-summarydetail--default', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/summary-detail/index.mdx b/packages/paste-website/src/pages/components/summary-detail/index.mdx new file mode 100644 index 0000000000..b94aebd3c2 --- /dev/null +++ b/packages/paste-website/src/pages/components/summary-detail/index.mdx @@ -0,0 +1,221 @@ +export const meta = { + title: 'Summary Detail - Components', + description: + 'A Summary Detail is a collapsible container that can be used to hide or show content.', + slug: '/components/summary-detail', +}; + +import {Anchor} from '@twilio-paste/anchor'; +import {Avatar} from '@twilio-paste/avatar'; +import {Box} from '@twilio-paste/box'; +import {Button} from '@twilio-paste/button'; +import {Card} from '@twilio-paste/card'; +import {Heading} from '@twilio-paste/heading'; +import {Paragraph} from '@twilio-paste/paragraph'; +import {SummaryDetail} from '@twilio-paste/summary-detail'; +import {Stack} from '@twilio-paste/stack'; +import {Table, THead, TBody, Tr, Td, Th} from '@twilio-paste/table'; +import {Text} from '@twilio-paste/text'; +import {CalendarIcon} from '@twilio-paste/icons/esm/CalendarIcon'; +import packageJson from '@twilio-paste/summary-detail/package.json'; +import {SidebarCategoryRoutes} from '../../../constants'; +import ComponentPageLayout from '../../../layouts/ComponentPageLayout'; +import {getFeature, getNavigationData} from '../../../utils/api'; + +export default ComponentPageLayout; + +export const getStaticProps = async () => { + const navigationData = await getNavigationData(); + const feature = await getFeature('Summary Detail'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/summary-detail', + storybookUrl: '/?path=/story/components-summarydetail--default', + }, + }, + }; +}; + + + + + + + + Inbound Call + + + Jan 11, 2023 + + (View transcript) + + + + + + Agent: + John Doe + + | + + Duration: + 3m 14s + +`} +/> + +## 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](/primitives/text) to compose a +basic Summary Detail. + + + + + + + Inbound Call + + + Jan 11, 2023 + + (View transcript) + + + + + + Agent: + John Doe + + | + + Duration: + 3m 14s + +`} +/> + +### Open by default + +You can set the content to be visible by default with the `visible` prop. + + + + + + + Inbound Call + + + Jan 11, 2023 + + + + + Agent: + John Doe + + | + + Duration: + 3m 14s + +`} +/> + +### State hook + +You can control the internal behavior of the Summary Detail component by way of [inversion of control](https://kentcdodds.com/blog/inversion-of-control). +This is useful for when you want to control the visibility of the Summary Detail component from a parent component. + + { + 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 ( + <> + This Disclosure should be visible on load, and take 1 second to open and close. + + + + + {transitioning ? "Please wait..." : clickableHeading} + + + + Agent: + John Doe + + | + + Duration: + 3m 14s + + + + ); +};`} +/> diff --git a/yarn.lock b/yarn.lock index bfcdd958b6..b555dad647 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15827,6 +15827,7 @@ __metadata: "@twilio-paste/status": ^2.1.1 "@twilio-paste/style-props": ^9.1.1 "@twilio-paste/styling-library": ^3.0.0 + "@twilio-paste/summary-detail": ^1.0.0 "@twilio-paste/switch": ^5.1.1 "@twilio-paste/syntax-highlighter-library": ^3.0.0 "@twilio-paste/table": ^8.2.0