READMEs updated

src/components/Layer/LayerSidebar/README.md

@@ -0,0 +1,85 @@
+# Layer Sidebar
+
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/layers-layersidebar--docs)
+
+[LayerSidebarDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Layer/LayerSidebar/Demo.tsx)
+
+Check [NavigationRail](https://github.com/wri/wri-design-systems/tree/main/src/components/NavigationRail) props for more.
+
+## Import
+
+```js
+import { NavigationRail } from 'wri-design-systems'
+```
+
+## Usage
+
+```css
+/* Suggested css */
+.app-container {
+  margin-left: 364px;
+  transition: margin-left 0.1s;
+  padding: 20px;
+}
+
+.app-container.sidebar-closed {
+  margin-left: 64px;
+  transition: margin-left 0.1s;
+}
+```
+
+```js
+import LayerPanelDemo from '..'
+import LayerPanelDemo2 from '..'
+import LayerPanelDemo3 from '..'
+
+const defaultTabValue = 'label-1'
+
+...
+
+const [selectedTabValue, setSelectedTabValue] = useState(defaultTabValue)
+
+const handleOnTabClick = (selectedValue: string) => {
+  setSelectedTabValue(selectedValue)
+}
+
+// Suggested css update
+const handleOnOpenChange = (open: boolean) => {
+  const $container = document.querySelector('.app-container')
+  if ($container) {
+    $container?.setAttribute(
+      'class',
+      open ? 'app-container' : 'app-container sidebar-closed',
+    )
+  }
+}
+```
+
+```html
+<NavigationRail
+  defaultValue={defaultTabValue}
+  onTabClick={handleOnTabClick}
+  onOpenChange={handleOnOpenChange}
+  tabs={[
+    {
+      label: 'Label 1',
+      value: 'label-1',
+      icon: <CheckIcon />,
+    },
+    {
+      label: 'Label 2',
+      value: 'label-2',
+      icon: <CheckIcon />,
+    },
+    {
+      label: 'Label 3',
+      value: 'label-3',
+      icon: <CheckIcon />,
+    },
+  ]}
+>
+  {selectedTabValue === 'label-1' ? <LayerPanelDemo /> : null}
+  {selectedTabValue === 'label-2' ? <LayerPanelDemo2 /> : null}
+  {selectedTabValue === 'label-3' ? <LayerPanelDemo3 /> : null}
+</NavigationRail>
+```

src/components/NavigationRail/README.md

@@ -0,0 +1,116 @@
+# NavigationRail
+
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/navigation-rail--docs)
+
+[NavigationRailDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/NavigationRail/NavigationRailDemo.tsx)
+
+## Import
+
+```js
+import { NavigationRail } from 'wri-design-systems'
+```
+
+## Usage
+
+```html
+  <NavigationRail
+    tabs={[
+      {
+        label: 'Label 1',
+        value: 'label-1',
+      },
+      {
+        label: 'Label 2',
+        value: 'label-2',
+      },
+      {
+        label: 'Label 3',
+        value: 'label-3',
+      },
+    ]}
+  />
+```
+
+## Props
+
+```ts
+type NavigationRailProps = {
+  tabs: NavigationRailTabProps[]
+  defaultValue?: string
+  onTabClick?: (selectedValue: string) => void
+  children?: React.ReactNode
+  onOpenChange?: (open: boolean) => void
+}
+```
+
+## Default Tab Selected
+
+```html
+  <NavigationRail
+    defaultValue='label-2'
+    tabs={[
+      {
+        label: 'Label 1',
+        value: 'label-1',
+      },
+      {
+        label: 'Label 2',
+        value: 'label-2',
+      },
+      {
+        label: 'Label 3',
+        value: 'label-3',
+      },
+    ]}
+  />
+```
+
+## With Icons
+
+```html
+  <NavigationRail
+    tabs={[
+      {
+        label: 'Label 1',
+        value: 'label-1',
+        icon: <CheckIcon />,
+      },
+      {
+        label: 'Label 2',
+        value: 'label-2',
+        icon: <CheckIcon />,
+      },
+      {
+        label: 'Label 3',
+        value: 'label-3',
+        icon: <CheckIcon />,
+      },
+    ]}
+  />
+```
+
+## With Open/Close Action
+
+```html
+  <NavigationRail
+    tabs={[
+      {
+        label: 'Label 1',
+        value: 'label-1',
+        icon: <CheckIcon />,
+      },
+      {
+        label: 'Label 2',
+        value: 'label-2',
+        icon: <CheckIcon />,
+      },
+      {
+        label: 'Label 3',
+        value: 'label-3',
+        icon: <CheckIcon />,
+      },
+    ]}
+  >
+    <div>Children</div>
+  </NavigationRail>
+```

src/components/TabBar/README.md

@@ -0,0 +1,88 @@
+# TabBar
+
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/tabbar--docs)
+
+[TabBarDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/TabBar/TabBarDemo.tsx)
+
+## Import
+
+```js
+import { TabBar } from 'wri-design-systems'
+```
+
+## Usage
+
+```html
+<TabBar
+  variant='panel'
+  tabs={[
+    { label: 'One', value: 'one' },
+    { label: 'Two', value: 'two' },
+    { label: 'Three', value: 'three' },
+  ]}
+/>
+```
+
+## Props
+
+```ts
+type TabBarProps = {
+  variant: 'panel' | 'view'
+  defaultValue?: string
+  tabs: TabBarItemProps[]
+  onTabClick?: (tabLabel: string) => void
+}
+```
+
+## View Variant
+
+```html
+<TabBar
+  variant='view'
+  tabs={[
+    { label: 'One', value: 'one' },
+    { label: 'Two', value: 'two' },
+    { label: 'Three', value: 'three' },
+  ]}
+/>
+```
+
+## Default Tab Active
+
+```html
+<TabBar
+  variant='panel'
+  defaultValue='two'
+  tabs={[
+    { label: 'One', value: 'one' },
+    { label: 'Two', value: 'two' },
+    { label: 'Three', value: 'three' },
+  ]}
+/>
+```
+
+## Disabled
+
+```html
+<TabBar
+  variant='panel'
+  tabs={[
+    { label: 'One', value: 'one' },
+    { label: 'Two', value: 'two', disabled: true },
+    { label: 'Three', value: 'three' },
+  ]}
+/>
+```
+
+## With Icons
+
+```html
+<TabBar
+  variant='panel'
+  tabs={[
+    { label: 'One', value: 'one', icon: <CheckIcon /> },
+    { label: 'Two', value: 'two' },
+    { label: 'Three', value: 'three' },
+  ]}
+/>
+```