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

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';

package/src/v2/dashboard-analytics/chart/Chart.scss

@@ -0,0 +1,424 @@
+@import '../../design-system/typography/Typography.scss';
+
+.chart {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.4375rem;
+  padding: 1rem;
+  background-color: var(--surface-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-sizing: border-box;
+  min-width: 0;
+  transition: all 0.3s ease-in-out;
+
+  &--loading {
+    .chart__wrapper {
+      opacity: 0.6;
+      transition: opacity 0.3s ease-in-out;
+    }
+  }
+
+  &--refreshing {
+    .chart__wrapper {
+      opacity: 0.95;
+      transition: opacity 0.2s ease-in-out;
+    }
+    
+    border-color: rgba(31, 154, 181, 0.3);
+  }
+
+  &[data-full-width="true"] {
+    .chart__container {
+      margin-left: -1rem;
+      margin-right: -1rem;
+      padding: 0;
+      width: calc(100% + 2rem);
+    }
+    
+    .chart__wrapper {
+      margin-left: 0;
+      margin-right: 0;
+      width: 100%;
+      max-width: none;
+    }
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.75rem;
+    gap: 1rem;
+  }
+
+  @media (min-width: 481px) and (max-width: 768px) {
+    padding: 1rem;
+    gap: 1.25rem;
+  }
+
+  @media (min-width: 769px) {
+    padding: 1.375rem 1rem;
+    gap: 1.4375rem;
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin-left: 0.25rem;
+
+    @media (min-width: 768px) {
+      margin-left: 0.75rem;
+    }
+  }
+
+  &__title {
+    @include typography('heading.h3');
+    line-height: 1.2;
+    color: var(--label-primary);
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    @media (min-width: 480px) {
+      font-size: 16px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 17px;
+      line-height: 1.176;
+    }
+  }
+
+  &__title-refresh-indicator {
+    font-size: 12px;
+    color: var(--label-primary);
+    animation: refreshSpin 1s linear infinite;
+    opacity: 0.7;
+  }
+
+  @keyframes refreshSpin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  &__subtitle {
+
+    @include typography('heading.h5');
+    line-height: 1.4;
+    color: var(--label-secondary);
+    margin: 0;
+    padding: 0;
+
+    @media (min-width: 480px) {
+      font-size: 12.5px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 13px;
+      line-height: 1.538;
+    }
+  }
+
+  &__container {
+    width: 100%;
+    max-width: 100%;
+    margin: 0 -1rem -1rem -1rem;
+    padding: 0;
+    overflow: visible;
+    box-sizing: border-box;
+    transition: all 0.3s ease-in-out;
+    position: relative;
+
+    @media (max-width: 480px) {
+      margin: 0 -0.75rem -0.75rem -0.75rem;
+      padding: 0;
+    }
+
+    @media (min-width: 768px) {
+      margin: 0 -1rem -1.375rem -1rem;
+      padding: 0;
+    }
+  }
+
+  &__loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(248, 248, 250, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    backdrop-filter: blur(1px);
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  @keyframes chartSpin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  &__wrapper {
+    width: 100%;
+    max-width: 100%;
+    height: 220px;
+    overflow: visible;
+    box-sizing: border-box;
+    position: relative;
+    transition: all 0.3s ease-in-out;
+
+    @media (min-width: 480px) {
+      height: 250px;
+    }
+
+    @media (min-width: 768px) {
+      height: 280px;
+    }
+
+    @media (min-width: 1024px) {
+      height: 300px;
+    }
+
+    @media (min-width: 1440px) {
+      height: 320px;
+    }
+  }
+
+  &__tooltip {
+    background-color: #fff;
+    border: 1px solid var(--border-primary);
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    box-shadow: 0 4px 12px rgba(18, 30, 82, 0.1);
+    min-width: 80px;
+    max-width: 180px;
+
+    @media (min-width: 480px) {
+      padding: 0.625rem;
+      min-width: 90px;
+      max-width: 190px;
+    }
+
+    @media (min-width: 768px) {
+      padding: 0.75rem;
+      min-width: 100px;
+      max-width: 200px;
+    }
+  }
+
+  &__tooltip-label {
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--label-secondary);
+    margin-bottom: 0.25rem;
+
+    @media (min-width: 480px) {
+      font-size: 12px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 13px;
+    }
+  }
+
+  &__tooltip-value {
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--label-primary);
+    margin-bottom: 0.25rem;
+
+    @media (min-width: 480px) {
+      font-size: 14px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 15px;
+    }
+  }
+
+  &__tooltip-participants {
+    font-size: 9px;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--label-secondary);
+    margin-bottom: 0.5rem;
+
+    @media (min-width: 480px) {
+      font-size: 9.5px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 10px;
+    }
+  }
+
+  &__tooltip-trend {
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1;
+    margin-bottom: 0.25rem;
+
+    @media (min-width: 480px) {
+      font-size: 10.5px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 11px;
+    }
+
+    &.positive {
+      color: var(--success-dark, #2D6B18);
+    }
+
+    &.negative {
+      color: var(--error-dark, #CC3C35);
+    }
+
+    &.neutral {
+      color: var(--label-secondary);
+    }
+  }
+
+  &__tooltip-trend-content {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  &__tooltip-trend-icon {
+    flex-shrink: 0;
+
+    &.positive {
+      color: var(--success-dark, #2D6B18);
+    }
+
+    &.negative {
+      color: var(--error-dark, #CC3C35);
+    }
+  }
+
+  &__tooltip-trend-value {
+    font-weight: 600;
+  }
+
+  &__tooltip-comparison {
+    font-size: 9px;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--label-secondary);
+    margin-top: 0.25rem;
+
+    @media (min-width: 480px) {
+      font-size: 9.5px;
+    }
+
+    @media (min-width: 768px) {
+      font-size: 10px;
+    }
+  }
+
+  :global {
+    .recharts-cartesian-axis-tick {
+      text {
+        fill: var(--label-secondary) !important;
+        @include typography('heading.h6');
+        @media (min-width: 480px) {
+          font-size: 10px !important;
+        }
+
+        @media (min-width: 768px) {
+          font-size: 11px !important;
+        }
+      }
+    }
+
+    .recharts-cartesian-grid-horizontal line,
+    .recharts-cartesian-grid-vertical line {
+      stroke: var(--label-secondary) !important;
+      stroke-dasharray: 3 3 !important;
+    }
+
+    .recharts-tooltip-cursor {
+      fill: transparent;
+    }
+
+    .recharts-reference-line {
+      line {
+        stroke: var(--fill-action) !important;
+        stroke-width: 2 !important;
+        stroke-dasharray: 6 4 !important;
+      }
+    }
+
+    .recharts-area-dot {
+      r: 3 !important;
+
+      @media (min-width: 480px) {
+        r: 3.5 !important;
+      }
+
+      @media (min-width: 768px) {
+        r: 4 !important;
+      }
+    }
+
+    .recharts-active-dot {
+      r: 5 !important;
+
+      @media (min-width: 480px) {
+        r: 5.5 !important;
+      }
+
+      @media (min-width: 768px) {
+        r: 6 !important;
+      }
+    }
+
+    .recharts-responsive-container {
+      width: 100% !important;
+      height: 100% !important;
+      transition: all 0.3s ease-in-out;
+    }
+
+    .recharts-surface {
+      width: 100% !important;
+      transition: all 0.3s ease-in-out;
+    }
+
+    .recharts-area {
+      filter: drop-shadow(0 2px 8px rgba(31, 154, 181, 0.15));
+      transition: filter 0.3s ease-in-out;
+      
+      &:hover {
+        filter: drop-shadow(0 4px 12px rgba(31, 154, 181, 0.25));
+      }
+    }
+
+    .recharts-cartesian-axis.recharts-yAxis {
+      .recharts-cartesian-axis-tick {
+        text {
+          text-anchor: end !important;
+        }
+      }
+    }
+  }
+
+  &[data-full-width="true"] {
+    :global {
+      .recharts-cartesian-axis-tick {
+        text {
+          font-size: 10px !important;
+        }
+      }
+    }
+  }
+}