@wix/design-system

## Feature Examples ### Size - description: Control the size of a section header with the <code>size</code> prop:<li><code>medium</code> (default) is the standard used in common cases.</li><li><code>small</code> is used in dense layouts and panels.</li> - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <SectionHeader title="Medium" size="medium" /> <SectionHeader title="Small" size="small" /> </StorybookComponents.Stack>; ``` ### Horizontal padding - description: Adjust the <code>horizontalPadding</code> of a section header according to the content padding inside the following section:<li><code>large</code> (default)</li><li><code>medium</code></li><li><code>small</code></li><li><code>tiny</code></li><li><code>xTiny</code></li><li><code>xxTiny</code></li> - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <SectionHeader title="Large" horizontalPadding="large" /> <SectionHeader title="Medium" horizontalPadding="medium" /> <SectionHeader title="Small" horizontalPadding="small" /> <SectionHeader title="Tiny" horizontalPadding="tiny" /> <SectionHeader title="Extra tiny" horizontalPadding="xTiny" /> <SectionHeader title="Extra-extra tiny" horizontalPadding="xxTiny" /> </StorybookComponents.Stack>; ``` ### Skin - description: Control the style of a section header using the <code>skin</code> prop:<li><code>standard</code> is the default and is used in most cases.</li><li><code>neutral</code> is used to minimize the component’s visual weight.</li><li><code>light</code> is used as a completely minimal header that blends in with rest of the content.</li> - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <SectionHeader title="Standard" skin="standard" /> <SectionHeader title="Neutral" skin="neutral" /> <SectionHeader title="Light" skin="light" /> </StorybookComponents.Stack>; ``` ### Dividers - description: Control which dividers are visible with the <code>divider</code> prop:<li>By default, a section header has both top and bottom dividers.</li><li>Use <code>top</code> when there is already a divider at the bottom of a component.</li><li>Use <code>bottom</code> when there is already a divider at the top of a component.</li><li>Use <code>none</code> when there are already dividers at the top and bottom of a component.</li> - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <SectionHeader title="Default" /> <SectionHeader title="Top" divider="top" /> <SectionHeader title="Bottom" divider="bottom" /> <SectionHeader title="No dividers" divider="none" /> </StorybookComponents.Stack>; ``` ### Suffix - description: Use a <code>suffix</code> container to add info or actions that relate to the content below a section header.A variety of components can be used in the suffix:<li><code><InfoIcon/></code></li><li><code><TextButton/></code></li><li><code><Button/></code></li><li><code><IconButton/></code></li><li><code><Text/></code> or others</li> - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <SectionHeader suffix={ <InfoIcon size="small" content="Info icon gives more information about a section." /> } /> <SectionHeader suffix={ <TextButton size="tiny" priority="secondary" prefixIcon=<Icons.AddSmall /> > Suffix </TextButton> } /> <SectionHeader suffix={ <Button size="tiny" priority="secondary"> Suffix </Button> } /> <SectionHeader suffix={ <IconButton size="tiny" priority="secondary"> <Icons.MoreSmall /> </IconButton> } /> <SectionHeader suffix={<Text size="tiny">Suffix</Text>} /> </StorybookComponents.Stack>; ``` ### Title - description: Use the <code>title</code> prop to describe the content that appears below the section header.The default is a text value, but the container can accept any component. - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <SectionHeader title="Default" /> <SectionHeader title={ <Text weight="bold" size="small"> Custom title </Text> } /> <SectionHeader title=<StorybookComponents.Placeholder height="24px" /> /> </StorybookComponents.Stack>; ``` ### Title alignment - description: Control the title's position with the <code>align</code> prop:<li>Use <code>start</code> (default) for left-aligned lists.</li><li>Use <code>center</code> in settings panels.</li> - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <SectionHeader title="Start" align="start" /> <SectionHeader title="Center" align="center" /> </StorybookComponents.Stack>; ``` ### Title overflow - description: Title text that does not fit in one line gets truncated with an ellipsis.The full text appears in a tooltip when hovering over the truncated text. - example: ```jsx <SectionHeader title="A very long section title goes into a title container in this case. It even has multiple sentences inside. It will be truncated by ellipses once it reaches the second line" />; ``` ## Common Use Case Examples ### Group content in cards - description: Use section headers to organize card info into separate categories.This makes the whole card easier to scan. - example: ```jsx () => { const items = [ { sectionTitle: 'Monday, Feb 7', }, { time: '7:00 PM - 9:00 PM', event: 'Registration & reception', }, { sectionTitle: 'Tuesday, Feb 8', }, { time: '8:00 AM - 10:00 AM', event: 'Keynote address by Steven H. Kastner', divider: true, }, { time: '10:00 AM - 1:00 PM', event: 'Break & networking', divider: true, }, { time: '1:00 PM - 3:00 PM', event: 'Keynote address by Linda Contreras', divider: true, }, { time: '7:00 PM - 9:00 PM', event: 'Evening reception', }, { sectionTitle: 'Wednesday, Feb 9', }, { time: '8:00 AM - 10:00 AM', event: 'Keynote address by Susan W. Eaton', divider: true, }, { time: '10:00 AM - 1:00 PM', event: 'Keynote address by Bjorn Rettig', }, ]; const pirmaryAction = { text: 'Edit', }; const secondaryActions = [ { text: 'Hide', icon: <Icons.HiddenSmall />, onClick: () => ({}), }, { text: 'Cancel', icon: <Icons.BlockSmall />, onClick: () => ({}), }, { text: 'Delete', icon: <Icons.DeleteSmall />, onClick: () => ({}), }, ]; const actionsList = ( <TableActionCell primaryAction={pirmaryAction} secondaryActions={secondaryActions} numOfVisibleSecondaryActions={0} size="small" /> ); const primaryAction = ( <Button size="small" priority="secondary" prefixIcon={<Icons.AddSmall />}> Add Item </Button> ); return ( <Card hideOverflow> <Card.Header title="Event schedule" subtitle="Build a schedule to keep guests informed throughout your event." suffix={primaryAction} /> {items.map((params) => { if (params.sectionTitle) { return <SectionHeader title={params.sectionTitle} size="small" />; } return ( <TableListItem showDivider={params.divider} onClick={() => {}} options={[ { value: <Text size="small">{params.time}</Text>, width: '25%' }, { value: <Text size="small">{params.event}</Text>, width: '50%' }, { value: actionsList }, ]} /> ); })} </Card> ); }; ```