@licklist/design 0.78.45 → 0.78.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/v2/components/Button/Button.d.ts +1 -1
- package/dist/v2/components/Button/Button.d.ts.map +1 -1
- package/dist/v2/components/Button/Button.scss.js +1 -1
- package/dist/v2/components/PeriodCard/PeriodCard.d.ts +66 -0
- package/dist/v2/components/PeriodCard/PeriodCard.d.ts.map +1 -0
- package/dist/v2/components/PeriodCard/PeriodCard.js +351 -0
- package/dist/v2/components/PeriodCard/PeriodCard.scss.js +6 -0
- package/dist/v2/components/PeriodCard/index.d.ts +3 -0
- package/dist/v2/components/PeriodCard/index.d.ts.map +1 -0
- package/dist/v2/components/ReorderRow/ReorderRow.d.ts +24 -0
- package/dist/v2/components/ReorderRow/ReorderRow.d.ts.map +1 -0
- package/dist/v2/components/ReorderRow/ReorderRow.js +109 -0
- package/dist/v2/components/ReorderRow/ReorderRow.scss.js +6 -0
- package/dist/v2/components/ReorderRow/index.d.ts +3 -0
- package/dist/v2/components/ReorderRow/index.d.ts.map +1 -0
- package/dist/v2/components/index.d.ts +4 -0
- package/dist/v2/components/index.d.ts.map +1 -1
- package/dist/v2/index.d.ts +6 -0
- package/dist/v2/index.d.ts.map +1 -1
- package/dist/v2/pages/DeleteEntity/DeleteEntityPage.d.ts +29 -0
- package/dist/v2/pages/DeleteEntity/DeleteEntityPage.d.ts.map +1 -0
- package/dist/v2/pages/DeleteEntity/DeleteEntityPage.js +294 -0
- package/dist/v2/pages/DeleteEntity/DeleteEntityPage.scss.js +6 -0
- package/dist/v2/pages/DeleteEntity/index.d.ts +3 -0
- package/dist/v2/pages/DeleteEntity/index.d.ts.map +1 -0
- package/dist/v2/pages/Settings/components/SidebarCustomisation.js +2 -0
- package/dist/v2/pages/Settings/components/SidebarNavItem.js +2 -0
- package/dist/v2/pages/SettingsSubPage/SettingsSubPage.js +47 -0
- package/dist/v2/pages/SettingsSubPage/SettingsSubPage.scss.js +6 -0
- package/dist/v2/styles/components/Button.scss +27 -0
- package/package.json +1 -1
- package/src/index.ts +2 -0
- package/src/v2/components/Button/Button.tsx +1 -0
- package/src/v2/components/PeriodCard/PeriodCard.scss +157 -0
- package/src/v2/components/PeriodCard/PeriodCard.stories.tsx +245 -0
- package/src/v2/components/PeriodCard/PeriodCard.tsx +350 -0
- package/src/v2/components/PeriodCard/index.ts +8 -0
- package/src/v2/components/ReorderRow/ReorderRow.scss +68 -0
- package/src/v2/components/ReorderRow/ReorderRow.stories.tsx +124 -0
- package/src/v2/components/ReorderRow/ReorderRow.tsx +88 -0
- package/src/v2/components/ReorderRow/index.ts +2 -0
- package/src/v2/components/index.ts +6 -0
- package/src/v2/index.ts +13 -0
- package/src/v2/pages/DeleteEntity/DeleteEntityPage.scss +96 -0
- package/src/v2/pages/DeleteEntity/DeleteEntityPage.stories.tsx +83 -0
- package/src/v2/pages/DeleteEntity/DeleteEntityPage.tsx +120 -0
- package/src/v2/pages/DeleteEntity/index.ts +2 -0
- package/src/v2/styles/components/Button.scss +27 -0
package/dist/index.d.ts
CHANGED
|
@@ -51,5 +51,7 @@ export * from './v2/dashboard-analytics';
|
|
|
51
51
|
export * from './v2/navigation/DashboardLayout';
|
|
52
52
|
export * from './v2/pages/Settings';
|
|
53
53
|
export * from './v2/pages/ZonesResources';
|
|
54
|
+
export * from './v2/pages/SettingsSubPage';
|
|
55
|
+
export * from './v2/pages/DeleteEntity';
|
|
54
56
|
export * from './v2/components';
|
|
55
57
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC1D,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,wBAAwB,CAAA;AACtC,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAA;AACxE,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC1D,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,wBAAwB,CAAA;AACtC,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,SAAS,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iCAAiC,CAAA;AACxE,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,iBAAiB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -237,6 +237,8 @@ export { ZoneContainer } from './v2/components/ZoneCard/ZoneContainer.js';
|
|
|
237
237
|
export { ZoneHeader } from './v2/components/ZoneCard/ZoneHeader.js';
|
|
238
238
|
export { ResourceRow } from './v2/components/ZoneCard/ResourceRow.js';
|
|
239
239
|
export { AddResourceButton } from './v2/components/ZoneCard/AddResourceButton.js';
|
|
240
|
+
export { PeriodCard, PeriodCardSection, PeriodCardTimeRange } from './v2/components/PeriodCard/PeriodCard.js';
|
|
241
|
+
export { ReorderRow } from './v2/components/ReorderRow/ReorderRow.js';
|
|
240
242
|
export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BookingTypesIcon, BookingsIcon, CalendarIcon, CircleIcon, ClearIcon, ClockIcon, CloseIcon, DeleteIcon, EditIcon, EllipsisIcon, ExportIcon, ExternalLinkIcon, GripVerticalIcon, InfoIcon, LocationIcon, PadlockIcon, PlusIcon, RefreshIcon, ReorderIcon, SearchIcon, SendIcon, SettingsPageDashboardIcon, SettingsPageWaiversIcon, TableHeaderArrowDownIcon, TableHeaderArrowUpIcon, VenueIcon } from './v2/icons/index.js';
|
|
241
243
|
export { MetricCard } from './v2/dashboard-analytics/metric-card/MetricCard.js';
|
|
242
244
|
export { VenueCard } from './v2/dashboard-analytics/venue-card/VenueCard.js';
|
|
@@ -254,6 +256,8 @@ export { SettingsTabs } from './v2/pages/Settings/SettingsTabs.js';
|
|
|
254
256
|
export { SidebarCustomisation, defaultSidebarItems } from './v2/pages/Settings/components/SidebarCustomisation.js';
|
|
255
257
|
export { SidebarNavItem } from './v2/pages/Settings/components/SidebarNavItem.js';
|
|
256
258
|
export { ZonesResourcesPage } from './v2/pages/ZonesResources/ZonesResourcesPage.js';
|
|
259
|
+
export { SettingsSubPage } from './v2/pages/SettingsSubPage/SettingsSubPage.js';
|
|
260
|
+
export { DeleteEntityPage } from './v2/pages/DeleteEntity/DeleteEntityPage.js';
|
|
257
261
|
export { default as CountrySelect } from './static/CountrySelect.js';
|
|
258
262
|
export { default as FormCard } from './static/FormCard.js';
|
|
259
263
|
export { default as Image } from './static/Image.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes } from 'react';
|
|
2
2
|
import './Button.scss';
|
|
3
3
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
4
|
-
variant?: 'primary' | 'primary-soft' | 'secondary-soft' | 'tertiary-soft' | 'primary-outline' | 'secondary' | 'destructive-soft' | 'destructive-strong' | 'info' | 'disabled';
|
|
4
|
+
variant?: 'primary' | 'primary-soft' | 'secondary-soft' | 'tertiary-soft' | 'primary-outline' | 'outline' | 'secondary' | 'destructive-soft' | 'destructive-strong' | 'info' | 'disabled';
|
|
5
5
|
size?: 'sm' | 'md' | 'lg';
|
|
6
6
|
isLoading?: boolean;
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,eAAe,CAAA;AAEtB,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EACJ,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,iBAAiB,GACjB,WAAW,GACX,kBAAkB,GAClB,oBAAoB,GACpB,MAAM,GACN,UAAU,CAAA;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAI,EAAE,KAAY,EAClB,QAAgB,EAChB,SAAiB,EACjB,SAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAuBb;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;CAChE;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,KAAK,EAAE,EAAE,eAAe,2CAY9E"}
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,eAAe,CAAA;AAEtB,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EACJ,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,iBAAiB,GACjB,SAAS,GACT,WAAW,GACX,kBAAkB,GAClB,oBAAoB,GACpB,MAAM,GACN,UAAU,CAAA;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAI,EAAE,KAAY,EAClB,QAAgB,EAChB,SAAiB,EACjB,SAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAuBb;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;CAChE;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,KAAK,EAAE,EAAE,eAAe,2CAY9E"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".new-button{align-items:center;align-self:flex-start;border:none;border-radius:8px;cursor:pointer;display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-weight:600;gap:var(--spacing-sm);justify-content:center;line-height:20px;min-height:44px;padding:12px 24px;text-align:center;transition:all .2s ease;white-space:nowrap}.new-button--primary{background:#6200ee;color:#fff}.new-button--primary:active,.new-button--primary:focus,.new-button--primary:hover{background:#360083}.new-button--primary-soft{background:#efeffe;color:#5d5bf4}.new-button--primary-soft:hover{background:#cdccfc}.new-button--primary-soft:active{background:#b4b4fa}.new-button--primary-outline{background-color:initial;border:2px solid var(--fills-main-fill-action,#6200ee);color:var(--labels-main-label-action,#6200ee)}.new-button--primary-outline:hover{border:2px solid var(--fills-main-fill-action,#6200ee)}.new-button--primary-outline:active,.new-button--primary-outline:hover{background-color:var(--surfaces-main-background-action-soft,#efe6fd)}.new-button--secondary{background:var(--surface-action-soft);border-radius:var(--sizes-radius-radius,8px);color:var(--label-action)}.new-button--secondary:active,.new-button--secondary:focus,.new-button--secondary:hover{background:#efe6fd}.new-button--secondary-soft{background:var(--surface-action-soft,#efe6fd);color:var(--label-action,#6200ee)}.new-button--secondary-soft:hover{background:var(--surface-tertiary,#f0f0f5)}.new-button--tertiary-soft{background:#fff;border:1px solid var(--border-primary,#e8e9ef);color:var(--label-primary,#121e52)}.new-button--tertiary-soft:hover{background:var(--surface-tertiary,#f0f0f5)}.new-button--destructive-soft{background:var(--surface-danger-soft,#fceceb);border-radius:var(--radius-reg,8px);color:var(--label-danger)}.new-button--destructive-soft:hover{background-color:var(--surface-danger-soft-hover,#f5c4c2)}.new-button--destructive-soft:active{background-color:var(--surface-danger-soft-pressed,#e66861);color:var(--label-white,#fff)}.new-button--destructive-strong{background:linear-gradient(180deg,#fff3 0,var(--red-red) 5.77%,var(--red-red-dark) 95.19%,var(--red-red-darkest) 100%),linear-gradient(180deg,var(--red-red-lighter) 0,var(--red-red-darkest) 100%),linear-gradient(90deg,var(--red-red-dark) 0,var(--red-red-dark) 100%);color:var(--labels-main-label-white,#fff)}.new-button--destructive-strong:active,.new-button--destructive-strong:hover{background-color:var(--fills-main-fill-danger,#cc3c35)}.new-button--info{background-color:var(--surfaces-status-background-info,#e7f4fc);color:var(--labels-status-label-info,#0d7fce)}.new-button--disabled,.new-button:disabled{background-color:var(--surfaces-status-background-disabled,#d2d5e3);color:var(--labels-status-label-disabled,#9399b3);cursor:not-allowed;pointer-events:none}.new-button__spinner{animation:spin 1s linear infinite;border:2px solid #0000001a;border-radius:50%;border-top-color:currentcolor;flex-shrink:0;height:16px;width:16px}.new-button__text{font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-style:normal;font-weight:600;line-height:20px;text-align:center}.new-button__text--primary{color:var(--label-primary)}.new-button__text--secondary{color:var(--label-secondary)}.new-button__text--danger{color:var(--label-danger)}.new-button__text--white{color:var(--label-white)}.new-button__text--action{color:var(--label-action)}.new-button p{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.new-button--sm{font-size:var(--text-sm-size,13px);padding:var(--spacing-xs,2px) var(--spacing-md,8px)}.new-button--md{font-size:var(--text-reg-size,15px);padding:var(--spacing-sm,8px) var(--spacing-reg,16px)}.new-button--lg{font-size:var(--text-large-size,18px);padding:var(--spacing-reg,16px) var(--spacing-lg,24px)}";
|
|
3
|
+
var css_248z = ".new-button{align-items:center;align-self:flex-start;border:none;border-radius:8px;cursor:pointer;display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-weight:600;gap:var(--spacing-sm);justify-content:center;line-height:20px;min-height:44px;padding:12px 24px;text-align:center;transition:all .2s ease;white-space:nowrap}.new-button--primary{background:#6200ee;color:#fff}.new-button--primary:active,.new-button--primary:focus,.new-button--primary:hover{background:#360083}.new-button--primary-soft{background:#efeffe;color:#5d5bf4}.new-button--primary-soft:hover{background:#cdccfc}.new-button--primary-soft:active{background:#b4b4fa}.new-button--outline{background-color:var(--surface-primary,#fff);border:1px solid var(--border-primary,#e8e9ef);border-radius:6px;color:var(--label-primary,#121e52);font-size:14px;font-weight:500;line-height:20px;min-height:40px;padding:8px 16px 8px 12px}.new-button--outline svg{fill:currentColor;flex-shrink:0}.new-button--outline:hover{background-color:var(--surface-secondary,#f8f8fa);border-color:var(--border-secondary,#d0d3e3)}.new-button--outline:active{background-color:var(--surface-tertiary,#f0f0f5)}.new-button--primary-outline{background-color:initial;border:2px solid var(--fills-main-fill-action,#6200ee);color:var(--labels-main-label-action,#6200ee)}.new-button--primary-outline:hover{border:2px solid var(--fills-main-fill-action,#6200ee)}.new-button--primary-outline:active,.new-button--primary-outline:hover{background-color:var(--surfaces-main-background-action-soft,#efe6fd)}.new-button--secondary{background:var(--surface-action-soft);border-radius:var(--sizes-radius-radius,8px);color:var(--label-action)}.new-button--secondary:active,.new-button--secondary:focus,.new-button--secondary:hover{background:#efe6fd}.new-button--secondary-soft{background:var(--surface-action-soft,#efe6fd);color:var(--label-action,#6200ee)}.new-button--secondary-soft:hover{background:var(--surface-tertiary,#f0f0f5)}.new-button--tertiary-soft{background:#fff;border:1px solid var(--border-primary,#e8e9ef);color:var(--label-primary,#121e52)}.new-button--tertiary-soft:hover{background:var(--surface-tertiary,#f0f0f5)}.new-button--destructive-soft{background:var(--surface-danger-soft,#fceceb);border-radius:var(--radius-reg,8px);color:var(--label-danger)}.new-button--destructive-soft:hover{background-color:var(--surface-danger-soft-hover,#f5c4c2)}.new-button--destructive-soft:active{background-color:var(--surface-danger-soft-pressed,#e66861);color:var(--label-white,#fff)}.new-button--destructive-strong{background:linear-gradient(180deg,#fff3 0,var(--red-red) 5.77%,var(--red-red-dark) 95.19%,var(--red-red-darkest) 100%),linear-gradient(180deg,var(--red-red-lighter) 0,var(--red-red-darkest) 100%),linear-gradient(90deg,var(--red-red-dark) 0,var(--red-red-dark) 100%);color:var(--labels-main-label-white,#fff)}.new-button--destructive-strong:active,.new-button--destructive-strong:hover{background-color:var(--fills-main-fill-danger,#cc3c35)}.new-button--info{background-color:var(--surfaces-status-background-info,#e7f4fc);color:var(--labels-status-label-info,#0d7fce)}.new-button--disabled,.new-button:disabled{background-color:var(--surfaces-status-background-disabled,#d2d5e3);color:var(--labels-status-label-disabled,#9399b3);cursor:not-allowed;pointer-events:none}.new-button__spinner{animation:spin 1s linear infinite;border:2px solid #0000001a;border-radius:50%;border-top-color:currentcolor;flex-shrink:0;height:16px;width:16px}.new-button__text{font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-style:normal;font-weight:600;line-height:20px;text-align:center}.new-button__text--primary{color:var(--label-primary)}.new-button__text--secondary{color:var(--label-secondary)}.new-button__text--danger{color:var(--label-danger)}.new-button__text--white{color:var(--label-white)}.new-button__text--action{color:var(--label-action)}.new-button p{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.new-button--sm{font-size:var(--text-sm-size,13px);padding:var(--spacing-xs,2px) var(--spacing-md,8px)}.new-button--md{font-size:var(--text-reg-size,15px);padding:var(--spacing-sm,8px) var(--spacing-reg,16px)}.new-button--lg{font-size:var(--text-large-size,18px);padding:var(--spacing-reg,16px) var(--spacing-lg,24px)}";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './PeriodCard.scss';
|
|
3
|
+
export interface PeriodCardValue {
|
|
4
|
+
days: string[];
|
|
5
|
+
is24Hours: boolean;
|
|
6
|
+
startTime?: string;
|
|
7
|
+
endTime?: string;
|
|
8
|
+
maxCapacity: number;
|
|
9
|
+
minCapacity: number | null;
|
|
10
|
+
}
|
|
11
|
+
export interface PeriodCardLabels {
|
|
12
|
+
badge?: string;
|
|
13
|
+
sectionTitle?: string;
|
|
14
|
+
minValue?: string;
|
|
15
|
+
maxValue?: string;
|
|
16
|
+
days?: string;
|
|
17
|
+
time?: string;
|
|
18
|
+
alignToggle?: string;
|
|
19
|
+
startTime?: string;
|
|
20
|
+
endTime?: string;
|
|
21
|
+
}
|
|
22
|
+
export interface PeriodCardProps {
|
|
23
|
+
/** Controlled value for built-in sections. Not needed when using children. */
|
|
24
|
+
value?: PeriodCardValue;
|
|
25
|
+
/** Called when built-in sections change. Not needed when using children. */
|
|
26
|
+
onChange?: (value: PeriodCardValue) => void;
|
|
27
|
+
onDelete?: () => void;
|
|
28
|
+
labels?: PeriodCardLabels;
|
|
29
|
+
dayLabels?: string[];
|
|
30
|
+
/** Plain text title rendered at the top (e.g. "Period 1"). Mutually exclusive with badge header. */
|
|
31
|
+
title?: string;
|
|
32
|
+
/** Hide the badge + delete header row (useful with title) */
|
|
33
|
+
hideHeader?: boolean;
|
|
34
|
+
/** Hide the min/max capacity section */
|
|
35
|
+
hideCapacity?: boolean;
|
|
36
|
+
/** Hide the days selection section */
|
|
37
|
+
hideDays?: boolean;
|
|
38
|
+
/** Hide the time section */
|
|
39
|
+
hideTime?: boolean;
|
|
40
|
+
/** Make the min value field optional (shows "(optional)" label) */
|
|
41
|
+
minOptional?: boolean;
|
|
42
|
+
/** Custom icon for the badge. Defaults to ClockIcon */
|
|
43
|
+
badgeIcon?: React.ReactNode;
|
|
44
|
+
/** Custom content. When provided, built-in sections (capacity, days, time) are not rendered. */
|
|
45
|
+
children?: React.ReactNode;
|
|
46
|
+
className?: string;
|
|
47
|
+
}
|
|
48
|
+
export declare const PeriodCard: React.FC<PeriodCardProps>;
|
|
49
|
+
export interface PeriodCardSectionProps {
|
|
50
|
+
label?: string;
|
|
51
|
+
children: React.ReactNode;
|
|
52
|
+
className?: string;
|
|
53
|
+
}
|
|
54
|
+
export declare const PeriodCardSection: React.FC<PeriodCardSectionProps>;
|
|
55
|
+
export interface PeriodCardTimeRangeProps {
|
|
56
|
+
startTime: string;
|
|
57
|
+
endTime: string;
|
|
58
|
+
onStartTimeChange: (value: string) => void;
|
|
59
|
+
onEndTimeChange: (value: string) => void;
|
|
60
|
+
startLabel?: string;
|
|
61
|
+
endLabel?: string;
|
|
62
|
+
separator?: string;
|
|
63
|
+
className?: string;
|
|
64
|
+
}
|
|
65
|
+
export declare const PeriodCardTimeRange: React.FC<PeriodCardTimeRangeProps>;
|
|
66
|
+
//# sourceMappingURL=PeriodCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PeriodCard.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/PeriodCard/PeriodCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,mBAAmB,CAAA;AAE1B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAwBD,MAAM,WAAW,eAAe;IAC9B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,oGAAoG;IACpG,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,uDAAuD;IACvD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,gGAAgG;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0LhD,CAAA;AAID,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAW9D,CAAA;AAID,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyBlE,CAAA"}
|
|
@@ -0,0 +1,351 @@
|
|
|
1
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import 'react';
|
|
3
|
+
import { NewInput } from '../NewInput/NewInput.js';
|
|
4
|
+
import { Checkbox } from '../Checkbox/Checkbox.js';
|
|
5
|
+
import { IconButton } from '../IconButton/IconButton.js';
|
|
6
|
+
import { ClockIcon } from '../../icons/index.js';
|
|
7
|
+
import './PeriodCard.scss.js';
|
|
8
|
+
|
|
9
|
+
function _array_like_to_array(arr, len) {
|
|
10
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
11
|
+
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
12
|
+
return arr2;
|
|
13
|
+
}
|
|
14
|
+
function _array_without_holes(arr) {
|
|
15
|
+
if (Array.isArray(arr)) return _array_like_to_array(arr);
|
|
16
|
+
}
|
|
17
|
+
function _define_property(obj, key, value) {
|
|
18
|
+
if (key in obj) {
|
|
19
|
+
Object.defineProperty(obj, key, {
|
|
20
|
+
value: value,
|
|
21
|
+
enumerable: true,
|
|
22
|
+
configurable: true,
|
|
23
|
+
writable: true
|
|
24
|
+
});
|
|
25
|
+
} else {
|
|
26
|
+
obj[key] = value;
|
|
27
|
+
}
|
|
28
|
+
return obj;
|
|
29
|
+
}
|
|
30
|
+
function _iterable_to_array(iter) {
|
|
31
|
+
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
32
|
+
}
|
|
33
|
+
function _non_iterable_spread() {
|
|
34
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
35
|
+
}
|
|
36
|
+
function _object_spread(target) {
|
|
37
|
+
for(var i = 1; i < arguments.length; i++){
|
|
38
|
+
var source = arguments[i] != null ? arguments[i] : {};
|
|
39
|
+
var ownKeys = Object.keys(source);
|
|
40
|
+
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
41
|
+
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
42
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
45
|
+
ownKeys.forEach(function(key) {
|
|
46
|
+
_define_property(target, key, source[key]);
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
return target;
|
|
50
|
+
}
|
|
51
|
+
function _to_consumable_array(arr) {
|
|
52
|
+
return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
|
|
53
|
+
}
|
|
54
|
+
function _unsupported_iterable_to_array(o, minLen) {
|
|
55
|
+
if (!o) return;
|
|
56
|
+
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
57
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
58
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
59
|
+
if (n === "Map" || n === "Set") return Array.from(n);
|
|
60
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
61
|
+
}
|
|
62
|
+
var DEFAULT_LABELS = {
|
|
63
|
+
badge: 'Period',
|
|
64
|
+
sectionTitle: 'Override',
|
|
65
|
+
minValue: 'Min',
|
|
66
|
+
maxValue: 'Max',
|
|
67
|
+
days: 'Days',
|
|
68
|
+
time: 'Time',
|
|
69
|
+
alignToggle: 'Align with Opening Hours',
|
|
70
|
+
startTime: 'Start Time',
|
|
71
|
+
endTime: 'End Time'
|
|
72
|
+
};
|
|
73
|
+
var DAY_OPTIONS = [
|
|
74
|
+
'Monday',
|
|
75
|
+
'Tuesday',
|
|
76
|
+
'Wednesday',
|
|
77
|
+
'Thursday',
|
|
78
|
+
'Friday',
|
|
79
|
+
'Saturday',
|
|
80
|
+
'Sunday'
|
|
81
|
+
];
|
|
82
|
+
var PeriodCard = function(param) {
|
|
83
|
+
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;
|
|
84
|
+
var labels = _object_spread({}, DEFAULT_LABELS, labelsProp);
|
|
85
|
+
var days = dayLabels || DAY_OPTIONS;
|
|
86
|
+
var hasChildren = !!children;
|
|
87
|
+
var updateField = function(updates) {
|
|
88
|
+
if (value && onChange) {
|
|
89
|
+
onChange(_object_spread({}, value, updates));
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
var toggleDay = function(day) {
|
|
93
|
+
if (!value) return;
|
|
94
|
+
var current = value.days || [];
|
|
95
|
+
var updated = current.includes(day) ? current.filter(function(d) {
|
|
96
|
+
return d !== day;
|
|
97
|
+
}) : _to_consumable_array(current).concat([
|
|
98
|
+
day
|
|
99
|
+
]);
|
|
100
|
+
updateField({
|
|
101
|
+
days: updated
|
|
102
|
+
});
|
|
103
|
+
};
|
|
104
|
+
var toggleAlignHours = function(checked) {
|
|
105
|
+
if (checked) {
|
|
106
|
+
updateField({
|
|
107
|
+
is24Hours: true,
|
|
108
|
+
startTime: undefined,
|
|
109
|
+
endTime: undefined
|
|
110
|
+
});
|
|
111
|
+
} else {
|
|
112
|
+
updateField({
|
|
113
|
+
is24Hours: false,
|
|
114
|
+
startTime: '09:00',
|
|
115
|
+
endTime: '17:00'
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
var leftDays = days.slice(0, 4);
|
|
120
|
+
var rightDays = days.slice(4);
|
|
121
|
+
var _value_is24Hours;
|
|
122
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
123
|
+
className: "period-card ".concat(className),
|
|
124
|
+
children: [
|
|
125
|
+
title && /*#__PURE__*/ jsxs("div", {
|
|
126
|
+
className: "period-card__title-row",
|
|
127
|
+
children: [
|
|
128
|
+
/*#__PURE__*/ jsx("span", {
|
|
129
|
+
className: "period-card__title",
|
|
130
|
+
children: title
|
|
131
|
+
}),
|
|
132
|
+
onDelete && /*#__PURE__*/ jsx(IconButton, {
|
|
133
|
+
icon: "delete",
|
|
134
|
+
onClick: onDelete
|
|
135
|
+
})
|
|
136
|
+
]
|
|
137
|
+
}),
|
|
138
|
+
!hideHeader && !title && /*#__PURE__*/ jsxs("div", {
|
|
139
|
+
className: "period-card__header",
|
|
140
|
+
children: [
|
|
141
|
+
/*#__PURE__*/ jsxs("div", {
|
|
142
|
+
className: "period-card__badge-group",
|
|
143
|
+
children: [
|
|
144
|
+
badgeIcon || /*#__PURE__*/ jsx(ClockIcon, {
|
|
145
|
+
width: 20,
|
|
146
|
+
height: 20
|
|
147
|
+
}),
|
|
148
|
+
/*#__PURE__*/ jsx("span", {
|
|
149
|
+
className: "period-card__badge",
|
|
150
|
+
children: labels.badge
|
|
151
|
+
})
|
|
152
|
+
]
|
|
153
|
+
}),
|
|
154
|
+
onDelete && /*#__PURE__*/ jsx(IconButton, {
|
|
155
|
+
icon: "delete",
|
|
156
|
+
onClick: onDelete
|
|
157
|
+
})
|
|
158
|
+
]
|
|
159
|
+
}),
|
|
160
|
+
hasChildren ? children : /*#__PURE__*/ jsxs(Fragment, {
|
|
161
|
+
children: [
|
|
162
|
+
!hideCapacity && value && /*#__PURE__*/ jsxs("div", {
|
|
163
|
+
className: "period-card__section",
|
|
164
|
+
children: [
|
|
165
|
+
/*#__PURE__*/ jsx("label", {
|
|
166
|
+
className: "period-card__section-label",
|
|
167
|
+
children: labels.sectionTitle
|
|
168
|
+
}),
|
|
169
|
+
/*#__PURE__*/ jsxs("div", {
|
|
170
|
+
className: "period-card__row",
|
|
171
|
+
children: [
|
|
172
|
+
/*#__PURE__*/ jsx(NewInput, {
|
|
173
|
+
label: labels.minValue,
|
|
174
|
+
optional: minOptional,
|
|
175
|
+
type: "number",
|
|
176
|
+
min: 0,
|
|
177
|
+
value: value.minCapacity === null || value.minCapacity === 0 ? '' : value.minCapacity,
|
|
178
|
+
onChange: function(e) {
|
|
179
|
+
return updateField({
|
|
180
|
+
minCapacity: e.target.value === '' ? null : parseInt(e.target.value, 10) || 0
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
}),
|
|
184
|
+
/*#__PURE__*/ jsx(NewInput, {
|
|
185
|
+
label: labels.maxValue,
|
|
186
|
+
type: "number",
|
|
187
|
+
min: 1,
|
|
188
|
+
value: value.maxCapacity === 0 ? '' : value.maxCapacity,
|
|
189
|
+
onChange: function(e) {
|
|
190
|
+
return updateField({
|
|
191
|
+
maxCapacity: e.target.value === '' ? 0 : parseInt(e.target.value, 10) || 0
|
|
192
|
+
});
|
|
193
|
+
}
|
|
194
|
+
})
|
|
195
|
+
]
|
|
196
|
+
})
|
|
197
|
+
]
|
|
198
|
+
}),
|
|
199
|
+
!hideDays && value && /*#__PURE__*/ jsxs("div", {
|
|
200
|
+
className: "period-card__section",
|
|
201
|
+
children: [
|
|
202
|
+
/*#__PURE__*/ jsx("label", {
|
|
203
|
+
className: "period-card__section-label",
|
|
204
|
+
children: labels.days
|
|
205
|
+
}),
|
|
206
|
+
/*#__PURE__*/ jsxs("div", {
|
|
207
|
+
className: "period-card__days-grid",
|
|
208
|
+
children: [
|
|
209
|
+
/*#__PURE__*/ jsx("div", {
|
|
210
|
+
className: "period-card__days-col",
|
|
211
|
+
children: leftDays.map(function(day) {
|
|
212
|
+
var _value_days;
|
|
213
|
+
return /*#__PURE__*/ jsx(DayCheckbox, {
|
|
214
|
+
label: day,
|
|
215
|
+
checked: ((_value_days = value.days) === null || _value_days === void 0 ? void 0 : _value_days.includes(day)) || false,
|
|
216
|
+
onChange: function() {
|
|
217
|
+
return toggleDay(day);
|
|
218
|
+
}
|
|
219
|
+
}, day);
|
|
220
|
+
})
|
|
221
|
+
}),
|
|
222
|
+
/*#__PURE__*/ jsx("div", {
|
|
223
|
+
className: "period-card__days-col",
|
|
224
|
+
children: rightDays.map(function(day) {
|
|
225
|
+
var _value_days;
|
|
226
|
+
return /*#__PURE__*/ jsx(DayCheckbox, {
|
|
227
|
+
label: day,
|
|
228
|
+
checked: ((_value_days = value.days) === null || _value_days === void 0 ? void 0 : _value_days.includes(day)) || false,
|
|
229
|
+
onChange: function() {
|
|
230
|
+
return toggleDay(day);
|
|
231
|
+
}
|
|
232
|
+
}, day);
|
|
233
|
+
})
|
|
234
|
+
})
|
|
235
|
+
]
|
|
236
|
+
})
|
|
237
|
+
]
|
|
238
|
+
}),
|
|
239
|
+
!hideTime && value && /*#__PURE__*/ jsxs("div", {
|
|
240
|
+
className: "period-card__section",
|
|
241
|
+
children: [
|
|
242
|
+
/*#__PURE__*/ jsx("label", {
|
|
243
|
+
className: "period-card__section-label",
|
|
244
|
+
children: labels.time
|
|
245
|
+
}),
|
|
246
|
+
/*#__PURE__*/ jsx(Checkbox, {
|
|
247
|
+
label: labels.alignToggle,
|
|
248
|
+
checked: (_value_is24Hours = value.is24Hours) !== null && _value_is24Hours !== void 0 ? _value_is24Hours : true,
|
|
249
|
+
onChange: function(e) {
|
|
250
|
+
return toggleAlignHours(e.target.checked);
|
|
251
|
+
}
|
|
252
|
+
}),
|
|
253
|
+
!value.is24Hours && /*#__PURE__*/ jsxs("div", {
|
|
254
|
+
className: "period-card__row period-card__row--time",
|
|
255
|
+
children: [
|
|
256
|
+
/*#__PURE__*/ jsx(NewInput, {
|
|
257
|
+
label: labels.startTime,
|
|
258
|
+
type: "time",
|
|
259
|
+
value: value.startTime || '09:00',
|
|
260
|
+
onChange: function(e) {
|
|
261
|
+
return updateField({
|
|
262
|
+
startTime: e.target.value
|
|
263
|
+
});
|
|
264
|
+
}
|
|
265
|
+
}),
|
|
266
|
+
/*#__PURE__*/ jsx(NewInput, {
|
|
267
|
+
label: labels.endTime,
|
|
268
|
+
type: "time",
|
|
269
|
+
value: value.endTime || '17:00',
|
|
270
|
+
onChange: function(e) {
|
|
271
|
+
return updateField({
|
|
272
|
+
endTime: e.target.value
|
|
273
|
+
});
|
|
274
|
+
}
|
|
275
|
+
})
|
|
276
|
+
]
|
|
277
|
+
})
|
|
278
|
+
]
|
|
279
|
+
})
|
|
280
|
+
]
|
|
281
|
+
})
|
|
282
|
+
]
|
|
283
|
+
});
|
|
284
|
+
};
|
|
285
|
+
var PeriodCardSection = function(param) {
|
|
286
|
+
var label = param.label, children = param.children, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className;
|
|
287
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
288
|
+
className: "period-card__section ".concat(className),
|
|
289
|
+
children: [
|
|
290
|
+
label && /*#__PURE__*/ jsx("label", {
|
|
291
|
+
className: "period-card__section-label",
|
|
292
|
+
children: label
|
|
293
|
+
}),
|
|
294
|
+
children
|
|
295
|
+
]
|
|
296
|
+
});
|
|
297
|
+
};
|
|
298
|
+
PeriodCardSection.displayName = 'PeriodCardSection';
|
|
299
|
+
var PeriodCardTimeRange = function(param) {
|
|
300
|
+
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;
|
|
301
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
302
|
+
className: "period-card__time-range ".concat(className),
|
|
303
|
+
children: [
|
|
304
|
+
/*#__PURE__*/ jsx(NewInput, {
|
|
305
|
+
label: startLabel,
|
|
306
|
+
type: "time",
|
|
307
|
+
value: startTime,
|
|
308
|
+
onChange: function(e) {
|
|
309
|
+
return onStartTimeChange(e.target.value);
|
|
310
|
+
}
|
|
311
|
+
}),
|
|
312
|
+
/*#__PURE__*/ jsx("span", {
|
|
313
|
+
className: "period-card__time-separator",
|
|
314
|
+
children: separator
|
|
315
|
+
}),
|
|
316
|
+
/*#__PURE__*/ jsx(NewInput, {
|
|
317
|
+
label: endLabel,
|
|
318
|
+
type: "time",
|
|
319
|
+
value: endTime,
|
|
320
|
+
onChange: function(e) {
|
|
321
|
+
return onEndTimeChange(e.target.value);
|
|
322
|
+
}
|
|
323
|
+
})
|
|
324
|
+
]
|
|
325
|
+
});
|
|
326
|
+
};
|
|
327
|
+
PeriodCardTimeRange.displayName = 'PeriodCardTimeRange';
|
|
328
|
+
var DayCheckbox = function(param) {
|
|
329
|
+
var label = param.label, checked = param.checked, onChange = param.onChange;
|
|
330
|
+
return /*#__PURE__*/ jsxs("label", {
|
|
331
|
+
className: "day-checkbox",
|
|
332
|
+
children: [
|
|
333
|
+
/*#__PURE__*/ jsx("input", {
|
|
334
|
+
type: "checkbox",
|
|
335
|
+
className: "day-checkbox__input",
|
|
336
|
+
checked: checked,
|
|
337
|
+
onChange: onChange
|
|
338
|
+
}),
|
|
339
|
+
/*#__PURE__*/ jsx("span", {
|
|
340
|
+
className: "day-checkbox__box"
|
|
341
|
+
}),
|
|
342
|
+
/*#__PURE__*/ jsx("span", {
|
|
343
|
+
className: "day-checkbox__label",
|
|
344
|
+
children: label
|
|
345
|
+
})
|
|
346
|
+
]
|
|
347
|
+
});
|
|
348
|
+
};
|
|
349
|
+
PeriodCard.displayName = 'PeriodCard';
|
|
350
|
+
|
|
351
|
+
export { PeriodCard, PeriodCardSection, PeriodCardTimeRange };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
|
|
2
|
+
|
|
3
|
+
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}";
|
|
4
|
+
styleInject(css_248z);
|
|
5
|
+
|
|
6
|
+
export { css_248z as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/PeriodCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AACjF,YAAY,EACV,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,cAAc,CAAA"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import './ReorderRow.scss';
|
|
3
|
+
export interface DragHandleRenderProps {
|
|
4
|
+
/** Spread onto the drag handle element for dnd-kit or similar */
|
|
5
|
+
attributes?: HTMLAttributes<HTMLElement>;
|
|
6
|
+
listeners?: Record<string, Function> | undefined;
|
|
7
|
+
}
|
|
8
|
+
export interface ReorderRowProps {
|
|
9
|
+
label: string;
|
|
10
|
+
subtitle?: string;
|
|
11
|
+
/** Render prop for the drag handle — receives attributes/listeners to spread */
|
|
12
|
+
dragHandleProps?: DragHandleRenderProps;
|
|
13
|
+
/** Hide the drag handle (e.g. when not in reorder mode) */
|
|
14
|
+
hideDragHandle?: boolean;
|
|
15
|
+
/** Content between the drag handle and label (e.g. color dot, icon) */
|
|
16
|
+
leftContent?: React.ReactNode;
|
|
17
|
+
/** Right-side content (e.g. action menu, capacity badge) */
|
|
18
|
+
rightContent?: React.ReactNode;
|
|
19
|
+
onClick?: () => void;
|
|
20
|
+
className?: string;
|
|
21
|
+
style?: React.CSSProperties;
|
|
22
|
+
}
|
|
23
|
+
export declare const ReorderRow: React.ForwardRefExoticComponent<ReorderRowProps & React.RefAttributes<HTMLDivElement>>;
|
|
24
|
+
//# sourceMappingURL=ReorderRow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ReorderRow.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/ReorderRow/ReorderRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,mBAAmB,CAAA;AAE1B,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IAExC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAA;CACjD;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gFAAgF;IAChF,eAAe,CAAC,EAAE,qBAAqB,CAAA;IACvC,2DAA2D;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,uEAAuE;IACvE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED,eAAO,MAAM,UAAU,wFA0DtB,CAAA"}
|