From d418221570008dd24e14ce5c142268fe5ff9f309 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Thu, 1 Sep 2022 15:27:50 -0300
Subject: [PATCH] feat(fuselage): Vertical Divider (#840)

---
 .../src/components/Divider/Divider.stories.tsx    | 15 ++++++++++++++-
 .../src/components/Divider/Divider.styles.scss    |  7 +++++++
 .../fuselage/src/components/Divider/Divider.tsx   |  4 +++-
 3 files changed, 24 insertions(+), 2 deletions(-)

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<typeof Divider> = Template.bind({});
 WithText.args = {
   children: 'Divider',
 };
+
+export const Vertical: ComponentStory<typeof Divider> = Template.bind({});
+Vertical.args = {
+  vertical: true,
+};
+
+export const AsButtonSeparator = () => (
+  <ButtonGroup medium>
+    <IconButton small icon='phone' />
+    <Divider vertical />
+    <IconButton small icon='user' />
+  </ButtonGroup>
+);
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<typeof Box> & {
   variation?: 'danger';
   children?: ReactNode;
+  vertical?: boolean;
 };
 
-const Divider = ({ variation, children, ...props }: DividerProps) => {
+const Divider = ({ variation, children, vertical, ...props }: DividerProps) => {
   if (!children) {
     return (
       <Box
         is='hr'
         rcx-divider
+        rcx-divider--vertical={vertical}
         rcx-divider--danger={variation === 'danger'}
         {...props}
       />