qpp-style 2.0.1 → 2.0.2-sm.2

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 (595) hide show
  1. package/.babelrc +10 -0
  2. package/.editorconfig +22 -0
  3. package/.eslintignore +5 -0
  4. package/.eslintrc.js +31 -0
  5. package/.husky/pre-commit +5 -0
  6. package/README.md +35 -55
  7. package/components/Accordion/Accordion.stories.js +20 -0
  8. package/components/Accordion/index.jsx +93 -0
  9. package/components/Alert/Alert.stories.js +61 -0
  10. package/components/Alert/index.js +53 -0
  11. package/components/Breadcrumb/Breadcrumb.md +28 -0
  12. package/components/Breadcrumb/index.js +83 -0
  13. package/components/Button/index.js +90 -0
  14. package/components/CalloutBox/index.js +109 -0
  15. package/components/Card/index.js +137 -0
  16. package/components/Details/Details.stories.js +63 -0
  17. package/components/Details/DetailsIcons.js +50 -0
  18. package/components/Details/index.js +53 -0
  19. package/components/Dropdown/index.js +85 -0
  20. package/components/DropdownButton/DropdownButton.stories.js +127 -0
  21. package/components/DropdownButton/Menu.js +25 -0
  22. package/components/DropdownButton/MenuButton.js +41 -0
  23. package/components/DropdownButton/MenuItem.js +25 -0
  24. package/components/DropdownButton/MenuItemLink.js +27 -0
  25. package/components/Error/Collapsible.jsx +88 -0
  26. package/components/Error/ErrorUI.jsx +31 -0
  27. package/components/Error/error.js +26 -0
  28. package/components/FlashNotification/FlashNotificationUI.jsx +91 -0
  29. package/components/FlashNotification/index.js +30 -0
  30. package/components/Footer/FooterUI.jsx +212 -0
  31. package/components/Footer/SocialLinks.jsx +60 -0
  32. package/components/Footer/Subscribe.jsx +34 -0
  33. package/components/Footer/footer.js +20 -0
  34. package/components/GovBanner/index.js +117 -0
  35. package/components/Header/Header.md +111 -0
  36. package/components/Header/HeaderAccountMenu.jsx +94 -0
  37. package/components/Header/HeaderCancel.jsx +16 -0
  38. package/components/Header/HeaderContainer.jsx +74 -0
  39. package/components/Header/HeaderLogo.jsx +42 -0
  40. package/components/Header/HeaderMenuButton.js +50 -0
  41. package/components/Header/HeaderMenuItem.jsx +239 -0
  42. package/components/Header/HeaderMenuLink.js +56 -0
  43. package/components/Header/HeaderMenuSignOutButton.js +62 -0
  44. package/components/Header/HeaderMobileButton.js +37 -0
  45. package/components/Header/HeaderUI.jsx +167 -0
  46. package/components/Header/HelpIcon.jsx +32 -0
  47. package/components/Header/ImpersonatorBanner.jsx +82 -0
  48. package/components/Header/NavigationButtonIcon.jsx +27 -0
  49. package/components/Header/default-content.json +280 -0
  50. package/components/Header/header.js +40 -0
  51. package/components/Header/hooks.js +66 -0
  52. package/components/Header/utag-helpers.js +9 -0
  53. package/components/Infotip/Infotip.jsx +75 -0
  54. package/components/Infotip/InfotipIcon.jsx +41 -0
  55. package/components/Infotip/index.js +3 -0
  56. package/components/Link/index.js +61 -0
  57. package/components/Modal/LegacyModal.jsx +72 -0
  58. package/components/Modal/Modal.jsx +140 -0
  59. package/components/Modal/index.jsx +22 -0
  60. package/components/NotificationBanner/CollapsedView.js +39 -0
  61. package/components/NotificationBanner/ExpandedView.js +45 -0
  62. package/components/NotificationBanner/index.js +221 -0
  63. package/components/SanitizedContent/index.jsx +200 -0
  64. package/components/Search/index.js +98 -0
  65. package/components/SessionDialog/sessionDialog.js +26 -0
  66. package/components/SessionDialogUI.jsx +261 -0
  67. package/components/SideNav/AnimationGroup/AnimationGroup.jsx +27 -0
  68. package/components/SideNav/Chart/ScoreChart.jsx +268 -0
  69. package/components/SideNav/Chart/__tests__/ScoreChart.test.js +22 -0
  70. package/components/SideNav/Chart/__tests__/__snapshots__/ScoreChart.test.js.snap +173 -0
  71. package/components/SideNav/Chart/index.js +3 -0
  72. package/components/SideNav/Content/LevelOneContent.jsx +199 -0
  73. package/components/SideNav/Content/LevelTwoContent.jsx +216 -0
  74. package/components/SideNav/Content/SelectRole/index.js +77 -0
  75. package/components/SideNav/Content/SelectRole/utils.js +140 -0
  76. package/components/SideNav/Content/index.js +4 -0
  77. package/components/SideNav/Details/IndividualDetails.jsx +18 -0
  78. package/components/SideNav/Details/PracticeDetails.jsx +45 -0
  79. package/components/SideNav/Details/index.js +4 -0
  80. package/components/SideNav/Links/CmsSwitchLink.jsx +41 -0
  81. package/components/SideNav/Links/NavItemInline.jsx +54 -0
  82. package/components/SideNav/Links/NavLinkContainer.jsx +38 -0
  83. package/components/SideNav/Links/NavLinkDrawer.jsx +276 -0
  84. package/components/SideNav/Links/NavLinkInline.jsx +110 -0
  85. package/components/SideNav/Links/NavLinkToggle.jsx +34 -0
  86. package/components/SideNav/Links/index.js +13 -0
  87. package/components/SideNav/SideNav.md +50 -0
  88. package/components/SideNav/UI/SideNavUI.jsx +298 -0
  89. package/components/SideNav/UI/default-content.json +117 -0
  90. package/components/SideNav/UI/index.js +3 -0
  91. package/components/SideNav/UI/utils.js +0 -0
  92. package/components/SideNav/helpers.js +351 -0
  93. package/components/SideNav/index.js +53 -0
  94. package/components/Tabs/Tab.js +26 -0
  95. package/components/Tabs/TabPanel.js +41 -0
  96. package/components/Tabs/index.js +100 -0
  97. package/components/TextInput/index.js +137 -0
  98. package/components/Tooltip/Tooltip.jsx +88 -0
  99. package/components/Tooltip/Tooltip.stories.js +80 -0
  100. package/components/Tooltip/index.js +3 -0
  101. package/components/Tooltip/position.js +68 -0
  102. package/components/hooks/useGetConfig.js +75 -0
  103. package/components/index.js +128 -0
  104. package/coverage/clover.xml +1453 -0
  105. package/coverage/coverage-final.json +71 -0
  106. package/coverage/lcov-report/Tooltip.jsx.html +232 -0
  107. package/coverage/lcov-report/base.css +224 -0
  108. package/coverage/lcov-report/block-navigation.js +87 -0
  109. package/coverage/lcov-report/components/Accordion/index.html +116 -0
  110. package/coverage/lcov-report/components/Accordion/index.jsx.html +364 -0
  111. package/coverage/lcov-report/components/Button/index.html +116 -0
  112. package/coverage/lcov-report/components/Button/index.js.html +355 -0
  113. package/coverage/lcov-report/components/Error/Collapsible.jsx.html +349 -0
  114. package/coverage/lcov-report/components/Error/ErrorUI.jsx.html +178 -0
  115. package/coverage/lcov-report/components/Error/index.html +131 -0
  116. package/coverage/lcov-report/components/Footer/FooterUI.jsx.html +706 -0
  117. package/coverage/lcov-report/components/Footer/SocialLinks.jsx.html +265 -0
  118. package/coverage/lcov-report/components/Footer/Subscribe.jsx.html +187 -0
  119. package/coverage/lcov-report/components/Footer/index.html +146 -0
  120. package/coverage/lcov-report/components/GovBanner/index.html +116 -0
  121. package/coverage/lcov-report/components/GovBanner/index.js.html +436 -0
  122. package/coverage/lcov-report/components/Header/HeaderAccountMenu.jsx.html +367 -0
  123. package/coverage/lcov-report/components/Header/HeaderCancel.jsx.html +133 -0
  124. package/coverage/lcov-report/components/Header/HeaderContainer.jsx.html +307 -0
  125. package/coverage/lcov-report/components/Header/HeaderLogo.jsx.html +211 -0
  126. package/coverage/lcov-report/components/Header/HeaderMenuButton.js.html +235 -0
  127. package/coverage/lcov-report/components/Header/HeaderMenuItem.jsx.html +802 -0
  128. package/coverage/lcov-report/components/Header/HeaderMenuLink.js.html +253 -0
  129. package/coverage/lcov-report/components/Header/HeaderMenuSignOutButton.js.html +271 -0
  130. package/coverage/lcov-report/components/Header/HeaderMobileButton.js.html +196 -0
  131. package/coverage/lcov-report/components/Header/HeaderUI.jsx.html +586 -0
  132. package/coverage/lcov-report/components/Header/HelpIcon.jsx.html +181 -0
  133. package/coverage/lcov-report/components/Header/ImpersonatorBanner.jsx.html +328 -0
  134. package/coverage/lcov-report/components/Header/NavigationButtonIcon.jsx.html +166 -0
  135. package/coverage/lcov-report/components/Header/hooks.js.html +283 -0
  136. package/coverage/lcov-report/components/Header/index.html +326 -0
  137. package/coverage/lcov-report/components/Header/utag-helpers.js.html +112 -0
  138. package/coverage/lcov-report/components/Infotip/Infotip.jsx.html +310 -0
  139. package/coverage/lcov-report/components/Infotip/InfotipIcon.jsx.html +208 -0
  140. package/coverage/lcov-report/components/Infotip/index.html +146 -0
  141. package/coverage/lcov-report/components/Infotip/index.js.html +94 -0
  142. package/coverage/lcov-report/components/Modal/LegacyModal.jsx.html +301 -0
  143. package/coverage/lcov-report/components/Modal/Modal.jsx.html +505 -0
  144. package/coverage/lcov-report/components/Modal/index.html +146 -0
  145. package/coverage/lcov-report/components/Modal/index.jsx.html +151 -0
  146. package/coverage/lcov-report/components/NotificationBanner/CollapsedView.js.html +202 -0
  147. package/coverage/lcov-report/components/NotificationBanner/ExpandedView.js.html +220 -0
  148. package/coverage/lcov-report/components/NotificationBanner/index.html +146 -0
  149. package/coverage/lcov-report/components/NotificationBanner/index.js.html +748 -0
  150. package/coverage/lcov-report/components/SanitizedContent/index.html +116 -0
  151. package/coverage/lcov-report/components/SanitizedContent/index.jsx.html +685 -0
  152. package/coverage/lcov-report/components/SessionDialogUI.jsx.html +868 -0
  153. package/coverage/lcov-report/components/SideNav/Content/SelectRole/index.html +116 -0
  154. package/coverage/lcov-report/components/SideNav/Content/SelectRole/utils.js.html +505 -0
  155. package/coverage/lcov-report/components/SideNav/helpers.js.html +1138 -0
  156. package/coverage/lcov-report/components/SideNav/index.html +116 -0
  157. package/coverage/lcov-report/components/Tooltip/Tooltip.jsx.html +349 -0
  158. package/coverage/lcov-report/components/Tooltip/index.html +146 -0
  159. package/coverage/lcov-report/components/Tooltip/index.js.html +94 -0
  160. package/coverage/lcov-report/components/Tooltip/position.js.html +289 -0
  161. package/coverage/lcov-report/components/hooks/index.html +116 -0
  162. package/coverage/lcov-report/components/hooks/useGetConfig.js.html +310 -0
  163. package/coverage/lcov-report/components/index.html +116 -0
  164. package/coverage/lcov-report/favicon.png +0 -0
  165. package/coverage/lcov-report/index.html +476 -0
  166. package/coverage/lcov-report/index.js.html +94 -0
  167. package/coverage/lcov-report/lib/Chevron.jsx.html +181 -0
  168. package/coverage/lcov-report/lib/SvgComponents.jsx.html +2200 -0
  169. package/coverage/lcov-report/lib/index.html +131 -0
  170. package/coverage/lcov-report/position.js.html +289 -0
  171. package/coverage/lcov-report/prettify.css +1 -0
  172. package/coverage/lcov-report/prettify.js +2 -0
  173. package/coverage/lcov-report/react/components/Accordion/index.html +116 -0
  174. package/coverage/lcov-report/react/components/Accordion/index.jsx.html +364 -0
  175. package/coverage/lcov-report/react/components/Button/index.html +116 -0
  176. package/coverage/lcov-report/react/components/Button/index.js.html +355 -0
  177. package/coverage/lcov-report/react/components/Dropdown/index.html +116 -0
  178. package/coverage/lcov-report/react/components/Dropdown/index.js.html +340 -0
  179. package/coverage/lcov-report/react/components/Error/Collapsible.jsx.html +349 -0
  180. package/coverage/lcov-report/react/components/Error/ErrorUI.jsx.html +178 -0
  181. package/coverage/lcov-report/react/components/Error/error.js.html +163 -0
  182. package/coverage/lcov-report/react/components/Error/index.html +146 -0
  183. package/coverage/lcov-report/react/components/Footer/FooterUI.jsx.html +718 -0
  184. package/coverage/lcov-report/react/components/Footer/SocialLinks.jsx.html +265 -0
  185. package/coverage/lcov-report/react/components/Footer/Subscribe.jsx.html +187 -0
  186. package/coverage/lcov-report/react/components/Footer/footer.js.html +145 -0
  187. package/coverage/lcov-report/react/components/Footer/index.html +161 -0
  188. package/coverage/lcov-report/react/components/GovBanner/index.html +116 -0
  189. package/coverage/lcov-report/react/components/GovBanner/index.js.html +436 -0
  190. package/coverage/lcov-report/react/components/Header/HeaderAccountMenu.jsx.html +367 -0
  191. package/coverage/lcov-report/react/components/Header/HeaderCancel.jsx.html +133 -0
  192. package/coverage/lcov-report/react/components/Header/HeaderContainer.jsx.html +307 -0
  193. package/coverage/lcov-report/react/components/Header/HeaderLogo.jsx.html +211 -0
  194. package/coverage/lcov-report/react/components/Header/HeaderMenuButton.js.html +235 -0
  195. package/coverage/lcov-report/react/components/Header/HeaderMenuItem.jsx.html +802 -0
  196. package/coverage/lcov-report/react/components/Header/HeaderMenuLink.js.html +253 -0
  197. package/coverage/lcov-report/react/components/Header/HeaderMenuSignOutButton.js.html +271 -0
  198. package/coverage/lcov-report/react/components/Header/HeaderMobileButton.js.html +196 -0
  199. package/coverage/lcov-report/react/components/Header/HeaderUI.jsx.html +586 -0
  200. package/coverage/lcov-report/react/components/Header/HelpIcon.jsx.html +181 -0
  201. package/coverage/lcov-report/react/components/Header/ImpersonatorBanner.jsx.html +328 -0
  202. package/coverage/lcov-report/react/components/Header/NavigationButtonIcon.jsx.html +166 -0
  203. package/coverage/lcov-report/react/components/Header/header.js.html +205 -0
  204. package/coverage/lcov-report/react/components/Header/hooks.js.html +283 -0
  205. package/coverage/lcov-report/react/components/Header/index.html +341 -0
  206. package/coverage/lcov-report/react/components/Header/utag-helpers.js.html +112 -0
  207. package/coverage/lcov-report/react/components/Infotip/Infotip.jsx.html +298 -0
  208. package/coverage/lcov-report/react/components/Infotip/InfotipContent.jsx.html +223 -0
  209. package/coverage/lcov-report/react/components/Infotip/InfotipIcon.jsx.html +208 -0
  210. package/coverage/lcov-report/react/components/Infotip/index.html +161 -0
  211. package/coverage/lcov-report/react/components/Infotip/index.js.html +94 -0
  212. package/coverage/lcov-report/react/components/Modal/LegacyModal.jsx.html +301 -0
  213. package/coverage/lcov-report/react/components/Modal/Modal.jsx.html +505 -0
  214. package/coverage/lcov-report/react/components/Modal/index.html +146 -0
  215. package/coverage/lcov-report/react/components/Modal/index.jsx.html +151 -0
  216. package/coverage/lcov-report/react/components/NotificationBanner/CollapsedView.js.html +202 -0
  217. package/coverage/lcov-report/react/components/NotificationBanner/ExpandedView.js.html +220 -0
  218. package/coverage/lcov-report/react/components/NotificationBanner/index.html +146 -0
  219. package/coverage/lcov-report/react/components/NotificationBanner/index.js.html +748 -0
  220. package/coverage/lcov-report/react/components/SanitizedContent/index.html +116 -0
  221. package/coverage/lcov-report/react/components/SanitizedContent/index.jsx.html +685 -0
  222. package/coverage/lcov-report/react/components/SessionDialog/index.html +116 -0
  223. package/coverage/lcov-report/react/components/SessionDialog/sessionDialog.js.html +163 -0
  224. package/coverage/lcov-report/react/components/SessionDialogUI.jsx.html +868 -0
  225. package/coverage/lcov-report/react/components/SideNav/AnimationGroup/AnimationGroup.jsx.html +166 -0
  226. package/coverage/lcov-report/react/components/SideNav/AnimationGroup/index.html +116 -0
  227. package/coverage/lcov-report/react/components/SideNav/Chart/ScoreChart.jsx.html +889 -0
  228. package/coverage/lcov-report/react/components/SideNav/Chart/index.html +131 -0
  229. package/coverage/lcov-report/react/components/SideNav/Chart/index.js.html +94 -0
  230. package/coverage/lcov-report/react/components/SideNav/Content/LevelOneContent.jsx.html +682 -0
  231. package/coverage/lcov-report/react/components/SideNav/Content/LevelTwoContent.jsx.html +733 -0
  232. package/coverage/lcov-report/react/components/SideNav/Content/SelectRole/index.html +131 -0
  233. package/coverage/lcov-report/react/components/SideNav/Content/SelectRole/index.js.html +316 -0
  234. package/coverage/lcov-report/react/components/SideNav/Content/SelectRole/utils.js.html +505 -0
  235. package/coverage/lcov-report/react/components/SideNav/Content/index.html +146 -0
  236. package/coverage/lcov-report/react/components/SideNav/Content/index.js.html +97 -0
  237. package/coverage/lcov-report/react/components/SideNav/Details/IndividualDetails.jsx.html +139 -0
  238. package/coverage/lcov-report/react/components/SideNav/Details/PracticeDetails.jsx.html +220 -0
  239. package/coverage/lcov-report/react/components/SideNav/Details/index.html +146 -0
  240. package/coverage/lcov-report/react/components/SideNav/Details/index.js.html +97 -0
  241. package/coverage/lcov-report/react/components/SideNav/Links/CmsSwitchLink.jsx.html +208 -0
  242. package/coverage/lcov-report/react/components/SideNav/Links/NavItemInline.jsx.html +247 -0
  243. package/coverage/lcov-report/react/components/SideNav/Links/NavLinkContainer.jsx.html +199 -0
  244. package/coverage/lcov-report/react/components/SideNav/Links/NavLinkDrawer.jsx.html +913 -0
  245. package/coverage/lcov-report/react/components/SideNav/Links/NavLinkInline.jsx.html +421 -0
  246. package/coverage/lcov-report/react/components/SideNav/Links/NavLinkToggle.jsx.html +187 -0
  247. package/coverage/lcov-report/react/components/SideNav/Links/index.html +206 -0
  248. package/coverage/lcov-report/react/components/SideNav/Links/index.js.html +124 -0
  249. package/coverage/lcov-report/react/components/SideNav/UI/SideNavUI.jsx.html +1087 -0
  250. package/coverage/lcov-report/react/components/SideNav/UI/index.html +131 -0
  251. package/coverage/lcov-report/react/components/SideNav/UI/index.js.html +94 -0
  252. package/coverage/lcov-report/react/components/SideNav/helpers.js.html +1138 -0
  253. package/coverage/lcov-report/react/components/SideNav/index.html +131 -0
  254. package/coverage/lcov-report/react/components/SideNav/index.js.html +244 -0
  255. package/coverage/lcov-report/react/components/Tooltip/Tooltip.jsx.html +232 -0
  256. package/coverage/lcov-report/react/components/Tooltip/index.html +146 -0
  257. package/coverage/lcov-report/react/components/Tooltip/index.js.html +94 -0
  258. package/coverage/lcov-report/react/components/Tooltip/position.js.html +289 -0
  259. package/coverage/lcov-report/react/components/hooks/index.html +116 -0
  260. package/coverage/lcov-report/react/components/hooks/useGetConfig.js.html +310 -0
  261. package/coverage/lcov-report/react/components/index.html +116 -0
  262. package/coverage/lcov-report/react/index.html +116 -0
  263. package/coverage/lcov-report/react/index.js.html +178 -0
  264. package/coverage/lcov-report/react/lib/Chevron.jsx.html +181 -0
  265. package/coverage/lcov-report/react/lib/SvgComponents.jsx.html +2200 -0
  266. package/coverage/lcov-report/react/lib/index.html +131 -0
  267. package/coverage/lcov-report/react/lib/svg-definitions.svg.html +460 -0
  268. package/coverage/lcov-report/react/session/index.html +161 -0
  269. package/coverage/lcov-report/react/session/index.js.html +100 -0
  270. package/coverage/lcov-report/react/session/logout.js.html +307 -0
  271. package/coverage/lcov-report/react/session/refresh.js.html +232 -0
  272. package/coverage/lcov-report/react/session/ttl.js.html +196 -0
  273. package/coverage/lcov-report/session/index.html +161 -0
  274. package/coverage/lcov-report/session/index.js.html +100 -0
  275. package/coverage/lcov-report/session/logout.js.html +307 -0
  276. package/coverage/lcov-report/session/refresh.js.html +232 -0
  277. package/coverage/lcov-report/session/ttl.js.html +196 -0
  278. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  279. package/coverage/lcov-report/sorter.js +196 -0
  280. package/coverage/lcov.info +3189 -0
  281. package/dist/browser.js +3 -53
  282. package/dist/browser.js.LICENSE.txt +70 -0
  283. package/dist/browser.js.map +1 -0
  284. package/dist/index.js +3 -53
  285. package/dist/index.js.LICENSE.txt +70 -0
  286. package/dist/index.js.map +1 -0
  287. package/dist/react/index.js +3 -0
  288. package/dist/react/index.js.LICENSE.txt +96 -0
  289. package/dist/react/index.js.map +1 -0
  290. package/fonts/PublicSans-Black.ttf +0 -0
  291. package/fonts/PublicSans-BlackItalic.ttf +0 -0
  292. package/fonts/PublicSans-Bold.ttf +0 -0
  293. package/fonts/PublicSans-BoldItalic.ttf +0 -0
  294. package/fonts/PublicSans-ExtraBold.ttf +0 -0
  295. package/fonts/PublicSans-ExtraBoldItalic.ttf +0 -0
  296. package/fonts/PublicSans-ExtraLight.ttf +0 -0
  297. package/fonts/PublicSans-ExtraLightItalic.ttf +0 -0
  298. package/fonts/PublicSans-Italic.ttf +0 -0
  299. package/fonts/PublicSans-Light.ttf +0 -0
  300. package/fonts/PublicSans-LightItalic.ttf +0 -0
  301. package/fonts/PublicSans-Medium.ttf +0 -0
  302. package/fonts/PublicSans-MediumItalic.ttf +0 -0
  303. package/fonts/PublicSans-Regular.ttf +0 -0
  304. package/fonts/PublicSans-SemiBold.ttf +0 -0
  305. package/fonts/PublicSans-SemiBoldItalic.ttf +0 -0
  306. package/fonts/PublicSans-Thin.ttf +0 -0
  307. package/fonts/PublicSans-ThinItalic.ttf +0 -0
  308. package/images/favicon/manifest.json +3 -3
  309. package/images/hhs-logo-black.svg +10 -0
  310. package/images/icon-dot-gov.svg +1 -0
  311. package/images/icon-https.svg +1 -0
  312. package/images/icons/close-x.svg +6 -0
  313. package/images/icons/svg/arrow-down.svg +3 -0
  314. package/images/icons/svg/arrow-download.svg +1 -0
  315. package/images/icons/svg/arrow-right.svg +1 -0
  316. package/images/icons/svg/arrow-up.svg +3 -0
  317. package/images/icons/svg/calendar.svg +1 -0
  318. package/images/icons/svg/checkmark.svg +7 -0
  319. package/images/icons/svg/chevron-down.svg +11 -0
  320. package/images/icons/svg/chevron-left.svg +12 -0
  321. package/images/icons/svg/chevron-right.svg +12 -0
  322. package/images/icons/svg/chevron-up.svg +12 -0
  323. package/images/icons/svg/clipboard.svg +1 -0
  324. package/images/icons/svg/close.svg +1 -0
  325. package/images/icons/svg/divide.svg +13 -0
  326. package/images/icons/svg/doctors-and-clinicians-preview.svg +10 -0
  327. package/images/icons/svg/download.svg +1 -0
  328. package/images/icons/svg/dropdown-arrow.svg +1 -0
  329. package/images/icons/svg/equals.svg +13 -0
  330. package/images/icons/svg/exclamation.svg +11 -0
  331. package/images/icons/svg/external.svg +1 -0
  332. package/images/icons/svg/file-download.svg +1 -0
  333. package/images/icons/svg/file-upload.svg +1 -0
  334. package/images/icons/svg/info.svg +20 -0
  335. package/images/icons/svg/manage-user-access.svg +8 -0
  336. package/images/icons/svg/multiply.svg +12 -0
  337. package/images/icons/svg/performance-feedback.svg +1 -0
  338. package/images/icons/svg/plus.svg +12 -0
  339. package/images/icons/svg/preview.svg +17 -0
  340. package/images/icons/svg/print.svg +1 -0
  341. package/images/icons/svg/registration.svg +8 -0
  342. package/images/icons/svg/reporting.svg +17 -0
  343. package/images/icons/svg/save-disk.svg +5 -0
  344. package/images/icons/svg/search.svg +1 -0
  345. package/images/icons/svg/subtract.svg +15 -0
  346. package/images/icons/svg/targeted-review.svg +15 -0
  347. package/images/icons/svg/tooltip-question.svg +1 -0
  348. package/images/icons/svg/trash.svg +1 -0
  349. package/images/icons/svg/upload.svg +1 -0
  350. package/images/us_flag_small.png +0 -0
  351. package/index.js +31 -0
  352. package/jest/mediaFileTransformer.js +9 -0
  353. package/jest.config.js +195 -0
  354. package/lib/Chevron.jsx +32 -0
  355. package/lib/SvgComponents.jsx +585 -0
  356. package/lib/svg-definitions.svg +125 -0
  357. package/package.json +76 -54
  358. package/{js/session → session}/index.js +2 -4
  359. package/session/logout.js +74 -0
  360. package/{js/session → session}/refresh.js +9 -7
  361. package/session/ttl.js +37 -0
  362. package/storybook-static/229.630347465201d1822126.manager.bundle.js +1 -0
  363. package/storybook-static/295.aa3c5122636a27ad7c7b.manager.bundle.js +1 -0
  364. package/storybook-static/468.d976c69e47003b4dcfa3.manager.bundle.js +2 -0
  365. package/storybook-static/468.d976c69e47003b4dcfa3.manager.bundle.js.LICENSE.txt +94 -0
  366. package/storybook-static/51.fc4b02f2a75c894ae64e.manager.bundle.js +2 -0
  367. package/storybook-static/51.fc4b02f2a75c894ae64e.manager.bundle.js.LICENSE.txt +8 -0
  368. package/storybook-static/551.45aead073703cc6fb12b.manager.bundle.js +1 -0
  369. package/storybook-static/807.1a7f4dcf15e4696572ca.manager.bundle.js +2 -0
  370. package/storybook-static/807.1a7f4dcf15e4696572ca.manager.bundle.js.LICENSE.txt +31 -0
  371. package/storybook-static/897.9b5fee8cc7074607c812.manager.bundle.js +2 -0
  372. package/storybook-static/897.9b5fee8cc7074607c812.manager.bundle.js.LICENSE.txt +12 -0
  373. package/storybook-static/935.532759f0652585685af7.manager.bundle.js +1 -0
  374. package/storybook-static/favicon.ico +0 -0
  375. package/storybook-static/index.html +59 -0
  376. package/storybook-static/main.ad4edcd27d527a119d7a.manager.bundle.js +1 -0
  377. package/storybook-static/project.json +1 -0
  378. package/storybook-static/runtime~main.b165398bf7ef3e30d431.manager.bundle.js +1 -0
  379. package/styles/_global.scss +81 -59
  380. package/styles/_main.scss +11 -3
  381. package/styles/_paths.scss +1 -1
  382. package/styles/_qpp-style.scss +7 -4
  383. package/styles/components/_accordion.scss +266 -149
  384. package/styles/components/_alerts.scss +5 -7
  385. package/styles/components/_autocomplete.scss +47 -0
  386. package/styles/components/_breadcrumbs.scss +18 -17
  387. package/styles/components/_buttons.scss +545 -275
  388. package/styles/components/_error-page.scss +56 -0
  389. package/styles/components/_flash-notification.scss +98 -0
  390. package/styles/components/_fonts.scss +12 -13
  391. package/styles/components/_forms.scss +144 -70
  392. package/styles/components/_grid.scss +26 -20
  393. package/styles/components/_info-modal.scss +92 -19
  394. package/styles/components/_links.scss +4 -3
  395. package/styles/components/_modals.scss +10 -9
  396. package/styles/components/_notification-banner.scss +165 -0
  397. package/styles/components/_panels.scss +23 -21
  398. package/styles/components/_pie-chart.scss +3 -3
  399. package/styles/components/_score-chart.scss +135 -105
  400. package/styles/components/_spinner.scss +7 -0
  401. package/styles/components/_tables.scss +96 -72
  402. package/styles/components/_tabs.scss +69 -0
  403. package/styles/components/_text.scss +114 -48
  404. package/styles/components/_tooltip.scss +23 -0
  405. package/styles/components/_variables.scss +87 -58
  406. package/styles/components/_wells.scss +39 -29
  407. package/styles/qppds/README.md +0 -0
  408. package/styles/qppds/base/_backgrounds.scss +7 -0
  409. package/styles/qppds/base/_fonts.scss +50 -0
  410. package/styles/qppds/base/_icon.scss +31 -0
  411. package/styles/qppds/base/_layout.scss +5 -0
  412. package/styles/qppds/base/_typography.scss +97 -0
  413. package/styles/qppds/base/index.scss +8 -0
  414. package/styles/qppds/components/_alert.scss +101 -0
  415. package/styles/qppds/components/_breadcrumbs.scss +91 -0
  416. package/styles/qppds/components/_button.scss +306 -0
  417. package/styles/qppds/components/_card.scss +175 -0
  418. package/styles/qppds/components/_checkbox.scss +199 -0
  419. package/styles/qppds/components/_circular-loader.scss +47 -0
  420. package/styles/qppds/components/_details.scss +90 -0
  421. package/styles/qppds/components/_dropdown-menu.scss +125 -0
  422. package/styles/qppds/components/_dropdown.scss +56 -0
  423. package/styles/qppds/components/_footer.scss +606 -0
  424. package/styles/qppds/components/_gov-banner.scss +344 -0
  425. package/styles/qppds/components/_header.scss +913 -0
  426. package/styles/qppds/components/_link.scss +52 -0
  427. package/styles/qppds/components/_modal.scss +118 -0
  428. package/styles/qppds/components/_page-header.scss +104 -0
  429. package/styles/qppds/components/_pagination.scss +227 -0
  430. package/styles/qppds/components/_process-list.scss +104 -0
  431. package/styles/qppds/components/_radio-button.scss +184 -0
  432. package/styles/qppds/components/_search.scss +118 -0
  433. package/styles/qppds/components/_sidebar.scss +10 -0
  434. package/styles/qppds/components/_step-indicator.scss +190 -0
  435. package/styles/qppds/components/_table.scss +157 -0
  436. package/styles/qppds/components/_tabs.scss +197 -0
  437. package/styles/qppds/components/_text-input.scss +60 -0
  438. package/styles/qppds/components/index.scss +24 -0
  439. package/styles/qppds/components/sidebar/_animations.scss +38 -0
  440. package/styles/{components → qppds/components}/sidebar/_cms.scss +19 -10
  441. package/styles/{components → qppds/components}/sidebar/_details.scss +25 -21
  442. package/styles/qppds/components/sidebar/_links.scss +462 -0
  443. package/styles/qppds/components/sidebar/_select-role-dropdown.scss +21 -0
  444. package/styles/qppds/components/sidebar/_sidebar-animation.scss +125 -0
  445. package/styles/qppds/components/sidebar/_sidebar-tooltip.scss +33 -0
  446. package/styles/qppds/components/sidebar/_sidebar.scss +146 -0
  447. package/styles/qppds/components/sidebar/project-specific/_wi.scss +42 -0
  448. package/styles/qppds/index.scss +4 -0
  449. package/styles/qppds/settings/_functions.scss +6 -0
  450. package/styles/qppds/settings/_index.scss +3 -0
  451. package/styles/qppds/settings/mixins/_borders.scss +6 -0
  452. package/styles/qppds/settings/mixins/_focus.scss +28 -0
  453. package/styles/qppds/settings/mixins/_icons.scss +43 -0
  454. package/styles/qppds/settings/mixins/_index.scss +8 -0
  455. package/styles/qppds/settings/mixins/_layout.scss +74 -0
  456. package/styles/qppds/settings/mixins/_lists.scss +12 -0
  457. package/styles/qppds/settings/mixins/_table.scss +91 -0
  458. package/styles/qppds/settings/mixins/_type.scss +89 -0
  459. package/styles/qppds/settings/mixins/_visually-hidden.scss +30 -0
  460. package/styles/qppds/settings/variables/_color.scss +86 -0
  461. package/styles/qppds/settings/variables/_index.scss +4 -0
  462. package/styles/qppds/settings/variables/_layout.scss +69 -0
  463. package/styles/qppds/settings/variables/_type.scss +135 -0
  464. package/styles/qppds/settings/variables/_z-index.scss +8 -0
  465. package/styles/qppds/utilities/_background-color.scss +134 -0
  466. package/styles/qppds/utilities/_color.scss +40 -0
  467. package/styles/qppds/utilities/_display-visibility.scss +83 -0
  468. package/styles/qppds/utilities/_flexbox.scss +240 -0
  469. package/styles/qppds/utilities/_font-family.scss +9 -0
  470. package/styles/qppds/utilities/_font-size.scss +8 -0
  471. package/styles/qppds/utilities/_font-weight.scss +8 -0
  472. package/styles/qppds/utilities/_gap.scss +38 -0
  473. package/styles/qppds/utilities/_height.scss +79 -0
  474. package/styles/qppds/utilities/_list-style.scss +18 -0
  475. package/styles/qppds/utilities/_margin.scss +136 -0
  476. package/styles/qppds/utilities/_padding.scss +76 -0
  477. package/styles/qppds/utilities/_position.scss +24 -0
  478. package/styles/qppds/utilities/_text-align.scss +40 -0
  479. package/styles/qppds/utilities/_text-transform.scss +7 -0
  480. package/styles/qppds/utilities/_truncate.scss +8 -0
  481. package/styles/qppds/utilities/_vertical-align.scss +72 -0
  482. package/styles/qppds/utilities/_width.scss +81 -0
  483. package/styles/qppds/utilities/index.scss +17 -0
  484. package/styles/qppds.scss +2 -0
  485. package/styles/third-party/_legacy-bootstrap.scss +19 -0
  486. package/styles/third-party/legacy-bootstrap/_buttons.scss +126 -0
  487. package/styles/third-party/legacy-bootstrap/_dropdowns.scss +211 -0
  488. package/styles/third-party/legacy-bootstrap/_forms.scss +510 -0
  489. package/styles/third-party/legacy-bootstrap/_grid.scss +73 -0
  490. package/styles/third-party/legacy-bootstrap/_mixins.scss +27 -0
  491. package/styles/third-party/legacy-bootstrap/_navbar.scss +644 -0
  492. package/styles/third-party/legacy-bootstrap/_navs.scss +193 -0
  493. package/styles/third-party/legacy-bootstrap/_normalize.scss +385 -0
  494. package/styles/third-party/legacy-bootstrap/_scaffolding.scss +116 -0
  495. package/styles/third-party/legacy-bootstrap/_variables.scss +858 -0
  496. package/styles/third-party/legacy-bootstrap/mixins/_buttons.scss +70 -0
  497. package/styles/third-party/legacy-bootstrap/mixins/_clearfix.scss +22 -0
  498. package/styles/third-party/legacy-bootstrap/mixins/_forms.scss +108 -0
  499. package/styles/third-party/legacy-bootstrap/mixins/_grid-framework.scss +86 -0
  500. package/styles/third-party/legacy-bootstrap/mixins/_grid.scss +112 -0
  501. package/styles/third-party/legacy-bootstrap/mixins/_labels.scss +12 -0
  502. package/styles/third-party/legacy-bootstrap/mixins/_nav-divider.scss +10 -0
  503. package/styles/third-party/legacy-bootstrap/mixins/_nav-vertical-align.scss +9 -0
  504. package/styles/third-party/legacy-bootstrap/mixins/_opacity.scss +7 -0
  505. package/styles/third-party/legacy-bootstrap/mixins/_panels.scss +30 -0
  506. package/styles/third-party/legacy-bootstrap/mixins/_reset-filter.scss +7 -0
  507. package/styles/third-party/legacy-bootstrap/mixins/_reset-text.scss +18 -0
  508. package/styles/third-party/legacy-bootstrap/mixins/_resize.scss +6 -0
  509. package/styles/third-party/legacy-bootstrap/mixins/_responsive-visibility.scss +25 -0
  510. package/styles/third-party/legacy-bootstrap/mixins/_size.scss +10 -0
  511. package/styles/third-party/legacy-bootstrap/mixins/_tab-focus.scss +9 -0
  512. package/styles/third-party/legacy-bootstrap/mixins/_table-row.scss +28 -0
  513. package/styles/third-party/legacy-bootstrap/mixins/_text-emphasis.scss +12 -0
  514. package/styles/third-party/legacy-bootstrap/mixins/_text-overflow.scss +8 -0
  515. package/styles/third-party/legacy-bootstrap/mixins/_vendor-prefixes.scss +182 -0
  516. package/styles/utility/_mixins.scss +12 -11
  517. package/styles/utility/_utilities.scss +12 -1
  518. package/svgo.config.js +14 -0
  519. package/test/components/Accordion.test.js +12 -0
  520. package/test/components/ErrorUI.test.js +33 -0
  521. package/test/components/FooterUI.test.js +60 -0
  522. package/test/components/HeaderUI.test.js +45 -0
  523. package/test/components/Infotip.test.js +73 -0
  524. package/test/components/SessionDialogUI.test.js +339 -0
  525. package/test/components/SideNavUI.test.js +23 -0
  526. package/test/components/Tooltip.test.js +147 -0
  527. package/test/index.test.js +8 -0
  528. package/test/session/session.test.js +221 -0
  529. package/test-setup.js +1 -0
  530. package/webpack.config.js +137 -0
  531. package/webpack.config.react.js +75 -0
  532. package/Dockerfile +0 -27
  533. package/Jenkinsfile +0 -22
  534. package/_config.dev.yml +0 -17
  535. package/_layouts/base.html +0 -42
  536. package/css/main.scss +0 -5
  537. package/dist/default.css +0 -2
  538. package/dist/default.css.map +0 -1
  539. package/dist/fonts/FontAwesome.otf +0 -0
  540. package/dist/fonts/Rubik-Bold.ttf +0 -0
  541. package/dist/fonts/Rubik-Light.ttf +0 -0
  542. package/dist/fonts/Rubik-Medium.ttf +0 -0
  543. package/dist/fonts/Rubik-Regular.ttf +0 -0
  544. package/dist/fonts/fontawesome-webfont.eot +0 -0
  545. package/dist/fonts/fontawesome-webfont.ttf +0 -0
  546. package/dist/fonts/fontawesome-webfont.woff +0 -0
  547. package/dist/fonts/fontawesome-webfont.woff2 +0 -0
  548. package/dist/report.html +0 -25
  549. package/js/components/Footer/FooterUI.jsx +0 -39
  550. package/js/components/Footer/footer.js +0 -17
  551. package/js/components/Header/HeaderAbout.jsx +0 -27
  552. package/js/components/Header/HeaderAccountMenu.jsx +0 -114
  553. package/js/components/Header/HeaderApms.jsx +0 -25
  554. package/js/components/Header/HeaderMips.jsx +0 -43
  555. package/js/components/Header/HeaderUI.jsx +0 -87
  556. package/js/components/Header/header.js +0 -15
  557. package/js/components/InfoModal/index.jsx +0 -43
  558. package/js/components/SessionDialogUI.jsx +0 -181
  559. package/js/components/SideNav/Chart/ScoreChart.jsx +0 -246
  560. package/js/components/SideNav/Chart/__tests__/ScoreChart.test.js +0 -28
  561. package/js/components/SideNav/Chart/__tests__/__snapshots__/ScoreChart.test.js.snap +0 -57
  562. package/js/components/SideNav/Chart/index.js +0 -1
  563. package/js/components/SideNav/Content/CmsContent.jsx +0 -81
  564. package/js/components/SideNav/Content/LevelOneContent.jsx +0 -53
  565. package/js/components/SideNav/Content/LevelThreeContent.jsx +0 -98
  566. package/js/components/SideNav/Content/LevelTwoContent.jsx +0 -87
  567. package/js/components/SideNav/Content/index.js +0 -4
  568. package/js/components/SideNav/Details/IndividualDetails.jsx +0 -35
  569. package/js/components/SideNav/Details/PracticeDetails.jsx +0 -33
  570. package/js/components/SideNav/Details/index.js +0 -2
  571. package/js/components/SideNav/Links/CmsReportLink.jsx +0 -114
  572. package/js/components/SideNav/Links/NavLinkBack.jsx +0 -8
  573. package/js/components/SideNav/Links/NavLinkContainer.jsx +0 -33
  574. package/js/components/SideNav/Links/NavLinkDrawer.jsx +0 -72
  575. package/js/components/SideNav/Links/NavLinkInline.jsx +0 -20
  576. package/js/components/SideNav/Links/NavLinkSlideOut.jsx +0 -47
  577. package/js/components/SideNav/Links/NavLinkToggle.jsx +0 -25
  578. package/js/components/SideNav/Links/index.js +0 -7
  579. package/js/components/SideNav/UI/SideNavUI.jsx +0 -109
  580. package/js/components/SideNav/UI/index.js +0 -1
  581. package/js/components/SideNav/index.js +0 -24
  582. package/js/components/index.js +0 -9
  583. package/js/index.js +0 -24
  584. package/js/session/logout.js +0 -41
  585. package/sidebar-demo.html +0 -48
  586. package/styles/components/_footer.scss +0 -164
  587. package/styles/components/_header.scss +0 -393
  588. package/styles/components/_sidebar.scss +0 -6
  589. package/styles/components/_tool-tips.scss +0 -6
  590. package/styles/components/sidebar/_animations.scss +0 -16
  591. package/styles/components/sidebar/_links.scss +0 -269
  592. package/styles/components/sidebar/_sidebar.scss +0 -107
  593. package/styles/guide/_layout.scss +0 -120
  594. package/styles/guide/sidebar-demo.css +0 -121
  595. package/yarn.lock +0 -5694
