@pnx-mixtape/mxds 0.0.24 → 0.0.26

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 (272) hide show
  1. package/.storybook/decorators.ts +1 -1
  2. package/.storybook/main.ts +9 -1
  3. package/.storybook/preview.ts +1 -0
  4. package/.storybook/theme-demo.css +17 -13
  5. package/.storybook/vitest.setup.ts +17 -0
  6. package/dist/build/accordion.css +76 -86
  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-Dwh42fp7.js +42 -0
  15. package/dist/build/chunks/DropMenu-plGsgySm.js +43 -0
  16. package/dist/build/chunks/Popover-Bws25suh.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 +91 -123
  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 +598 -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 -52
  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/InPageNavigation.stories.ts +1 -0
  136. package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +2 -0
  137. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +88 -208
  138. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +2 -148
  139. package/src/Component/InPageNavigation/in-page-navigation.css +5 -0
  140. package/src/Component/LinkList/LinkList.stories.tsx +2 -1
  141. package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +67 -66
  142. package/src/Component/LinkList/__snapshots__/LinkList.stories.tsx.snap +2 -32
  143. package/src/Component/ListItem/ListItem.stories.tsx +2 -1
  144. package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap +153 -167
  145. package/src/Component/ListItem/__snapshots__/ListItem.stories.tsx.snap +2 -25
  146. package/src/Component/Navigation/Dropdown.stories.tsx +2 -0
  147. package/src/Component/Navigation/Elements/Navigation.ts +5 -5
  148. package/src/Component/Navigation/Navigation.stories.tsx +2 -0
  149. package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap +2 -38
  150. package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +204 -279
  151. package/src/Component/Navigation/__snapshots__/Navigation.stories.tsx.snap +3 -59
  152. package/src/Component/Navigation/_navigation.css +2 -2
  153. package/src/Component/Pagination/Pagination.stories.tsx +2 -0
  154. package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +70 -60
  155. package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +2 -62
  156. package/src/Component/Popover/Elements/Popover.ts +5 -1
  157. package/src/Component/Popover/__snapshots__/Popover.stories.ts.snap +366 -496
  158. package/src/Component/Popover/popover.css +3 -4
  159. package/src/Component/ResultsBar/ResultsBar.stories.tsx +2 -0
  160. package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.ts.snap +25 -46
  161. package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.tsx.snap +4 -50
  162. package/src/Component/SideNavigation/__snapshots__/SideNavigation.stories.ts.snap +76 -81
  163. package/src/Component/SocialLinks/__snapshots__/SocialLinks.stories.ts.snap +35 -32
  164. package/src/Component/SocialShare/SocialShare.stories.tsx +2 -1
  165. package/src/Component/SocialShare/__snapshots__/SocialShare.stories.ts.snap +11 -27
  166. package/src/Component/SocialShare/__snapshots__/SocialShare.stories.tsx.snap +4 -22
  167. package/src/Component/SocialShare/social-share.twig +1 -0
  168. package/src/Component/Steps/__snapshots__/StepItem.stories.ts.snap +11 -23
  169. package/src/Component/Steps/__snapshots__/Steps.stories.ts.snap +142 -173
  170. package/src/Component/Sticky/Sticky.stories.tsx +2 -0
  171. package/src/Component/Sticky/__snapshots__/Sticky.stories.ts.snap +6 -12
  172. package/src/Component/Sticky/__snapshots__/Sticky.stories.tsx.snap +2 -10
  173. package/src/Component/Tabs/Tabs.stories.tsx +2 -0
  174. package/src/Component/Tabs/__snapshots__/TabItem.stories.ts.snap +5 -9
  175. package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +37 -210
  176. package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +2 -116
  177. package/src/Component/Tag/Tag.stories.tsx +2 -0
  178. package/src/Component/Tag/__snapshots__/Tag.stories.ts.snap +37 -61
  179. package/src/Component/Tag/__snapshots__/Tag.stories.tsx.snap +2 -6
  180. package/src/Component/Tag/tags.twig +6 -6
  181. package/src/Component/UtilityList/__snapshots__/UtilityList.stories.ts.snap +122 -245
  182. package/src/Component/UtilityList/utility-list.css +4 -0
  183. package/src/Component/UtilityList/utility-list.twig +2 -1
  184. package/src/Form/Checkbox/FormCheckbox.stories.tsx +2 -2
  185. package/src/Form/Checkbox/__snapshots__/Checkbox.stories.ts.snap +13 -26
  186. package/src/Form/Checkbox/__snapshots__/FormCheckbox.stories.tsx.snap +5 -0
  187. package/src/Form/Description/FormDescription.stories.tsx +2 -1
  188. package/src/Form/Description/__snapshots__/Description.stories.ts.snap +5 -9
  189. package/src/Form/Description/__snapshots__/FormDescription.stories.tsx.snap +2 -9
  190. package/src/Form/Description/__snapshots__/FormStatus.stories.ts.snap +9 -17
  191. package/src/Form/Form/Form.stories.tsx +2 -1
  192. package/src/Form/Form/FormTitle.stories.tsx +2 -1
  193. package/src/Form/Form/__snapshots__/Form.stories.tsx.snap +2 -5
  194. package/src/Form/Form/__snapshots__/FormTitle.stories.tsx.snap +2 -8
  195. package/src/Form/FormItem/FormItem.stories.tsx +8 -5
  196. package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap +88 -129
  197. package/src/Form/Label/FormLabel.stories.tsx +2 -1
  198. package/src/Form/Label/__snapshots__/FormLabel.stories.tsx.snap +3 -18
  199. package/src/Form/Label/__snapshots__/Label.stories.ts.snap +13 -25
  200. package/src/Form/Radio/FormRadio.stories.tsx +2 -14
  201. package/src/Form/Radio/__snapshots__/FormRadio.stories.tsx.snap +3 -0
  202. package/src/Form/Radio/__snapshots__/Radio.stories.ts.snap +42 -57
  203. package/src/Form/Search/__snapshots__/Search.stories.ts.snap +11 -26
  204. package/src/Form/Select/FormSelect.stories.tsx +2 -1
  205. package/src/Form/Select/__snapshots__/FormSelect.stories.tsx.snap +2 -22
  206. package/src/Form/Select/__snapshots__/Select.stories.ts.snap +8 -19
  207. package/src/Form/TextInput/FormText.stories.tsx +2 -1
  208. package/src/Form/TextInput/__snapshots__/FormText.stories.tsx.snap +2 -12
  209. package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap +11 -26
  210. package/src/Form/TextInput/__snapshots__/TextInput.stories.ts.snap +11 -25
  211. package/src/Form/Textarea/FormTextarea.stories.tsx +2 -1
  212. package/src/Form/Textarea/__snapshots__/FormTextarea.stories.tsx.snap +2 -11
  213. package/src/Form/Textarea/__snapshots__/Textarea.stories.ts.snap +5 -11
  214. package/src/Layout/Footer/Footer.stories.ts +18 -1
  215. package/src/Layout/Footer/Footer.stories.tsx +2 -0
  216. package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +360 -301
  217. package/src/Layout/Footer/__snapshots__/Footer.stories.tsx.snap +3 -62
  218. package/src/Layout/Footer/footer.css +16 -35
  219. package/src/Layout/Footer/footer.twig +6 -6
  220. package/src/Layout/Grid/Grid.stories.tsx +2 -0
  221. package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap +72 -66
  222. package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap +6 -62
  223. package/src/Layout/Grid/__snapshots__/GridItem.stories.ts.snap +9 -13
  224. package/src/Layout/Header/Header.stories.tsx +2 -1
  225. package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +315 -466
  226. package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +2 -58
  227. package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +86 -87
  228. package/src/Layout/Page/Page.stories.tsx +2 -0
  229. package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +2 -81
  230. package/src/Layout/Section/__snapshots__/Background.stories.ts.snap +51 -61
  231. package/src/Layout/Section/__snapshots__/Breakouts.stories.ts.snap +34 -78
  232. package/src/Layout/Section/__snapshots__/Flow.stories.ts.snap +54 -89
  233. package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +89 -99
  234. package/src/Layout/Section/__snapshots__/Section.stories.tsx.snap +4 -34
  235. package/src/Layout/Section/__snapshots__/SectionGrid.stories.tsx.snap +3 -35
  236. package/src/Layout/Section/section.twig +2 -2
  237. package/src/Layout/Sidebar/Sidebar.stories.tsx +1 -1
  238. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.ts.snap +49 -40
  239. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.tsx.snap +4 -44
  240. package/src/Layout/Sidebar/sidebar.css +2 -2
  241. package/src/Layout/Sidebar/sidebar.twig +8 -5
  242. package/src/Utility/_layout-utils.css +9 -1
  243. package/src/constants.css +2 -2
  244. package/src/tokens.js +2 -2
  245. package/.storybook/test-runner.ts +0 -77
  246. package/dist/build/accordion.entry.js.map +0 -1
  247. package/dist/build/chunks/Accordion-D1HQ0FDq.js +0 -63
  248. package/dist/build/chunks/Accordion-D1HQ0FDq.js.map +0 -1
  249. package/dist/build/chunks/disclosure-widget-CdjCdx7t.js +0 -129
  250. package/dist/build/chunks/disclosure-widget-CdjCdx7t.js.map +0 -1
  251. package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js +0 -70
  252. package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js.map +0 -1
  253. package/dist/build/chunks/polyfills-DnrsypYs.js +0 -812
  254. package/dist/build/chunks/polyfills-DnrsypYs.js.map +0 -1
  255. package/dist/build/chunks/popover-DzUcnIlX.js +0 -797
  256. package/dist/build/chunks/popover-DzUcnIlX.js.map +0 -1
  257. package/dist/build/chunks/popover.entry-BQvyR0d5.js +0 -38
  258. package/dist/build/chunks/popover.entry-BQvyR0d5.js.map +0 -1
  259. package/dist/build/chunks/utilities-Ci7wwNeg.js +0 -148
  260. package/dist/build/chunks/utilities-Ci7wwNeg.js.map +0 -1
  261. package/dist/build/dialog.entry.js.map +0 -1
  262. package/dist/build/drop-menu.entry.js.map +0 -1
  263. package/dist/build/filters.entry.js.map +0 -1
  264. package/dist/build/global-alert.entry.js.map +0 -1
  265. package/dist/build/header.entry.js.map +0 -1
  266. package/dist/build/in-page-navigation.entry.js.map +0 -1
  267. package/dist/build/navigation.entry.js.map +0 -1
  268. package/dist/build/popover.entry.js.map +0 -1
  269. package/dist/build/sticky.entry.js.map +0 -1
  270. package/dist/build/tabs.entry.js.map +0 -1
  271. package/dist/build/utility-list.entry.js.map +0 -1
  272. package/src/Form/FormItem/__snapshots__/FormItem.stories.tsx.snap +0 -110
