@licklist/design 0.78.7-stage.84 → 0.78.7-stage.85

package/dist/index.js

@@ -225,6 +225,7 @@ export { SidebarCustomisation, defaultSidebarItems } from './v2/pages/Settings/c
 export { SidebarNavItem } from './v2/pages/Settings/components/SidebarNavItem.js';
 export { ZonesResourcesPage } from './v2/pages/ZonesResources/ZonesResourcesPage.js';
 export { SettingsSubPage } from './v2/pages/SettingsSubPage/SettingsSubPage.js';
+export { DeleteEntityPage } from './v2/pages/DeleteEntity/DeleteEntityPage.js';
 export { IconButton } from './v2/components/IconButton/IconButton.js';
 export { Badge } from './v2/components/Badge/Badge.js';
 export { QuickFilter } from './v2/components/QuickFilter/QuickFilter.js';
@@ -255,6 +256,8 @@ export { ZoneContainer } from './v2/components/ZoneCard/ZoneContainer.js';
 export { ZoneHeader } from './v2/components/ZoneCard/ZoneHeader.js';
 export { ResourceRow } from './v2/components/ZoneCard/ResourceRow.js';
 export { AddResourceButton } from './v2/components/ZoneCard/AddResourceButton.js';
+export { PeriodCard, PeriodCardSection, PeriodCardTimeRange } from './v2/components/PeriodCard/PeriodCard.js';
+export { ReorderRow } from './v2/components/ReorderRow/ReorderRow.js';
 export { default as CountrySelect } from './static/CountrySelect.js';
 export { default as FormCard } from './static/FormCard.js';
 export { default as Image } from './static/Image.js';

package/dist/v2/components/PeriodCard/PeriodCard.js