package/.babelrc ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "presets": [
3
+ "@babel/preset-react",
4
+ "@babel/preset-env"
5
+ ],
6
+ "plugins": [
7
+ "transform-es2015-modules-umd",
8
+ "transform-class-properties"
9
+ ]
10
+ }
package/.editorconfig ADDED
@@ -0,0 +1,22 @@
1
+ # EditorConfig helps developers define and maintain consistent
2
+ # coding styles between different editors and IDEs
3
+ # editorconfig.org
4
+
5
+ root = true
6
+
7
+ [*]
8
+ indent_style = space
9
+ indent_size = 4
10
+ end_of_line = lf
11
+ charset = utf-8
12
+ trim_trailing_whitespace = true
13
+ insert_final_newline = true
14
+
15
+ [*.scss]
16
+ indent_style = tab
17
+
18
+ [*.md]
19
+ trim_trailing_whitespace = false
20
+
21
+ [*.{pug, yml, yaml, rb, py}]
22
+ indent_size = 2
package/.eslintignore ADDED
@@ -0,0 +1,5 @@
1
+ _*
2
+ css
3
+ dist
4
+ node_modules
5
+ test
package/.eslintrc.js ADDED
@@ -0,0 +1,31 @@
1
+ module.exports = {
2
+ extends: ['eslint:recommended', 'plugin:react/recommended'],
3
+ parser: '@babel/eslint-parser',
4
+ parserOptions: {
5
+ sourceType: 'module',
6
+ ecmaFeatures: {
7
+ jsx: true,
8
+ },
9
+ },
10
+ env: {
11
+ es6: true,
12
+ node: true,
13
+ browser: true,
14
+ jquery: true,
15
+ mocha: true,
16
+ },
17
+ rules: {
18
+ 'no-unused-vars': [
19
+ 'error',
20
+ {
21
+ args: 'none',
22
+ },
23
+ ],
24
+ 'linebreak-style': ['error', 'unix'],
25
+ 'no-console': 0,
26
+ 'no-prototype-builtins': [0],
27
+ },
28
+ settings: {
29
+ react: { version: 'detect' },
30
+ },
31
+ };
package/.husky/pre-commit ADDED
@@ -0,0 +1,5 @@
1
+ #!/usr/bin/env sh
2
+ . "$(dirname -- "$0")/_/husky.sh"
3
+
4
+ cd react
5
+ npm run precommit
package/README.md CHANGED
@@ -1,65 +1,45 @@
1
- # qpp-style
2
- Shared style guide across the QPP program.
1
+ # QPP-Style React
3
2
 
