@pnx-mixtape/mxds 0.0.24 → 0.0.27

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 (275) hide show
  1. package/.storybook/decorators.ts +1 -1
  2. package/.storybook/main.ts +12 -1
  3. package/.storybook/preview.ts +1 -0
  4. package/.storybook/theme-demo.css +17 -13
  5. package/.storybook/vitest.setup.ts +53 -0
  6. package/dist/build/accordion.css +1 -113
  7. package/dist/build/accordion.entry.js +46 -72
  8. package/dist/build/base.css +1 -993
  9. package/dist/build/breadcrumb.css +1 -55
  10. package/dist/build/button.css +1 -126
  11. package/dist/build/callout.css +1 -11
  12. package/dist/build/card.css +1 -161
  13. package/dist/build/carousel.css +1 -125
  14. package/dist/build/chunks/Accordion-BzKLBuWL.js +42 -0
  15. package/dist/build/chunks/DropMenu-LnJEp-sg.js +43 -0
  16. package/dist/build/chunks/Popover-C4gisyxr.js +27 -0
  17. package/dist/build/chunks/polyfills-Du4RTZDf.js +511 -0
  18. package/dist/build/chunks/popover-Bd5oQ1Ic.js +407 -0
  19. package/dist/build/chunks/utilities-DepaJdUg.js +242 -0
  20. package/dist/build/constants.css +1 -132
  21. package/dist/build/container-grid.css +1 -186
  22. package/dist/build/content-block.css +1 -36
  23. package/dist/build/dialog.css +1 -108
  24. package/dist/build/dialog.entry.js +45 -85
  25. package/dist/build/drop-menu.css +1 -89
  26. package/dist/build/drop-menu.entry.js +2 -2
  27. package/dist/build/drupal.css +1 -66
  28. package/dist/build/filters.css +1 -117
  29. package/dist/build/filters.entry.js +113 -142
  30. package/dist/build/footer.css +1 -141
  31. package/dist/build/form.css +1 -491
  32. package/dist/build/global-alert.css +1 -60
  33. package/dist/build/global-alert.entry.js +51 -75
  34. package/dist/build/grid.css +1 -195
  35. package/dist/build/header.css +1 -149
  36. package/dist/build/header.entry.js +718 -1180
  37. package/dist/build/hero-banner.css +1 -73
  38. package/dist/build/icon.css +1 -399
  39. package/dist/build/in-page-alert.css +1 -93
  40. package/dist/build/in-page-navigation.css +1 -17
  41. package/dist/build/in-page-navigation.entry.js +67 -103
  42. package/dist/build/link-list.css +1 -45
  43. package/dist/build/list-item.css +1 -29
  44. package/dist/build/masthead.css +1 -53
  45. package/dist/build/navigation.css +1 -356
  46. package/dist/build/navigation.entry.js +79 -222
  47. package/dist/build/page.css +1 -65
  48. package/dist/build/pagination.css +1 -111
  49. package/dist/build/popover.css +1 -119
  50. package/dist/build/popover.entry.js +1 -2
  51. package/dist/build/results-bar.css +1 -21
  52. package/dist/build/section.css +1 -147
  53. package/dist/build/side-navigation.css +1 -85
  54. package/dist/build/sidebar.css +1 -53
  55. package/dist/build/social-links.css +1 -20
  56. package/dist/build/steps.css +1 -118
  57. package/dist/build/sticky.css +1 -47
  58. package/dist/build/sticky.entry.js +48 -59
  59. package/dist/build/tabs.css +1 -108
  60. package/dist/build/tabs.entry.js +130 -209
  61. package/dist/build/tag.css +1 -70
  62. package/dist/build/utilities.css +1 -186
  63. package/dist/build/utility-list.css +1 -43
  64. package/dist/build/utility-list.entry.js +52 -80
  65. package/package.json +40 -54
  66. package/src/Atom/Background/__snapshots__/Background.stories.ts.snap +61 -216
  67. package/src/Atom/Background/_background.css +2 -1
  68. package/src/Atom/Button/Button.stories.tsx +2 -0
  69. package/src/Atom/Button/__snapshots__/Button.stories.ts.snap +77 -97
  70. package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap +3 -15
  71. package/src/Atom/DefinitionList/DefinitionList.stories.tsx +2 -1
  72. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.ts.snap +13 -26
  73. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.tsx.snap +2 -29
  74. package/src/Atom/Heading/Heading.stories.tsx +2 -1
  75. package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap +9 -13
  76. package/src/Atom/Heading/__snapshots__/Heading.stories.tsx.snap +2 -8
  77. package/src/Atom/Icon/Icon.stories.tsx +2 -1
  78. package/src/Atom/Icon/__snapshots__/Icon.stories.ts.snap +21 -28
  79. package/src/Atom/Icon/__snapshots__/Icon.stories.tsx.snap +4 -15
  80. package/src/Atom/Icon/_icon.css +7 -6
  81. package/src/Atom/Image/__snapshots__/Image.stories.ts.snap +6 -9
  82. package/src/Atom/Link/Link.stories.tsx +2 -1
  83. package/src/Atom/Link/__snapshots__/Link.stories.ts.snap +47 -56
  84. package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap +4 -22
  85. package/src/Atom/Media/Media.stories.ts +1 -1
  86. package/src/Atom/Media/Media.stories.tsx +2 -1
  87. package/src/Atom/Media/__snapshots__/Media.stories.ts.snap +27 -12
  88. package/src/Atom/Media/__snapshots__/Media.stories.tsx.snap +3 -16
  89. package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap +5 -8
  90. package/src/Atom/Table/TableResponsive.stories.ts +0 -1
  91. package/src/Atom/Table/__snapshots__/Table.stories.ts.snap +129 -261
  92. package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap +34 -67
  93. package/src/Atom/Text/Text.stories.tsx +2 -1
  94. package/src/Atom/Text/__snapshots__/Text.stories.ts.snap +32 -46
  95. package/src/Atom/Text/__snapshots__/Text.stories.tsx.snap +2 -6
  96. package/src/Atom/Video/__snapshots__/Video.stories.ts.snap +6 -11
  97. package/src/Atom/_flow.css +16 -1
  98. package/src/Component/Accordion/Accordion.stories.tsx +2 -0
  99. package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap +106 -140
  100. package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap +3 -49
  101. package/src/Component/Accordion/__snapshots__/AccordionItem.stories.ts.snap +52 -81
  102. package/src/Component/Breadcrumb/Breadcrumb.stories.tsx +2 -0
  103. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap +29 -33
  104. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.tsx.snap +3 -62
  105. package/src/Component/Callout/__snapshots__/Callout.stories.ts.snap +9 -11
  106. package/src/Component/Card/Card.stories.tsx +2 -0
  107. package/src/Component/Card/__snapshots__/Card.stories.ts.snap +237 -272
  108. package/src/Component/Card/__snapshots__/Card.stories.tsx.snap +4 -85
  109. package/src/Component/Carousel/Elements/Carousel.ts +10 -7
  110. package/src/Component/Carousel/__snapshots__/Carousel.stories.ts.snap +992 -1187
  111. package/src/Component/ContentBlock/ContentBlock.stories.tsx +2 -0
  112. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +161 -155
  113. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.tsx.snap +2 -25
  114. package/src/Component/Dialog/Dialog.stories.tsx +2 -0
  115. package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +92 -110
  116. package/src/Component/Dialog/__snapshots__/Dialog.stories.tsx.snap +2 -31
  117. package/src/Component/DropMenu/DropMenu.stories.tsx +2 -0
  118. package/src/Component/DropMenu/DropMenu.tsx +1 -3
  119. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +25 -72
  120. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap +2 -46
  121. package/src/Component/Filters/__snapshots__/FilterItem.stories.ts.snap +80 -121
  122. package/src/Component/Filters/__snapshots__/Filters.stories.ts.snap +323 -424
  123. package/src/Component/GlobalAlert/GlobalAlert.stories.tsx +2 -0
  124. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.ts.snap +25 -37
  125. package/src/Component/GlobalAlert/__snapshots__/GlobalAlert.stories.tsx.snap +3 -46
  126. package/src/Component/HeroBanner/HeroBanner.stories.tsx +2 -0
  127. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.ts.snap +105 -106
  128. package/src/Component/HeroBanner/__snapshots__/HeroBanner.stories.tsx.snap +3 -34
  129. package/src/Component/HeroSearch/HeroSearch.stories.tsx +2 -0
  130. package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.ts.snap +121 -158
  131. package/src/Component/HeroSearch/__snapshots__/HeroSearch.stories.tsx.snap +3 -34
  132. package/src/Component/InPageAlert/InPageAlert.stories.tsx +2 -0
  133. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap +87 -70
  134. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.tsx.snap +5 -65
  135. package/src/Component/InPageNavigation/Elements/InPageNavigation.ts +22 -3
  136. package/src/Component/InPageNavigation/InPageNavigation.stories.ts +11 -0
  137. package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +2 -0
  138. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +93 -208
  139. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +2 -148
  140. package/src/Component/InPageNavigation/in-page-navigation.css +7 -0
  141. package/src/Component/InPageNavigation/in-page-navigation.twig +3 -2
  142. package/src/Component/LinkList/LinkList.stories.tsx +2 -1
  143. package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +67 -66
  144. package/src/Component/LinkList/__snapshots__/LinkList.stories.tsx.snap +2 -32
  145. package/src/Component/ListItem/ListItem.stories.tsx +2 -1
  146. package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap +153 -167
  147. package/src/Component/ListItem/__snapshots__/ListItem.stories.tsx.snap +2 -25
  148. package/src/Component/Navigation/Dropdown.stories.tsx +2 -0
  149. package/src/Component/Navigation/Elements/Navigation.ts +5 -5
  150. package/src/Component/Navigation/Navigation.stories.tsx +2 -0
  151. package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap +2 -38
  152. package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +204 -279
  153. package/src/Component/Navigation/__snapshots__/Navigation.stories.tsx.snap +3 -59
  154. package/src/Component/Navigation/_navigation.css +2 -2
  155. package/src/Component/Pagination/Pagination.stories.tsx +2 -0
  156. package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +70 -60
  157. package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +2 -62
  158. package/src/Component/Popover/Elements/Popover.ts +5 -1
  159. package/src/Component/Popover/__snapshots__/Popover.stories.ts.snap +366 -496
  160. package/src/Component/Popover/popover.css +3 -4
  161. package/src/Component/ResultsBar/ResultsBar.stories.tsx +2 -0
  162. package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.ts.snap +25 -46
  163. package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.tsx.snap +4 -50
  164. package/src/Component/SideNavigation/__snapshots__/SideNavigation.stories.ts.snap +76 -81
  165. package/src/Component/SocialLinks/__snapshots__/SocialLinks.stories.ts.snap +35 -32
  166. package/src/Component/SocialShare/SocialShare.stories.tsx +2 -1
  167. package/src/Component/SocialShare/__snapshots__/SocialShare.stories.ts.snap +11 -27
  168. package/src/Component/SocialShare/__snapshots__/SocialShare.stories.tsx.snap +4 -22
  169. package/src/Component/SocialShare/social-share.twig +1 -0
  170. package/src/Component/Steps/__snapshots__/StepItem.stories.ts.snap +11 -23
  171. package/src/Component/Steps/__snapshots__/Steps.stories.ts.snap +142 -173
  172. package/src/Component/Sticky/Sticky.stories.tsx +2 -0
  173. package/src/Component/Sticky/__snapshots__/Sticky.stories.ts.snap +6 -12
  174. package/src/Component/Sticky/__snapshots__/Sticky.stories.tsx.snap +2 -10
  175. package/src/Component/Tabs/Tabs.stories.tsx +2 -0
  176. package/src/Component/Tabs/__snapshots__/TabItem.stories.ts.snap +5 -9
  177. package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +37 -210
  178. package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +2 -116
  179. package/src/Component/Tag/Tag.stories.tsx +2 -0
  180. package/src/Component/Tag/__snapshots__/Tag.stories.ts.snap +37 -61
  181. package/src/Component/Tag/__snapshots__/Tag.stories.tsx.snap +2 -6
  182. package/src/Component/Tag/tags.twig +6 -6
  183. package/src/Component/UtilityList/__snapshots__/UtilityList.stories.ts.snap +122 -245
  184. package/src/Component/UtilityList/utility-list.css +4 -0
  185. package/src/Component/UtilityList/utility-list.twig +2 -1
  186. package/src/Form/Checkbox/FormCheckbox.stories.tsx +2 -2
  187. package/src/Form/Checkbox/__snapshots__/Checkbox.stories.ts.snap +13 -26
  188. package/src/Form/Checkbox/__snapshots__/FormCheckbox.stories.tsx.snap +5 -0
  189. package/src/Form/Description/FormDescription.stories.tsx +2 -1
  190. package/src/Form/Description/__snapshots__/Description.stories.ts.snap +5 -9
  191. package/src/Form/Description/__snapshots__/FormDescription.stories.tsx.snap +2 -9
  192. package/src/Form/Description/__snapshots__/FormStatus.stories.ts.snap +9 -17
  193. package/src/Form/Form/Form.stories.tsx +2 -1
  194. package/src/Form/Form/FormTitle.stories.tsx +2 -1
  195. package/src/Form/Form/__snapshots__/Form.stories.tsx.snap +2 -5
  196. package/src/Form/Form/__snapshots__/FormTitle.stories.tsx.snap +2 -8
  197. package/src/Form/FormItem/FormItem.stories.tsx +8 -5
  198. package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap +88 -129
  199. package/src/Form/Label/FormLabel.stories.tsx +2 -1
  200. package/src/Form/Label/__snapshots__/FormLabel.stories.tsx.snap +3 -18
  201. package/src/Form/Label/__snapshots__/Label.stories.ts.snap +13 -25
  202. package/src/Form/Radio/FormRadio.stories.tsx +2 -14
  203. package/src/Form/Radio/__snapshots__/FormRadio.stories.tsx.snap +3 -0
  204. package/src/Form/Radio/__snapshots__/Radio.stories.ts.snap +42 -57
  205. package/src/Form/Search/__snapshots__/Search.stories.ts.snap +11 -26
  206. package/src/Form/Search/search-form.twig +2 -1
  207. package/src/Form/Select/FormSelect.stories.tsx +2 -1
  208. package/src/Form/Select/__snapshots__/FormSelect.stories.tsx.snap +2 -22
  209. package/src/Form/Select/__snapshots__/Select.stories.ts.snap +8 -19
  210. package/src/Form/TextInput/FormText.stories.tsx +2 -1
  211. package/src/Form/TextInput/__snapshots__/FormText.stories.tsx.snap +2 -12
  212. package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap +11 -26
  213. package/src/Form/TextInput/__snapshots__/TextInput.stories.ts.snap +11 -25
  214. package/src/Form/Textarea/FormTextarea.stories.tsx +2 -1
  215. package/src/Form/Textarea/__snapshots__/FormTextarea.stories.tsx.snap +2 -11
  216. package/src/Form/Textarea/__snapshots__/Textarea.stories.ts.snap +5 -11
  217. package/src/Layout/Footer/Footer.stories.ts +18 -1
  218. package/src/Layout/Footer/Footer.stories.tsx +2 -0
  219. package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +360 -301
  220. package/src/Layout/Footer/__snapshots__/Footer.stories.tsx.snap +3 -62
  221. package/src/Layout/Footer/footer.css +16 -35
  222. package/src/Layout/Footer/footer.twig +6 -6
  223. package/src/Layout/Grid/Grid.stories.tsx +2 -0
  224. package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap +72 -66
  225. package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap +6 -62
  226. package/src/Layout/Grid/__snapshots__/GridItem.stories.ts.snap +9 -13
  227. package/src/Layout/Header/Header.stories.tsx +2 -1
  228. package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +315 -466
  229. package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +2 -58
  230. package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +86 -87
  231. package/src/Layout/Page/Page.stories.tsx +2 -0
  232. package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +2 -81
  233. package/src/Layout/Section/__snapshots__/Background.stories.ts.snap +51 -61
  234. package/src/Layout/Section/__snapshots__/Breakouts.stories.ts.snap +34 -78
  235. package/src/Layout/Section/__snapshots__/Flow.stories.ts.snap +54 -89
  236. package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +89 -99
  237. package/src/Layout/Section/__snapshots__/Section.stories.tsx.snap +4 -34
  238. package/src/Layout/Section/__snapshots__/SectionGrid.stories.tsx.snap +3 -35
  239. package/src/Layout/Section/section.twig +2 -2
  240. package/src/Layout/Sidebar/Sidebar.stories.tsx +1 -1
  241. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.ts.snap +49 -40
  242. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.tsx.snap +4 -44
  243. package/src/Layout/Sidebar/sidebar.css +2 -2
  244. package/src/Layout/Sidebar/sidebar.twig +8 -5
  245. package/src/Utility/_layout-utils.css +9 -1
  246. package/src/constants.css +2 -2
  247. package/src/tokens.js +2 -2
  248. package/.storybook/test-runner.ts +0 -77
  249. package/dist/build/accordion.entry.js.map +0 -1
  250. package/dist/build/chunks/Accordion-D1HQ0FDq.js +0 -63
  251. package/dist/build/chunks/Accordion-D1HQ0FDq.js.map +0 -1
  252. package/dist/build/chunks/disclosure-widget-CdjCdx7t.js +0 -129
  253. package/dist/build/chunks/disclosure-widget-CdjCdx7t.js.map +0 -1
  254. package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js +0 -70
  255. package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js.map +0 -1
  256. package/dist/build/chunks/polyfills-DnrsypYs.js +0 -812
  257. package/dist/build/chunks/polyfills-DnrsypYs.js.map +0 -1
  258. package/dist/build/chunks/popover-DzUcnIlX.js +0 -797
  259. package/dist/build/chunks/popover-DzUcnIlX.js.map +0 -1
  260. package/dist/build/chunks/popover.entry-BQvyR0d5.js +0 -38
  261. package/dist/build/chunks/popover.entry-BQvyR0d5.js.map +0 -1
  262. package/dist/build/chunks/utilities-Ci7wwNeg.js +0 -148
  263. package/dist/build/chunks/utilities-Ci7wwNeg.js.map +0 -1
  264. package/dist/build/dialog.entry.js.map +0 -1
  265. package/dist/build/drop-menu.entry.js.map +0 -1
  266. package/dist/build/filters.entry.js.map +0 -1
  267. package/dist/build/global-alert.entry.js.map +0 -1
  268. package/dist/build/header.entry.js.map +0 -1
  269. package/dist/build/in-page-navigation.entry.js.map +0 -1
  270. package/dist/build/navigation.entry.js.map +0 -1
  271. package/dist/build/popover.entry.js.map +0 -1
  272. package/dist/build/sticky.entry.js.map +0 -1
  273. package/dist/build/tabs.entry.js.map +0 -1
  274. package/dist/build/utility-list.entry.js.map +0 -1
  275. package/src/Form/FormItem/__snapshots__/FormItem.stories.tsx.snap +0 -110