package/src/Layout/Header/__snapshots__/Header.stories.ts.snap CHANGED
@@ -1,503 +1,352 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
-
3
- exports[`Layout/Header Controls smoke-test 1`] = `
4
- <div class="mx-page default">
5
- <header class="mx-header mx-page mx-section--s">
6
- <div class="mx-header__inner">
7
- <div class="mx-header__brand">
8
- <img alt="Mixtape"
9
- src="./mixtape-logo.png"
10
- width="120"
11
- height
12
- >
13
- </div>
14
- <div class="mx-header__toggles">
15
- <mx-global-toggle>
16
- <button aria-controls="unique-0"
17
- class="mx-button mx-button--icon-only mx-icon mx-icon--menu"
18
- >
19
- Open Menu
20
- </button>
21
- </mx-global-toggle>
22
- </div>
23
- <div class="mx-header__main">
24
- <div id="unique-0"
25
- class="mx-header__nav mx-header__collapse-toggle"
26
- aria-label="Primary navigation"
27
- role="region"
28
- >
29
- <mx-nav flyout>
30
- <nav class="mx-nav mx-nav--dropdown"
31
- aria-label="Primary navigation"
32
- id="header-story"
33
- >
34
- <ul class="mx-nav__level-1">
35
- <li>
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
+
3
+ exports[`Controls 1`] = `
4
+ "<header class="mx-header mx-page mx-section--s">
5
+ <div class="mx-header__inner">
6
+ <div class="mx-header__brand">
7
+ <img alt="Mixtape" src="./mixtape-logo.png" width="120" height="">
8
+
9
+ </div>
10
+ <div class="mx-header__toggles">
11
+ <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
12
+ </div>
13
+ <div class="mx-header__main">
14
+ <div id="primary-nav" class="mx-header__nav mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
15
+
16
+
17
+ <mx-nav flyout="">
18
+ <nav class="mx-nav mx-nav--dropdown" aria-label="Primary navigation" id="header-story">
19
+ <ul class="mx-nav__level-1">
20
+ <li>
36
21
  <a href="#">
