LegendItem Component

wri · Dec 29, 2024 · 2c59424 · 2c59424
1 parent 28a5dce
commit 2c59424
Show file tree

Hide file tree

Showing 23 changed files with 535 additions and 10 deletions.
diff --git a/src/components/Banner/styled.ts b/src/components/Banner/styled.ts
@@ -6,7 +6,7 @@ export const DefaultBanner = styled.div<{
   size: string
 }>`
   width: 100%;
-  min-width: ${({ size }) => (size === 'small' ? '238px' : '366px')};
+  min-width: ${({ size }) => (size === 'small' ? '234px' : '366px')};
   border-radius: 4px;
   padding: ${({ size }) =>
     size === 'small' ? '8px 8px 12px 8px' : '8px 12px 12px 12px'};
@@ -17,6 +17,7 @@ export const DefaultBanner = styled.div<{
     isButtonRight ? 'space-between' : 'flex-start'};
   flex-direction: ${({ isButtonRight }) => (isButtonRight ? 'row' : 'column')};
   gap: 8px;
+  margin-bottom: 16px;
 
   button {
     margin-left: ${({ isButtonRight }) => (isButtonRight ? 0 : '24px')};

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -35,7 +35,7 @@ const Input = ({
   }
 
   return (
-    <InputContainer size={size}>
+    <InputContainer size={size} className='input-container'>
       {errorMessage ? <ErrorBar size={size} /> : null}
       <Field.Root required={required} invalid={!!errorMessage} gap='0'>
         {label ? (

diff --git a/src/components/Input/types.ts b/src/components/Input/types.ts
@@ -4,7 +4,7 @@ export type InputProps = Omit<
   ChakraInputProps,
   'size' | 'variant' | 'colorPalette' | 'defaultChecked'
 > & {
-  label: string
+  label?: string
   caption?: string
   placeholder?: string
   errorMessage?: string

diff --git a/src/components/Legend/LayerParameters/README.md b/src/components/Legend/LayerParameters/README.md
@@ -1,6 +1,6 @@
 # LayerParameters
 
-[Storybook Ref](https://wri.github.io/wri-design-systems//?path=/docs/legend-layer-parameters--docs)
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/legend-layer-parameters--docs)
 
 [LayerParametersDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Legend/LayerParameters/LayerParametersDemo.tsx)
 
@@ -26,5 +26,6 @@ import { LayerParameters } from 'wri-design-systems'
 type LayerParametersProps = {
   label: string
   children: React.ReactNode
+  openedByDefault?: boolean
 }
 ```
diff --git a/src/components/Legend/LayerParameters/index.tsx b/src/components/Legend/LayerParameters/index.tsx
@@ -11,9 +11,13 @@ import {
   LayerParametersTrigger,
 } from './styled'
 
