✨ Add vertical prop & story

equinor · Aug 22, 2022 · e44193e · e44193e
1 parent 9f34af0
commit e44193e
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 70 deletions.
diff --git a/packages/eds-core-react/src/components/Button/Button.docs.mdx b/packages/eds-core-react/src/components/Button/Button.docs.mdx
@@ -90,11 +90,4 @@ Example All button combinations.
 ### Compact
 
 Compact `Button` using `EdsProvider`.
-<Story id="inputs-button--compact" />
-
-
-
-#### Compact
-
-Compact `Button` using `EdsProvider`.
-<Story id="inputs-button--compact-button-group" />
+<Story id="inputs-button--compact" />
diff --git a/packages/eds-core-react/src/components/Button/Button.stories.tsx b/packages/eds-core-react/src/components/Button/Button.stories.tsx
@@ -10,7 +10,6 @@ import {
 import { Story, ComponentMeta } from '@storybook/react'
 import { menu, add, save } from '@equinor/eds-icons'
 import { Stack } from './../../../.storybook/components'
-import { Group } from '../Group'
 import page from './Button.docs.mdx'
 
 export default {
@@ -318,31 +317,3 @@ Compact.decorators = [
     </Stack>
   ),
 ]
-
-export const CompactButtonGroup: Story<ButtonProps> = () => {
-  const [density, setDensity] = useState<Density>('comfortable')
-
-  useEffect(() => {
-    // Simulate user change
-    setDensity('compact')
-  }, [density])
-
-  return (
-    <EdsProvider density={density}>
-      <Group>
-        <Button>Contained</Button>
-        <Button variant="outlined">Outlined</Button>
-        <Button variant="outlined">Outlined</Button>
-        <Button variant="outlined">Outlined</Button>
-      </Group>
-    </EdsProvider>
-  )
-}
-CompactButtonGroup.storyName = 'Compact button group'
-CompactButtonGroup.decorators = [
-  (Story) => (
-    <Stack>
-      <Story />
-    </Stack>
-  ),
-]
diff --git a/packages/eds-core-react/src/components/Group/Group.docs.mdx b/packages/eds-core-react/src/components/Group/Group.docs.mdx
@@ -28,4 +28,13 @@ import { Button, Group } from '@equinor/eds-core-react'
 </Group>
 ```
 
-## Examples
+## Examples
+
+### Vertical
+
+<Story id="inputs-group--vertical" />
+
+### Compact
+
+Compact `Group` using `EdsProvider`.
+<Story id="inputs-group--compact" />
diff --git a/packages/eds-core-react/src/components/Group/Group.stories.tsx b/packages/eds-core-react/src/components/Group/Group.stories.tsx
@@ -1,4 +1,5 @@
-import { Button, Group, GroupProps } from '../..'
+import { useState, useEffect } from 'react'
+import { Button, Density, EdsProvider, Group, GroupProps } from '../..'
 import { Story, ComponentMeta } from '@storybook/react'
 import { Stack } from './../../../.storybook/components'
 import page from './Group.docs.mdx'
@@ -33,3 +34,38 @@ export const Introduction: Story<GroupProps> = (args) => {
     </Group>
   )
 }
+
+export const Vertical: Story<GroupProps> = () => (
+  <Group vertical>
+    <Button>Contained</Button>
+    <Button variant="outlined">Outlined</Button>
+    <Button variant="outlined">Outlined</Button>
+    <Button variant="outlined">Outlined</Button>
+  </Group>
+)
+
+export const Compact: Story<GroupProps> = () => {
+  const [density, setDensity] = useState<Density>('comfortable')
+
+  useEffect(() => {
+    // Simulate user change
+    setDensity('compact')
+  }, [density])
+
+  return (
+    <EdsProvider density={density}>
+      <Group>
+        <Button>Contained</Button>
+        <Button variant="outlined">Outlined</Button>
+        <Button variant="outlined">Outlined</Button>
+        <Button variant="outlined">Outlined</Button>
+      </Group>
+      <Group vertical>
+        <Button>Contained</Button>
+        <Button variant="outlined">Outlined</Button>
+        <Button variant="outlined">Outlined</Button>
+        <Button variant="outlined">Outlined</Button>
+      </Group>
+    </EdsProvider>
+  )
+}
diff --git a/packages/eds-core-react/src/components/Group/Group.tsx b/packages/eds-core-react/src/components/Group/Group.tsx
@@ -1,44 +1,64 @@
-import { forwardRef } from 'react'
+import { forwardRef, HTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import { group as tokens } from './Group.tokens'
 
 const { border } = tokens
 
-const GroupBase = styled.div(() => {
-  const radius = border.type === 'border' && border.radius
+export type GroupProps = {
+  /** Display Group in vertical direction. */
+  vertical?: boolean
+} & HTMLAttributes<HTMLDivElement>
 
-  return css`
-    > * {
-      border-radius: 0;
-      @media (hover: hover) and (pointer: fine) {
-        &:hover {
-          border-radius: 0;
-        }
+const radius = border.type === 'border' && border.radius
+
+const GroupBase = styled.div<GroupProps>`
+  > * {
+    border-radius: 0;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        border-radius: 0;
       }
     }
-    > :first-child {
-      border-top-left-radius: ${radius};
-      border-bottom-left-radius: ${radius};
-    }
-    > :last-child {
-      border-top-right-radius: ${radius};
-      border-bottom-right-radius: ${radius};
-    }
-    > :not(:last-child) {
-      border-right: none;
-    }
-  `
-})
-
-export type GroupProps = React.HTMLAttributes<HTMLDivElement>
+  }
+  ${({ vertical }) =>
+    vertical
+      ? css`
+          display: grid;
+          > :first-child {
+            border-top-left-radius: ${radius};
+            border-top-right-radius: ${radius};
+          }
+          > :last-child {
+            border-bottom-left-radius: ${radius};
+            border-bottom-right-radius: ${radius};
+          }
+          > :not(:last-child) {
+            border-bottom: none;
+          }
+        `
+      : css`
+          > :first-child {
+            border-top-left-radius: ${radius};
+            border-bottom-left-radius: ${radius};
+          }
+          > :last-child {
+            border-top-right-radius: ${radius};
+            border-bottom-right-radius: ${radius};
+          }
+          > :not(:last-child) {
+            border-right: none;
+          }
+        `}
+`
 
 export const Group = forwardRef<HTMLDivElement, GroupProps>(function Group(
-  { children, ...rest },
+  { children, vertical, ...rest },
   ref,
 ) {
-  return (
-    <GroupBase ref={ref} {...rest}>
-      {children}
-    </GroupBase>
-  )
+  const props = {
+    ref,
+    vertical,
+    ...rest,
+  }
+  return <GroupBase {...props}>{children}</GroupBase>
 })