37
- News
38
- </a>
39
- </li>
40
- <li>
22
+ News
23
+ </a>
24
+ </li>
25
+ <li>
41
26
  <a href="#">
42
- About us
43
- </a>
44
- </li>
45
- <li>
27
+ About us
28
+ </a>
29
+ </li>
30
+ <li>
46
31
  <a href="#">
47
- Contact
48
- </a>
49
- </li>
50
- <li>
32
+ Contact
33
+ </a>
34
+ </li>
35
+ <li>
51
36
  <a href="#">
52
- Resources
53
- </a>
54
- </li>
55
- </ul>
56
- </nav>
57
- </mx-nav>
37
+ Resources
38
+ </a>
39
+ </li>
40
+ </ul>
41
+
42
+ </nav>
43
+ </mx-nav>
44
+
58
45
  </div>
59
- <button class="mx-button"
60
- type="button"
61
- >
62
- <span>
63
- Translate
64
- </span>
65
- <span class="mx-icon mx-icon--chevron-down">
66
- </span>
67
- </button>
68
- </div>
69
- </div>
70
- </header>
71
- </div>
46
+
47
+ <button class="mx-button" type="button">
48
+
49
+ <span>Translate</span>
50
+
51
+ <span class="mx-icon mx-icon--chevron-down"></span>
52
+
53
+ </button>
54
+
55
+ </div>
56
+ </div>
57
+ </header>
58
+ "
72
59
  `;
73
60
 
74
- exports[`Layout/Header Header smoke-test 1`] = `
75
- <div class="mx-page default">
76
- <header class="mx-header mx-page mx-section--s">
77
- <div class="mx-header__inner">
78
- <div class="mx-header__brand">
79
- <img alt="Mixtape"
80
- src="./mixtape-logo.png"
81
- width="120"
82
- height
83
- >
84
- </div>
85
- <div class="mx-header__toggles">
86
- <mx-global-toggle>
87
- <button aria-controls="unique-0"
88
- class="mx-button mx-button--icon-only mx-icon mx-icon--menu"
89
- >
90
- Open Menu
91
- </button>
92
- </mx-global-toggle>
93
- </div>
94
- <div class="mx-header__main">
95
- <div id="unique-0"
96
- class="mx-header__nav mx-header__collapse-toggle"
97
- aria-label="Primary navigation"
98
- role="region"
99
- >
100
- <mx-nav flyout>
101
- <nav class="mx-nav mx-nav--dropdown"
102
- aria-label="Primary navigation"
103
- id="header-story"
104
- >
105
- <ul class="mx-nav__level-1">
106
- <li>
61
+ exports[`Header 1`] = `
62
+ "<header class="mx-header mx-page mx-section--s">
63
+ <div class="mx-header__inner">
64
+ <div class="mx-header__brand">
65
+ <img alt="Mixtape" src="./mixtape-logo.png" width="120" height="">
66
+
67
+ </div>
68
+ <div class="mx-header__toggles">
69
+ <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
70
+ </div>
71
+ <div class="mx-header__main">
72
+ <div id="primary-nav" class="mx-header__nav mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
73
+
74
+
75
+ <mx-nav flyout="">
76
+ <nav class="mx-nav mx-nav--dropdown" aria-label="Primary navigation" id="header-story">
77
+ <ul class="mx-nav__level-1">
78
+ <li>
107
79
  <a href="#">
108
- News
109
- </a>
110
- </li>
111
- <li>
80
+ News
81
+ </a>
82
+ </li>
83
+ <li>
112
84
  <a href="#">
113
- About us
114
- </a>
115
- </li>
116
- <li>
85
+ About us
86
+ </a>
87
+ </li>
88
+ <li>
117
89
  <a href="#">
118
- Contact
119
- </a>
120
- </li>
121
- <li>
90
+ Contact
91
+ </a>
92
+ </li>
93
+ <li>
122
94
  <a href="#">
123
- Resources
124
- </a>
125
- </li>
126
- </ul>
127
- </nav>
128
- </mx-nav>
95
+ Resources
96
+ </a>
97
+ </li>
98
+ </ul>
99
+
100
+ </nav>
101
+ </mx-nav>
102
+
129
103
  </div>
130
- </div>
131
- </div>
132
- </header>
133
- </div>
104
+ </div>
105
+ </div>
106
+ </header>
107
+ "
134
108
  `;
