@pnx-mixtape/mxds 0.0.1

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 (622) hide show
  1. package/README.md +274 -0
  2. package/dist/build/Accordion.js +61 -0
  3. package/dist/build/Accordion.js.map +1 -0
  4. package/dist/build/AccordionDiv.js +62 -0
  5. package/dist/build/AccordionDiv.js.map +1 -0
  6. package/dist/build/AccordionGroup.js +85 -0
  7. package/dist/build/AccordionGroup.js.map +1 -0
  8. package/dist/build/AccordionMobile.js +31 -0
  9. package/dist/build/AccordionMobile.js.map +1 -0
  10. package/dist/build/Dialog.js +116 -0
  11. package/dist/build/Dialog.js.map +1 -0
  12. package/dist/build/DropMenu.js +132 -0
  13. package/dist/build/DropMenu.js.map +1 -0
  14. package/dist/build/GlobalToggle.js +103 -0
  15. package/dist/build/GlobalToggle.js.map +1 -0
  16. package/dist/build/InPageAlert.js +61 -0
  17. package/dist/build/InPageAlert.js.map +1 -0
  18. package/dist/build/InPageNavigation.js +92 -0
  19. package/dist/build/InPageNavigation.js.map +1 -0
  20. package/dist/build/Navigation.js +126 -0
  21. package/dist/build/Navigation.js.map +1 -0
  22. package/dist/build/Sticky.js +63 -0
  23. package/dist/build/Sticky.js.map +1 -0
  24. package/dist/build/Tabs.js +164 -0
  25. package/dist/build/Tabs.js.map +1 -0
  26. package/dist/build/accordion.css +108 -0
  27. package/dist/build/base.css +1000 -0
  28. package/dist/build/breadcrumb.css +47 -0
  29. package/dist/build/breakpoint-loader.js +52 -0
  30. package/dist/build/breakpoint-loader.js.map +1 -0
  31. package/dist/build/button.css +126 -0
  32. package/dist/build/callout.css +11 -0
  33. package/dist/build/card.css +135 -0
  34. package/dist/build/chunks/js.cookie-CiMiGxWx.js +101 -0
  35. package/dist/build/chunks/js.cookie-CiMiGxWx.js.map +1 -0
  36. package/dist/build/chunks/polyfills-CJ5uTmUJ.js +749 -0
  37. package/dist/build/chunks/polyfills-CJ5uTmUJ.js.map +1 -0
  38. package/dist/build/chunks/popover-wbPSyFRj.js +654 -0
  39. package/dist/build/chunks/popover-wbPSyFRj.js.map +1 -0
  40. package/dist/build/chunks/utilities-BIk0P2KX.js +61 -0
  41. package/dist/build/chunks/utilities-BIk0P2KX.js.map +1 -0
  42. package/dist/build/constants.css +120 -0
  43. package/dist/build/container-grid.css +207 -0
  44. package/dist/build/content-block.css +23 -0
  45. package/dist/build/cookie-compliance.js +122 -0
  46. package/dist/build/cookie-compliance.js.map +1 -0
  47. package/dist/build/dialog.css +98 -0
  48. package/dist/build/disclosure-widget.js +124 -0
  49. package/dist/build/disclosure-widget.js.map +1 -0
  50. package/dist/build/drop-menu.css +78 -0
  51. package/dist/build/drupal.css +74 -0
  52. package/dist/build/footer-menu.css +32 -0
  53. package/dist/build/footer.css +61 -0
  54. package/dist/build/form.css +589 -0
  55. package/dist/build/grid.css +200 -0
  56. package/dist/build/header.css +131 -0
  57. package/dist/build/hero-banner.css +62 -0
  58. package/dist/build/icon.css +399 -0
  59. package/dist/build/in-page-alert.css +94 -0
  60. package/dist/build/in-page-navigation.css +17 -0
  61. package/dist/build/index.css +4980 -0
  62. package/dist/build/io-loader.js +44 -0
  63. package/dist/build/io-loader.js.map +1 -0
  64. package/dist/build/keyboard.js +101 -0
  65. package/dist/build/keyboard.js.map +1 -0
  66. package/dist/build/link-list.css +72 -0
  67. package/dist/build/masthead.css +39 -0
  68. package/dist/build/nav-list.css +29 -0
  69. package/dist/build/navigation.css +371 -0
  70. package/dist/build/page.css +184 -0
  71. package/dist/build/pagination.css +123 -0
  72. package/dist/build/section.css +160 -0
  73. package/dist/build/sidebar.css +105 -0
  74. package/dist/build/sticky.css +47 -0
  75. package/dist/build/tabs.css +106 -0
  76. package/dist/build/tag.css +67 -0
  77. package/dist/build/tiles.css +61 -0
  78. package/dist/build/utilities.css +175 -0
  79. package/package.json +130 -0
  80. package/src/Atom/Background/Backgrounds.stories.ts +36 -0
  81. package/src/Atom/Background/__snapshots__/Backgrounds.stories.ts.snap +100 -0
  82. package/src/Atom/Background/_background.css +80 -0
  83. package/src/Atom/Background/backgrounds.twig +10 -0
  84. package/src/Atom/Base.mdx +76 -0
  85. package/src/Atom/Blockquote/_blockquote.css +7 -0
  86. package/src/Atom/Button/Button.stories.ts +71 -0
  87. package/src/Atom/Button/Button.stories.tsx +31 -0
  88. package/src/Atom/Button/Button.tsx +70 -0
  89. package/src/Atom/Button/README.md +30 -0
  90. package/src/Atom/Button/__snapshots__/Button.stories.ts.snap +41 -0
  91. package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap +17 -0
  92. package/src/Atom/Button/_buttons-styles.css +48 -0
  93. package/src/Atom/Button/_buttons.css +71 -0
  94. package/src/Atom/Button/button.css +2 -0
  95. package/src/Atom/Button/button.twig +23 -0
  96. package/src/Atom/DefinitionList/DefinitionList.stories.tsx +25 -0
  97. package/src/Atom/DefinitionList/DefinitionList.tsx +27 -0
  98. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.tsx.snap +30 -0
  99. package/src/Atom/Heading/Heading.stories.ts +25 -0
  100. package/src/Atom/Heading/Heading.stories.tsx +19 -0
  101. package/src/Atom/Heading/Heading.tsx +44 -0
  102. package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap +7 -0
  103. package/src/Atom/Heading/__snapshots__/Heading.stories.tsx.snap +9 -0
  104. package/src/Atom/Heading/_headings.css +84 -0
  105. package/src/Atom/Heading/heading.twig +8 -0
  106. package/src/Atom/Icon/Icon.mdx +32 -0
  107. package/src/Atom/Icon/Icon.stories.ts +50 -0
  108. package/src/Atom/Icon/Icon.stories.tsx +44 -0
  109. package/src/Atom/Icon/Icon.tsx +30 -0
  110. package/src/Atom/Icon/README.md +7 -0
  111. package/src/Atom/Icon/__snapshots__/Icon.stories.ts.snap +18 -0
  112. package/src/Atom/Icon/__snapshots__/Icon.stories.tsx.snap +18 -0
  113. package/src/Atom/Icon/_extended-set.css +45 -0
  114. package/src/Atom/Icon/_icon.css +151 -0
  115. package/src/Atom/Icon/_mixin-icon.css +5 -0
  116. package/src/Atom/Icon/icon.css +2 -0
  117. package/src/Atom/Icon/icon.twig +12 -0
  118. package/src/Atom/Icon/images/arrow-down.svg +1 -0
  119. package/src/Atom/Icon/images/arrow-left.svg +1 -0
  120. package/src/Atom/Icon/images/arrow-right.svg +1 -0
  121. package/src/Atom/Icon/images/arrow-up.svg +1 -0
  122. package/src/Atom/Icon/images/attachment.svg +1 -0
  123. package/src/Atom/Icon/images/blockquote.svg +1 -0
  124. package/src/Atom/Icon/images/bluesky.svg +1 -0
  125. package/src/Atom/Icon/images/bookmark.svg +1 -0
  126. package/src/Atom/Icon/images/building.svg +1 -0
  127. package/src/Atom/Icon/images/calendar.svg +1 -0
  128. package/src/Atom/Icon/images/chevron-down.svg +1 -0
  129. package/src/Atom/Icon/images/chevron-left.svg +1 -0
  130. package/src/Atom/Icon/images/chevron-right.svg +1 -0
  131. package/src/Atom/Icon/images/chevron-up.svg +1 -0
  132. package/src/Atom/Icon/images/clock.svg +1 -0
  133. package/src/Atom/Icon/images/close.svg +1 -0
  134. package/src/Atom/Icon/images/collapse.svg +1 -0
  135. package/src/Atom/Icon/images/controls.svg +1 -0
  136. package/src/Atom/Icon/images/download.svg +1 -0
  137. package/src/Atom/Icon/images/drupal.svg +3 -0
  138. package/src/Atom/Icon/images/email.svg +1 -0
  139. package/src/Atom/Icon/images/error.svg +1 -0
  140. package/src/Atom/Icon/images/expand.svg +1 -0
  141. package/src/Atom/Icon/images/external-link.svg +1 -0
  142. package/src/Atom/Icon/images/facebook.svg +1 -0
  143. package/src/Atom/Icon/images/file.svg +1 -0
  144. package/src/Atom/Icon/images/globe.svg +1 -0
  145. package/src/Atom/Icon/images/google.svg +1 -0
  146. package/src/Atom/Icon/images/heart-selected.svg +1 -0
  147. package/src/Atom/Icon/images/heart-unselected.svg +1 -0
  148. package/src/Atom/Icon/images/home.svg +1 -0
  149. package/src/Atom/Icon/images/image.svg +1 -0
  150. package/src/Atom/Icon/images/info.svg +1 -0
  151. package/src/Atom/Icon/images/instagram.svg +1 -0
  152. package/src/Atom/Icon/images/link.svg +1 -0
  153. package/src/Atom/Icon/images/linkedin.svg +1 -0
  154. package/src/Atom/Icon/images/list.svg +1 -0
  155. package/src/Atom/Icon/images/lock.svg +1 -0
  156. package/src/Atom/Icon/images/login.svg +1 -0
  157. package/src/Atom/Icon/images/mastodon.svg +3 -0
  158. package/src/Atom/Icon/images/media-next.svg +1 -0
  159. package/src/Atom/Icon/images/media-pause.svg +1 -0
  160. package/src/Atom/Icon/images/media-play.svg +1 -0
  161. package/src/Atom/Icon/images/media-previous.svg +1 -0
  162. package/src/Atom/Icon/images/media-rewind.svg +1 -0
  163. package/src/Atom/Icon/images/media-skip.svg +1 -0
  164. package/src/Atom/Icon/images/media-stop.svg +1 -0
  165. package/src/Atom/Icon/images/menu.svg +1 -0
  166. package/src/Atom/Icon/images/more.svg +1 -0
  167. package/src/Atom/Icon/images/notification.svg +1 -0
  168. package/src/Atom/Icon/images/pencil.svg +1 -0
  169. package/src/Atom/Icon/images/phone.svg +1 -0
  170. package/src/Atom/Icon/images/pin.svg +1 -0
  171. package/src/Atom/Icon/images/print.svg +1 -0
  172. package/src/Atom/Icon/images/question.svg +1 -0
  173. package/src/Atom/Icon/images/restart.svg +1 -0
  174. package/src/Atom/Icon/images/search.svg +1 -0
  175. package/src/Atom/Icon/images/settings.svg +1 -0
  176. package/src/Atom/Icon/images/share.svg +1 -0
  177. package/src/Atom/Icon/images/star-selected.svg +1 -0
  178. package/src/Atom/Icon/images/star-unselected.svg +1 -0
  179. package/src/Atom/Icon/images/success.svg +1 -0
  180. package/src/Atom/Icon/images/tick.svg +1 -0
  181. package/src/Atom/Icon/images/trash.svg +1 -0
  182. package/src/Atom/Icon/images/twitter.svg +1 -0
  183. package/src/Atom/Icon/images/user.svg +1 -0
  184. package/src/Atom/Icon/images/video.svg +1 -0
  185. package/src/Atom/Icon/images/warning.svg +1 -0
  186. package/src/Atom/Icon/images/youtube.svg +1 -0
  187. package/src/Atom/Image/Image.stories.ts +20 -0
  188. package/src/Atom/Image/__snapshots__/Image.stories.ts.snap +9 -0
  189. package/src/Atom/Image/_image.css +29 -0
  190. package/src/Atom/Image/image.twig +13 -0
  191. package/src/Atom/Link/Link.stories.ts +37 -0
  192. package/src/Atom/Link/Link.stories.tsx +30 -0
  193. package/src/Atom/Link/Link.tsx +38 -0
  194. package/src/Atom/Link/__snapshots__/Link.stories.ts.snap +17 -0
  195. package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap +25 -0
  196. package/src/Atom/Link/_links.css +39 -0
  197. package/src/Atom/Link/link.twig +12 -0
  198. package/src/Atom/Media/Media.stories.ts +26 -0
  199. package/src/Atom/Media/Media.stories.tsx +25 -0
  200. package/src/Atom/Media/Media.tsx +42 -0
  201. package/src/Atom/Media/__snapshots__/Media.stories.ts.snap +14 -0
  202. package/src/Atom/Media/__snapshots__/Media.stories.tsx.snap +18 -0
  203. package/src/Atom/Media/_media.css +40 -0
  204. package/src/Atom/Media/media.twig +18 -0
  205. package/src/Atom/NavList/NavList.stories.ts +15 -0
  206. package/src/Atom/NavList/__snapshots__/NavList.stories.ts.snap +43 -0
  207. package/src/Atom/NavList/nav-list.css +29 -0
  208. package/src/Atom/NavList/nav-list.twig +25 -0
  209. package/src/Atom/README.md +5 -0
  210. package/src/Atom/Spacing/Spacing.stories.ts +48 -0
  211. package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap +8 -0
  212. package/src/Atom/Spacing/_spacing.css +36 -0
  213. package/src/Atom/Spacing/spacing.twig +3 -0
  214. package/src/Atom/Table/Table.stories.ts +39 -0
  215. package/src/Atom/Table/TableResponsive.stories.ts +16 -0
  216. package/src/Atom/Table/__snapshots__/Table.stories.ts.snap +261 -0
  217. package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap +68 -0
  218. package/src/Atom/Table/_table.css +72 -0
  219. package/src/Atom/Table/table-responsive.twig +32 -0
  220. package/src/Atom/Table/table.twig +30 -0
  221. package/src/Atom/Text/Text.stories.tsx +20 -0
  222. package/src/Atom/Text/Text.tsx +26 -0
  223. package/src/Atom/Text/TextSizes.stories.ts +25 -0
  224. package/src/Atom/Text/__snapshots__/Text.stories.tsx.snap +7 -0
  225. package/src/Atom/Text/__snapshots__/TextSizes.stories.ts.snap +63 -0
  226. package/src/Atom/Text/_text-align.css +13 -0
  227. package/src/Atom/Text/_text-sizes.css +117 -0
  228. package/src/Atom/Text/text-alignment.twig +5 -0
  229. package/src/Atom/Text/text-style.twig +1 -0
  230. package/src/Atom/Text/text-styles-example.twig +35 -0
  231. package/src/Atom/Video/Video.stories.ts +16 -0
  232. package/src/Atom/Video/Video.tsx +17 -0
  233. package/src/Atom/Video/__snapshots__/Video.stories.ts.snap +21 -0
  234. package/src/Atom/Video/_video.css +10 -0
  235. package/src/Atom/Video/video.twig +5 -0
  236. package/src/Atom/_animated.css +65 -0
  237. package/src/Atom/_base.css +62 -0
  238. package/src/Atom/_flow-legacy.css +48 -0
  239. package/src/Atom/_flow.css +53 -0
  240. package/src/Atom/_generic.css +93 -0
  241. package/src/Atom/_hr.css +10 -0
  242. package/src/Atom/_mixins.css +22 -0
  243. package/src/Atom/_print.css +20 -0
  244. package/src/Atom/base.css +5 -0
  245. package/src/Atom/images/external-link.svg +1 -0
  246. package/src/Component/Accordion/Accordion.stories.ts +51 -0
  247. package/src/Component/Accordion/Accordion.stories.tsx +22 -0
  248. package/src/Component/Accordion/Accordion.tsx +83 -0
  249. package/src/Component/Accordion/Elements/Accordion.ts +82 -0
  250. package/src/Component/Accordion/Elements/AccordionDiv.ts +83 -0
  251. package/src/Component/Accordion/Elements/AccordionGroup.ts +106 -0
  252. package/src/Component/Accordion/Elements/AccordionMobile.ts +47 -0
  253. package/src/Component/Accordion/README.md +45 -0
  254. package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap +94 -0
  255. package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap +26 -0
  256. package/src/Component/Accordion/accordion-item.twig +18 -0
  257. package/src/Component/Accordion/accordion.css +107 -0
  258. package/src/Component/Accordion/accordion.twig +19 -0
  259. package/src/Component/Accordion/images/collapse.svg +1 -0
  260. package/src/Component/Accordion/images/expand.svg +1 -0
  261. package/src/Component/Accordion/twig/accordion-div.twig +13 -0
  262. package/src/Component/Accordion/twig/accordion-example.twig +36 -0
  263. package/src/Component/Accordion/twig/accordion-mobile.twig +15 -0
  264. package/src/Component/Accordion/twig/accordion-story.twig +13 -0
  265. package/src/Component/Author/Author.stories.tsx +18 -0
  266. package/src/Component/Author/Author.tsx +30 -0
  267. package/src/Component/Author/__snapshots__/Author.stories.tsx.snap +21 -0
  268. package/src/Component/Breadcrumb/Breadcrumb.stories.ts +15 -0
  269. package/src/Component/Breadcrumb/Breadcrumb.stories.tsx +38 -0
  270. package/src/Component/Breadcrumb/Breadcrumb.tsx +34 -0
  271. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap +26 -0
  272. package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.tsx.snap +60 -0
  273. package/src/Component/Breadcrumb/breadcrumb.css +46 -0
  274. package/src/Component/Breadcrumb/breadcrumb.twig +12 -0
  275. package/src/Component/Callout/Callout.stories.ts +29 -0
  276. package/src/Component/Callout/callout.css +7 -0
  277. package/src/Component/Callout/callout.twig +10 -0
  278. package/src/Component/Callout/twig/callout-story.twig +11 -0
  279. package/src/Component/Card/CHANGELOG.md +187 -0
  280. package/src/Component/Card/Card.stories.ts +106 -0
  281. package/src/Component/Card/Card.stories.tsx +50 -0
  282. package/src/Component/Card/Card.tsx +56 -0
  283. package/src/Component/Card/README.md +21 -0
  284. package/src/Component/Card/__snapshots__/Card.stories.ts.snap +186 -0
  285. package/src/Component/Card/__snapshots__/Card.stories.tsx.snap +88 -0
  286. package/src/Component/Card/__snapshots__/CardGrid.stories.ts.snap +89 -0
  287. package/src/Component/Card/card-grid.twig +10 -0
  288. package/src/Component/Card/card.css +128 -0
  289. package/src/Component/Card/card.twig +45 -0
  290. package/src/Component/Card/twig/old-card.twig +17 -0
  291. package/src/Component/Card/twig/story-card.twig +29 -0
  292. package/src/Component/ContentBlock/ContentBlock.stories.ts +15 -0
  293. package/src/Component/ContentBlock/ContentBlock.stories.tsx +30 -0
  294. package/src/Component/ContentBlock/ContentBlock.tsx +37 -0
  295. package/src/Component/ContentBlock/README.md +21 -0
  296. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap +26 -0
  297. package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.tsx.snap +21 -0
  298. package/src/Component/ContentBlock/content-block.css +21 -0
  299. package/src/Component/ContentBlock/content-block.twig +12 -0
  300. package/src/Component/ContentBlock/twig/content-block-example.twig +7 -0
  301. package/src/Component/Dialog/Dialog.stories.ts +28 -0
  302. package/src/Component/Dialog/Dialog.stories.tsx +45 -0
  303. package/src/Component/Dialog/Dialog.tsx +79 -0
  304. package/src/Component/Dialog/Elements/Dialog.ts +145 -0
  305. package/src/Component/Dialog/README.md +63 -0
  306. package/src/Component/Dialog/__snapshots__/Dialog.stories.ts.snap +85 -0
  307. package/src/Component/Dialog/__snapshots__/Dialog.stories.tsx.snap +39 -0
  308. package/src/Component/Dialog/dialog.css +85 -0
  309. package/src/Component/Dialog/dialog.twig +19 -0
  310. package/src/Component/DropMenu/Components/DropMenuContext.tsx +192 -0
  311. package/src/Component/DropMenu/Components/DropMenuItem.tsx +35 -0
  312. package/src/Component/DropMenu/DropMenu.stories.ts +36 -0
  313. package/src/Component/DropMenu/DropMenu.stories.tsx +24 -0
  314. package/src/Component/DropMenu/DropMenu.tsx +81 -0
  315. package/src/Component/DropMenu/Elements/DropMenu.ts +172 -0
  316. package/src/Component/DropMenu/README.md +11 -0
  317. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.ts.snap +32 -0
  318. package/src/Component/DropMenu/__snapshots__/DropMenu.stories.tsx.snap +47 -0
  319. package/src/Component/DropMenu/drop-menu.css +68 -0
  320. package/src/Component/DropMenu/drop-menu.twig +27 -0
  321. package/src/Component/DropMenu/polyfills.js +28 -0
  322. package/src/Component/HeroBanner/HeroBanner.stories.ts +75 -0
  323. package/src/Component/HeroBanner/HeroBanner.stories.tsx +30 -0
  324. package/src/Component/HeroBanner/HeroBanner.tsx +50 -0
  325. package/src/Component/HeroBanner/__snapshots__/PageTitle.stories.ts.snap +31 -0
  326. package/src/Component/HeroBanner/__snapshots__/PageTitle.stories.tsx.snap +36 -0
  327. package/src/Component/HeroBanner/hero-banner.css +51 -0
  328. package/src/Component/HeroBanner/hero-banner.twig +41 -0
  329. package/src/Component/HeroBanner/twig/hero-banner-story.twig +19 -0
  330. package/src/Component/InPageAlert/Elements/InPageAlert.ts +87 -0
  331. package/src/Component/InPageAlert/InPageAlert.stories.ts +35 -0
  332. package/src/Component/InPageAlert/InPageAlert.stories.tsx +43 -0
  333. package/src/Component/InPageAlert/InPageAlert.tsx +50 -0
  334. package/src/Component/InPageAlert/README.md +27 -0
  335. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap +43 -0
  336. package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.tsx.snap +69 -0
  337. package/src/Component/InPageAlert/in-page-alert.css +89 -0
  338. package/src/Component/InPageAlert/in-page-alert.twig +18 -0
  339. package/src/Component/InPageNavigation/Elements/InPageNavigation.ts +125 -0
  340. package/src/Component/InPageNavigation/Hooks/useInPageNavigation.ts +45 -0
  341. package/src/Component/InPageNavigation/InPageNavigation.stories.ts +16 -0
  342. package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +86 -0
  343. package/src/Component/InPageNavigation/InPageNavigation.tsx +38 -0
  344. package/src/Component/InPageNavigation/README.md +30 -0
  345. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +73 -0
  346. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +149 -0
  347. package/src/Component/InPageNavigation/in-page-navigation.css +17 -0
  348. package/src/Component/InPageNavigation/in-page-navigation.twig +17 -0
  349. package/src/Component/InPageNavigation/twig/in-page-navigation-content-example.twig +16 -0
  350. package/src/Component/InPageNavigation/twig/in-page-navigation-menu-example.twig +6 -0
  351. package/src/Component/LinkList/LinkList.stories.ts +29 -0
  352. package/src/Component/LinkList/LinkList.stories.tsx +29 -0
  353. package/src/Component/LinkList/LinkList.tsx +43 -0
  354. package/src/Component/LinkList/README.md +19 -0
  355. package/src/Component/LinkList/__snapshots__/LinkList.stories.ts.snap +58 -0
  356. package/src/Component/LinkList/__snapshots__/LinkList.stories.tsx.snap +53 -0
  357. package/src/Component/LinkList/link-list.css +68 -0
  358. package/src/Component/LinkList/link-list.twig +12 -0
  359. package/src/Component/ListItem/Teaser.stories.tsx +34 -0
  360. package/src/Component/ListItem/Teaser.tsx +54 -0
  361. package/src/Component/ListItem/__snapshots__/Teaser.stories.tsx.snap +32 -0
  362. package/src/Component/Navigation/Collapsible.stories.ts +16 -0
  363. package/src/Component/Navigation/Components/DropdownLevel.tsx +107 -0
  364. package/src/Component/Navigation/Dropdown.stories.ts +16 -0
  365. package/src/Component/Navigation/Dropdown.stories.tsx +46 -0
  366. package/src/Component/Navigation/Dropdown.tsx +39 -0
  367. package/src/Component/Navigation/Elements/Navigation.ts +174 -0
  368. package/src/Component/Navigation/MegaNav.stories.ts +16 -0
  369. package/src/Component/Navigation/Navigation.stories.ts +15 -0
  370. package/src/Component/Navigation/Navigation.stories.tsx +40 -0
  371. package/src/Component/Navigation/Navigation.tsx +51 -0
  372. package/src/Component/Navigation/README.md +17 -0
  373. package/src/Component/Navigation/__snapshots__/Collapsible.stories.ts.snap +123 -0
  374. package/src/Component/Navigation/__snapshots__/Dropdown.stories.ts.snap +125 -0
  375. package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap +39 -0
  376. package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap +25 -0
  377. package/src/Component/Navigation/__snapshots__/Navigation.stories.tsx.snap +61 -0
  378. package/src/Component/Navigation/_navigation-collapsible.css +72 -0
  379. package/src/Component/Navigation/_navigation-dropdown.css +152 -0
  380. package/src/Component/Navigation/_navigation-mega.css +51 -0
  381. package/src/Component/Navigation/_navigation.css +55 -0
  382. package/src/Component/Navigation/navigation-collapsible.twig +7 -0
  383. package/src/Component/Navigation/navigation-dropdown.twig +7 -0
  384. package/src/Component/Navigation/navigation-mega-nav.twig +7 -0
  385. package/src/Component/Navigation/navigation.css +4 -0
  386. package/src/Component/Navigation/navigation.twig +9 -0
  387. package/src/Component/Navigation/twig/navigation-subnav-list.twig +108 -0
  388. package/src/Component/Pagination/Components/PaginationContext.tsx +188 -0
  389. package/src/Component/Pagination/Components/PaginationItem.tsx +48 -0
  390. package/src/Component/Pagination/Pagination.stories.ts +15 -0
  391. package/src/Component/Pagination/Pagination.stories.tsx +25 -0
  392. package/src/Component/Pagination/Pagination.tsx +75 -0
  393. package/src/Component/Pagination/README.md +19 -0
  394. package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap +58 -0
  395. package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap +57 -0
  396. package/src/Component/Pagination/pagination.css +112 -0
  397. package/src/Component/Pagination/pagination.twig +44 -0
  398. package/src/Component/SocialShare/SocialShare.stories.tsx +26 -0
  399. package/src/Component/SocialShare/SocialShare.tsx +53 -0
  400. package/src/Component/SocialShare/__snapshots__/SocialShare.stories.tsx.snap +25 -0
  401. package/src/Component/Sticky/Elements/Sticky.ts +93 -0
  402. package/src/Component/Sticky/README.md +23 -0
  403. package/src/Component/Sticky/Sticky.stories.ts +16 -0
  404. package/src/Component/Sticky/Sticky.stories.tsx +14 -0
  405. package/src/Component/Sticky/Sticky.tsx +34 -0
  406. package/src/Component/Sticky/__snapshots__/Sticky.stories.ts.snap +86 -0
  407. package/src/Component/Sticky/__snapshots__/Sticky.stories.tsx.snap +11 -0
  408. package/src/Component/Sticky/sticky.css +39 -0
  409. package/src/Component/Sticky/sticky.twig +21 -0
  410. package/src/Component/Sticky/twig/sticky-example.twig +4 -0
  411. package/src/Component/Tabs/Components/Tab.tsx +45 -0
  412. package/src/Component/Tabs/Components/TabDropMenu.tsx +14 -0
  413. package/src/Component/Tabs/Components/TabList.tsx +9 -0
  414. package/src/Component/Tabs/Components/TabPanel.tsx +32 -0
  415. package/src/Component/Tabs/Elements/Tabs.ts +213 -0
  416. package/src/Component/Tabs/README.md +23 -0
  417. package/src/Component/Tabs/Tabs.stories.ts +22 -0
  418. package/src/Component/Tabs/Tabs.stories.tsx +51 -0
  419. package/src/Component/Tabs/Tabs.tsx +100 -0
  420. package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +144 -0
  421. package/src/Component/Tabs/__snapshots__/Tabs.stories.tsx.snap +120 -0
  422. package/src/Component/Tabs/tabs.css +103 -0
  423. package/src/Component/Tabs/tabs.twig +49 -0
  424. package/src/Component/Tabs/twig/panel.twig +5 -0
  425. package/src/Component/Tabs/twig/tab-list.twig +26 -0
  426. package/src/Component/Tag/README.md +19 -0
  427. package/src/Component/Tag/Tag.stories.ts +54 -0
  428. package/src/Component/Tag/Tag.stories.tsx +13 -0
  429. package/src/Component/Tag/Tag.tsx +19 -0
  430. package/src/Component/Tag/__snapshots__/Tag.stories.ts.snap +64 -0
  431. package/src/Component/Tag/__snapshots__/Tag.stories.tsx.snap +7 -0
  432. package/src/Component/Tag/tag.css +57 -0
  433. package/src/Component/Tag/tags.twig +23 -0
  434. package/src/Component/Tile/README.md +3 -0
  435. package/src/Component/Tile/Tile.stories.ts +23 -0
  436. package/src/Component/Tile/Tile.stories.tsx +30 -0
  437. package/src/Component/Tile/Tile.tsx +40 -0
  438. package/src/Component/Tile/__snapshots__/Tile.stories.ts.snap +83 -0
  439. package/src/Component/Tile/__snapshots__/Tile.stories.tsx.snap +38 -0
  440. package/src/Component/Tile/tile.twig +10 -0
  441. package/src/Component/Tile/tiles.css +58 -0
  442. package/src/Component/Tile/twig/tiles.twig +18 -0
  443. package/src/Form/Checkbox/Checkboxes.stories.ts +47 -0
  444. package/src/Form/Checkbox/FormCheckbox.stories.tsx +32 -0
  445. package/src/Form/Checkbox/FormCheckbox.tsx +124 -0
  446. package/src/Form/Checkbox/__snapshots__/Checkboxes.stories.ts.snap +115 -0
  447. package/src/Form/Checkbox/input-checkbox-single.twig +6 -0
  448. package/src/Form/Checkbox/input-checkbox.twig +24 -0
  449. package/src/Form/Description/Description.stories.ts +16 -0
  450. package/src/Form/Description/ErrorMessage.stories.ts +16 -0
  451. package/src/Form/Description/FormDescription.stories.tsx +14 -0
  452. package/src/Form/Description/FormDescription.tsx +28 -0
  453. package/src/Form/Description/__snapshots__/Description.stories.ts.snap +17 -0
  454. package/src/Form/Description/__snapshots__/ErrorMessage.stories.ts.snap +20 -0
  455. package/src/Form/Description/__snapshots__/FormDescription.stories.tsx.snap +10 -0
  456. package/src/Form/Description/form-description.twig +3 -0
  457. package/src/Form/Description/form-error.twig +5 -0
  458. package/src/Form/Fieldset/Fieldset.stories.ts +34 -0
  459. package/src/Form/Fieldset/__snapshots__/Fieldset.stories.ts.snap +23 -0
  460. package/src/Form/Fieldset/fieldset.twig +4 -0
  461. package/src/Form/Form/Form.stories.tsx +10 -0
  462. package/src/Form/Form/Form.tsx +9 -0
  463. package/src/Form/Form/FormTitle.stories.tsx +14 -0
  464. package/src/Form/Form/FormTitle.tsx +12 -0
  465. package/src/Form/Form/__snapshots__/Form.stories.tsx.snap +6 -0
  466. package/src/Form/Form/__snapshots__/FormTitle.stories.tsx.snap +9 -0
  467. package/src/Form/Form/twig/form-example.twig +13 -0
  468. package/src/Form/Item/FormItem.stories.tsx +58 -0
  469. package/src/Form/Item/FormItem.tsx +26 -0
  470. package/src/Form/Item/__snapshots__/FormItem.stories.tsx.snap +102 -0
  471. package/src/Form/Label/FormLabel.stories.tsx +20 -0
  472. package/src/Form/Label/FormLabel.tsx +19 -0
  473. package/src/Form/Label/Label.stories.ts +34 -0
  474. package/src/Form/Label/__snapshots__/FormLabel.stories.tsx.snap +16 -0
  475. package/src/Form/Label/__snapshots__/Label.stories.ts.snap +23 -0
  476. package/src/Form/Label/label.twig +2 -0
  477. package/src/Form/README.md +11 -0
  478. package/src/Form/Radio/FormRadio.stories.tsx +37 -0
  479. package/src/Form/Radio/FormRadio.tsx +80 -0
  480. package/src/Form/Radio/Radios.stories.ts +47 -0
  481. package/src/Form/Radio/__snapshots__/Radios.stories.ts.snap +125 -0
  482. package/src/Form/Radio/input-radio.twig +24 -0
  483. package/src/Form/Search/TextInputWithInlineButton.stories.ts +16 -0
  484. package/src/Form/Search/__snapshots__/TextInputWithInlineButton.stories.ts.snap +26 -0
  485. package/src/Form/Search/input-text-inline-submit.twig +8 -0
  486. package/src/Form/Select/FormSelect.stories.tsx +34 -0
  487. package/src/Form/Select/FormSelect.tsx +67 -0
  488. package/src/Form/Select/Select.stories.ts +40 -0
  489. package/src/Form/Select/__snapshots__/FormSelect.stories.tsx.snap +23 -0
  490. package/src/Form/Select/__snapshots__/Select.stories.ts.snap +148 -0
  491. package/src/Form/Select/select.twig +16 -0
  492. package/src/Form/TextInput/FormText.stories.tsx +15 -0
  493. package/src/Form/TextInput/FormText.tsx +55 -0
  494. package/src/Form/TextInput/InputDivider.stories.ts +16 -0
  495. package/src/Form/TextInput/TextInput.stories.ts +57 -0
  496. package/src/Form/TextInput/TextInputWithIcon.stories.ts +40 -0
  497. package/src/Form/TextInput/__snapshots__/FormText.stories.tsx.snap +13 -0
  498. package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap +32 -0
  499. package/src/Form/TextInput/__snapshots__/TextInput.stories.ts.snap +101 -0
  500. package/src/Form/TextInput/__snapshots__/TextInputWithIcon.stories.ts.snap +67 -0
  501. package/src/Form/TextInput/input-divider.twig +11 -0
  502. package/src/Form/TextInput/input-text-icon.twig +7 -0
  503. package/src/Form/TextInput/input-text.twig +5 -0
  504. package/src/Form/Textarea/FormTextarea.stories.tsx +14 -0
  505. package/src/Form/Textarea/FormTextarea.tsx +53 -0
  506. package/src/Form/Textarea/Textarea.stories.ts +16 -0
  507. package/src/Form/Textarea/__snapshots__/FormTextarea.stories.tsx.snap +12 -0
  508. package/src/Form/Textarea/__snapshots__/Textarea.stories.ts.snap +19 -0
  509. package/src/Form/Textarea/textarea.twig +5 -0
  510. package/src/Form/form.css +479 -0
  511. package/src/Form/images/checkmark.svg +1 -0
  512. package/src/Form/images/form-chevron-down.svg +1 -0
  513. package/src/Form/images/form-error.svg +1 -0
  514. package/src/Form/images/form-success.svg +1 -0
  515. package/src/Layout/Footer/Footer.stories.ts +15 -0
  516. package/src/Layout/Footer/Footer.stories.tsx +42 -0
  517. package/src/Layout/Footer/Footer.tsx +55 -0
  518. package/src/Layout/Footer/FooterMenu/FooterMenu.stories.ts +15 -0
  519. package/src/Layout/Footer/FooterMenu/__snapshots__/FooterMenu.stories.ts.snap +101 -0
  520. package/src/Layout/Footer/FooterMenu/footer-menu.css +29 -0
  521. package/src/Layout/Footer/FooterMenu/footer-menu.twig +5 -0
  522. package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap +139 -0
  523. package/src/Layout/Footer/__snapshots__/Footer.stories.tsx.snap +70 -0
  524. package/src/Layout/Footer/footer.css +54 -0
  525. package/src/Layout/Footer/footer.twig +25 -0
  526. package/src/Layout/Grid/Grid.stories.ts +68 -0
  527. package/src/Layout/Grid/Grid.stories.tsx +125 -0
  528. package/src/Layout/Grid/Grid.tsx +51 -0
  529. package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap +103 -0
  530. package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap +67 -0
  531. package/src/Layout/Grid/container-grid.css +190 -0
  532. package/src/Layout/Grid/grid-item.twig +16 -0
  533. package/src/Layout/Grid/grid.css +190 -0
  534. package/src/Layout/Grid/grid.twig +10 -0
  535. package/src/Layout/Grid/twig/container-grid-dynamic.twig +47 -0
  536. package/src/Layout/Grid/twig/container-grid.twig +46 -0
  537. package/src/Layout/Grid/twig/grid-story.twig +6 -0
  538. package/src/Layout/Grid/twig/old-grid.twig +46 -0
  539. package/src/Layout/Header/Components/GlobalToggle.tsx +35 -0
  540. package/src/Layout/Header/Components/Logo.tsx +17 -0
  541. package/src/Layout/Header/Elements/GlobalToggle.ts +137 -0
  542. package/src/Layout/Header/Header.stories.ts +18 -0
  543. package/src/Layout/Header/Header.stories.tsx +17 -0
  544. package/src/Layout/Header/Header.tsx +73 -0
  545. package/src/Layout/Header/Stacked/Stacked.stories.ts +16 -0
  546. package/src/Layout/Header/Stacked/__snapshots__/Stacked.stories.ts.snap +353 -0
  547. package/src/Layout/Header/Stacked/header-stacked.twig +33 -0
  548. package/src/Layout/Header/__snapshots__/Header.stories.ts.snap +157 -0
  549. package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap +55 -0
  550. package/src/Layout/Header/_header.css +89 -0
  551. package/src/Layout/Header/_toggles.css +31 -0
  552. package/src/Layout/Header/header.css +2 -0
  553. package/src/Layout/Header/header.twig +24 -0
  554. package/src/Layout/Header/twig/global-header.twig +4 -0
  555. package/src/Layout/Header/twig/logo.twig +3 -0
  556. package/src/Layout/Masthead/Masthead.stories.ts +16 -0
  557. package/src/Layout/Masthead/__snapshots__/Masthead.stories.ts.snap +32 -0
  558. package/src/Layout/Masthead/masthead.css +36 -0
  559. package/src/Layout/Masthead/masthead.twig +10 -0
  560. package/src/Layout/Page/Page.stories.tsx +22 -0
  561. package/src/Layout/Page/Page.tsx +16 -0
  562. package/src/Layout/Page/README.md +19 -0
  563. package/src/Layout/Page/__snapshots__/Page.stories.tsx.snap +80 -0
  564. package/src/Layout/Page/page.css +150 -0
  565. package/src/Layout/Page/page.twig +3 -0
  566. package/src/Layout/README.md +19 -0
  567. package/src/Layout/Section/Background.stories.ts +25 -0
  568. package/src/Layout/Section/Breakouts.stories.ts +16 -0
  569. package/src/Layout/Section/Flow.stories.ts +16 -0
  570. package/src/Layout/Section/Section.stories.ts +63 -0
  571. package/src/Layout/Section/Section.stories.tsx +56 -0
  572. package/src/Layout/Section/Section.tsx +83 -0
  573. package/src/Layout/Section/SectionGrid.stories.tsx +53 -0
  574. package/src/Layout/Section/SectionGrid.tsx +71 -0
  575. package/src/Layout/Section/__snapshots__/Section.stories.ts.snap +19 -0
  576. package/src/Layout/Section/__snapshots__/Section.stories.tsx.snap +37 -0
  577. package/src/Layout/Section/__snapshots__/SectionBackground.stories.ts.snap +55 -0
  578. package/src/Layout/Section/__snapshots__/SectionGrid.stories.tsx.snap +37 -0
  579. package/src/Layout/Section/__snapshots__/SectionsBreakouts.stories.ts.snap +78 -0
  580. package/src/Layout/Section/__snapshots__/SectionsFlowsGroups.stories.ts.snap +89 -0
  581. package/src/Layout/Section/section.css +156 -0
  582. package/src/Layout/Section/section.twig +25 -0
  583. package/src/Layout/Section/twig/section-background.twig +12 -0
  584. package/src/Layout/Section/twig/section-story.twig +14 -0
  585. package/src/Layout/Section/twig/sections-breakout.twig +38 -0
  586. package/src/Layout/Section/twig/sections-flow.twig +51 -0
  587. package/src/Layout/Section/twig/sections-stacked.twig +28 -0
  588. package/src/Layout/Sidebar/Sidebar.stories.ts +35 -0
  589. package/src/Layout/Sidebar/Sidebar.stories.tsx +33 -0
  590. package/src/Layout/Sidebar/Sidebar.tsx +34 -0
  591. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.ts.snap +40 -0
  592. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.tsx.snap +47 -0
  593. package/src/Layout/Sidebar/sidebar.css +69 -0
  594. package/src/Layout/Sidebar/sidebar.twig +17 -0
  595. package/src/Layout/images/mixtape-logo.png +0 -0
  596. package/src/Utility/Context/ImageComponent.tsx +49 -0
  597. package/src/Utility/Context/LinkComponent.tsx +57 -0
  598. package/src/Utility/Drupal/README.md +9 -0
  599. package/src/Utility/Drupal/drupal.css +66 -0
  600. package/src/Utility/Drupal/twig/local-tasks.twig +17 -0
  601. package/src/Utility/Drupal/twig/login-form.twig +22 -0
  602. package/src/Utility/Elements/breakpoint-loader.ts +79 -0
  603. package/src/Utility/Elements/cookie-compliance.ts +174 -0
  604. package/src/Utility/Elements/disclosure-widget.ts +173 -0
  605. package/src/Utility/Elements/io-loader.ts +57 -0
  606. package/src/Utility/Elements/keyboard.ts +150 -0
  607. package/src/Utility/Hooks/useLocalStorage.ts +78 -0
  608. package/src/Utility/Hooks/useMediaQuery.ts +31 -0
  609. package/src/Utility/Hooks/useToggle.ts +17 -0
  610. package/src/Utility/Hooks/useUrlParams.ts +24 -0
  611. package/src/Utility/README.md +15 -0
  612. package/src/Utility/_layout-utils.css +78 -0
  613. package/src/Utility/global.d.ts +25 -0
  614. package/src/Utility/utilities.css +88 -0
  615. package/src/Utility/utilities.ts +163 -0
  616. package/src/_custom-media.css +33 -0
  617. package/src/constants.css +118 -0
  618. package/src/elements.ts +13 -0
  619. package/src/enums.ts +260 -0
  620. package/src/index.css +27 -0
  621. package/src/react.ts +68 -0
  622. package/src/tokens.js +119 -0
