LegendPanel Component

README.md

@@ -124,5 +124,7 @@ function App() {
 ### Legend
 
 - [LayerParameters](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LayerParameters)
+- [LegendItem](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LegendItem)
+- [LegendPanel](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LegendPanel)
 - [QualitativeLegend](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/QualitativeLegend)
 - [ScaleLegend](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/ScaleLegend)

src/components/Legend/LegendItem/LegendItemDemo.tsx

@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
 /* eslint-disable no-console */
 import {
   Banner,
@@ -7,7 +10,7 @@ import {
   ScaleLegend,
 } from '../..'
 
-const LegendItemDemo = () => (
+export const LegendItemDemo = () => (
   <div style={{ width: '290px' }}>
     <LegendItem
       layerName='Layer Name'
@@ -53,4 +56,93 @@ const LegendItemDemo = () => (
   </div>
 )
 
-export default LegendItemDemo
+export const LegendItemDemo2 = () => (
+  <div style={{ width: '290px' }}>
+    <LegendItem
+      layerName='Layer Name 2'
+      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 const LegendItemDemo3 = () => (
+  <div style={{ width: '290px' }}>
+    <LegendItem
+      layerName='Layer Name 3'
+      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>
+)

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

@@ -0,0 +1,32 @@
+/* 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 LegendPanelStory from '.'
+import { LegendItemDemo, LegendItemDemo2, LegendItemDemo3 } from '../LegendItem/LegendItemDemo'
+
+const meta = {
+  title: 'Legend/Legend Panel',
+  component: LegendPanelStory,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof LegendPanelStory>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const LegendPanel: Story = {
+  args: {
+    legendContent: (
+      <>
+        <LegendItemDemo />
+        <LegendItemDemo2 />
+        <LegendItemDemo3 />
+      </>
+    ),
+    analysisContent: <div />,
+  },
+}

src/components/Legend/LegendPanel/LegendPanelDemo.tsx

@@ -0,0 +1,20 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import { LegendPanel } from '../..'
+import { LegendItemDemo, LegendItemDemo2, LegendItemDemo3 } from '../LegendItem/LegendItemDemo'
+
+const LegendPanelDemo = () => (
+  <LegendPanel
+    legendContent={(
+      <>
+        <LegendItemDemo />
+        <LegendItemDemo2 />
+        <LegendItemDemo3 />
+      </>
+    )}
+    analysisContent={<div />}
+  />
+)
+
+export default LegendPanelDemo

src/components/Legend/LegendPanel/README.md

@@ -0,0 +1,38 @@
+# LegendPanel
+
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/legend-legend-panel--docs)
+
+[LegendPanelDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Legend/LegendPanel/LegendPanelDemo.tsx)
+
+## Import
+
+```js
+import {
+  LegendPanel,
+} from 'wri-design-systems'
+```
+
+## Usage
+
+```html
+<LegendPanel
+  legendContent={(
+    <>
+      <LegendItemDemo />
+      <LegendItemDemo2 />
+      <LegendItemDemo3 />
+    </>
+  )}
+  analysisContent={<div />}
+/>
+```
+
+## Props
+
+```ts
+type LegendPanelProps = {
+  legendContent: React.ReactNode
+  analysisContent: React.ReactNode
+  onTabClick?: (tabValue: string) => void
+}
+```

src/components/Legend/LegendPanel/index.tsx

@@ -0,0 +1,50 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { Children, useState } from 'react'
+
+import { LegendPanelProps } from './types'
+import { LegendPanelContainer } from './styled'
+import { AnalysisIcon, LegendIcon } from '../../icons'
+import TabBar from '../../TabBar'
+
+const defaultTabValue = 'legend-tab'
+
+const LegendPanel = ({ legendContent, analysisContent, onTabClick }: LegendPanelProps) => {
+  const [selectedTabValue, setSelectedTabValue] = useState(defaultTabValue)
+  const [legentItems] = useState(Children.map(legendContent, (child, index) => ({
+    id: index,
+    child,
+    sequence: index,
+  })) || [])
+
+  const handleOnTabClick = (tabValue: string) => {
+    setSelectedTabValue(tabValue)
+
+    if (onTabClick) {
+      onTabClick(tabValue)
+    }
+  }
+
+  return (
+    <LegendPanelContainer>
+      <TabBar
+        tabs={[
+          { label: 'Legend', value: 'legend-tab', icon: <LegendIcon /> },
+          { label: 'Analysis', value: 'analysis-tab', icon: <AnalysisIcon /> },
+        ]}
+        onTabClick={handleOnTabClick}
+      />
+      {selectedTabValue === 'legend-tab' ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+          {legentItems.map((item) => item.child)}
+        </div>
+      ) : null}
+      {selectedTabValue === 'analysis-tab' ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+          {analysisContent}
+        </div>
+      ) : null}
+    </LegendPanelContainer>
+  )
+}
+
+export default LegendPanel

src/components/Legend/LegendPanel/styled.ts

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled'
+
+export const LegendPanelContainer = styled.div`
+  width: 290px;
+  box-shadow: 0px 2px 4px -2px #0000001A;
+  box-shadow: 0px 4px 6px -1px #0000001A;
+
+`

src/components/Legend/LegendPanel/types.ts

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export type LegendPanelProps = {
+  legendContent: React.ReactNode
+  analysisContent: React.ReactNode
+  onTabClick?: (tabValue: string) => void
+}

src/components/Legend/OpacityControl/styled.ts

@@ -38,5 +38,6 @@ export const OpacityControlInputContainer = styled.div`
     padding: 0 12px;
     height: 30px;
     margin-top: 18px;
+    width: 100%;
   }
 `

src/components/Slider/styled.ts

@@ -4,7 +4,6 @@ import { getThemedColor } from '../../lib/theme'
 
 export const ChakraSliderRoot = styled(Slider.Root)`
   height: 60px;
-  width: 100%;
   padding: 40px 12px;
 `
 

src/components/TabBar/types.ts

@@ -8,7 +8,7 @@ export type TabBarItemProps = Omit<ChakraTabs.TriggerProps, 'asChild'> & {
 }
 
 export type TabBarProps = {
-  variant: 'panel' | 'view'
+  variant?: 'panel' | 'view'
   defaultValue?: string
   tabs: TabBarItemProps[]
   onTabClick?: (tabLabel: string) => void

src/components/icons/Analysis.tsx

@@ -0,0 +1,12 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const AnalysisIcon = (props: IconProps) => (
+  <Icon {...props}>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1.71286 12.5714V3.42857H5.14144V12.5714H1.71286ZM6.28429 12.5714V6.85714H9.71286V12.5714H6.28429ZM10.8557 12.5714V0H14.2843V12.5714H10.8557ZM0.570007 16V13.7143H15.4271V16H0.570007Z" fill="currentColor" />
+    </svg>
+  </Icon>
+)

src/components/icons/Legend.tsx

@@ -0,0 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const LegendIcon = (props: IconProps) => (
+  <Icon {...props}>
+    <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_5584_387)">
+        <path d="M8.49906 16L0.940002 10.1207L2.32583 9.07087L8.49906 13.8583L14.6723 9.07087L16.0581 10.1207L8.49906 16ZM8.49906 11.7585L0.940002 5.87926L8.49906 0L16.0581 5.87926L8.49906 11.7585Z" fill="currentColor" />
+      </g>
+      <defs>
+        <clipPath id="clip0_5584_387">
+          <rect width="16" height="16" fill="white" transform="translate(0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  </Icon>
+)

src/components/icons/index.ts

@@ -9,3 +9,5 @@ export * from './MenuDots'
 export * from './Show'
 export * from './Hide'
 export * from './Dots'
+export * from './Legend'
+export * from './Analysis'

src/components/index.ts

@@ -20,3 +20,4 @@ export { default as QualitativeLegend } from './Legend/QualitativeLegend'
 export { default as LayerParameters } from './Legend/LayerParameters'
 export { default as ScaleLegend } from './Legend/ScaleLegend'
 export { default as LegendItem } from './Legend/LegendItem'
+export { default as LegendPanel } from './Legend/LegendPanel'