135
109
 
136
- exports[`Layout/Header Search smoke-test 1`] = `
137
- <div class="mx-page default">
138
- <header class="mx-header mx-page mx-section--s">
139
- <div class="mx-header__inner">
140
- <div class="mx-header__brand">
141
- <img alt="Mixtape"
142
- src="./mixtape-logo.png"
143
- width="120"
144
- height
145
- >
146
- </div>
147
- <div class="mx-header__toggles">
148
- <mx-global-toggle>
149
- <button aria-controls="unique-0"
150
- class="mx-button mx-button--icon-only mx-icon mx-icon--search"
151
- >
152
- Open Search
153
- </button>
154
- </mx-global-toggle>
155
- <mx-global-toggle>
156
- <button aria-controls="unique-1"
157
- class="mx-button mx-button--icon-only mx-icon mx-icon--menu"
158
- >
159
- Open Menu
160
- </button>
161
- </mx-global-toggle>
162
- </div>
163
- <div class="mx-header__main">
164
- <div id="unique-0"
165
- class="mx-header__nav mx-header__collapse-toggle"
166
- aria-label="Primary navigation"
167
- role="region"
168
- >
169
- <mx-nav flyout>
170
- <nav class="mx-nav mx-nav--dropdown"
171
- aria-label="Primary navigation"
172
- id="header-story"
173
- >
174
- <ul class="mx-nav__level-1">
175
- <li>
110
+ exports[`Search 1`] = `
111
+ "<header class="mx-header mx-page mx-section--s">
112
+ <div class="mx-header__inner">
113
+ <div class="mx-header__brand">
114
+ <img alt="Mixtape" src="./mixtape-logo.png" width="120" height="">
115
+
116
+ </div>
117
+ <div class="mx-header__toggles">
118
+ <mx-global-toggle><button aria-controls="primary-search" class="mx-button mx-button--icon-only mx-icon mx-icon--search">Open Search</button></mx-global-toggle>
119
+ <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
120
+ </div>
121
+ <div class="mx-header__main">
122
+ <div id="primary-nav" class="mx-header__nav mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
123
+
124
+
125
+ <mx-nav flyout="">
126
+ <nav class="mx-nav mx-nav--dropdown" aria-label="Primary navigation" id="header-story">
127
+ <ul class="mx-nav__level-1">
128
+ <li>
176
129
  <a href="#">
