feat: implement collapse component

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

@@ -12,6 +12,9 @@ import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles'
 import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles'
 import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
+import { CollapseItemStyles } from '../CollapseItem/CollapseItem.styles'
+import { SlotStyles } from '../Slot/Slot.styles'
+import { CollapseStyles } from '../Collapse/Collapse.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
   [
@@ -26,6 +29,9 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     IconTagStyles,
     BreadcrumbStyles,
     BreadcrumbItemStyles,
+    CollapseStyles,
+    CollapseItemStyles,
+    SlotStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({

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

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

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

@@ -0,0 +1,29 @@
+import { Meta, Story } from '@storybook/react'
+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}></Collapse>
+  </div>
+)
+
+Root.args = {
+  size: 'large',
+  label: 'title',
+  disabled: false,
+  text: 'Slot component.\nReplace me.\n↵',
+  textInline: false,
+}

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

@@ -0,0 +1,17 @@
+import { css } from '@emotion/react'
+import { slotClasses } from '../Slot/Slot.classes'
+import { collapseClasses } from './Collapse.classes'
+
+export const CollapseStyles = css`
+  .${collapseClasses.root} {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .${collapseClasses.open} {
+    .${slotClasses.root} {
+      border-top: 1px solid transparent;
+    }
+  }
+`

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,88 @@
+import { css } from '@emotion/react'
+import { collapseItemClasses } from './CollapseItem.classes'
+
+export const CollapseItemStyles = css`
+  .${collapseItemClasses.root} {
+    box-sizing: border-box;
+  }
+
+  .${collapseItemClasses.root}:not(.${collapseItemClasses.disabled}) {
+    .${collapseItemClasses.trigger} {
+      &:hover {
+        .${collapseItemClasses.triggerLabel} {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  .${collapseItemClasses.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;
+    }
+  }
+
+  .${collapseItemClasses.triggerLabel} {
+    cursor: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: auto;
+  }
+
+  .${collapseItemClasses.triggerIcons} {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .${collapseItemClasses.triggerIcon} {
+    margin-right: 8px;
+  }
+
+  .${collapseItemClasses.triggerMenuIcon} {
+  }
+
+  .${collapseItemClasses.disabled} {
+    .${collapseItemClasses.trigger} {
+      opacity: 0.34;
+      cursor: initial;
+    }
+  }
+
+  .${collapseItemClasses.large} {
+    .${collapseItemClasses.trigger} {
+      width: 299px;
+      height: 40px;
+      padding: 10px 18px;
+    }
+  }
+
+  .${collapseItemClasses.medium} {
+    .${collapseItemClasses.trigger} {
+      width: 270px;
+      height: 32px;
+      padding: 6px 14px;
+    }
+  }
+
+  .${collapseItemClasses.small} {
+    .${collapseItemClasses.trigger} {
+      width: 235px;
+      height: 28px;
+      padding: 6px 12px;
+    }
+  }
+`

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

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

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

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

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

@@ -0,0 +1,10 @@
+export const slotClasses = {
+  root: `lsd-slot`,
+
+  text: 'lsd-slot__text',
+  textInline: 'lsd-slot__text--inline',
+
+  small: `lsd-slot--small`,
+  medium: `lsd-slot--medium`,
+  large: `lsd-slot--large`,
+}

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

@@ -0,0 +1,22 @@
+import { Meta, Story } from '@storybook/react'
+import { Slot, SlotProps } from './Slot'
+
+export default {
+  title: 'Slot',
+  component: Slot,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['small', 'medium', 'large'],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<SlotProps> = (args) => <Slot {...args}>Slot</Slot>
+Root.args = {
+  size: 'large',
+  text: 'Slot component.\nReplace me.\n↵',
+  textInline: false,
+}

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

@@ -0,0 +1,35 @@
+import { css } from '@emotion/react'
+import { slotClasses } from './Slot.classes'
+
+export const SlotStyles = css`
+  .${slotClasses.root} {
+    color: rgb(var(--lsd-text-primary));
+    background: none;
+    border: 1px solid rgb(var(--lsd-border-primary));
+    white-space: pre;
+    text-align: center;
+    padding: 8px 16px;
+    box-sizing: border-box;
+  }
+
+  .${slotClasses.large} {
+    width: 299px;
+  }
+
+  .${slotClasses.medium} {
+    width: 270px;
+  }
+
+  .${slotClasses.small} {
+    width: 235px;
+  }
+
+  .${slotClasses.text} {
+    line-height: 16px;
+  }
+
+  .${slotClasses.textInline} {
+    white-space: normal;
+    text-align: left;
+  }
+`

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

@@ -0,0 +1,39 @@
+import clsx from 'clsx'
+import React from 'react'
+import { Typography } from '../Typography'
+import { slotClasses } from './Slot.classes'
+
+export type SlotProps = React.HTMLAttributes<HTMLDivElement> & {
+  size?: 'large' | 'medium' | 'small'
+  text?: string
+  textInline?: boolean
+}
+
+export const Slot: React.FC<SlotProps> & {
+  classes: typeof slotClasses
+} = ({ size = 'large', text = '', textInline = false, ...props }) => {
+  return (
+    <>
+      <div
+        {...props}
+        className={clsx(
+          props.className,
+          slotClasses.root,
+          slotClasses[size],
+          textInline && slotClasses.textInline,
+        )}
+      >
+        <Typography
+          color="primary"
+          component="label"
+          variant={size === 'small' ? 'label2' : 'label1'}
+          className={slotClasses.text}
+        >
+          {text}
+        </Typography>
+      </div>
+    </>
+  )
+}
+
+Slot.classes = slotClasses

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

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