-const LayerParameters = ({ label, children }: LayerParametersProps) => (
+const LayerParameters = ({
+  label,
+  children,
+  openedByDefault,
+}: LayerParametersProps) => (
   <div>
-    <Accordion.Root defaultValue={[label]} multiple>
+    <Accordion.Root defaultValue={openedByDefault ? [label] : []} multiple>
       <LayerParametersItem value={label}>
         <LayerParametersTrigger>
           <Box

diff --git a/src/components/Legend/LayerParameters/styled.ts b/src/components/Legend/LayerParameters/styled.ts
@@ -3,7 +3,7 @@ import { Accordion } from '@chakra-ui/react'
 import { getThemedColor } from '../../../lib/theme'
 
 export const LayerParametersItem = styled(Accordion.Item)`
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   border: 1px solid ${getThemedColor('neutral', 300)};
   border-radius: 4px;
   box-shadow: 0px 1px 2px 0px #0000000d;

diff --git a/src/components/Legend/LayerParameters/types.ts b/src/components/Legend/LayerParameters/types.ts
@@ -1,4 +1,5 @@
 export type LayerParametersProps = {
   label: string
   children: React.ReactNode
+  openedByDefault?: boolean
 }
diff --git a/src/components/Legend/LegendItem/LegendItem.stories.tsx b/src/components/Legend/LegendItem/LegendItem.stories.tsx
@@ -0,0 +1,79 @@
+/* eslint-disable no-console */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import LegendItemStory from '.'
+import ScaleLegend from '../ScaleLegend'
+import QualitativeLegend from '../QualitativeLegend'
+import Banner from '../../Banner'
+import LayerParameters from '../LayerParameters'
+
+const meta = {
+  title: 'Legend/Legend Item',
+  component: LegendItemStory,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story: any) => (
+      <div style={{ width: '290px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof LegendItemStory>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const LegendItem: Story = {
+  args: {
+    layerName: 'Layer Name',
+    dataUnit: 'Data Unit',
+    onDrag: () => console.log('drag'),
+    onUpClick: () => console.log('up'),
+    onDownClick: () => console.log('down'),
+    onRemoveClick: () => console.log('remove'),
+    onInfoClick: () => console.log('info'),
+    onOpacityChanged: (value) => console.log('opacity changed', value),
+    children: null,
+  },
+  render: function Render(args) {
+    return (
+      <LegendItemStory {...args}>
+        <ScaleLegend
+          colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
+          values={['0%', '25%', '50%', '75%', '100%']}
+        />
+        <QualitativeLegend
+          type='raster'
+          label='Attribute'
+          caption='Caption'
+          color='#238B45'
+          onActionClick={() => console.log('click')}
+          showActionButton
+        />
+        <QualitativeLegend
+          type='raster'
+          label='Attribute'
+          caption='Caption'
+          color='#238B45'
+        />
+        <Banner
+          label='Label'
+          caption='caption'
+          variant='info-white'
+          actionLabel='Label'
+          size='small'
+        />
+        <LayerParameters label='Adjust layer parameters'>
+          <div>Component Placeholder</div>
+          <div>Component Placeholder</div>
+          <div>Component Placeholder</div>
+        </LayerParameters>
+      </LegendItemStory>
+    )
+  },
+}
diff --git a/src/components/Legend/LegendItem/LegendItemDemo.tsx b/src/components/Legend/LegendItem/LegendItemDemo.tsx
@@ -0,0 +1,56 @@
+/* eslint-disable no-console */
+import {
+  Banner,
+  LayerParameters,
+  LegendItem,
+  QualitativeLegend,
+  ScaleLegend,
+} from '../..'
+
+const LegendItemDemo = () => (
+  <div style={{ width: '290px' }}>
+    <LegendItem
+      layerName='Layer Name'
+      dataUnit='Data Unit'
+      onDrag={() => console.log('drag')}
+      onUpClick={() => console.log('up')}
+      onDownClick={() => console.log('down')}
+      onRemoveClick={() => console.log('remove')}
+      onInfoClick={() => console.log('info')}
+      onOpacityChanged={(value) => console.log('opacity changed', value)}
+    >
+      <ScaleLegend
+        colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
+        values={['0%', '25%', '50%', '75%', '100%']}
+      />
+      <QualitativeLegend
+        type='raster'
+        label='Attribute'
+        caption='Caption'
+        color='#238B45'
+        onActionClick={() => console.log('click')}
+        showActionButton
+      />
+      <QualitativeLegend
+        type='raster'
+        label='Attribute'
+        caption='Caption'
+        color='#238B45'
+      />
+      <Banner
+        label='Label'
+        caption='caption'
+        variant='info-white'
+        actionLabel='Label'
+        size='small'
+      />
+      <LayerParameters label='Adjust layer parameters'>
+        <div>Component Placeholder</div>
+        <div>Component Placeholder</div>
+        <div>Component Placeholder</div>
+      </LayerParameters>
+    </LegendItem>
+  </div>
+)
+
+export default LegendItemDemo
diff --git a/src/components/Legend/LegendItem/README.md b/src/components/Legend/LegendItem/README.md
@@ -0,0 +1,80 @@
+# LegendItem
+
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/legend-legend-item--docs)
+
+[LegendItemDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Legend/LegendItem/LegendItemDemo.tsx)
+
+## Import
+
+```js
+import {
+  LegendItem,
+  Banner,
+  LayerParameters,
+  LegendItem,
+  QualitativeLegend,
+  ScaleLegend,
+} from 'wri-design-systems'
+```
+
+## Usage
+
+```html
+<LegendItem
+  layerName='Layer Name'
+  dataUnit='Data Unit'
+  onDrag={() => console.log('drag')}
+  onUpClick={() => console.log('up')}
+  onDownClick={() => console.log('down')}
+  onRemoveClick={() => console.log('remove')}
+  onInfoClick={() => console.log('info')}
+  onOpacityChanged={(value) => console.log('opacity changed', value)}
+>
+  <ScaleLegend
+    colors={['#EDF8FB', '#B2E2E2', '#66C2A4', '#2CA25F', '#006D2C']}
+    values={['0%', '25%', '50%', '75%', '100%']}
+  />
+  <QualitativeLegend
+    type='raster'
+    label='Attribute'
+    caption='Caption'
+    color='#238B45'
+    onActionClick={() => console.log('click')}
+    showActionButton
+  />
+  <QualitativeLegend
+    type='raster'
+    label='Attribute'
+    caption='Caption'
+    color='#238B45'
+  />
+  <Banner
+    label='Label'
+    caption='caption'
+    variant='info-white'
+    actionLabel='Label'
+    size='small'
+  />
+  <LayerParameters label='Adjust layer parameters'>
+    <div>Component Placeholder</div>
+    <div>Component Placeholder</div>
+    <div>Component Placeholder</div>
+  </LayerParameters>
+</LegendItem>
+```
+
+## Props
+
+```ts
+type LegendItemProps = {
+  layerName: string
+  dataUnit: string
+  onDrag: VoidFunction
+  onUpClick: VoidFunction
+  onDownClick: VoidFunction
+  onRemoveClick: VoidFunction
+  children: React.ReactNode
+  onInfoClick: VoidFunction
+  onOpacityChanged: (value: number) => void
+}
+```
diff --git a/src/components/Legend/LegendItem/index.tsx b/src/components/Legend/LegendItem/index.tsx
@@ -0,0 +1,85 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import { LegendItemProps } from './types'
+import {
+  LegendItemDragAndDropActions,
+  LegendItemContainer,
+  LegendItemDataUnit,
+  LegendItemHeaderContainer,
+  LegendItemLayerName,
+  LegendItemButtonsContainer,
+} from './styled'
+import Button from '../../Buttons/Button'
+import { ChevronDownIcon, CloseIcon, DotsIcon, InfoIcon } from '../../icons'
+import IconButton from '../../Buttons/IconButton'
+import OpacityControl from '../OpacityControl'
+
+const LegendItem = ({
+  layerName,
+  dataUnit,
+  onDrag,
+  onUpClick,
+  onDownClick,
+  onRemoveClick,
+  children,
+  onInfoClick,
+  onOpacityChanged,
+}: LegendItemProps) => (
+  <LegendItemContainer>
+    <LegendItemDragAndDropActions>
+      <IconButton
+        icon={<DotsIcon />}
+        aria-label='Drag and drop'
+        onClick={onDrag}
+      />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          marginTop: '12px',
+          gap: '12px',
+        }}
+      >
+        <IconButton
+          icon={<ChevronDownIcon rotate='180' />}
+          aria-label='Up'
+          onClick={onUpClick}
+        />
+        <IconButton
+          icon={<ChevronDownIcon />}
+          aria-label='Down'
+          onClick={onDownClick}
+        />
+      </div>
+    </LegendItemDragAndDropActions>
+    <div>
+      <LegendItemHeaderContainer>
+        <div>
+          <LegendItemLayerName>{layerName}</LegendItemLayerName>
+          <LegendItemDataUnit>{dataUnit}</LegendItemDataUnit>
+        </div>
+        <Button
+          label='Remove'
+          size='small'
+          variant='secondary'
+          rightIcon={<CloseIcon />}
+          onClick={onRemoveClick}
+        />
+      </LegendItemHeaderContainer>
+      {children}
+      <LegendItemButtonsContainer>
+        <Button
+          label='About data'
+          size='small'
+          variant='secondary'
+          leftIcon={<InfoIcon />}
+          onClick={onInfoClick}
+        />
+        <OpacityControl defaultValue={80} onOpacityChanged={onOpacityChanged} />
+      </LegendItemButtonsContainer>
+    </div>
+  </LegendItemContainer>
+)
+
+export default LegendItem