@licklist/design 0.78.18 → 0.78.20

package/src/v2/navigation/Navigation/Navigation.scss

@@ -0,0 +1,15 @@
+.navigation {
+    width: 100%;
+    height: 100%;
+    padding: 0 8px;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 4px;
+    background: var(--fills-background-primary, #FFFFFF);
+
+    &--collapsed {
+        width: 60px; // Collapsed width for icon-only mode
+    }
+}

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

@@ -0,0 +1,137 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+import { Navigation } from './Navigation'
+
+export default {
+    title: 'v2/Navigation/Navigation',
+    component: Navigation,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        isCollapsed: {
+            control: 'boolean',
+            description: 'Toggle between expanded (with labels) and collapsed (icons only) navigation',
+        },
+        activeItem: {
+            control: 'select',
+            options: ['home', 'companies', 'venues', 'promoters', 'admin', 'users', 'customers', 'reports', 'analytics', 'payments', 'settings'],
+            description: 'Which navigation item is currently active',
+        },
+    },
+} as Meta
+
+type Story = StoryObj<typeof Navigation>
+
+// Default expanded navigation
+export const Expanded: Story = {
+    args: {
+        isCollapsed: false,
+        activeItem: 'home',
+    },
+    render: (args) => (
+        <div style={{ width: '250px', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB' }}>
+            <Navigation {...args} />
+        </div>
+    ),
+}
+
+// Collapsed navigation (icons only)
+export const Collapsed: Story = {
+    args: {
+        isCollapsed: true,
+        activeItem: 'home',
+    },
+    render: (args) => (
+        <div style={{ width: '76px', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB' }}>
+            <Navigation {...args} />
+        </div>
+    ),
+}
+
+// Interactive with toggle
+export const Interactive: Story = {
+    render: function () {
+        const [isCollapsed, setIsCollapsed] = useState(false);
+        const [activeItem, setActiveItem] = useState('home');
+
+        return (
+            <div style={{ display: 'flex', height: '100vh' }}>
+                <div style={{ width: isCollapsed ? '76px' : '250px', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB', transition: 'width 0.3s ease' }}>
+                    <div style={{ padding: '16px', borderBottom: '1px solid #E5E7EB' }}>
+                        <button
+                            onClick={() => setIsCollapsed(!isCollapsed)}
+                            style={{
+                                padding: '8px 12px',
+                                background: '#14215A',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '6px',
+                                cursor: 'pointer',
+                                fontSize: '13px',
+                                fontWeight: '500',
+                            }}
+                        >
+                            {isCollapsed ? '→' : '←'}
+                        </button>
+                    </div>
+                    <Navigation
+                        isCollapsed={isCollapsed}
+                        activeItem={activeItem}
+                        onItemClick={setActiveItem}
+                    />
+                </div>
+                <div style={{ flex: 1, padding: '24px', background: '#F9FAFB' }}>
+                    <h1 style={{ fontSize: '24px', fontWeight: '600', color: '#111827', marginBottom: '8px' }}>
+                        Active Page: {activeItem.charAt(0).toUpperCase() + activeItem.slice(1)}
+                    </h1>
+                    <p style={{ color: '#6B7280' }}>Click a navigation item to change the active page</p>
+                </div>
+            </div>
+        );
+    },
+}
+
+// Different active states
+export const ActiveOnCompanies: Story = {
+    args: {
+        isCollapsed: false,
+        activeItem: 'companies',
+    },
+    render: (args) => (
+        <div style={{ width: '250px', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB' }}>
+            <Navigation {...args} />
+        </div>
+    ),
+}
+
+export const ActiveOnSettings: Story = {
+    args: {
+        isCollapsed: false,
+        activeItem: 'settings',
+    },
+    render: (args) => (
+        <div style={{ width: '250px', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)', borderRight: '1px solid #E5E7EB' }}>
+            <Navigation {...args} />
+        </div>
+    ),
+}
+
+// Mobile viewport
+export const Mobile: Story = {
+    args: {
+        isCollapsed: false,
+        activeItem: 'home',
+    },
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile1',
+        },
+    },
+    render: (args) => (
+        <div style={{ width: '100%', height: '100vh', background: 'var(--fills-background-primary, #FFFFFF)' }}>
+            <Navigation {...args} />
+        </div>
+    ),
+}
+

package/src/v2/navigation/Navigation/Navigation.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import { NavigationItem } from '../NavigationItem'
+import { NavigationSection } from '../NavigationSection'
+import {
+    DashboardIcon,
+    CompanyIcon,
+    VenueIcon,
+    MarketingIcon,
+    AdminIcon,
+    ProfileIcon,
+    CustomersIcon,
+    ReportsIcon,
+    AnalyticsIcon,
+    PaymentsIcon,
+    SettingsIcon,
+} from '../icons'
+import './Navigation.scss'
+
+export interface NavigationProps {
+    isCollapsed?: boolean
+    activeItem?: string
+    onItemClick?: (item: string) => void
+}
+
+export const Navigation: React.FC<NavigationProps> = ({
+    isCollapsed = false,
+    activeItem = 'home',
+    onItemClick,
+}) => {
+    const handleClick = (item: string) => {
+        if (onItemClick) {
+            onItemClick(item)
+        }
+    }
+
+    return (
+        <nav className={`navigation ${isCollapsed ? 'navigation--collapsed' : ''}`}>
+            <NavigationSection title="Admin" isCollapsed={isCollapsed} />
+            <NavigationItem
+                icon={<DashboardIcon />}
+                label="Home"
+                isActive={activeItem === 'home'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('home')}
+            />
+
+            <NavigationSection title="Providers" isCollapsed={isCollapsed} />
+            <NavigationItem
+                icon={<CompanyIcon />}
+                label="Companies"
+                isActive={activeItem === 'companies'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('companies')}
+            />
+            <NavigationItem
+                icon={<VenueIcon />}
+                label="Venues"
+                isActive={activeItem === 'venues'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('venues')}
+            />
+            <NavigationItem
+                icon={<MarketingIcon />}
+                label="Promoters"
+                isActive={activeItem === 'promoters'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('promoters')}
+            />
+
+            <NavigationSection title="Users" isCollapsed={isCollapsed} />
+            <NavigationItem
+                icon={<AdminIcon />}
+                label="Booked it Admin"
+                isActive={activeItem === 'admin'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('admin')}
+            />
+            <NavigationItem
+                icon={<ProfileIcon />}
+                label="Users"
+                isActive={activeItem === 'users'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('users')}
+            />
+            <NavigationItem
+                icon={<CustomersIcon />}
+                label="Customers"
+                isActive={activeItem === 'customers'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('customers')}
+            />
+
+            <NavigationSection title="Reporting" isCollapsed={isCollapsed} />
+            <NavigationItem
+                icon={<ReportsIcon />}
+                label="Reports"
+                isActive={activeItem === 'reports'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('reports')}
+            />
+            <NavigationItem
+                icon={<AnalyticsIcon />}
+                label="Analytics"
+                isActive={activeItem === 'analytics'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('analytics')}
+            />
+            <NavigationItem
+                icon={<PaymentsIcon />}
+                label="Payments"
+                isActive={activeItem === 'payments'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('payments')}
+            />
+
+            <NavigationSection title="More" isCollapsed={isCollapsed} />
+            <NavigationItem
+                icon={<SettingsIcon />}
+                label="Settings"
+                isActive={activeItem === 'settings'}
+                isCollapsed={isCollapsed}
+                onClick={() => handleClick('settings')}
+            />
+        </nav>
+    )
+}
+

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

@@ -0,0 +1,3 @@
+export { Navigation } from './Navigation'
+export type { NavigationProps } from './Navigation'
+

package/src/v2/navigation/NavigationItem/NavigationItem.scss

@@ -0,0 +1,61 @@
+.navigation-item {
+    width: 100%;
+    flex: 1 1 0;
+    padding: 8px;
+    border-radius: 8px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    text-decoration: none;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.04);
+    }
+
+    &--active {
+        background-color: var(--fills-main-fill-secondary, rgba(20, 33, 90, 0.08));
+
+        .navigation-item__label {
+            font-weight: 600;
+        }
+    }
+
+    &--collapsed {
+        justify-content: center;
+        gap: 0;
+    }
+
+    &__icon {
+        width: 24px;
+        height: 24px;
+        position: relative;
+        overflow: hidden;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        svg,
+        img {
+            width: 18px;
+            height: 18px;
+            color: var(--fills-main-fill-primary, #14215A);
+        }
+    }
+
+    &__label {
+        color: var(--labels-main-label-primary, #121E52);
+        font-size: 13px;
+        font-family: Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-weight: 500;
+        line-height: 16px;
+        word-wrap: break-word;
+        white-space: nowrap;
+    }
+}

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

@@ -0,0 +1,110 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { NavigationItem } from './NavigationItem'
+import { DashboardIcon, CompanyIcon, SettingsIcon } from '../icons'
+
+export default {
+    title: 'v2/Navigation/NavigationItem',
+    component: NavigationItem,
+    argTypes: {
+        isActive: {
+            control: 'boolean',
+            description: 'Whether this navigation item is currently active/selected',
+        },
+        isCollapsed: {
+            control: 'boolean',
+            description: 'Whether to show only the icon (collapsed) or icon + label (expanded)',
+        },
+        label: {
+            control: 'text',
+            description: 'The text label for the navigation item',
+        },
+    },
+} as Meta
+
+type Story = StoryObj<typeof NavigationItem>
+
+// Default expanded state
+export const Default: Story = {
+    args: {
+        icon: <DashboardIcon />,
+        label: 'Home',
+        isActive: false,
+        isCollapsed: false,
+    },
+}
+
+// Active/selected state
+export const Active: Story = {
+    args: {
+        icon: <DashboardIcon />,
+        label: 'Home',
+        isActive: true,
+        isCollapsed: false,
+    },
+}
+
+// Collapsed state (icon only)
+export const Collapsed: Story = {
+    args: {
+        icon: <DashboardIcon />,
+        label: 'Home',
+        isActive: false,
+        isCollapsed: true,
+    },
+}
+
+// Collapsed and active
+export const CollapsedActive: Story = {
+    args: {
+        icon: <DashboardIcon />,
+        label: 'Home',
+        isActive: true,
+        isCollapsed: true,
+    },
+}
+
+// With click handler
+export const WithClickHandler: Story = {
+    args: {
+        icon: <DashboardIcon />,
+        label: 'Home',
+        isActive: false,
+        isCollapsed: false,
+        onClick: () => alert('Home clicked!'),
+    },
+}
+
+// As link (with href)
+export const AsLink: Story = {
+    args: {
+        icon: <DashboardIcon />,
+        label: 'Home',
+        isActive: false,
+        isCollapsed: false,
+        href: '/dashboard',
+    },
+}
+
+// Multiple items preview
+export const MultipleItems: Story = {
+    render: () => (
+        <div style={{ width: '250px', display: 'flex', flexDirection: 'column', gap: '4px', padding: '8px' }}>
+            <NavigationItem icon={<DashboardIcon />} label="Home" isActive={true} />
+            <NavigationItem icon={<CompanyIcon />} label="Companies" isActive={false} />
+            <NavigationItem icon={<SettingsIcon />} label="Settings" isActive={false} />
+        </div>
+    ),
+}
+
+// Collapsed navigation bar
+export const CollapsedNavigation: Story = {
+    render: () => (
+        <div style={{ width: '76px', display: 'flex', flexDirection: 'column', gap: '4px', padding: '8px' }}>
+            <NavigationItem icon={<DashboardIcon />} label="Home" isActive={true} isCollapsed={true} />
+            <NavigationItem icon={<CompanyIcon />} label="Companies" isActive={false} isCollapsed={true} />
+            <NavigationItem icon={<SettingsIcon />} label="Settings" isActive={false} isCollapsed={true} />
+        </div>
+    ),
+}
+

package/src/v2/navigation/NavigationItem/NavigationItem.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import './NavigationItem.scss'
+
+export interface NavigationItemProps {
+    icon: React.ReactNode
+    label: string
+    isActive?: boolean
+    isCollapsed?: boolean
+    onClick?: () => void
+    href?: string
+}
+
+export const NavigationItem: React.FC<NavigationItemProps> = ({
+    icon,
+    label,
+    isActive = false,
+    isCollapsed = false,
+    onClick,
+    href,
+}) => {
+    const Component = href ? 'a' : 'button'
+    const className = `navigation-item ${isActive ? 'navigation-item--active' : ''} ${isCollapsed ? 'navigation-item--collapsed' : ''
+        }`
+
+    return (
+        <Component
+            className={className}
+            onClick={onClick}
+            href={href}
+            aria-label={label}
+            aria-current={isActive ? 'page' : undefined}
+        >
+            <div className="navigation-item__icon">{icon}</div>
+            {!isCollapsed && <span className="navigation-item__label">{label}</span>}
+        </Component>
+    )
+}
+

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

@@ -0,0 +1,3 @@
+export { NavigationItem } from './NavigationItem'
+export type { NavigationItemProps } from './NavigationItem'
+

package/src/v2/navigation/NavigationSection/NavigationSection.scss

@@ -0,0 +1,20 @@
+.navigation-section {
+    align-self: stretch;
+    padding: 8px 8px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 8px;
+
+    &__title {
+        color: var(--labels-main-label-secondary, #626A90);
+        font-size: 13px;
+        font-family: Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-weight: 500;
+        line-height: 16px;
+        word-wrap: break-word;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+}

package/src/v2/navigation/NavigationSection/NavigationSection.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import './NavigationSection.scss'
+
+export interface NavigationSectionProps {
+    title: string
+    isCollapsed?: boolean
+}
+
+export const NavigationSection: React.FC<NavigationSectionProps> = ({
+    title,
+    isCollapsed = false,
+}) => {
+    return (
+        <div className={`navigation-section ${isCollapsed ? 'navigation-section--collapsed' : ''}`}>
+            <div className="navigation-section__title">{title}</div>
+        </div>
+    )
+}
+

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

@@ -0,0 +1,3 @@
+export { NavigationSection } from './NavigationSection'
+export type { NavigationSectionProps } from './NavigationSection'
+

package/src/v2/navigation/SideBarToggleLarge/SideBarToggleLarge.scss

@@ -0,0 +1,64 @@
+@import '../../../styles/overrides/functions';
+
+.sidebar-toggle-large {
+    background: var(--surfaces-main-background-primary, #ffffff);
+    border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    box-sizing: border-box;
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 10px 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    &:hover {
+        background: var(--surfaces-main-background-tertiary, #E8E9EF);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--fills-main-fill-primary, #14215A);
+        outline-offset: 2px;
+    }
+
+    &--hover {
+        background: var(--surfaces-main-background-tertiary, #E8E9EF);
+    }
+
+    &--pressed {
+        background: var(--surfaces-main-background-quaternary, #D1D3D8);
+        transform: translateY(1px);
+        border-color: var(--borders-main-border-secondary, #D1D3D8);
+    }
+
+    &__icon {
+        display: grid;
+        grid-template-columns: max-content;
+        grid-template-rows: max-content;
+        justify-items: start;
+        line-height: 0;
+        flex-shrink: 0;
+        width: 24px;
+        height: 20px;
+
+        &-inner {
+            grid-column: 1;
+            grid-row: 1;
+            height: 20px;
+            margin-left: 0;
+            margin-top: 0;
+            width: 24px;
+
+            .sidebar-toggle-large__icon-img {
+                width: 100%;
+                height: 100%;
+                display: block;
+                max-width: none;
+            }
+        }
+    }
+}