package/src/Layout/Header/Stacked/__snapshots__/Stacked.stories.ts.snap ADDED
@@ -0,0 +1,353 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Layout/Header/Stacked Stacked smoke-test 1`] = `
4
+ <div class="header section section--s">
5
+ <div class="flex">
6
+ <a class="logo "
7
+ href="#"
8
+ >
9
+ <img alt="Mixtape"
10
+ src="./mixtape-logo.png"
11
+ width="120"
12
+ height="49"
13
+ >
14
+ </a>
15
+ <div class="header__toggles">
16
+ <mx-global-toggle hidemenu>
17
+ <button aria-controls="unique-0"
18
+ class="button button--icon-only icon icon--search"
19
+ >
20
+ Open Search
21
+ </button>
22
+ </mx-global-toggle>
23
+ <mx-global-toggle>
24
+ <button aria-controls="unique-1"
25
+ class="button button--primary button--icon-only icon icon--menu"
26
+ >
27
+ Open Menu
28
+ </button>
29
+ </mx-global-toggle>
30
+ </div>
31
+ <div id="unique-0"
32
+ class="header__search"
33
+ aria-label="Search"
34
+ role="region"
35
+ >
36
+ <label for="global-search"
37
+ class="visually-hidden"
38
+ >
39
+ Search
40
+ </label>
41
+ <span class="header__search-input input__text--icon icon icon--search">
42
+ <input id="global-search"
43
+ type="text"
44
+ placeholder="Search..."
45
+ >
46
+ </span>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ <div id="unique-1"
51
+ class="header__nav section section--s"
52
+ aria-label="Menu"
53
+ role="region"
54
+ >
55
+ <div class="flex">
56
+ <div class="header__nav-left">
57
+ <mx-nav flyout
58
+ edgecheck
59
+ >
60
+ <nav class="nav nav--dropdown nav--mega-nav ">
61
+ <ul class="nav__level-1">
62
+ <li class="nav__has-subnav">
63
+ <a href="#"
64
+ aria-current="page"
65
+ >
66
+ 1.1 Level 1 Title
67
+ </a>
68
+ <button class="nav__toggle icon icon--chevron-down icon--only">
69
+ Sub-navigation
70
+ </button>
71
+ <ul class="nav__level-2"
72
+ inert
73
+ >
74
+ <li class="nav__has-subnav">
75
+ <a href="/">
76
+ 1.1.1 Level 2 Title
77
+ </a>
78
+ <button class="nav__toggle icon icon--chevron-down icon--only">
79
+ Sub-navigation
80
+ </button>
81
+ <ul class="nav__level-3">
82
+ <li>
83
+ <a href="/">
84
+ 1.1.1.1 Level 3 Title
85
+ </a>
86
+ </li>
87
+ <li>
88
+ <a href="/">
89
+ 1.1.1.2 Level 3 Title
90
+ </a>
91
+ </li>
92
+ <li>
93
+ <a href="/">
94
+ 1.1.1.3 Level 3 Title
95
+ </a>
96
+ </li>
97
+ <li>
98
+ <a href="/">
99
+ 1.1.1.4 Level 3 Title
100
+ </a>
101
+ </li>
102
+ <li>
103
+ <a href="/">
104
+ 1.1.1.5 Level 3 Title Longer
105
+ </a>
106
+ </li>
107
+ <li>
108
+ <a href="/">
109
+ 1.1.1.6 Level 3 Title
110
+ </a>
111
+ </li>
112
+ <li>
113
+ <a href="/">
114
+ 1.1.1.7 Level 3 Title
115
+ </a>
116
+ </li>
117
+ <li>
118
+ <a href="/">
119
+ 1.1.1.8 Level 3 Title Longer
120
+ </a>
121
+ </li>
122
+ <li>
123
+ <a href="/">
124
+ 1.1.1.9 Level 3 Title
125
+ </a>
126
+ </li>
127
+ </ul>
128
+ </li>
129
+ <li class="nav__has-subnav">
130
+ <a href="/">
131
+ 1.1.2 Level 2 Title
132
+ </a>
133
+ <button class="nav__toggle icon icon--chevron-down icon--only">
134
+ Sub-navigation
135
+ </button>
136
+ <ul class="nav__level-3">
137
+ <li>
138
+ <a href="/">
139
+ 1.1.2.1 Level 3 Title
140
+ </a>
141
+ </li>
142
+ <li>
143
+ <a href="/">
144
+ 1.1.2.2 Level 3 Title Longer
145
+ </a>
146
+ </li>
147
+ <li>
148
+ <a href="/">
149
+ 1.1.2.3 Level 3 Title
150
+ </a>
151
+ </li>
152
+ </ul>
153
+ </li>
154
+ <li class="nav__has-subnav">
155
+ <a href="/">
156
+ 1.1.3 Level 2 Title Longer
157
+ </a>
158
+ <button class="nav__toggle icon icon--chevron-down icon--only">
159
+ Sub-navigation
160
+ </button>
161
+ <ul class="nav__level-3">
162
+ <li>
163
+ <a href="/">
164
+ 1.1.3.1 Level 3 Title
165
+ </a>
166
+ </li>
167
+ <li>
168
+ <a href="/">
169
+ 1.1.3.2 Level 3 Title Longer
170
+ </a>
171
+ </li>
172
+ <li>
173
+ <a href="/">
174
+ 1.1.3.3 Level 3 Title
175
+ </a>
176
+ </li>
177
+ </ul>
178
+ </li>
179
+ <li class="nav__has-subnav">
180
+ <a href="/">
181
+ 1.1.4 Level 2 Title
182
+ </a>
183
+ <button class="nav__toggle icon icon--chevron-down icon--only">
184
+ Sub-navigation
185
+ </button>
186
+ <ul class="nav__level-3">
187
+ <li>
188
+ <a href="/">
189
+ 1.1.4.1 Level 3 Title
190
+ </a>
191
+ </li>
192
+ <li>
193
+ <a href="/">
194
+ 1.1.4.2 Level 3 Title Longer
195
+ </a>
196
+ </li>
197
+ <li>
198
+ <a href="/">
199
+ 1.1.4.3 Level 3 Title
200
+ </a>
201
+ </li>
202
+ </ul>
203
+ </li>
204
+ <li class="nav__has-subnav">
205
+ <a href="/">
206
+ 1.1.5 Level 2 Title
207
+ </a>
208
+ <button class="nav__toggle icon icon--chevron-down icon--only">
209
+ Sub-navigation
210
+ </button>
211
+ <ul class="nav__level-3">
212
+ <li>
213
+ <a href="/">
214
+ 1.1.5.1 Level 3 Title
215
+ </a>
216
+ </li>
217
+ <li>
218
+ <a href="/">
219
+ 1.1.5.2 Level 3 Title Longer
220
+ </a>
221
+ </li>
222
+ <li>
223
+ <a href="/">
224
+ 1.1.5.3 Level 3 Title
225
+ </a>
226
+ </li>
227
+ </ul>
228
+ </li>
229
+ <li class="nav__separator">
230
+ <a href="/">
231
+ 1.1.6 Level 2 Title Separator
232
+ </a>
233
+ </li>
234
+ </ul>
235
+ </li>
236
+ <li class="nav__has-subnav">
237
+ <a href="/">
238
+ 1.2 Level 1 Title
239
+ </a>
240
+ <button class="nav__toggle icon icon--chevron-down icon--only">
241
+ Sub-navigation
242
+ </button>
243
+ <ul class="nav__level-2"
244
+ inert
245
+ >
246
+ <li>
247
+ <a href="/">
248
+ 1.2.1 Level 2 Title
249
+ </a>
250
+ </li>
251
+ <li>
252
+ <a href="/">
253
+ 1.2.2 Level 2 Title Longer
254
+ </a>
255
+ </li>
256
+ <li>
257
+ <a href="/">
258
+ 1.2.1 Level 2 Title
259
+ </a>
260
+ </li>
261
+ </ul>
262
+ </li>
263
+ <li class="nav__has-subnav nav--reverse">
264
+ <a href="/">
265
+ 1.3 Level 1 Title
266
+ </a>
267
+ <button class="nav__toggle icon icon--chevron-down icon--only">
268
+ Sub-navigation
269
+ </button>
270
+ <ul class="nav__level-2"
271
+ inert
272
+ >
273
+ <li class="nav__has-subnav">
274
+ <a href="/">
275
+ 1.3.1 Level 2 Title
276
+ </a>
277
+ <button class="nav__toggle icon icon--chevron-down icon--only">
278
+ Sub-navigation
279
+ </button>
280
+ <ul class="nav__level-3">
281
+ <li>
282
+ <a href="/">
283
+ 1.3.1.1 Level 3 Title
284
+ </a>
285
+ </li>
286
+ <li>
287
+ <a href="/">
288
+ 1.3.1.2 Level 3 Title
289
+ </a>
290
+ </li>
291
+ <li>
292
+ <a href="/">
293
+ 1.3.1.3 Level 3 Title
294
+ </a>
295
+ </li>
296
+ <li>
297
+ <a href="/">
298
+ 1.3.1.4 Level 3 Title
299
+ </a>
300
+ </li>
301
+ <li>
302
+ <a href="/">
303
+ 1.3.1.5 Level 3 Title Longer
304
+ </a>
305
+ </li>
306
+ <li>
307
+ <a href="/">
308
+ 1.3.1.6 Level 3 Title
309
+ </a>
310
+ </li>
311
+ <li>
312
+ <a href="/">
313
+ 1.3.1.7 Level 3 Title
314
+ </a>
315
+ </li>
316
+ <li>
317
+ <a href="/">
318
+ 1.3.1.8 Level 3 Title Longer
319
+ </a>
320
+ </li>
321
+ <li>
322
+ <a href="/">
323
+ 1.3.1.9 Level 3 Title
324
+ </a>
325
+ </li>
326
+ </ul>
327
+ </li>
328
+ <li>
329
+ <a href="/">
330
+ 1.3.2 Level 2 Title
331
+ </a>
332
+ </li>
333
+ <li>
334
+ <a href="/">
335
+ 1.3.3 Level 2 Title
336
+ </a>
337
+ </li>
338
+ </ul>
339
+ </li>
340
+ </ul>
341
+ </nav>
342
+ </mx-nav>
343
+ </div>
344
+ <div class="header__nav-right">
345
+ <a href="#"
346
+ class="button button--primary icon icon--info button--right"
347
+ >
348
+ Primary Button
349
+ </a>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ `;
package/src/Layout/Header/Stacked/header-stacked.twig ADDED
@@ -0,0 +1,33 @@
1
+ <div class="header section section--s">
2
+ <div class="flex">
3
+ {% block logo %}
4
+ {% include "@mixtape/Layout/Header/twig/logo.twig" %}
5
+ {% endblock %}
6
+ <div class="header__toggles">
7
+ <mx-global-toggle hideMenu><button aria-controls="primary-search" class="button button--icon-only icon icon--search" disabled>Open Search</button></mx-global-toggle>
8
+ <mx-global-toggle><button aria-controls="primary-nav" class="button button--primary button--icon-only icon icon--menu" disabled>Open Menu</button></mx-global-toggle>
9
+ </div>
10
+ <div id="primary-search" class="header__search global-nav-up-only" aria-label="Search">
11
+ {% block search %}
12
+ <label for="global-search" class="visually-hidden">Search</label>
13
+ <span class="header__search-input input__text--icon icon icon--search">
14
+ <input id="global-search" type="text" placeholder="Search...">
15
+ </span>
16
+ {% endblock %}
17
+ </div>
18
+ </div>
19
+ </div>
20
+ <div id="primary-nav" class="header__nav section section--s global-nav-up-only" aria-label="Menu">
21
+ <div class="flex">
22
+ <div class="header__nav-left">
23
+ {% block navleft %}
24
+ {% include "@mixtape/Component/Navigation/navigation-mega-nav.twig" %}
25
+ {% endblock %}
26
+ </div>
27
+ <div class="header__nav-right">
28
+ {% block navright %}
29
+ <a href="#" class="button button--primary icon icon--info button--right">Primary Button</a>
30
+ {% endblock %}
31
+ </div>
32
+ </div>
33
+ </div>
package/src/Layout/Header/__snapshots__/Header.stories.ts.snap ADDED
@@ -0,0 +1,157 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Layout/Header/Primary Primary smoke-test 1`] = `
4
+ <div class="header section section--s">
5
+ <div class="flex">
6
+ <a class="logo "
7
+ href="#"
8
+ >
9
+ <img alt="Mixtape"
10
+ src="./mixtape-logo.png"
11
+ width="120"
12
+ height="49"
13
+ >
14
+ </a>
15
+ <div class="header__toggles">
16
+ <mx-global-toggle hidemenu>
17
+ <button aria-controls="unique-0"
18
+ class="button button--icon-only icon icon--search"
19
+ >
20
+ Open Search
21
+ </button>
22
+ </mx-global-toggle>
23
+ <mx-global-toggle>
24
+ <button aria-controls="unique-1"
25
+ class="button button--primary button--icon-only icon icon--menu"
26
+ >
27
+ Open Menu
28
+ </button>
29
+ </mx-global-toggle>
30
+ </div>
31
+ <div id="unique-0"
32
+ class="header__nav"
33
+ aria-label="Menu"
34
+ role="region"
35
+ >
36
+ <mx-nav flyout>
37
+ <nav class="nav nav--dropdown "
38
+ aria-label="Primary menu"
39
+ >
40
+ <ul class="nav__level-1">
41
+ <li class="nav__has-subnav">
42
+ <a href="#"
43
+ aria-current="page"
44
+ >
45
+ 1.1 Level 1 Title
46
+ </a>
47
+ <button class="nav__toggle icon icon--chevron-down icon--only">
48
+ Sub-navigation
49
+ </button>
50
+ <ul class="nav__level-2"
51
+ inert
52
+ >
53
+ <li class="nav__has-subnav">
54
+ <a href="/">
55
+ 1.1.1 Level 2 Title
56
+ </a>
57
+ </li>
58
+ <li class="nav__has-subnav">
59
+ <a href="/">
60
+ 1.1.2 Level 2 Title
61
+ </a>
62
+ </li>
63
+ <li class="nav__has-subnav">
64
+ <a href="/">
65
+ 1.1.3 Level 2 Title Longer
66
+ </a>
67
+ </li>
68
+ <li class="nav__has-subnav">
69
+ <a href="/">
70
+ 1.1.4 Level 2 Title
71
+ </a>
72
+ </li>
73
+ <li class="nav__has-subnav">
74
+ <a href="/">
75
+ 1.1.5 Level 2 Title
76
+ </a>
77
+ </li>
78
+ </ul>
79
+ </li>
80
+ <li class="nav__has-subnav">
81
+ <a href="/">
82
+ 1.2 Level 1 Title
83
+ </a>
84
+ <button class="nav__toggle icon icon--chevron-down icon--only">
85
+ Sub-navigation
86
+ </button>
87
+ <ul class="nav__level-2"
88
+ inert
89
+ >
90
+ <li>
91
+ <a href="/">
92
+ 1.2.1 Level 2 Title
93
+ </a>
94
+ </li>
95
+ <li>
96
+ <a href="/">
97
+ 1.2.2 Level 2 Title Longer
98
+ </a>
99
+ </li>
100
+ <li>
101
+ <a href="/">
102
+ 1.2.1 Level 2 Title
103
+ </a>
104
+ </li>
105
+ </ul>
106
+ </li>
107
+ <li class="nav__has-subnav">
108
+ <a href="/">
109
+ 1.3 Level 1 Title
110
+ </a>
111
+ <button class="nav__toggle icon icon--chevron-down icon--only">
112
+ Sub-navigation
113
+ </button>
114
+ <ul class="nav__level-2"
115
+ inert
116
+ >
117
+ <li class="nav__has-subnav">
118
+ <a href="/">
119
+ 1.3.1 Level 2 Title
120
+ </a>
121
+ </li>
122
+ <li>
123
+ <a href="/">
124
+ 1.3.2 Level 2 Title
125
+ </a>
126
+ </li>
127
+ <li>
128
+ <a href="/">
129
+ 1.3.3 Level 2 Title
130
+ </a>
131
+ </li>
132
+ </ul>
133
+ </li>
134
+ </ul>
135
+ </nav>
136
+ </mx-nav>
137
+ </div>
138
+ <div id="unique-1"
139
+ class="header__search"
140
+ aria-label="Search"
141
+ role="region"
142
+ >
143
+ <label for="global-search"
144
+ class="visually-hidden"
145
+ >
146
+ Search
147
+ </label>
148
+ <span class="header__search-input input__text--icon icon icon--search">
149
+ <input id="global-search"
150
+ type="text"
151
+ placeholder="Search..."
152
+ >
153
+ </span>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ `;
package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap ADDED
@@ -0,0 +1,55 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Layout/Header PrimaryHeader smoke-test 1`] = `
4
+ <header class="page global__primary section--s">
5
+ <div class="flex">
6
+ <a href="https://mixtape.pnx.io/"
7
+ class="logo"
8
+ >
9
+ <img alt="Mixtape"
10
+ src="https://mixtape.pnx.io/images/mixtape-logo.png"
11
+ loading="eager"
12
+ >
13
+ </a>
14
+ <div id=":r0:"
15
+ class="global__primary__nav"
16
+ >
17
+ <nav class="nav nav--dropdown"
18
+ aria-label="Primary Navigation"
19
+ id=":r0:"
20
+ >
21
+ <ul class="nav__level-1">
22
+ <li class="nav__has-subnav">
23
+ <a href="http://example.com/#1"
24
+ class
25
+ >
26
+ Home
27
+ </a>
28
+ <button aria-controls="unique-0"
29
+ aria-expanded="false"
30
+ class="nav__toggle icon icon--only icon--chevron-down"
31
+ type="button"
32
+ >
33
+ Sub-navigation
34
+ </button>
35
+ </li>
36
+ <li class>
37
+ <a href="http://example.com/#2"
38
+ class
39
+ >
40
+ About
41
+ </a>
42
+ </li>
43
+ <li class>
44
+ <a href="http://example.com/#3"
45
+ class
46
+ >
47
+ Contact
48
+ </a>
49
+ </li>
50
+ </ul>
51
+ </nav>
52
+ </div>
53
+ </div>
54
+ </header>
55
+ `;
package/src/Layout/Header/_header.css ADDED
@@ -0,0 +1,89 @@
1
+ /**
2
+ * Primary Header
3
+ */
4
+
5
+ @layer components {
6
+ .header {
7
+ position: relative;
8
+
9
+ & .flex {
10
+ flex-wrap: wrap;
11
+ align-items: center;
12
+ position: relative;
13
+
14
+ &::after {
15
+ display: none;
16
+ }
17
+
18
+ & .logo {
19
+ margin-inline-end: auto;
20
+ }
21
+ }
22
+ }
23
+
24
+ .header__nav {
25
+ inline-size: 100%;
26
+ transition:
27
+ 0.2s opacity var(--ease),
28
+ 0.2s visibility var(--ease);
29
+
30
+ @media (--global-nav-up) {
31
+ z-index: 2;
32
+ position: relative;
33
+ inline-size: auto;
34
+ block-size: auto;
35
+ }
36
+
37
+ &[inert] {
38
+ block-size: 0;
39
+ opacity: 0;
40
+ visibility: hidden;
41
+ transition:
42
+ 0.2s opacity var(--ease),
43
+ 0.2s visibility var(--ease);
44
+ }
45
+ }
46
+
47
+ .header__search {
48
+ position: absolute;
49
+ inset-block-start: 2px;
50
+ inset-inline-start: 0;
51
+ inline-size: 100%;
52
+ transition:
53
+ 0.2s opacity var(--ease),
54
+ 0.2s visibility var(--ease);
55
+
56
+ @media (--global-nav-up) {
57
+ display: flex;
58
+ position: relative;
59
+ inline-size: auto;
60
+ margin-inline-start: var(--spacing-m);
61
+ }
62
+
63
+ &[inert] {
64
+ opacity: 0;
65
+ visibility: hidden;
66
+ transition:
67
+ 0.2s opacity var(--ease),
68
+ 0.2s visibility var(--ease);
69
+ }
70
+ }
71
+
72
+ /**
73
+ * Primary Header Stacked
74
+ */
75
+
76
+ .header__nav-right {
77
+ margin-inline-start: auto;
78
+ }
79
+ }
80
+
81
+ @media print {
82
+ .header .header__nav {
83
+ display: none;
84
+ }
85
+
86
+ .header .section__content {
87
+ max-inline-size: 100%;
88
+ }
89
+ }