package/src/Component/Steps/__snapshots__/Steps.stories.ts.snap CHANGED
@@ -1,200 +1,169 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
-
3
- exports[`Component/Steps Accent smoke-test 1`] = `
4
- <div class="mx-page default">
5
- <div class="mx-steps mx-steps--supplementary mx-steps--counters">
6
- <div class="mx-steps__panel mx-steps--fill">
7
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
8
- Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
9
- </div>
10
- </div>
11
- <div class="mx-steps__panel mx-steps--fill">
12
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
13
- Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
14
- </div>
15
- </div>
16
- <div class="mx-steps__panel">
17
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
18
- Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
19
- </div>
20
- </div>
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
+
3
+ exports[`Accent 1`] = `
4
+ " <div class="mx-steps mx-steps--supplementary mx-steps--counters">
5
+ <div class="mx-steps__panel mx-steps--fill">
6
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
7
+ Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
8
+ </div>
9
+ </div>
10
+
11
+ <div class="mx-steps__panel mx-steps--fill">
12
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
13
+ Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
21
14
  </div>
22
15
  </div>
16
+
17
+ <div class="mx-steps__panel">
18
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
19
+ Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
20
+ </div>
21
+ </div>
22
+
23
+ </div>
24
+ "
23
25
  `;
24
26
 
25
- exports[`Component/Steps Counters smoke-test 1`] = `
26
- <div class="mx-page default">
27
- <div class="mx-steps mx-steps--light mx-steps--counters">
28
- <div class="mx-steps__panel">
29
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
30
- <h2>
31
- Funk
32
- </h2>
33
- <p>
34
- Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
35
- </p>
36
- </div>
37
- </div>
38
- <div class="mx-steps__panel">
39
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
40
- <h3>
41
- Soul
42
- </h3>
43
- <p>
44
- Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
45
- </p>
46
- </div>
47
- </div>
48
- <div class="mx-steps__panel">
49
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
50
- <h4>
51
- Motown
52
- </h4>
53
- <p>
54
- Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
55
- </p>
56
- </div>
57
- </div>
27
+ exports[`Counters 1`] = `
28
+ " <div class="mx-steps mx-steps--light mx-steps--counters">
29
+ <div class="mx-steps__panel">
30
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
31
+ <h2>Funk</h2><p>Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.</p>
32
+ </div>
33
+ </div>
34
+
35
+ <div class="mx-steps__panel">
36
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
37
+ <h3>Soul</h3><p>Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.</p>
38
+ </div>
39
+ </div>
40
+
41
+ <div class="mx-steps__panel">
42
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
43
+ <h4>Motown</h4><p>Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.</p>
58
44
  </div>
59
45
  </div>
46
+
47
+ </div>
48
+ "
60
49
  `;
