@infineon/infineon-design-system-stencil 30.9.2--canary.1669.a6556475a763cdebf0a29aa12ca37f78801b6799.1 → 30.9.2--canary.1640.73e4e19bf6e56fa149c04b7bbaec71574880c28a.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/cjs/ifx-accordion_2.cjs.entry.js +7 -7
- package/dist/cjs/ifx-accordion_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js +2 -2
- package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-breadcrumb.cjs.entry.js +3 -3
- package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-chip_3.cjs.entry.js +19 -21
- package/dist/cjs/ifx-chip_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-modal.cjs.entry.js +8 -8
- package/dist/cjs/ifx-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-multiselect_2.cjs.entry.js +5 -5
- package/dist/cjs/ifx-multiselect_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-search-bar.cjs.entry.js +5 -5
- package/dist/cjs/ifx-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-sidebar-item.cjs.entry.js +9 -10
- package/dist/cjs/ifx-sidebar-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-table.cjs.entry.js +22 -20
- package/dist/cjs/ifx-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tabs.cjs.entry.js +6 -6
- package/dist/cjs/ifx-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/accordion/accordion.js +2 -2
- package/dist/collection/components/accordion/accordion.js.map +1 -1
- package/dist/collection/components/accordion/accordion.stories.js +81 -7
- package/dist/collection/components/accordion/accordion.stories.js.map +1 -1
- package/dist/collection/components/accordion/accordionItem.js +10 -10
- package/dist/collection/components/accordion/accordionItem.js.map +1 -1
- package/dist/collection/components/alert/alert.stories.js +45 -12
- package/dist/collection/components/alert/alert.stories.js.map +1 -1
- package/dist/collection/components/badge/badge.stories.js +28 -7
- package/dist/collection/components/badge/badge.stories.js.map +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb-item-label.js +4 -4
- package/dist/collection/components/breadcrumb/breadcrumb-item-label.js.map +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +3 -3
- package/dist/collection/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.stories.js +87 -13
- package/dist/collection/components/breadcrumb/breadcrumb.stories.js.map +1 -1
- package/dist/collection/components/button/button.stories.js +101 -9
- package/dist/collection/components/button/button.stories.js.map +1 -1
- package/dist/collection/components/card/card.stories.js +84 -3
- package/dist/collection/components/card/card.stories.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.stories.js +72 -14
- package/dist/collection/components/checkbox/checkbox.stories.js.map +1 -1
- package/dist/collection/components/chip/chip-item/chip-item.js +4 -4
- package/dist/collection/components/chip/chip-item/chip-item.js.map +1 -1
- package/dist/collection/components/chip/chip.js +15 -15
- package/dist/collection/components/chip/chip.js.map +1 -1
- package/dist/collection/components/chip/chip.stories.js +18 -26
- package/dist/collection/components/chip/chip.stories.js.map +1 -1
- package/dist/collection/components/chip/interfaces.js.map +1 -1
- package/dist/collection/components/content-switcher/content-switcher.stories.js +65 -3
- package/dist/collection/components/content-switcher/content-switcher.stories.js.map +1 -1
- package/dist/collection/components/date-picker/date-picker.stories.js +95 -7
- package/dist/collection/components/date-picker/date-picker.stories.js.map +1 -1
- package/dist/collection/components/dropdown/dropdown.stories.js +222 -64
- package/dist/collection/components/dropdown/dropdown.stories.js.map +1 -1
- package/dist/collection/components/footer/footer.stories.js +7 -1
- package/dist/collection/components/footer/footer.stories.js.map +1 -1
- package/dist/collection/components/icon/infineonIconStencil.stories.js +7 -2
- package/dist/collection/components/icon/infineonIconStencil.stories.js.map +1 -1
- package/dist/collection/components/icon-button/icon-button.stories.js +61 -5
- package/dist/collection/components/icon-button/icon-button.stories.js.map +1 -1
- package/dist/collection/components/link/link.stories.js +53 -4
- package/dist/collection/components/link/link.stories.js.map +1 -1
- package/dist/collection/components/modal/modal.js +10 -10
- package/dist/collection/components/modal/modal.js.map +1 -1
- package/dist/collection/components/modal/modal.stories.js +96 -19
- package/dist/collection/components/modal/modal.stories.js.map +1 -1
- package/dist/collection/components/navigation/navbar/navbar.stories.js +176 -12
- package/dist/collection/components/navigation/navbar/navbar.stories.js.map +1 -1
- package/dist/collection/components/navigation/sidebar/sidebar-item.js +11 -32
- package/dist/collection/components/navigation/sidebar/sidebar-item.js.map +1 -1
- package/dist/collection/components/navigation/sidebar/sidebar.stories.js +183 -19
- package/dist/collection/components/navigation/sidebar/sidebar.stories.js.map +1 -1
- package/dist/collection/components/notification/notification.stories.js +55 -8
- package/dist/collection/components/notification/notification.stories.js.map +1 -1
- package/dist/collection/components/number-indicator/number-indicator.stories.js +19 -0
- package/dist/collection/components/number-indicator/number-indicator.stories.js.map +1 -1
- package/dist/collection/components/pagination/pagination.js +1 -31
- package/dist/collection/components/pagination/pagination.js.map +1 -1
- package/dist/collection/components/pagination/pagination.stories.js +19 -14
- package/dist/collection/components/pagination/pagination.stories.js.map +1 -1
- package/dist/collection/components/progress-bar/progress-bar.stories.js +31 -8
- package/dist/collection/components/progress-bar/progress-bar.stories.js.map +1 -1
- package/dist/collection/components/radio-button/radio-button.stories.js +66 -13
- package/dist/collection/components/radio-button/radio-button.stories.js.map +1 -1
- package/dist/collection/components/search-bar/search-bar.js +6 -6
- package/dist/collection/components/search-bar/search-bar.js.map +1 -1
- package/dist/collection/components/search-bar/search-bar.stories.js +58 -9
- package/dist/collection/components/search-bar/search-bar.stories.js.map +1 -1
- package/dist/collection/components/search-field/search-field.stories.js +54 -8
- package/dist/collection/components/search-field/search-field.stories.js.map +1 -1
- package/dist/collection/components/segmented-control/segmented-control.stories.js +1 -10
- package/dist/collection/components/segmented-control/segmented-control.stories.js.map +1 -1
- package/dist/collection/components/select/multi-select/multiselect.js +6 -6
- package/dist/collection/components/select/multi-select/multiselect.js.map +1 -1
- package/dist/collection/components/select/multi-select/multiselect.stories.js +131 -5
- package/dist/collection/components/select/multi-select/multiselect.stories.js.map +1 -1
- package/dist/collection/components/select/single-select/select.stories.js +83 -26
- package/dist/collection/components/select/single-select/select.stories.js.map +1 -1
- package/dist/collection/components/slider/slider.stories.js +97 -13
- package/dist/collection/components/slider/slider.stories.js.map +1 -1
- package/dist/collection/components/spinner/spinner.stories.js +34 -2
- package/dist/collection/components/spinner/spinner.stories.js.map +1 -1
- package/dist/collection/components/status/status.stories.js +25 -1
- package/dist/collection/components/status/status.stories.js.map +1 -1
- package/dist/collection/components/stepper/stepper.stories.js +54 -25
- package/dist/collection/components/stepper/stepper.stories.js.map +1 -1
- package/dist/collection/components/switch/switch.stories.js +51 -4
- package/dist/collection/components/switch/switch.stories.js.map +1 -1
- package/dist/collection/components/table-advanced-version/table.js +23 -21
- package/dist/collection/components/table-advanced-version/table.js.map +1 -1
- package/dist/collection/components/table-advanced-version/table.stories.js +124 -39
- package/dist/collection/components/table-advanced-version/table.stories.js.map +1 -1
- package/dist/collection/components/table-basic-version/table.stories.js +30 -3
- package/dist/collection/components/table-basic-version/table.stories.js.map +1 -1
- package/dist/collection/components/tabs/tabs.js +7 -7
- package/dist/collection/components/tabs/tabs.js.map +1 -1
- package/dist/collection/components/tabs/tabs.stories.js +104 -29
- package/dist/collection/components/tabs/tabs.stories.js.map +1 -1
- package/dist/collection/components/tag/tag.stories.js +18 -0
- package/dist/collection/components/tag/tag.stories.js.map +1 -1
- package/dist/collection/components/text-field/text-field.stories.js +116 -13
- package/dist/collection/components/text-field/text-field.stories.js.map +1 -1
- package/dist/collection/components/textarea/textarea.stories.js +1 -3
- package/dist/collection/components/textarea/textarea.stories.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip.stories.js +48 -4
- package/dist/collection/components/tooltip/tooltip.stories.js.map +1 -1
- package/dist/components/ifx-accordion-item.js +1 -1
- package/dist/components/ifx-accordion.js +1 -1
- package/dist/components/ifx-breadcrumb-item-label.js +3 -3
- package/dist/components/ifx-breadcrumb-item-label.js.map +1 -1
- package/dist/components/ifx-breadcrumb.js +3 -3
- package/dist/components/ifx-breadcrumb.js.map +1 -1
- package/dist/components/ifx-chip-item.js +1 -1
- package/dist/components/ifx-chip.js +1 -1
- package/dist/components/ifx-faq.js +2 -2
- package/dist/components/ifx-modal.js +8 -8
- package/dist/components/ifx-modal.js.map +1 -1
- package/dist/components/ifx-multiselect.js +1 -1
- package/dist/components/ifx-pagination.js +1 -1
- package/dist/components/ifx-search-bar.js +5 -5
- package/dist/components/ifx-search-bar.js.map +1 -1
- package/dist/components/ifx-set-filter.js +1 -1
- package/dist/components/ifx-sidebar-item.js +11 -13
- package/dist/components/ifx-sidebar-item.js.map +1 -1
- package/dist/components/ifx-table.js +26 -24
- package/dist/components/ifx-table.js.map +1 -1
- package/dist/components/ifx-tabs.js +6 -6
- package/dist/components/ifx-tabs.js.map +1 -1
- package/dist/components/{p-b2439194.js → p-053d42ef.js} +8 -8
- package/dist/components/{p-b2439194.js.map → p-053d42ef.js.map} +1 -1
- package/dist/components/{p-094bb435.js → p-3baaa460.js} +3 -3
- package/dist/components/{p-094bb435.js.map → p-3baaa460.js.map} +1 -1
- package/dist/components/{p-184f1004.js → p-793d89e7.js} +15 -15
- package/dist/components/p-793d89e7.js.map +1 -0
- package/dist/components/{p-23cdd5a7.js → p-7b5e297f.js} +5 -5
- package/dist/components/p-7b5e297f.js.map +1 -0
- package/dist/components/{p-2f1e7628.js → p-b85fba0e.js} +2 -4
- package/dist/components/p-b85fba0e.js.map +1 -0
- package/dist/components/{p-04b73e62.js → p-cf8fd0f4.js} +6 -6
- package/dist/components/p-cf8fd0f4.js.map +1 -0
- package/dist/esm/ifx-accordion_2.entry.js +7 -7
- package/dist/esm/ifx-accordion_2.entry.js.map +1 -1
- package/dist/esm/ifx-breadcrumb-item-label.entry.js +2 -2
- package/dist/esm/ifx-breadcrumb-item-label.entry.js.map +1 -1
- package/dist/esm/ifx-breadcrumb.entry.js +3 -3
- package/dist/esm/ifx-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ifx-chip_3.entry.js +19 -21
- package/dist/esm/ifx-chip_3.entry.js.map +1 -1
- package/dist/esm/ifx-modal.entry.js +8 -8
- package/dist/esm/ifx-modal.entry.js.map +1 -1
- package/dist/esm/ifx-multiselect_2.entry.js +5 -5
- package/dist/esm/ifx-multiselect_2.entry.js.map +1 -1
- package/dist/esm/ifx-search-bar.entry.js +5 -5
- package/dist/esm/ifx-search-bar.entry.js.map +1 -1
- package/dist/esm/ifx-sidebar-item.entry.js +9 -10
- package/dist/esm/ifx-sidebar-item.entry.js.map +1 -1
- package/dist/esm/ifx-table.entry.js +22 -20
- package/dist/esm/ifx-table.entry.js.map +1 -1
- package/dist/esm/ifx-tabs.entry.js +6 -6
- package/dist/esm/ifx-tabs.entry.js.map +1 -1
- package/dist/esm/infineon-design-system-stencil.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/p-26df4dfe.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-28fb795b.entry.js.map → p-26df4dfe.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/p-355cea09.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-355cea09.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-00d6e46e.entry.js → p-602edb1f.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-602edb1f.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-60dcd508.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-60dcd508.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-68752789.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-68752789.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-6a274db4.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-6a274db4.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-71fda335.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-71fda335.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-7741e81d.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-7741e81d.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-bc8a4226.entry.js → p-d93eb561.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-d93eb561.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-df6cadc1.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-df6cadc1.entry.js.map +1 -0
- package/dist/types/components/accordion/accordion.stories.d.ts +67 -1
- package/dist/types/components/accordion/accordionItem.d.ts +3 -3
- package/dist/types/components/alert/alert.stories.d.ts +38 -11
- package/dist/types/components/badge/badge.stories.d.ts +23 -3
- package/dist/types/components/breadcrumb/breadcrumb-item-label.d.ts +1 -1
- package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +83 -1
- package/dist/types/components/button/button.stories.d.ts +92 -16
- package/dist/types/components/card/card.stories.d.ts +95 -1
- package/dist/types/components/checkbox/checkbox.stories.d.ts +65 -10
- package/dist/types/components/chip/chip-item/chip-item.d.ts +1 -1
- package/dist/types/components/chip/chip.d.ts +1 -1
- package/dist/types/components/chip/chip.stories.d.ts +11 -4
- package/dist/types/components/chip/interfaces.d.ts +1 -1
- package/dist/types/components/content-switcher/content-switcher.stories.d.ts +66 -0
- package/dist/types/components/date-picker/date-picker.stories.d.ts +88 -2
- package/dist/types/components/dropdown/dropdown.stories.d.ts +90 -33
- package/dist/types/components/footer/footer.stories.d.ts +4 -0
- package/dist/types/components/icon/infineonIconStencil.stories.d.ts +5 -0
- package/dist/types/components/icon-button/icon-button.stories.d.ts +56 -8
- package/dist/types/components/link/link.stories.d.ts +49 -6
- package/dist/types/components/modal/modal.d.ts +2 -2
- package/dist/types/components/modal/modal.stories.d.ts +77 -3
- package/dist/types/components/navigation/navbar/navbar.stories.d.ts +222 -6
- package/dist/types/components/navigation/sidebar/sidebar-item.d.ts +2 -3
- package/dist/types/components/navigation/sidebar/sidebar.stories.d.ts +158 -7
- package/dist/types/components/notification/notification.stories.d.ts +46 -2
- package/dist/types/components/number-indicator/number-indicator.stories.d.ts +19 -0
- package/dist/types/components/pagination/pagination.d.ts +0 -2
- package/dist/types/components/pagination/pagination.stories.d.ts +12 -7
- package/dist/types/components/progress-bar/progress-bar.stories.d.ts +25 -4
- package/dist/types/components/radio-button/radio-button.stories.d.ts +59 -8
- package/dist/types/components/search-bar/search-bar.d.ts +1 -1
- package/dist/types/components/search-bar/search-bar.stories.d.ts +60 -3
- package/dist/types/components/search-field/search-field.stories.d.ts +45 -6
- package/dist/types/components/segmented-control/segmented-control.stories.d.ts +0 -3
- package/dist/types/components/select/multi-select/multiselect.d.ts +1 -1
- package/dist/types/components/select/multi-select/multiselect.stories.d.ts +125 -0
- package/dist/types/components/select/single-select/select.stories.d.ts +67 -24
- package/dist/types/components/slider/slider.stories.d.ts +110 -0
- package/dist/types/components/spinner/spinner.stories.d.ts +32 -0
- package/dist/types/components/status/status.stories.d.ts +24 -2
- package/dist/types/components/stepper/stepper.stories.d.ts +30 -6
- package/dist/types/components/switch/switch.stories.d.ts +47 -1
- package/dist/types/components/table-advanced-version/table.stories.d.ts +50 -11
- package/dist/types/components/table-basic-version/table.stories.d.ts +21 -1
- package/dist/types/components/tabs/tabs.d.ts +1 -1
- package/dist/types/components/tabs/tabs.stories.d.ts +88 -9
- package/dist/types/components/tag/tag.stories.d.ts +20 -0
- package/dist/types/components/text-field/text-field.stories.d.ts +106 -10
- package/dist/types/components/tooltip/tooltip.stories.d.ts +41 -6
- package/dist/types/components.d.ts +20 -26
- package/package.json +1 -1
- package/dist/components/p-04b73e62.js.map +0 -1
- package/dist/components/p-184f1004.js.map +0 -1
- package/dist/components/p-23cdd5a7.js.map +0 -1
- package/dist/components/p-2f1e7628.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-00d6e46e.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-222c1af9.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-222c1af9.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-28fb795b.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-436babb8.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-436babb8.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-72d804fb.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-72d804fb.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-7bef9272.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-7bef9272.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-89c7209f.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-89c7209f.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-9481adc8.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-9481adc8.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-bc8a4226.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-dc7deb14.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-dc7deb14.entry.js.map +0 -1
@@ -1,9 +1,10 @@
|
|
1
1
|
import { action } from "@storybook/addon-actions";
|
2
|
+
import { icons } from "@infineon/infineon-icons";
|
2
3
|
export default {
|
3
4
|
title: 'Components/Navigation/Sidebar',
|
4
5
|
// tags: ['autodocs'],
|
5
6
|
args: {
|
6
|
-
icon:
|
7
|
+
icon: 'image-16',
|
7
8
|
applicationName: 'Application Name',
|
8
9
|
showFooter: true,
|
9
10
|
showHeader: true,
|
@@ -12,28 +13,191 @@ export default {
|
|
12
13
|
imprint: 'https://yourwebsite.com/imprint',
|
13
14
|
privacyPolicy: 'https://yourwebsite.com/privacy-policy',
|
14
15
|
copyrightText: `© 1999 - ${new Date().getFullYear()} Infineon Technologies AG`,
|
16
|
+
numberIndicatorOfSidebarItem: "",
|
17
|
+
hrefOfSidebarItem: 'https://google.com',
|
18
|
+
targetOfSidebarItem: '_self',
|
19
|
+
activeSidebarItem: false,
|
20
|
+
isActionItem: false,
|
15
21
|
},
|
16
22
|
argTypes: {
|
17
|
-
|
18
|
-
|
19
|
-
|
23
|
+
applicationName: {
|
24
|
+
description: 'The name of the application to display at the top of the sidebar.',
|
25
|
+
table: {
|
26
|
+
category: 'ifx-sidebar props'
|
27
|
+
}
|
20
28
|
},
|
21
|
-
|
22
|
-
|
23
|
-
|
29
|
+
showHeader: {
|
30
|
+
description: 'Determines whether the header is displayed in the sidebar.',
|
31
|
+
table: {
|
32
|
+
category: 'ifx-sidebar props',
|
33
|
+
defaultValue: {
|
34
|
+
summary: true
|
35
|
+
}
|
36
|
+
}
|
24
37
|
},
|
25
|
-
|
26
|
-
|
27
|
-
|
38
|
+
showFooter: {
|
39
|
+
description: 'Determines whether the footer is displayed in the sidebar.',
|
40
|
+
table: {
|
41
|
+
category: 'ifx-sidebar props',
|
42
|
+
defaultValue: {
|
43
|
+
summary: true
|
44
|
+
}
|
45
|
+
}
|
46
|
+
},
|
47
|
+
initialCollapse: {
|
48
|
+
description: 'Determines if the sidebar should be collapsed by default when it first loads.',
|
49
|
+
table: {
|
50
|
+
category: 'ifx-sidebar props',
|
51
|
+
defaultValue: {
|
52
|
+
summary: true
|
53
|
+
}
|
54
|
+
}
|
28
55
|
},
|
29
56
|
imprint: {
|
57
|
+
description: 'The URL link for the "Imprint" section in the sidebar footer.',
|
30
58
|
if: { arg: 'showFooter', eq: true },
|
59
|
+
table: {
|
60
|
+
category: 'ifx-sidebar props'
|
61
|
+
}
|
31
62
|
},
|
32
63
|
termsOfUse: {
|
64
|
+
description: 'The URL link for the "Terms of Use" section in the sidebar footer.',
|
33
65
|
if: { arg: 'showFooter', eq: true },
|
66
|
+
table: {
|
67
|
+
category: 'ifx-sidebar props'
|
68
|
+
}
|
34
69
|
},
|
35
70
|
privacyPolicy: {
|
71
|
+
description: 'The URL link for the "Privacy Policy" section in the sidebar footer.',
|
36
72
|
if: { arg: 'showFooter', eq: true },
|
73
|
+
table: {
|
74
|
+
category: 'ifx-sidebar props'
|
75
|
+
}
|
76
|
+
},
|
77
|
+
copyrightText: {
|
78
|
+
description: 'The copyright text to display at the bottom of the sidebar.',
|
79
|
+
table: {
|
80
|
+
category: 'ifx-sidebar props'
|
81
|
+
}
|
82
|
+
},
|
83
|
+
icon: {
|
84
|
+
description: 'The icon to display for the sidebar items. Choose ***none*** to display no icon.',
|
85
|
+
options: ['none', ...Object.values(icons).map(i => i['name'])],
|
86
|
+
control: 'select',
|
87
|
+
table: {
|
88
|
+
category: 'ifx-sidebar-item props',
|
89
|
+
defaultValue: {
|
90
|
+
summary: 'image-16'
|
91
|
+
}
|
92
|
+
}
|
93
|
+
},
|
94
|
+
hrefOfSidebarItem: {
|
95
|
+
name: 'href',
|
96
|
+
description: 'The URL of the sidebar item link.',
|
97
|
+
control: 'text',
|
98
|
+
table: {
|
99
|
+
category: 'ifx-sidebar-item props',
|
100
|
+
type: {
|
101
|
+
summary: 'string'
|
102
|
+
},
|
103
|
+
}
|
104
|
+
},
|
105
|
+
targetOfSidebarItem: {
|
106
|
+
name: 'target',
|
107
|
+
description: 'The target attribute of the sidebar item link.',
|
108
|
+
control: 'text',
|
109
|
+
table: {
|
110
|
+
category: 'ifx-sidebar-item props',
|
111
|
+
type: {
|
112
|
+
summary: 'string'
|
113
|
+
},
|
114
|
+
defaultValue: {
|
115
|
+
summary: '_self'
|
116
|
+
}
|
117
|
+
}
|
118
|
+
},
|
119
|
+
numberIndicatorOfSidebarItem: {
|
120
|
+
name: 'numberIndicator',
|
121
|
+
description: 'The number indicator to display on the sidebar item.',
|
122
|
+
control: 'text',
|
123
|
+
table: {
|
124
|
+
category: 'ifx-sidebar-item props',
|
125
|
+
type: {
|
126
|
+
summary: 'string'
|
127
|
+
}
|
128
|
+
}
|
129
|
+
},
|
130
|
+
activeSidebarItem: {
|
131
|
+
name: 'active',
|
132
|
+
description: 'Set to true manually or by clicking on a navigation item.',
|
133
|
+
control: 'boolean',
|
134
|
+
table: {
|
135
|
+
category: 'ifx-sidebar-item props',
|
136
|
+
type: {
|
137
|
+
summary: 'boolean'
|
138
|
+
},
|
139
|
+
defaultValue: {
|
140
|
+
summary: false
|
141
|
+
}
|
142
|
+
}
|
143
|
+
},
|
144
|
+
isActionItem: {
|
145
|
+
description: 'If an item is an action item, it can not become active.',
|
146
|
+
control: 'boolean',
|
147
|
+
table: {
|
148
|
+
category: 'ifx-sidebar-item props',
|
149
|
+
type: {
|
150
|
+
summary: 'boolean'
|
151
|
+
},
|
152
|
+
defaultValue: {
|
153
|
+
summary: false
|
154
|
+
},
|
155
|
+
}
|
156
|
+
},
|
157
|
+
ifxSidebarNavigationItem: {
|
158
|
+
action: 'ifxSidebarNavigationItem',
|
159
|
+
description: 'Custom event emitted by ifx-sidebar-item when a navigation item becomes active on selection.',
|
160
|
+
table: {
|
161
|
+
category: 'custom events',
|
162
|
+
type: {
|
163
|
+
summary: 'Framework integration',
|
164
|
+
detail: `
|
165
|
+
React: onIfxSidebarNavigationItem={handleChange}
|
166
|
+
Vue: @ifxSidebarNavigationItem="handleChange"
|
167
|
+
Angular: (ifxSidebarNavigationItem)="handleChange()"
|
168
|
+
VanillaJs: .addEventListener("ifxSidebarNavigationItem", (event) => {/*handle change*/});`
|
169
|
+
}
|
170
|
+
}
|
171
|
+
},
|
172
|
+
ifxSidebarActionItem: {
|
173
|
+
action: 'ifxSidebarActionItem',
|
174
|
+
description: 'Custom event emitted by ifx-sidebar-item when an action item is selected.',
|
175
|
+
table: {
|
176
|
+
category: 'custom events',
|
177
|
+
type: {
|
178
|
+
summary: 'Framework integration',
|
179
|
+
detail: `
|
180
|
+
React: onIfxSidebarActionItem={handleAction}
|
181
|
+
Vue: @ifxSidebarActionItem="handleAction"
|
182
|
+
Angular: (ifxSidebarActionItem)="handleAction()"
|
183
|
+
VanillaJs: .addEventListener("ifxSidebarActionItem", (event) => {/*handle action*/});`
|
184
|
+
},
|
185
|
+
}
|
186
|
+
},
|
187
|
+
ifxSidebarMenu: {
|
188
|
+
action: 'ifxSidebarMenu',
|
189
|
+
description: 'Custom event emitted by ifx-sidebar-item when a menu is expanded or closed.',
|
190
|
+
table: {
|
191
|
+
category: 'custom events',
|
192
|
+
type: {
|
193
|
+
summary: 'Framework integration',
|
194
|
+
detail: `
|
195
|
+
React: onIfxSidebarMenu={handleMenu}
|
196
|
+
Vue: @ifxSidebarMenu="handleMenu"
|
197
|
+
Angular: (ifxSidebarMenu)="handleMenu()"
|
198
|
+
VanillaJs: .addEventListener("ifxSidebarMenu", (event) => {/*handle menu*/});`
|
199
|
+
},
|
200
|
+
},
|
37
201
|
},
|
38
202
|
},
|
39
203
|
};
|
@@ -53,13 +217,13 @@ const DefaultTemplate = args => {
|
|
53
217
|
sidebarElement.setAttribute('copyright-text', args.copyrightText);
|
54
218
|
sidebarElement.innerHTML = `
|
55
219
|
<ifx-sidebar-title>Menu Items</ifx-sidebar-title>
|
56
|
-
<ifx-sidebar-item href='https://google.com' target='_blank' icon='
|
57
|
-
<ifx-sidebar-item href='https://google.com' target='_blank' icon='
|
58
|
-
<ifx-sidebar-item href='https://google.com' target='_blank' icon='
|
59
|
-
<ifx-sidebar-item href='https://google.com' target='_blank' icon='
|
220
|
+
<ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Menu Item</ifx-sidebar-item>
|
221
|
+
<ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Menu Item</ifx-sidebar-item>
|
222
|
+
<ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Menu Item</ifx-sidebar-item>
|
223
|
+
<ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Menu Item</ifx-sidebar-item>
|
60
224
|
<ifx-sidebar-item>
|
61
225
|
Section
|
62
|
-
<ifx-sidebar-item href='https://google.com' target='_blank' icon='
|
226
|
+
<ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Menu Item</ifx-sidebar-item>
|
63
227
|
<ifx-sidebar-item icon='image-16'>
|
64
228
|
Menu Item
|
65
229
|
<ifx-sidebar-item>Sub menu item</ifx-sidebar-item>
|
@@ -70,8 +234,8 @@ const DefaultTemplate = args => {
|
|
70
234
|
<ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>
|
71
235
|
</ifx-sidebar-item>
|
72
236
|
<ifx-sidebar-title>Items group</ifx-sidebar-title>
|
73
|
-
<ifx-sidebar-item href=
|
74
|
-
<ifx-sidebar-item href='https://google.com' target='_blank' icon='
|
237
|
+
<ifx-sidebar-item href="${args.hrefOfSidebarItem}" target="${args.targetOfSidebarItem}" icon="${args.icon === 'none' ? '' : args.icon}" number-indicator="${args.numberIndicatorOfSidebarItem === "" ? '' : args.numberIndicatorOfSidebarItem}" isActionItem="${args.isActionItem}" active="${args.activeSidebarItem}">Item 1</ifx-sidebar-item>
|
238
|
+
<ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Item 2</ifx-sidebar-item>
|
75
239
|
`;
|
76
240
|
return sidebarElement;
|
77
241
|
};
|
@@ -126,7 +290,7 @@ const NumberIndicatorTemplate = () => `<ifx-sidebar application-name="Applicatio
|
|
126
290
|
3rd layer Menu Item
|
127
291
|
</ifx-sidebar-item>
|
128
292
|
|
129
|
-
<ifx-sidebar-item target="_blank" active="false" icon="image-16"
|
293
|
+
<ifx-sidebar-item target="_blank" active="false" icon="image-16">
|
130
294
|
This Page
|
131
295
|
</ifx-sidebar-item>
|
132
296
|
|
@@ -158,7 +322,7 @@ const NumberIndicatorTemplate = () => `<ifx-sidebar application-name="Applicatio
|
|
158
322
|
<ifx-sidebar-item active="false" is-action-item="false" target="_blank" icon="image-16">
|
159
323
|
Sub Menu Item
|
160
324
|
</ifx-sidebar-item>
|
161
|
-
<ifx-sidebar-item is-action-item="true" icon="image-16"
|
325
|
+
<ifx-sidebar-item is-action-item="true" icon="image-16">
|
162
326
|
This one too
|
163
327
|
</ifx-sidebar-item>
|
164
328
|
<ifx-sidebar-item is-action-item="false" target="_blank" icon="image-16">
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"sidebar.stories.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Navigation/Sidebar',\n // tags: ['autodocs'],\n\n args: {\n icon: true,\n applicationName: 'Application Name',\n showFooter: true,\n showHeader: true,\n initialCollapse: true,\n termsOfUse: 'https://yourwebsite.com/terms',\n imprint: 'https://yourwebsite.com/imprint',\n privacyPolicy: 'https://yourwebsite.com/privacy-policy',\n copyrightText: `© 1999 - ${new Date().getFullYear()} Infineon Technologies AG`,\n },\n\n argTypes: {\n ifxSidebarNavigationItem: {\n action: 'ifxSidebarNavigationItem',\n description: 'Custom event emitted when a navigation item becomes active on selection',\n },\n ifxSidebarActionItem: {\n action: 'ifxSidebarActionItem',\n description: 'Custom event emitted when an action item is selected',\n },\n ifxSidebarMenu: {\n action: 'ifxSidebarMenu',\n description: 'Custom event emitted when a menu is expanded or closed',\n },\n imprint: {\n if: { arg: 'showFooter', eq: true },\n },\n termsOfUse: {\n if: { arg: 'showFooter', eq: true },\n },\n privacyPolicy: {\n if: { arg: 'showFooter', eq: true },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n // Create the sidebar element and attach event listener\n const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n sidebarElement.setAttribute('application-name', args.applicationName);\n sidebarElement.addEventListener('ifxSidebarNavigationItem', action(`ifxSidebarNavigationItem`));\n sidebarElement.addEventListener('ifxSidebarActionItem', action(`ifxSidebarActionItem`));\n sidebarElement.addEventListener('ifxSidebarMenu', action(`ifxSidebarMenu`));\n\n sidebarElement.setAttribute('show-header', args.showHeader);\n sidebarElement.setAttribute('show-footer', args.showFooter);\n sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n sidebarElement.setAttribute('terms-of-use', args.termsOfUse);\n sidebarElement.setAttribute('imprint', args.imprint);\n sidebarElement.setAttribute('privacy-policy', args.privacyPolicy);\n sidebarElement.setAttribute('copyright-text', args.copyrightText);\n \n sidebarElement.innerHTML = `\n <ifx-sidebar-title>Menu Items</ifx-sidebar-title>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item>\n Section\n <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon='image-16'>\n Menu Item\n <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n <ifx-sidebar-item active=true>Sub menu item</ifx-sidebar-item>\n <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-title>Items group</ifx-sidebar-title>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Item 1</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Item 2</ifx-sidebar-item>\n `\n return sidebarElement;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\nconst SubmenuTemplate = args => {\n // Create the sidebar element and attach event listener\n const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n sidebarElement.setAttribute('application-name', args.applicationName);\n sidebarElement.addEventListener('ifxSidebarNavigationItem', action('ifxSidebarNavigationItem'));\n sidebarElement.addEventListener('ifxSidebarActionItem', action('ifxSidebarActionItem'));\n sidebarElement.addEventListener('ifxSidebarMenu', action('ifxSidebarMenu'));\n sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n\n // Create 3 sections\n for (let i = 0; i < 3; i++) {\n const sectionElement = document.createElement('ifx-sidebar-item');\n sectionElement.textContent = `Header Section ${i + 1}`;\n\n // In each section, create 3 menu items\n for (let j = 0; j < 3; j++) {\n const menuItemElement = document.createElement('ifx-sidebar-item');\n menuItemElement.setAttribute('icon', args.icon ? 'image-16' : '');\n menuItemElement.textContent = `Menu Item ${j + 1}`;\n\n // In the first menu item of each section, create 3 submenu items\n if (j === 0) {\n for (let k = 0; k < 3; k++) {\n const subMenuItemElement = document.createElement('ifx-sidebar-item');\n subMenuItemElement.textContent = `Sub Menu Item ${k + 1}`;\n menuItemElement.appendChild(subMenuItemElement);\n }\n }\n\n sectionElement.appendChild(menuItemElement);\n }\n sidebarElement.appendChild(sectionElement);\n }\n const firstSection = sidebarElement.querySelectorAll('ifx-sidebar-item')[0];\n const firstMenuItem = firstSection.querySelectorAll('ifx-sidebar-item')[0];\n\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('active', 'true'); //first submenu item\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('is-action-item', 'false');\n\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[1].setAttribute('is-action-item', 'true'); //2nd submenu item\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[2].setAttribute('is-action-item', 'true'); //3rd sub menu item\n\n return sidebarElement;\n};\n\nexport const WithSubmenu = SubmenuTemplate.bind({});\n\nconst NumberIndicatorTemplate = () =>\n `<ifx-sidebar application-name=\"Application name\">\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"5\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"1\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"23\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item active=\"false\">\n Header Section\n <ifx-sidebar-item icon=\"image-16\" active=\"false\" >\n Second layer\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n 3rd layer Menu Item\n </ifx-sidebar-item>\n\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\" value=\"thisPage\">\n This Page\n </ifx-sidebar-item>\n\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n 3rd layer Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n Second layer\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n Second layer\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n \n\n <ifx-sidebar-item>\n Header Section\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item active=\"false\" is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n Sub Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item is-action-item=\"true\" icon=\"image-16\" value=\"thisPage\">\n This one too\n </ifx-sidebar-item>\n <ifx-sidebar-item is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n\n <ifx-sidebar-item>\n Header Section\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n</ifx-sidebar>`;\n\nexport const WithNumberIndicator = NumberIndicatorTemplate.bind({});\n"]}
|
1
|
+
{"version":3,"file":"sidebar.stories.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Navigation/Sidebar',\n // tags: ['autodocs'],\n\n args: {\n icon: 'image-16',\n applicationName: 'Application Name',\n showFooter: true,\n showHeader: true,\n initialCollapse: true,\n termsOfUse: 'https://yourwebsite.com/terms',\n imprint: 'https://yourwebsite.com/imprint',\n privacyPolicy: 'https://yourwebsite.com/privacy-policy',\n copyrightText: `© 1999 - ${new Date().getFullYear()} Infineon Technologies AG`,\n numberIndicatorOfSidebarItem: \"\",\n hrefOfSidebarItem: 'https://google.com',\n targetOfSidebarItem: '_self',\n activeSidebarItem: false,\n isActionItem: false,\n },\n\n argTypes: {\n applicationName: {\n description: 'The name of the application to display at the top of the sidebar.',\n table: {\n category: 'ifx-sidebar props'\n }\n },\n showHeader: {\n description: 'Determines whether the header is displayed in the sidebar.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n showFooter: {\n description: 'Determines whether the footer is displayed in the sidebar.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n initialCollapse: {\n description: 'Determines if the sidebar should be collapsed by default when it first loads.',\n table: {\n category: 'ifx-sidebar props',\n defaultValue: {\n summary: true\n }\n }\n },\n imprint: {\n description: 'The URL link for the \"Imprint\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n termsOfUse: {\n description: 'The URL link for the \"Terms of Use\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n privacyPolicy: {\n description: 'The URL link for the \"Privacy Policy\" section in the sidebar footer.',\n if: { arg: 'showFooter', eq: true },\n table: {\n category: 'ifx-sidebar props'\n }\n },\n copyrightText: {\n description: 'The copyright text to display at the bottom of the sidebar.',\n table: {\n category: 'ifx-sidebar props'\n }\n },\n icon: {\n description: 'The icon to display for the sidebar items. Choose ***none*** to display no icon.',\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n control: 'select',\n table: {\n category: 'ifx-sidebar-item props',\n defaultValue: {\n summary: 'image-16'\n }\n }\n },\n hrefOfSidebarItem: {\n name: 'href',\n description: 'The URL of the sidebar item link.',\n control: 'text',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'string'\n },\n }\n },\n targetOfSidebarItem: {\n name: 'target',\n description: 'The target attribute of the sidebar item link.',\n control: 'text',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'string'\n },\n defaultValue: {\n summary: '_self'\n }\n }\n },\n numberIndicatorOfSidebarItem: {\n name: 'numberIndicator',\n description: 'The number indicator to display on the sidebar item.',\n control: 'text',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'string'\n }\n }\n },\n activeSidebarItem: {\n name: 'active',\n description: 'Set to true manually or by clicking on a navigation item.',\n control: 'boolean',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'boolean'\n },\n defaultValue: {\n summary: false\n }\n }\n },\n isActionItem: {\n description: 'If an item is an action item, it can not become active.',\n control: 'boolean',\n table: {\n category: 'ifx-sidebar-item props',\n type: {\n summary: 'boolean'\n },\n defaultValue: {\n summary: false\n },\n }\n },\n ifxSidebarNavigationItem: {\n action: 'ifxSidebarNavigationItem',\n description: 'Custom event emitted by ifx-sidebar-item when a navigation item becomes active on selection.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxSidebarNavigationItem={handleChange}\nVue: @ifxSidebarNavigationItem=\"handleChange\"\nAngular: (ifxSidebarNavigationItem)=\"handleChange()\"\nVanillaJs: .addEventListener(\"ifxSidebarNavigationItem\", (event) => {/*handle change*/});`\n }\n }\n },\n ifxSidebarActionItem: {\n action: 'ifxSidebarActionItem',\n description: 'Custom event emitted by ifx-sidebar-item when an action item is selected.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxSidebarActionItem={handleAction}\nVue: @ifxSidebarActionItem=\"handleAction\"\nAngular: (ifxSidebarActionItem)=\"handleAction()\"\nVanillaJs: .addEventListener(\"ifxSidebarActionItem\", (event) => {/*handle action*/});`\n },\n }\n },\n ifxSidebarMenu: {\n action: 'ifxSidebarMenu',\n description: 'Custom event emitted by ifx-sidebar-item when a menu is expanded or closed.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxSidebarMenu={handleMenu}\nVue: @ifxSidebarMenu=\"handleMenu\"\nAngular: (ifxSidebarMenu)=\"handleMenu()\"\nVanillaJs: .addEventListener(\"ifxSidebarMenu\", (event) => {/*handle menu*/});`\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n // Create the sidebar element and attach event listener\n const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n sidebarElement.setAttribute('application-name', args.applicationName);\n sidebarElement.addEventListener('ifxSidebarNavigationItem', action(`ifxSidebarNavigationItem`));\n sidebarElement.addEventListener('ifxSidebarActionItem', action(`ifxSidebarActionItem`));\n sidebarElement.addEventListener('ifxSidebarMenu', action(`ifxSidebarMenu`));\n\n sidebarElement.setAttribute('show-header', args.showHeader);\n sidebarElement.setAttribute('show-footer', args.showFooter);\n sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n sidebarElement.setAttribute('terms-of-use', args.termsOfUse);\n sidebarElement.setAttribute('imprint', args.imprint);\n sidebarElement.setAttribute('privacy-policy', args.privacyPolicy);\n sidebarElement.setAttribute('copyright-text', args.copyrightText);\n\n sidebarElement.innerHTML = `\n <ifx-sidebar-title>Menu Items</ifx-sidebar-title>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item>\n Section\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon='image-16'>\n Menu Item\n <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n <ifx-sidebar-item active=true>Sub menu item</ifx-sidebar-item>\n <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-title>Items group</ifx-sidebar-title>\n <ifx-sidebar-item href=\"${args.hrefOfSidebarItem}\" target=\"${args.targetOfSidebarItem}\" icon=\"${args.icon === 'none' ? '' : args.icon}\" number-indicator=\"${args.numberIndicatorOfSidebarItem === \"\" ? '' : args.numberIndicatorOfSidebarItem}\" isActionItem=\"${args.isActionItem}\" active=\"${args.activeSidebarItem}\">Item 1</ifx-sidebar-item>\n <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Item 2</ifx-sidebar-item>\n `\n return sidebarElement;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\nconst SubmenuTemplate = args => {\n // Create the sidebar element and attach event listener\n const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n sidebarElement.setAttribute('application-name', args.applicationName);\n sidebarElement.addEventListener('ifxSidebarNavigationItem', action('ifxSidebarNavigationItem'));\n sidebarElement.addEventListener('ifxSidebarActionItem', action('ifxSidebarActionItem'));\n sidebarElement.addEventListener('ifxSidebarMenu', action('ifxSidebarMenu'));\n sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n\n // Create 3 sections\n for (let i = 0; i < 3; i++) {\n const sectionElement = document.createElement('ifx-sidebar-item');\n sectionElement.textContent = `Header Section ${i + 1}`;\n\n // In each section, create 3 menu items\n for (let j = 0; j < 3; j++) {\n const menuItemElement = document.createElement('ifx-sidebar-item');\n menuItemElement.setAttribute('icon', args.icon ? 'image-16' : '');\n menuItemElement.textContent = `Menu Item ${j + 1}`;\n\n // In the first menu item of each section, create 3 submenu items\n if (j === 0) {\n for (let k = 0; k < 3; k++) {\n const subMenuItemElement = document.createElement('ifx-sidebar-item');\n subMenuItemElement.textContent = `Sub Menu Item ${k + 1}`;\n menuItemElement.appendChild(subMenuItemElement);\n }\n }\n\n sectionElement.appendChild(menuItemElement);\n }\n sidebarElement.appendChild(sectionElement);\n }\n const firstSection = sidebarElement.querySelectorAll('ifx-sidebar-item')[0];\n const firstMenuItem = firstSection.querySelectorAll('ifx-sidebar-item')[0];\n\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('active', 'true'); //first submenu item\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('is-action-item', 'false');\n\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[1].setAttribute('is-action-item', 'true'); //2nd submenu item\n firstMenuItem.querySelectorAll('ifx-sidebar-item')[2].setAttribute('is-action-item', 'true'); //3rd sub menu item\n\n return sidebarElement;\n};\n\nexport const WithSubmenu = SubmenuTemplate.bind({});\n\nconst NumberIndicatorTemplate = () =>\n `<ifx-sidebar application-name=\"Application name\">\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"5\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"1\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\" number-indicator=\"23\">Menu Item</ifx-sidebar-item>\n <ifx-sidebar-item active=\"false\">\n Header Section\n <ifx-sidebar-item icon=\"image-16\" active=\"false\" >\n Second layer\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n 3rd layer Menu Item\n </ifx-sidebar-item>\n\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n This Page\n </ifx-sidebar-item>\n\n <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n 3rd layer Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n Second layer\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n Second layer\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n \n\n <ifx-sidebar-item>\n Header Section\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item active=\"false\" is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n Sub Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item is-action-item=\"true\" icon=\"image-16\">\n This one too\n </ifx-sidebar-item>\n <ifx-sidebar-item is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n\n\n <ifx-sidebar-item>\n Header Section\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n <ifx-sidebar-item icon=\"image-16\">\n Menu Item\n <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n Menu Item\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n </ifx-sidebar-item>\n</ifx-sidebar>`;\n\nexport const WithNumberIndicator = NumberIndicatorTemplate.bind({});\n"]}
|
@@ -3,7 +3,7 @@ export default {
|
|
3
3
|
title: 'Components/Notification',
|
4
4
|
tags: ['autodocs'],
|
5
5
|
args: {
|
6
|
-
|
6
|
+
label: "Sample Notification",
|
7
7
|
variant: 'success',
|
8
8
|
icon: 'c-check-16',
|
9
9
|
linkText: 'Link',
|
@@ -11,39 +11,86 @@ export default {
|
|
11
11
|
linkTarget: '_blank',
|
12
12
|
},
|
13
13
|
argTypes: {
|
14
|
-
|
15
|
-
|
14
|
+
label: {
|
15
|
+
name: 'Label of Notification',
|
16
|
+
description: 'Set the text label of the *<ifx-notification>*.',
|
17
|
+
table: {
|
18
|
+
category: 'story controls',
|
19
|
+
type: {
|
20
|
+
summary: 'string'
|
21
|
+
}
|
22
|
+
}
|
16
23
|
},
|
17
24
|
variant: {
|
18
25
|
description: 'Variant of the notification.',
|
19
26
|
options: ['success', 'warning', 'error'],
|
20
27
|
control: { type: 'radio' },
|
28
|
+
table: {
|
29
|
+
category: 'ifx-notification props',
|
30
|
+
defaultValue: {
|
31
|
+
summary: 'success'
|
32
|
+
},
|
33
|
+
type: {
|
34
|
+
summary: 'success | warning | error'
|
35
|
+
}
|
36
|
+
}
|
21
37
|
},
|
22
38
|
icon: {
|
23
|
-
description: 'The icon to be displayed in the notification.',
|
24
|
-
options: Object.values(icons).map(i => i['name']),
|
39
|
+
description: 'The icon to be displayed in the notification. Choose "none" to display no icon.',
|
40
|
+
options: ['none', ...Object.values(icons).map(i => i['name'])],
|
25
41
|
control: { type: 'select' },
|
42
|
+
table: {
|
43
|
+
category: 'ifx-notification props',
|
44
|
+
type: {
|
45
|
+
summary: 'string'
|
46
|
+
}
|
47
|
+
}
|
26
48
|
},
|
27
49
|
linkText: {
|
28
50
|
description: 'Text for the link.',
|
51
|
+
table: {
|
52
|
+
category: 'ifx-notification props',
|
53
|
+
type: {
|
54
|
+
summary: 'string'
|
55
|
+
}
|
56
|
+
}
|
29
57
|
},
|
30
58
|
linkHref: {
|
31
59
|
description: 'URL for the link.',
|
60
|
+
table: {
|
61
|
+
category: 'ifx-notification props',
|
62
|
+
type: {
|
63
|
+
summary: 'string'
|
64
|
+
}
|
65
|
+
}
|
32
66
|
},
|
33
67
|
linkTarget: {
|
34
68
|
options: ['_blank', '_self', '_parent'],
|
35
69
|
control: { type: 'radio' },
|
70
|
+
description: 'Specifies where to open the linked document.',
|
71
|
+
table: {
|
72
|
+
category: 'ifx-notification props',
|
73
|
+
defaultValue: {
|
74
|
+
summary: '_blank'
|
75
|
+
},
|
76
|
+
type: {
|
77
|
+
summary: '_blank | _self | _parent'
|
78
|
+
}
|
79
|
+
}
|
36
80
|
},
|
37
81
|
},
|
38
82
|
};
|
39
|
-
const DefaultTemplate = args =>
|
40
|
-
|
83
|
+
const DefaultTemplate = args => {
|
84
|
+
const icon = args.icon === 'none' ? '' : args.icon;
|
85
|
+
return `<ifx-notification
|
86
|
+
icon = "${icon}"
|
41
87
|
variant="${args.variant}"
|
42
88
|
link-text="${args.linkText}"
|
43
89
|
link-href="${args.linkHref}"
|
44
90
|
link-target="${args.linkTarget}">
|
45
|
-
${args.
|
91
|
+
${args.label}
|
46
92
|
</ifx-notification>`;
|
93
|
+
};
|
47
94
|
export const Default = DefaultTemplate.bind({});
|
48
95
|
Default.argTypes = {};
|
49
96
|
//# sourceMappingURL=notification.stories.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"notification.stories.js","sourceRoot":"","sources":["../../../src/components/notification/notification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,
|
1
|
+
{"version":3,"file":"notification.stories.js","sourceRoot":"","sources":["../../../src/components/notification/notification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,qBAAqB;QAC5B,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,yBAAyB;QACnC,UAAU,EAAE,QAAQ;KACrB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,uBAAuB;YAC7B,WAAW,EAAE,iDAAiD;YAC9D,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,8BAA8B;YAC3C,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;YACxC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,2BAA2B;iBACrC;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,iFAAiF;YAC9F,OAAO,EAAE,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;YAC9D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,oBAAoB;YACjC,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,mBAAmB;YAChC,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,WAAW,EAAE,8CAA8C;YAC3D,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,0BAA0B;iBACpC;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IAEnD,OAAO;YACG,IAAI;aACH,IAAI,CAAC,OAAO;eACV,IAAI,CAAC,QAAQ;eACb,IAAI,CAAC,QAAQ;iBACX,IAAI,CAAC,UAAU;IAC5B,IAAI,CAAC,KAAK;oBACM,CAAC;AACrB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Notification',\n tags: ['autodocs'],\n\n args: {\n label: \"Sample Notification\",\n variant: 'success',\n icon: 'c-check-16',\n linkText: 'Link',\n linkHref: 'https://www.example.com',\n linkTarget: '_blank',\n },\n argTypes: {\n label: {\n name: 'Label of Notification',\n description: 'Set the text label of the *<ifx-notification>*.',\n table: {\n category: 'story controls',\n type: {\n summary: 'string'\n }\n }\n },\n variant: {\n description: 'Variant of the notification.',\n options: ['success', 'warning', 'error'],\n control: { type: 'radio' },\n table: {\n category: 'ifx-notification props',\n defaultValue: {\n summary: 'success'\n },\n type: {\n summary: 'success | warning | error'\n }\n }\n },\n icon: {\n description: 'The icon to be displayed in the notification. Choose \"none\" to display no icon.',\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n control: { type: 'select' },\n table: {\n category: 'ifx-notification props',\n type: {\n summary: 'string'\n }\n }\n },\n linkText: {\n description: 'Text for the link.',\n table: {\n category: 'ifx-notification props',\n type: {\n summary: 'string'\n }\n }\n },\n linkHref: {\n description: 'URL for the link.',\n table: {\n category: 'ifx-notification props',\n type: {\n summary: 'string'\n }\n }\n },\n linkTarget: {\n options: ['_blank', '_self', '_parent'],\n control: { type: 'radio' },\n description: 'Specifies where to open the linked document.',\n table: {\n category: 'ifx-notification props',\n defaultValue: {\n summary: '_blank'\n },\n type: {\n summary: '_blank | _self | _parent'\n }\n }\n },\n },\n};\n\nconst DefaultTemplate = args => {\n const icon = args.icon === 'none' ? '' : args.icon;\n\n return `<ifx-notification \n icon = \"${icon}\"\n variant=\"${args.variant}\" \n link-text=\"${args.linkText}\" \n link-href=\"${args.linkHref}\"\n link-target=\"${args.linkTarget}\">\n ${args.label}\n</ifx-notification>`;\n}\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
|
@@ -5,6 +5,25 @@ export default {
|
|
5
5
|
label: 1,
|
6
6
|
inverted: false,
|
7
7
|
},
|
8
|
+
argTypes: {
|
9
|
+
label: {
|
10
|
+
name: 'Label of Number Indicator',
|
11
|
+
description: 'Set the number displayed inside the *<ifx-number-indicator>*.',
|
12
|
+
table: {
|
13
|
+
category: 'story controls'
|
14
|
+
}
|
15
|
+
},
|
16
|
+
inverted: {
|
17
|
+
description: 'Toggles the color scheme of the number indicator.',
|
18
|
+
control: 'boolean',
|
19
|
+
table: {
|
20
|
+
category: 'ifx-number-indicator props',
|
21
|
+
defaultValue: {
|
22
|
+
summary: false
|
23
|
+
}
|
24
|
+
}
|
25
|
+
}
|
26
|
+
}
|
8
27
|
};
|
9
28
|
const DefaultTemplate = args => `<ifx-number-indicator inverted="${args.inverted}">${args.label}</ifx-number-indicator>`;
|
10
29
|
export const Default = DefaultTemplate.bind({});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"number-indicator.stories.js","sourceRoot":"","sources":["../../../src/components/number-indicator/number-indicator.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,mCAAmC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,yBAAyB,CAAC;AAEzH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n title: 'Components/Number Indicator',\n tags: ['autodocs'],\n\n args: {\n label: 1,\n inverted: false,\n },\n};\n\nconst DefaultTemplate = args => `<ifx-number-indicator inverted=\"${args.inverted}\">${args.label}</ifx-number-indicator>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
|
1
|
+
{"version":3,"file":"number-indicator.stories.js","sourceRoot":"","sources":["../../../src/components/number-indicator/number-indicator.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,2BAA2B;YACjC,WAAW,EAAE,+DAA+D;YAC5E,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,mDAAmD;YAChE,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,4BAA4B;gBACtC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,mCAAmC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,yBAAyB,CAAC;AAEzH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n title: 'Components/Number Indicator',\n tags: ['autodocs'],\n\n args: {\n label: 1,\n inverted: false,\n },\n argTypes: {\n label: {\n name: 'Label of Number Indicator',\n description: 'Set the number displayed inside the *<ifx-number-indicator>*.',\n table: {\n category: 'story controls'\n }\n },\n inverted: {\n description: 'Toggles the color scheme of the number indicator.',\n control: 'boolean',\n table: {\n category: 'ifx-number-indicator props',\n defaultValue: {\n summary: false\n }\n }\n }\n }\n};\n\nconst DefaultTemplate = args => `<ifx-number-indicator inverted=\"${args.inverted}\">${args.label}</ifx-number-indicator>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
|
@@ -137,7 +137,7 @@ export class Pagination {
|
|
137
137
|
this.initPagination(paginationElement);
|
138
138
|
}
|
139
139
|
render() {
|
140
|
-
return (h("div", { key: '
|
140
|
+
return (h("div", { key: 'db55804ece2792b117f6f5375a6f63253679a393', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'bc40446f5905c3f249d243993d7363479d6ce384', class: 'items__per-page-wrapper' }, h("div", { key: '9c15d938fc18b93fc7e8c10339b71649575386ca', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '0b7ba079ffa28c5732df989988afd65396c8adc9', class: 'items__per-page-field' }, h("ifx-select", { key: '1a031fa45753fc389e3ab386ab6170f50d1df0f0', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }))), h("div", { key: 'd5bd11d957dd37b5af1df9d285ae4098c93c3365', class: 'items__total-wrapper' }, h("div", { key: '295766066233b8b0f975abcc093cc43839b46125', class: 'page__numbers-wrapper' }, h("div", { key: '574f2ef606d94c2a6ad16c9b9684f158f3595422', class: "pagination" }, h("ifx-icon-button", { key: 'f98a3b995d2f08124e2f2e3f96e64cccd7b81b33', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '07630c257729a369d07baf12e99c0469fccebe0d' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '8407562df387e20efa76fdf6ee2d1fe65e6eb6f6', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
|
141
141
|
}
|
142
142
|
static get is() { return "ifx-pagination"; }
|
143
143
|
static get encapsulation() { return "shadow"; }
|
@@ -218,36 +218,6 @@ export class Pagination {
|
|
218
218
|
"resolved": "any",
|
219
219
|
"references": {}
|
220
220
|
}
|
221
|
-
}, {
|
222
|
-
"method": "ifxNextPage",
|
223
|
-
"name": "ifxNextPage",
|
224
|
-
"bubbles": true,
|
225
|
-
"cancelable": true,
|
226
|
-
"composed": true,
|
227
|
-
"docs": {
|
228
|
-
"tags": [],
|
229
|
-
"text": ""
|
230
|
-
},
|
231
|
-
"complexType": {
|
232
|
-
"original": "any",
|
233
|
-
"resolved": "any",
|
234
|
-
"references": {}
|
235
|
-
}
|
236
|
-
}, {
|
237
|
-
"method": "ifxPrevPage",
|
238
|
-
"name": "ifxPrevPage",
|
239
|
-
"bubbles": true,
|
240
|
-
"cancelable": true,
|
241
|
-
"composed": true,
|
242
|
-
"docs": {
|
243
|
-
"tags": [],
|
244
|
-
"text": ""
|
245
|
-
},
|
246
|
-
"complexType": {
|
247
|
-
"original": "any",
|
248
|
-
"resolved": "any",
|
249
|
-
"references": {}
|
250
|
-
}
|
251
221
|
}];
|
252
222
|
}
|
253
223
|
static get elementRef() { return "el"; }
|