📝 Add ButtonGroup to Storybook

packages/eds-core-react/src/components/Button/Button.docs.mdx

@@ -1,6 +1,6 @@
 
 import { Story, PropsTable, Links } from './../../../.storybook/components'
-import { Button  } from '.'
+import { Button } from '.'
 
 
 # Button 
@@ -26,6 +26,22 @@ import { Button } from '@equinor/eds-core-react'
 <Button>Click me!</Button>
 ```
 
+### Using the 'as' prop to render as another component
+
+The `as` prop allows you to render the `Button` as another html element or even react component. 
+
+```tsx
+<Button as="a" href="/about" target="_blank" rel="noreferrer">About</Button>
+```
+This is especially useful if you want to use the `Button` as as a navigation component for a third party routing library such as react-router.
+
+```tsx
+import { Link } from "react-router-dom"
+import { Button } from '@equinor/eds-core-react'
+
+<Button as={Link} to="/about">About</Button>
+```
+
 ## Examples
 
 ### Basic
@@ -74,20 +90,4 @@ Example All button combinations.
 ### Compact
 
 Compact `Button` using `EdsProvider`.
-<Story id="inputs-button--compact" />
-
-### Using the 'as' prop to render as another component
-
-The `as` prop allows you to render the `Button` as another html element or even react component. 
-
-```tsx
-<Button as="a" href="/about" target="_blank" rel="noreferrer">About</Button>
-```
-This is especially useful if you want to use the `Button` as as a navigation component for a third party routing library such as react-router.
-
-```tsx
-import { Link } from "react-router-dom"
-import { Button } from '@equinor/eds-core-react'
-
-<Button as={Link} to="/about">About</Button>
-```
+<Story id="inputs-button--compact" />

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,14 +317,3 @@ Compact.decorators = [
     </Stack>
   ),
 ]
-
-// export const ButtonGroup: Story<ButtonProps> = () => (
-//   <Stack style={{ gridGap: 0 }}>
-//     <Group>
-//       <Button>Contained</Button>
-//       <Button variant="outlined">Outlined</Button>
-//       <Button variant="outlined">Outlined</Button>
-//       <Button variant="outlined">Outlined</Button>
-//     </Group>
-//   </Stack>
-// )

packages/eds-core-react/src/components/ButtonGroup/ButtonGroup.docs.mdx

@@ -0,0 +1,62 @@
+import { Story, PropsTable, Links } from './../../../.storybook/components'
+import { Button, ButtonGroup } from '.'
+
+# ButtonGroup
+
+Is used to group related buttons.
+
+<Links 
+ariaUrl="https://w3c.github.io/aria/#group"
+sourceUrl="https://github.com/equinor/design-system/blob/develop/packages/eds-core-react/src/components/Group/Group.tsx"
+npmUrl="https://www.npmjs.com/package/@equinor/eds-core-react/"
+/>
+
+<Story id="inputs-buttongroup--introduction" />
+<PropsTable />
+
+## Usage
+
+The buttons can be grouped by wrapping them with the `ButtonGroup` component.
+
+```tsx
+import { Button, ButtonGroup } from '@equinor/eds-core-react'
+
+<ButtonGroup aria-label="button group">
+  <Button>Click me!</Button>
+  <Button>Click me!</Button>
+  <Button>Click me!</Button>
+</ButtonGroup>
+```
+
+### Accessibility
+
+#### ARIA
+<ul>
+  <li>ButtonGroup has <code>role="group"</code>.</li>
+  <li>You should provide an accessible label with <code>aria-label="label"</code>, <code>aria-labelledby="id"</code> or <code>&lt;label&gt;</code>.</li>
+</ul>
+
+#### Keyboard
+<ul>
+  <li>Navigate between buttons with the tab key.</li>
+  <li>The button behavior follows standard keyboard semantics.</li>
+</ul>
+
+## Examples
+
+### Vertical
+
+The `ButtonGroup` can be displayed vertically using the `vertical` prop.
+
+<Story id="inputs-buttongroup--vertical" />
+
+### Split
+
+`ButtonGroup` can also be used to create a split button. <br />
+The dropdown can change the button action (as in this example) or be used to immediately trigger a related action.
+<Story id="inputs-buttongroup--split" />
+
+### Compact
+
+Compact `ButtonGroup` using `EdsProvider`.
+<Story id="inputs-buttongroup--compact" />

packages/eds-core-react/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,137 @@
+import { useState, useEffect } from 'react'
+import { action } from '@storybook/addon-actions'
+import {
+  Button,
+  Density,
+  EdsProvider,
+  ButtonGroup,
+  ButtonGroupProps,
+  Icon,
+  Menu,
+} from '../..'
+import { Story, ComponentMeta } from '@storybook/react'
+import { Stack } from '../../../.storybook/components'
+import page from './ButtonGroup.docs.mdx'
+
+export default {
+  title: 'Inputs/ButtonGroup',
+  component: ButtonGroup,
+  parameters: {
+    docs: {
+      page,
+      source: {
+        excludeDecorators: true,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Stack>
+        <Story />
+      </Stack>
+    ),
+  ],
+} as ComponentMeta<typeof ButtonGroup>
+
+export const Introduction: Story<ButtonGroupProps> = (args) => {
+  return (
+    <ButtonGroup aria-label="button group" {...args}>
+      <Button>Contained</Button>
+      <Button variant="outlined">Outlined</Button>
+      <Button variant="outlined">Outlined</Button>
+      <Button variant="outlined">Outlined</Button>
+    </ButtonGroup>
+  )
+}
+
+export const Vertical: Story<ButtonGroupProps> = () => (
+  <ButtonGroup aria-label="vertical" vertical>
+    <Button>Contained</Button>
+    <Button variant="outlined">Outlined</Button>
+    <Button variant="outlined">Outlined</Button>
+    <Button variant="outlined">Outlined</Button>
+  </ButtonGroup>
+)
+
+export const Split: Story<ButtonGroupProps> = () => {
+  const options = ['Create task', 'Update task', 'Delete task']
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>(null)
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  const handleMenuItemClick = (event: React.MouseEvent, index: number) => {
+    action('click')(event)
+    event.stopPropagation()
+    setSelectedIndex(index)
+  }
+
+  const openMenu = () => {
+    setIsOpen(true)
+  }
+
+  const closeMenu = () => {
+    setIsOpen(false)
+  }
+
+  return (
+    <ButtonGroup aria-label="split button" style={{ gap: '1px' }}>
+      <Button>{options[selectedIndex]}</Button>
+      <Button
+        ref={setAnchorEl}
+        aria-label="select task action"
+        aria-haspopup="true"
+        aria-controls="menu-default"
+        id="anchor-split"
+        onClick={() => (isOpen ? closeMenu() : openMenu())}
+        style={{ padding: '0 4px' }}
+      >
+        <Icon name="arrow_drop_down" title="arrow_down"></Icon>
+      </Button>
+      <Menu
+        open={isOpen}
+        id="menu-split"
+        aria-labelledby="anchor-split"
+        onClose={closeMenu}
+        anchorEl={anchorEl}
+      >
+        {options.map((option, index) => (
+          <Menu.Item
+            key={option}
+            disabled={index === 2}
+            onClick={(event: React.MouseEvent) =>
+              handleMenuItemClick(event, index)
+            }
+          >
+            {option}
+          </Menu.Item>
+        ))}
+      </Menu>
+    </ButtonGroup>
+  )
+}
+
+export const Compact: Story<ButtonGroupProps> = () => {
+  const [density, setDensity] = useState<Density>('comfortable')
+
+  useEffect(() => {
+    // Simulate user change
+    setDensity('compact')
+  }, [density])
+
+  return (
+    <EdsProvider density={density}>
+      <ButtonGroup aria-label="button group compact">
+        <Button>Contained</Button>
+        <Button variant="outlined">Outlined</Button>
+        <Button variant="outlined">Outlined</Button>
+        <Button variant="outlined">Outlined</Button>
+      </ButtonGroup>
+      <ButtonGroup aria-label="vertical button group compact" vertical>
+        <Button>Contained</Button>
+        <Button variant="outlined">Outlined</Button>
+        <Button variant="outlined">Outlined</Button>
+        <Button variant="outlined">Outlined</Button>
+      </ButtonGroup>
+    </EdsProvider>
+  )
+}

packages/eds-core-react/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, HTMLAttributes } from 'react'
+import styled, { css } from 'styled-components'
+import { group as tokens } from './ButtonGroup.tokens'
+
+const { border } = tokens
+
+export type ButtonGroupProps = {
+  /** Display ButtonGroup vertically. */
+  vertical?: boolean
+} & HTMLAttributes<HTMLDivElement>
+
+const radius = border.type === 'border' && border.radius
+
+const ButtonGroupBase = styled.div<ButtonGroupProps>`
+  display: inline-flex;
+  > * {
+    border-radius: 0;
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        border-radius: 0;
+      }
+    }
+  }
+  ${({ vertical }) =>
+    vertical
+      ? css`
+          flex-direction: column;
+          > :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 ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  function ButtonGroup({ children, vertical, ...rest }, ref) {
+    const props = {
+      ref,
+      vertical,
+      ...rest,
+    }
+    return (
+      <ButtonGroupBase role="group" {...props}>
+        {children}
+      </ButtonGroupBase>
+    )
+  },
+)

packages/eds-core-react/src/components/ButtonGroup/index.ts

@@ -0,0 +1 @@
+export * from './ButtonGroup'