feat: implement buttonWithIcon component

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

@@ -11,4 +11,5 @@ export const Root: Story<ButtonProps> = (args) => (
 )
 Root.args = {
   disabled: false,
+  withIcon: 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

@@ -1,14 +1,16 @@
 import clsx from 'clsx'
 import React from 'react'
+import { PickIcon } from '../Icons'
 import { buttonClasses } from './Button.classes'
 
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   size?: 'large' | 'medium' | 'small'
+  withIcon?: boolean
 }
 
 export const Button: React.FC<ButtonProps> & {
   classes: typeof buttonClasses
-} = ({ size = 'medium', children, ...props }) => {
+} = ({ size = 'medium', withIcon = 'false', children, ...props }) => {
   return (
     <>
       <button
@@ -18,9 +20,15 @@ export const Button: React.FC<ButtonProps> & {
           buttonClasses.root,
           buttonClasses[size],
           props.disabled && buttonClasses.disabled,
+          withIcon && buttonClasses.withIcon,
         )}
       >
         <span className={buttonClasses.text}>{children}</span>
+        {withIcon && (
+          <span className={buttonClasses.icon}>
+            {<PickIcon color="primary" />}
+          </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'