61
50
 
62
- exports[`Component/Steps Filled smoke-test 1`] = `
63
- <div class="mx-page default">
64
- <div class="mx-steps mx-steps--light mx-steps--fill">
65
- <div class="mx-steps__panel">
66
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
67
- <h2>
68
- Funk
69
- </h2>
70
- <p>
71
- Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
72
- </p>
73
- </div>
74
- </div>
75
- <div class="mx-steps__panel">
76
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
77
- <h3>
78
- Soul
79
- </h3>
80
- <p>
81
- Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
82
- </p>
83
- </div>
84
- </div>
85
- <div class="mx-steps__panel">
86
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
87
- <h4>
88
- Motown
89
- </h4>
90
- <p>
91
- Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
92
- </p>
93
- </div>
94
- </div>
51
+ exports[`Filled 1`] = `
52
+ " <div class="mx-steps mx-steps--light mx-steps--fill">
53
+ <div class="mx-steps__panel">
54
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
55
+ <h2>Funk</h2><p>Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.</p>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="mx-steps__panel">
60
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
61
+ <h3>Soul</h3><p>Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.</p>
62
+ </div>
63
+ </div>
64
+
65
+ <div class="mx-steps__panel">
66
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
67
+ <h4>Motown</h4><p>Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.</p>
95
68
  </div>
