From 5919cac341dd5e752e36547f4acf7b5e36b6c58f Mon Sep 17 00:00:00 2001
From: AlejoYarce <alejo.yarce990@gmail.com>
Date: Tue, 10 Dec 2024 23:23:16 -0500
Subject: [PATCH] LayerParameter Component

---
 .../LayerParameters.stories.tsx               | 40 ++++++++++++++
 .../LayerParameters/LayerParametersDemo.tsx   | 13 +++++
 .../Legend/LayerParameters/README.md          | 30 +++++++++++
 .../Legend/LayerParameters/index.tsx          | 45 ++++++++++++++++
 .../Legend/LayerParameters/styled.ts          | 52 +++++++++++++++++++
 .../Legend/LayerParameters/types.ts           |  4 ++
 src/components/index.ts                       |  1 +
 7 files changed, 185 insertions(+)
 create mode 100644 src/components/Legend/LayerParameters/LayerParameters.stories.tsx
 create mode 100644 src/components/Legend/LayerParameters/LayerParametersDemo.tsx
 create mode 100644 src/components/Legend/LayerParameters/README.md
 create mode 100644 src/components/Legend/LayerParameters/index.tsx
 create mode 100644 src/components/Legend/LayerParameters/styled.ts
 create mode 100644 src/components/Legend/LayerParameters/types.ts

diff --git a/src/components/Legend/LayerParameters/LayerParameters.stories.tsx b/src/components/Legend/LayerParameters/LayerParameters.stories.tsx
new file mode 100644
index 0000000..b9e06a2
--- /dev/null
+++ b/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>
+    )
+  },
+}
diff --git a/src/components/Legend/LayerParameters/LayerParametersDemo.tsx b/src/components/Legend/LayerParameters/LayerParametersDemo.tsx
new file mode 100644
index 0000000..4aaf4c0
--- /dev/null
+++ b/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
diff --git a/src/components/Legend/LayerParameters/README.md b/src/components/Legend/LayerParameters/README.md
new file mode 100644
index 0000000..54b7e59
--- /dev/null
+++ b/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
+}
+```
diff --git a/src/components/Legend/LayerParameters/index.tsx b/src/components/Legend/LayerParameters/index.tsx
new file mode 100644
index 0000000..022647a
--- /dev/null
+++ b/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
diff --git a/src/components/Legend/LayerParameters/styled.ts b/src/components/Legend/LayerParameters/styled.ts
new file mode 100644
index 0000000..af48630
--- /dev/null
+++ b/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;
+    }
+  }
+`
diff --git a/src/components/Legend/LayerParameters/types.ts b/src/components/Legend/LayerParameters/types.ts
new file mode 100644
index 0000000..16c6544
--- /dev/null
+++ b/src/components/Legend/LayerParameters/types.ts
@@ -0,0 +1,4 @@
+export type LayerParametersProps = {
+  label: string
+  children: React.ReactNode
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index f13f0cb..7303531 100644
--- a/src/components/index.ts
+++ b/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'