DS-17 - Layer updates

wri · Nov 14, 2024 · ba9538c · ba9538c
1 parent f89f1e6
commit ba9538c
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 22 deletions.
diff --git a/src/Demo/ButtonDemo.tsx b/src/Demo/ButtonDemo.tsx
@@ -1,5 +1,31 @@
 import { Button } from '../components'
 
-const ButtonDemo = () => <Button label='Save and Download' variant='primary' />
+const ButtonDemo = () => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      gap: '10px',
+    }}
+  >
+    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+      <Button label='Button Label' variant='primary' />
+      <Button label='Button Label' variant='primary' size='small' />
+    </div>
+    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+      <Button label='Button Label' variant='secondary' />
+      <Button label='Button Label' variant='secondary' size='small' />
+    </div>
+    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+      <Button label='Button Label' variant='borderless' />
+      <Button label='Button Label' variant='borderless' size='small' />
+    </div>
+    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+      <Button label='Button Label' variant='outline' />
+      <Button label='Button Label' variant='outline' size='small' />
+    </div>
+  </div>
+)
 
 export default ButtonDemo
diff --git a/src/components/Button/styled.ts b/src/components/Button/styled.ts
@@ -3,12 +3,12 @@ import { Button } from '@chakra-ui/react'
 import { getThemedColor, ThemeProps } from '../../lib/theme'
 
 export const BaseButton = styled(Button)`
-  width: ${({ size }) => (size === 'small' ? '120px' : '227px')};
+  width: auto;
   height: ${({ size }) => (size === 'small' ? '28px' : '40px')};
   font-size: ${({ size }) => (size === 'small' ? '12px' : '16px')};
   line-height: ${({ size }) => (size === 'small' ? '16px' : '24px')};
   font-weight: 700;
-  padding: ${({ size }) => (size === 'small' ? '4px 8px' : '6px 16px')};
+  padding: ${({ size }) => (size === 'small' ? '6px 8px' : '8px 16px')};
   border-radius: 4px;
   box-shadow: 0px 1px 2px 0px #0000000d;
 
@@ -104,11 +104,9 @@ export const SecondaryButton = styled(BaseButton)`
 
 export const BorderlessButton = styled(BaseButton)`
   ${(props) => {
-    const { theme, size } = props as { theme: ThemeProps; size: string }
+    const { theme } = props as { theme: ThemeProps; size: string }
     if (props.isDisabled) {
       return `
-        width: auto;
-        height: ${size === 'small' ? '24px' : '36px'};
         background-color: transparent;
         color: ${getThemedColor(theme.colors, 'neutral', 500)};
 
@@ -119,8 +117,6 @@ export const BorderlessButton = styled(BaseButton)`
     }
 
     return `
-      width: auto;
-      height: ${size === 'small' ? '24px' : '36px'};
       background-color: transparent;
       border: none;
       color: ${getThemedColor(theme.colors, 'neutral', 800)};

diff --git a/src/components/Checkbox/styled.ts b/src/components/Checkbox/styled.ts
@@ -12,7 +12,7 @@ export const StyledCheckbox = styled(Checkbox)<{
       ${({ theme }) => getThemedColor(theme.colors, 'neutral', 600)};
 
     svg path {
-      fill: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 100)};
+      fill: transparent;
     }
 
     &:hover,

diff --git a/src/components/Layer/LayerItem/index.tsx b/src/components/Layer/LayerItem/index.tsx
@@ -30,18 +30,19 @@ const LayerItem = ({
       {isSwitch ? (
         <SwitchContainer>
           <SwitchContent>
-            <LayerName>{label}</LayerName>
-            <LayerCaption>{caption}</LayerCaption>
+            <LayerName aria-label={label}>{label}</LayerName>
+            <LayerCaption aria-label={caption}>{caption}</LayerCaption>
           </SwitchContent>
           <Switch
+            aria-label={label}
             name={name}
             isDisabled={isDisabled}
             defaultChecked={isDefaultSelected}
             onChange={onChange ? (e) => onChange(e) : () => {}}
           />
         </SwitchContainer>
       ) : (
-        <div>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
           <Radio
             label={label}
             value={name}

diff --git a/src/components/Layer/LayerItem/styled.ts b/src/components/Layer/LayerItem/styled.ts
@@ -21,16 +21,16 @@ export const SwitchContent = styled.div`
   flex-direction: column;
 `
 export const LayerName = styled.p<{ theme?: ThemeProps }>`
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 20px;
+  line-height: 24px;
   text-align: left;
   color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 800)};
 `
 export const LayerCaption = styled.p<{ theme?: ThemeProps }>`
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
-  line-height: 16px;
+  line-height: 20px;
   text-align: left;
   color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 600)};
 `
diff --git a/src/components/Layer/LayerPanel/LayerPanel.stories.tsx b/src/components/Layer/LayerPanel/LayerPanel.stories.tsx
@@ -20,7 +20,8 @@ type Story = StoryObj<typeof meta>
 export const LayerGroupOpen: Story = {
   args: {
     title: 'Title and more',
-    description: 'Lorem ipsum dolor sit amet consectetur. Ac lectus massa auctor ac purus aliquam enim nibh accumsan. Nunc neque suspendisse.',
+    description:
+      'Lorem ipsum dolor sit amet consectetur. Ac lectus massa auctor ac purus aliquam enim nibh accumsan. Nunc neque suspendisse.',
     tabBarVariant: 'panel',
     buttonTabs: [
       { label: 'Label 1' },
@@ -39,21 +40,20 @@ export const LayerGroupOpen: Story = {
     const [tabSelected, setTabSelected] = useState('Label 1')
 
     return (
-      <LayerPanel {...args}
-        onTabClick={setTabSelected}
-      >
+      <LayerPanel {...args} onTabClick={setTabSelected}>
         {tabSelected === 'Label 1' ? <LayerGroupDemo1 /> : null}
         {tabSelected === 'Label 2' ? <LayerGroupDemo2 /> : null}
         {tabSelected === 'Label 3' ? <LayerGroupDemo3 /> : null}
       </LayerPanel>
     )
-  }
+  },
 }
 
 export const LayerGroupNoTabs: Story = {
   args: {
     title: 'Title and more',
-    description: 'Lorem ipsum dolor sit amet consectetur. Ac lectus massa auctor ac purus aliquam enim nibh accumsan. Nunc neque suspendisse.',
+    description:
+      'Lorem ipsum dolor sit amet consectetur. Ac lectus massa auctor ac purus aliquam enim nibh accumsan. Nunc neque suspendisse.',
     tabBarVariant: 'panel',
     children: <LayerGroupDemo3 />,
   },