177
- News
178
- </a>
179
- </li>
180
- <li>
130
+ News
131
+ </a>
132
+ </li>
133
+ <li>
181
134
  <a href="#">
182
- About us
183
- </a>
184
- </li>
185
- <li>
135
+ About us
136
+ </a>
137
+ </li>
138
+ <li>
186
139
  <a href="#">
187
- Contact
188
- </a>
189
- </li>
190
- <li>
140
+ Contact
141
+ </a>
142
+ </li>
143
+ <li>
191
144
  <a href="#">
192
- Resources
193
- </a>
194
- </li>
195
- </ul>
196
- </nav>
197
- </mx-nav>
145
+ Resources
146
+ </a>
147
+ </li>
148
+ </ul>
149
+
150
+ </nav>
151
+ </mx-nav>
152
+
198
153
  </div>
199
- <div id="unique-1"
200
- class="mx-header__search mx-header__collapse-toggle"
201
- aria-label="Search"
202
- role="region"
203
- >
204
- <form class="mx-form mx-form--inline-button"
205
- role="search"
206
- action="#search"
207
- >
208
- <input class="mx-input__text "
209
- id="search-keyword"
210
- name="search-form"
211
- type="search"
212
- value
213
- aria-label="Search by keywords"
214
- placeholder="Keywords..."
215
- >
216
- <button class="mx-button mx-button--icon-only"
217
- type="submit"
218
- >
219
- <span class="mx-icon mx-icon--search">
220
- </span>
221
- <span class="sr-only">
222
- Search
223
- </span>
224
- </button>
225
- </form>
154
+ <div id="primary-search" class="mx-header__search mx-header__collapse-toggle" aria-label="Search" role="region">
155
+
156
+ <form class="mx-form mx-form--inline-button" role="search" action="#search">
157
+ <input class="mx-input__text " id="search-keyword" name="search-form" type="search" value="" aria-label="Search by keywords" placeholder="Keywords...">
158
+ <button class="mx-button mx-button--icon-only" type="submit">
159
+ <span class="mx-icon mx-icon--search"></span>
160
+ <span class="sr-only">Search</span>
161
+ </button>
162
+ </form>
163
+
226
164
  </div>
