Merge branch 'batch-1' into topic-implement-card

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

@@ -0,0 +1,17 @@
+export const autocompleteClasses = {
+  root: `lsd-autocomplete`,
+
+  input: `lsd-autocomplete__input`,
+  icon: `lsd-autocomplete__icon`,
+
+  listBox: `lsd-autocomplete-list-box`,
+  dropdownItem: `lsd-autocomplete-dropdown-item`,
+  dropdownItemPlaceholder: `lsd-autocomplete-dropdown-item__placeholder`,
+
+  disabled: `lsd-autocomplete--disabled`,
+  error: 'lsd-autocomplete--error',
+
+  large: `lsd-autocomplete--large`,
+  medium: `lsd-autocomplete--medium`,
+  withIcon: `lsd-autocomplete--with-icon`,
+}

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

@@ -0,0 +1,33 @@
+import { Meta, Story } from '@storybook/react'
+import { Autocomplete, AutocompleteProps } from './Autocomplete'
+
+const list = JSON.parse(
+  '["BitTorrent","VANIG","BenjiRolls","Status Network Token","GigTricks","Vechain","Insureum","Instant Sponsor Token","IslaCoin","Kcash","Litecoin","BoutsPro","Valorem","Artcoin","Insureum","Zen Protocol","CryptoPennies","MediBond","WishFinance","BlockNet","Big Data Block","Loom Network","Gamedex","Universal Recognition Token","Soarcoin","IZX","aelf","Bitcoin Private","TerraCoin","Coinnec","Revolution VR","SecureCoin","Swarm Fund","Fan360","LakeBanker","16BitCoin","CyberTrust","Actinium","ZestCoin","Monero 0","DACash","Bitswift","Bethereum","Hedge Token","Megastake","HeelCoin","RealChain","LiteBitcoin","SexCoin","Suretly","Internet of People","Rate3","Invictus","WorldPay","iOlite","Cashaa","NovaCoin","U Network","Gimli","Chynge.net","BMChain","Ethereum Premium","BlackShadowCoin","Javvy","Befund","Bancor Network Token","BOONSCoin","Pantos","IDEX Membership","BitStation","Lynx","Encrybit","HighVibe.Network","Credo","HiCoin","RiptideCoin","BitBoss","NXTTY","Presale Ventures","Urbit Data","Xeonbit","Newbium","Mint","Crypto Wine Exchange","HARA","Pioneer Coin","Ethereum Dark","FazzCoin","Fitrova","The EFFECT Network","CargoX","PolicyPal Network","Vechain","President Clinton","GenesysCoin","Trivver","Bitdeal","ShareMeAll","Primas","RoboAdvisorCoin","Liquid","Napoleon X","NOKU Master token","Liqnet","ZeroState","0chain","DarkCash","Sudan Gold Coin","PokerSports","Bankera","Think And Get Rich Coin","ELTCOIN","USOAMIC","XDNA","Autoria","Cosmo","Bigbom","EagsCoin","Stakinglab","SaffronCoin","BnrtxCoin","FoodCoin","PutinCoin","SID Token","Quartz","IOU1","Spend","NEO Gold","High Voltage Coin","Unobtanium","Sandcoin","FrazCoin","Sudan Gold Coin","VeriCoin","Aurora","NANJCOIN","Muse","DuckDuckCoin","Saifu","CryCash","Rustbits","BitFlip","Cpollo","Monkey Project","Coin Analyst","Scanetchain Token","Aditus","LendConnect","FOREXCOIN","Crypto Improvement Fund","Electra","Psilocybin","GameLeagueCoin","Switcheo","BitQuark","BinaryCoin","CyberVein","KATZcoin","BtcEX","ByteCoin","Shping Coin","Liquid","Stacktical","Tezos","ParkByte","Imbrex","Pinmo","Sigil","LePenCoin","OmiseGO Classic","Digix DAO","ShareRing","CryptoCarbon","CDX Network","SONM","PhoenixCoin","Incent","Tokyo Coin","Premium","Unattanium","Biotron","WETH","Rublebit","KRCoin","Aegis","Legends Cryptocurrency","VARcrypt","Witcoin","GlowShares","HOQU","VARcrypt","Linx","BlackholeCoin","NumbersCoin","ZayedCoin","CarVertical","Securosys","ElliotCoin","Zelcash","AcesCoin","EtherInc"]',
+)
+
+export default {
+  title: 'Autocomplete',
+  component: Autocomplete,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['medium', 'large'],
+      },
+      defaultValue: 'large',
+    },
+  },
+} as Meta
+
+export const Root: Story<AutocompleteProps> = (args) => (
+  <Autocomplete {...args}>Autocomplete</Autocomplete>
+)
+Root.args = {
+  size: 'large',
+  disabled: false,
+  withIcon: false,
+  error: false,
+  placeholder: 'Placeholder',
+  onChange: undefined,
+  options: list,
+}

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

