@licklist/design 0.78.21 → 0.78.26

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

@@ -0,0 +1,126 @@
+import React from 'react'
+import './UserPanel.scss'
+import { UserAvatar } from '../UserAvatar'
+
+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">
+                        <UserAvatar
+                            initials={displayInitials}
+                            avatarUrl={avatarUrl || undefined}
+                            size="md"
+                        />
+                        <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;
+  }
+
+}

package/src/v2/dashboard-analytics/blog-posts/Blog.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, Story } from '@storybook/react-vite';
+import { Blog, BlogProps } from './Blog';
+
+export default {
+  title: 'v2/Dashboard Analytics/Blog',
+  component: Blog,
+  argTypes: {
+    posts: {
+      description: 'Array of blog posts to display',
+      control: 'object',
+    },
+    logoUrl: {
+      description: 'URL for the logo image',
+      control: 'text',
+    },
+    className: {
+      description: 'Additional CSS classes',
+      control: 'text',
+    },
+  },
+} as Meta<BlogProps>;
+
+const Template: Story<BlogProps> = (args: BlogProps) => (
+  <div style={{ maxWidth: '600px', padding: '20px' }}>
+    <Blog {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const CustomPosts = Template.bind({});
+CustomPosts.args = {
+  posts: [
+    {
+      title: 'Getting Started with Our Platform',
+      excerpt: 'Learn the basics of setting up your account and making the most of our features. This comprehensive guide will walk you through everything you need to know.',
+      url: 'https://example.com/getting-started'
+    },
+    {
+      title: 'Advanced Tips and Tricks',
+      excerpt: 'Unlock the full potential of our platform with these expert tips. Discover hidden features and shortcuts that will boost your productivity.',
+      url: 'https://example.com/tips-and-tricks'
+    }
+  ]
+};
+
+export const SinglePost = Template.bind({});
+SinglePost.args = {
+  posts: [
+    {
+      title: 'Important Announcement',
+      excerpt: 'We have exciting news to share with our community. Stay tuned for major updates coming your way.',
+      url: 'https://example.com/announcement'
+    }
+  ]
+};

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import './Blog.scss';
+
+interface BlogPost {
+  title: string;
+  excerpt: string;
+  url: string;
+}
+
+interface BlogProps {
+  posts?: BlogPost[];
+  logoUrl?: string;
+  className?: string;
+}
+
+const defaultPosts: BlogPost[] = [
+  {
+    title: 'How Booking Software Transforms the Guest Experience',
+    excerpt: 'In the leisure and hospitality industry, first impressions matter. For competitive socialising venues, bowling alleys, cinemas, and beyond, that first impression is often formed long before guests step through your doors.',
+    url: 'https://booked.it/how-booking-software-transforms-the-guest-experience/'
+  },
+  {
+    title: '5 ways booking software improves the guest experience before they arrive',
+    excerpt: 'When guests choose your venue, their experience doesn\'t begin at the door. It starts the moment they decide to book. That first digital touchpoint sets the tone for everything that follows.',
+    url: 'https://booked.it/5-ways-booking-software-improves-the-guest-experience-before-they-arrive/'
+  },
+  {
+    title: 'Ticketing software vs booking software – which is right for your venue?',
+    excerpt: 'In the UK leisure and hospitality industry, the terms ticketing software and booking software are often used interchangeably. But while they may appear similar, they serve different purposes.',
+    url: 'https://booked.it/ticketing-software-vs-booking-software-which-is-right-for-your-venue/'
+  }
+];
+
+const ExternalLinkIcon = () => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    width="12" 
+    height="12" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+  >
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    <polyline points="15 3 21 3 21 9" />
+    <line x1="10" y1="14" x2="21" y2="3" />
+  </svg>
+);
+
+export const Blog: React.FC<BlogProps> = ({ 
+  posts = defaultPosts, 
+  logoUrl = 'https://api.builder.io/api/v1/image/assets/TEMP/1f8a6c2f7239cf2c859ace81bb32160a5d376121?placeholderIfAbsent=true',
+  className = ''
+}) => {
+  return (
+    <div className={`blog ${className}`}>
+      <div className="blog__header">
+        <h2 className="blog__title">Latest Updates</h2>
+        <img 
+          src={logoUrl} 
+          alt="Logo" 
+          className="blog__logo"
+        />
+      </div>
+      
+      <div className="blog__posts">
+        {posts.map((post, index) => (
+          <div key={index} className="blog__post">
+            <h3 className="blog__post-title">{post.title}</h3>
+            <p className="blog__post-excerpt">{post.excerpt}</p>
+            <a 
+              href={post.url} 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="blog__post-link"
+            >
+              Read more
+              <span className="blog__post-link-icon">
+                <ExternalLinkIcon />
+              </span>
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export type { BlogProps, BlogPost };

package/src/v2/dashboard-analytics/blog-posts/index.ts

@@ -0,0 +1,2 @@
+export { Blog } from './Blog';
+export type { BlogProps } from './Blog';