DS-17 - Layer Item + Radio + Radio Group updates

src/components/LayerItem/LayerItem.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import LayerItem from '.'
+
+const meta = {
+  title: 'Layers/LayerItem',
+  component: LayerItem,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof LayerItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Switch: Story = {
+  args: {
+    id: 'switch-layer',
+    label: 'Layer name',
+    caption: 'Caption',
+  },
+}
+
+export const Radio: Story = {
+  args: {
+    id: 'radio-layer',
+    label: 'Layer name',
+    caption: 'Caption',
+    variant: 'radio',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    id: 'switch-layer-1',
+    label: 'Layer name',
+    caption: 'Caption',
+    isDisabled: true,
+  },
+}
+
+export const RadioDisabeld: Story = {
+  args: {
+    id: 'radio-layer',
+    label: 'Layer name',
+    caption: 'Caption',
+    variant: 'radio',
+    isDisabled: true,
+  },
+}
+
+export const NoInfoButton: Story = {
+  args: {
+    id: 'switch-layer-2',
+    label: 'Layer name',
+    caption: 'Caption',
+    showInfoButton: false,
+  },
+}
+
+export const CustomInfoButtonLabel: Story = {
+  args: {
+    id: 'switch-layer-3',
+    label: 'Layer name',
+    caption: 'Caption',
+    infoButtonLabel: 'Another Label',
+  },
+}

src/components/LayerItem/index.tsx

@@ -0,0 +1,68 @@
+import { InfoIcon } from '@chakra-ui/icons'
+import Button from '../Button'
+import Switch from '../Switch'
+import Radio from '../Radio'
+import { LayerItemProps } from './types'
+import {
+  LayerCaption,
+  SwitchContainer,
+  SwitchContent,
+  LayerName,
+  LayerItemContainer,
+} from './styled'
+
+const LayerItem = ({
+  id,
+  label,
+  caption,
+  showInfoButton = true,
+  infoButtonLabel = 'About data',
+  variant = 'switch',
+  isDisabled,
+  onInfoClick,
+  isDefaultSelected,
+}: LayerItemProps) => {
+  const isSwitch = variant === 'switch'
+
+  return (
+    <LayerItemContainer>
+      {isSwitch ? (
+        <SwitchContainer>
+          <SwitchContent>
+            <LayerName>{label}</LayerName>
+            <LayerCaption>{caption}</LayerCaption>
+          </SwitchContent>
+          <Switch
+            id={id}
+            isDisabled={isDisabled}
+            isChecked={isDefaultSelected}
+          />
+        </SwitchContainer>
+      ) : (
+        <div>
+          <Radio label={label} value={id} isDisabled={isDisabled} />
+          <LayerCaption style={{ marginLeft: '28px' }}>{caption}</LayerCaption>
+        </div>
+      )}
+      {showInfoButton ? (
+        <div
+          style={{
+            marginTop: '8px',
+            marginLeft: !isSwitch ? '28px' : 0,
+          }}
+        >
+          <Button
+            variant='secondary'
+            label={infoButtonLabel}
+            rightIcon={<InfoIcon />}
+            size='small'
+            onClick={onInfoClick}
+            isDisabled={isDisabled}
+          />
+        </div>
+      ) : null}
+    </LayerItemContainer>
+  )
+}
+
+export default LayerItem

src/components/LayerItem/styled.ts

@@ -0,0 +1,36 @@
+import styled from '@emotion/styled'
+import { getThemedColor, ThemeProps } from '../../lib/theme'
+
+export const LayerItemContainer = styled.div<{
+  isDisabled?: boolean
+  theme?: ThemeProps
+}>`
+  width: 268px;
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid
+    ${({ theme }) => getThemedColor(theme.colors, 'neutral', 300)};
+`
+export const SwitchContainer = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+`
+export const SwitchContent = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+export const LayerName = styled.p<{ theme?: ThemeProps }>`
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  text-align: left;
+  color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 800)};
+`
+export const LayerCaption = styled.p<{ theme?: ThemeProps }>`
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  text-align: left;
+  color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 600)};
+`

src/components/LayerItem/types.ts

@@ -0,0 +1,11 @@
+export type LayerItemProps = {
+  id: string
+  label: string
+  caption?: string
+  showInfoButton?: boolean
+  infoButtonLabel?: string
+  variant?: 'switch' | 'radio'
+  isDisabled?: boolean
+  onInfoClick?: () => void
+  isDefaultSelected?: boolean
+}

src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import Radio from '.'
+
+const meta = {
+  title: 'Controls/Radio Button/Radio',
+  component: Radio,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: { onChange: fn() },
+} satisfies Meta<typeof Radio>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SingleRadio: Story = {
+  args: {
+    label: 'Single Radio',
+    value: '1',
+  },
+}
+
+export const DefaultChecked: Story = {
+  args: {
+    label: 'Single Radio',
+    value: '1',
+    isChecked: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Single Radio',
+    value: '1',
+    isDisabled: true,
+    isChecked: true,
+  },
+}

src/components/Radio/RadioGroup.stories.tsx

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
 import RadioGroup from './RadioGroup'
+import Radio from '.'
 
 const meta = {
-  title: 'Radio Group',
+  title: 'Controls/Radio Button/Radio Group',
   component: RadioGroup,
   parameters: {
     layout: 'centered',
@@ -18,46 +19,54 @@ type Story = StoryObj<typeof meta>
 export const MultipleRadios: Story = {
   args: {
     name: 'radio-group',
-    radios: [
-      { label: 'One', value: 'one' },
-      { label: 'Two', value: 'two' },
-      { label: 'Three', value: 'three' },
-    ],
+    children: (
+      <>
+        <Radio label='One' value='1' />
+        <Radio label='Two' value='2' />
+        <Radio label='Three' value='3' />
+      </>
+    ),
   },
 }
 
 export const DefaultValue: Story = {
   args: {
     name: 'radio-group',
-    radios: [
-      { label: 'One', value: 'one' },
-      { label: 'Two', value: 'two' },
-      { label: 'Three', value: 'three' },
-    ],
-    defaultValue: 'two',
+    children: (
+      <>
+        <Radio label='One' value='1' />
+        <Radio label='Two' value='2' />
+        <Radio label='Three' value='3' />
+      </>
+    ),
+    defaultValue: '2',
   },
 }
 
 export const Disabled: Story = {
   args: {
     name: 'radio-group',
-    radios: [
-      { label: 'One', value: 'one' },
-      { label: 'Two', value: 'two', isDisabled: true },
-      { label: 'Three', value: 'three', isDisabled: true },
-    ],
-    defaultValue: 'two',
+    children: (
+      <>
+        <Radio label='One' value='1' />
+        <Radio label='Two' value='2' isDisabled />
+        <Radio label='Three' value='3' />
+      </>
+    ),
+    defaultValue: '2',
   },
 }
 
-export const AsColumn: Story = {
+export const AsRow: Story = {
   args: {
     name: 'radio-group',
-    radios: [
-      { label: 'One', value: 'one' },
-      { label: 'Two', value: 'two' },
-      { label: 'Three', value: 'three' },
-    ],
-    isColumn: true,
+    children: (
+      <>
+        <Radio label='One' value='1' />
+        <Radio label='Two' value='2' />
+        <Radio label='Three' value='3' />
+      </>
+    ),
+    isRow: true,
   },
 }

src/components/Radio/RadioGroup.tsx

@@ -1,11 +1,10 @@
 import { useState } from 'react'
 import { RadioGroup as ChakraRadioGroup, Stack } from '@chakra-ui/react'
 import { RadioGroupProps } from './types'
-import { StyledRadio } from './styled'
 
 const RadioGroup = ({
-  radios,
-  isColumn,
+  children,
+  isRow = false,
   defaultValue,
   onChange,
   ...rest
@@ -22,12 +21,8 @@ const RadioGroup = ({
 
   return (
     <ChakraRadioGroup onChange={handleOnChange} value={selectedValue} {...rest}>
-      <Stack spacing={isColumn ? 2 : 5} direction={isColumn ? 'column' : 'row'}>
-        {radios.map((radio) => (
-          <StyledRadio isChecked={selectedValue === radio.value} {...radio}>
-            {radio.label}
-          </StyledRadio>
-        ))}
+      <Stack spacing={isRow ? 5 : 2} direction={isRow ? 'row' : 'column'}>
+        {children}
       </Stack>
     </ChakraRadioGroup>
   )

src/components/Radio/index.tsx

@@ -0,0 +1,21 @@
+import { RadioProps } from './types'
+import { StyledRadio } from './styled'
+
+const Radio = ({
+  label,
+  value,
+  isChecked,
+  isDisabled,
+  ...rest
+}: RadioProps) => (
+  <StyledRadio
+    value={value}
+    isChecked={isChecked}
+    isDisabled={isDisabled}
+    {...rest}
+  >
+    {label}
+  </StyledRadio>
+)
+
+export default Radio