@@ -0,0 +1,83 @@
+import { css } from '@emotion/react'
+import { autocompleteClasses } from './Autocomplete.classes'
+
+export const AutocompleteStyles = css`
+  .${autocompleteClasses.root} {
+    width: auto;
+    border: 1px solid rgb(var(--lsd-border-primary));
+    box-sizing: border-box;
+    align-items: center;
+  }
+
+  .${autocompleteClasses.root} > div {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .${autocompleteClasses.disabled} {
+    opacity: 0.34;
+  }
+
+  .${autocompleteClasses.input} {
+    border: none;
+    outline: none;
+    font-size: 14px;
+    color: rgb(var(--lsd-text-primary));
+    background: none;
+    width: 100%;
+  }
+
+  .${autocompleteClasses.input}:hover {
+    outline: none;
+  }
+
+  .${autocompleteClasses.input}::placeholder {
+    color: rgb(var(--lsd-text-primary));
+    opacity: 0.3;
+  }
+
+  .${autocompleteClasses.error} {
+    text-decoration: line-through;
+  }
+
+  .${autocompleteClasses.large} {
+    width: 208px;
+    height: 40px;
+    padding: 10px 14px;
+  }
+
+  .${autocompleteClasses.medium} {
+    width: 188px;
+    height: 32px;
+    padding: 6px 12px;
+  }
+
+  .${autocompleteClasses.withIcon} {
+  }
+
+  .${autocompleteClasses.icon} {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  .${autocompleteClasses.listBox} {
+    max-height: 400px;
+    overflow: auto;
+    border: 1px solid rgb(var(--lsd-border-primary));
+    border-top: 0;
+  }
+
+  .${autocompleteClasses.dropdownItem} {
+    border: 0;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid rgb(var(--lsd-border-primary));
+    }
+  }
+
+  .${autocompleteClasses.dropdownItemPlaceholder} {
+    opacity: 0.5;
+    white-space: pre;
+  }
+`

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

