diff --git a/README.md b/README.md
index 18b469a..0c05df0 100644
--- 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
index f6a5221..6691b41 100644
--- 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
}
@@ -106,7 +106,7 @@ type ButtonProps = Omit<
### Right Icon
-```
+```html
}
@@ -118,7 +118,7 @@ type ButtonProps = Omit<
### Disabled
-```
+```html
+```
+
+## 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) => void
+}
+```
+
+## Default Checked
+
+```html
+
+```
+
+## Disabled
+
+```html
+
+```
+
+## Invalid
+
+```html
+
+```
+
+## 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
+
+```
diff --git a/src/components/Layer/LayerGroup/index.tsx b/src/components/Layer/LayerGroup/index.tsx
index 608d32f..82f78ef 100644
--- 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) => {
diff --git a/src/components/Layer/LayerPanel/index.tsx b/src/components/Layer/LayerPanel/index.tsx
index 4c8ecd3..15e5fe7 100644
--- 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
index 2eb9938..39aa182 100644
--- 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
index 607ff25..9bb2a41 100644
--- a/src/components/TabBar/TabBar.stories.tsx
+++ b/src/components/TabBar/TabBar.stories.tsx
@@ -17,33 +17,21 @@ type Story = StoryObj
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',
},
}