LayerParameter Component

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

@@ -0,0 +1,40 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+import LayerParametersStory from '.'
+
+const meta = {
+  title: 'Legend/Layer Parameters',
+  component: LayerParametersStory,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story: any) => (
+      <div style={{ width: '238px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof LayerParametersStory>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const LayerParameters: Story = {
+  args: {
+    label: 'Adjust layer parameters',
+    children: <div>Children</div>,
+  },
+  render: function Render() {
+    return (
+      <LayerParametersStory label='Adjust layer parameters'>
+        <div>Component Placeholder</div>
+        <div>Component Placeholder</div>
+        <div>Component Placeholder</div>
+      </LayerParametersStory>
+    )
+  },
+}

src/components/Legend/LayerParameters/LayerParametersDemo.tsx

@@ -0,0 +1,13 @@
+import { LayerParameters } from '../..'
+
+const LayerParametersDemo = () => (
+  <div style={{ width: '238px' }}>
+    <LayerParameters label='Adjust layer parameters'>
+      <div>Component Placeholder</div>
+      <div>Component Placeholder</div>
+      <div>Component Placeholder</div>
+    </LayerParameters>
+  </div>
+)
+
+export default LayerParametersDemo

src/components/Legend/LayerParameters/README.md

@@ -0,0 +1,30 @@
+# LayerParameters
+
+[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)
+
+## Import
+
+```js
+import { LayerParameters } from 'wri-design-systems'
+```
+
+## Usage
+
+```html
+<LayerParameters label='Adjust layer parameters'>
+  <div>Component Placeholder</div>
+  <div>Component Placeholder</div>
+  <div>Component Placeholder</div>
+</LayerParameters>
+```
+
+## Props
+
+```ts
+type LayerParametersProps = {
+  label: string
+  children: React.ReactNode
+}
+```

src/components/Legend/LayerParameters/index.tsx

@@ -0,0 +1,45 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { Children } from 'react'
+
+import { Accordion, Box } from '@chakra-ui/react'
+import { LayerParametersProps } from './types'
+import { ChevronDownIcon } from '../../icons'
+import {
+  LayerParametersItem,
+  LayerParametersItemContent,
+  LayerParametersLabel,
+  LayerParametersTrigger,
+} from './styled'
+
+const LayerParameters = ({ label, children }: LayerParametersProps) => (
+  <div>
+    <Accordion.Root defaultValue={[label]} multiple>
+      <LayerParametersItem value={label}>
+        <LayerParametersTrigger>
+          <Box
+            width='full'
+            display='flex'
+            flexDirection='column'
+            alignItems='flex-start'
+          >
+            <LayerParametersLabel>{label}</LayerParametersLabel>
+          </Box>
+          <Accordion.ItemIndicator display='flex'>
+            <ChevronDownIcon
+              color='var(--chakra-colors-neutral-700)'
+              height='16px'
+              width='16px'
+            />
+          </Accordion.ItemIndicator>
+        </LayerParametersTrigger>
+        <LayerParametersItemContent>
+          {Children.map(children, (child) => (
+            <div className='layer-parameters-item-child'>{child}</div>
+          ))}
+        </LayerParametersItemContent>
+      </LayerParametersItem>
+    </Accordion.Root>
+  </div>
+)
+
+export default LayerParameters

src/components/Legend/LayerParameters/styled.ts

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled'
+import { Accordion } from '@chakra-ui/react'
+import { getThemedColor } from '../../../lib/theme'
+
+export const LayerParametersItem = styled(Accordion.Item)`
+  margin-bottom: 20px;
+  border: 1px solid ${getThemedColor('neutral', 300)};
+  border-radius: 4px;
+  box-shadow: 0px 1px 2px 0px #0000000d;
+`
+
+export const LayerParametersTrigger = styled(Accordion.ItemTrigger)`
+  padding: 6px 8px;
+  align-items: center;
+  background-color: ${getThemedColor('neutral', 100)};
+
+  &[aria-expanded='true'] {
+    border-bottom: 1px solid ${getThemedColor('neutral', 300)};
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  svg {
+    height: 10px;
+    width: 10px;
+  }
+`
+
+export const LayerParametersLabel = styled.p`
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  color: ${getThemedColor('neutral', 700)};
+`
+
+export const LayerParametersItemContent = styled(Accordion.ItemContent)`
+  padding: 12px 8px;
+  display: flex;
+  flex-direction: column;
+
+  .layer-parameters-item-child {
+    padding-bottom: 16px;
+    border-bottom: 1px solid ${getThemedColor('neutral', 300)};
+    margin-bottom: 16px;
+
+    &:last-child {
+      padding-bottom: 0px;
+      border-bottom: none;
+      margin-bottom: 0px;
+    }
+  }
+`

src/components/Legend/LayerParameters/types.ts

@@ -0,0 +1,4 @@
+export type LayerParametersProps = {
+  label: string
+  children: React.ReactNode
+}

src/components/index.ts

@@ -17,3 +17,4 @@ export { default as CloseButton } from './Buttons/CloseButton'
 export { default as IconButton } from './Buttons/IconButton'
 export { default as Slider } from './Slider'
 export { default as QualitativeLegend } from './Legend/Qualitative'
+export { default as LayerParameters } from './Legend/LayerParameters'