diff --git a/storybook/stories/foundations/layout/headers-code.tsx b/storybook/stories/foundations/layout/headers-code.tsx index 8cba9a0bb65d6c..46ce0889070f49 100644 --- a/storybook/stories/foundations/layout/headers-code.tsx +++ b/storybook/stories/foundations/layout/headers-code.tsx @@ -7,8 +7,149 @@ import React from 'react'; /** * WordPress dependencies */ -import { Button } from '@wordpress/components'; +import { + Button, + __experimentalHStack as HStack, + __experimentalVStack as VStack, + __experimentalText as Text, + __experimentalHeading as Heading, + Card, + CardHeader, + CardBody, + CardFooter, + DropdownMenu, +} from '@wordpress/components'; -export const HeaderExample = () => { - return ; +import { Icon, moreVertical, page, chevronLeft } from '@wordpress/icons'; + +export const HeaderExampleLowDensity = () => { + return ( + + + + + + {}, + title: 'Action', + }, + { + onClick: () => {}, + title: 'Action', + }, + ] } + icon={ moreVertical } + label="More actions" + onToggle={ () => {} } + style={ { flexShrink: '0' } } + toggleProps={ { __next40pxDefaultSize: true } } + /> + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam sollicitudin mauris tellus, vitae tempor urna + eleifend vel. Curabitur porttitor vulputate nulla, a + mollis enim condimentum convallis. + + + + Section body + Section Footer + + ); +}; + +export const HeaderExampleHighDensity = () => { + return ( + + + + +