updating READMEs + Demos

src/Demo/ButtonDemo.tsx

@@ -0,0 +1,5 @@
+import { Button } from '../components'
+
+const ButtonDemo = () => <Button label='Save and Download' variant='primary' />
+
+export default ButtonDemo

src/Demo/CheckboxDemo.tsx

@@ -0,0 +1,7 @@
+import { Checkbox } from '../components'
+
+const CheckboxDemo = () => (
+  <Checkbox label='Checkbox' name='Checkbox' value='1' defaultChecked />
+)
+
+export default CheckboxDemo

src/Demo/Layers/LayerGroupDemo1.tsx

@@ -0,0 +1,43 @@
+import { LayerGroupContainer, LayerGroup } from '../../components'
+
+const LayerGroupDemo1 = () => (
+  <LayerGroupContainer defaultIndex={[0]} allowMultipleOpen>
+    <LayerGroup
+      label='Title 1_1'
+      caption='Caption 1'
+      layerItems={[
+        {
+          name: 'layer-10',
+          label: 'Layer name 1',
+          caption: 'Caption 1',
+          isDefaultSelected: true,
+        },
+        {
+          name: 'layer-11',
+          label: 'Layer name 2',
+          caption: 'Caption 1',
+        },
+      ]}
+    />
+    <LayerGroup
+      label='Title 2'
+      caption='Caption 2'
+      layerItems={[
+        {
+          name: 'layer-20',
+          label: 'Layer name 3',
+          caption: 'Caption 1',
+          variant: 'radio',
+        },
+        {
+          name: 'layer-21',
+          label: 'Layer name 4',
+          caption: 'Caption 4',
+          variant: 'radio',
+        },
+      ]}
+    />
+  </LayerGroupContainer>
+)
+
+export default LayerGroupDemo1

src/Demo/Layers/LayerGroupDemo2.tsx

@@ -0,0 +1,43 @@
+import { LayerGroupContainer, LayerGroup } from '../../components'
+
+const LayerGroupDemo2 = () => (
+  <LayerGroupContainer defaultIndex={[0]} allowMultipleOpen>
+    <LayerGroup
+      label='Title 1_2'
+      caption='Caption 1'
+      layerItems={[
+        {
+          name: 'layer-12',
+          label: 'Layer name 1',
+          caption: 'Caption 1',
+        },
+        {
+          name: 'layer-13',
+          label: 'Layer name 2',
+          caption: 'Caption 1',
+          isDefaultSelected: true,
+        },
+      ]}
+    />
+    <LayerGroup
+      label='Title 2'
+      caption='Caption 2'
+      layerItems={[
+        {
+          name: 'layer-22',
+          label: 'Layer name 3',
+          caption: 'Caption 1',
+          variant: 'radio',
+        },
+        {
+          name: 'layer-23',
+          label: 'Layer name 4',
+          caption: 'Caption 4',
+          variant: 'radio',
+        },
+      ]}
+    />
+  </LayerGroupContainer>
+)
+
+export default LayerGroupDemo2

src/Demo/Layers/LayerGroupDemo3.tsx

@@ -0,0 +1,43 @@
+import { LayerGroupContainer, LayerGroup } from '../../components'
+
+const LayerGroupDemo3 = () => (
+  <LayerGroupContainer defaultIndex={[0]} allowMultipleOpen>
+    <LayerGroup
+      label='Title 1_3'
+      caption='Caption 1'
+      layerItems={[
+        {
+          name: 'layer-14',
+          label: 'Layer name 1',
+          caption: 'Caption 1',
+        },
+        {
+          name: 'layer-15',
+          label: 'Layer name 2',
+          caption: 'Caption 1',
+        },
+      ]}
+    />
+    <LayerGroup
+      label='Title 2'
+      caption='Caption 2'
+      layerItems={[
+        {
+          name: 'layer-24',
+          label: 'Layer name 3',
+          caption: 'Caption 1',
+          variant: 'radio',
+          isDefaultSelected: true,
+        },
+        {
+          name: 'layer-25',
+          label: 'Layer name 4',
+          caption: 'Caption 4',
+          variant: 'radio',
+        },
+      ]}
+    />
+  </LayerGroupContainer>
+)
+
+export default LayerGroupDemo3

