@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.
Files changed (280) hide show
  1. package/dist/cjs/ifx-accordion_2.cjs.entry.js +7 -7
  2. package/dist/cjs/ifx-accordion_2.cjs.entry.js.map +1 -1
  3. package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js +2 -2
  4. package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js.map +1 -1
  5. package/dist/cjs/ifx-breadcrumb.cjs.entry.js +3 -3
  6. package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map +1 -1
  7. package/dist/cjs/ifx-chip_3.cjs.entry.js +19 -21
  8. package/dist/cjs/ifx-chip_3.cjs.entry.js.map +1 -1
  9. package/dist/cjs/ifx-modal.cjs.entry.js +8 -8
  10. package/dist/cjs/ifx-modal.cjs.entry.js.map +1 -1
  11. package/dist/cjs/ifx-multiselect_2.cjs.entry.js +5 -5
  12. package/dist/cjs/ifx-multiselect_2.cjs.entry.js.map +1 -1
  13. package/dist/cjs/ifx-search-bar.cjs.entry.js +5 -5
  14. package/dist/cjs/ifx-search-bar.cjs.entry.js.map +1 -1
  15. package/dist/cjs/ifx-sidebar-item.cjs.entry.js +9 -10
  16. package/dist/cjs/ifx-sidebar-item.cjs.entry.js.map +1 -1
  17. package/dist/cjs/ifx-table.cjs.entry.js +22 -20
  18. package/dist/cjs/ifx-table.cjs.entry.js.map +1 -1
  19. package/dist/cjs/ifx-tabs.cjs.entry.js +6 -6
  20. package/dist/cjs/ifx-tabs.cjs.entry.js.map +1 -1
  21. package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
  22. package/dist/cjs/loader.cjs.js +1 -1
  23. package/dist/collection/components/accordion/accordion.js +2 -2
  24. package/dist/collection/components/accordion/accordion.js.map +1 -1
  25. package/dist/collection/components/accordion/accordion.stories.js +81 -7
  26. package/dist/collection/components/accordion/accordion.stories.js.map +1 -1
  27. package/dist/collection/components/accordion/accordionItem.js +10 -10
  28. package/dist/collection/components/accordion/accordionItem.js.map +1 -1
  29. package/dist/collection/components/alert/alert.stories.js +45 -12
  30. package/dist/collection/components/alert/alert.stories.js.map +1 -1
  31. package/dist/collection/components/badge/badge.stories.js +28 -7
  32. package/dist/collection/components/badge/badge.stories.js.map +1 -1
  33. package/dist/collection/components/breadcrumb/breadcrumb-item-label.js +4 -4
  34. package/dist/collection/components/breadcrumb/breadcrumb-item-label.js.map +1 -1
  35. package/dist/collection/components/breadcrumb/breadcrumb.js +3 -3
  36. package/dist/collection/components/breadcrumb/breadcrumb.js.map +1 -1
  37. package/dist/collection/components/breadcrumb/breadcrumb.stories.js +87 -13
  38. package/dist/collection/components/breadcrumb/breadcrumb.stories.js.map +1 -1
  39. package/dist/collection/components/button/button.stories.js +101 -9
  40. package/dist/collection/components/button/button.stories.js.map +1 -1
  41. package/dist/collection/components/card/card.stories.js +84 -3
  42. package/dist/collection/components/card/card.stories.js.map +1 -1
  43. package/dist/collection/components/checkbox/checkbox.stories.js +72 -14
  44. package/dist/collection/components/checkbox/checkbox.stories.js.map +1 -1
  45. package/dist/collection/components/chip/chip-item/chip-item.js +4 -4
  46. package/dist/collection/components/chip/chip-item/chip-item.js.map +1 -1
  47. package/dist/collection/components/chip/chip.js +15 -15
  48. package/dist/collection/components/chip/chip.js.map +1 -1
  49. package/dist/collection/components/chip/chip.stories.js +18 -26
  50. package/dist/collection/components/chip/chip.stories.js.map +1 -1
  51. package/dist/collection/components/chip/interfaces.js.map +1 -1
  52. package/dist/collection/components/content-switcher/content-switcher.stories.js +65 -3
  53. package/dist/collection/components/content-switcher/content-switcher.stories.js.map +1 -1
  54. package/dist/collection/components/date-picker/date-picker.stories.js +95 -7
  55. package/dist/collection/components/date-picker/date-picker.stories.js.map +1 -1
  56. package/dist/collection/components/dropdown/dropdown.stories.js +222 -64
  57. package/dist/collection/components/dropdown/dropdown.stories.js.map +1 -1
  58. package/dist/collection/components/footer/footer.stories.js +7 -1
  59. package/dist/collection/components/footer/footer.stories.js.map +1 -1
  60. package/dist/collection/components/icon/infineonIconStencil.stories.js +7 -2
  61. package/dist/collection/components/icon/infineonIconStencil.stories.js.map +1 -1
  62. package/dist/collection/components/icon-button/icon-button.stories.js +61 -5
  63. package/dist/collection/components/icon-button/icon-button.stories.js.map +1 -1
  64. package/dist/collection/components/link/link.stories.js +53 -4
  65. package/dist/collection/components/link/link.stories.js.map +1 -1
  66. package/dist/collection/components/modal/modal.js +10 -10
  67. package/dist/collection/components/modal/modal.js.map +1 -1
  68. package/dist/collection/components/modal/modal.stories.js +96 -19
  69. package/dist/collection/components/modal/modal.stories.js.map +1 -1
  70. package/dist/collection/components/navigation/navbar/navbar.stories.js +176 -12
  71. package/dist/collection/components/navigation/navbar/navbar.stories.js.map +1 -1
  72. package/dist/collection/components/navigation/sidebar/sidebar-item.js +11 -32
  73. package/dist/collection/components/navigation/sidebar/sidebar-item.js.map +1 -1
  74. package/dist/collection/components/navigation/sidebar/sidebar.stories.js +183 -19
  75. package/dist/collection/components/navigation/sidebar/sidebar.stories.js.map +1 -1
  76. package/dist/collection/components/notification/notification.stories.js +55 -8
  77. package/dist/collection/components/notification/notification.stories.js.map +1 -1
  78. package/dist/collection/components/number-indicator/number-indicator.stories.js +19 -0
  79. package/dist/collection/components/number-indicator/number-indicator.stories.js.map +1 -1
  80. package/dist/collection/components/pagination/pagination.js +1 -31
  81. package/dist/collection/components/pagination/pagination.js.map +1 -1
  82. package/dist/collection/components/pagination/pagination.stories.js +19 -14
  83. package/dist/collection/components/pagination/pagination.stories.js.map +1 -1
  84. package/dist/collection/components/progress-bar/progress-bar.stories.js +31 -8
  85. package/dist/collection/components/progress-bar/progress-bar.stories.js.map +1 -1
  86. package/dist/collection/components/radio-button/radio-button.stories.js +66 -13
  87. package/dist/collection/components/radio-button/radio-button.stories.js.map +1 -1
  88. package/dist/collection/components/search-bar/search-bar.js +6 -6
  89. package/dist/collection/components/search-bar/search-bar.js.map +1 -1
  90. package/dist/collection/components/search-bar/search-bar.stories.js +58 -9
  91. package/dist/collection/components/search-bar/search-bar.stories.js.map +1 -1
  92. package/dist/collection/components/search-field/search-field.stories.js +54 -8
  93. package/dist/collection/components/search-field/search-field.stories.js.map +1 -1
  94. package/dist/collection/components/segmented-control/segmented-control.stories.js +1 -10
  95. package/dist/collection/components/segmented-control/segmented-control.stories.js.map +1 -1
  96. package/dist/collection/components/select/multi-select/multiselect.js +6 -6
  97. package/dist/collection/components/select/multi-select/multiselect.js.map +1 -1
  98. package/dist/collection/components/select/multi-select/multiselect.stories.js +131 -5
  99. package/dist/collection/components/select/multi-select/multiselect.stories.js.map +1 -1
  100. package/dist/collection/components/select/single-select/select.stories.js +83 -26
  101. package/dist/collection/components/select/single-select/select.stories.js.map +1 -1
  102. package/dist/collection/components/slider/slider.stories.js +97 -13
  103. package/dist/collection/components/slider/slider.stories.js.map +1 -1
  104. package/dist/collection/components/spinner/spinner.stories.js +34 -2
  105. package/dist/collection/components/spinner/spinner.stories.js.map +1 -1
  106. package/dist/collection/components/status/status.stories.js +25 -1
  107. package/dist/collection/components/status/status.stories.js.map +1 -1
  108. package/dist/collection/components/stepper/stepper.stories.js +54 -25
  109. package/dist/collection/components/stepper/stepper.stories.js.map +1 -1
  110. package/dist/collection/components/switch/switch.stories.js +51 -4
  111. package/dist/collection/components/switch/switch.stories.js.map +1 -1
  112. package/dist/collection/components/table-advanced-version/table.js +23 -21
  113. package/dist/collection/components/table-advanced-version/table.js.map +1 -1
  114. package/dist/collection/components/table-advanced-version/table.stories.js +124 -39
  115. package/dist/collection/components/table-advanced-version/table.stories.js.map +1 -1
  116. package/dist/collection/components/table-basic-version/table.stories.js +30 -3
  117. package/dist/collection/components/table-basic-version/table.stories.js.map +1 -1
  118. package/dist/collection/components/tabs/tabs.js +7 -7
  119. package/dist/collection/components/tabs/tabs.js.map +1 -1
  120. package/dist/collection/components/tabs/tabs.stories.js +104 -29
  121. package/dist/collection/components/tabs/tabs.stories.js.map +1 -1
  122. package/dist/collection/components/tag/tag.stories.js +18 -0
  123. package/dist/collection/components/tag/tag.stories.js.map +1 -1
  124. package/dist/collection/components/text-field/text-field.stories.js +116 -13
  125. package/dist/collection/components/text-field/text-field.stories.js.map +1 -1
  126. package/dist/collection/components/textarea/textarea.stories.js +1 -3
  127. package/dist/collection/components/textarea/textarea.stories.js.map +1 -1
  128. package/dist/collection/components/tooltip/tooltip.stories.js +48 -4
  129. package/dist/collection/components/tooltip/tooltip.stories.js.map +1 -1
  130. package/dist/components/ifx-accordion-item.js +1 -1
  131. package/dist/components/ifx-accordion.js +1 -1
  132. package/dist/components/ifx-breadcrumb-item-label.js +3 -3
  133. package/dist/components/ifx-breadcrumb-item-label.js.map +1 -1
  134. package/dist/components/ifx-breadcrumb.js +3 -3
  135. package/dist/components/ifx-breadcrumb.js.map +1 -1
  136. package/dist/components/ifx-chip-item.js +1 -1
  137. package/dist/components/ifx-chip.js +1 -1
  138. package/dist/components/ifx-faq.js +2 -2
  139. package/dist/components/ifx-modal.js +8 -8
  140. package/dist/components/ifx-modal.js.map +1 -1
  141. package/dist/components/ifx-multiselect.js +1 -1
  142. package/dist/components/ifx-pagination.js +1 -1
  143. package/dist/components/ifx-search-bar.js +5 -5
  144. package/dist/components/ifx-search-bar.js.map +1 -1
  145. package/dist/components/ifx-set-filter.js +1 -1
  146. package/dist/components/ifx-sidebar-item.js +11 -13
  147. package/dist/components/ifx-sidebar-item.js.map +1 -1
  148. package/dist/components/ifx-table.js +26 -24
  149. package/dist/components/ifx-table.js.map +1 -1
  150. package/dist/components/ifx-tabs.js +6 -6
  151. package/dist/components/ifx-tabs.js.map +1 -1
  152. package/dist/components/{p-b2439194.js → p-053d42ef.js} +8 -8
  153. package/dist/components/{p-b2439194.js.map → p-053d42ef.js.map} +1 -1
  154. package/dist/components/{p-094bb435.js → p-3baaa460.js} +3 -3
  155. package/dist/components/{p-094bb435.js.map → p-3baaa460.js.map} +1 -1
  156. package/dist/components/{p-184f1004.js → p-793d89e7.js} +15 -15
  157. package/dist/components/p-793d89e7.js.map +1 -0
  158. package/dist/components/{p-23cdd5a7.js → p-7b5e297f.js} +5 -5
  159. package/dist/components/p-7b5e297f.js.map +1 -0
  160. package/dist/components/{p-2f1e7628.js → p-b85fba0e.js} +2 -4
  161. package/dist/components/p-b85fba0e.js.map +1 -0
  162. package/dist/components/{p-04b73e62.js → p-cf8fd0f4.js} +6 -6
  163. package/dist/components/p-cf8fd0f4.js.map +1 -0
  164. package/dist/esm/ifx-accordion_2.entry.js +7 -7
  165. package/dist/esm/ifx-accordion_2.entry.js.map +1 -1
  166. package/dist/esm/ifx-breadcrumb-item-label.entry.js +2 -2
  167. package/dist/esm/ifx-breadcrumb-item-label.entry.js.map +1 -1
  168. package/dist/esm/ifx-breadcrumb.entry.js +3 -3
  169. package/dist/esm/ifx-breadcrumb.entry.js.map +1 -1
  170. package/dist/esm/ifx-chip_3.entry.js +19 -21
  171. package/dist/esm/ifx-chip_3.entry.js.map +1 -1
  172. package/dist/esm/ifx-modal.entry.js +8 -8
  173. package/dist/esm/ifx-modal.entry.js.map +1 -1
  174. package/dist/esm/ifx-multiselect_2.entry.js +5 -5
  175. package/dist/esm/ifx-multiselect_2.entry.js.map +1 -1
  176. package/dist/esm/ifx-search-bar.entry.js +5 -5
  177. package/dist/esm/ifx-search-bar.entry.js.map +1 -1
  178. package/dist/esm/ifx-sidebar-item.entry.js +9 -10
  179. package/dist/esm/ifx-sidebar-item.entry.js.map +1 -1
  180. package/dist/esm/ifx-table.entry.js +22 -20
  181. package/dist/esm/ifx-table.entry.js.map +1 -1
  182. package/dist/esm/ifx-tabs.entry.js +6 -6
  183. package/dist/esm/ifx-tabs.entry.js.map +1 -1
  184. package/dist/esm/infineon-design-system-stencil.js +1 -1
  185. package/dist/esm/loader.js +1 -1
  186. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  187. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
  188. package/dist/infineon-design-system-stencil/p-26df4dfe.entry.js +2 -0
  189. package/dist/infineon-design-system-stencil/{p-28fb795b.entry.js.map → p-26df4dfe.entry.js.map} +1 -1
  190. package/dist/infineon-design-system-stencil/p-355cea09.entry.js +2 -0
  191. package/dist/infineon-design-system-stencil/p-355cea09.entry.js.map +1 -0
  192. package/dist/infineon-design-system-stencil/{p-00d6e46e.entry.js → p-602edb1f.entry.js} +2 -2
  193. package/dist/infineon-design-system-stencil/p-602edb1f.entry.js.map +1 -0
  194. package/dist/infineon-design-system-stencil/p-60dcd508.entry.js +2 -0
  195. package/dist/infineon-design-system-stencil/p-60dcd508.entry.js.map +1 -0
  196. package/dist/infineon-design-system-stencil/p-68752789.entry.js +2 -0
  197. package/dist/infineon-design-system-stencil/p-68752789.entry.js.map +1 -0
  198. package/dist/infineon-design-system-stencil/p-6a274db4.entry.js +2 -0
  199. package/dist/infineon-design-system-stencil/p-6a274db4.entry.js.map +1 -0
  200. package/dist/infineon-design-system-stencil/p-71fda335.entry.js +2 -0
  201. package/dist/infineon-design-system-stencil/p-71fda335.entry.js.map +1 -0
  202. package/dist/infineon-design-system-stencil/p-7741e81d.entry.js +2 -0
  203. package/dist/infineon-design-system-stencil/p-7741e81d.entry.js.map +1 -0
  204. package/dist/infineon-design-system-stencil/{p-bc8a4226.entry.js → p-d93eb561.entry.js} +2 -2
  205. package/dist/infineon-design-system-stencil/p-d93eb561.entry.js.map +1 -0
  206. package/dist/infineon-design-system-stencil/p-df6cadc1.entry.js +2 -0
  207. package/dist/infineon-design-system-stencil/p-df6cadc1.entry.js.map +1 -0
  208. package/dist/types/components/accordion/accordion.stories.d.ts +67 -1
  209. package/dist/types/components/accordion/accordionItem.d.ts +3 -3
  210. package/dist/types/components/alert/alert.stories.d.ts +38 -11
  211. package/dist/types/components/badge/badge.stories.d.ts +23 -3
  212. package/dist/types/components/breadcrumb/breadcrumb-item-label.d.ts +1 -1
  213. package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +83 -1
  214. package/dist/types/components/button/button.stories.d.ts +92 -16
  215. package/dist/types/components/card/card.stories.d.ts +95 -1
  216. package/dist/types/components/checkbox/checkbox.stories.d.ts +65 -10
  217. package/dist/types/components/chip/chip-item/chip-item.d.ts +1 -1
  218. package/dist/types/components/chip/chip.d.ts +1 -1
  219. package/dist/types/components/chip/chip.stories.d.ts +11 -4
  220. package/dist/types/components/chip/interfaces.d.ts +1 -1
  221. package/dist/types/components/content-switcher/content-switcher.stories.d.ts +66 -0
  222. package/dist/types/components/date-picker/date-picker.stories.d.ts +88 -2
  223. package/dist/types/components/dropdown/dropdown.stories.d.ts +90 -33
  224. package/dist/types/components/footer/footer.stories.d.ts +4 -0
  225. package/dist/types/components/icon/infineonIconStencil.stories.d.ts +5 -0
  226. package/dist/types/components/icon-button/icon-button.stories.d.ts +56 -8
  227. package/dist/types/components/link/link.stories.d.ts +49 -6
  228. package/dist/types/components/modal/modal.d.ts +2 -2
  229. package/dist/types/components/modal/modal.stories.d.ts +77 -3
  230. package/dist/types/components/navigation/navbar/navbar.stories.d.ts +222 -6
  231. package/dist/types/components/navigation/sidebar/sidebar-item.d.ts +2 -3
  232. package/dist/types/components/navigation/sidebar/sidebar.stories.d.ts +158 -7
  233. package/dist/types/components/notification/notification.stories.d.ts +46 -2
  234. package/dist/types/components/number-indicator/number-indicator.stories.d.ts +19 -0
  235. package/dist/types/components/pagination/pagination.d.ts +0 -2
  236. package/dist/types/components/pagination/pagination.stories.d.ts +12 -7
  237. package/dist/types/components/progress-bar/progress-bar.stories.d.ts +25 -4
  238. package/dist/types/components/radio-button/radio-button.stories.d.ts +59 -8
  239. package/dist/types/components/search-bar/search-bar.d.ts +1 -1
  240. package/dist/types/components/search-bar/search-bar.stories.d.ts +60 -3
  241. package/dist/types/components/search-field/search-field.stories.d.ts +45 -6
  242. package/dist/types/components/segmented-control/segmented-control.stories.d.ts +0 -3
  243. package/dist/types/components/select/multi-select/multiselect.d.ts +1 -1
  244. package/dist/types/components/select/multi-select/multiselect.stories.d.ts +125 -0
  245. package/dist/types/components/select/single-select/select.stories.d.ts +67 -24
  246. package/dist/types/components/slider/slider.stories.d.ts +110 -0
  247. package/dist/types/components/spinner/spinner.stories.d.ts +32 -0
  248. package/dist/types/components/status/status.stories.d.ts +24 -2
  249. package/dist/types/components/stepper/stepper.stories.d.ts +30 -6
  250. package/dist/types/components/switch/switch.stories.d.ts +47 -1
  251. package/dist/types/components/table-advanced-version/table.stories.d.ts +50 -11
  252. package/dist/types/components/table-basic-version/table.stories.d.ts +21 -1
  253. package/dist/types/components/tabs/tabs.d.ts +1 -1
  254. package/dist/types/components/tabs/tabs.stories.d.ts +88 -9
  255. package/dist/types/components/tag/tag.stories.d.ts +20 -0
  256. package/dist/types/components/text-field/text-field.stories.d.ts +106 -10
  257. package/dist/types/components/tooltip/tooltip.stories.d.ts +41 -6
  258. package/dist/types/components.d.ts +20 -26
  259. package/package.json +1 -1
  260. package/dist/components/p-04b73e62.js.map +0 -1
  261. package/dist/components/p-184f1004.js.map +0 -1
  262. package/dist/components/p-23cdd5a7.js.map +0 -1
  263. package/dist/components/p-2f1e7628.js.map +0 -1
  264. package/dist/infineon-design-system-stencil/p-00d6e46e.entry.js.map +0 -1
  265. package/dist/infineon-design-system-stencil/p-222c1af9.entry.js +0 -2
  266. package/dist/infineon-design-system-stencil/p-222c1af9.entry.js.map +0 -1
  267. package/dist/infineon-design-system-stencil/p-28fb795b.entry.js +0 -2
  268. package/dist/infineon-design-system-stencil/p-436babb8.entry.js +0 -2
  269. package/dist/infineon-design-system-stencil/p-436babb8.entry.js.map +0 -1
  270. package/dist/infineon-design-system-stencil/p-72d804fb.entry.js +0 -2
  271. package/dist/infineon-design-system-stencil/p-72d804fb.entry.js.map +0 -1
  272. package/dist/infineon-design-system-stencil/p-7bef9272.entry.js +0 -2
  273. package/dist/infineon-design-system-stencil/p-7bef9272.entry.js.map +0 -1
  274. package/dist/infineon-design-system-stencil/p-89c7209f.entry.js +0 -2
  275. package/dist/infineon-design-system-stencil/p-89c7209f.entry.js.map +0 -1
  276. package/dist/infineon-design-system-stencil/p-9481adc8.entry.js +0 -2
  277. package/dist/infineon-design-system-stencil/p-9481adc8.entry.js.map +0 -1
  278. package/dist/infineon-design-system-stencil/p-bc8a4226.entry.js.map +0 -1
  279. package/dist/infineon-design-system-stencil/p-dc7deb14.entry.js +0 -2
  280. 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: true,
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
- ifxSidebarNavigationItem: {
18
- action: 'ifxSidebarNavigationItem',
19
- description: 'Custom event emitted when a navigation item becomes active on selection',
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
- ifxSidebarActionItem: {
22
- action: 'ifxSidebarActionItem',
23
- description: 'Custom event emitted when an action item is selected',
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
- ifxSidebarMenu: {
26
- action: 'ifxSidebarMenu',
27
- description: 'Custom event emitted when a menu is expanded or closed',
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='image-16'>Menu Item</ifx-sidebar-item>
57
- <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>
58
- <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>
59
- <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>
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='image-16'>Menu Item</ifx-sidebar-item>
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='https://google.com' target='_blank' icon='image-16'>Item 1</ifx-sidebar-item>
74
- <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Item 2</ifx-sidebar-item>
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" value="thisPage">
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" value="thisPage">
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
- content: "Sample Notification",
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
- content: {
15
- description: 'Text inside the notification is passed as slot.',
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 => `<ifx-notification
40
- icon="${args.icon}"
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.content}
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,OAAO,EAAE,qBAAqB;QAC9B,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,yBAAyB;QACnC,UAAU,EAAE,QAAQ;KACrB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW,EAAE,iDAAiD;SAC/D;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;SAC3B;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,+CAA+C;YAC5D,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,oBAAoB;SAClC;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,mBAAmB;SACjC;QACD,UAAU,EAAC;YACT,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC;UACtB,IAAI,CAAC,IAAI;aACN,IAAI,CAAC,OAAO;eACV,IAAI,CAAC,QAAQ;eACb,IAAI,CAAC,QAAQ;iBACX,IAAI,CAAC,UAAU;IAC5B,IAAI,CAAC,OAAO;oBACI,CAAC;AAErB,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 content: \"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 content: {\n description: 'Text inside the notification is passed as slot.',\n },\n variant: {\n description: 'Variant of the notification.',\n options: ['success', 'warning', 'error'],\n control: { type: 'radio' },\n },\n icon: {\n description: 'The icon to be displayed in the notification.',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n },\n linkText: {\n description: 'Text for the link.',\n },\n linkHref: {\n description: 'URL for the link.',\n },\n linkTarget:{\n options: ['_blank', '_self', '_parent'],\n control: { type: 'radio' },\n },\n },\n};\n\nconst DefaultTemplate = args => `<ifx-notification \n icon=\"${args.icon}\" \n variant=\"${args.variant}\" \n link-text=\"${args.linkText}\" \n link-href=\"${args.linkHref}\"\n link-target=\"${args.linkTarget}\">\n ${args.content}\n</ifx-notification>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
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: 'b9e1b525f3a20354d409c93a1aa0faa9d9d17019', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'fc932c8e4114f39e5df86007d3595f72fac6384a', class: 'items__per-page-wrapper' }, h("div", { key: '93816bd9264a8cd32d782cc78df9052ab93f76a7', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '3432585bf8ce77786657f676fdaca27aba34b413', class: 'items__per-page-field' }, h("ifx-select", { key: 'a6def492e7db12fb2d9245a6655aaecb99282ceb', 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: '275104906a9d0e733644e2b5efbab477ecfc95ca', class: 'items__total-wrapper' }, h("div", { key: '75528c52f8be0724c332daf2f292c1ec852f6e53', class: 'page__numbers-wrapper' }, h("div", { key: '4e350e7002b1de2e5fc2c16d10b4a035a3bdedad', class: "pagination" }, h("ifx-icon-button", { key: '42a3fe966d4bae2bc90b24709293237a5b57c413', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '5d5f20215e988d2adc10f842be5b9300f30b1fd1' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: 'ebb0d3ef295477810891b41ca03ae42cdb634cf7', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
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"; }