@genesislcap/foundation-zero 14.240.0 → 14.241.0
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/custom-elements.json +27 -2564
- package/package.json +14 -32
- package/dist/dts/accordion/accordion.stories.d.ts +0 -5
- package/dist/dts/accordion/accordion.stories.d.ts.map +0 -1
- package/dist/dts/actions-menu/actions-menu.stories.d.ts +0 -6
- package/dist/dts/actions-menu/actions-menu.stories.d.ts.map +0 -1
- package/dist/dts/anchor/anchor.stories.d.ts +0 -5
- package/dist/dts/anchor/anchor.stories.d.ts.map +0 -1
- package/dist/dts/anchored-region/anchored-region.stories.d.ts +0 -5
- package/dist/dts/anchored-region/anchored-region.stories.d.ts.map +0 -1
- package/dist/dts/avatar/avatar.stories.d.ts +0 -5
- package/dist/dts/avatar/avatar.stories.d.ts.map +0 -1
- package/dist/dts/badge/badge.stories.d.ts +0 -5
- package/dist/dts/badge/badge.stories.d.ts.map +0 -1
- package/dist/dts/banner/banner.stories.d.ts +0 -5
- package/dist/dts/banner/banner.stories.d.ts.map +0 -1
- package/dist/dts/breadcrumb/breadcrumb.stories.d.ts +0 -5
- package/dist/dts/breadcrumb/breadcrumb.stories.d.ts.map +0 -1
- package/dist/dts/button/button.stories.d.ts +0 -6
- package/dist/dts/button/button.stories.d.ts.map +0 -1
- package/dist/dts/calendar/calendar.stories.d.ts +0 -5
- package/dist/dts/calendar/calendar.stories.d.ts.map +0 -1
- package/dist/dts/card/card.stories.d.ts +0 -5
- package/dist/dts/card/card.stories.d.ts.map +0 -1
- package/dist/dts/categorized-multiselect/categorized-multiselect.stories.d.ts +0 -5
- package/dist/dts/categorized-multiselect/categorized-multiselect.stories.d.ts.map +0 -1
- package/dist/dts/checkbox/checkbox.stories.d.ts +0 -5
- package/dist/dts/checkbox/checkbox.stories.d.ts.map +0 -1
- package/dist/dts/combobox/combobox.stories.d.ts +0 -5
- package/dist/dts/combobox/combobox.stories.d.ts.map +0 -1
- package/dist/dts/connection-indicator/connection-indicator.stories.d.ts +0 -5
- package/dist/dts/connection-indicator/connection-indicator.stories.d.ts.map +0 -1
- package/dist/dts/data-grid/data-grid.stories.d.ts +0 -5
- package/dist/dts/data-grid/data-grid.stories.d.ts.map +0 -1
- package/dist/dts/date-picker/date-picker.stories.d.ts +0 -5
- package/dist/dts/date-picker/date-picker.stories.d.ts.map +0 -1
- package/dist/dts/dialog/dialog.stories.d.ts +0 -5
- package/dist/dts/dialog/dialog.stories.d.ts.map +0 -1
- package/dist/dts/disclosure/disclosure.stories.d.ts +0 -5
- package/dist/dts/disclosure/disclosure.stories.d.ts.map +0 -1
- package/dist/dts/divider/divider.stories.d.ts +0 -5
- package/dist/dts/divider/divider.stories.d.ts.map +0 -1
- package/dist/dts/dropdown-menu/dropdown-menu.stories.d.ts +0 -5
- package/dist/dts/dropdown-menu/dropdown-menu.stories.d.ts.map +0 -1
- package/dist/dts/error-banner/error-banner.stories.d.ts +0 -5
- package/dist/dts/error-banner/error-banner.stories.d.ts.map +0 -1
- package/dist/dts/error-dialog/error-dialog.stories.d.ts +0 -5
- package/dist/dts/error-dialog/error-dialog.stories.d.ts.map +0 -1
- package/dist/dts/file-upload/file-upload.stories.d.ts +0 -5
- package/dist/dts/file-upload/file-upload.stories.d.ts.map +0 -1
- package/dist/dts/filter/filter.stories.d.ts +0 -5
- package/dist/dts/filter/filter.stories.d.ts.map +0 -1
- package/dist/dts/filter-bar/filter-bar.stories.d.ts +0 -5
- package/dist/dts/filter-bar/filter-bar.stories.d.ts.map +0 -1
- package/dist/dts/flex-layout/flex-layout.stories.d.ts +0 -5
- package/dist/dts/flex-layout/flex-layout.stories.d.ts.map +0 -1
- package/dist/dts/flipper/flipper.stories.d.ts +0 -5
- package/dist/dts/flipper/flipper.stories.d.ts.map +0 -1
- package/dist/dts/flyout/flyout.stories.d.ts +0 -5
- package/dist/dts/flyout/flyout.stories.d.ts.map +0 -1
- package/dist/dts/grid-layout/grid-layout.stories.d.ts +0 -5
- package/dist/dts/grid-layout/grid-layout.stories.d.ts.map +0 -1
- package/dist/dts/horizontal-scroll/horizontal-scroll.stories.d.ts +0 -5
- package/dist/dts/horizontal-scroll/horizontal-scroll.stories.d.ts.map +0 -1
- package/dist/dts/icon/icon.stories.d.ts +0 -7
- package/dist/dts/icon/icon.stories.d.ts.map +0 -1
- package/dist/dts/listbox/listbox.stories.d.ts +0 -5
- package/dist/dts/listbox/listbox.stories.d.ts.map +0 -1
- package/dist/dts/menu/menu.stories.d.ts +0 -5
- package/dist/dts/menu/menu.stories.d.ts.map +0 -1
- package/dist/dts/modal/modal.stories.d.ts +0 -5
- package/dist/dts/modal/modal.stories.d.ts.map +0 -1
- package/dist/dts/multiselect/multiselect.stories.d.ts +0 -12
- package/dist/dts/multiselect/multiselect.stories.d.ts.map +0 -1
- package/dist/dts/number-field/number-field.stories.d.ts +0 -5
- package/dist/dts/number-field/number-field.stories.d.ts.map +0 -1
- package/dist/dts/progress/progress.stories.d.ts +0 -6
- package/dist/dts/progress/progress.stories.d.ts.map +0 -1
- package/dist/dts/progress-ring/progress-ring.stories.d.ts +0 -6
- package/dist/dts/progress-ring/progress-ring.stories.d.ts.map +0 -1
- package/dist/dts/radio/radio.stories.d.ts +0 -5
- package/dist/dts/radio/radio.stories.d.ts.map +0 -1
- package/dist/dts/radio-group/radio-group.stories.d.ts +0 -5
- package/dist/dts/radio-group/radio-group.stories.d.ts.map +0 -1
- package/dist/dts/search-bar/search-bar.stories.d.ts +0 -5
- package/dist/dts/search-bar/search-bar.stories.d.ts.map +0 -1
- package/dist/dts/segmented-control/segmented-control.stories.d.ts +0 -5
- package/dist/dts/segmented-control/segmented-control.stories.d.ts.map +0 -1
- package/dist/dts/select/select.stories.d.ts +0 -5
- package/dist/dts/select/select.stories.d.ts.map +0 -1
- package/dist/dts/skeleton/skeleton.stories.d.ts +0 -5
- package/dist/dts/skeleton/skeleton.stories.d.ts.map +0 -1
- package/dist/dts/slider/slider.stories.d.ts +0 -6
- package/dist/dts/slider/slider.stories.d.ts.map +0 -1
- package/dist/dts/snackbar/snackbar.stories.d.ts +0 -5
- package/dist/dts/snackbar/snackbar.stories.d.ts.map +0 -1
- package/dist/dts/stacking-icons/stacking-icons.stories.d.ts +0 -5
- package/dist/dts/stacking-icons/stacking-icons.stories.d.ts.map +0 -1
- package/dist/dts/stepper/stepper.stories.d.ts +0 -5
- package/dist/dts/stepper/stepper.stories.d.ts.map +0 -1
- package/dist/dts/switch/switch.stories.d.ts +0 -5
- package/dist/dts/switch/switch.stories.d.ts.map +0 -1
- package/dist/dts/tabs/tabs.stories.d.ts +0 -5
- package/dist/dts/tabs/tabs.stories.d.ts.map +0 -1
- package/dist/dts/text-area/text-area.stories.d.ts +0 -5
- package/dist/dts/text-area/text-area.stories.d.ts.map +0 -1
- package/dist/dts/text-field/text-field.stories.d.ts +0 -5
- package/dist/dts/text-field/text-field.stories.d.ts.map +0 -1
- package/dist/dts/toast/toast.stories.d.ts +0 -5
- package/dist/dts/toast/toast.stories.d.ts.map +0 -1
- package/dist/dts/toolbar/toolbar.stories.d.ts +0 -5
- package/dist/dts/toolbar/toolbar.stories.d.ts.map +0 -1
- package/dist/dts/tooltip/tooltip.stories.d.ts +0 -5
- package/dist/dts/tooltip/tooltip.stories.d.ts.map +0 -1
- package/dist/dts/tree-view/tree-view.stories.d.ts +0 -5
- package/dist/dts/tree-view/tree-view.stories.d.ts.map +0 -1
- package/dist/dts/url-input/url-input.stories.d.ts +0 -5
- package/dist/dts/url-input/url-input.stories.d.ts.map +0 -1
- package/dist/esm/accordion/accordion.stories.js +0 -28
- package/dist/esm/actions-menu/actions-menu.stories.js +0 -56
- package/dist/esm/anchor/anchor.stories.js +0 -23
- package/dist/esm/anchored-region/anchored-region.stories.js +0 -29
- package/dist/esm/avatar/avatar.stories.js +0 -30
- package/dist/esm/badge/badge.stories.js +0 -25
- package/dist/esm/banner/banner.stories.js +0 -73
- package/dist/esm/breadcrumb/breadcrumb.stories.js +0 -19
- package/dist/esm/button/button.stories.js +0 -38
- package/dist/esm/calendar/calendar.stories.js +0 -32
- package/dist/esm/card/card.stories.js +0 -23
- package/dist/esm/categorized-multiselect/categorized-multiselect.stories.js +0 -87
- package/dist/esm/checkbox/checkbox.stories.js +0 -26
- package/dist/esm/combobox/combobox.stories.js +0 -53
- package/dist/esm/connection-indicator/connection-indicator.stories.js +0 -14
- package/dist/esm/data-grid/data-grid.stories.js +0 -46
- package/dist/esm/date-picker/date-picker.stories.js +0 -27
- package/dist/esm/dialog/dialog.stories.js +0 -86
- package/dist/esm/disclosure/disclosure.stories.js +0 -31
- package/dist/esm/divider/divider.stories.js +0 -33
- package/dist/esm/dropdown-menu/dropdown-menu.stories.js +0 -68
- package/dist/esm/error-banner/error-banner.stories.js +0 -70
- package/dist/esm/error-dialog/error-dialog.stories.js +0 -63
- package/dist/esm/file-upload/file-upload.stories.js +0 -13
- package/dist/esm/filter/filter.stories.js +0 -17
- package/dist/esm/filter-bar/filter-bar.stories.js +0 -14
- package/dist/esm/flex-layout/flex-layout.stories.js +0 -81
- package/dist/esm/flipper/flipper.stories.js +0 -20
- package/dist/esm/flyout/flyout.stories.js +0 -59
- package/dist/esm/grid-layout/grid-layout.stories.js +0 -251
- package/dist/esm/horizontal-scroll/horizontal-scroll.stories.js +0 -22
- package/dist/esm/icon/icon.stories.js +0 -79
- package/dist/esm/listbox/listbox.stories.js +0 -15
- package/dist/esm/menu/menu.stories.js +0 -26
- package/dist/esm/modal/modal.stories.js +0 -39
- package/dist/esm/multiselect/multiselect.stories.js +0 -207
- package/dist/esm/number-field/number-field.stories.js +0 -26
- package/dist/esm/progress/progress.stories.js +0 -38
- package/dist/esm/progress-ring/progress-ring.stories.js +0 -23
- package/dist/esm/radio/radio.stories.js +0 -11
- package/dist/esm/radio-group/radio-group.stories.js +0 -16
- package/dist/esm/search-bar/search-bar.stories.js +0 -45
- package/dist/esm/segmented-control/segmented-control.stories.js +0 -26
- package/dist/esm/select/select.stories.js +0 -17
- package/dist/esm/skeleton/skeleton.stories.js +0 -35
- package/dist/esm/slider/slider.stories.js +0 -28
- package/dist/esm/snackbar/snackbar.stories.js +0 -95
- package/dist/esm/stacking-icons/stacking-icons.stories.js +0 -53
- package/dist/esm/stepper/stepper.stories.js +0 -30
- package/dist/esm/switch/switch.stories.js +0 -11
- package/dist/esm/tabs/tabs.stories.js +0 -51
- package/dist/esm/text-area/text-area.stories.js +0 -15
- package/dist/esm/text-field/text-field.stories.js +0 -20
- package/dist/esm/toast/toast.stories.js +0 -30
- package/dist/esm/toolbar/toolbar.stories.js +0 -21
- package/dist/esm/tooltip/tooltip.stories.js +0 -14
- package/dist/esm/tree-view/tree-view.stories.js +0 -20
- package/dist/esm/url-input/url-input.stories.js +0 -12
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"slider.stories.d.ts","sourceRoot":"","sources":["../../../src/slider/slider.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QASrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,QAWxB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.stories.d.ts","sourceRoot":"","sources":["../../../src/snackbar/snackbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAgFpB,eAAO,MAAM,OAAO,EAAE,QAarB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stacking-icons.stories.d.ts","sourceRoot":"","sources":["../../../src/stacking-icons/stacking-icons.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAcpB,eAAO,MAAM,YAAY,EAAE,QA2C1B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.stories.d.ts","sourceRoot":"","sources":["../../../src/stepper/stepper.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAuBrB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"switch.stories.d.ts","sourceRoot":"","sources":["../../../src/switch/switch.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAIrB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QA4CrB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"text-area.stories.d.ts","sourceRoot":"","sources":["../../../src/text-area/text-area.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAQrB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.stories.d.ts","sourceRoot":"","sources":["../../../src/text-field/text-field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,eAAO,MAAM,OAAO,EAAE,QAYrB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"toast.stories.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAuBrB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.stories.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAcrB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAOrB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tree-view.stories.d.ts","sourceRoot":"","sources":["../../../src/tree-view/tree-view.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAarB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"url-input.stories.d.ts","sourceRoot":"","sources":["../../../src/url-input/url-input.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAKrB,CAAC"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
const meta = {
|
|
3
|
-
title: 'Accordion',
|
|
4
|
-
component: 'zero-accordion',
|
|
5
|
-
};
|
|
6
|
-
export default meta;
|
|
7
|
-
export const Primary = {
|
|
8
|
-
render: () => html `
|
|
9
|
-
<zero-accordion>
|
|
10
|
-
<zero-accordion-item slot="item" id="accordion-1">
|
|
11
|
-
Accordion one content
|
|
12
|
-
<div slot="heading">Accordion one</div>
|
|
13
|
-
</zero-accordion-item>
|
|
14
|
-
<zero-accordion-item slot="item" id="accordion-2">
|
|
15
|
-
Accordion two content
|
|
16
|
-
<div slot="heading">Accordion two</div>
|
|
17
|
-
</zero-accordion-item>
|
|
18
|
-
<zero-accordion-item slot="item" id="accordion-3">
|
|
19
|
-
Accordion three content
|
|
20
|
-
<div slot="heading">Accordion three</div>
|
|
21
|
-
</zero-accordion-item>
|
|
22
|
-
<zero-accordion-item slot="item" id="accordion-4">
|
|
23
|
-
Accordion four content
|
|
24
|
-
<div slot="heading">Accordion four</div>
|
|
25
|
-
</zero-accordion-item>
|
|
26
|
-
</zero-accordion>
|
|
27
|
-
`,
|
|
28
|
-
};
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
import { logger } from '../utils/logger';
|
|
3
|
-
const meta = {
|
|
4
|
-
title: 'Actions Menu',
|
|
5
|
-
component: 'zero-actions-menu',
|
|
6
|
-
};
|
|
7
|
-
export default meta;
|
|
8
|
-
const zeroActions = [
|
|
9
|
-
{
|
|
10
|
-
name: 'View',
|
|
11
|
-
callback: (rowData) => logger.debug('VIEWW!!!', rowData),
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
name: 'Delete',
|
|
15
|
-
callback: (rowData) => logger.debug('DELETE!!!', rowData),
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
name: 'Edit',
|
|
19
|
-
callback: (rowData) => logger.debug('EDIT!!!', rowData),
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
name: 'Wait',
|
|
23
|
-
callback: (rowData) => logger.debug('WAIT???', rowData),
|
|
24
|
-
},
|
|
25
|
-
];
|
|
26
|
-
const horizontalStyle = 'flex: 1; display: flex; justify-content: center;';
|
|
27
|
-
export const Horizontal = {
|
|
28
|
-
args: {
|
|
29
|
-
actions: zeroActions,
|
|
30
|
-
actionsOpenerText: 'Horizontal Actions',
|
|
31
|
-
},
|
|
32
|
-
render: (args) => html `
|
|
33
|
-
<div style="${horizontalStyle}">
|
|
34
|
-
<zero-actions-menu
|
|
35
|
-
name="${args.actionsOpenerText}"
|
|
36
|
-
.actions=${args.actions}
|
|
37
|
-
></zero-actions-menu>
|
|
38
|
-
</div>
|
|
39
|
-
`,
|
|
40
|
-
};
|
|
41
|
-
const verticalStyle = 'flex: 1; display: flex; height: 400px; justify-content: center;';
|
|
42
|
-
export const Vertical = {
|
|
43
|
-
args: {
|
|
44
|
-
actions: zeroActions,
|
|
45
|
-
actionsOpenerText: 'Vertical Actions',
|
|
46
|
-
},
|
|
47
|
-
render: ({ actionsOpenerText, actions }) => html `
|
|
48
|
-
<div style="${verticalStyle}">
|
|
49
|
-
<zero-actions-menu
|
|
50
|
-
name="${actionsOpenerText}"
|
|
51
|
-
.actions=${actions}
|
|
52
|
-
is-vertical
|
|
53
|
-
></zero-actions-menu>
|
|
54
|
-
</div>
|
|
55
|
-
`,
|
|
56
|
-
};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
import { ZeroAppearanceValues } from '../_common/colors';
|
|
3
|
-
const meta = {
|
|
4
|
-
title: 'Anchor',
|
|
5
|
-
component: 'zero-anchor',
|
|
6
|
-
};
|
|
7
|
-
export default meta;
|
|
8
|
-
const wrapperStyle = 'display: flex; flex-direction: column; justify-content: space-between; height: 500px';
|
|
9
|
-
const StylesMapperTemplate = {
|
|
10
|
-
render: ({ appearances, anchorText }) => html `
|
|
11
|
-
<div style="${wrapperStyle}">
|
|
12
|
-
${appearances.map((appearanceName) => html `
|
|
13
|
-
<zero-anchor appearance="${appearanceName}">
|
|
14
|
-
${anchorText} (${appearanceName})
|
|
15
|
-
</zero-anchor>
|
|
16
|
-
`)}
|
|
17
|
-
</div>
|
|
18
|
-
`,
|
|
19
|
-
};
|
|
20
|
-
export const All = Object.assign({ args: {
|
|
21
|
-
anchorText: 'Rapid Anchor',
|
|
22
|
-
appearances: ZeroAppearanceValues,
|
|
23
|
-
} }, StylesMapperTemplate);
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
const meta = {
|
|
3
|
-
title: 'Anchored Region',
|
|
4
|
-
component: 'zero-anchored-region',
|
|
5
|
-
};
|
|
6
|
-
export default meta;
|
|
7
|
-
const wrapperStyle = 'display: flex; flex-direction: column; justify-content: space-between; height: 500px';
|
|
8
|
-
const StylesMapperTemplate = {
|
|
9
|
-
render: ({ anchorText }) => html `
|
|
10
|
-
<zero-card style=${wrapperStyle}>
|
|
11
|
-
<div
|
|
12
|
-
id="viewport"
|
|
13
|
-
style="margin-top: 20px; display: flex; justify-content: center; align-items: center;"
|
|
14
|
-
>
|
|
15
|
-
<zero-button id="anchor-b1">Button is an anchor</zero-button>
|
|
16
|
-
<zero-anchored-region
|
|
17
|
-
anchor="anchor-b1"
|
|
18
|
-
vertical-positioning-mode="locktodefault"
|
|
19
|
-
vertical-default-position="top"
|
|
20
|
-
>
|
|
21
|
-
<h6>${anchorText}</h6>
|
|
22
|
-
</zero-anchored-region>
|
|
23
|
-
</div>
|
|
24
|
-
</zero-card>
|
|
25
|
-
`,
|
|
26
|
-
};
|
|
27
|
-
export const Default = Object.assign({ args: {
|
|
28
|
-
anchorText: 'This will show above button',
|
|
29
|
-
} }, StylesMapperTemplate);
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
const meta = {
|
|
3
|
-
title: 'Avatar',
|
|
4
|
-
component: 'zero-avatar',
|
|
5
|
-
};
|
|
6
|
-
export default meta;
|
|
7
|
-
const wrapperStyle = 'display: flex; padding: 10px; gap: 1em; height: 500px; --avatar-fill-accent-primary: var(--accent-fill-rest)';
|
|
8
|
-
const StylesMapperTemplate = {
|
|
9
|
-
render: () => html `
|
|
10
|
-
<zero-card style=${wrapperStyle}>
|
|
11
|
-
<zero-avatar
|
|
12
|
-
src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light"
|
|
13
|
-
alt="Annie's profile image"
|
|
14
|
-
link="#"
|
|
15
|
-
></zero-avatar>
|
|
16
|
-
<zero-avatar
|
|
17
|
-
alt="Annie James"
|
|
18
|
-
link="#"
|
|
19
|
-
name="Annie Lennox"
|
|
20
|
-
shape="circle"
|
|
21
|
-
fill="accent-primary"
|
|
22
|
-
>
|
|
23
|
-
AJ
|
|
24
|
-
</zero-avatar>
|
|
25
|
-
</zero-card>
|
|
26
|
-
`,
|
|
27
|
-
};
|
|
28
|
-
export const Primary = Object.assign({ args: {
|
|
29
|
-
anchorText: 'This will show above button',
|
|
30
|
-
} }, StylesMapperTemplate);
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
const meta = {
|
|
3
|
-
title: 'Badge',
|
|
4
|
-
component: 'zero-badge',
|
|
5
|
-
};
|
|
6
|
-
export default meta;
|
|
7
|
-
const wrapperStyle = 'display: flex; justify-content: space-between; flex: 1; flex-wrap: wrap;';
|
|
8
|
-
const StylesMapperTemplate = {
|
|
9
|
-
render: ({ fillColors, fontColors, badgeText }) => html `
|
|
10
|
-
<div style="${wrapperStyle}">
|
|
11
|
-
${fillColors.map((fillColor) => html `
|
|
12
|
-
${fontColors.map((fontColor) => html `
|
|
13
|
-
<zero-badge fill="${fillColor}" color="${fontColor}">${badgeText}</zero-badge>
|
|
14
|
-
`)}
|
|
15
|
-
`)}
|
|
16
|
-
</div>
|
|
17
|
-
`,
|
|
18
|
-
};
|
|
19
|
-
const fillColors = ['primary', 'secondary', 'pink'];
|
|
20
|
-
const fontColors = ['black', 'white'];
|
|
21
|
-
export const All = Object.assign({ args: {
|
|
22
|
-
fillColors,
|
|
23
|
-
fontColors,
|
|
24
|
-
badgeText: 'Rapid Badge',
|
|
25
|
-
} }, StylesMapperTemplate);
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
import { FastAppearanceValues, ZeroAppearanceValues } from '../_common/colors';
|
|
3
|
-
const meta = {
|
|
4
|
-
title: 'Banner',
|
|
5
|
-
component: 'zero-banner',
|
|
6
|
-
};
|
|
7
|
-
export default meta;
|
|
8
|
-
const showNotify = (notifyText) => {
|
|
9
|
-
var _a;
|
|
10
|
-
let errorBanner = document.querySelector('#js-banner');
|
|
11
|
-
if (!errorBanner) {
|
|
12
|
-
errorBanner = document.createElement('zero-banner');
|
|
13
|
-
errorBanner.id = 'js-banner';
|
|
14
|
-
(_a = document.querySelector('#zero-banner')) === null || _a === void 0 ? void 0 : _a.appendChild(errorBanner);
|
|
15
|
-
}
|
|
16
|
-
errorBanner.notification = {
|
|
17
|
-
title: 'Notify Title',
|
|
18
|
-
body: `${notifyText} ID - notify - ${Math.random()}`,
|
|
19
|
-
config: {
|
|
20
|
-
banner: {
|
|
21
|
-
confirmingActions: [
|
|
22
|
-
{
|
|
23
|
-
label: 'Action',
|
|
24
|
-
action: () => {
|
|
25
|
-
alert('Action in progress');
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
],
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
const ignoreClick = (e) => {
|
|
34
|
-
const banner = document.querySelector('#banner');
|
|
35
|
-
banner.dismiss();
|
|
36
|
-
};
|
|
37
|
-
export const Primary = {
|
|
38
|
-
args: {
|
|
39
|
-
notifyText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
|
|
40
|
-
bannerText: ` Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet.
|
|
41
|
-
Lorem, ipsum dolor.`,
|
|
42
|
-
actionIgnoreActionText: 'Ignore',
|
|
43
|
-
actionDemoText: 'Diagnose',
|
|
44
|
-
actionButtonAppearance: 'lightweight',
|
|
45
|
-
},
|
|
46
|
-
argTypes: {
|
|
47
|
-
actionButtonAppearance: {
|
|
48
|
-
control: 'select',
|
|
49
|
-
options: [...FastAppearanceValues, ...ZeroAppearanceValues],
|
|
50
|
-
},
|
|
51
|
-
},
|
|
52
|
-
render: ({ bannerText, notifyText, actionButtonAppearance, actionIgnoreActionText, actionDemoText, }) => html `
|
|
53
|
-
<div style="display: flex; flex-direction: column;">
|
|
54
|
-
<h5>Banner with slots</h5>
|
|
55
|
-
<zero-banner id="banner">
|
|
56
|
-
<div slot="content">${bannerText}</div>
|
|
57
|
-
<zero-button slot="action" @click="${ignoreClick}" appearance="${actionButtonAppearance}">
|
|
58
|
-
${actionIgnoreActionText}
|
|
59
|
-
</zero-button>
|
|
60
|
-
<zero-button slot="action" appearance="${actionButtonAppearance}">
|
|
61
|
-
${actionDemoText}
|
|
62
|
-
</zero-button>
|
|
63
|
-
</zero-banner>
|
|
64
|
-
<h5>Empty Banner</h5>
|
|
65
|
-
<zero-banner></zero-banner>
|
|
66
|
-
<div id="zero-banner" style="width: 100%;">
|
|
67
|
-
<zero-button @click="${() => showNotify(notifyText)}">
|
|
68
|
-
Show Zero Banner - Notification Structure
|
|
69
|
-
</zero-button>
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
`,
|
|
73
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
const meta = {
|
|
3
|
-
title: 'Breadcrumb',
|
|
4
|
-
component: 'zero-breadcrumb',
|
|
5
|
-
};
|
|
6
|
-
export default meta;
|
|
7
|
-
export const Primary = {
|
|
8
|
-
args: {
|
|
9
|
-
breadcrumbItemsText: 'Breadcrumb Item',
|
|
10
|
-
breadcrumbCurrentItemText: 'Current Page',
|
|
11
|
-
},
|
|
12
|
-
render: ({ breadcrumbItemsText, breadcrumbCurrentItemText }) => html `
|
|
13
|
-
<zero-breadcrumb>
|
|
14
|
-
<zero-breadcrumb-item href="#">${breadcrumbItemsText} 1</zero-breadcrumb-item>
|
|
15
|
-
<zero-breadcrumb-item href="#">${breadcrumbItemsText} 2</zero-breadcrumb-item>
|
|
16
|
-
<zero-breadcrumb-item>${breadcrumbCurrentItemText}</zero-breadcrumb-item>
|
|
17
|
-
</zero-breadcrumb>
|
|
18
|
-
`,
|
|
19
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
import { FastAppearanceValues, ZeroAppearanceValues } from '../_common/colors';
|
|
3
|
-
const meta = {
|
|
4
|
-
title: 'Button',
|
|
5
|
-
component: 'zero-button',
|
|
6
|
-
};
|
|
7
|
-
export default meta;
|
|
8
|
-
const wrapperStyle = 'display: flex; flex-direction: column; justify-content: space-between; height: 500px';
|
|
9
|
-
const StylesMapperTemplate = {
|
|
10
|
-
render: ({ appearances, buttonText }) => html `
|
|
11
|
-
<div style="${wrapperStyle}">
|
|
12
|
-
${appearances.map((appearanceName) => html `
|
|
13
|
-
<zero-button appearance="${appearanceName}">
|
|
14
|
-
${buttonText} (${appearanceName})
|
|
15
|
-
</zero-anchor>
|
|
16
|
-
`)}
|
|
17
|
-
</div>
|
|
18
|
-
`,
|
|
19
|
-
};
|
|
20
|
-
export const All = Object.assign({ args: {
|
|
21
|
-
appearances: ZeroAppearanceValues,
|
|
22
|
-
buttonText: 'Zero Button',
|
|
23
|
-
} }, StylesMapperTemplate);
|
|
24
|
-
export const Single = {
|
|
25
|
-
args: {
|
|
26
|
-
appearance: 'neutral',
|
|
27
|
-
buttonText: 'Zero Button',
|
|
28
|
-
},
|
|
29
|
-
argTypes: {
|
|
30
|
-
appearance: {
|
|
31
|
-
control: 'select',
|
|
32
|
-
options: [...FastAppearanceValues, ...ZeroAppearanceValues],
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
render: ({ appearance, buttonText }) => html `
|
|
36
|
-
<zero-button appearance="${appearance}">${buttonText} (${appearance})</zero-button>
|
|
37
|
-
`,
|
|
38
|
-
};
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
const meta = {
|
|
3
|
-
title: 'Calendar',
|
|
4
|
-
component: 'zero-calendar',
|
|
5
|
-
};
|
|
6
|
-
export default meta;
|
|
7
|
-
const wrapperStyle = 'height: 400px; width: 100%;';
|
|
8
|
-
export const Primary = {
|
|
9
|
-
args: {},
|
|
10
|
-
render: () => html `
|
|
11
|
-
<div style="${wrapperStyle}">
|
|
12
|
-
<zero-calendar
|
|
13
|
-
id="zCalendar"
|
|
14
|
-
month="${new Date().getMonth() + 1}"
|
|
15
|
-
year="${new Date().getFullYear()}"
|
|
16
|
-
month-format="short"
|
|
17
|
-
weekday-format="narrow"
|
|
18
|
-
disabled-dates="${new Date().getMonth() + 1}-${new Date().getDate() > 1
|
|
19
|
-
? new Date().getDate() - 1
|
|
20
|
-
: new Date().getDate() + 2}-${new Date().getFullYear()}"
|
|
21
|
-
selected-dates="${new Date().getMonth() +
|
|
22
|
-
1}-${new Date().getDate()}-${new Date().getFullYear()}"
|
|
23
|
-
>
|
|
24
|
-
<div
|
|
25
|
-
slot="${new Date().getMonth() + 1}-${new Date().getDate()}-${new Date().getFullYear()}"
|
|
26
|
-
>
|
|
27
|
-
Test slot
|
|
28
|
-
</div>
|
|
29
|
-
</zero-calendar>
|
|
30
|
-
</div>
|
|
31
|
-
`,
|
|
32
|
-
};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
const meta = {
|
|
3
|
-
title: 'Card',
|
|
4
|
-
component: 'zero-card',
|
|
5
|
-
};
|
|
6
|
-
export default meta;
|
|
7
|
-
const wrapperStyle = 'display: flex; height: 400px; width: 100%; justify-content: center;';
|
|
8
|
-
const cardStyle = 'height: 50%; width: 50%; padding: 10px;';
|
|
9
|
-
export const Primary = {
|
|
10
|
-
args: {
|
|
11
|
-
cardFillColor: '#2f353a',
|
|
12
|
-
cardHeading: 'Card 1',
|
|
13
|
-
cardText: 'This is a Rapid Card (and the only one with without extra fui elements!)',
|
|
14
|
-
},
|
|
15
|
-
render: ({ cardFillColor, cardHeading, cardText }) => html `
|
|
16
|
-
<div style="${wrapperStyle} --zero-card-fill-color:${cardFillColor};">
|
|
17
|
-
<zero-card style="${cardStyle}">
|
|
18
|
-
<h6>${cardHeading}</h6>
|
|
19
|
-
<span>${cardText}</span>
|
|
20
|
-
</zero-card>
|
|
21
|
-
</div>
|
|
22
|
-
`,
|
|
23
|
-
};
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
const meta = {
|
|
3
|
-
title: 'Categorized Multiselect',
|
|
4
|
-
component: 'zero-categorized-multiselect',
|
|
5
|
-
};
|
|
6
|
-
export default meta;
|
|
7
|
-
const disabledCountriesExample = [
|
|
8
|
-
{
|
|
9
|
-
type: 'Test Type 1',
|
|
10
|
-
value: 'AFG',
|
|
11
|
-
label: 'Afghanistan',
|
|
12
|
-
disabled: false,
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
type: 'Test Type 1',
|
|
16
|
-
value: 'ALA',
|
|
17
|
-
label: 'Aland Islands',
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
type: 'Test Type 2',
|
|
21
|
-
value: 'ALB',
|
|
22
|
-
label: 'Albania',
|
|
23
|
-
disabled: false,
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
type: 'Test Type 1',
|
|
27
|
-
value: 'ALG',
|
|
28
|
-
label: 'Algeria',
|
|
29
|
-
disabled: false,
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
type: 'Test Type 3',
|
|
33
|
-
value: 'AND',
|
|
34
|
-
label: 'Andorra',
|
|
35
|
-
disabled: true,
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
type: 'Test Type 2',
|
|
39
|
-
value: 'ARG',
|
|
40
|
-
label: 'Argentina',
|
|
41
|
-
disabled: true,
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
type: 'Test Type 3',
|
|
45
|
-
value: 'ARM',
|
|
46
|
-
label: 'Armenia',
|
|
47
|
-
disabled: false,
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
type: 'Test Type 1',
|
|
51
|
-
value: 'AUS',
|
|
52
|
-
label: 'Australia',
|
|
53
|
-
disabled: false,
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
type: 'Test Type 1',
|
|
57
|
-
value: 'AUT',
|
|
58
|
-
label: 'Austria',
|
|
59
|
-
disabled: true,
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
value: 'AZE',
|
|
63
|
-
label: 'Azerbaijan',
|
|
64
|
-
disabled: false,
|
|
65
|
-
},
|
|
66
|
-
];
|
|
67
|
-
export const Primary = {
|
|
68
|
-
render: ({ name, text, countries, search, autoPosition }) => html `
|
|
69
|
-
<div style="min-height: 400px;">
|
|
70
|
-
<zero-categorized-multiselect
|
|
71
|
-
name="${name}"
|
|
72
|
-
.options="${countries}"
|
|
73
|
-
auto-position="${autoPosition}"
|
|
74
|
-
search="${search}"
|
|
75
|
-
>
|
|
76
|
-
${text}
|
|
77
|
-
</zero-categorized-multiselect>
|
|
78
|
-
</div>
|
|
79
|
-
`,
|
|
80
|
-
args: {
|
|
81
|
-
name: 'Countries',
|
|
82
|
-
text: 'Add New Country',
|
|
83
|
-
search: true,
|
|
84
|
-
countries: disabledCountriesExample,
|
|
85
|
-
autoPosition: false,
|
|
86
|
-
},
|
|
87
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
2
|
-
const meta = {
|
|
3
|
-
title: 'Checkbox',
|
|
4
|
-
component: 'zero-checkbox>',
|
|
5
|
-
};
|
|
6
|
-
export default meta;
|
|
7
|
-
const wrapperStyle = 'display: flex; flex-direction: column; justify-content: space-between; height: 200px';
|
|
8
|
-
export const Primary = {
|
|
9
|
-
args: {
|
|
10
|
-
customCheckboxText: 'Custom Zero Checkbox',
|
|
11
|
-
customCheckboxDesignUnit: 8,
|
|
12
|
-
customCheckboxCornerRadius: 4,
|
|
13
|
-
},
|
|
14
|
-
render: ({ customCheckboxText, customCheckboxDesignUnit, customCheckboxCornerRadius }) => html `
|
|
15
|
-
<div style="${wrapperStyle}">
|
|
16
|
-
<zero-checkbox>Default Zero Checkbox</zero-checkbox>
|
|
17
|
-
|
|
18
|
-
<zero-design-system-provider
|
|
19
|
-
design-unit="${customCheckboxDesignUnit}"
|
|
20
|
-
corner-radius=${customCheckboxCornerRadius}"
|
|
21
|
-
>
|
|
22
|
-
<zero-checkbox>${customCheckboxText}</zero-checkbox>
|
|
23
|
-
</zero-design-system-provider>
|
|
24
|
-
</div>
|
|
25
|
-
`,
|
|
26
|
-
};
|