@@ -0,0 +1,351 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import 'react';
+import { NewInput } from '../NewInput/NewInput.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { ClockIcon } from '../../icons/index.js';
+import './PeriodCard.scss.js';
+
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+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 _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+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 _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var DEFAULT_LABELS = {
+    badge: 'Period',
+    sectionTitle: 'Override',
+    minValue: 'Min',
+    maxValue: 'Max',
+    days: 'Days',
+    time: 'Time',
+    alignToggle: 'Align with Opening Hours',
+    startTime: 'Start Time',
+    endTime: 'End Time'
+};
+var DAY_OPTIONS = [
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+    'Sunday'
+];
+var PeriodCard = function(param) {
+    var value = param.value, onChange = param.onChange, onDelete = param.onDelete, labelsProp = param.labels, dayLabels = param.dayLabels, title = param.title, _param_hideHeader = param.hideHeader, hideHeader = _param_hideHeader === void 0 ? false : _param_hideHeader, _param_hideCapacity = param.hideCapacity, hideCapacity = _param_hideCapacity === void 0 ? false : _param_hideCapacity, _param_hideDays = param.hideDays, hideDays = _param_hideDays === void 0 ? false : _param_hideDays, _param_hideTime = param.hideTime, hideTime = _param_hideTime === void 0 ? false : _param_hideTime, _param_minOptional = param.minOptional, minOptional = _param_minOptional === void 0 ? true : _param_minOptional, badgeIcon = param.badgeIcon, children = param.children, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className;
+    var labels = _object_spread({}, DEFAULT_LABELS, labelsProp);
+    var days = dayLabels || DAY_OPTIONS;
+    var hasChildren = !!children;
+    var updateField = function(updates) {
+        if (value && onChange) {
+            onChange(_object_spread({}, value, updates));
+        }
+    };
+    var toggleDay = function(day) {
+        if (!value) return;
+        var current = value.days || [];
+        var updated = current.includes(day) ? current.filter(function(d) {
+            return d !== day;
+        }) : _to_consumable_array(current).concat([
+            day
+        ]);
+        updateField({
+            days: updated
+        });
+    };
+    var toggleAlignHours = function(checked) {
+        if (checked) {
+            updateField({
+                is24Hours: true,
+                startTime: undefined,
+                endTime: undefined
+            });
+        } else {
+            updateField({
+                is24Hours: false,
+                startTime: '09:00',
+                endTime: '17:00'
+            });
+        }
+    };
+    var leftDays = days.slice(0, 4);
+    var rightDays = days.slice(4);
+    var _value_is24Hours;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "period-card ".concat(className),
+        children: [
+            title && /*#__PURE__*/ jsxs("div", {
+                className: "period-card__title-row",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "period-card__title",
+                        children: title
+                    }),
+                    onDelete && /*#__PURE__*/ jsx(IconButton, {
+                        icon: "delete",
+                        onClick: onDelete
+                    })
+                ]
+            }),
+            !hideHeader && !title && /*#__PURE__*/ jsxs("div", {
+                className: "period-card__header",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "period-card__badge-group",
+                        children: [
+                            badgeIcon || /*#__PURE__*/ jsx(ClockIcon, {
+                                width: 20,
+                                height: 20
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "period-card__badge",
+                                children: labels.badge
+                            })
+                        ]
+                    }),
+                    onDelete && /*#__PURE__*/ jsx(IconButton, {
+                        icon: "delete",
+                        onClick: onDelete
+                    })
+                ]
+            }),
+            hasChildren ? children : /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    !hideCapacity && value && /*#__PURE__*/ jsxs("div", {
+                        className: "period-card__section",
+                        children: [
+                            /*#__PURE__*/ jsx("label", {
+                                className: "period-card__section-label",
+                                children: labels.sectionTitle
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "period-card__row",
+                                children: [
+                                    /*#__PURE__*/ jsx(NewInput, {
+                                        label: labels.minValue,
+                                        optional: minOptional,
+                                        type: "number",
+                                        min: 0,
+                                        value: value.minCapacity === null || value.minCapacity === 0 ? '' : value.minCapacity,
+                                        onChange: function(e) {
+                                            return updateField({
+                                                minCapacity: e.target.value === '' ? null : parseInt(e.target.value, 10) || 0
+                                            });
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsx(NewInput, {
+                                        label: labels.maxValue,
+                                        type: "number",
+                                        min: 1,
+                                        value: value.maxCapacity === 0 ? '' : value.maxCapacity,
+                                        onChange: function(e) {
+                                            return updateField({
+                                                maxCapacity: e.target.value === '' ? 0 : parseInt(e.target.value, 10) || 0
+                                            });
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    !hideDays && value && /*#__PURE__*/ jsxs("div", {
+                        className: "period-card__section",
+                        children: [
+                            /*#__PURE__*/ jsx("label", {
+                                className: "period-card__section-label",
+                                children: labels.days
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "period-card__days-grid",
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "period-card__days-col",
+                                        children: leftDays.map(function(day) {
+                                            var _value_days;
+                                            return /*#__PURE__*/ jsx(DayCheckbox, {
+                                                label: day,
+                                                checked: ((_value_days = value.days) === null || _value_days === void 0 ? void 0 : _value_days.includes(day)) || false,
+                                                onChange: function() {
+                                                    return toggleDay(day);
+                                                }
+                                            }, day);
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "period-card__days-col",
+                                        children: rightDays.map(function(day) {
+                                            var _value_days;
+                                            return /*#__PURE__*/ jsx(DayCheckbox, {
+                                                label: day,
+                                                checked: ((_value_days = value.days) === null || _value_days === void 0 ? void 0 : _value_days.includes(day)) || false,
+                                                onChange: function() {
+                                                    return toggleDay(day);
+                                                }
+                                            }, day);
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    !hideTime && value && /*#__PURE__*/ jsxs("div", {
+                        className: "period-card__section",
+                        children: [
+                            /*#__PURE__*/ jsx("label", {
+                                className: "period-card__section-label",
+                                children: labels.time
+                            }),
+                            /*#__PURE__*/ jsx(Checkbox, {
+                                label: labels.alignToggle,
+                                checked: (_value_is24Hours = value.is24Hours) !== null && _value_is24Hours !== void 0 ? _value_is24Hours : true,
+                                onChange: function(e) {
+                                    return toggleAlignHours(e.target.checked);
+                                }
+                            }),
+                            !value.is24Hours && /*#__PURE__*/ jsxs("div", {
+                                className: "period-card__row period-card__row--time",
+                                children: [
+                                    /*#__PURE__*/ jsx(NewInput, {
+                                        label: labels.startTime,
+                                        type: "time",
+                                        value: value.startTime || '09:00',
+                                        onChange: function(e) {
+                                            return updateField({
+                                                startTime: e.target.value
+                                            });
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsx(NewInput, {
+                                        label: labels.endTime,
+                                        type: "time",
+                                        value: value.endTime || '17:00',
+                                        onChange: function(e) {
+                                            return updateField({
+                                                endTime: e.target.value
+                                            });
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+var PeriodCardSection = function(param) {
+    var label = param.label, children = param.children, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "period-card__section ".concat(className),
+        children: [
+            label && /*#__PURE__*/ jsx("label", {
+                className: "period-card__section-label",
+                children: label
+            }),
+            children
+        ]
+    });
+};
+PeriodCardSection.displayName = 'PeriodCardSection';
+var PeriodCardTimeRange = function(param) {
+    var startTime = param.startTime, endTime = param.endTime, onStartTimeChange = param.onStartTimeChange, onEndTimeChange = param.onEndTimeChange, startLabel = param.startLabel, endLabel = param.endLabel, _param_separator = param.separator, separator = _param_separator === void 0 ? 'to' : _param_separator, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "period-card__time-range ".concat(className),
+        children: [
+            /*#__PURE__*/ jsx(NewInput, {
+                label: startLabel,
+                type: "time",
+                value: startTime,
+                onChange: function(e) {
+                    return onStartTimeChange(e.target.value);
+                }
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "period-card__time-separator",
+                children: separator
+            }),
+            /*#__PURE__*/ jsx(NewInput, {
+                label: endLabel,
+                type: "time",
+                value: endTime,
+                onChange: function(e) {
+                    return onEndTimeChange(e.target.value);
+                }
+            })
+        ]
+    });
+};
+PeriodCardTimeRange.displayName = 'PeriodCardTimeRange';
+var DayCheckbox = function(param) {
+    var label = param.label, checked = param.checked, onChange = param.onChange;
+    return /*#__PURE__*/ jsxs("label", {
+        className: "day-checkbox",
+        children: [
+            /*#__PURE__*/ jsx("input", {
+                type: "checkbox",
+                className: "day-checkbox__input",
+                checked: checked,
+                onChange: onChange
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "day-checkbox__box"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "day-checkbox__label",
+                children: label
+            })
+        ]
+    });
+};
+PeriodCard.displayName = 'PeriodCard';
+
+export { PeriodCard, PeriodCardSection, PeriodCardTimeRange };

package/dist/v2/components/PeriodCard/PeriodCard.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 = ".period-card{background:var(--surface-secondary,#f5f6fa);border-radius:8px;display:flex;flex-direction:column;gap:16px;padding:16px}.period-card__title-row{align-items:center;display:flex;justify-content:space-between}.period-card__title{color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans);font-size:16px;font-weight:600}.period-card__header{align-items:center;display:flex;justify-content:space-between}.period-card__badge-group{align-items:center;color:var(--label-secondary,#6b7a99);display:flex;gap:8px}.period-card__badge{border:1px solid var(--border-primary,#e2e2e2);border-radius:999px;color:var(--label-secondary,#6b7a99);font-family:var(--font-family-sans);font-size:12px;padding:2px 10px}.period-card__section{display:flex;flex-direction:column;gap:8px}.period-card__section-label{color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans);font-size:14px;font-weight:600}.period-card__row{display:grid;gap:16px;grid-template-columns:1fr 1fr}@media (max-width:768px){.period-card__row{gap:12px;grid-template-columns:1fr}}.period-card__row--time{margin-top:8px}.period-card__days-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}.period-card__days-col{display:flex;flex-direction:column;gap:8px}.period-card__time-range{align-items:end;display:grid;gap:12px;grid-template-columns:1fr auto 1fr}@media (max-width:768px){.period-card__time-range{gap:8px;grid-template-columns:1fr}}.period-card__time-separator{color:var(--label-secondary,#6b7a99);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:14px;padding-bottom:10px}.day-checkbox{align-items:center;cursor:pointer;display:flex;gap:6px;-webkit-user-select:none;user-select:none}.day-checkbox__input{height:0;opacity:0;position:absolute;width:0}.day-checkbox__box{background:var(--surface-primary,#fff);border:1px solid var(--border-primary,#e2e2e2);border-radius:3px;height:16px;min-width:16px;position:relative;transition:all .15s ease;width:16px}.day-checkbox__box:after{border:solid #fff;border-width:0 2px 2px 0;content:\"\";height:9px;left:4.5px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);width:5px}.day-checkbox__input:checked+.day-checkbox__box{background:var(--fill-selected,#14215a);border-color:var(--fill-selected,#14215a)}.day-checkbox__input:checked+.day-checkbox__box:after{opacity:1}.day-checkbox__label{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:14px}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/dist/v2/components/ReorderRow/ReorderRow.js

@@ -0,0 +1,109 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { GripVerticalIcon } from '../../icons/index.js';
+import './ReorderRow.scss.js';
+
+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;
+}
+var ReorderRow = /*#__PURE__*/ React__default.forwardRef(function(param, ref) {
+    var label = param.label, subtitle = param.subtitle, dragHandleProps = param.dragHandleProps, _param_hideDragHandle = param.hideDragHandle, hideDragHandle = _param_hideDragHandle === void 0 ? false : _param_hideDragHandle, leftContent = param.leftContent, rightContent = param.rightContent, onClick = param.onClick, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, style = param.style;
+    var handleKeyDown = onClick ? function(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick();
+        }
+    } : undefined;
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        style: style,
+        className: "reorder-row ".concat(onClick ? 'reorder-row--clickable' : '', " ").concat(className),
+        onClick: onClick,
+        onKeyDown: handleKeyDown,
+        role: onClick ? 'button' : undefined,
+        tabIndex: onClick ? 0 : undefined,
+        children: [
+            !hideDragHandle && /*#__PURE__*/ jsx("div", _object_spread_props(_object_spread({
+                className: "reorder-row__drag-handle"
+            }, dragHandleProps === null || dragHandleProps === void 0 ? void 0 : dragHandleProps.attributes, dragHandleProps === null || dragHandleProps === void 0 ? void 0 : dragHandleProps.listeners), {
+                children: GripVerticalIcon({
+                    width: 20,
+                    height: 20
+                })
+            })),
+            leftContent && /*#__PURE__*/ jsx("div", {
+                className: "reorder-row__left",
+                children: leftContent
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "reorder-row__content",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "reorder-row__label",
+                        children: label
+                    }),
+                    subtitle && /*#__PURE__*/ jsx("span", {
+                        className: "reorder-row__subtitle",
+                        children: subtitle
+                    })
+                ]
+            }),
+            rightContent && /*#__PURE__*/ jsx("div", {
+                className: "reorder-row__right",
+                children: rightContent
+            })
+        ]
+    });
+});
+ReorderRow.displayName = 'ReorderRow';
+
+export { ReorderRow };

package/dist/v2/components/ReorderRow/ReorderRow.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 = ".reorder-row{align-items:center;background:var(--surface-secondary,#f5f6fa);border-radius:8px;display:flex;gap:12px;padding:12px 16px}.reorder-row--clickable{cursor:pointer}.reorder-row--clickable:hover{background:var(--surface-secondary-hover,#edeef3)}.reorder-row__drag-handle{align-items:center;color:var(--label-secondary,#6b7a99);cursor:grab;display:flex;flex-shrink:0}.reorder-row__drag-handle:active{cursor:grabbing}.reorder-row__left{align-items:center;display:flex;flex-shrink:0}.reorder-row__content{display:flex;flex:1;flex-direction:column;min-width:0}.reorder-row__label{color:var(--label-primary,#121e52);font-size:14px;font-weight:600;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reorder-row__label,.reorder-row__subtitle{font-family:var(--font-family-sans,\"Geist\",system-ui,sans-serif)}.reorder-row__subtitle{color:var(--label-secondary,#6b7a99);font-size:13px;font-weight:400;line-height:16px;margin-top:2px}.reorder-row__right{align-items:center;display:flex;flex-shrink:0;gap:8px}";
+styleInject(css_248z);
+
+export { css_248z as default };