@licklist/design 0.78.18 → 0.78.20

package/src/v2/navigation/SideBarToggleLarge/SideBarToggleLarge.stories.tsx

@@ -0,0 +1,183 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { SideBarToggleLarge } from './SideBarToggleLarge'
+
+export default {
+    title: 'v2/Navigation/Side Bar Toggle Large',
+    component: SideBarToggleLarge,
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'hover', 'pressed'],
+            description: 'Visual state of the toggle',
+        },
+        onClick: { action: 'clicked' },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+} as Meta
+
+type Story = StoryObj<typeof SideBarToggleLarge>
+
+export const Default: Story = {
+    args: {
+        variant: 'default',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '48px', height: '40px', border: '1px solid #E8E9EF', borderRadius: '6px' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Hover: Story = {
+    args: {
+        variant: 'hover',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '48px', height: '40px', border: '1px solid #E8E9EF', borderRadius: '6px' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Pressed: Story = {
+    args: {
+        variant: 'pressed',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '48px', height: '40px', border: '1px solid #E8E9EF', borderRadius: '6px' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Interactive: Story = {
+    render: function (args) {
+        const [variant, setVariant] = React.useState<'default' | 'hover' | 'pressed'>('default');
+
+        return (
+            <div style={{ width: '48px', height: '40px', border: '1px solid #E8E9EF', borderRadius: '6px' }}>
+                <SideBarToggleLarge
+                    {...args}
+                    variant={variant}
+                    onClick={() => {
+                        setVariant(variant === 'pressed' ? 'default' : 'pressed');
+                        setTimeout(() => setVariant('default'), 150);
+                    }}
+                />
+                <div style={{ position: 'absolute', top: '50px', left: '0', display: 'flex', gap: '8px', flexDirection: 'column' }}>
+                    <button
+                        onClick={() => setVariant('default')}
+                        style={{
+                            padding: '4px 8px',
+                            backgroundColor: variant === 'default' ? '#14215A' : '#E8E9EF',
+                            color: variant === 'default' ? 'white' : '#121E52',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            fontSize: '12px'
+                        }}
+                    >
+                        Default
+                    </button>
+                    <button
+                        onClick={() => setVariant('hover')}
+                        style={{
+                            padding: '4px 8px',
+                            backgroundColor: variant === 'hover' ? '#14215A' : '#E8E9EF',
+                            color: variant === 'hover' ? 'white' : '#121E52',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            fontSize: '12px'
+                        }}
+                    >
+                        Hover
+                    </button>
+                    <button
+                        onClick={() => setVariant('pressed')}
+                        style={{
+                            padding: '4px 8px',
+                            backgroundColor: variant === 'pressed' ? '#14215A' : '#E8E9EF',
+                            color: variant === 'pressed' ? 'white' : '#121E52',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            fontSize: '12px'
+                        }}
+                    >
+                        Pressed
+                    </button>
+                </div>
+            </div>
+        );
+    },
+    args: {},
+}
+
+export const MultipleStates: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+            <div style={{ textAlign: 'center' }}>
+                <div style={{ width: '48px', height: '40px', border: '1px solid #E8E9EF', borderRadius: '6px', marginBottom: '8px' }}>
+                    <SideBarToggleLarge variant="default" />
+                </div>
+                <span style={{ fontSize: '12px', color: '#626A90' }}>Default</span>
+            </div>
+            <div style={{ textAlign: 'center' }}>
+                <div style={{ width: '48px', height: '40px', border: '1px solid #E8E9EF', borderRadius: '6px', marginBottom: '8px' }}>
+                    <SideBarToggleLarge variant="hover" />
+                </div>
+                <span style={{ fontSize: '12px', color: '#626A90' }}>Hover</span>
+            </div>
+            <div style={{ textAlign: 'center' }}>
+                <div style={{ width: '48px', height: '40px', border: '1px solid #E8E9EF', borderRadius: '6px', marginBottom: '8px' }}>
+                    <SideBarToggleLarge variant="pressed" />
+                </div>
+                <span style={{ fontSize: '12px', color: '#626A90' }}>Pressed</span>
+            </div>
+        </div>
+    ),
+}
+
+export const InContext: Story = {
+    render: () => (
+        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            padding: '8px',
+            backgroundColor: '#F8F8FA',
+            borderBottom: '1px solid #E8E9EF',
+            width: '100%'
+        }}>
+            <SideBarToggleLarge onClick={() => alert('Sidebar toggled!')} />
+            <div style={{
+                height: '32px',
+                width: '124px',
+                backgroundColor: '#ffffff',
+                border: '1px solid #E8E9EF',
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '14px',
+                color: '#121E52'
+            }}>
+                Logo Area
+            </div>
+        </div>
+    ),
+}

package/src/v2/navigation/SideBarToggleLarge/SideBarToggleLarge.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import './SideBarToggleLarge.scss'
+import sidebarIcon from './assets/sidebar-icon.svg'
+
+export interface SideBarToggleLargeProps {
+    variant?: 'default' | 'hover' | 'pressed'
+    onClick?: () => void
+    className?: string
+}
+
+export const SideBarToggleLarge: React.FC<SideBarToggleLargeProps> = ({
+    variant = 'default',
+    onClick,
+    className,
+}) => {
+    return (
+        <div
+            className={`sidebar-toggle-large sidebar-toggle-large--${variant} ${className || ''}`}
+            onClick={onClick}
+            data-name="Side Bar"
+            data-node-id="796:2923"
+        >
+            <div className="sidebar-toggle-large__icon" data-name="Icon" data-node-id="I796:2923;796:2870">
+                <div className="sidebar-toggle-large__icon-inner" data-node-id="I796:2923;796:2871">
+                    <img alt="Sidebar toggle" className="sidebar-toggle-large__icon-img" src={sidebarIcon} />
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/v2/navigation/SideBarToggleLarge/assets/sidebar-icon.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="2" rx="1" fill="var(--fills-main-fill-primary, #14215A)" />
+<rect x="3" y="9" width="18" height="2" rx="1" fill="var(--fills-main-fill-primary, #14215A)" />
+<rect x="3" y="15" width="18" height="2" rx="1" fill="var(--fills-main-fill-primary, #14215A)" />
+</svg>

package/src/v2/navigation/SideBarToggleLarge/index.ts

@@ -0,0 +1,2 @@
+export { SideBarToggleLarge } from './SideBarToggleLarge'
+export type { SideBarToggleLargeProps } from './SideBarToggleLarge'

package/src/v2/navigation/SidebarUserElement/SidebarUserElement.scss

@@ -0,0 +1,148 @@
+@import '../../../styles/overrides/functions';
+
+.sidebar-user-element {
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  border-radius: 8px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  display: inline-flex;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &--default {
+    background: transparent;
+  }
+
+  &--hover {
+    background: var(--surfaces-main-background-secondary-hover, #E8E9EF);
+  }
+
+  &--dropdown {
+    background: var(--surfaces-main-background-primary, white);
+    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.20);
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__user-info {
+    width: 236px;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    display: flex;
+  }
+
+  &__avatar {
+    width: 40px;
+    height: 40px;
+    position: relative;
+
+    &-circle {
+      width: 40px;
+      height: 40px;
+      left: 0px;
+      top: 0px;
+      position: absolute;
+      background: var(--surfaces-main-background-primary, white);
+      border-radius: 9999px;
+      border: 1px var(--borders-main-border-primary, #E8E9EF) solid;
+    }
+  }
+
+  &__user-details {
+    width: 184.50px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    display: inline-flex;
+  }
+
+  &__user-name {
+    align-self: stretch;
+    color: var(--labels-main-label-primary, #121E52);
+    font-size: 15px;
+    font-family: 'Geist', sans-serif;
+    font-weight: 600;
+    line-height: 18px;
+    word-wrap: break-word;
+  }
+
+  &__user-email {
+    align-self: stretch;
+    color: var(--labels-main-label-secondary, #626A90);
+    font-size: 10px;
+    font-family: 'Inter', sans-serif;
+    font-weight: 500;
+    word-wrap: break-word;
+  }
+
+  &__dropdown {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 8px;
+    display: inline-flex;
+  }
+
+  &__dropdown-items {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 4px;
+    display: flex;
+  }
+
+  &__dropdown-item {
+    width: 236px;
+    justify-content: flex-start;
+    align-items: flex-start;
+    display: inline-flex;
+  }
+
+  &__dropdown-link {
+    flex: 1 1 0;
+    padding: 8px;
+    border-radius: 8px;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    display: flex;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: var(--surfaces-main-background-tertiary, #F8F8FA);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--fills-main-fill-primary, #14215A);
+      outline-offset: 2px;
+    }
+  }
+
+  &__dropdown-icon {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    overflow: hidden;
+    border-radius: 6px;
+  }
+
+  &__icon-img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    max-width: none;
+  }
+
+  &__dropdown-text {
+    color: var(--labels-main-label-primary, #121E52);
+    font-size: 13px;
+    font-family: 'Geist', sans-serif;
+    font-weight: 500;
+    line-height: 16px;
+    word-wrap: break-word;
+  }
+}