96
69
  </div>
70
+
71
+ </div>
72
+ "
97
73
  `;
98
74
 
99
- exports[`Component/Steps Highlighted smoke-test 1`] = `
100
- <div class="mx-page default">
101
- <div class="mx-steps mx-steps--light">
102
- <div class="mx-steps__panel">
103
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
104
- Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
105
- </div>
106
- </div>
107
- <div class="mx-steps__panel mx-steps--fill">
108
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
109
- Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
110
- </div>
111
- </div>
112
- <div class="mx-steps__panel">
113
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
114
- Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
115
- </div>
116
- </div>
75
+ exports[`Highlighted 1`] = `
76
+ " <div class="mx-steps mx-steps--light">
77
+ <div class="mx-steps__panel">
78
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
79
+ Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
117
80
  </div>
118
81
  </div>
82
+
83
+ <div class="mx-steps__panel mx-steps--fill">
84
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
85
+ Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
86
+ </div>
87
+ </div>
88
+
89
+ <div class="mx-steps__panel">
90
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
91
+ Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
92
+ </div>
93
+ </div>
94
+
95
+ </div>
96
+ "
119
97
  `;
120
98
 
121
- exports[`Component/Steps Primary smoke-test 1`] = `
122
- <div class="mx-page default">
123
- <div class="mx-steps mx-steps--dark mx-steps--counters">
124
- <div class="mx-steps__panel mx-steps--fill">
125
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
126
- Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
127
- </div>
128
- </div>
129
- <div class="mx-steps__panel mx-steps--fill">
130
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
131
- Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
132
- </div>
133
- </div>
134
- <div class="mx-steps__panel">
135
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
136
- Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
137
- </div>
138
- </div>
99
+ exports[`Primary 1`] = `
100
+ " <div class="mx-steps mx-steps--dark mx-steps--counters">
101
+ <div class="mx-steps__panel mx-steps--fill">
102
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
103
+ Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
104
+ </div>
105
+ </div>
106
+
107
+ <div class="mx-steps__panel mx-steps--fill">
108
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
109
+ Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
139
110
  </div>
