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

package/dist/v2/styles/tokens/_status.scss

@@ -0,0 +1,108 @@
+/* Status/Alert Color tokens derived from Figma Alerts & Errors page
+ * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=167:968
+ */
+
+:root {
+    /* Success/Green Status Colors */
+    --color-success-fill: #2d6b18;
+    --color-success-background: #eef9ea;
+    --color-success-border: #c9ecbd;
+
+    /* Error/Red Status Colors */
+    --color-error-fill: #cc3c35;
+    --color-error-background: #fceceb;
+    --color-error-border: #f5c4c2;
+
+    /* Alert/Warning/Yellow Status Colors */
+    --color-alert-fill: #fd7e14;
+    --color-alert-background: #fcf6e7;
+    --color-alert-border: #f6e3b4;
+
+    /* Info/Blue Status Colors */
+    --color-info-fill: #0e8ce2;
+    --color-info-background: #e7f4fc;
+    --color-info-border: #b4dbf6;
+}
+
+/* Legacy format for compatibility with existing alias system */
+:root {
+    /* Surfaces - Status backgrounds */
+    --surfaces-status-background-success: var(--color-success-background);
+    --surfaces-status-background-error: var(--color-error-background);
+    --surfaces-status-background-alert: var(--color-alert-background);
+    --surfaces-status-background-info: var(--color-info-background);
+
+    /* Borders - Status borders */
+    --borders-status-border-success: var(--color-success-border);
+    --borders-status-border-error: var(--color-error-border);
+    --borders-status-border-alert: var(--color-alert-border);
+    --borders-status-border-info: var(--color-info-border);
+
+    /* Fills - Status icons/text */
+    --fills-status-fill-success: var(--color-success-fill);
+    --fills-status-fill-error: var(--color-error-fill);
+    --fills-status-fill-alert: var(--color-alert-fill);
+    --fills-status-fill-info: var(--color-info-fill);
+}
+
+/* SCSS Map for status colors */
+$status-colors: (
+    success: (
+        fill: var(--color-success-fill),
+        background: var(--color-success-background),
+        border: var(--color-success-border)
+    ),
+    error: (
+        fill: var(--color-error-fill),
+        background: var(--color-error-background),
+        border: var(--color-error-border)
+    ),
+    alert: (
+        fill: var(--color-alert-fill),
+        background: var(--color-alert-background),
+        border: var(--color-alert-border)
+    ),
+    info: (
+        fill: var(--color-info-fill),
+        background: var(--color-info-background),
+        border: var(--color-info-border)
+    )
+);
+
+/* Mixins for status colors */
+@mixin status-success() {
+    background-color: var(--surfaces-status-background-success);
+    border-color: var(--borders-status-border-success);
+    color: var(--fills-status-fill-success);
+}
+
+@mixin status-error() {
+    background-color: var(--surfaces-status-background-error);
+    border-color: var(--borders-status-border-error);
+    color: var(--fills-status-fill-error);
+}
+
+@mixin status-alert() {
+    background-color: var(--surfaces-status-background-alert);
+    border-color: var(--borders-status-border-alert);
+    color: var(--fills-status-fill-alert);
+}
+
+@mixin status-info() {
+    background-color: var(--surfaces-status-background-info);
+    border-color: var(--borders-status-border-info);
+    color: var(--fills-status-fill-info);
+}
+
+/* Helper mixin for getting status colors */
+@function get-status-color($status, $type) {
+    $status-map: map-get($status-colors, $status);
+    @if $status-map {
+        $color: map-get($status-map, $type);
+        @if $color {
+            @return $color;
+        }
+    }
+    @warn "Unknown status color: #{$status}.#{$type}";
+    @return null;
+}

package/dist/v2/styles/tokens/_typography.scss

