refactor: refactor collapse component

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

@@ -12,8 +12,7 @@ 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 { CollapseHeaderStyles } from '../CollapseHeader/CollapseHeader.styles'
 import { CollapseStyles } from '../Collapse/Collapse.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
@@ -30,8 +29,7 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     BreadcrumbStyles,
     BreadcrumbItemStyles,
     CollapseStyles,
-    CollapseItemStyles,
-    SlotStyles,
+    CollapseHeaderStyles,
   ]
 
 export const CSSBaseline: React.FC<{ theme?: Theme }> = ({

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

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

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

@@ -1,4 +1,5 @@
 import { Meta, Story } from '@storybook/react'
+import { Typography } from '../Typography'
 import { Collapse, CollapseProps } from './Collapse'
 
 export default {
@@ -16,14 +17,18 @@ export default {
 
 export const Root: Story<CollapseProps> = (args) => (
   <div style={{ width: 'fit-content' }}>
-    <Collapse {...args}></Collapse>
+    <Collapse {...args}>
+      <div style={{ padding: '10px 18px' }}>
+        <Typography color="primary" component="label">
+          Slot component
+        </Typography>
+      </div>
+    </Collapse>
   </div>
 )
 
 Root.args = {
   size: 'large',
-  label: 'title',
+  label: 'Title',
   disabled: false,
-  text: 'Slot component.\nReplace me.\n↵',
-  textInline: false,
 }

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

@@ -1,5 +1,4 @@
 import { css } from '@emotion/react'
-import { slotClasses } from '../Slot/Slot.classes'
 import { collapseClasses } from './Collapse.classes'
 
 export const CollapseStyles = css`
@@ -10,8 +9,12 @@ export const CollapseStyles = css`
   }
 
   .${collapseClasses.open} {
-    .${slotClasses.root} {
+    .${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

@@ -1,46 +1,35 @@
 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 { CollapseHeader } from '../CollapseHeader'
 import { collapseClasses } from './Collapse.classes'
 
 export type CollapseProps = Omit<
   React.HTMLAttributes<HTMLDivElement>,
-  'label' | 'disabled'
+  'label'
 > & {
   label: string
-  text?: string
-  textInline?: boolean
   disabled?: boolean
   size?: 'small' | 'medium' | 'large'
+  open?: boolean
+  onChange?: (open: boolean) => void
 }
 
 export const Collapse: React.FC<CollapseProps> & {
   classes: typeof collapseClasses
-} = ({
-  label,
-  text = '',
-  textInline = false,
-  disabled = false,
-  size = 'large',
-  ...props
-}) => {
+} = ({ label, disabled = false, size = 'large', children, ...props }) => {
   const ref = useRef<HTMLDivElement>(null)
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(props.open ?? false)
 
-  const onTrigger = () => {
-    !disabled && setOpen((value) => !value)
+  const handleChange = (value: boolean) => {
+    if (typeof props.open === 'undefined') return setOpen(value)
+    props.onChange && props.onChange(value)
   }
 
-  useEffect(() => {
-    if (disabled && open) setOpen(false)
-  }, [open, disabled])
+  const onTrigger = () => !disabled && handleChange(!open)
 
-  useClickAway(ref, () => {
-    if (!open) return
-    onTrigger && onTrigger()
-  })
+  useEffect(() => {
+    disabled && open && handleChange(false)
+  }, [disabled, open, handleChange])
 
   return (
     <div
@@ -53,14 +42,15 @@ export const Collapse: React.FC<CollapseProps> & {
         open && collapseClasses.open,
       )}
     >
-      <CollapseItem
+      <CollapseHeader
         label={label}
         open={open}
-        onTrigger={onTrigger}
+        setOpen={setOpen}
         size={size}
+        onTrigger={onTrigger}
         disabled={disabled}
       />
-      {open && <Slot text={text} textInline={textInline} size={size} />}
+      {open && <div className={collapseClasses.content}>{children}</div>}
     </div>
   )
 }

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

@@ -1,9 +1,9 @@
 import { Meta, Story } from '@storybook/react'
-import { CollapseItem, CollapseItemProps } from './CollapseItem'
+import { CollapseHeader, CollapseHeaderProps } from './CollapseHeader'
 
 export default {
-  title: 'CollapseItem',
-  component: CollapseItem,
+  title: 'CollapseHeader',
+  component: CollapseHeader,
   argTypes: {
     size: {
       type: {
@@ -14,9 +14,9 @@ export default {
   },
 } as Meta
 
-export const Root: Story<CollapseItemProps> = (args) => (
+export const Root: Story<CollapseHeaderProps> = (args) => (
   <div style={{ width: 'fit-content' }}>
-    <CollapseItem {...args}></CollapseItem>
+    <CollapseHeader {...args}></CollapseHeader>
   </div>
 )
 
@@ -24,5 +24,4 @@ Root.args = {
   size: 'large',
   label: 'title',
   disabled: false,
-  open: false,
 }

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

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

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

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

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

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

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

@@ -1,16 +0,0 @@
-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/index.ts

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

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

packages/lsd-react/src/index.ts

@@ -9,3 +9,5 @@ export * from './components/Tabs'
 export * from './components/Theme'
 export * from './components/Breadcrumb'
 export * from './components/BreadcrumbItem'
+export * from './components/Collapse'
+export * from './components/CollapseHeader'