140
111
  </div>
112
+
113
+ <div class="mx-steps__panel">
114
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
115
+ Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
116
+ </div>
117
+ </div>
118
+
119
+ </div>
120
+ "
141
121
  `;
142
122
 
143
- exports[`Component/Steps Progress smoke-test 1`] = `
144
- <div class="mx-page default">
145
- <div class="mx-steps mx-steps--light mx-steps--counters">
146
- <div class="mx-steps__panel mx-steps--fill">
147
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
148
- Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
149
- </div>
150
- </div>
151
- <div class="mx-steps__panel mx-steps--fill">
152
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
153
- Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
154
- </div>
155
- </div>
156
- <div class="mx-steps__panel">
157
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
158
- Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
159
- </div>
160
- </div>
123
+ exports[`Progress 1`] = `
124
+ " <div class="mx-steps mx-steps--light mx-steps--counters">
125
+ <div class="mx-steps__panel mx-steps--fill">
126
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
127
+ Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
128
+ </div>
129
+ </div>
130
+
131
+ <div class="mx-steps__panel mx-steps--fill">
132
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
133
+ Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
134
+ </div>
135
+ </div>
136
+
137
+ <div class="mx-steps__panel">
138
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
139
+ Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
161
140
  </div>
162
141
  </div>
142
+
143
+ </div>
144
+ "
163
145
  `;
