@licklist/design 0.78.29 → 0.78.31

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

@@ -1,5 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
+import { FormField } from '../../../components/FormField/FormField.js';
+import '../../../components/NewInput/NewInput.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/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 './SidebarNavItem.scss.js';
 
 var SidebarNavItem = function(param) {
@@ -23,10 +37,9 @@ var SidebarNavItem = function(param) {
                     ]
                 })
             }),
-            /*#__PURE__*/ jsx("input", {
+            /*#__PURE__*/ jsx(FormField, {
                 type: "text",
                 id: id,
-                className: "sidebar-nav-item__input ".concat(disabled ? 'sidebar-nav-item__input--disabled' : ''),
                 value: label,
                 onChange: function(e) {
                     return onLabelChange === null || onLabelChange === void 0 ? void 0 : onLabelChange(id, e.target.value);

package/dist/v2/styles/form/NewInput.scss.js

@@ -0,0 +1,6 @@
+import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ":root{--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;--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;--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;--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}.new-form-input{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.new-form-input__label{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-style:normal;font-weight:600;line-height:20px}.new-form-input__label-optional{color:var(--labels-main-label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-xs-size,11px);font-weight:400;line-height:var(--text-xs-line,14px);text-align:right}.new-form-input__label-row{align-items:center;display:flex;gap:var(--spacing-reg,16px);justify-content:space-between;width:100%}.new-form-input__input{background-color:var(--surfaces-main-background-secondary);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);color:var(--labels-main-label-primary,#121e52);flex:1 0 0;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);line-height:var(--text-regular-line);min-height:40px;padding:8px 10px;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__input{font-size:16px}}.new-form-input__input:focus{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__textarea{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px);min-height:120px;padding:8px 10px;resize:vertical;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__textarea{font-size:16px}}.new-form-input__textarea:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__textarea::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon{align-items:center;background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);display:flex;gap:var(--spacing-sm,8px);min-height:40px;padding:5px}.new-form-input__input-with-icon input{background:#0000;border:none;color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}@media (max-width:768px){.new-form-input__input-with-icon input{font-size:16px}}.new-form-input__input-with-icon input:focus{outline:none}.new-form-input__input-with-icon input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon .icon{flex-shrink:0;height:22px;width:22px}.new-form-input__verification-code{display:flex;gap:var(--spacing-sm,8px);height:62px}.new-form-input__verification-code .code-input{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-lg-size,18px);font-weight:var(--heading-h3-weight,600);text-align:center;transition:all .2s ease}.new-form-input__verification-code .code-input:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__helper-text{color:var(--label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);font-style:normal;font-weight:400;line-height:var(--text-regular-line,20px);margin-top:2px;min-width:max-content;white-space:nowrap}@media (max-width:768px){.new-form-input__helper-text{word-wrap:break-word;min-width:unset;white-space:normal}}.new-form-input__error-text{color:var(--labels-status-label-error,#ef4444);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:11px;font-style:normal;font-weight:400;line-height:14px;margin-top:2px}.new-form-input--active .new-form-input__input{border-color:var(--border-selected,#6200ee)}.new-form-input--error .new-form-input__input{border-color:var(--borders-status-border-error,#ef4444)}.new-form-input--disabled{opacity:var(--opacity-50,.5);pointer-events:none}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/package.json

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

package/src/index.ts

@@ -46,6 +46,7 @@ export * from './pages'
 export { default as RadioButton } from './customRadioButton/RadioButton'
 export * from './PageNotFound'
 export * from './UnderMaintenance'
+export * from './v2/components'
 export * from './v2/dashboard-analytics'
 export * from './v2/navigation/DashboardLayout'
 export * from './v2/pages/Settings'

package/src/styles/iframe-page/Page.scss

@@ -109,7 +109,7 @@
   }
 
   @include media-breakpoint-down(sm) {
-    padding: 0.5rem 0 0;
+    padding: var(--container-padding-mobile, 16px) 0 0;
     background-size: 100% 3.5rem;
     background-color: $snippet-page-body-left-block-background-color;
 
@@ -118,7 +118,7 @@
     }
 
     .header-block {
-      padding: 0 0.5rem 0.5rem;
+      padding: 0 var(--container-padding-mobile, 16px) var(--container-padding-mobile, 16px);
       margin-bottom: 0;
     }
 

package/src/v2/navigation/DashboardLayout/DashboardLayout.scss

@@ -54,6 +54,11 @@
     &__content {
         flex: 1;
         overflow-y: auto;
+
+        @media (max-width: 768px) {
+            padding-left: var(--container-padding-mobile, 16px);
+            padding-right: var(--container-padding-mobile, 16px);
+        }
     }
 
     &__overlay {

package/src/v2/pages/Settings/components/SidebarCustomisation.scss

@@ -69,7 +69,7 @@
       width: 20px;
       height: 20px;
       flex-shrink: 0;
-      fill: var(--fill-primary);
+      color: var(--fill-primary);
     }
 
     &:hover {

package/src/v2/pages/Settings/components/SidebarCustomisation.tsx

@@ -12,6 +12,7 @@ import {
   SettingsIcon,
   EditIcon,
 } from '../../../icons'
+import { Button } from 'src/v2/components'
 
 export interface SidebarItem {
   id: string
@@ -31,6 +32,7 @@ export interface SidebarCustomisationProps {
 
 // Default sidebar items - IDs must match useProviderNavigation.tsx
 export const defaultSidebarItems: SidebarItem[] = [
+  { id: 'home', label: 'Home', icon: null, visible: true },
   { id: 'events', label: 'Dates & Events', icon: <CalendarIcon />, visible: true },
   { id: 'sales', label: 'Bookings & Enquiries', icon: <BookingsIcon />, visible: true },
   { id: 'product-sets', label: 'Booking Types', icon: <BookingTypesIcon />, visible: true },
@@ -53,8 +55,8 @@ export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
   const [isEditing, setIsEditing] = useState(false)
 
   useEffect(() => {
-    setItems(initialItems)
     if (!isEditing) {
+      setItems(initialItems)
       setItemsBeforeEdit(initialItems)
     }
   }, [initialItems, isEditing])
@@ -74,12 +76,17 @@ export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
   }
 
   const handleReset = () => {
-    // Reset to defaults in UI - parent handles the actual default values
+    const resetItems = items.map((item) => {
+      const defaultItem = defaultSidebarItems.find((d) => d.id === item.id)
+      return defaultItem ? { ...item, label: defaultItem.label } : item
+    })
+    setItems(resetItems)
     onReset?.()
   }
 
   const handleCancel = () => {
     setItems(itemsBeforeEdit)
+    onItemsChange?.(itemsBeforeEdit)
     onCancel?.()
     setIsEditing(false)
   }
@@ -132,13 +139,12 @@ export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
           </div>
 
           <div className="sidebar-customisation__actions">
-            <button
+            <Button
               type="button"
-              className="sidebar-customisation__save-btn"
               onClick={handleSave}
             >
               Save Changes
-            </button>
+            </Button>
             <button
               type="button"
               className="sidebar-customisation__reset-btn"

package/src/v2/pages/Settings/components/SidebarNavItem.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { FormField } from 'src/v2/components'
 import './SidebarNavItem.scss'
 
 export interface SidebarNavItemProps {
@@ -36,10 +37,9 @@ export const SidebarNavItem: React.FC<SidebarNavItemProps> = ({
           </span>
         </div>
       </div>
-      <input
+      <FormField
         type="text"
         id={id}
-        className={`sidebar-nav-item__input ${disabled ? 'sidebar-nav-item__input--disabled' : ''}`}
         value={label}
         onChange={(e) => onLabelChange?.(id, e.target.value)}
         disabled={disabled}

package/src/v2/styles/tokens/_sizes.scss

@@ -24,6 +24,9 @@
     --spacing-xxl: 64px;
     --spacing-super: 128px;
 
+    /* Layout tokens - Container insets */
+    --container-padding-mobile: 16px;
+
     /* Opacity tokens - Transparency values */
     --opacity-0: 0;
     --opacity-10: 0.1;