diff --git a/packages/fuselage/src/components/Divider/Divider.stories.tsx b/packages/fuselage/src/components/Divider/Divider.stories.tsx index 785f965b26..9c5844d2c4 100644 --- a/packages/fuselage/src/components/Divider/Divider.stories.tsx +++ b/packages/fuselage/src/components/Divider/Divider.stories.tsx @@ -1,7 +1,7 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react'; import React from 'react'; -import { Divider } from '../..'; +import { ButtonGroup, Divider, IconButton } from '..'; export default { title: 'Data Display/Divider', @@ -17,3 +17,16 @@ export const WithText: ComponentStory = Template.bind({}); WithText.args = { children: 'Divider', }; + +export const Vertical: ComponentStory = Template.bind({}); +Vertical.args = { + vertical: true, +}; + +export const AsButtonSeparator = () => ( + + + + + +); diff --git a/packages/fuselage/src/components/Divider/Divider.styles.scss b/packages/fuselage/src/components/Divider/Divider.styles.scss index 1f6dbc4e66..08695a702d 100644 --- a/packages/fuselage/src/components/Divider/Divider.styles.scss +++ b/packages/fuselage/src/components/Divider/Divider.styles.scss @@ -33,4 +33,11 @@ $divider-color: theme('divider-color', colors.stroke(extra-light)); margin-block: lengths.margin(8); padding-inline: lengths.padding(8); } + + &--vertical { + width: 0; + height: lengths.size(20); + margin-block: 0; + margin-inline: lengths.margin(8); + } } diff --git a/packages/fuselage/src/components/Divider/Divider.tsx b/packages/fuselage/src/components/Divider/Divider.tsx index 2be2f0d565..c81a71668d 100644 --- a/packages/fuselage/src/components/Divider/Divider.tsx +++ b/packages/fuselage/src/components/Divider/Divider.tsx @@ -6,14 +6,16 @@ import Box from '../Box'; type DividerProps = ComponentProps & { variation?: 'danger'; children?: ReactNode; + vertical?: boolean; }; -const Divider = ({ variation, children, ...props }: DividerProps) => { +const Divider = ({ variation, children, vertical, ...props }: DividerProps) => { if (!children) { return (