164
146
 
165
- exports[`Component/Steps Steps smoke-test 1`] = `
166
- <div class="mx-page default">
167
- <div class="mx-steps mx-steps--light">
168
- <div class="mx-steps__panel">
169
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
170
- <h2>
171
- Funk
172
- </h2>
173
- <p>
174
- Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
175
- </p>
176
- </div>
177
- </div>
178
- <div class="mx-steps__panel">
179
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
180
- <h3>
181
- Soul
182
- </h3>
183
- <p>
184
- Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
185
- </p>
186
- </div>
187
- </div>
188
- <div class="mx-steps__panel">
189
- <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
190
- <h4>
191
- Motown
192
- </h4>
193
- <p>
194
- Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
195
- </p>
196
- </div>
197
- </div>
147
+ exports[`Steps 1`] = `
148
+ " <div class="mx-steps mx-steps--light">
149
+ <div class="mx-steps__panel">
150
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
151
+ <h2>Funk</h2><p>Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.</p>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="mx-steps__panel">
156
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
157
+ <h3>Soul</h3><p>Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.</p>
198
158
  </div>
199
159
  </div>
160
+
161
+ <div class="mx-steps__panel">
162
+ <div class="mx-steps__panel-content mx-container mx-vertical-flow mx-rich-text">
163
+ <h4>Motown</h4><p>Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.</p>
164
+ </div>
165
+ </div>
166
+
167
+ </div>
168
+ "
200
169
  `;
package/src/Component/Sticky/Sticky.stories.tsx CHANGED
@@ -1,9 +1,11 @@
1
1
  import { Meta, StoryObj } from "@storybook/react-vite"
2
2
  import Component from "./Sticky"
3
3
  import "./sticky.css"
4
+ import { Page } from "../../../.storybook-react/decorators"
4
5
 
5
6
  const meta: Meta<typeof Component> = {
6
7
  component: Component,
8
+ decorators: [Page],
7
9
  args: {
8
10
  children: <p>Element is sticky</p>,
9
11
  offset: 150,
package/src/Component/Sticky/__snapshots__/Sticky.stories.ts.snap CHANGED
@@ -1,14 +1,8 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
- exports[`Component/Sticky Sticky smoke-test 1`] = `
4
- <div class="mx-page default">
5
- <div class="sticky__trigger">
6
- </div>
7
- <mx-sticky style="--sticky-offset: 0"
8
- offsetpropname="--sticky-offset"
9
- class="mx-sticky"
10
- >
11
- I am sticky.
12
- </mx-sticky>
13
- </div>
3
+ exports[`Sticky 1`] = `
4
+ "<div class="sticky__trigger"></div><mx-sticky style="--sticky-offset: 0" offsetpropname="--sticky-offset" class="mx-sticky">
5
+ I am sticky.
6
+ </mx-sticky>
7
+ "
14
8
  `;
