@licklist/design 0.78.5-dev.54 → 0.78.5-dev.56

package/dist/v2/icons/index.js

@@ -1,5 +1,84 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
 var MarketingIcon = function() {
     return /*#__PURE__*/ jsx("svg", {
         width: "24",
@@ -139,10 +218,11 @@ var SearchIcon = function() {
     });
 };
 var RefreshIcon = function() {
+    var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ref_width = _ref.width, width = _ref_width === void 0 ? 24 : _ref_width, _ref_height = _ref.height, height = _ref_height === void 0 ? 24 : _ref_height;
     return /*#__PURE__*/ jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
+        width: width,
+        height: height,
         viewBox: "0 0 24 24",
         fill: "none",
         children: /*#__PURE__*/ jsx("path", {
@@ -152,10 +232,11 @@ var RefreshIcon = function() {
     });
 };
 var SendIcon = function() {
+    var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ref_width = _ref.width, width = _ref_width === void 0 ? 24 : _ref_width, _ref_height = _ref.height, height = _ref_height === void 0 ? 24 : _ref_height;
     return /*#__PURE__*/ jsx("svg", {
         xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
+        width: width,
+        height: height,
         viewBox: "0 0 24 24",
         fill: "none",
         children: /*#__PURE__*/ jsx("path", {
@@ -178,9 +259,10 @@ var ExternalLinkIcon = function() {
     });
 };
 var ExportIcon = function() {
+    var _ref = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _ref_width = _ref.width, width = _ref_width === void 0 ? 24 : _ref_width, _ref_height = _ref.height, height = _ref_height === void 0 ? 24 : _ref_height;
     return /*#__PURE__*/ jsx("svg", {
-        width: "24",
-        height: "24",
+        width: width,
+        height: height,
         viewBox: "0 0 32 32",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
@@ -260,5 +342,66 @@ var InfoIcon = function() {
         })
     });
 };
+var ArrowUpIcon = function() {
+    return /*#__PURE__*/ jsx("svg", {
+        width: "11",
+        height: "6",
+        viewBox: "0 0 11 6",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M10 5L5.5 1L1 5",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+};
+var ArrowDownIcon = function() {
+    return /*#__PURE__*/ jsx("svg", {
+        width: "11",
+        height: "6",
+        viewBox: "0 0 11 6",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M1 1L5.5 5L10 1",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+};
+var CloseIcon = function(_param) {
+    var _param_width = _param.width, width = _param_width === void 0 ? 24 : _param_width, _param_height = _param.height, height = _param_height === void 0 ? 24 : _param_height, props = _object_without_properties(_param, [
+        "width",
+        "height"
+    ]);
+    return /*#__PURE__*/ jsxs("svg", _object_spread_props(_object_spread({
+        width: width,
+        height: height,
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M18 6L6 18",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M6 6L18 18",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        ]
+    }));
+};
 
-export { ArrowLeftIcon, ArrowRightIcon, BookingTypesIcon, BookingsIcon, CalendarIcon, ClearIcon, CustomersIcon, EditIcon, ExportIcon, ExternalLinkIcon, InfoIcon, LoyaltyIcon, MarketingIcon, RefreshIcon, SearchIcon, SendIcon, SettingsIcon, WaiversIcon };
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BookingTypesIcon, BookingsIcon, CalendarIcon, ClearIcon, CloseIcon, CustomersIcon, EditIcon, ExportIcon, ExternalLinkIcon, InfoIcon, LoyaltyIcon, MarketingIcon, RefreshIcon, SearchIcon, SendIcon, SettingsIcon, WaiversIcon };

package/dist/v2/pages/Settings/components/SidebarCustomisation.js

@@ -6,29 +6,25 @@ import { CalendarIcon, BookingsIcon, BookingTypesIcon, LoyaltyIcon, CustomersIco
 import '../../../components/Badge/Badge.scss.js';
 import '../../../components/QuickFilter/QuickFilter.scss.js';
 import '../../../components/NewTable/NewTable.scss.js';
-import '../../../components/NewInput/NewInput.js';
-import '../../../components/Pagination/Pagination.scss.js';
-import '../../../components/Customer/CustomersList.scss.js';
-import { Button } from '../../../components/Button/Button.js';
-import '../../../components/NewPageHeader/NewPageHeader.scss.js';
-import '@licklist/plugins/dist/context/app/AlertContext';
-import '../../../components/Select/Select.scss.js';
-import '../../../components/Checkbox/Checkbox.js';
-import 'react-i18next';
-import '../../../components/Customer/CustomerDetail/CustomerDetail.scss.js';
 import 'react-icons/fa';
 import '../../../components/ActionMenu/ActionMenu.scss.js';
 import '../../../components/Modal/DeleteModal.scss.js';
+import '../../../components/NewInput/NewInput.js';
 import '../../../components/FormField/FormField.js';
+import '../../../components/Checkbox/Checkbox.js';
 import '../../../components/WYSIWYGEditor/WYSIWYGEditor.scss.js';
+import { Button } from '../../../components/Button/Button.js';
+import '../../../components/NewPageHeader/NewPageHeader.scss.js';
 import '../../../components/SectionHeader/SectionHeader.scss.js';
-import { GhostButton } from '../../../components/Button/GhostButton.js';
+import '../../../components/Select/Select.scss.js';
 import '../../../components/Tooltip/Tooltip.js';
 import '../../../components/UserAvatar/UserAvatar.scss.js';
 import '../../../components/UserPanel/UserPanel.scss.js';
 import '../../../components/EntityHeader/EntityHeader.scss.js';
 import '../../../components/Alert/Alert.scss.js';
 import '../../../components/NPSScore/NPSScore.scss.js';
+import '../../../components/Pagination/Pagination.scss.js';
+import { GhostButton } from '../../../components/Button/GhostButton.js';
 
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;

package/dist/v2/pages/Settings/components/SidebarNavItem.js

@@ -3,29 +3,24 @@ import 'react';
 import '../../../components/Badge/Badge.scss.js';
 import '../../../components/QuickFilter/QuickFilter.scss.js';
 import '../../../components/NewTable/NewTable.scss.js';
-import '../../../components/NewInput/NewInput.js';
-import '../../../components/Pagination/Pagination.scss.js';
-import '../../../components/Customer/CustomersList.scss.js';
-import '../../../components/Button/Button.scss.js';
-import '../../../components/NewPageHeader/NewPageHeader.scss.js';
-import '@licklist/plugins/dist/context/app/AlertContext';
-import '../../../components/Select/Select.scss.js';
-import '../../../components/Checkbox/Checkbox.js';
-import 'react-i18next';
-import '../../../components/Customer/CustomerDetail/CustomerDetail.scss.js';
 import 'react-icons/fa';
 import '../../../components/ActionMenu/ActionMenu.scss.js';
 import '../../../components/Modal/DeleteModal.scss.js';
+import '../../../components/NewInput/NewInput.js';
 import { FormField } from '../../../components/FormField/FormField.js';
+import '../../../components/Checkbox/Checkbox.js';
 import '../../../components/WYSIWYGEditor/WYSIWYGEditor.scss.js';
+import '../../../components/Button/Button.scss.js';
+import '../../../components/NewPageHeader/NewPageHeader.scss.js';
 import '../../../components/SectionHeader/SectionHeader.scss.js';
-import '../../../components/Button/GhostButton.scss.js';
+import '../../../components/Select/Select.scss.js';
 import '../../../components/Tooltip/Tooltip.js';
 import '../../../components/UserAvatar/UserAvatar.scss.js';
 import '../../../components/UserPanel/UserPanel.scss.js';
 import '../../../components/EntityHeader/EntityHeader.scss.js';
 import '../../../components/Alert/Alert.scss.js';
 import '../../../components/NPSScore/NPSScore.scss.js';
+import '../../../components/Pagination/Pagination.scss.js';
 import './SidebarNavItem.scss.js';
 
 var SidebarNavItem = function(param) {

package/dist/v2/styles/components/Button.scss

@@ -8,7 +8,7 @@
   align-self: flex-start;
   text-align: center;
   align-items: center;
-  font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
   font-weight: 600;
   line-height: 20px;
   min-height: 44px;
@@ -79,6 +79,28 @@
     }
   }
 
+  // Secondary - Soft
+  &--secondary-soft {
+    background: var(--surface-action-soft, #EFE6FD);
+    color: var(--label-action, #6200EE);
+
+    &:hover {
+      background: var(--surface-tertiary, #F0F0F5);
+    }
+  }
+
+
+  // Tertiary - Soft
+  &--tertiary-soft {
+    background: #FFFFFF;
+    color: var(--label-primary, #121E52);
+    border: 1px solid var(--border-primary, #E8E9EF);
+
+    &:hover {
+      background: var(--surface-tertiary, #F0F0F5);
+    }
+  }
+
   // Destructive - Soft
   &--destructive-soft {
     border-radius: var(--radius-reg, 8px);
@@ -138,8 +160,18 @@
   }
 
   /* Button text styling */
+  &__spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(0, 0, 0, 0.1);
+    border-top: 2px solid currentColor;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    flex-shrink: 0;
+  }
+
   &__text {
-    font-family: 'Geist', sans-serif;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
     font-size: 15px;
     font-style: normal;
     font-weight: 600;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.54",
+  "version": "0.78.5-dev.56",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"

package/src/v2/components/ActionMenu/ActionMenu.scss

@@ -12,15 +12,25 @@
     padding: 8px;
     justify-content: center;
     align-items: center;
-    border-radius: 8px;
+    border-radius: 50%;
     border: 1px solid var(--border-primary, #E8E9EF);
-    background: var(--surface-primary, #FFF);
+    background: var(--surface-action-soft);
     color: var(--actions-regular, #5D5BF4);
     cursor: pointer;
     transition: all 0.2s ease;
 
     &:hover {
-      background: var(--surface-primary-hover, #F8F8FA);
+      background: var(--surface-action-soft);
+    }
+
+    &--close {
+      border-radius: 50%;
+      background: #F4F4FE;
+      border: 1px solid #F4F4FE;
+
+      &:hover {
+        background: #E8E8FD;
+      }
     }
 
     svg {
@@ -31,7 +41,7 @@
 
   &__dropdown {
     position: absolute;
-    top: calc(100% + 4px);
+    bottom: calc(100% + 4px);
     right: 0;
     z-index: 1000;
     display: flex;
@@ -40,11 +50,12 @@
     align-items: flex-start;
     border-radius: 12px;
     background: var(--surface-primary, #FFF);
-    box-shadow: 0px 4px 20px 0px rgba(18, 30, 82, 0.15);
+    box-shadow: 0 4px 20px 0 rgba(18, 30, 82, 0.15);
     overflow: hidden;
     border: 1px solid var(--border-primary, #E8E9EF);
   }
 
+
   &__item {
     display: flex;
     padding: 12px 16px;

package/src/v2/components/ActionMenu/ActionMenu.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react'
 import { FaEllipsisH } from 'react-icons/fa'
+import { CloseIcon } from '../../icons'
 import './ActionMenu.scss'
 
 export interface ActionMenuItem {
@@ -11,9 +12,10 @@ export interface ActionMenuItem {
 export interface ActionMenuProps {
   items: ActionMenuItem[]
   className?: string
+  iconColour?: string
 }
 
-export const ActionMenu: React.FC<ActionMenuProps> = ({ items, className = '' }) => {
+export const ActionMenu: React.FC<ActionMenuProps> = ({ items, className = '', iconColour = '' }) => {
   const [isOpen, setIsOpen] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
 
@@ -36,11 +38,12 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({ items, className = '' })
   return (
     <div className={`action-menu ${className}`} ref={menuRef}>
       <button
-        className="action-menu__trigger"
+        className={`action-menu__trigger ${isOpen ? 'action-menu__trigger--close' : ''}`}
         onClick={() => setIsOpen(!isOpen)}
         aria-expanded={isOpen}
+        style={{ color: iconColour }}
       >
-        <FaEllipsisH />
+        {isOpen ? <CloseIcon width={16} height={16} /> : <FaEllipsisH />}
       </button>
 
       {isOpen && (

package/src/v2/components/Button/Button.tsx

@@ -2,14 +2,16 @@ import { ButtonHTMLAttributes } from 'react'
 import './Button.scss'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'primary-soft' | 'primary-outline' | 'secondary' | 'destructive-soft' | 'destructive-strong' | 'info' | 'disabled'
+  variant?: 'primary' | 'primary-soft' | 'secondary-soft' | 'tertiary-soft' | 'primary-outline' | 'secondary' | 'destructive-soft' | 'destructive-strong' | 'info' | 'disabled'
   size?: 'sm' | 'md' | 'lg'
+  isLoading?: boolean
 }
 
 export function Button({
   variant = 'primary',
   size = 'md',
   disabled = false,
+  isLoading = false,
   className = '',
   children,
   ...props
@@ -17,7 +19,7 @@ export function Button({
   const classes = [
     'new-button',
     `new-button--${variant}`,
-    disabled ? 'new-button--disabled' : '',
+    disabled || isLoading ? 'new-button--disabled' : '',
     className
   ].filter(Boolean).join(' ')
 
@@ -28,9 +30,10 @@ export function Button({
   return (
     <button
       className={classes}
-      disabled={disabled}
+      disabled={disabled || isLoading}
       {...props}
     >
+      {isLoading && <div className="new-button__spinner" />}
       {content}
     </button>
   )

package/src/v2/components/Customer/{CustomerDetail/CustomerDetail.scss → CustomerDetail.scss}

@@ -199,13 +199,16 @@
     }
 
     &__badges-row {
-      flex-direction: column;
-      align-items: flex-start;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
       gap: 12px;
+      width: 100%;
     }
 
     &__badges {
       flex-wrap: wrap;
+      flex: 1;
     }
 
     &__id-badge {
@@ -216,7 +219,8 @@
     &__edit {
       font-size: 13px;
       padding: 6px 12px;
-      align-self: flex-start;
+      align-self: center;
+      margin-left: auto;
     }
 
     &__grid {