src/Demo/Layers/LayerPanelDemo.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import { LayerPanel } from '../../components'
+import LayerGroupDemo1 from './LayerGroupDemo1'
+import LayerGroupDemo2 from './LayerGroupDemo2'
+import LayerGroupDemo3 from './LayerGroupDemo3'
+
+const defaultActiveTabLabel = 'Label 1'
+
+const LayerPanelDemo = () => {
+  const [tabSelected, setTabSelected] = useState(defaultActiveTabLabel)
+
+  return (
+    <LayerPanel
+      title='Title and more'
+      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' },
+        { label: 'Label 2' },
+        { label: 'Label 3' },
+      ]}
+      defaultActiveTabLabel={defaultActiveTabLabel}
+      onTabClick={setTabSelected}
+    >
+      {tabSelected === 'Label 1' ? <LayerGroupDemo1 /> : null}
+      {tabSelected === 'Label 2' ? <LayerGroupDemo2 /> : null}
+      {tabSelected === 'Label 3' ? <LayerGroupDemo3 /> : null}
+    </LayerPanel>
+  )
+}
+
+export default LayerPanelDemo

src/Demo/NavigationRailDemo.tsx

@@ -0,0 +1,25 @@
+import { AddIcon, SettingsIcon } from '@chakra-ui/icons'
+import { NavigationRail } from '../components'
+
+const NavigationRailDemo = () => (
+  <NavigationRail
+    tabs={[
+      {
+        id: 'label-1',
+        label: 'Label 1',
+      },
+      {
+        id: 'label-2',
+        label: 'Label 2',
+        icon: <SettingsIcon />,
+      },
+      {
+        id: 'label-3',
+        label: 'Label 3',
+        icon: <AddIcon />,
+      },
+    ]}
+  />
+)
+
+export default NavigationRailDemo

src/Demo/RadioDemo.tsx

@@ -0,0 +1,15 @@
+import { Radio, RadioGroup } from '../components'
+
+const RadioDemo = () => (
+  <>
+    <Radio label='Radio Alone' value='1' />
+
+    <RadioGroup name='radio-group' defaultValue='2'>
+      <Radio label='One' value='1' />
+      <Radio label='Two' value='2' />
+      <Radio label='Three' value='3' />
+    </RadioGroup>
+  </>
+)
+
+export default RadioDemo

src/Demo/SwitchDemo.tsx

@@ -0,0 +1,7 @@
+import { Switch } from '../components'
+
+const SwitchDemo = () => (
+  <Switch name='switch' label='isLabelOnRight isChecked' isLabelOnRight />
+)
+
+export default SwitchDemo

src/Demo/TabBarDemo.tsx

@@ -0,0 +1,25 @@
+import { TabBar } from '../components'
+
+const TabBarDemo = () => (
+  <div style={{ width: '300px' }}>
+    <TabBar
+      variant='panel'
+      tabs={[
+        { label: 'One' },
+        { label: 'Two' },
+        { label: 'Three', isDisabled: false },
+      ]}
+    />
+    <br />
+    <TabBar
+      variant='view'
+      tabs={[
+        { label: 'One' },
+        { label: 'Two' },
+        { label: 'Three', isDisabled: false },
+      ]}
+    />
+  </div>
+)
+
+export default TabBarDemo

src/components/Button/README.md

@@ -19,7 +19,7 @@ import { Button } from 'wri-design-systems'
 
 ## Props
 
-```js
+```ts
 type ButtonProps = Omit<
   ChakraButtonProps,
   'size' | 'variant' | 'colorScheme'

src/components/Checkbox/README.md

@@ -20,7 +20,7 @@ import { Checkbox } from 'wri-design-systems'
 
 ## Props
 
-```js
+```ts
 type CheckboxProps = Omit<
   ChakraCheckboxProps,
   | 'size'