4
- This repository houses `qpp-style`, a shared style guide/library for the QPP program. `qpp-style` was built on top of bootstrap.
3
+ This directory contains react implementations of the components for QPP.
5
4
 
6
- The purpose of `qpp-style` is to provide assets such as CSS, SCSS, JS, images and fonts to design a site with the visual style of `qpp.cms.gov`. This allows multiple sites built in separate repositories and with different languages to share a global style without repeating styling code. The qpp-style library is primarily distributed on the node/npm ecosystem.
5
+ ## Github Branch and Pull Request process
7
6
 
8
- ## Style Guide Documentation
9
- The style guide is located at https://cmsgov.github.io/qpp-style/ but can be viewed locally by running:
10
- ```sh
11
- $ bundle exec jekyll serve --config _config.dev.yml
12
- ```
13
- ## Install and Use
7
+ 1. Create branch off main and create a Pull Request into main for the feature.
8
+ > Example Branch Name: feature/QPPXX-XXXX_make_icon_better
9
+ 2. Once merged into main, create release branch from main.
10
+ 3. Name the new branch release/x.xx.x
11
+ 4. Run the version bump:
14
12
 
15
- The best way to install qpp-style is with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/). If you haven't already installed the `qpp-style` [module](https://www.npmjs.com/package/qpp-style), run the following command to install qpp-style into your project.
16
- ```
17
- npm install --save qpp-style
18
- ```
19
- or
13
+ ```bash
14
+ cd qpp-style/react
15
+ npm version --no-git-tag-version patch
20
16
  ```
