IconButton Component

README.md

@@ -118,3 +118,4 @@ function App() {
 
 - [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/Button)
 - [CloseButton](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/CloseButton)
+- [IconButton](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/IconButton)

src/components/Buttons/Button/index.tsx

@@ -57,7 +57,7 @@ const Button = ({
       ) : null}
       {label}
       {rightIcon && !loading ? (
-        <Box marginLeft={2} display='flex' alignItems='center'>
+        <Box marginLeft={label ? 2 : 0} display='flex' alignItems='center'>
           {rightIcon}
         </Box>
       ) : null}

src/components/Buttons/CloseButton/index.tsx

@@ -7,12 +7,11 @@ import { CloseIcon } from '../../icons'
 
 const CloseButton = ({ disabled, ...rest }: CloseButtonProps) => (
   <StyledCloseButton
+    icon={<CloseIcon />}
     aria-label={rest['aria-label'] || 'Close'}
     disabled={disabled}
     {...rest}
-  >
-    <CloseIcon />
-  </StyledCloseButton>
+  />
 )
 
 export default CloseButton

src/components/Buttons/CloseButton/styled.ts

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled'
-import { Button } from '@chakra-ui/react'
 import { getThemedColor } from '../../../lib/theme'
+import IconButton from '../IconButton'
 
-export const StyledCloseButton = styled(Button)`
+export const StyledCloseButton = styled(IconButton)`
   width: 20px !important;
   padding: 0 !important;
   min-width: 20px !important;
@@ -20,6 +20,7 @@ export const StyledCloseButton = styled(Button)`
   }
 
   &:hover {
+    background-color: ${getThemedColor('neutral', 300)};
     box-shadow: 0px 1px 2px -1px #0000001a;
     box-shadow: 0px 1px 3px 0px #0000001a;
   }

src/components/Buttons/IconButton/IconButton.stories.tsx

@@ -0,0 +1,33 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import IconButton from '.'
+import { CheckIcon, MenuDotsIcon } from '../../icons'
+
+const meta = {
+  title: 'Buttons/Icon Button',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: { onClick: fn() },
+} satisfies Meta<typeof IconButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    icon: <MenuDotsIcon />,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    icon: <CheckIcon />,
+    disabled: true,
+  },
+}

src/components/Buttons/IconButton/IconButtonDemo.tsx

@@ -0,0 +1,12 @@
+import { IconButton } from '../..'
+import { CheckIcon, InfoIcon, MenuDotsIcon } from '../../icons'
+
+const IconButtonDemo = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    <IconButton icon={<MenuDotsIcon />} aria-label='Menu' />
+    <IconButton icon={<CheckIcon />} aria-label='Check' />
+    <IconButton icon={<InfoIcon />} aria-label='Info' disabled />
+  </div>
+)
+
+export default IconButtonDemo

src/components/Buttons/IconButton/README.md

@@ -0,0 +1,51 @@
+# IconButton
+
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/buttons-icon-button--docs)
+
+[IconButton](https://github.com/wri/wri-design-systems/blob/main/src/components/Buttons/IconButton/IconButtonDemo.tsx)
+
+## Import
+
+```js
+import { IconButton } from 'wri-design-systems'
+```
+
+## Usage
+
+```html
+<IconButton
+  icon={<MenuDotsIcon />}
+  aria-label='Menu'
+/>
+```
+
+## Props
+
+```ts
+type IconButtonProps = Omit<
+  ChakraButtonProps,
+  'size' | 'variant' | 'colorPalette' | 'children' | '_loading'
+> & {
+  icon: React.ReactNode
+  disabled?: boolean
+}
+```
+
+## Default
+
+```html
+<IconButton
+  icon={<MenuDotsIcon />}
+  aria-label='Menu'
+/>
+```
+
+## Disabled
+
+```html
+<IconButton
+  icon={<InfoIcon />}
+  aria-label='Info'
+  disabled
+/>
+```

src/components/Buttons/IconButton/index.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import { StyledIconButton } from './styled'
+import { IconButtonProps } from './types'
+
+const IconButton = ({ icon, disabled, ...rest }: IconButtonProps) => (
+  <StyledIconButton
+    aria-label={rest['aria-label']}
+    disabled={disabled}
+    {...rest}
+  >
+    {icon}
+  </StyledIconButton>
+)
+
+export default IconButton

src/components/Buttons/IconButton/styled.ts

@@ -0,0 +1,51 @@
+import styled from '@emotion/styled'
+import { Button } from '@chakra-ui/react'
+import { getThemedColor } from '../../../lib/theme'
+
+export const StyledIconButton = styled(Button)`
+  width: 20px !important;
+  padding: 0 !important;
+  min-width: 20px !important;
+  height: 20px;
+  border-radius: 2px;
+  background-color: transparent;
+
+  svg {
+    width: 15px;
+    height: 15px;
+
+    path {
+      fill: ${getThemedColor('neutral', 800)};
+    }
+  }
+
+  &:hover {
+    background-color: color-mix(
+      in srgb,
+      ${getThemedColor('primary', 500)} 20%,
+      transparent
+    );
+  }
+
+  &:active {
+    background-color: color-mix(
+      in srgb,
+      ${getThemedColor('primary', 500)} 40%,
+      transparent
+    );
+  }
+
+  &:focus-visible {
+    outline-color: ${getThemedColor('primary', 700)};
+  }
+
+  &:disabled {
+    background-color: transparent;
+
+    svg {
+      path {
+        fill: ${getThemedColor('neutral', 500)};
+      }
+    }
+  }
+`

src/components/Buttons/IconButton/types.ts

@@ -0,0 +1,10 @@
+import React from 'react'
+import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react'
+
+export type IconButtonProps = Omit<
+  ChakraButtonProps,
+  'size' | 'variant' | 'colorPalette' | 'children' | '_loading'
+> & {
+  icon: React.ReactNode
+  disabled?: boolean
+}

src/components/icons/MenuDots.tsx

@@ -0,0 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const MenuDotsIcon = (props: IconProps) => (
+  <Icon {...props}>
+    <svg
+      width='16'
+      height='16'
+      viewBox='0 0 16 16'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M8 16C7.45 16 6.97917 15.8042 6.5875 15.4125C6.19583 15.0208 6 14.55 6 14C6 13.45 6.19583 12.9792 6.5875 12.5875C6.97917 12.1958 7.45 12 8 12C8.55 12 9.02083 12.1958 9.4125 12.5875C9.80417 12.9792 10 13.45 10 14C10 14.55 9.80417 15.0208 9.4125 15.4125C9.02083 15.8042 8.55 16 8 16ZM8 10C7.45 10 6.97917 9.80417 6.5875 9.4125C6.19583 9.02083 6 8.55 6 8C6 7.45 6.19583 6.97917 6.5875 6.5875C6.97917 6.19583 7.45 6 8 6C8.55 6 9.02083 6.19583 9.4125 6.5875C9.80417 6.97917 10 7.45 10 8C10 8.55 9.80417 9.02083 9.4125 9.4125C9.02083 9.80417 8.55 10 8 10ZM8 4C7.45 4 6.97917 3.80417 6.5875 3.4125C6.19583 3.02083 6 2.55 6 2C6 1.45 6.19583 0.979167 6.5875 0.5875C6.97917 0.195833 7.45 0 8 0C8.55 0 9.02083 0.195833 9.4125 0.5875C9.80417 0.979167 10 1.45 10 2C10 2.55 9.80417 3.02083 9.4125 3.4125C9.02083 3.80417 8.55 4 8 4Z'
+        fill='currentColor'
+      />
+    </svg>
+  </Icon>
+)

src/components/icons/index.ts

@@ -5,3 +5,4 @@ export * from './CheckIndeterminate'
 export * from './Info'
 export * from './ChevronDown'
 export * from './Close'
+export * from './MenuDots'

src/components/index.ts

@@ -14,3 +14,4 @@ export { default as Banner } from './Banner'
 export { default as Input } from './Input'
 export { default as Textarea } from './Textarea'
 export { default as CloseButton } from './Buttons/CloseButton'
+export { default as IconButton } from './Buttons/IconButton'