package/src/Component/Sticky/__snapshots__/Sticky.stories.tsx.snap CHANGED
@@ -1,11 +1,3 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
- exports[`Component/Sticky Sticky smoke-test 1`] = `
4
- <div class="sticky"
5
- style="--sticky-offset: 150px;"
6
- >
7
- <p>
8
- Element is sticky
9
- </p>
10
- </div>
11
- `;
3
+ exports[`Sticky 1`] = `"<div class="sticky" style="--sticky-offset: 150px;"><p>Element is sticky</p></div>"`;
package/src/Component/Tabs/Tabs.stories.tsx CHANGED
@@ -9,6 +9,7 @@ import TabPanel from "./Components/TabPanel"
9
9
  import "./tabs.css"
10
10
  import "../DropMenu/drop-menu.css"
11
11
  import { TabStyles } from "../../enums"
12
+ import { Page } from "../../../.storybook-react/decorators"
12
13
 
13
14
  const defaultChildren = (
14
15
  <Fragment>
@@ -36,6 +37,7 @@ const defaultChildren = (
36
37
 
37
38
  const meta: Meta<typeof Component> = {
38
39
  tags: ["autodocs"],
40
+ decorators: [Page],
39
41
  component: Component,
40
42
  args: {
41
43
  children: defaultChildren,
package/src/Component/Tabs/__snapshots__/TabItem.stories.ts.snap CHANGED
@@ -1,12 +1,8 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
- exports[`Component/Tabs/TabItem TabItem smoke-test 1`] = `
4
- <div class="mx-page default">
5
- <div class="mx-tabs__panel mx-vertical-flow mx-container"
6
- id="tab-1"
7
- data-tab="Funk"
8
- >
9
- Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
10
- </div>
3
+ exports[`Tab Item 1`] = `
4
+ "<div class="mx-tabs__panel mx-vertical-flow mx-container" id="tab-1" data-tab="Funk">
5
+ Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
11
6
  </div>
7
+ "
12
8
  `;