@licklist/design 0.78.5-dev.33 → 0.78.5-dev.34

package/src/v2/components/UserAvatar/UserAvatar.stories.tsx

@@ -0,0 +1,94 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { UserAvatar } from './UserAvatar'
+
+export default {
+    title: 'v2/Components/UserAvatar',
+    component: UserAvatar,
+    argTypes: {
+        initials: { control: 'text' },
+        avatarUrl: { control: 'text' },
+        size: { control: 'select', options: ['sm', 'md', 'lg'] },
+        isActive: { control: 'boolean' },
+        onClick: { action: 'clicked' },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+} as Meta<typeof UserAvatar>
+
+type Story = StoryObj<typeof UserAvatar>
+
+export const Default: Story = {
+    args: {
+        initials: 'GA',
+        size: 'md',
+        isActive: false,
+    },
+}
+
+export const Small: Story = {
+    args: {
+        initials: 'GA',
+        size: 'sm',
+        isActive: false,
+    },
+}
+
+export const Medium: Story = {
+    args: {
+        initials: 'GA',
+        size: 'md',
+        isActive: false,
+    },
+}
+
+export const Large: Story = {
+    args: {
+        initials: 'GA',
+        size: 'lg',
+        isActive: false,
+    },
+}
+
+export const Active: Story = {
+    args: {
+        initials: 'GA',
+        size: 'md',
+        isActive: true,
+    },
+}
+
+export const WithImage: Story = {
+    args: {
+        avatarUrl: 'https://i.pravatar.cc/150?img=68',
+        size: 'md',
+    },
+}
+
+export const AllSizes: Story = {
+    render: () => (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <UserAvatar initials="GA" size="sm" />
+            <UserAvatar initials="GA" size="md" />
+            <UserAvatar initials="GA" size="lg" />
+        </div>
+    ),
+}
+
+export const AllStates: Story = {
+    render: () => (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <UserAvatar initials="GA" size="md" isActive={false} />
+            <UserAvatar initials="GA" size="md" isActive={true} />
+            <UserAvatar avatarUrl="https://i.pravatar.cc/150?img=68" size="md" />
+        </div>
+    ),
+}
+
+export const Clickable: Story = {
+    args: {
+        initials: 'GA',
+        size: 'md',
+        onClick: () => alert('Avatar clicked!'),
+    },
+}

package/src/v2/components/UserAvatar/UserAvatar.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import './UserAvatar.scss'
+
+export interface UserAvatarProps {
+    initials?: string
+    avatarUrl?: string
+    size?: 'sm' | 'md' | 'lg'
+    isActive?: boolean
+    onClick?: () => void
+    className?: string
+}
+
+export const UserAvatar: React.FC<UserAvatarProps> = ({
+    initials = 'U',
+    avatarUrl,
+    size = 'md',
+    isActive = false,
+    onClick,
+    className = '',
+}) => {
+    const sizeMap = {
+        sm: 24,
+        md: 32,
+        lg: 47,
+    }
+
+    const fontSizeMap = {
+        sm: 8,
+        md: 10,
+        lg: 14,
+    }
+
+    const dimension = sizeMap[size]
+    const fontSize = fontSizeMap[size]
+    const radius = dimension / 2 - 1
+
+    const fillColor = isActive 
+        ? 'var(--fills-main-fill-primary, #14215A)' 
+        : 'var(--fills-main-fill-secondary, #626A90)'
+
+    const handleClick = () => {
+        onClick?.()
+    }
+
+    const content = avatarUrl ? (
+        <img src={avatarUrl} alt="Profile" className="user-avatar__image" />
+    ) : (
+        <>
+            <svg 
+                width={dimension} 
+                height={dimension} 
+                viewBox={`0 0 ${dimension} ${dimension}`} 
+                fill="none" 
+                className="user-avatar__bg"
+            >
+                <circle 
+                    cx={dimension / 2} 
+                    cy={dimension / 2} 
+                    r={radius} 
+                    fill={fillColor} 
+                    fillOpacity="0.2" 
+                    stroke={fillColor} 
+                    strokeWidth="2" 
+                />
+            </svg>
+            <span 
+                className={`user-avatar__initials ${isActive ? 'user-avatar__initials--active' : ''}`}
+                style={{ fontSize: `${fontSize}px` }}
+            >
+                {initials}
+            </span>
+        </>
+    )
+
+    if (onClick) {
+        return (
+            <button 
+                className={`user-avatar user-avatar--${size} user-avatar--clickable ${isActive ? 'user-avatar--active' : ''} ${className}`.trim()}
+                onClick={handleClick}
+                type="button"
+                style={{ width: dimension, height: dimension }}
+            >
+                {content}
+            </button>
+        )
+    }
+
+    return (
+        <div 
+            className={`user-avatar user-avatar--${size} ${isActive ? 'user-avatar--active' : ''} ${className}`.trim()}
+            style={{ width: dimension, height: dimension }}
+        >
+            {content}
+        </div>
+    )
+}

package/src/v2/components/UserAvatar/index.ts

@@ -0,0 +1 @@
+export { UserAvatar, type UserAvatarProps } from './UserAvatar'

package/src/v2/components/UserPanel/UserPanel.scss

@@ -0,0 +1,195 @@
+.user-panel__overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.2);
+    z-index: 40;
+    animation: fadeIn 0.2s ease;
+}
+
+.user-panel {
+    position: fixed;
+    right: 0;
+    top: 0;
+    height: 100vh;
+    width: 100%;
+    max-width: 320px;
+    background: var(--surfaces-main-surface-primary, #FFFFFF);
+    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
+    z-index: 50;
+    display: flex;
+    flex-direction: column;
+    animation: slideInRight 0.3s ease;
+
+    @media (max-width: 640px) {
+        max-width: 100%;
+    }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideInRight {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+}
+
+.user-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    border-bottom: 1px solid var(--borders-main-border-primary, #E8E9EF);
+}
+
+.user-panel__user-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.user-panel__avatar {
+    width: 32px;
+    height: 32px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    border-radius: 50%;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.user-panel__avatar-bg {
+    position: absolute;
+}
+
+.user-panel__avatar-initials {
+    font-family: var(--font-family-sans);
+    font-size: 10px;
+    font-weight: 800;
+    line-height: 8px;
+    color: var(--labels-main-label-secondary, #626A90);
+    position: relative;
+    margin-top: 2px;
+}
+
+.user-panel__user-details {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.user-panel__greeting {
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 18px;
+    color: var(--labels-main-label-primary, #121E52);
+    margin: 0;
+}
+
+.user-panel__email {
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    line-height: 14px;
+    color: var(--labels-main-label-secondary, #626A90);
+}
+
+.user-panel__close-btn {
+    padding: 8px;
+    border-radius: 8px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--fills-main-fill-primary, #14215A);
+    transition: background 0.2s ease;
+
+    &:hover {
+        background: var(--surfaces-main-surface-primary-hover, #F8F8FA);
+    }
+}
+
+.user-panel__menu {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 8px;
+    gap: 4px;
+}
+
+.user-panel__menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 8px;
+    border-radius: 8px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    text-align: left;
+    color: var(--labels-main-label-primary, #121E52);
+    transition: background 0.2s ease;
+    outline: none;
+
+    &:hover {
+        background: var(--surfaces-main-surface-primary-hover, #F8F8FA);
+    }
+
+    &:active {
+        background: var(--surfaces-main-surface-primary-pressed, #F0F0F4);
+    }
+
+    span {
+        font-family: var(--font-family-sans);
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 16px;
+    }
+
+    svg {
+        flex-shrink: 0;
+    }
+}
+
+.user-panel__logout-section {
+    padding: 8px;
+    padding-top: 4px;
+}
+
+.user-panel__footer {
+    padding: 16px;
+    border-top: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    margin-top: auto;
+}
+
+.user-panel__user-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 8px;
+    background: var(--surfaces-main-surface-tertiary, #E8E9EF);
+    border-radius: 8px;
+    width: fit-content;
+
+    span {
+        font-family: var(--font-family-mono);
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 12px;
+        color: var(--labels-main-label-secondary, #626A90);
+        white-space: nowrap;
+    }
+}

package/src/v2/components/UserPanel/UserPanel.stories.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { UserPanel } from './UserPanel'
+
+const meta: Meta<typeof UserPanel> = {
+    title: 'v2/Components/UserPanel',
+    component: UserPanel,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        isOpen: { control: 'boolean' },
+        userName: { control: 'text' },
+        firstName: { control: 'text' },
+        email: { control: 'text' },
+        initials: { control: 'text' },
+        avatarUrl: { control: 'text' },
+        userNumber: { control: 'number' },
+        userRole: { control: 'text' },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof UserPanel>
+
+const Template = (args: any) => {
+    const [isOpen, setIsOpen] = useState(args.isOpen)
+
+    return (
+        <div style={{ minHeight: '100vh', background: 'var(--surfaces-main-background-secondary)', padding: '20px' }}>
+            <button 
+                onClick={() => setIsOpen(true)}
+                style={{
+                    padding: '8px 16px',
+                    borderRadius: '8px',
+                    border: '1px solid var(--borders-main-border-primary)',
+                    background: 'var(--surfaces-main-surface-primary)',
+                    cursor: 'pointer',
+                    fontFamily: 'var(--font-family-sans)',
+                }}
+            >
+                Open User Panel
+            </button>
+            <UserPanel
+                {...args}
+                isOpen={isOpen}
+                onClose={() => setIsOpen(false)}
+            />
+        </div>
+    )
+}
+
+export const Default: Story = {
+    render: Template,
+    args: {
+        isOpen: true,
+        userName: 'Godwin Adebimpe',
+        firstName: 'Godwin',
+        email: 'godwin.adebimpe@booked.it',
+        initials: 'GA',
+        userNumber: 15,
+        userRole: 'Super Admin',
+        onProfileClick: () => console.log('Profile clicked'),
+        onLogoutClick: () => console.log('Logout clicked'),
+    },
+}

package/src/v2/components/UserPanel/UserPanel.tsx

@@ -0,0 +1,132 @@
+import React from 'react'
+import './UserPanel.scss'
+
+export interface UserPanelProps {
+    isOpen: boolean
+    onClose: () => void
+    userName: string
+    firstName?: string
+    email?: string
+    initials?: string
+    avatarUrl?: string | null
+    userNumber?: number | null
+    userRole?: string
+    onProfileClick?: () => void
+    onLogoutClick?: () => void
+}
+
+// Icons as inline SVGs
+const CloseIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+        <path d="M12 10.586L16.95 5.636L18.364 7.05L13.414 12L18.364 16.95L16.95 18.364L12 13.414L7.05 18.364L5.636 16.95L10.586 12L5.636 7.05L7.05 5.636L12 10.586Z" fill="currentColor"/>
+    </svg>
+)
+
+const UserIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+        <path d="M4.5 19.5C4.5 16.1863 7.18629 13.5 10.5 13.5C13.8137 13.5 16.5 16.1863 16.5 19.5H15C15 17.0147 12.9853 15 10.5 15C8.01472 15 6 17.0147 6 19.5H4.5ZM10.5 12.75C8.01375 12.75 6 10.7362 6 8.25C6 5.76375 8.01375 3.75 10.5 3.75C12.9862 3.75 15 5.76375 15 8.25C15 10.7362 12.9862 12.75 10.5 12.75ZM10.5 11.25C12.1575 11.25 13.5 9.9075 13.5 8.25C13.5 6.5925 12.1575 5.25 10.5 5.25C8.8425 5.25 7.5 6.5925 7.5 8.25C7.5 9.9075 8.8425 11.25 10.5 11.25Z" fill="currentColor"/>
+    </svg>
+)
+
+const LogoutIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+        <path d="M5 22C4.44772 22 4 21.5523 4 21V3C4 2.44772 4.44772 2 5 2H19C19.5523 2 20 2.44772 20 3V6H18V4H6V20H18V18H20V21C20 21.5523 19.5523 22 19 22H5ZM18 16V13H11V11H18V8L23 12L18 16Z" fill="currentColor"/>
+    </svg>
+)
+
+export const UserPanel: React.FC<UserPanelProps> = ({
+    isOpen,
+    onClose,
+    userName,
+    firstName,
+    email,
+    initials,
+    avatarUrl,
+    userNumber,
+    userRole,
+    onProfileClick,
+    onLogoutClick,
+}) => {
+    const displayFirstName = firstName || userName?.split(' ')[0] || 'User'
+    const displayInitials = initials || userName?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2) || 'U'
+
+    if (!isOpen) return null
+
+    return (
+        <>
+            {/* Overlay */}
+            <div 
+                className="user-panel__overlay"
+                onClick={onClose}
+            />
+            
+            {/* Panel */}
+            <div 
+                className="user-panel"
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* Header */}
+                <div className="user-panel__header">
+                    <div className="user-panel__user-info">
+                        <div className="user-panel__avatar">
+                            {avatarUrl ? (
+                                <img src={avatarUrl} alt="Profile" />
+                            ) : (
+                                <>
+                                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="user-panel__avatar-bg">
+                                        <circle cx="16" cy="16" r="15" fill="var(--fills-main-fill-secondary, #626A90)" fillOpacity="0.2" stroke="var(--fills-main-fill-secondary, #626A90)" strokeWidth="2" />
+                                    </svg>
+                                    <span className="user-panel__avatar-initials">{displayInitials}</span>
+                                </>
+                            )}
+                        </div>
+                        <div className="user-panel__user-details">
+                            <h2 className="user-panel__greeting">Hey {displayFirstName}</h2>
+                            {email && (
+                                <span className="user-panel__email">{email}</span>
+                            )}
+                        </div>
+                    </div>
+                    <button
+                        onClick={onClose}
+                        className="user-panel__close-btn"
+                        aria-label="Close user menu"
+                    >
+                        <CloseIcon />
+                    </button>
+                </div>
+
+                {/* Menu Items */}
+                <div className="user-panel__menu">
+                    <button
+                        onClick={onProfileClick}
+                        className="user-panel__menu-item"
+                    >
+                        <UserIcon />
+                        <span>Profile</span>
+                    </button>
+                </div>
+
+                {/* Logout */}
+                <div className="user-panel__logout-section">
+                    <button
+                        onClick={onLogoutClick}
+                        className="user-panel__menu-item"
+                    >
+                        <LogoutIcon />
+                        <span>Log out</span>
+                    </button>
+                </div>
+
+                {/* Footer with User ID and Role */}
+                <div className="user-panel__footer">
+                    <div className="user-panel__user-badge">
+                        <span>
+                            User: {userNumber ? String(userNumber).padStart(2, '0') : 'N/A'}{userRole ? ` - ${userRole}` : ''}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

package/src/v2/components/UserPanel/index.ts

@@ -0,0 +1,2 @@
+export { UserPanel } from './UserPanel'
+export type { UserPanelProps } from './UserPanel'

package/src/v2/dashboard-analytics/blog-posts/Blog.scss

@@ -0,0 +1,92 @@
+@import '../../design-system/typography/Typography.scss';
+
+
+.blog {
+  width: 328px;
+  margin-top: 0;
+  
+  @media (max-width: 1024px) {
+    width: 100%;
+  }
+
+  @media (max-width: 767px) {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
+
+  &__title {
+    @include typography('heading.h3');
+    line-height: 1.75rem;
+    color: var(--label-primary);
+  }
+
+  &__logo {
+    height: 22px;
+    width: auto;
+    object-fit: contain;
+    filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(100%);
+  }
+
+  &__posts {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  &__post {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem 0;
+    
+    &:first-child {
+      padding-top: 0;
+    }
+    
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--border-selected);
+    }
+  }
+
+  &__post-title {
+    @include typography('heading.h4');
+    line-height: 1.5rem;
+    color: var(--label-primary);
+    margin-bottom: 0.5rem;
+  }
+
+  &__post-excerpt {
+    @include typography('text.regular');
+    line-height: 1.25rem;
+    color: var(--label-secondary);
+    margin-bottom: 0.5rem;
+  }
+
+  &__post-link {
+    @include typography('heading.h5');
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: var(--label-action);
+    text-decoration: none;
+    transition: opacity 0.2s ease-in-out;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__post-link-icon {
+    display: inline-flex;
+    align-items: center;
+    width: 12px;
+    height: 12px;
+  }
+
+}