renaming ScaleLegend to ScaleBar + Storybook naming convention as ZH

README.md

@@ -89,45 +89,55 @@ function App() {
 
 ## Components
 
-### General
-
-- [Inline Message](https://github.com/wri/wri-design-systems/tree/main/src/components/InlineMessage)
-- [Navigation Rail](https://github.com/wri/wri-design-systems/tree/main/src/components/NavigationRail)
-- [Slider](https://github.com/wri/wri-design-systems/tree/main/src/components/Slider)
-- [Tab Bar](https://github.com/wri/wri-design-systems/tree/main/src/components/TabBar)
-- [Tag](https://github.com/wri/wri-design-systems/tree/main/src/components/Tag)
+## Forms
 
 ### Buttons
 
 - [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/Button)
-- [Close Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/CloseButton)
 - [Icon Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/IconButton)
+- [Close Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/CloseButton)
 
 ### Controls
 
-- [Checkbox](https://github.com/wri/wri-design-systems/tree/main/src/components/Checkbox)
-- [Radio Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Radio)
 - [Switch](https://github.com/wri/wri-design-systems/tree/main/src/components/Switch)
+- [Radio Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Radio)
+- [Checkbox](https://github.com/wri/wri-design-systems/tree/main/src/components/Checkbox)
+- [Slider](https://github.com/wri/wri-design-systems/tree/main/src/components/Slider)
+
+### Tags
+- [Tag](https://github.com/wri/wri-design-systems/tree/main/src/components/Tag)
 
 ### Inputs
 
 - [Text Input](https://github.com/wri/wri-design-systems/tree/main/src/components/TextInput)
 - [Text Area](https://github.com/wri/wri-design-systems/tree/main/src/components/Textarea)
 
+## Navigation
+
+- [Tab Bar](https://github.com/wri/wri-design-systems/tree/main/src/components/TabBar)
+- [Navigation Rail](https://github.com/wri/wri-design-systems/tree/main/src/components/NavigationRail)
+
+## Status
+
+- [Inline Message](https://github.com/wri/wri-design-systems/tree/main/src/components/InlineMessage)
+
+## Geospatial
+
 ### Layers
 
-- [Layer Group](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerGroup)
 - [Layer Item](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerItem)
+- [Layer Group](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerGroup)
 - [Layer Panel](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerPanel)
 - [Layer Sidebar](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerSidebar)
 
-### Legend
+### Legends
 
+- [Qualitative Attributes](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/QualitativeLegend)
+- [Scale Bar](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/ScaleBar)
 - [Layer Parameters](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LayerParameters)
 - [Legend Item](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LegendItem)
 - [Legend Panel](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LegendPanel)
-- [Qualitative Attributes](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/QualitativeLegend)
-- [Scale Legend](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/ScaleLegend)
+
 
 ## Building the lib
 

src/App.tsx

@@ -15,7 +15,7 @@ import IconButtonDemo from './components/Buttons/IconButton/IconButtonDemo'
 import SliderDemo from './components/Slider/SliderDemo'
 import QualitativeDemo from './components/Legend/QualitativeLegend/QualitativeLegendDemo'
 import LayerParametersDemo from './components/Legend/LayerParameters/LayerParametersDemo'
-import ScaleLegendDemo from './components/Legend/ScaleLegend/ScaleLegendDemo'
+import ScaleBarDemo from './components/Legend/ScaleBar/ScaleBarDemo'
 import { LegendItemDemo } from './components/Legend/LegendItem/LegendItemDemo'
 import LegendPanelDemo from './components/Legend/LegendPanel/LegendPanelDemo'
 
@@ -33,7 +33,7 @@ const App = () => (
       >
         <LegendPanelDemo />
         <LegendItemDemo />
-        <ScaleLegendDemo />
+        <ScaleBarDemo />
         <LayerParametersDemo />
         <QualitativeDemo />
         <SliderDemo />

src/components/Buttons/Button/Button.stories.tsx

@@ -7,7 +7,7 @@ import Button from '.'
 import { CheckIcon } from '../../icons'
 
 const meta = {
-  title: 'Buttons/Button',
+  title: 'Forms/Buttons/Button',
   component: Button,
   parameters: {
     layout: 'centered',

src/components/Buttons/CloseButton/CloseButton.stories.tsx

@@ -6,7 +6,7 @@ import { fn } from '@storybook/test'
 import CloseButton from '.'
 
 const meta = {
-  title: 'Buttons/Close Button',
+  title: 'Forms/Buttons/Close Button',
   component: CloseButton,
   parameters: {
     layout: 'centered',

src/components/Buttons/IconButton/IconButton.stories.tsx

@@ -7,7 +7,7 @@ import IconButton from '.'
 import { ChevronDownIcon, MenuDotsIcon } from '../../icons'
 
 const meta = {
-  title: 'Buttons/Icon Button',
+  title: 'Forms/Buttons/Icon Button',
   component: IconButton,
   parameters: {
     layout: 'centered',

src/components/Checkbox/Checkbox.stories.tsx

@@ -7,7 +7,7 @@ import { Stack } from '@chakra-ui/react'
 import Checkbox from '.'
 
 const meta = {
-  title: 'Controls/Checkbox',
+  title: 'Forms/Controls/Checkbox',
   component: Checkbox,
   parameters: {
     layout: 'centered',

src/components/InlineMessage/InlineMessage.stories.tsx

@@ -6,7 +6,7 @@ import { fn } from '@storybook/test'
 import InlineMessage from '.'
 
 const meta = {
-  title: 'Inline Message',
+  title: 'Status/Inline Message',
   component: InlineMessage,
   parameters: {
     layout: 'centered',

src/components/Layer/LayerGroup/LayerGroup.stories.tsx

@@ -6,7 +6,7 @@ import LayerGroupContainer from './LayerGroupContainer'
 import LayerGroup from '.'
 
 const meta = {
-  title: 'Layers/Layer Group',
+  title: 'Geospatial/Layers/Layer Group',
   component: LayerGroupContainer,
   parameters: {
     layout: 'centered',

src/components/Layer/LayerItem/LayerItem.stories.tsx

@@ -6,7 +6,7 @@ import LayerItem from '.'
 import RadioGroup from '../../Radio/RadioGroup'
 
 const meta = {
-  title: 'Layers/Layer Item',
+  title: 'Geospatial/Layers/Layer Item',
   component: LayerItem,
   parameters: {
     layout: 'centered',

src/components/Layer/LayerPanel/LayerPanel.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from '../LayerGroup/LayerGroupDemo'
 
 const meta = {
-  title: 'Layers/Layer Panel',
+  title: 'Geospatial/Layers/Layer Panel',
   component: LayerPanel,
   parameters: {
     layout: 'centered',

src/components/Layer/LayerSidebar/LayerSidebar.stories.tsx

@@ -6,7 +6,7 @@ import NavigationRail from '../../NavigationRail'
 import LayerPanelDemo from '../LayerPanel/LayerPanelDemo'
 
 const meta = {
-  title: 'Layers/Layer Sidebar',
+  title: 'Geospatial/Layers/Layer Sidebar',
   component: NavigationRail,
   parameters: {
     layout: 'fullscreen',

src/components/Legend/LayerParameters/LayerParameters.stories.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import LayerParametersStory from '.'
 
 const meta = {
-  title: 'Legend/Layer Parameters',
+  title: 'Geospatial/Legends/Layer Parameters',
   component: LayerParametersStory,
   parameters: {
     layout: 'centered',

src/components/Legend/LegendItem/LegendItem.stories.tsx

@@ -4,13 +4,13 @@ import React from 'react'
 
 import type { Meta, StoryObj } from '@storybook/react'
 import LegendItemStory from '.'
-import ScaleLegend from '../ScaleLegend'
+import ScaleBar from '../ScaleBar'
 import QualitativeLegend from '../QualitativeLegend'
 import InlineMessage from '../../InlineMessage'
 import LayerParameters from '../LayerParameters'
 
 const meta = {
-  title: 'Legend/Legend Item',
+  title: 'Geospatial/Legends/Legend Item',
   component: LegendItemStory,
   parameters: {
     layout: 'centered',
@@ -43,7 +43,7 @@ export const LegendItem: Story = {
   render: function Render(args) {
     return (
       <LegendItemStory {...args}>
-        <ScaleLegend
+        <ScaleBar
           colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
           values={['0%', '25%', '50%', '75%', '100%']}
         />

src/components/Legend/LegendItem/LegendItemDemo.tsx

@@ -7,7 +7,7 @@ import {
   LayerParameters,
   LegendItem,
   QualitativeLegend,
-  ScaleLegend,
+  ScaleBar,
 } from '../..'
 
 export const LegendItemDemo = ({
@@ -30,7 +30,7 @@ export const LegendItemDemo = ({
       onInfoClick={() => console.log('info')}
       onOpacityChanged={(value) => console.log('opacity changed', value)}
     >
-      <ScaleLegend
+      <ScaleBar
         colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
         values={['0%', '25%', '50%', '75%', '100%']}
       />
@@ -84,7 +84,7 @@ export const LegendItemDemo2 = ({
       onInfoClick={() => console.log('info')}
       onOpacityChanged={(value) => console.log('opacity changed', value)}
     >
-      <ScaleLegend
+      <ScaleBar
         colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
         values={['0%', '25%', '50%', '75%', '100%']}
       />
@@ -137,7 +137,7 @@ export const LegendItemDemo3 = ({
       onInfoClick={() => console.log('info')}
       onOpacityChanged={(value) => console.log('opacity changed', value)}
     >
-      <ScaleLegend
+      <ScaleBar
         colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
         values={['0%', '25%', '50%', '75%', '100%']}
       />

src/components/Legend/LegendItem/README.md

@@ -13,7 +13,7 @@ import {
   LayerParameters,
   LegendItem,
   QualitativeLegend,
-  ScaleLegend,
+  ScaleBar,
 } from '@worldresources/wri-design-systems'
 ```
 
@@ -30,7 +30,7 @@ import {
   onInfoClick={() => console.log('info')}
   onOpacityChanged={(value) => console.log('opacity changed', value)}
 >
-  <ScaleLegend
+  <ScaleBar
     colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
     values={['0%', '25%', '50%', '75%', '100%']}
   />

src/components/Legend/LegendPanel/LegendItem.stories.tsx

@@ -11,7 +11,7 @@ import {
 } from '../LegendItem/LegendItemDemo'
 
 const meta = {
-  title: 'Legend/Legend Panel',
+  title: 'Geospatial/Legends/Legend Panel',
   component: LegendPanelStory,
   parameters: {
     layout: 'centered',

src/components/Legend/QualitativeLegend/QualitativeLegend.stories.tsx

@@ -7,7 +7,7 @@ import QualitativeLegend from '.'
 import { InfoIcon } from '../../icons'
 
 const meta = {
-  title: 'Legend/Qualitative Attributes',
+  title: 'Geospatial/Legends/Qualitative Attributes',
   component: QualitativeLegend,
   parameters: {
     layout: 'centered',

src/components/Legend/ScaleLegend/README.md → src/components/Legend/ScaleBar/README.md

@@ -1,19 +1,19 @@
-# ScaleLegend
+# ScaleBar
 
-[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/legend-scale-legend--docs)
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/legend-scale-bar--docs)
 
-[ScaleLegendDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Legend/ScaleLegend/ScaleLegendDemo.tsx)
+[ScaleBarDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Legend/ScaleBar/ScaleBarDemo.tsx)
 
 ## Import
 
 ```js
-import { ScaleLegend } from '@worldresources/wri-design-systems'
+import { ScaleBar } from '@worldresources/wri-design-systems'
 ```
 
 ## Usage
 
 ```html
-<ScaleLegend
+<ScaleBar
   colors={['#E5F5F9', '#2CA25F']}
   values={['Low', 'Medium', 'High']}
   subLabels={['<100K', '>600K']}
@@ -23,7 +23,7 @@ import { ScaleLegend } from '@worldresources/wri-design-systems'
 ## Props
 
 ```ts
-type ScaleLegendProps = {
+type ScaleBarProps = {
   colors: string[]
   values: string[]
   subLabels?: string[]
@@ -34,7 +34,7 @@ type ScaleLegendProps = {
 ## Gradient
 
 ```html
-<ScaleLegend
+<ScaleBar
   colors={['#E5F5F9', '#2CA25F']}
   values={['Low', 'Medium', 'High']}
   subLabels={['<100K', '>600K']}
@@ -45,7 +45,7 @@ type ScaleLegendProps = {
 ## Sequential
 
 ```html
-<ScaleLegend
+<ScaleBar
   colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
   values={['0%', '25%', '50%', '75%', '100%']}
 />
@@ -54,7 +54,7 @@ type ScaleLegendProps = {
 ## Diverging
 
 ```html
-<ScaleLegend
+<ScaleBar
   colors={['#A6611A', '#DFC27D', '#F5F5F5', '#80CDC1', '#018571']}
   values={['0%', '25%', '50%', '75%', '100%']}
 />
@@ -63,7 +63,7 @@ type ScaleLegendProps = {
 ## WithSubLabels
 
 ```html
-<ScaleLegend
+<ScaleBar
   colors={['#A6611A', '#DFC27D', '#F5F5F5', '#80CDC1', '#018571']}
   values={['Low', 'Low-medium', 'Medium-high', 'High', 'Extremely high']}
   subLabels={['(0 to 9 in 1,000,000)', '(9 in 1,000,000 to 7 in 100,000)', '(7 in 100,000 to 3 in 10,000)', '(3 in 10,000 to 2 in 1,000)', '(more than 2 in 1,000)']}

src/components/Legend/ScaleLegend/ScaleLegend.stories.tsx → src/components/Legend/ScaleBar/ScaleBar.stories.tsx

@@ -2,11 +2,11 @@
 import React from 'react'
 
 import type { Meta, StoryObj } from '@storybook/react'
-import ScaleLegend from '.'
+import ScaleBar from '.'
 
 const meta = {
-  title: 'Legend/Scale Legend',
-  component: ScaleLegend,
+  title: 'Geospatial/Legends/Scale Bar',
+  component: ScaleBar,
   parameters: {
     layout: 'centered',
   },
@@ -18,7 +18,7 @@ const meta = {
       </div>
     ),
   ],
-} satisfies Meta<typeof ScaleLegend>
+} satisfies Meta<typeof ScaleBar>
 
 export default meta
 type Story = StoryObj<typeof meta>