@@ -0,0 +1,150 @@
+import clsx from 'clsx'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useInput } from '../../utils/useInput'
+import { DropdownItem } from '../DropdownItem'
+import { CloseIcon, SearchIcon } from '../Icons'
+import { ListBox } from '../ListBox'
+import { Portal } from '../PortalProvider/Portal'
+import { autocompleteClasses } from './Autocomplete.classes'
+
+export type AutocompleteProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange' | 'value'
+> &
+  Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+    size?: 'large' | 'medium'
+    withIcon?: boolean
+    error?: boolean
+    disabled?: boolean
+    placeholder?: string
+    value?: string
+    defaultValue?: string
+    options?: string[]
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  }
+
+export const Autocomplete: React.FC<AutocompleteProps> & {
+  classes: typeof autocompleteClasses
+} = ({
+  size = 'large',
+  withIcon = false,
+  error = false,
+  disabled = false,
+  children,
+  value,
+  defaultValue,
+  placeholder,
+  onChange,
+  options = [],
+  inputProps = {},
+  ...props
+}) => {
+  const ref = useRef<HTMLInputElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const input = useInput({ defaultValue, value, onChange, ref })
+  const inputValue = input.value as string
+
+  const [open, setOpen] = useState(false)
+  const [selected, setSelected] = useState<string>()
+
+  const onCancel = () => input.setValue('')
+
+  const handleDropdownClick = (value: string) => {
+    setOpen(false)
+    setSelected(value)
+    input.setValue(value)
+  }
+
+  const suggestions = useMemo(
+    () =>
+      input.filled
+        ? options
+            .filter((option) =>
+              new RegExp(`^${input.value}.+`, 'i').test(option),
+            )
+            .map((option) => [
+              option,
+              option.slice(0, inputValue.length),
+              option.slice(inputValue.length),
+            ])
+        : options,
+    [input.value, options],
+  )
+
+  useEffect(() => {
+    !selected && input.filled && !open && setOpen(true)
+  }, [input.value, selected, open])
+
+  const isOpen = !disabled && open && suggestions.length > 0 && input.filled
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx(
+        props.className,
+        autocompleteClasses.root,
+        autocompleteClasses[size],
+        disabled && autocompleteClasses.disabled,
+        withIcon && autocompleteClasses.withIcon,
+      )}
+      {...props}
+    >
+      <div>
+        <input
+          {...inputProps}
+          ref={ref}
+          value={input.value}
+          placeholder={placeholder}
+          onChange={input.onChange}
+          disabled={disabled}
+          onFocus={() => setOpen(true)}
+          className={clsx(
+            inputProps.className,
+            autocompleteClasses.input,
+            error && autocompleteClasses.error,
+          )}
+        />
+        {withIcon && input.value ? (
+          <span className={autocompleteClasses.icon} onClick={onCancel}>
+            <CloseIcon color="primary" />
+          </span>
+        ) : withIcon && !input.value ? (
+          <span className={autocompleteClasses.icon}>
+            <SearchIcon color="primary" />
+          </span>
+        ) : null}
+      </div>
+      <Portal id="autocomplete">
+        <ListBox
+          handleRef={containerRef}
+          open={isOpen}
+          onClose={() => setOpen(false)}
+          className={autocompleteClasses.listBox}
+        >
+          {suggestions.map((opt, idx: number) => (
+            <DropdownItem
+              key={idx}
+              size={size}
+              tabIndex={0}
+              label={
+                <>
+                  {opt[1]}
+                  <span className={autocompleteClasses.dropdownItemPlaceholder}>
+                    {opt[2]}
+                  </span>
+                </>
+              }
+              className={autocompleteClasses.dropdownItem}
+              onClick={() => handleDropdownClick(opt[0])}
+              onKeyDown={(e) =>
+                e.key === 'Enter' && handleDropdownClick(opt[0])
+              }
+            />
+          ))}
+        </ListBox>
+      </Portal>
+    </div>
+  )
+}
+
+Autocomplete.classes = autocompleteClasses

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

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

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) => (
-  <Button {...args}>Button</Button>
+export const Root: Story<ButtonProps & { icon: string }> = ({
+  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/CSSBaseline/CSSBaseline.tsx

@@ -1,24 +1,31 @@
 import { Global, SerializedStyles } from '@emotion/react'
 import React, { useMemo } from 'react'
-import { ButtonStyles } from '../Button/Button.styles'
-import { DropdownStyles } from '../Dropdown/Dropdown.styles'
-import { DropdownItemStyles } from '../DropdownItem/DropdownItem.styles'
-import { LsdIconStyles } from '../Icons/LsdIcon/LsdIcon.styles'
-import { IconTagStyles } from '../IconTag/IconTag.styles'
-import { ListBoxStyles } from '../ListBox/ListBox.styles'
-import { TabItemStyles } from '../TabItem/TabItem.styles'
-import { TabsStyles } from '../Tabs/Tabs.styles'
+import { AutocompleteStyles } from '../Autocomplete/Autocomplete.styles'
 import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles'
 import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
+import { ButtonStyles } from '../Button/Button.styles'
+import { CardStyles } from '../Card/Card.styles'
+import { CardBodyStyles } from '../CardBody/CardBody.styles'
+import { CardHeaderStyles } from '../CardHeader/CardHeader.styles'
+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'
+import { TabItemStyles } from '../TabItem/TabItem.styles'
+import { TabsStyles } from '../Tabs/Tabs.styles'
+import { TagStyles } from '../Tag/Tag.styles'
+import { TextFieldStyles } from '../TextField/TextField.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
-import { CardStyles } from '../Card/Card.styles'
-import { CardHeaderStyles } from '../CardHeader/CardHeader.styles'
-import { CardBodyStyles } from '../CardBody/CardBody.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
     ButtonStyles,
+    IconButtonStyles,
     TypographyStyles,
     LsdIconStyles,
     TabItemStyles,
@@ -26,12 +33,17 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     ListBoxStyles,
     DropdownStyles,
     DropdownItemStyles,
-    IconTagStyles,
     BreadcrumbStyles,
     BreadcrumbItemStyles,
     CardStyles,
     CardHeaderStyles,
     CardBodyStyles,
+    TagStyles,
+    TextFieldStyles,
+    AutocompleteStyles,
+    QuoteStyles,
+    CollapseStyles,
+    CollapseHeaderStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({

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

@@ -0,0 +1,8 @@
+export const collapseClasses = {
+  root: `lsd-collapse`,
+
+  content: `lsd-collapse-content`,
+
+  open: 'lsd-collapse--open-item',
+  disabled: 'lsd-collapse--disabled',
+}

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

@@ -0,0 +1,34 @@
+import { Meta, Story } from '@storybook/react'
+import { Typography } from '../Typography'
+import { Collapse, CollapseProps } from './Collapse'
+
+export default {
+  title: 'Collapse',
+  component: Collapse,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<CollapseProps> = (args) => (
+  <div style={{ width: 'fit-content' }}>
+    <Collapse {...args}>
+      <div style={{ padding: '10px 18px' }}>
+        <Typography color="primary" component="label">
+          Slot component
+        </Typography>
+      </div>
+    </Collapse>
+  </div>
+)
+
+Root.args = {
+  size: 'large',
+  label: 'Title',
+  disabled: false,
+}

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

@@ -0,0 +1,20 @@
+import { css } from '@emotion/react'
+import { collapseClasses } from './Collapse.classes'
+
+export const CollapseStyles = css`
+  .${collapseClasses.root} {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .${collapseClasses.open} {
+    .${collapseClasses.content} {
+      border-top: 1px solid transparent;
+    }
+  }
+
+  .${collapseClasses.content} {
+    border: 1px solid rgb(var(--lsd-border-primary));
+  }
+`

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

@@ -0,0 +1,58 @@
+import clsx from 'clsx'
+import React, { useEffect, useRef, useState } from 'react'
+import { CollapseHeader } from '../CollapseHeader'
+import { collapseClasses } from './Collapse.classes'
+
+export type CollapseProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'label'
+> & {
+  label: string
+  disabled?: boolean
+  size?: 'small' | 'medium' | 'large'
+  open?: boolean
+  onChange?: (open: boolean) => void
+}
+
+export const Collapse: React.FC<CollapseProps> & {
+  classes: typeof collapseClasses
+} = ({ label, disabled = false, size = 'large', children, ...props }) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(props.open ?? false)
+
+  const handleChange = (value: boolean) => {
+    if (typeof props.open === 'undefined') return setOpen(value)
+    props.onChange && props.onChange(value)
+  }
+
+  const onTrigger = () => !disabled && handleChange(!open)
+
+  useEffect(() => {
+    disabled && open && handleChange(false)
+  }, [disabled, open, handleChange])
+
+  return (
+    <div
+      {...props}
+      ref={ref}
+      className={clsx(
+        props.className,
+        collapseClasses.root,
+        disabled && collapseClasses.disabled,
+        open && collapseClasses.open,
+      )}
+    >
+      <CollapseHeader
+        label={label}
+        open={open}
+        setOpen={setOpen}
+        size={size}
+        onTrigger={onTrigger}
+        disabled={disabled}
+      />
+      {open && <div className={collapseClasses.content}>{children}</div>}
+    </div>
+  )
+}
+
+Collapse.classes = collapseClasses

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

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

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

@@ -0,0 +1,16 @@
+export const collapseHeaderClasses = {
+  root: `lsd-collapse-header`,
+
+  trigger: `lsd-collapse-header-trigger`,
+  triggerLabel: `lsd-collapse-header-trigger__label`,
+  triggerIcons: `lsd-collapse-header-trigger-icons`,
+  triggerIcon: `lsd-collapse-header-trigger-icons__icon`,
+  triggerMenuIcon: `lsd-collapse-header-trigger-icons__menu-icon`,
+
+  open: 'lsd-collapse-header--open',
+  disabled: 'lsd-collapse-header--disabled',
+
+  small: `lsd-collapse-header--small`,
+  medium: `lsd-collapse-header--medium`,
+  large: `lsd-collapse-header--large`,
+}

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

@@ -0,0 +1,27 @@
+import { Meta, Story } from '@storybook/react'
+import { CollapseHeader, CollapseHeaderProps } from './CollapseHeader'
+
+export default {
+  title: 'CollapseHeader',
+  component: CollapseHeader,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<CollapseHeaderProps> = (args) => (
+  <div style={{ width: 'fit-content' }}>
+    <CollapseHeader {...args}></CollapseHeader>
+  </div>
+)
+
+Root.args = {
+  size: 'large',
+  label: 'title',
+  disabled: false,
+}

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

@@ -0,0 +1,88 @@
+import { css } from '@emotion/react'
+import { collapseHeaderClasses } from './CollapseHeader.classes'
+
+export const CollapseHeaderStyles = css`
+  .${collapseHeaderClasses.root} {
+    box-sizing: border-box;
+  }
+
+  .${collapseHeaderClasses.root}:not(.${collapseHeaderClasses.disabled}) {
+    .${collapseHeaderClasses.trigger} {
+      &:hover {
+        .${collapseHeaderClasses.triggerLabel} {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  .${collapseHeaderClasses.trigger} {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px 10px 18px;
+
+    cursor: pointer;
+    background: none;
+    border: 1px solid rgb(var(--lsd-border-primary));
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .${collapseHeaderClasses.triggerLabel} {
+    cursor: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: auto;
+  }
+
+  .${collapseHeaderClasses.triggerIcons} {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .${collapseHeaderClasses.triggerIcon} {
+    margin-right: 8px;
+  }
+
+  .${collapseHeaderClasses.triggerMenuIcon} {
+  }
+
+  .${collapseHeaderClasses.disabled} {
+    .${collapseHeaderClasses.trigger} {
+      opacity: 0.34;
+      cursor: initial;
+    }
+  }
+
+  .${collapseHeaderClasses.large} {
+    .${collapseHeaderClasses.trigger} {
+      width: 299px;
+      height: 40px;
+      padding: 10px 18px;
+    }
+  }
+
+  .${collapseHeaderClasses.medium} {
+    .${collapseHeaderClasses.trigger} {
+      width: 270px;
+      height: 32px;
+      padding: 6px 14px;
+    }
+  }
+
+  .${collapseHeaderClasses.small} {
+    .${collapseHeaderClasses.trigger} {
+      width: 235px;
+      height: 28px;
+      padding: 6px 12px;
+    }
+  }
+`

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

@@ -0,0 +1,71 @@
+import clsx from 'clsx'
+import React, { useEffect, useState } from 'react'
+import { ArrowDownIcon, ArrowUpIcon } from '../Icons'
+import { Typography } from '../Typography'
+import { collapseHeaderClasses } from './CollapseHeader.classes'
+
+export type CollapseHeaderProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'label' | 'disabled'
+> & {
+  label: string
+  open: boolean
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  disabled?: boolean
+  onTrigger: () => void
+  size?: 'small' | 'medium' | 'large'
+}
+
+export const CollapseHeader: React.FC<CollapseHeaderProps> & {
+  classes: typeof collapseHeaderClasses
+} = ({
+  label,
+  disabled = false,
+  open,
+  setOpen,
+  size = 'large',
+  onTrigger,
+  ...props
+}) => {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        props.className,
+        collapseHeaderClasses.root,
+        collapseHeaderClasses[size],
+        disabled && collapseHeaderClasses.disabled,
+        open && collapseHeaderClasses.open,
+      )}
+    >
+      <button
+        className={clsx(collapseHeaderClasses.trigger)}
+        onClick={onTrigger}
+      >
+        <Typography
+          color="primary"
+          component="label"
+          variant={size === 'small' ? 'label2' : 'label1'}
+          className={collapseHeaderClasses.triggerLabel}
+        >
+          {label}
+        </Typography>
+        <div className={collapseHeaderClasses.triggerIcons}>
+          {open ? (
+            <ArrowUpIcon
+              color="primary"
+              className={collapseHeaderClasses.triggerMenuIcon}
+            />
+          ) : (
+            <ArrowDownIcon
+              color="primary"
+              className={collapseHeaderClasses.triggerMenuIcon}
+            />
+          )}
+        </div>
+      </button>
+    </div>
+  )
+}
+
+CollapseHeader.classes = collapseHeaderClasses

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

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

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

@@ -4,8 +4,11 @@ import { CheckboxFilledIcon, CheckboxIcon, LsdIconProps } from '../Icons'
 import { Typography } from '../Typography'
 import { dropdownItemClasses } from './DropdownItem.classes'
 
-export type DropdownItemProps = React.HTMLAttributes<HTMLDivElement> & {
-  label: string
+export type DropdownItemProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'label'
+> & {
+  label: React.ReactNode
   selected?: boolean
   withIcon?: boolean
   disabled?: boolean
@@ -32,7 +35,6 @@ export const DropdownItem: React.FC<DropdownItemProps> & {
     <div
       role="option"
       aria-selected={selected ? 'true' : 'false'}
-      aria-label={label}
       className={clsx(
         className,
         dropdownItemClasses.root,

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/components/IconTag/IconTag.classes.ts

@@ -1,6 +0,0 @@
-export const iconTagClasses = {
-  root: `lsd-icon-tag`,
-
-  outlined: `lsd-icon-tag--outlined`,
-  filled: `lsd-icon-tag--filled`,
-}

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

@@ -1,18 +0,0 @@
-import { Meta, Story } from '@storybook/react'
-import { AddIcon, FolderIcon, KeyboardReturnIcon, MenuIcon } from '../Icons'
-import { IconTag, IconTagProps } from './IconTag'
-
-export default {
-  title: 'IconTag',
-  component: IconTag,
-} as Meta
-
-export const Root: Story<IconTagProps> = (args) => (
-  <IconTag {...args}>
-    <FolderIcon color="primary" />
-  </IconTag>
-)
-
-Root.args = {
-  variant: 'outlined',
-}

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

@@ -1,25 +0,0 @@
-import { css } from '@emotion/react'
-import { iconTagClasses } from './IconTag.classes'
-
-export const IconTagStyles = css`
-  .${iconTagClasses.root} {
-    display: flex;
-    width: 32px;
-    height: 28px;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid rgb(var(--lsd-icon-primary));
-  }
-
-  .${iconTagClasses.filled} {
-    background-color: rgb(var(--lsd-icon-primary));
-
-    svg {
-      --lsd-icon-primary: var(--lsd-icon-secondary);
-    }
-  }
-
-  .${iconTagClasses.outlined} {
-  }
-`

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

@@ -1,28 +0,0 @@
-import clsx from 'clsx'
-import React from 'react'
-import { iconTagClasses } from './IconTag.classes'
-
-export type IconTagProps = React.HTMLAttributes<HTMLDivElement> & {
-  label?: string
-  variant?: 'outlined' | 'filled'
-}
-
-export const IconTag: React.FC<IconTagProps> & {
-  classes: typeof iconTagClasses
-} = ({ label, variant = 'outlined', children, ...props }) => {
-  return (
-    <div
-      {...props}
-      aria-label={label}
-      className={clsx(
-        props.className,
-        iconTagClasses.root,
-        iconTagClasses[variant],
-      )}
-    >
-      {children}
-    </div>
-  )
-}
-
-IconTag.classes = iconTagClasses

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

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

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

@@ -1,6 +1,7 @@
 import { LsdIcon } from '../LsdIcon'
 
-export const ArrowForwardIcon = LsdIcon((props) => (
+export const ArrowForwardIcon = LsdIcon(
+  (props) => (
     <svg
       width="14"
       height="14"
@@ -14,4 +15,8 @@ export const ArrowForwardIcon = LsdIcon((props) => (
         fill="black"
       />
     </svg>
-))
+  ),
+  {
+    filled: true,
+  },
+)

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

@@ -1,6 +1,7 @@
 import { LsdIcon } from '../LsdIcon'
 
-export const CheckIcon = LsdIcon((props) => (
+export const CheckIcon = LsdIcon(
+  (props) => (
     <svg
       width="14"
       height="14"
@@ -10,8 +11,12 @@ export const CheckIcon = LsdIcon((props) => (
       {...props}
     >
       <path
-      d="M11.0833 2.91667V11.0833H2.91667V2.91667H11.0833ZM11.0833 1.75H2.91667C2.275 1.75 1.75 2.275 1.75 2.91667V11.0833C1.75 11.725 2.275 12.25 2.91667 12.25H11.0833C11.725 12.25 12.25 11.725 12.25 11.0833V2.91667C12.25 2.275 11.725 1.75 11.0833 1.75Z"
+        d="M5.25009 9.43247L2.81759 6.99997L1.98926 7.82247L5.25009 11.0833L12.2501 4.0833L11.4276 3.2608L5.25009 9.43247Z"
         fill="black"
       />
     </svg>
-))
+  ),
+  {
+    filled: true,
+  },
+)

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

@@ -1,6 +1,7 @@
 import { LsdIcon } from '../LsdIcon'
 
-export const CloseIcon = LsdIcon((props) => (
+export const CloseIcon = LsdIcon(
+  (props) => (
     <svg
       width="14"
       height="14"
@@ -14,4 +15,8 @@ export const CloseIcon = LsdIcon((props) => (
         fill="black"
       />
     </svg>
-))
+  ),
+  {
+    filled: true,
+  },
+)

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

@@ -1,6 +1,7 @@
 import { LsdIcon } from '../LsdIcon'
 
-export const MoreIcon = LsdIcon((props) => (
+export const MoreIcon = LsdIcon(
+  (props) => (
     <svg
       width="14"
       height="14"
@@ -16,4 +17,8 @@ export const MoreIcon = LsdIcon((props) => (
         fill="black"
       />
     </svg>
-))
+  ),
+  {
+    filled: true,
+  },
+)

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

@@ -1,6 +1,7 @@
 import { LsdIcon } from '../LsdIcon'
 
-export const NewPageIcon = LsdIcon((props) => (
+export const NewPageIcon = LsdIcon(
+  (props) => (
     <svg
       width="14"
       height="14"
@@ -16,4 +17,8 @@ export const NewPageIcon = LsdIcon((props) => (
         fill="black"
       />
     </svg>
-))
+  ),
+  {
+    filled: true,
+  },
+)

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/SearchIcon/SearchIcon.tsx

@@ -1,6 +1,7 @@
 import { LsdIcon } from '../LsdIcon'
 
-export const SearchIcon = LsdIcon((props) => (
+export const SearchIcon = LsdIcon(
+  (props) => (
     <svg
       width="14"
       height="14"
@@ -16,4 +17,8 @@ export const SearchIcon = LsdIcon((props) => (
         fill="black"
       />
     </svg>
-))
+  ),
+  {
+    filled: true,
+  },
+)

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'

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

@@ -0,0 +1,8 @@
+export const quoteClasses = {
+  root: `lsd-quote`,
+
+  indentedInline: 'lsd-quote--indented-inline',
+  parentheses: 'lsd-quote--parentheses',
+
+  text: 'lsd-quote__text',
+}

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

@@ -0,0 +1,29 @@
+import { Meta, Story } from '@storybook/react'
+import { Quote, QuoteProps } from './Quote'
+
+export default {
+  title: 'Quote',
+  component: Quote,
+  argTypes: {
+    mode: {
+      type: {
+        name: 'enum',
+        value: ['indented-line', 'parentheses'],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<QuoteProps> = (args) => (
+  <div style={{ maxWidth: '600px' }}>
+    <Quote {...args}>
+      <div>
+        A wise man can learn more from a foolish question than a fool can learn
+        from a wise answer.
+      </div>
+    </Quote>
+  </div>
+)
+Root.args = {
+  mode: 'indented-line',
+}

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

@@ -0,0 +1,27 @@
+import { css } from '@emotion/react'
+import { quoteClasses } from './Quote.classes'
+
+export const QuoteStyles = css`
+  .${quoteClasses.root} {
+    color: rgb(var(--lsd-text-primary));
+    white-space: pre-wrap;
+  }
+
+  .${quoteClasses.indentedInline} {
+    border-left: 1px solid rgb(var(--lsd-border-primary));
+    padding: 4px 8px 4px 28px;
+  }
+
+  .${quoteClasses.parentheses} {
+    padding: 0px;
+    text-align: center;
+  }
+
+  .${quoteClasses.parentheses}::before {
+    content: '***';
+  }
+
+  .${quoteClasses.parentheses}::after {
+    content: '***';
+  }
+`

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

@@ -0,0 +1,33 @@
+import clsx from 'clsx'
+import React from 'react'
+import { Typography } from '../Typography'
+import { quoteClasses } from './Quote.classes'
+
+export type QuoteProps = React.HTMLAttributes<HTMLDivElement> & {
+  mode?: 'indented-line' | 'parentheses'
+}
+
+export const Quote: React.FC<QuoteProps> & {
+  classes: typeof quoteClasses
+} = ({ mode = 'indented-line', children, ...props }) => {
+  return (
+    <>
+      <div
+        {...props}
+        className={clsx(
+          props.className,
+          quoteClasses.root,
+          mode && mode === 'parentheses'
+            ? quoteClasses.parentheses
+            : quoteClasses.indentedInline,
+        )}
+      >
+        <Typography color="primary" component="label" variant={'label1'}>
+          {children}
+        </Typography>
+      </div>
+    </>
+  )
+}
+
+Quote.classes = quoteClasses

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

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

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

@@ -0,0 +1,7 @@
+export const tagClasses = {
+  root: `lsd-tag`,
+
+  outlined: `lsd-tag--outlined`,
+  filled: `lsd-tag--filled`,
+  disabled: 'lsd-tag--disabled',
+}

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

@@ -0,0 +1,39 @@
+import { Meta, Story } from '@storybook/react'
+import { FolderIcon } from '../Icons'
+import { Tag, TagProps } from './Tag'
+
+export default {
+  title: 'Tag',
+  component: Tag,
+  argTypes: {
+    variant: {
+      type: {
+        name: 'enum',
+        value: ['outlined', 'filled'],
+      },
+    },
+    iconDirection: {
+      type: {
+        name: 'enum',
+        value: ['left', 'right', 'none'],
+      },
+    },
+    disabled: {
+      type: {
+        name: 'boolean',
+        value: [true, false],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<TagProps> = (args) => (
+  <Tag {...args} icon={<FolderIcon color="primary" />} />
+)
+
+Root.args = {
+  variant: 'outlined',
+  label: 'Tag',
+  iconDirection: 'left',
+  disabled: false,
+}

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

@@ -0,0 +1,42 @@
+import { css } from '@emotion/react'
+import { tagClasses } from './Tag.classes'
+
+export const TagStyles = css`
+  .${tagClasses.root} {
+    width: fit-content;
+    height: 28px;
+    padding: 4px 12px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+
+    border: 1px solid rgb(var(--lsd-icon-primary));
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .${tagClasses.filled} {
+    background-color: rgb(var(--lsd-icon-primary));
+    color: rgb(var(--lsd-text-secondary));
+    svg {
+      --lsd-icon-primary: var(--lsd-icon-secondary);
+    }
+  }
+
+  .${tagClasses.outlined} {
+    color: rgb(var(--lsd-text-primary));
+  }
+
+  .${tagClasses.disabled} {
+    opacity: 0.3;
+    cursor: initial;
+    pointer-events: none;
+  }
+`

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

@@ -0,0 +1,49 @@
+import clsx from 'clsx'
+import React from 'react'
+import { Typography } from '../Typography'
+import { tagClasses } from './Tag.classes'
+
+export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: 'outlined' | 'filled'
+  label: string
+  icon?: React.ReactNode
+  iconDirection?: 'left' | 'right'
+  disabled?: boolean
+}
+
+export const Tag: React.FC<TagProps> & {
+  classes: typeof tagClasses
+} = ({
+  label,
+  variant = 'outlined',
+  disabled = 'false',
+  icon,
+  iconDirection = 'left',
+  children,
+  ...props
+}) => {
+  const renderItems = () => (
+    <>
+      {iconDirection === 'left' && icon}
+      <Typography className={tagClasses[variant]}>{label}</Typography>
+      {iconDirection === 'right' && icon}
+    </>
+  )
+
+  return (
+    <div
+      aria-label={label}
+      {...props}
+      className={clsx(
+        props.className,
+        tagClasses.root,
+        tagClasses[variant],
+        disabled && tagClasses.disabled,
+      )}
+    >
+      {renderItems()}
+    </div>
+  )
+}
+
+Tag.classes = tagClasses

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

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

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

@@ -0,0 +1,15 @@
+export const textFieldClasses = {
+  root: `lsd-textField`,
+
+  input: `lsd-textField__input`,
+  icon: `lsd-textField__icon`,
+
+  supportingText: 'lsd-textField__supporting-text',
+
+  disabled: `lsd-textField--disabled`,
+  error: 'lsd-textField--error',
+
+  large: `lsd-textField--large`,
+  medium: `lsd-textField--medium`,
+  withIcon: `lsd-textField--with-icon`,
+}

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

@@ -0,0 +1,30 @@
+import { Meta, Story } from '@storybook/react'
+import { TextField, TextFieldProps } from './TextField'
+
+export default {
+  title: 'TextField',
+  component: TextField,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['medium', 'large'],
+      },
+      defaultValue: 'large',
+    },
+  },
+} as Meta
+
+export const Root: Story<TextFieldProps> = (args) => (
+  <TextField {...args}>TextField</TextField>
+)
+Root.args = {
+  size: 'large',
+  supportingText: 'Supporting text',
+  disabled: false,
+  withIcon: false,
+  error: false,
+  placeholder: 'Placeholder',
+  defaultValue: 'default value',
+  onChange: undefined,
+}

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

@@ -0,0 +1,68 @@
+import { css } from '@emotion/react'
+import { textFieldClasses } from './TextField.classes'
+
+export const TextFieldStyles = css`
+  .${textFieldClasses.root} {
+    width: auto;
+    border-bottom: 1px solid rgb(var(--lsd-border-primary));
+    box-sizing: border-box;
+    align-items: center;
+  }
+
+  .${textFieldClasses.root} > div {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .${textFieldClasses.disabled} {
+    opacity: 0.34;
+  }
+
+  .${textFieldClasses.input} {
+    border: none;
+    outline: none;
+    font-size: 14px;
+    color: rgb(var(--lsd-text-primary));
+    background: none;
+    width: 100%;
+  }
+
+  .${textFieldClasses.input}:hover {
+    outline: none;
+  }
+
+  .${textFieldClasses.input}::placeholder {
+    color: rgb(var(--lsd-text-primary));
+    opacity: 0.3;
+  }
+
+  .${textFieldClasses.error} {
+    text-decoration: line-through;
+  }
+
+  .${textFieldClasses.supportingText} {
+    width: fit-content;
+    margin-top: 20px;
+  }
+
+  .${textFieldClasses.large} {
+    width: 208px;
+    height: 40px;
+    padding: 10px 14px;
+  }
+
+  .${textFieldClasses.medium} {
+    width: 188px;
+    height: 32px;
+    padding: 6px 12px;
+  }
+
+  .${textFieldClasses.withIcon} {
+  }
+
+  .${textFieldClasses.icon} {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+`

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

@@ -0,0 +1,96 @@
+import clsx from 'clsx'
+import React, { useRef } from 'react'
+import { useInput } from '../../utils/useInput'
+import { CheckIcon, CloseIcon, ErrorIcon } from '../Icons'
+import { Typography } from '../Typography'
+import { textFieldClasses } from './TextField.classes'
+
+export type TextFieldProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange' | 'value'
+> &
+  Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+    size?: 'large' | 'medium'
+    withIcon?: boolean
+    error?: boolean
+    disabled?: boolean
+    supportingText?: string
+    value?: string
+    defaultValue?: string
+    placeholder?: string
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  }
+
+export const TextField: React.FC<TextFieldProps> & {
+  classes: typeof textFieldClasses
+} = ({
+  size = 'large',
+  withIcon = false,
+  supportingText,
+  error = false,
+  children,
+  value,
+  placeholder,
+  defaultValue,
+  onChange,
+  inputProps = {},
+  ...props
+}) => {
+  const ref = useRef<HTMLInputElement>(null)
+  const input = useInput({ defaultValue, value, onChange, ref })
+
+  const onCancel = () => input.setValue('')
+
+  return (
+    <div
+      className={clsx(
+        props.className,
+        textFieldClasses.root,
+        textFieldClasses[size],
+        props.disabled && textFieldClasses.disabled,
+        withIcon && textFieldClasses.withIcon,
+      )}
+      {...props}
+    >
+      <div>
+        <input
+          placeholder={placeholder}
+          {...inputProps}
+          ref={ref}
+          value={input.value}
+          onChange={input.onChange}
+          className={clsx(
+            inputProps.className,
+            textFieldClasses.input,
+            error && textFieldClasses.error,
+          )}
+        />
+        {withIcon && error ? (
+          <span className={textFieldClasses.icon} onClick={onCancel}>
+            <ErrorIcon color="primary" className={textFieldClasses.icon} />
+          </span>
+        ) : withIcon && !input.filled ? (
+          <span className={textFieldClasses.icon}>
+            <CheckIcon color="primary" />
+          </span>
+        ) : withIcon && input.filled ? (
+          <span className={textFieldClasses.icon} onClick={onCancel}>
+            <CloseIcon color="primary" />
+          </span>
+        ) : null}
+      </div>
+      {supportingText && (
+        <div className={clsx(textFieldClasses.supportingText)}>
+          <Typography
+            variant={size === 'large' ? 'label1' : 'label2'}
+            component="p"
+          >
+            {supportingText}
+          </Typography>
+        </div>
+      )}
+    </div>
+  )
+}
+
+TextField.classes = textFieldClasses

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

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

packages/lsd-react/src/index.ts

@@ -1,14 +1,19 @@
-export * from './components/Button'
-export * from './components/Dropdown'
-export * from './components/DropdownItem'
-export * from './components/Icons'
-export * from './components/IconTag'
-export * from './components/ListBox'
-export * from './components/TabItem'
-export * from './components/Tabs'
-export * from './components/Theme'
+export * from './components/Autocomplete'
 export * from './components/Breadcrumb'
 export * from './components/BreadcrumbItem'
+export * from './components/Button'
 export * from './components/Card'
-export * from './components/CardHeader'
 export * from './components/CardBody'
+export * from './components/CardHeader'
+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'
+export * from './components/TabItem'
+export * from './components/Tabs'
+export * from './components/Tag'
+export * from './components/Theme'

packages/lsd-react/src/utils/useInput.ts

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react'
+
+export type InputValueType =
+  React.InputHTMLAttributes<HTMLInputElement>['value']
+
+export type InputOnChangeType =
+  React.InputHTMLAttributes<HTMLInputElement>['onChange']
+
+export type InputProps = {
+  value?: InputValueType
+  defaultValue?: InputValueType
+  onChange?: InputOnChangeType
+  ref?: React.RefObject<HTMLInputElement>
+}
+
+export const useInput = (props: InputProps) => {
+  const [value, setValue] = useState<InputValueType>(
+    props.value ?? props.defaultValue ?? '',
+  )
+
+  const uncontrolled = typeof props.value === 'undefined'
+  const filled =
+    typeof value === 'undefined'
+      ? false
+      : typeof value === 'string'
+      ? value.length > 0
+      : value.toString().length > 0
+
+  const onChange: InputOnChangeType = (event) => {
+    if (uncontrolled) return setValue(event.target.value)
+    props.onChange && props.onChange(event)
+  }
+
+  const setter = (value: InputValueType) => {
+    if (!props.ref?.current) return
+
+    const element = props.ref.current
+    const event = new Event('input', { bubbles: true })
+
+    Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      'value',
+    )?.set?.call?.(element, value)
+
+    element.dispatchEvent(event)
+  }
+
+  useEffect(() => {
+    !uncontrolled && setValue(props.value)
+  }, [uncontrolled, props.value])
+
+  return {
+    value,
+    filled,
+    onChange,
+    setValue: setter,
+  }
+}