Merge pull request #10 from acid-info/topic-implement-button-with-icon

implement button with icon

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

@@ -6,6 +6,8 @@ export const buttonClasses = {
   large: `${LSD_NAMESPACE}--large`,
   medium: `${LSD_NAMESPACE}--medium`,
   small: `${LSD_NAMESPACE}--small`,
+  withIcon: `${LSD_NAMESPACE}--with-icon`,
 
   text: `${LSD_NAMESPACE}-button__text`,
+  icon: `${LSD_NAMESPACE}-button__icon`,
 }

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

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

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

@@ -22,6 +22,7 @@ export const ButtonStyles = css`
   }
 
   .${buttonClasses.medium} {
+    padding: 6px, 24px;
   }
 
   .${buttonClasses.small} {
@@ -35,4 +36,33 @@ export const ButtonStyles = css`
       }
     }
   }
+
+  .${buttonClasses.withIcon} {
+    display: flex;
+  }
+
+  .${buttonClasses.icon} {
+    display: flex;
+  }
+
+  .${buttonClasses.large}.${buttonClasses.withIcon} {
+    padding: 10px 14px 10px 18px;
+    .${buttonClasses.icon} {
+      margin-left: 18px;
+    }
+  }
+
+  .${buttonClasses.medium}.${buttonClasses.withIcon} {
+    padding: 6px 12px 6px 14px;
+    .${buttonClasses.icon} {
+      margin-left: 14px;
+    }
+  }
+
+  .${buttonClasses.small}.${buttonClasses.withIcon} {
+    padding: 6px 10px 6px 12px;
+    .${buttonClasses.icon} {
+      margin-left: 10px;
+    }
+  }
 `

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

@@ -4,11 +4,12 @@ import { buttonClasses } from './Button.classes'
 
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   size?: 'large' | 'medium' | 'small'
+  icon: React.ReactNode
 }
 
 export const Button: React.FC<ButtonProps> & {
   classes: typeof buttonClasses
-} = ({ size = 'medium', children, ...props }) => {
+} = ({ size = 'medium', icon, children, ...props }) => {
   return (
     <>
       <button
@@ -18,9 +19,11 @@ export const Button: React.FC<ButtonProps> & {
           buttonClasses.root,
           buttonClasses[size],
           props.disabled && buttonClasses.disabled,
+          icon && buttonClasses.withIcon,
         )}
       >
         <span className={buttonClasses.text}>{children}</span>
+        {icon && <span className={buttonClasses.icon}>{icon}</span>}
       </button>
     </>
   )

packages/lsd-react/src/components/Icons/PickIcon/PickIcon.tsx

@@ -0,0 +1,22 @@
+import { LsdIcon } from '../LsdIcon'
+
+export const PickIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M9.79287 3.5H2.99998V2.5H11.5V11H10.5V4.20711L3.35353 11.3536L2.64642 10.6464L9.79287 3.5Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  { filled: true },
+)

packages/lsd-react/src/components/Icons/PickIcon/index.ts

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

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

@@ -16,3 +16,4 @@ export * from './NavigateBeforeIcon'
 export * from './NavigateNextIcon'
 export * from './NewPageIcon'
 export * from './SearchIcon'
+export * from './PickIcon'