@licklist/design 0.78.18 → 0.78.20

package/src/v2/navigation/FigmasTopHat/FigmasTopHat.scss

@@ -0,0 +1,291 @@
+@import '../../../styles/overrides/functions';
+
+.figmas-tophat {
+    background: var(--surfaces-main-background-secondary, #F8F8FA);
+    border-bottom: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    &--desktop {
+        padding: 4px;
+        width: 1369px;
+    }
+
+    &--mobile {
+        padding: 4px 4px 4px 16px;
+        width: 370px;
+    }
+
+    &__left-elements {
+        display: flex;
+        flex: 1 0 0;
+        gap: 8px;
+        align-items: center;
+        min-height: 0;
+        min-width: 0;
+    }
+
+    &__sidebar-toggle {
+        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;
+
+        &:hover {
+            background: var(--surfaces-main-background-tertiary, #E8E9EF);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--fills-main-fill-primary, #14215A);
+            outline-offset: 2px;
+        }
+    }
+
+    &__sidebar-icon {
+        display: grid;
+        grid-template-columns: max-content;
+        grid-template-rows: max-content;
+        justify-items: start;
+        line-height: 0;
+        width: 24px;
+        height: 20px;
+
+        svg {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+    }
+
+    &__logo-container {
+        flex-shrink: 0;
+    }
+
+    &__logo {
+        height: 32px;
+        overflow: hidden;
+        width: 124px;
+        position: relative;
+
+        &-shape1 {
+            position: absolute;
+            top: 0.05%;
+            right: 74.87%;
+            bottom: 0.16%;
+            left: 0.01%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .figmas-tophat__logo-img {
+                width: 17.523px;
+                height: 17.523px;
+                transform: rotate(314.61deg) skewX(359.221deg);
+                flex: none;
+            }
+        }
+
+        &-shape2 {
+            position: absolute;
+            top: 25.44%;
+            right: 4.15%;
+            bottom: 25.3%;
+            left: 27.75%;
+
+            .figmas-tophat__logo-img {
+                width: 100%;
+                height: 100%;
+                display: block;
+                max-width: none;
+            }
+        }
+    }
+
+    &__mobile-logo-container {
+        flex-shrink: 0;
+    }
+
+    &__mobile-logo {
+        height: 29px;
+        overflow: hidden;
+        width: 112px;
+        position: relative;
+
+        &-shape1 {
+            position: absolute;
+            top: 0.05%;
+            right: 74.87%;
+            bottom: 0.16%;
+            left: 0.01%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            svg {
+                width: 17.523px;
+                height: 17.523px;
+                transform: rotate(314.61deg) skewX(359.221deg);
+                flex: none;
+            }
+        }
+
+        &-shape2 {
+            position: absolute;
+            top: 25.44%;
+            right: 4.15%;
+            bottom: 25.3%;
+            left: 27.75%;
+
+            svg {
+                width: 100%;
+                height: 100%;
+                display: block;
+            }
+        }
+    }
+
+    &__user-controls {
+        box-sizing: border-box;
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        justify-content: flex-end;
+        padding-left: 0;
+        padding-right: 0;
+        flex-shrink: 0;
+    }
+
+    &__control {
+        background: var(--surfaces-main-background-primary, #ffffff);
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        position: relative;
+
+        &:hover {
+            background: var(--surfaces-main-background-tertiary, #E8E9EF);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--fills-main-fill-primary, #14215A);
+            outline-offset: 2px;
+        }
+
+        &--disc {
+            flex-direction: column;
+            padding: 4px;
+            min-width: 40px;
+        }
+
+        &--inbox,
+        &--bell {
+            min-width: 40px;
+            padding: 2px 4px 2px 2px;
+        }
+
+        &--user {
+            flex-direction: column;
+            padding: 4px;
+            min-width: 40px;
+        }
+    }
+
+    &__control-icon {
+        overflow: hidden;
+        flex-shrink: 0;
+        width: 32px;
+        height: 32px;
+        position: relative;
+
+        &-inner {
+            position: absolute;
+            inset: 15.625%;
+            width: 22px;
+            height: 22px;
+
+            .figmas-tophat__control-icon-img {
+                width: 100%;
+                height: 100%;
+                display: block;
+                max-width: none;
+            }
+        }
+    }
+
+    // Special positioning for disc control icon
+    &__control--disc &__control-icon-inner {
+        left: 5px;
+        top: 5px;
+        width: 22px;
+        height: 22px;
+    }
+
+    // Special positioning for inbox control icon
+    &__control--inbox &__control-icon-inner {
+        inset: 21.88% 18.75%;
+    }
+
+    // Special positioning for bell control icon
+    &__control--bell &__control-icon-inner {
+        inset: 18.75% 23.44% 14.06% 23.44%;
+    }
+
+    &__user-initials {
+        position: absolute;
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-weight: 800;
+        font-size: 8px;
+        line-height: 13px;
+        color: var(--labels-main-label-secondary, #626A90);
+        text-align: center;
+        top: 14px;
+        left: 20px;
+        transform: translateX(-50%);
+        width: 18px;
+        height: 12px;
+        margin: 0;
+        white-space: pre-wrap;
+    }
+
+    &__notification-badge {
+        border: 1px solid var(--borders-main-border-colour-overlay, rgba(18, 30, 82, 0.1));
+        box-sizing: border-box;
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        justify-content: center;
+        padding: 4px 8px;
+        border-radius: 24px;
+        flex-shrink: 0;
+
+        span {
+            font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+            font-weight: 600;
+            font-size: 10px;
+            line-height: 13px;
+            color: var(--labels-main-label-primary, #121E52);
+        }
+
+        &--teal {
+            background: var(--surfaces-colour-teal, #e9faf7);
+        }
+
+        &--orange {
+            background: var(--surfaces-colour-orange, #fff2e8);
+        }
+    }
+}

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

@@ -0,0 +1,201 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { FigmasTopHat } from './FigmasTopHat'
+
+export default {
+    title: 'v2/Navigation/Figma Top Hat',
+    component: FigmasTopHat,
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['desktop', 'mobile'],
+            description: 'Desktop or mobile variant',
+        },
+        inboxCount: {
+            control: 'number',
+            description: 'Number of inbox notifications',
+        },
+        bellCount: {
+            control: 'number',
+            description: 'Number of bell notifications',
+        },
+        userInitials: {
+            control: 'text',
+            description: 'User initials to display',
+        },
+        onSidebarToggle: { action: 'sidebar toggle clicked' },
+        onUserClick: { action: 'user clicked' },
+        onInboxClick: { action: 'inbox clicked' },
+        onBellClick: { action: 'bell clicked' },
+        onDiscClick: { action: 'disc clicked' },
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as Meta
+
+type Story = StoryObj<typeof FigmasTopHat>
+
+export const Desktop: Story = {
+    args: {
+        variant: 'desktop',
+        inboxCount: 3,
+        bellCount: 12,
+        userInitials: 'WW',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '100%', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Mobile: Story = {
+    args: {
+        variant: 'mobile',
+        inboxCount: 3,
+        bellCount: 12,
+        userInitials: 'WW',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '370px', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const DesktopNoNotifications: Story = {
+    args: {
+        variant: 'desktop',
+        inboxCount: 0,
+        bellCount: 0,
+        userInitials: 'JD',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '100%', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const MobileNoNotifications: Story = {
+    args: {
+        variant: 'mobile',
+        inboxCount: 0,
+        bellCount: 0,
+        userInitials: 'JD',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '370px', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const DesktopHighNotifications: Story = {
+    args: {
+        variant: 'desktop',
+        inboxCount: 99,
+        bellCount: 5,
+        userInitials: 'AB',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '100%', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const MobileHighNotifications: Story = {
+    args: {
+        variant: 'mobile',
+        inboxCount: 99,
+        bellCount: 5,
+        userInitials: 'AB',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '370px', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Interactive: Story = {
+    render: function (args) {
+        const [variant, setVariant] = React.useState<'desktop' | 'mobile'>('desktop');
+        const [inboxCount, setInboxCount] = React.useState(3);
+        const [bellCount, setBellCount] = React.useState(12);
+
+        return (
+            <div style={{ width: variant === 'desktop' ? '100%' : '370px', height: '60px', borderBottom: '1px solid #E8E9EF' }}>
+                <FigmasTopHat
+                    {...args}
+                    variant={variant}
+                    inboxCount={inboxCount}
+                    bellCount={bellCount}
+                    onSidebarToggle={() => alert('Sidebar toggle clicked!')}
+                    onUserClick={() => alert('User clicked!')}
+                    onInboxClick={() => setInboxCount(0)}
+                    onBellClick={() => setBellCount(0)}
+                    onDiscClick={() => alert('Disc clicked!')}
+                />
+                <div style={{ position: 'absolute', top: '70px', left: '16px', display: 'flex', gap: '8px', flexDirection: 'column' }}>
+                    <button
+                        onClick={() => setVariant(variant === 'desktop' ? 'mobile' : 'desktop')}
+                        style={{
+                            padding: '8px 16px',
+                            backgroundColor: '#14215A',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer'
+                        }}
+                    >
+                        Toggle {variant === 'desktop' ? 'Mobile' : 'Desktop'}
+                    </button>
+                    <button
+                        onClick={() => setInboxCount(Math.floor(Math.random() * 20))}
+                        style={{
+                            padding: '8px 16px',
+                            backgroundColor: '#e9faf7',
+                            color: '#121E52',
+                            border: '1px solid #E8E9EF',
+                            borderRadius: '4px',
+                            cursor: 'pointer'
+                        }}
+                    >
+                        Random Inbox Count
+                    </button>
+                    <button
+                        onClick={() => setBellCount(Math.floor(Math.random() * 20))}
+                        style={{
+                            padding: '8px 16px',
+                            backgroundColor: '#fff2e8',
+                            color: '#121E52',
+                            border: '1px solid #E8E9EF',
+                            borderRadius: '4px',
+                            cursor: 'pointer'
+                        }}
+                    >
+                        Random Bell Count
+                    </button>
+                </div>
+            </div>
+        );
+    },
+    args: {
+        userInitials: 'WW',
+    },
+}

package/src/v2/navigation/FigmasTopHat/FigmasTopHat.tsx

@@ -0,0 +1,158 @@
+import React from 'react'
+import './FigmasTopHat.scss'
+import logoDesktop1 from './assets/logo-desktop-1.svg'
+import logoDesktop2 from './assets/logo-desktop-2.svg'
+import discIcon from './assets/disc-icon.svg'
+import inboxIcon from './assets/inbox-icon.svg'
+import bellIcon from './assets/bell-icon.svg'
+import userIcon from './assets/user-icon.svg'
+
+// Image assets loaded from local assets folder
+const SidebarToggleIcon = () => (
+    <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>
+)
+
+const MobileLogoShape1 = () => (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M9 1L11.5 5.5L16.5 6L13 9L14 14L9 11.5L4 14L5 9L1.5 6L6.5 5.5L9 1Z" fill="var(--fills-main-fill-primary, #14215A)" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="0.5" />
+    </svg>
+)
+
+const MobileLogoShape2 = () => (
+    <svg width="112" height="29" viewBox="0 0 112 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="0" y="0" width="112" height="29" rx="4" fill="var(--surfaces-main-background-primary, #ffffff)" stroke="var(--borders-main-border-primary, #E8E9EF)" strokeWidth="1" />
+        <text x="56" y="18" textAnchor="middle" fontFamily="Geist" fontSize="11" fontWeight="600" fill="var(--labels-main-label-primary, #121E52)">Booked it</text>
+    </svg>
+)
+
+export interface FigmasTopHatProps {
+    variant?: 'desktop' | 'mobile'
+    onSidebarToggle?: () => void
+    onUserClick?: () => void
+    onInboxClick?: () => void
+    onBellClick?: () => void
+    onDiscClick?: () => void
+    inboxCount?: number
+    bellCount?: number
+    userInitials?: string
+}
+
+export const FigmasTopHat: React.FC<FigmasTopHatProps> = ({
+    variant = 'desktop',
+    onSidebarToggle,
+    onUserClick,
+    onInboxClick,
+    onBellClick,
+    onDiscClick,
+    inboxCount = 3,
+    bellCount = 12,
+    userInitials = 'WW',
+}) => {
+    const sidebarToggleIcon = (
+        <div className="figmas-tophat__sidebar-icon">
+            <SidebarToggleIcon />
+        </div>
+    )
+
+    const logoIcon = (
+        <div className="figmas-tophat__logo">
+            <div className="figmas-tophat__logo-shape1">
+                <img alt="Logo shape 1" className="figmas-tophat__logo-img" src={logoDesktop1} />
+            </div>
+            <div className="figmas-tophat__logo-shape2">
+                <img alt="Logo shape 2" className="figmas-tophat__logo-img" src={logoDesktop2} />
+            </div>
+        </div>
+    )
+
+    const mobileLogoIcon = (
+        <div className="figmas-tophat__mobile-logo">
+            <div className="figmas-tophat__mobile-logo-shape1">
+                <MobileLogoShape1 />
+            </div>
+            <div className="figmas-tophat__mobile-logo-shape2">
+                <MobileLogoShape2 />
+            </div>
+        </div>
+    )
+
+    const userControls = (
+        <div className="figmas-tophat__user-controls">
+            {/* Disc Control */}
+            <div className="figmas-tophat__control figmas-tophat__control--disc" onClick={onDiscClick}>
+                <div className="figmas-tophat__control-icon">
+                    <div className="figmas-tophat__control-icon-inner">
+                        <img alt="Disc icon" className="figmas-tophat__control-icon-img" src={discIcon} />
+                    </div>
+                </div>
+                <p className="figmas-tophat__user-initials">{userInitials}</p>
+            </div>
+
+            {/* Inbox Control */}
+            <div className="figmas-tophat__control figmas-tophat__control--inbox" onClick={onInboxClick}>
+                <div className="figmas-tophat__control-icon">
+                    <div className="figmas-tophat__control-icon-inner">
+                        <img alt="Inbox icon" className="figmas-tophat__control-icon-img" src={inboxIcon} />
+                    </div>
+                </div>
+                {inboxCount > 0 && (
+                    <div className="figmas-tophat__notification-badge figmas-tophat__notification-badge--teal">
+                        <span>{inboxCount}</span>
+                    </div>
+                )}
+            </div>
+
+            {/* Bell Control */}
+            <div className="figmas-tophat__control figmas-tophat__control--bell" onClick={onBellClick}>
+                <div className="figmas-tophat__control-icon">
+                    <div className="figmas-tophat__control-icon-inner">
+                        <img alt="Bell icon" className="figmas-tophat__control-icon-img" src={bellIcon} />
+                    </div>
+                </div>
+                {bellCount > 0 && (
+                    <div className="figmas-tophat__notification-badge figmas-tophat__notification-badge--orange">
+                        <span>{bellCount}</span>
+                    </div>
+                )}
+            </div>
+
+            {/* User Control */}
+            <div className="figmas-tophat__control figmas-tophat__control--user" onClick={onUserClick}>
+                <div className="figmas-tophat__control-icon">
+                    <div className="figmas-tophat__control-icon-inner">
+                        <img alt="User icon" className="figmas-tophat__control-icon-img" src={userIcon} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+
+    if (variant === 'mobile') {
+        return (
+            <div className="figmas-tophat figmas-tophat--mobile">
+                <div className="figmas-tophat__mobile-logo-container">
+                    {mobileLogoIcon}
+                </div>
+                {userControls}
+            </div>
+        )
+    }
+
+    return (
+        <div className="figmas-tophat figmas-tophat--desktop">
+            <div className="figmas-tophat__left-elements">
+                <div className="figmas-tophat__sidebar-toggle" onClick={onSidebarToggle}>
+                    {sidebarToggleIcon}
+                </div>
+                <div className="figmas-tophat__logo-container">
+                    {logoIcon}
+                </div>
+            </div>
+            {userControls}
+        </div>
+    )
+}

package/src/v2/navigation/FigmasTopHat/assets/bell-icon.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 18C8 18.5523 8.44772 19 9 19H13C13.5523 19 14 18.5523 14 18M8 18V16M14 18V16M8 18C5.79086 18 4 16.2091 4 14V9C4 6.79086 5.79086 5 8 5H14C16.2091 5 18 6.79086 18 9V14C18 16.2091 16.2091 18 14 18" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/v2/navigation/FigmasTopHat/assets/disc-icon.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="11" r="10" fill="var(--fills-main-fill-primary, #14215A)" opacity="0.1" />
+<circle cx="11" cy="11" r="6" fill="var(--fills-main-fill-primary, #14215A)" />
+</svg>

package/src/v2/navigation/FigmasTopHat/assets/inbox-icon.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6L11 11L19 6M3 6V16C3 16.5523 3.44772 17 4 17H18C18.5523 17 19 16.5523 19 16V6M3 6H19" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/v2/navigation/FigmasTopHat/assets/logo-desktop-1.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 1L11.5 5.5L16.5 6L13 9L14 14L9 11.5L4 14L5 9L1.5 6L6.5 5.5L9 1Z" fill="var(--fills-main-fill-primary, #14215A)" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="0.5" />
+</svg>

package/src/v2/navigation/FigmasTopHat/assets/logo-desktop-2.svg

@@ -0,0 +1,4 @@
+<svg width="112" height="29" viewBox="0 0 112 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0" y="0" width="112" height="29" rx="4" fill="var(--surfaces-main-background-primary, #ffffff)" stroke="var(--borders-main-border-primary, #E8E9EF)" strokeWidth="1" />
+<text x="56" y="18" textAnchor="middle" fontFamily="Geist" fontSize="11" fontWeight="600" fill="var(--labels-main-label-primary, #121E52)">Booked it</text>
+</svg>

package/src/v2/navigation/FigmasTopHat/assets/user-icon.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="7" r="3" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="1.5"/>
+<path d="M5 18C5 14.134 8.13401 11 12 11C15.866 11 19 14.134 19 18" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="1.5" strokeLinecap="round"/>
+</svg>

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

@@ -0,0 +1,2 @@
+export { FigmasTopHat } from './FigmasTopHat'
+export type { FigmasTopHatProps } from './FigmasTopHat'