w-design-system 0.0.34 → 0.0.36

package/src/components/Sidebar/stories.tsx

@@ -7,8 +7,65 @@ import { dashboardSVG } from '../../assets/icon'
 const meta: Meta<typeof Sidebar> = {
   title: 'Components/Sidebar',
   tags: ['autodocs'],
-
   component: Sidebar,
+  argTypes: {
+    layout: {
+      control: 'object',
+      description: 'Array of sidebar layout',
+    },
+    currentItemId: {
+      control: 'text',
+      description: 'Current item id',
+    },
+    currentGroupId: {
+      control: 'text',
+      description: 'Current group id',
+    },
+    setLink: {
+      action: 'setLink',
+      description: 'Function to set link',
+    },
+    items: {
+      control: 'object',
+      description: 'Items data',
+    },
+    groups: {
+      control: 'object',
+      description: 'Groups data',
+    },
+    logoUrl: {
+      control: 'text',
+      description: 'Logo url',
+    },
+  },
+  args: {
+    layout: [
+      {
+        type: 'item',
+        id: 'DASHBOARD',
+      },
+      { type: 'group', id: 'group1' },
+    ],
+    currentItemId: 'DASHBOARD',
+    currentGroupId: 'DASHBOARD',
+    items: {
+      DASHBOARD: {
+        menuTitle: 'Dashboard',
+        icon: dashboardSVG,
+        link: '/dashboard',
+        disabled: true,
+      },
+    },
+    groups: {
+      group1: {
+        name: 'Group 1',
+        icon: dashboardSVG,
+        itemIds: ['DASHBOARD'],
+      },
+    },
+    logoUrl: '',
+    baseColor: '',
+  },
 } satisfies Meta<typeof Sidebar>
 
 export default meta
@@ -16,36 +73,37 @@ export default meta
 type Story = StoryObj<typeof Sidebar>
 
 export const Playground: Story = {
-  render: () => {
+  render: args => {
     return (
-        <Sidebar
-          layout={[
-            {
-              type: 'item',
-              id: 'DASHBOARD',
-            },
-            { type: 'group', id: 'group1' },
-          ]}
-          items={{
-            DASHBOARD: {
-              menuTitle: 'Dashboard',
-              icon: dashboardSVG,
-              link: '/dashboard',
-              disabled: false,
-            },
-          }}
-          currentItemId={''}
-          currentGroupId={''}
-          setLink={action('setLink')}
-          groups={{
-            group1: {
-              name: 'Group 1',
-              icon: dashboardSVG,
-              itemIds: ['DASHBOARD'],
-            },
-          }}
-          logoUrl={''}
-        />
+      <Sidebar
+        {...args}
+        layout={[
+          {
+            type: 'item',
+            id: 'DASHBOARD',
+          },
+          { type: 'group', id: 'group1' },
+        ]}
+        items={{
+          DASHBOARD: {
+            menuTitle: 'Dashboard',
+            icon: dashboardSVG,
+            link: '/dashboard',
+            disabled: false,
+          },
+        }}
+        currentItemId={''}
+        currentGroupId={''}
+        setLink={action('setLink')}
+        groups={{
+          group1: {
+            name: 'Group 1',
+            icon: dashboardSVG,
+            itemIds: ['DASHBOARD'],
+          },
+        }}
+        logoUrl={''}
+      />
     )
   },
 }

package/src/components/Sidebar/styles.ts

@@ -3,6 +3,7 @@ import { theme } from '../Themes'
 
 interface SidebarContainerProps {
   sidebarOpen: boolean
+  baseColor?: string
 }
 
 export const SidebarContainer = styled.div<SidebarContainerProps>`
@@ -12,13 +13,12 @@ export const SidebarContainer = styled.div<SidebarContainerProps>`
   position: relative;
   box-sizing: border-box;
   color: white;
-  background: ${theme.colors.cyan50};
   height: 100vh;
   height: 100dvh;
   padding: 16px 16px 0 16px;
   width: min-content;
   border-radius: ${({ sidebarOpen }) => sidebarOpen && '0 60px 0px 0;'};
-
+  background: ${({ baseColor }) => baseColor || theme.colors.cyan50};
   /* Mantenha o estilo do container ao passar o mouse */
   &:hover {
     &::-webkit-scrollbar {