Merge pull request #31 from acid-info/topic-update-collapse

Update Collapse Component

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

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

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

@@ -18,9 +18,35 @@ export default {
 export const Root: Story<CollapseProps> = (args) => (
   <div style={{ width: 'fit-content' }}>
     <Collapse {...args}>
-      <div style={{ padding: '10px 18px' }}>
+      <div
-        <Typography color="primary" component="label">
+        style={{
-          Slot component
+          display: 'flex',
+          height: '102px',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Typography
+          color="primary"
+          variant={args.size === 'small' ? 'label2' : 'label1'}
+          component="div"
+        >
+          Slot component.
+        </Typography>
+        <Typography
+          color="primary"
+          variant={args.size === 'small' ? 'label2' : 'label1'}
+          component="div"
+        >
+          Replace me.
+        </Typography>
+        <Typography
+          color="primary"
+          variant={args.size === 'small' ? 'label2' : 'label1'}
+          component="div"
+        >
+          ↵
         </Typography>
       </div>
     </Collapse>

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

@@ -1,11 +1,11 @@
 export const collapseHeaderClasses = {
   root: `lsd-collapse-header`,
 
-  trigger: `lsd-collapse-header-trigger`,
+  trigger: `lsd-collapse-header__trigger`,
-  triggerLabel: `lsd-collapse-header-trigger__label`,
+  label: `lsd-collapse-header__label`,
-  triggerIcons: `lsd-collapse-header-trigger-icons`,
+  icons: `lsd-collapse-header__icons`,
-  triggerIcon: `lsd-collapse-header-trigger-icons__icon`,
+  icon: `lsd-collapse-header__icon`,
-  triggerMenuIcon: `lsd-collapse-header-trigger-icons__menu-icon`,
+  menuIcon: `lsd-collapse-header__menu-icon`,
 
   open: 'lsd-collapse-header--open',
   disabled: 'lsd-collapse-header--disabled',

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

@@ -9,7 +9,7 @@ export const CollapseHeaderStyles = css`
   .${collapseHeaderClasses.root}:not(.${collapseHeaderClasses.disabled}) {
     .${collapseHeaderClasses.trigger} {
       &:hover {
-        .${collapseHeaderClasses.triggerLabel} {
+        .${collapseHeaderClasses.label} {
           text-decoration: underline;
         }
       }
@@ -22,7 +22,6 @@ export const CollapseHeaderStyles = css`
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 14px 10px 18px;
 
     cursor: pointer;
     background: none;
@@ -33,7 +32,7 @@ export const CollapseHeaderStyles = css`
     }
   }
 
-  .${collapseHeaderClasses.triggerLabel} {
+  .${collapseHeaderClasses.label} {
     cursor: inherit;
     white-space: nowrap;
     overflow: hidden;
@@ -41,18 +40,18 @@ export const CollapseHeaderStyles = css`
     margin: auto;
   }
 
-  .${collapseHeaderClasses.triggerIcons} {
+  .${collapseHeaderClasses.icons} {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
   }
 
-  .${collapseHeaderClasses.triggerIcon} {
+  .${collapseHeaderClasses.icon} {
     margin-right: 8px;
   }
 
-  .${collapseHeaderClasses.triggerMenuIcon} {
+  .${collapseHeaderClasses.menuIcon} {
   }
 
   .${collapseHeaderClasses.disabled} {
@@ -66,7 +65,7 @@ export const CollapseHeaderStyles = css`
     .${collapseHeaderClasses.trigger} {
       width: 299px;
       height: 40px;
-      padding: 10px 18px;
+      padding: 9px 17px;
     }
   }
 
@@ -74,7 +73,7 @@ export const CollapseHeaderStyles = css`
     .${collapseHeaderClasses.trigger} {
       width: 270px;
       height: 32px;
-      padding: 6px 14px;
+      padding: 5px 13px;
     }
   }
 
@@ -82,7 +81,7 @@ export const CollapseHeaderStyles = css`
     .${collapseHeaderClasses.trigger} {
       width: 235px;
       height: 28px;
-      padding: 6px 12px;
+      padding: 5px 11px;
     }
   }
 `

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

@@ -46,20 +46,20 @@ export const CollapseHeader: React.FC<CollapseHeaderProps> & {
           color="primary"
           component="label"
           variant={size === 'small' ? 'label2' : 'label1'}
-          className={collapseHeaderClasses.triggerLabel}
+          className={collapseHeaderClasses.label}
         >
           {label}
         </Typography>
-        <div className={collapseHeaderClasses.triggerIcons}>
+        <div className={collapseHeaderClasses.icons}>
           {open ? (
             <ArrowUpIcon
               color="primary"
-              className={collapseHeaderClasses.triggerMenuIcon}
+              className={collapseHeaderClasses.menuIcon}
             />
           ) : (
             <ArrowDownIcon
               color="primary"
-              className={collapseHeaderClasses.triggerMenuIcon}
+              className={collapseHeaderClasses.menuIcon}
             />
           )}
         </div>