227
- </div>
228
- </div>
229
- </header>
230
- </div>
165
+ </div>
166
+ </div>
167
+ </header>
168
+ "
231
169
  `;
232
170
 
233
- exports[`Layout/Header Stacked smoke-test 1`] = `
234
- <div class="mx-page default">
235
- <header class="mx-header mx-page mx-section--s">
236
- <div class="mx-header__inner">
237
- <div class="mx-header__brand">
238
- <img alt="Mixtape"
239
- src="./mixtape-logo.png"
240
- width="120"
241
- height
242
- >
243
- </div>
244
- <div class="mx-header__toggles">
245
- <mx-global-toggle>
246
- <button aria-controls="unique-0"
247
- class="mx-button mx-button--icon-only mx-icon mx-icon--search"
248
- >
249
- Open Search
250
- </button>
251
- </mx-global-toggle>
252
- <mx-global-toggle>
253
- <button aria-controls="unique-1"
254
- class="mx-button mx-button--icon-only mx-icon mx-icon--menu"
255
- >
256
- Open Menu
257
- </button>
258
- </mx-global-toggle>
259
- </div>
260
- <div class="mx-header__main">
261
- <div id="unique-0"
262
- class="mx-header__search mx-header__collapse-toggle"
263
- aria-label="Search"
264
- role="region"
265
- >
266
- <form class="mx-form mx-form--inline-button"
267
- role="search"
268
- action="#search"
269
- >
270
- <input class="mx-input__text "
271
- id="search-keyword"
272
- name="search-form"
273
- type="search"
274
- value
275
- aria-label="Search by keywords"
276
- placeholder="Keywords..."
277
- >
278
- <button class="mx-button mx-button--icon-only"
279
- type="submit"
280
- >
281
- <span class="mx-icon mx-icon--search">
282
- </span>
283
- <span class="sr-only">
284
- Search
285
- </span>
286
- </button>
287
- </form>
171
+ exports[`Stacked 1`] = `
172
+ "<header class="mx-header mx-page mx-section--s">
173
+ <div class="mx-header__inner">
174
+ <div class="mx-header__brand">
175
+ <img alt="Mixtape" src="./mixtape-logo.png" width="120" height="">
176
+
177
+ </div>
178
+ <div class="mx-header__toggles">
179
+ <mx-global-toggle><button aria-controls="primary-search" class="mx-button mx-button--icon-only mx-icon mx-icon--search">Open Search</button></mx-global-toggle>
180
+ <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
181
+ </div>
182
+ <div class="mx-header__main">
183
+ <div id="primary-search" class="mx-header__search mx-header__collapse-toggle" aria-label="Search" role="region">
184
+
185
+ <form class="mx-form mx-form--inline-button" role="search" action="#search">
186
+ <input class="mx-input__text " id="search-keyword" name="search-form" type="search" value="" aria-label="Search by keywords" placeholder="Keywords...">
187
+ <button class="mx-button mx-button--icon-only" type="submit">
188
+ <span class="mx-icon mx-icon--search"></span>
189
+ <span class="sr-only">Search</span>
190
+ </button>
191
+ </form>
192
+
288
193
  </div>
289
- </div>
290
- </div>
291
- </header>
292
- <div id="unique-1"
293
- class="mx-header__nav mx-page mx-header__collapse-toggle"
294
- aria-label="Primary navigation"
295
- role="region"
296
- >
194
+ </div>
195
+ </div>
196
+ </header>
197
+ <div id="primary-nav" class="mx-header__nav mx-page mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
297
198
  <div class="mx-header__nav-inner">
298
- <mx-nav edgecheck>
299
- <nav class="mx-nav mx-nav--dropdown mx-nav--mega-nav"
300
- aria-label="Primary navigation"
301
- id="header-stacked-story"
302
- >
303
- <ul class="mx-nav__level-1">
304
- <li>
305
- <a href="#"
306
- aria-current="page"
307
- >
308
- News
309
- </a>
310
- </li>
311
- <li class="mx-nav__has-subnav">
312
- <a href="#"
313
- id="unique-2"
314
- >
315
- About us
316
- </a>
317
- <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
318
- aria-expanded="false"
319
- aria-controls="unique-2"
320
- >
321
- Sub-navigation
322
- </button>
323
- <ul class="mx-nav__level-2"
324
- inert
325
- id="unique-3"
326
- aria-labelledby="unique-3"
327
- >
328
- <li class="mx-nav__has-subnav">
329
- <a href="#"
330
- aria-current="page"
331
- id="unique-4"
332
- >
333
- Who
334
- </a>
335
- <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
336
- aria-expanded="false"
337
- aria-controls="unique-4"
338
- >
339
- Sub-navigation
340
- </button>
341
- <ul class="mx-nav__level-3"
342
- inert
343
- id="unique-5"
344
- aria-labelledby="unique-5"
345
- >
346
- <li>
347
- <a href="#"
348
- aria-current="page"
349
- >
350
- How come?
351
- </a>
352
- </li>
353
- <li>
354
- <a href="#">
355
- Why not?
356
- </a>
357
- </li>
358
- <li>
359
- <a href="#">
360
- What for?
361
- </a>
362
- </li>
363
- </ul>
364
- </li>
365
- <li>
199
+
200
+
201
+ <mx-nav edgecheck="">
202
+ <nav class="mx-nav mx-nav--dropdown mx-nav--mega-nav" aria-label="Primary navigation" id="header-stacked-story">
203
+ <ul class="mx-nav__level-1">
204
+ <li>
205
+ <a href="#" aria-current="page">
206
+ News
207
+ </a>
208
+ </li>
209
+ <li class="mx-nav__has-subnav">
210
+ <a href="#" id="list-label-subnav-0--about-us">
211
+ About us
212
+ </a>
213
+ <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-0--about-us">Sub-navigation</button>
214
+ <ul class="mx-nav__level-2" inert="" id="subnav-0--about-us" aria-labelledby="list-label-subnav-0--about-us">
215
+ <li class="mx-nav__has-subnav">
216
+ <a href="#" aria-current="page" id="list-label-subnav-1--who">
217
+ Who
218
+ </a>
219
+ <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-1--who">Sub-navigation</button>
220
+ <ul class="mx-nav__level-3" inert="" id="subnav-1--who" aria-labelledby="list-label-subnav-1--who">
221
+ <li>
222
+ <a href="#" aria-current="page">
223
+ How come?
224
+ </a>
225
+ </li>
226
+ <li>
227
+ <a href="#">
228
+ Why not?
229
+ </a>
230
+ </li>
231
+ <li>
232
+ <a href="#">
233
+ What for?
234
+ </a>
235
+ </li>
236
+ </ul>
237
+
238
+ </li>
239
+ <li>
366
240
  <a href="#">
367
- What
368
- </a>
369
- </li>
370
- <li>
241
+ What
242
+ </a>
243
+ </li>
244
+ <li>
371
245
  <a href="#">
372
- Why
373
- </a>
374
- </li>
375
- </ul>
376
- </li>
377
- <li class="mx-nav__has-subnav">
378
- <a href="#"
379
- id="unique-6"
380
- >
381
- Contact
382
- </a>
383
- <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only"
384
- aria-expanded="false"
385
- aria-controls="unique-6"
386
- >
387
- Sub-navigation
388
- </button>
389
- <ul class="mx-nav__level-2"
390
- inert
391
- id="unique-7"
392
- aria-labelledby="unique-7"
393
- >
394
- <li>
395
- <a href="#"
396
- aria-current="page"
397
- >
398
- How
399
- </a>
400
- </li>
401
- <li>
246
+ Why
247
+ </a>
248
+ </li>
249
+ </ul>
250
+
251
+ </li>
252
+ <li class="mx-nav__has-subnav">
253
+ <a href="#" id="list-label-subnav-2--contact">
254
+ Contact
255
+ </a>
256
+ <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-2--contact">Sub-navigation</button>
257
+ <ul class="mx-nav__level-2" inert="" id="subnav-2--contact" aria-labelledby="list-label-subnav-2--contact">
258
+ <li>
259
+ <a href="#" aria-current="page">
260
+ How
261
+ </a>
262
+ </li>
263
+ <li>
402
264
  <a href="#">
403
- Where
404
- </a>
405
- </li>
406
- <li>
265
+ Where
266
+ </a>
267
+ </li>
268
+ <li>
407
269
  <a href="#">
408
- When
409
- </a>
410
- </li>
411
- </ul>
412
- </li>
413
- <li>
414
- <a href="#">
415
- Resources
416
- </a>
417
- </li>
418
- </ul>
419
- </nav>
420
- </mx-nav>
421
- <div class="mx-header__nav-right">
422
- <button class="mx-button"
423
- type="button"
424
- >
425
- <span>
426
- Translate
427
- </span>
428
- <span class="mx-icon mx-icon--chevron-down">
429
- </span>
430
- </button>
431
- </div>
432
- </div>
270
+ When
271
+ </a>
272
+ </li>
273
+ </ul>
274
+
275
+ </li>
276
+ <li>
277
+ <a href="#">
278
+ Resources
279
+ </a>
280
+ </li>
281
+ </ul>
282
+
283
+ </nav>
284
+ </mx-nav>
285
+
286
+ <div class="mx-header__nav-right">
287
+
288
+ <button class="mx-button" type="button">
289
+
290
+ <span>Translate</span>
291
+
292
+ <span class="mx-icon mx-icon--chevron-down"></span>
293
+
294
+ </button>
295
+
296
+ </div>
297
+ </div>
433
298
  </div>
434
- </div>
299
+ "
435
300
  `;
