feat: implement IconButton component

packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx

@@ -8,6 +8,7 @@ import { CollapseStyles } from '../Collapse/Collapse.styles'
 import { CollapseHeaderStyles } from '../CollapseHeader/CollapseHeader.styles'
 import { DropdownStyles } from '../Dropdown/Dropdown.styles'
 import { DropdownItemStyles } from '../DropdownItem/DropdownItem.styles'
+import { IconButtonStyles } from '../IconButton/IconButton.styles'
 import { LsdIconStyles } from '../Icons/LsdIcon/LsdIcon.styles'
 import { ListBoxStyles } from '../ListBox/ListBox.styles'
 import { QuoteStyles } from '../Quote/Quote.styles'
@@ -21,6 +22,7 @@ import { TypographyStyles } from '../Typography/Typography.styles'
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
     ButtonStyles,
+    IconButtonStyles,
     TypographyStyles,
     LsdIconStyles,
     TabItemStyles,

packages/lsd-react/src/components/IconButton/IconButton.classes.ts

@@ -0,0 +1,12 @@
+export const iconButtonClasses = {
+  root: `lsd-icon-button`,
+
+  outlined: `lsd-icon-button--outlined`,
+  filled: `lsd-icon-button--filled`,
+
+  disabled: `lsd-icon-button--disabled`,
+
+  small: `lsd-icon-button--small`,
+  medium: `lsd-icon-button--medium`,
+  large: `lsd-icon-button--large`,
+}

packages/lsd-react/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, Story } from '@storybook/react'
+import { useStorybookIconComponent } from '../../utils/storybook.utils'
+import { IconButton, IconButtonProps } from './IconButton'
+
+export default {
+  title: 'IconButton',
+  component: IconButton,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+      defaultValue: 'large',
+    },
+    icon: {
+      type: {
+        name: 'enum',
+        value: useStorybookIconComponent.options,
+      },
+      defaultValue: 'FolderIcon',
+    },
+  },
+} as Meta
+
+export const Root: Story<IconButtonProps & { icon: string }> = ({
+  icon,
+  ...args
+}) => {
+  const Icon = useStorybookIconComponent(icon)
+
+  return <IconButton {...args}>{Icon && <Icon color="primary" />}</IconButton>
+}
+
+Root.args = {
+  variant: 'outlined',
+  icon: 'FolderIcon',
+  size: 'large',
+  disabled: false,
+}

packages/lsd-react/src/components/IconButton/IconButton.styles.ts

@@ -0,0 +1,47 @@
+import { css } from '@emotion/react'
+import { iconButtonClasses } from './IconButton.classes'
+
+export const IconButtonStyles = css`
+  .${iconButtonClasses.root} {
+    display: flex;
+    width: 32px;
+    height: 28px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background: none;
+    border: 1px solid rgb(var(--lsd-border-primary));
+  }
+
+  .${iconButtonClasses.filled} {
+    background-color: rgb(var(--lsd-icon-primary));
+
+    svg {
+      --lsd-icon-primary: var(--lsd-icon-secondary);
+    }
+  }
+
+  .${iconButtonClasses.outlined} {
+  }
+
+  .${iconButtonClasses.disabled} {
+    opacity: 0.34;
+    cursor: default;
+  }
+
+  .${iconButtonClasses.large} {
+    width: 40px;
+    height: 40px;
+  }
+
+  .${iconButtonClasses.medium} {
+    width: 32px;
+    height: 32px;
+  }
+
+  .${iconButtonClasses.small} {
+    width: 28px;
+    height: 28px;
+  }
+`

packages/lsd-react/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,35 @@
+import clsx from 'clsx'
+import React from 'react'
+import { iconButtonClasses } from './IconButton.classes'
+
+export type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: 'outlined' | 'filled'
+  size?: 'small' | 'medium' | 'large'
+}
+
+export const IconButton: React.FC<IconButtonProps> & {
+  classes: typeof iconButtonClasses
+} = ({
+  size = 'large',
+  disabled,
+  variant = 'outlined',
+  children,
+  ...props
+}) => {
+  return (
+    <button
+      {...props}
+      className={clsx(
+        props.className,
+        iconButtonClasses.root,
+        iconButtonClasses[size],
+        iconButtonClasses[variant],
+        disabled && iconButtonClasses.disabled,
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+IconButton.classes = iconButtonClasses

packages/lsd-react/src/components/IconButton/index.ts

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

packages/lsd-react/src/index.ts

@@ -6,6 +6,7 @@ export * from './components/Collapse'
 export * from './components/CollapseHeader'
 export * from './components/Dropdown'
 export * from './components/DropdownItem'
+export * from './components/IconButton'
 export * from './components/Icons'
 export * from './components/ListBox'
 export * from './components/Quote'