DS-88 - Layer Panel + Adding READMEs

wri · Nov 12, 2024 · fcfd470 · fcfd470
1 parent 16fe163
commit fcfd470
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@ npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
 
 With this custom theme you can change the color scheme according to your Project Theme
 
-```
+```js
 import { extendTheme } from '@chakra-ui/react'
 
 export const projectTheme = extendTheme({
@@ -67,7 +67,7 @@ export const projectTheme = extendTheme({
 
 ### Wrap ChakraProvider at the root of your app
 
-```
+```js
 import * as React from 'react'
 import { projectTheme } from './lib/theme'
 
@@ -100,5 +100,6 @@ function App() {
 
 ### Layers
 
-- [LayerGroup](https://github.com/wri/wri-design-systems/tree/main/src/components/LayerGroup)
 - [LayerItem](https://github.com/wri/wri-design-systems/tree/main/src/components/LayerItem)
+- [LayerGroup](https://github.com/wri/wri-design-systems/tree/main/src/components/LayerGroup)
+- [LayerPanel](https://github.com/wri/wri-design-systems/tree/main/src/components/LayerPanel)
diff --git a/src/components/Button/README.md b/src/components/Button/README.md
@@ -4,13 +4,13 @@
 
 ## Import
 
-```
+```js
 import { Button } from 'wri-design-systems'
 ```
 
 ## Usage
 
-```
+```html
 <Button
   label='Save and Download'
   variant='primary'
@@ -19,7 +19,7 @@ import { Button } from 'wri-design-systems'
 
 ## Props
 
-```
+```js
 type ButtonProps = Omit<
   ChakraButtonProps,
   'size' | 'variant' | 'colorScheme'
@@ -36,7 +36,7 @@ type ButtonProps = Omit<
 
 ### Primary
 
-```
+```html
 <Button
   label='Primary'
   variant='primary'
@@ -45,7 +45,7 @@ type ButtonProps = Omit<
 
 ### Secondary
 
-```
+```html
 <Button
   label='Secondary'
   variant='secondary'
@@ -54,7 +54,7 @@ type ButtonProps = Omit<
 
 ### Borderless
 
-```
+```html
 <Button
   label='Borderless'
   variant='borderless'
@@ -63,7 +63,7 @@ type ButtonProps = Omit<
 
 ### Outline
 
-```
+```html
 <Button
   label='Outline'
   variant='outline'
@@ -74,7 +74,7 @@ type ButtonProps = Omit<
 
 ### Default
 
-```
+```html
 <Button
   label="Primary"
   size="default"
@@ -84,7 +84,7 @@ type ButtonProps = Omit<
 
 ### Small
 
-```
+```html
 <Button
   label="Primary"
   size="small"
@@ -96,7 +96,7 @@ type ButtonProps = Omit<
 
 ### Left Icon
 
-```
+```html
 <Button
   label="Outline"
   leftIcon={<SettingsIcon />}
@@ -106,7 +106,7 @@ type ButtonProps = Omit<
 
 ### Right Icon
 
-```
+```html
 <Button
   label="Outline"
   rightIcon={<SettingsIcon />}
@@ -118,7 +118,7 @@ type ButtonProps = Omit<
 
 ### Disabled
 
-```
+```html
 <Button
   label="Primary"
   variant="primary"
@@ -128,7 +128,7 @@ type ButtonProps = Omit<
 
 ### Loading state
 
-```
+```html
 <Button
   label="Primary"
   variant="primary"

diff --git a/src/components/Checkbox/README.md b/src/components/Checkbox/README.md
@@ -0,0 +1,99 @@
+# Checkbox
+
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/controls-checkbox--docs)
+
+## Import
+
+```js
+import { Checkbox } from 'wri-design-systems'
+```
+
+## Usage
+
+```html
+<Checkbox
+  label='Checkbox'
+  name='Checkbox'
+  value='1'
+/>
+```
+
+## Props
+
+```js
+type CheckboxProps = Omit<
+  ChakraCheckboxProps,
+  | 'size'
+  | 'variant'
+  | 'colorScheme'
+  | 'icon'
+  | 'iconColor'
+  | 'iconSize'
+  | 'spacing'
+> & {
+  label?: string
+  name: string
+  value: string
+  defaultChecked?: boolean
+  isChecked?: boolean
+  isDisabled?: boolean
+  isIndeterminate?: boolean
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+```
+
+## Default Checked
+
+```html
+<Checkbox
+  label='Checkbox'
+  name='Checkbox'
+  value='1'
+  defaultChecked
+/>
+```
+
+## Disabled
+
+```html
+<Checkbox
+  label='Checkbox'
+  name='Checkbox'
+  value='1'
+  isDisabled
+/>
+```
+
+## Invalid
+
+```html
+<Checkbox
+  label='Checkbox'
+  name='Checkbox'
+  value='1'
+  isInvalid
+/>
+```
+
+## Indeterminate
+
+You will need to add some logic to validate all checked status and set or not an indeterminate state to the parent Checkbox
+
+```js
+const [checkedItems, setCheckedItems] = React.useState([false, false])
+
+const allChecked = checkedItems.every(Boolean)
+const isIndeterminate = checkedItems.some(Boolean) && !allChecked
+
+....
+```
+
+```html
+<Checkbox
+  label='Checkbox'
+  name='Checkbox'
+  value='1'
+  isChecked={allChecked}
+  isIndeterminate={isIndeterminate}
+/>
+```
diff --git a/src/components/Layer/LayerGroup/index.tsx b/src/components/Layer/LayerGroup/index.tsx
@@ -15,7 +15,9 @@ import RadioGroup from '../../Radio/RadioGroup'
 import { LayerItemProps } from '../LayerItem/types'
 
 const getDefaultValue = (layerItems: LayerItemProps[]) => {
-  const defaultSelected = layerItems.find(item => item.variant === 'radio' && item.isDefaultSelected)
+  const defaultSelected = layerItems.find(
+    (item) => item.variant === 'radio' && item.isDefaultSelected,
+  )
   return defaultSelected?.name
 }
 
@@ -33,7 +35,8 @@ const LayerGroup = ({ label, caption, layerItems }: LayerGroupProps) => {
       if (item.isDefaultSelected) {
         newActiveItems = {
           ...newActiveItems,
-          [item.variant === 'radio' ? label : item.name]: item.isDefaultSelected,
+          [item.variant === 'radio' ? label : item.name]:
+            item.isDefaultSelected,
         }
       }
     })
@@ -66,7 +69,11 @@ const LayerGroup = ({ label, caption, layerItems }: LayerGroupProps) => {
       <AccordionItem>
         <h2>
           <AccordionButton
-            style={{ alignItems: 'flex-start', paddingTop: '16px', paddingBottom: 0 }}
+            style={{
+              alignItems: 'flex-start',
+              paddingTop: '16px',
+              paddingBottom: 0,
+            }}
             _hover={{ backgroundColor: 'transparent' }}
           >
             <LayerGroupTitle as='span' flex='1'>

diff --git a/src/components/Layer/LayerPanel/index.tsx b/src/components/Layer/LayerPanel/index.tsx
@@ -1,5 +1,10 @@
 import TabBar from '../../TabBar'
-import { LayerPanelDescription, LayerPanelContainer, LayerPanelHeader, LayerPanelTitle } from './styled'
+import {
+  LayerPanelDescription,
+  LayerPanelContainer,
+  LayerPanelHeader,
+  LayerPanelTitle,
+} from './styled'
 import { LayerPanelProps } from './types'
 
 const LayerPanel = ({

diff --git a/src/components/Layer/LayerPanel/styled.ts b/src/components/Layer/LayerPanel/styled.ts
@@ -5,30 +5,32 @@ export const LayerPanelContainer = styled.div<{
   theme?: ThemeProps
 }>`
   width: 300px;
-  background-color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 100)};
+  background-color: ${({ theme }) =>
+    getThemedColor(theme.colors, 'neutral', 100)};
 `
 
 export const LayerPanelHeader = styled.div<{
   theme?: ThemeProps
 }>`
   padding: 16px 16px 20px 16px;
-  border-bottom: 1px solid ${({ theme }) => getThemedColor(theme.colors, 'neutral', 300)};
+  border-bottom: 1px solid
+    ${({ theme }) => getThemedColor(theme.colors, 'neutral', 300)};
 `
 
 export const LayerPanelTitle = styled.p<{
   theme?: ThemeProps
 }>`
   color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 700)};
-    font-weight: 700;
-    font-size: 20px;
-    line-height: 28px;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 28px;
 `
 
 export const LayerPanelDescription = styled.p<{
   theme?: ThemeProps
 }>`
   color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 600)};
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 20px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
 `
diff --git a/src/components/TabBar/TabBar.stories.tsx b/src/components/TabBar/TabBar.stories.tsx
@@ -17,33 +17,21 @@ type Story = StoryObj<typeof meta>
 export const PanelTab: Story = {
   args: {
     variant: 'panel',
-    tabs: [
-      { label: 'One' },
-      { label: 'Two' },
-      { label: 'Three' },
-    ],
+    tabs: [{ label: 'One' }, { label: 'Two' }, { label: 'Three' }],
   },
 }
 
 export const ViewTab: Story = {
   args: {
     variant: 'view',
-    tabs: [
-      { label: 'One' },
-      { label: 'Two' },
-      { label: 'Three' },
-    ],
+    tabs: [{ label: 'One' }, { label: 'Two' }, { label: 'Three' }],
   },
 }
 
 export const PanelTabWithDefaultActive: Story = {
   args: {
     variant: 'panel',
-    tabs: [
-      { label: 'One' },
-      { label: 'Two' },
-      { label: 'Three' },
-    ],
+    tabs: [{ label: 'One' }, { label: 'Two' }, { label: 'Three' }],
     defaultActiveTabLabel: 'Three',
   },
 }