lint updates

src/components/Layer/LayerGroup/LayerGroup.stories.tsx

@@ -17,8 +17,7 @@ type Story = StoryObj<typeof meta>
 export const LayerGroupOpen: Story = {
   args: {
     defaultIndex: [0],
-    allowMultiple: true,
-    allowToggle: true,
+    allowMultipleOpen: true,
     children: (
       <>
         <LayerGroup
@@ -27,12 +26,12 @@ export const LayerGroupOpen: Story = {
           layerItems={[
             {
               name: 'layer-1-item-1',
-              label: 'Layer name 1',
+              label: 'Layer 1 name 1',
               caption: 'Caption',
             },
             {
               name: 'layer-1-item-2',
-              label: 'Layer name 2',
+              label: 'Layer 1 name 2',
               caption: 'Caption',
             },
           ]}
@@ -43,12 +42,12 @@ export const LayerGroupOpen: Story = {
           layerItems={[
             {
               name: 'layer-2-item-1',
-              label: 'Layer name 1',
+              label: 'Layer 2 name 1',
               caption: 'Caption',
             },
             {
               name: 'layer-2-item-2',
-              label: 'Layer name 2',
+              label: 'Layer 2 name 2',
               caption: 'Caption',
             },
           ]}
@@ -61,41 +60,87 @@ export const LayerGroupOpen: Story = {
 export const LayerGroupWithRadios: Story = {
   args: {
     defaultIndex: [0],
-    allowMultiple: true,
-    allowToggle: true,
+    allowMultipleOpen: true,
     children: (
       <>
         <LayerGroup
-          label='Title 1'
-          caption='Caption 1'
+          label='Title 3'
+          caption='Caption 3'
           layerItems={[
             {
-              name: 'layer-1-item-11',
-              label: 'Layer name 1',
+              name: 'layer-3-item-1',
+              label: 'Layer 3 name 1',
               caption: 'Caption',
             },
             {
-              name: 'layer-1-item-12',
-              label: 'Layer name 2',
+              name: 'layer-3-item-2',
+              label: 'Layer 3 name 2',
               caption: 'Caption',
             },
           ]}
         />
         <LayerGroup
-          label='Title 2'
-          caption='Caption 2'
+          label='Title 4'
+          caption='Caption 4'
+          layerItems={[
+            {
+              name: 'layer-4-item-1',
+              label: 'Layer 4 name 1',
+              caption: 'Caption',
+              variant: 'radio',
+            },
+            {
+              name: 'layer-4-item-2',
+              label: 'Layer 4 name 2',
+              caption: 'Caption',
+              variant: 'radio',
+            },
+          ]}
+        />
+      </>
+    ),
+  },
+}
+
+export const LayerGroupDefaultSelected: Story = {
+  args: {
+    defaultIndex: [0],
+    allowMultipleOpen: true,
+    children: (
+      <>
+        <LayerGroup
+          label='Title 5'
+          caption='Caption 5'
+          layerItems={[
+            {
+              name: 'layer-5-item-1',
+              label: 'Layer 5 name 1',
+              caption: 'Caption',
+            },
+            {
+              name: 'layer-5-item-2',
+              label: 'Layer 5 name 2',
+              caption: 'Caption',
+              isDefaultSelected: true,
+            },
+          ]}
+        />
+        <LayerGroup
+          label='Title 6'
+          caption='Caption 6'
           layerItems={[
             {
-              name: 'layer-2-item-21',
-              label: 'Layer name 1',
+              name: 'layer-6-item-1',
+              label: 'Layer 6 name 1',
               caption: 'Caption',
               variant: 'radio',
             },
             {
-              name: 'layer-2-item-22',
-              label: 'Layer name 2',
+              name: 'layer-6-item-2',
+              label: 'Layer 6 name 2',
               caption: 'Caption',
               variant: 'radio',
+              isDefaultSelected: true,
             },
           ]}
         />

src/components/Layer/LayerGroup/LayerGroupContainer.tsx

@@ -3,15 +3,13 @@ import { LayerGroupContainerProps } from './types'
 
 const LayerGroupContainer = ({
   children,
-  allowMultiple = true,
-  allowToggle = true,
+  allowMultipleOpen = true,
   defaultIndex = [0],
   ...rest
 }: LayerGroupContainerProps) => (
   <div style={{ width: '300px' }}>
     <Accordion
-      allowMultiple={allowMultiple}
-      allowToggle={allowToggle}
+      allowMultiple={allowMultipleOpen}
       defaultIndex={defaultIndex}
       {...rest}
     >

src/components/Layer/LayerGroup/index.tsx

@@ -4,28 +4,37 @@ import {
   AccordionPanel,
   AccordionIcon,
   useTheme,
-  RadioGroup,
 } from '@chakra-ui/react'
 import { useEffect, useState } from 'react'
 import { LayerGroupProps } from './types'
 import { LayerGroupCaption, LayerGroupTitle } from './styled'
 import { getThemedColor } from '../../../lib/theme'
 import ActiveTag from '../../Tag/ActiveTag'
 import LayerItem from '../LayerItem'
+import RadioGroup from '../../Radio/RadioGroup'
+import { LayerItemProps } from '../LayerItem/types'
+
+const getDefaultValue = (layerItems: LayerItemProps[]) => {
+  const defaultSelected = layerItems.find(item => item.variant === 'radio' && item.isDefaultSelected)
+  return defaultSelected?.name
+}
 
 const LayerGroup = ({ label, caption, layerItems }: LayerGroupProps) => {
   const [activeItems, setActiveItems] = useState<{
     key?: string
     value?: boolean
   }>({})
+  const [defaultValue] = useState(getDefaultValue(layerItems))
   const theme = useTheme()
 
   useEffect(() => {
     let newActiveItems = { ...activeItems }
     layerItems.forEach((item) => {
-      newActiveItems = {
-        ...newActiveItems,
-        [item.name]: item.isDefaultSelected,
+      if (item.isDefaultSelected) {
+        newActiveItems = {
+          ...newActiveItems,
+          [item.variant === 'radio' ? label : item.name]: item.isDefaultSelected,
+        }
       }
     })
 
@@ -57,7 +66,7 @@ const LayerGroup = ({ label, caption, layerItems }: LayerGroupProps) => {
       <AccordionItem>
         <h2>
           <AccordionButton
-            style={{ alignItems: 'flex-start' }}
+            style={{ alignItems: 'flex-start', paddingTop: '16px', paddingBottom: 0 }}
             _hover={{ backgroundColor: 'transparent' }}
           >
             <LayerGroupTitle as='span' flex='1'>
@@ -73,9 +82,10 @@ const LayerGroup = ({ label, caption, layerItems }: LayerGroupProps) => {
         </h2>
         <LayerGroupCaption>{caption}</LayerGroupCaption>
         <AccordionPanel pb={0}>
-          <RadioGroup name={label}>
+          <RadioGroup name={label} defaultValue={defaultValue}>
             {layerItems.map((layerItem) => (
               <LayerItem
+                key={layerItem.label}
                 {...layerItem}
                 onChange={(e) => handleOnChange(e, layerItem.onChange)}
               />

src/components/Layer/LayerGroup/types.ts

@@ -2,8 +2,7 @@ import { AccordionProps } from '@chakra-ui/react'
 import { LayerItemProps } from '../LayerItem/types'
 
 export type LayerGroupContainerProps = Omit<AccordionProps, 'onChange'> & {
-  allowMultiple?: boolean
-  allowToggle?: boolean
+  allowMultipleOpen?: boolean
   defaultIndex?: number[]
 }
 

src/components/Layer/LayerPanel/index.tsx

@@ -0,0 +1,31 @@
+import TabBar from '../../TabBar'
+import { LayerPanelDescription, LayerPanelContainer, LayerPanelHeader, LayerPanelTitle } from './styled'
+import { LayerPanelProps } from './types'
+
+const LayerPanel = ({
+  title,
+  description,
+  tabBarVariant = 'panel',
+  buttonTabs,
+  defaultActiveTabLabel,
+  onTabClick,
+  children,
+}: LayerPanelProps) => (
+  <LayerPanelContainer>
+    <LayerPanelHeader>
+      <LayerPanelTitle>{title}</LayerPanelTitle>
+      <LayerPanelDescription>{description}</LayerPanelDescription>
+    </LayerPanelHeader>
+    {buttonTabs && buttonTabs.length > 0 ? (
+      <TabBar
+        variant={tabBarVariant}
+        defaultActiveTabLabel={defaultActiveTabLabel}
+        tabs={buttonTabs}
+        onTabClick={onTabClick}
+      />
+    ) : null}
+    {children}
+  </LayerPanelContainer>
+)
+
+export default LayerPanel

src/components/Layer/LayerPanel/styled.ts

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled'
+import { getThemedColor, ThemeProps } from '../../../lib/theme'
+
+export const LayerPanelContainer = styled.div<{
+  theme?: ThemeProps
+}>`
+  width: 300px;
+  background-color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 100)};
+`
+
+export const LayerPanelHeader = styled.div<{
+  theme?: ThemeProps
+}>`
+  padding: 16px 16px 20px 16px;
+  border-bottom: 1px solid ${({ theme }) => getThemedColor(theme.colors, 'neutral', 300)};
+`
+
+export const LayerPanelTitle = styled.p<{
+  theme?: ThemeProps
+}>`
+  color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 700)};
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 28px;
+`
+
+export const LayerPanelDescription = styled.p<{
+  theme?: ThemeProps
+}>`
+  color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 600)};
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+`

src/components/Layer/LayerPanel/types.ts

@@ -0,0 +1,11 @@
+import { TabBarItemProps } from '../../TabBar/types'
+
+export type LayerPanelProps = {
+  title: string
+  description: string
+  tabBarVariant?: 'panel' | 'view'
+  buttonTabs?: TabBarItemProps[]
+  defaultActiveTabLabel?: string
+  onTabClick?: (tabLabel: string) => void
+  children: React.ReactNode
+}

src/components/TabBar/TabBar.stories.tsx

@@ -18,9 +18,9 @@ export const PanelTab: Story = {
   args: {
     variant: 'panel',
     tabs: [
-      { id: 'one', label: 'One' },
-      { id: 'two', label: 'Two' },
-      { id: 'three', label: 'Three' },
+      { label: 'One' },
+      { label: 'Two' },
+      { label: 'Three' },
     ],
   },
 }
@@ -29,9 +29,9 @@ export const ViewTab: Story = {
   args: {
     variant: 'view',
     tabs: [
-      { id: 'one', label: 'One' },
-      { id: 'two', label: 'Two' },
-      { id: 'three', label: 'Three' },
+      { label: 'One' },
+      { label: 'Two' },
+      { label: 'Three' },
     ],
   },
 }
@@ -40,21 +40,21 @@ export const PanelTabWithDefaultActive: Story = {
   args: {
     variant: 'panel',
     tabs: [
-      { id: 'one', label: 'One' },
-      { id: 'two', label: 'Two' },
-      { id: 'three', label: 'Three' },
+      { label: 'One' },
+      { label: 'Two' },
+      { label: 'Three' },
     ],
-    defaultActiveTabId: 'three',
+    defaultActiveTabLabel: 'Three',
   },
 }
 
 export const PanelTabDisabled: Story = {
   args: {
     variant: 'panel',
     tabs: [
-      { id: 'one', label: 'One' },
-      { id: 'two', label: 'Two', isDisabled: true },
-      { id: 'three', label: 'Three' },
+      { label: 'One' },
+      { label: 'Two', isDisabled: true },
+      { label: 'Three' },
     ],
   },
 }
@@ -63,9 +63,9 @@ export const PanelTabWitIcons: Story = {
   args: {
     variant: 'panel',
     tabs: [
-      { id: 'one', label: 'Label' },
-      { id: 'two', label: 'Label' },
-      { id: 'three', label: 'Label', leftIcon: <SettingsIcon /> },
+      { label: 'Label' },
+      { label: 'Label' },
+      { label: 'Label', leftIcon: <SettingsIcon /> },
     ],
   },
 }