21
- yarn add qpp-style
22
- ```
23
- Once installed, all the assets from `qpp-style` need to be consumed by your project. The simplest way to to this is by copying over the relevant assets with build commands and include them from the html with link tags. For example:
24
17
 
25
- 1. Build all assets that came with the module:
26
- ```sh
27
- $ pushd .
28
- $ cd ./node_modules/qpp-style
29
- $ npm install
30
- $ npm start
31
- ```
32
- 1. Copy assets to project directory:
33
- ```sh
34
- $ popd
35
- $ mkdir -p public
36
- $ cp -r ./node_modules/qpp-style/build/* public
37
- ```
38
- 1. Create webpage:
39
- ```sh
40
- $ touch public/index.html
41
- ```
42
- 1. Link to css in html:
43
- ```html
44
- <html lang="en">
45
- <head>
46
- <link href="/css/qpp-style.css" type="text/css" rel="stylesheet" />
47
- </head>
48
- <body>
49
- <h1>QPP Quality Payment Program</h1>
50
- </body>
51
- </html>
52
- ```
18
+ Example Commit Message:
19
+
20
+ > x.xx.x release
53
21
 
54
- Another way to use the style is by importing the sass into your project. This can be done in the following way:
22
+ 5. Create a pull request against main with the PR Title: x.xx.x release [Example PR](https://github.com/CMSgov/qpp-style/pull/1065)
23
+ 6. Enter the change in the description of the pull request i.e.:
24
+ > Added new svg for Icon Name
55
25
 
56
- 1. Copy the fonts to `/fonts`:
57
- ```sh
58
- $ mkdir -p fonts
59
- $ cp -r ./node_modules/qpp-style/fonts/* fonts
60
- ```
26
+ ## Generate an NPM token with Publish permissions
61
27
 
62
- 1. Create a `.scss` file and adding this line:
63
- ```scss
64
- @import "../node_modules/qpp-style/styles/qpp_style";
28
+ 1. If you do not already have an access token, sign in to npmjs.com and navigate to access tokens.
29
+ 2. Click generate new token.
30
+ 3. Select publish under type.
31
+ 4. Copy the npm token and set its value as the environment variable: NPM_TOKEN
32
+
33
+ ```bash
34
+ export NPM_TOKEN={npm_token}
65
35
  ```
36
+
37
+ ## Publish the react qpp-style npm package (used by both react and angular)
38
+
39
+ ```bash
40
+ cd qpp-style/react
41
+ npm i
42
+ npm publish
43
+ ```
44
+
45
+ 7. Once published successfully, merge into main.
package/components/Accordion/Accordion.stories.js ADDED
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ import Accordion from '.';
3
+
4
+ export default {
5
+ title: 'Accordion',
6
+ component: Accordion,
7
+ };
8
+
9
+ export const Example = () => (
10
+ <div style={{ padding: '20px', maxWidth: '500px' }}>
11
+ <Accordion title="Accordion title">My accordion content</Accordion>
12
+ </div>
13
+ );
14
+
15
+ export const Focus = () => (
16
+ <div style={{ padding: '20px', maxWidth: '500px' }}>
17
+ <input />
18
+ <Accordion title="Accordion title">My accordion content</Accordion>
19
+ </div>
20
+ );
package/components/Accordion/index.jsx ADDED
@@ -0,0 +1,93 @@
1
+ import React, { useState, useRef, useEffect } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import { Chevron } from '../../lib/Chevron.jsx';
4
+
5
+ const Accordion = (props) => {
6
+ const content = useRef(null);
7
+ const [setActive, setActiveState] = useState(props.isOpen ? 'active' : '');
8
+ const ariaPressed = setActive ? 'true' : 'false';
9
+ const getHeight = (node) => {
10
+ if (node) {
11
+ return `${node.scrollHeight}px`;
12
+ }
13
+ return 'auto';
14
+ };
15
+ const height = setActive ? getHeight(content.current) : '0px';
16
+ const rotate = setActive ? 'accordion-icon rotate' : 'accordion-icon';
17
+
18
+ function toggleAccordion() {
19
+ setActiveState(setActive === '' ? 'active' : '');
20
+ }
21
+
22
+ function openAccordion() {
23
+ setActiveState('active');
24
+ }
25
+
26
+ function closeAccordion() {
27
+ setActiveState('');
28
+ }
29
+
30
+ useEffect(() => {
31
+ if (props.isOpen) {
32
+ openAccordion();
33
+ } else {
34
+ closeAccordion();
35
+ }
36
+ }, [props.isOpen]);
37
+
38
+ return (
39
+ <div className="accordion-section" data-testid="accordion">
40
+ <button
41
+ className={`accordion ${setActive}`}
42
+ aria-label={props.title}
43
+ aria-pressed={ariaPressed}
44
+ aria-expanded={ariaPressed}
45
+ tabIndex="0"
46
+ onClick={toggleAccordion}
47
+ >
48
+ <div className="accordion-left-title">
49
+ <p className="accordion-title">{props.title}</p>
50
+ {props.subTitle && (
51
+ <p className="accordion-subtitle">{props.subTitle}</p>
52
+ )}
53
+ </div>
54
+ {props.centerItem && (
55
+ <div className="accordion-center">
56
+ <p>{props.centerItem}</p>
57
+ </div>
58
+ )}
59
+ {props.rightItem && (
60
+ <div className="accordion-right">
61
+ <p>{props.rightItem}</p>
62
+ </div>
63
+ )}
64
+ <div className="chevron-container">
65
+ <Chevron className={rotate} />
66
+ </div>
67
+ </button>
68
+ <div
69
+ ref={content}
70
+ style={{ maxHeight: height }}
71
+ className="accordion-content"
72
+ >
73
+ <div className="accordion-text dashed-border">{props.children}</div>
74
+ </div>
75
+ </div>
76
+ );
77
+ };
78
+
79
+ Accordion.propTypes = {
80
+ title: PropTypes.string.isRequired,
81
+ subTitle: PropTypes.string,
82
+ children: PropTypes.any.isRequired,
83
+ centerItem: PropTypes.string,
84
+ rightItem: PropTypes.string,
85
+ isOpen: PropTypes.bool,
86
+ };
87
+
88
+ Accordion.defaultProps = {
89
+ title: '',
90
+ isOpen: false,
91
+ };
92
+
93
+ export default Accordion;
package/components/Alert/Alert.stories.js ADDED
@@ -0,0 +1,61 @@
1
+ import React from 'react';
2
+
3
+ import Alert from './index';
4
+
5
+ export default {
6
+ title: 'Alert',
7
+ component: Alert,
8
+ };
9
+
10
+ export const Default = () => (
11
+ <div className="qpp-u-padding--16">
12
+ <h1 className="h3">Information</h1>
13
+ <Alert
14
+ title="Information Alert"
15
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida."
16
+ />
17
+ <h2 className="h3">Warning</h2>
18
+ <Alert
19
+ variant="warning"
20
+ title={{ headingLevel: 'h3', text: 'Warning Alert' }}
21
+ >
22
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet
23
+ consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida.
24
+ </Alert>
25
+ <h2 className="h3">Error</h2>
26
+ <Alert variant="error" title={{ headingLevel: 'h3', text: 'Error Alert' }}>
27
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet
28
+ consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida.
29
+ </Alert>
30
+ <h2 className="h3">Success</h2>
31
+ <Alert
32
+ variant="success"
33
+ title={{ headingLevel: 'h3', text: 'Success Alert' }}
34
+ >
35
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet
36
+ consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida.
37
+ </Alert>
38
+ </div>
39
+ );
40
+
41
+ export const WithoutHeading = () => (
42
+ <div className="qpp-u-padding--16">
43
+ <h1 className="h3">Information</h1>
44
+ <Alert description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida." />
45
+ <h1 className="h3">Warning</h1>
46
+ <Alert variant="warning">
47
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet
48
+ consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida.
49
+ </Alert>
50
+ <h1 className="h3">Error</h1>
51
+ <Alert variant="error">
52
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet
53
+ consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida.
54
+ </Alert>
55
+ <h1 className="h3">Success</h1>
56
+ <Alert variant="success">
57
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet
58
+ consequat ex ut vestibulum. Sed vel erat aliquet arcu eleifend gravida.
59
+ </Alert>
60
+ </div>
61
+ );
package/components/Alert/index.js ADDED
@@ -0,0 +1,53 @@
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+
4
+ const Alert = ({
5
+ title,
6
+ children,
7
+ description,
8
+ variant,
9
+ className,
10
+ ...rest
11
+ }) => {
12
+ const HeadingComponent = title?.headingLevel || 'h2';
13
+ return (
14
+ <div
15
+ className={`qpp-c-alert qpp-c-alert--${variant} ${className}`}
16
+ role="alert"
17
+ {...rest}
18
+ >
19
+ <div className="qpp-c-alert__body">
20
+ {title && (
21
+ <HeadingComponent className="h4 qpp-c-alert__heading">
22
+ {typeof title === 'object' ? title.text : title}
23
+ </HeadingComponent>
24
+ )}
25
+ {description && <p className="qpp-c-alert__text">{description}</p>}
26
+ {children}
27
+ </div>
28
+ </div>
29
+ );
30
+ };
31
+
32
+ Alert.propTypes = {
33
+ children: PropTypes.node,
34
+ className: PropTypes.string,
35
+ description: PropTypes.string,
36
+ title: PropTypes.oneOfType([
37
+ PropTypes.string,
38
+ PropTypes.shape({
39
+ text: PropTypes.string,
40
+ headingLevel: PropTypes.string,
41
+ }),
42
+ ]),
43
+ variant: PropTypes.oneOf(['info', 'warning', 'success', 'error']),
44
+ };
45
+ Alert.defaultProps = {
46
+ children: null,
47
+ className: '',
48
+ description: null,
49
+ title: null,
50
+ variant: 'info',
51
+ };
52
+
53
+ export default Alert;
package/components/Breadcrumb/Breadcrumb.md ADDED
@@ -0,0 +1,28 @@
1
+ # Breadcrumb Component
2
+
3
+ The Breadcrumb component is a secondary navigation scheme that reveals the user's location.
4
+
5
+ ### Props
6
+
7
+ | Property name | Type | Required | Default Value | Description |
8
+ | --------------------- | ---------- | -------- | ------------- | ------------------------------------------ |
9
+ | `breadcrumbClass` | `String` | `false` | '' | class to append to Breadcrumb nav element |
10
+ | `crumbs` | `Array` | `true` | | array of breadcrumbs |
11
+ | `dark` | `Boolean` | `false` | `false` | Use dark mode theme |
12
+ | `RouterLink` | `Function` | `false` | `null` | Link component to use instead of `<a>` |
13
+ | `routerExcludedLinks` | `Array` | `false` | `[]` | Array of paths to exclude from using Link |
14
+
15
+ ### Crumbs
16
+
17
+ Each crumb can be a string or an object with the following properties.
18
+
19
+ | Property name | Type | Required | Description |
20
+ | ------------- | -------- | -------- | -------------------------- |
21
+ | `url` | `String` | `true` | url |
22
+ | `title` | `String` | `true` | Menu item string displayed |
23
+ | `category` | `String` | `true` | Data tracking category |
24
+ | `label` | `String` | `true` | Data tracking label |
25
+
26
+ ### RouterLink
27
+
28
+ The `RouterLink` is only used by the Frontend to enable using push state for navigation. The `routerExcludedLinks` provides a way to opt certain links out of using the RouterLink.
package/components/Breadcrumb/index.js ADDED
@@ -0,0 +1,83 @@
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+
4
+ const Breadcrumb = ({
5
+ breadcrumbClass,
6
+ crumbs,
7
+ dark,
8
+ RouterLink,
9
+ routerExcludedLinks,
10
+ }) => {
11
+ return (
12
+ <nav
13
+ className={`qpp-c-breadcrumbs ${
14
+ !dark ? 'qpp-c-breadcrumbs--light' : ''
15
+ } ${breadcrumbClass}`}
16
+ aria-label="Breadcrumbs"
17
+ >
18
+ <ol className="qpp-c-breadcrumbs__list">
19
+ {crumbs.map((crumb, i) => {
20
+ if (crumb.url) {
21
+ if (RouterLink && !routerExcludedLinks.includes(crumb.url)) {
22
+ return (
23
+ <li className="qpp-c-breadcrumbs__list-item" key={crumb.title}>
24
+ <RouterLink
25
+ className="qpp-c-breadcrumbs__link"
26
+ to={crumb.url}
27
+ data-track-category={crumb.category}
28
+ data-track-action="Click"
29
+ data-track-label={crumb.label}
30
+ >
31
+ <span>{crumb.title}</span>
32
+ </RouterLink>
33
+ </li>
34
+ );
35
+ }
36
+ return (
37
+ <li className="qpp-c-breadcrumbs__list-item" key={crumb.title}>
38
+ <a
39
+ className="qpp-c-breadcrumbs__link"
40
+ href={crumb.url}
41
+ data-track-category={crumb.category}
42
+ data-track-action="Click"
43
+ data-track-label={crumb.label}
44
+ >
45
+ <span>{crumb.title}</span>
46
+ </a>
47
+ </li>
48
+ );
49
+ } else {
50
+ return (
51
+ <li
52
+ key={crumb}
53
+ className={`${
54
+ i === crumbs.length - 1 ? 'sr-only' : ''
55
+ } qpp-c-breadcrumbs__list-itemqpp-c-breadcrumbs__list-item--current`}
56
+ aria-current="page"
57
+ >
58
+ <span>{crumb}</span>
59
+ </li>
60
+ );
61
+ }
62
+ })}
63
+ </ol>
64
+ </nav>
65
+ );
66
+ };
67
+
68
+ Breadcrumb.propTypes = {
69
+ breadcrumbClass: PropTypes.string,
70
+ crumbs: PropTypes.array.isRequired,
71
+ dark: PropTypes.bool,
72
+ RouterLink: PropTypes.func,
73
+ routerExcludedLinks: PropTypes.array,
74
+ };
75
+
76
+ Breadcrumb.defaultProps = {
77
+ breadcrumbClass: '',
78
+ dark: false,
79
+ RouterLink: null,
80
+ routerExcludedLinks: [],
81
+ };
82
+
83
+ export default Breadcrumb;
package/components/Button/index.js ADDED
@@ -0,0 +1,90 @@
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+
4
+ const VARIANTS = ['secondary', 'outline', 'danger', 'white'];
5
+ const SIZES = ['big'];
6
+
7
+ const Button = ({
8
+ children,
9
+ className,
10
+ href,
11
+ loading,
12
+ onClick,
13
+ size,
14
+ variant,
15
+ type,
16
+ ...rest
17
+ }) => {
18
+ let btnClass = 'qpp-c-button';
19
+
20
+ if (VARIANTS.includes(variant)) {
21
+ btnClass = btnClass.concat(' ', `qpp-c-button--${variant}`);
22
+ }
23
+ if (SIZES.includes(size)) {
24
+ btnClass = btnClass.concat(' ', `qpp-c-button--${size}`);
25
+ }
26
+ if (className) {
27
+ btnClass = btnClass.concat(' ', className);
28
+ }
29
+
30
+ if (href) {
31
+ return (
32
+ <a
33
+ href={href}
34
+ data-testid="ds-btn"
35
+ className={btnClass || ''}
36
+ onClick={onClick}
37
+ >
38
+ {children}
39
+ </a>
40
+ );
41
+ }
42
+ return (
43
+ <button
44
+ data-testid="ds-btn"
45
+ className={btnClass || ''}
46
+ onClick={onClick}
47
+ disabled={loading}
48
+ type={type}
49
+ {...rest}
50
+ >
51
+ {children}
52
+ </button>
53
+ );
54
+ };
55
+
56
+ Button.propTypes = {
57
+ children: PropTypes.node,
58
+ className: PropTypes.string,
59
+ href: PropTypes.string,
60
+ loading: PropTypes.bool,
61
+ onClick: PropTypes.func,
62
+ size: PropTypes.oneOf(SIZES),
63
+ type: PropTypes.string,
64
+ variant: PropTypes.oneOf(VARIANTS),
65
+ };
66
+
67
+ Button.defaultProps = {
68
+ children: false,
69
+ className: '',
70
+ href: '',
71
+ loading: false,
72
+ onClick: () => null,
73
+ size: null,
74
+ type: 'button',
75
+ variant: null,
76
+ };
77
+
78
+ export const TextButton = ({ className = '', ...props }) => (
79
+ <Button className={`qpp-c-button--text ${className}`} {...props} />
80
+ );
81
+
82
+ TextButton.propTypes = {
83
+ className: PropTypes.string,
84
+ };
85
+
86
+ TextButton.defaultProps = {
87
+ className: '',
88
+ };
89
+
90
+ export default Button;