436
301
 
437
- exports[`Layout/Header WithTitle smoke-test 1`] = `
438
- <div class="mx-page default">
439
- <header class="mx-header mx-page mx-section--s">
440
- <div class="mx-header__inner">
441
- <div class="mx-header__brand">
442
- <img alt="Mixtape"
443
- src="./mixtape-logo.png"
444
- width="120"
445
- height
446
- >
447
- <div class="mx-header__name">
448
- <strong>
449
- Design System
450
- </strong>
451
- A PreviousNext Product
452
- </div>
453
- </div>
454
- <div class="mx-header__toggles">
455
- <mx-global-toggle>
456
- <button aria-controls="unique-0"
457
- class="mx-button mx-button--icon-only mx-icon mx-icon--menu"
458
- >
459
- Open Menu
460
- </button>
461
- </mx-global-toggle>
462
- </div>
463
- <div class="mx-header__main">
464
- <div id="unique-0"
465
- class="mx-header__nav mx-header__collapse-toggle"
466
- aria-label="Primary navigation"
467
- role="region"
468
- >
469
- <mx-nav flyout>
470
- <nav class="mx-nav mx-nav--dropdown"
471
- aria-label="Primary navigation"
472
- id="header-story"
473
- >
474
- <ul class="mx-nav__level-1">
475
- <li>
302
+ exports[`With Title 1`] = `
303
+ "<header class="mx-header mx-page mx-section--s">
304
+ <div class="mx-header__inner">
305
+ <div class="mx-header__brand">
306
+ <img alt="Mixtape" src="./mixtape-logo.png" width="120" height="">
307
+
308
+ <div class="mx-header__name">
309
+ <strong>Design System</strong> A PreviousNext Product
310
+ </div>
311
+ </div>
312
+ <div class="mx-header__toggles">
313
+ <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--icon-only mx-icon mx-icon--menu">Open Menu</button></mx-global-toggle>
314
+ </div>
315
+ <div class="mx-header__main">
316
+ <div id="primary-nav" class="mx-header__nav mx-header__collapse-toggle" aria-label="Primary navigation" role="region">
317
+
318
+
319
+ <mx-nav flyout="">
320
+ <nav class="mx-nav mx-nav--dropdown" aria-label="Primary navigation" id="header-story">
321
+ <ul class="mx-nav__level-1">
322
+ <li>
476
323
  <a href="#">
477
- News
478
- </a>
479
- </li>
480
- <li>
324
+ News
325
+ </a>
326
+ </li>
327
+ <li>
481
328
  <a href="#">
482
- About us
483
- </a>
484
- </li>
485
- <li>
329
+ About us
330
+ </a>
331
+ </li>
332
+ <li>
486
333
  <a href="#">
487
- Contact
488
- </a>
489
- </li>
490
- <li>
334
+ Contact
335
+ </a>
336
+ </li>
337
+ <li>
491
338
  <a href="#">
492
- Resources
493
- </a>
494
- </li>
495
- </ul>
496
- </nav>
497
- </mx-nav>
339
+ Resources
340
+ </a>
341
+ </li>
342
+ </ul>
343
+
344
+ </nav>
345
+ </mx-nav>
346
+
498
347
  </div>
499
- </div>
500
- </div>
501
- </header>
502
- </div>
348
+ </div>
349
+ </div>
350
+ </header>
351
+ "
503
352
  `;