@@ -0,0 +1,146 @@
+/* Typography tokens and mixins derived from Figma
+ * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=30-95&m=dev
+ */
+
+:root {
+    /* Families */
+    --font-family-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    --font-family-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+    /* Headings Desktop */
+    --heading-xxl-size: 44px;
+    --heading-xxl-line: 48px;
+    --heading-xxl-weight: 600;
+    --heading-xl-size: 32px;
+    --heading-xl-line: 36px;
+    --heading-xl-weight: 700;
+    --heading-h1-size: 24px;
+    --heading-h1-line: 28px;
+    --heading-h1-weight: 600;
+    --heading-h2-size: 20px;
+    --heading-h2-line: 24px;
+    --heading-h2-weight: 600;
+    --heading-h3-size: 17px;
+    --heading-h3-line: 20px;
+    --heading-h3-weight: 600;
+    --heading-h4-size: 15px;
+    --heading-h4-line: 18px;
+    --heading-h4-weight: 600;
+    --heading-h5-size: 13px;
+    --heading-h5-line: 16px;
+    --heading-h5-weight: 500;
+    --heading-h6-size: 11px;
+    --heading-h6-line: 14px;
+    --heading-h6-weight: 500;
+
+    /* Headings Mobile */
+    --heading-xxl-mobile-size: 32px;
+    --heading-xxl-mobile-line: 36px;
+    --heading-xxl-mobile-weight: 600;
+    --heading-xl-mobile-size: 26px;
+    --heading-xl-mobile-line: 30px;
+    --heading-xl-mobile-weight: 700;
+    --heading-h1-mobile-size: 20px;
+    --heading-h1-mobile-line: 23px;
+    --heading-h1-mobile-weight: 600;
+    --heading-h2-mobile-size: 18px;
+    --heading-h2-mobile-line: 22px;
+    --heading-h2-mobile-weight: 600;
+    --heading-h3-mobile-size: 16px;
+    --heading-h3-mobile-line: 18px;
+    --heading-h3-mobile-weight: 600;
+    --heading-h4-mobile-size: 14px;
+    --heading-h4-mobile-line: 16px;
+    --heading-h4-mobile-weight: 600;
+    --heading-h5-mobile-size: 13px;
+    --heading-h5-mobile-line: 16px;
+    --heading-h5-mobile-weight: 500;
+    --heading-h6-mobile-size: 11px;
+    --heading-h6-mobile-line: 14px;
+    --heading-h6-mobile-weight: 500;
+
+    /* Body Desktop */
+    --text-xl-size: 20px;
+    --text-xl-line: 26px;
+    --text-xl-weight: 400;
+    --text-large-size: 18px;
+    --text-large-line: 24px;
+    --text-large-weight: 400;
+    --text-regular-size: 15px;
+    --text-regular-line: 20px;
+    --text-regular-weight: 400;
+    --text-small-size: 13px;
+    --text-small-line: 16px;
+    --text-small-weight: 400;
+    --text-small-emphasis-weight: 500;
+    --text-small-bold-weight: 600;
+    --text-xs-size: 10px;
+    --text-xs-line: 13px;
+    --text-xs-weight: 500;
+    --text-xs-bold-weight: 600;
+}
+
+/* Breakpoint: adjust if your system uses different breakpoints */
+$bp-mobile-max: 767px;
+
+/* Map of variants to CSS variable tuples: (size, line, weight) */
+$typo-map: (
+    'heading.xxl': (var(--heading-xxl-size), var(--heading-xxl-line), var(--heading-xxl-weight), var(--font-family-sans)),
+    'heading.xl': (var(--heading-xl-size), var(--heading-xl-line), var(--heading-xl-weight), var(--font-family-sans)),
+    'heading.h1': (var(--heading-h1-size), var(--heading-h1-line), var(--heading-h1-weight), var(--font-family-sans)),
+    'heading.h2': (var(--heading-h2-size), var(--heading-h2-line), var(--heading-h2-weight), var(--font-family-sans)),
+    'heading.h3': (var(--heading-h3-size), var(--heading-h3-line), var(--heading-h3-weight), var(--font-family-sans)),
+    'heading.h4': (var(--heading-h4-size), var(--heading-h4-line), var(--heading-h4-weight), var(--font-family-sans)),
+    'heading.h5': (var(--heading-h5-size), var(--heading-h5-line), var(--heading-h5-weight), var(--font-family-sans)),
+    'heading.h6': (var(--heading-h6-size), var(--heading-h6-line), var(--heading-h6-weight), var(--font-family-sans)),
+
+    'heading.xxl.mobile': (var(--heading-xxl-mobile-size), var(--heading-xxl-mobile-line), var(--heading-xxl-mobile-weight), var(--font-family-sans)),
+    'heading.xl.mobile': (var(--heading-xl-mobile-size), var(--heading-xl-mobile-line), var(--heading-xl-mobile-weight), var(--font-family-sans)),
+    'heading.h1.mobile': (var(--heading-h1-mobile-size), var(--heading-h1-mobile-line), var(--heading-h1-mobile-weight), var(--font-family-sans)),
+    'heading.h2.mobile': (var(--heading-h2-mobile-size), var(--heading-h2-mobile-line), var(--heading-h2-mobile-weight), var(--font-family-sans)),
+    'heading.h3.mobile': (var(--heading-h3-mobile-size), var(--heading-h3-mobile-line), var(--heading-h3-mobile-weight), var(--font-family-sans)),
+    'heading.h4.mobile': (var(--heading-h4-mobile-size), var(--heading-h4-mobile-line), var(--heading-h4-mobile-weight), var(--font-family-sans)),
+    'heading.h5.mobile': (var(--heading-h5-mobile-size), var(--heading-h5-mobile-line), var(--heading-h5-mobile-weight), var(--font-family-sans)),
+    'heading.h6.mobile': (var(--heading-h6-mobile-size), var(--heading-h6-mobile-line), var(--heading-h6-mobile-weight), var(--font-family-sans)),
+
+    'text.xl': (var(--text-xl-size), var(--text-xl-line), var(--text-xl-weight), var(--font-family-sans)),
+    'text.large': (var(--text-large-size), var(--text-large-line), var(--text-large-weight), var(--font-family-sans)),
+    'text.regular': (var(--text-regular-size), var(--text-regular-line), var(--text-regular-weight), var(--font-family-sans)),
+    'text.small': (var(--text-small-size), var(--text-small-line), var(--text-small-weight), var(--font-family-sans)),
+    'text.small.emphasis': (var(--text-small-size), var(--text-small-line), var(--text-small-emphasis-weight), var(--font-family-sans)),
+    'text.small.bold': (var(--text-small-size), var(--text-small-line), var(--text-small-bold-weight), var(--font-family-sans)),
+    'text.xs': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-weight), var(--font-family-sans)),
+    'text.xs.bold': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-bold-weight), var(--font-family-sans))
+);
+
+@mixin apply-typo($tuple) {
+    $size: nth($tuple, 1);
+    $line: nth($tuple, 2);
+    $weight: nth($tuple, 3);
+    $family: nth($tuple, 4);
+    font-family: $family;
+    font-size: $size;
+    line-height: $line;
+    font-weight: $weight;
+    color: var(--labels-main-label-primary, #121E52);
+}
+
+@mixin typography($variant) {
+    @if map-has-key($typo-map, $variant) {
+        @include apply-typo(map-get($typo-map, $variant));
+    }
+
+    @else {
+        /* Fallback to regular text */
+        @include apply-typo(map-get($typo-map, 'text.regular'));
+    }
+}
+
+/* Convenience mixin that switches to mobile variant under mobile breakpoint */
+@mixin responsive-heading($desktopVariant, $mobileVariant) {
+    @include typography($desktopVariant);
+
+    @media (max-width: $bp-mobile-max) {
+        @include typography($mobileVariant);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.34",
+  "version": "0.78.5-dev.36",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -71,6 +71,7 @@
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-aria/utils": "3.9.0",
     "@svgr/webpack": "^6.5.1",
     "@tanstack/react-table": "8.10.6",

package/rollup.config.js

@@ -40,6 +40,7 @@ export default [
         targets: [
           { src: './src/assets/*', dest: './dist/assets' },
           { src: './src/styles/*', dest: './dist/styles' },
+          { src: './src/v2/styles/*', dest: './dist/v2/styles' },
           { src: './src/root.css', dest: './dist' },
         ],
       }),

package/src/v2/components/NPSScore/NPSScore.scss

@@ -0,0 +1,330 @@
+.nps-score {
+    width: 100%;
+    margin-top: 24px;
+
+    &__container {
+        background: var(--surfaces-main-surface-secondary, #F4F4F7);
+        border-radius: 16px;
+        padding: 24px;
+        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    }
+
+    &__question {
+        font-family: var(--font-family-sans);
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 24px;
+        color: var(--labels-main-label-primary, #121E52);
+        margin: 0 0 16px 0;
+    }
+
+    &__labels {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+    }
+
+    &__label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        span {
+            font-family: var(--font-family-sans);
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--labels-main-label-secondary, #626A90);
+        }
+
+        &--desktop {
+            display: none;
+
+            @media (min-width: 768px) {
+                display: flex;
+            }
+        }
+
+        &--mobile {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 12px;
+
+            @media (min-width: 768px) {
+                display: none;
+            }
+        }
+    }
+
+    &__label-icon {
+        color: var(--fills-main-fill-secondary, #626A90);
+        flex-shrink: 0;
+    }
+
+    &__buttons {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 8px;
+
+        @media (min-width: 768px) {
+            grid-template-columns: repeat(10, 1fr);
+        }
+    }
+
+    &__button {
+        height: 48px;
+        border-radius: 12px;
+        font-family: var(--font-family-sans);
+        font-size: 18px;
+        font-weight: 600;
+        transition: all 0.2s ease;
+        cursor: pointer;
+        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+        color: var(--labels-main-label-primary, #121E52);
+
+        &:hover:not(&--selected) {
+            background: var(--surfaces-main-surface-primary-hover, #F8F8FA);
+        }
+
+        &--selected {
+            background: var(--fills-main-fill-primary, #14215A);
+            border-color: transparent;
+            color: #FFFFFF;
+        }
+    }
+
+    &__expanded {
+        margin-top: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        animation: nps-fade-in 0.2s ease;
+    }
+
+    &__field {
+        &--roles {
+            padding-top: 16px;
+        }
+    }
+
+    &__field-label {
+        display: block;
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--labels-main-label-primary, #121E52);
+        margin-bottom: 8px;
+    }
+
+    &__field-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+    }
+
+    &__optional {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-secondary, #626A90);
+    }
+
+    &__textarea {
+        width: 100%;
+        min-height: 100px;
+        padding: 12px;
+        border-radius: 8px;
+        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-primary, #121E52);
+        resize: vertical;
+        box-sizing: border-box;
+
+        &::placeholder {
+            color: var(--labels-main-label-tertiary, #9CA3AF);
+        }
+
+        &:focus {
+            outline: none;
+            border-color: var(--fills-main-fill-primary, #14215A);
+        }
+
+        &--error {
+            border-color: var(--fills-main-fill-danger, #DC2626);
+        }
+    }
+
+    &__hint {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-secondary, #626A90);
+        margin: 4px 0 0 0;
+    }
+
+    &__error {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--fills-main-fill-danger, #DC2626);
+        margin: 4px 0 0 0;
+    }
+
+    &__add-comment {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--labels-main-label-action, #2563EB);
+        text-decoration: underline;
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        transition: color 0.2s ease;
+
+        &:hover {
+            color: var(--labels-main-label-action-hover, #1D4ED8);
+        }
+    }
+
+    &__roles {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 12px;
+
+        @media (min-width: 640px) {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        @media (min-width: 1024px) {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+
+    &__role {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        position: relative;
+    }
+
+    &__role-input {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 2px solid var(--borders-main-border-primary, #E8E9EF);
+        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        margin: 0;
+        cursor: pointer;
+        flex-shrink: 0;
+        position: relative;
+        transition: border-color 0.2s ease;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: var(--fills-main-fill-primary, #14215A);
+            transition: transform 0.2s ease;
+        }
+
+        &:checked {
+            border-color: var(--fills-main-fill-primary, #14215A);
+
+            &::before {
+                transform: translate(-50%, -50%) scale(1);
+            }
+        }
+
+        &:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px var(--fills-main-fill-primary-opacity, rgba(20, 33, 90, 0.2));
+        }
+    }
+
+    &__role-radio {
+        display: none;
+    }
+
+    &__role-label {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-primary, #121E52);
+    }
+
+    &__submit {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 12px 24px;
+        border-radius: 8px;
+        border: none;
+        background: var(--fills-main-fill-primary, #14215A);
+        color: #FFFFFF;
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background 0.2s ease;
+        width: fit-content;
+
+        &:hover:not(:disabled) {
+            background: var(--fills-main-fill-primary-hover, #1a2a6e);
+        }
+
+        &:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+    }
+
+    &__success {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 32px;
+        text-align: center;
+    }
+
+    &__success-icon {
+        color: var(--fills-main-fill-success, #10B981);
+        margin-bottom: 16px;
+    }
+
+    &__success-title {
+        font-family: var(--font-family-sans);
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--labels-main-label-primary, #121E52);
+        margin: 0 0 8px 0;
+    }
+
+    &__success-message {
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        color: var(--labels-main-label-secondary, #626A90);
+        margin: 0;
+    }
+}
+
+@keyframes nps-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { NPSScore } from './NPSScore'
+
+const meta: Meta<typeof NPSScore> = {
+    title: 'v2/Components/NPSScore',
+    component: NPSScore,
+    parameters: {
+        layout: 'padded',
+    },
+    argTypes: {
+        firstName: { control: 'text' },
+        onSubmit: { action: 'submitted' },
+        onDismiss: { action: 'dismissed' },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof NPSScore>
+
+export const Default: Story = {
+    args: {
+        firstName: 'Godwin',
+        onSubmit: (data) => {
+            console.log('NPS Submitted:', data)
+            return Promise.resolve()
+        },
+    },
+}