feat: Allow Button to display an icon without a label

packages/css/src/components/button/button.scss

@@ -95,3 +95,17 @@
     color: var(--ams-button-tertiary-hover-color);
   }
 }
+
+.ams-button--icon-only {
+  padding-block: var(--ams-button-icon-only-padding-block);
+  padding-inline: var(--ams-button-icon-only-padding-inline);
+}
+
+// TODO: Proposition
+// .ams-button--icon-start {
+//   padding-inline-start: var(--ams-button-icon-start-padding-inline-start);
+// }
+
+// .ams-button--icon-end {
+//   padding-inline-end: var(--ams-button-icon-end-padding-inline-end);
+// }

packages/react/src/Button/Button.test.tsx

@@ -1,3 +1,4 @@
+import { ShareIcon } from '@amsterdam/design-system-react-icons'
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { createRef } from 'react'
@@ -104,10 +105,51 @@ describe('Button', () => {
   it('is able to pass a React ref', () => {
     const ref = createRef<HTMLButtonElement>()
 
-    const { container } = render(<Button ref={ref} />)
+    const { container } = render(<Button ref={ref}>Click me!</Button>)
 
     const button = container.querySelector(':only-child')
 
     expect(ref.current).toBe(button)
   })
+
+  it('renders a button with an icon', () => {
+    render(<Button icon={ShareIcon}>Share</Button>)
+
+    const button = screen.getByRole('button', {
+      name: 'Share',
+    })
+
+    expect(button).toBeInTheDocument()
+    const icon = button.querySelector('.ams-icon')
+    expect(icon).toBeInTheDocument()
+  })
+
+  it('renders a button with an iconStart', () => {
+    render(<Button iconStart={ShareIcon}>Share</Button>)
+
+    const button = screen.getByRole('button', {
+      name: 'Share',
+    })
+
+    expect(button).toBeInTheDocument()
+    const icon = button.querySelector('.ams-icon')
+    expect(button.firstChild).toBe(icon)
+  })
+
+  it('renders a button with an iconOnly', () => {
+    render(
+      <Button icon={ShareIcon} iconOnly>
+        Share
+      </Button>,
+    )
+
+    const button = screen.getByRole('button', {
+      name: 'Share',
+    })
+
+    expect(button).toBeInTheDocument()
+    const icon = button.querySelector('.ams-icon')
+    const visuallyHidden = button.querySelector('.ams-visually-hidden')
+    expect(icon && visuallyHidden).toBeInTheDocument()
+  })
 })

packages/react/src/Button/Button.tsx

@@ -6,26 +6,42 @@
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
+import { Icon } from '../Icon'
+
+type ButtonIcon = {
+  icon?: Function
+  iconStart?: never
+  iconOnly?: boolean
+}
+
+type ButtonIconStart = {
+  icon?: never
+  iconStart?: Function
+  iconOnly?: boolean
+}
 
 export type ButtonProps = {
   /** The level of prominence. Use a primary button only once per page or section. */
   variant?: 'primary' | 'secondary' | 'tertiary'
-} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>
+} & (ButtonIcon | ButtonIconStart) &
+  PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>
 
 export const Button = forwardRef(
   (
-    { children, className, type, disabled, variant = 'primary', ...restProps }: ButtonProps,
+    { children, className, type, disabled, variant = 'primary', icon, iconStart, iconOnly, ...restProps }: ButtonProps,
     ref: ForwardedRef<HTMLButtonElement>,
   ) => {
     return (
       <button
         {...restProps}
         ref={ref}
         disabled={disabled}
-        className={clsx('ams-button', `ams-button--${variant}`, className)}
+        className={clsx('ams-button', `ams-button--${variant}`, { 'ams-button--icon-only': iconOnly }, className)}
         type={type || 'button'}
       >
-        {children}
+        {iconStart && <Icon svg={iconStart} size="level-5" square />}
+        {iconOnly ? <span className="ams-visually-hidden">{children}</span> : children}
+        {icon && <Icon svg={icon} size="level-5" square />}
       </button>
     )
   },

proprietary/tokens/src/components/ams/button.tokens.json

@@ -56,6 +56,16 @@
           "background-color": { "value": "transparent" },
           "color": { "value": "{ams.color.neutral-grey2}" }
         }
+      },
+      "icon-only": {
+        "padding-block": { "value": "{ams.space.sm}" },
+        "padding-inline": { "value": "{ams.space.sm}" }
+      },
+      "icon-start": {
+        "padding-inline-start": { "value": "{ams.space.sm}" }
+      },
+      "icon-end": {
+        "padding-inline-end": { "value": "{ams.space.sm}" }
       }
     }
   }

storybook/src/components/Button/Button.docs.mdx

@@ -34,9 +34,19 @@ Use tertiary Buttons for unimportant calls to action – as many as necessary.
 
 <Canvas of={ButtonStories.Tertiary} />
 
-### With icon
+### Button with a start icon
 
-<Canvas of={ButtonStories.WithIcon} />
+<Canvas of={ButtonStories.StartIcon} />
+
+### Button with a end icon
+
+<Canvas of={ButtonStories.EndIcon} />
+
+### Button with an icon only
+
+To comply with accessibility guidelines, the icon-only button should have a label.
+
+<Canvas of={ButtonStories.OnlyIcon} />
 
 ### Text wrapping
 

storybook/src/components/Button/Button.stories.tsx

@@ -3,7 +3,6 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { Icon } from '@amsterdam/design-system-react'
 import { Button } from '@amsterdam/design-system-react/src'
 import { ShareIcon } from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
@@ -12,14 +11,16 @@ const meta = {
   title: 'Components/Buttons/Button',
   component: Button,
   args: {
-    children: 'Button label',
+    children: 'Actietekst',
     variant: 'primary',
     disabled: false,
   },
   argTypes: {
-    children: {
-      description: 'The text for the label and/or an icon.',
-      table: { disable: false },
+    icon: {
+      table: { disable: true },
+    },
+    iconStart: {
+      table: { disable: true },
     },
     disabled: {
       description: 'Prevents interaction. Avoid if possible.',
@@ -45,14 +46,23 @@ export const Tertiary: Story = {
   },
 }
 
-export const WithIcon: Story = {
+export const StartIcon: Story = {
   args: {
-    children: ['Button label', <Icon key="icon" svg={ShareIcon} size="level-5" />],
+    iconStart: ShareIcon,
   },
-  argTypes: {
-    children: {
-      table: { disable: true },
-    },
+}
+
+export const EndIcon: Story = {
+  args: {
+    icon: ShareIcon,
+  },
+}
+
+export const OnlyIcon: Story = {
+  args: {
+    variant: 'tertiary',
+    icon: ShareIcon,
+    iconOnly: true,
   },
 }