qpp-style 1.2.0 → 1.2.1-bv.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (379) hide show
  1. package/.babelrc +10 -0
  2. package/.editorconfig +1 -1
  3. package/.eslintignore +5 -0
  4. package/.eslintrc.js +32 -0
  5. package/.husky/pre-commit +5 -0
  6. package/.prettierrc +1 -0
  7. package/README.md +53 -50
  8. package/components/Accordion/index.jsx +97 -0
  9. package/components/Alert/index.js +53 -0
  10. package/components/Breadcrumb/Breadcrumb.md +28 -0
  11. package/components/Breadcrumb/index.js +83 -0
  12. package/components/Button/index.js +90 -0
  13. package/components/Details/DetailsIcons.js +50 -0
  14. package/components/Details/index.js +53 -0
  15. package/components/Dropdown/index.js +85 -0
  16. package/components/DropdownButton/Menu.js +25 -0
  17. package/components/DropdownButton/MenuButton.js +41 -0
  18. package/components/DropdownButton/MenuItem.js +25 -0
  19. package/components/DropdownButton/MenuItemLink.js +27 -0
  20. package/components/Error/Collapsible.jsx +88 -0
  21. package/components/Error/ErrorUI.jsx +31 -0
  22. package/components/Error/error.js +26 -0
  23. package/components/FlashNotification/FlashNotificationUI.jsx +91 -0
  24. package/components/FlashNotification/index.js +30 -0
  25. package/components/Footer/FooterUI.jsx +211 -0
  26. package/components/Footer/SocialLinks.jsx +60 -0
  27. package/components/Footer/Subscribe.jsx +34 -0
  28. package/components/Footer/footer.js +20 -0
  29. package/components/GovBanner/index.js +117 -0
  30. package/components/Header/Header.md +111 -0
  31. package/components/Header/HeaderAccountMenu.jsx +94 -0
  32. package/components/Header/HeaderCancel.jsx +16 -0
  33. package/components/Header/HeaderContainer.jsx +87 -0
  34. package/components/Header/HeaderLogo.jsx +62 -0
  35. package/components/Header/HeaderMenuButton.js +50 -0
  36. package/components/Header/HeaderMenuItem.jsx +239 -0
  37. package/components/Header/HeaderMenuLink.js +56 -0
  38. package/components/Header/HeaderMenuSignOutButton.js +62 -0
  39. package/components/Header/HeaderMobileButton.js +37 -0
  40. package/components/Header/HeaderUI.jsx +171 -0
  41. package/components/Header/HelpIcon.jsx +32 -0
  42. package/components/Header/ImpersonatorBanner.jsx +87 -0
  43. package/components/Header/NavigationButtonIcon.jsx +27 -0
  44. package/components/Header/default-content.json +280 -0
  45. package/components/Header/header.js +40 -0
  46. package/components/Header/hooks.js +66 -0
  47. package/components/Header/utag-helpers.js +9 -0
  48. package/components/HeaderSearchBar/index.jsx +80 -0
  49. package/components/Infotip/Infotip.jsx +71 -0
  50. package/components/Infotip/InfotipContent.jsx +48 -0
  51. package/components/Infotip/InfotipIcon.jsx +41 -0
  52. package/components/Infotip/index.js +3 -0
  53. package/components/Link/index.js +61 -0
  54. package/components/Modal/LegacyModal.jsx +72 -0
  55. package/components/Modal/Modal.jsx +140 -0
  56. package/components/Modal/index.jsx +22 -0
  57. package/components/NotificationBanner/CollapsedView.js +39 -0
  58. package/components/NotificationBanner/ExpandedView.js +45 -0
  59. package/components/NotificationBanner/index.js +221 -0
  60. package/components/SanitizedContent/index.jsx +223 -0
  61. package/components/Search/index.js +98 -0
  62. package/components/Session/Session.jsx +89 -0
  63. package/components/Session/SessionDialogWrapped.jsx +12 -0
  64. package/components/Session/index.jsx +3 -0
  65. package/components/SideNav/AnimationGroup/AnimationGroup.jsx +27 -0
  66. package/components/SideNav/Content/LevelOneContent.jsx +59 -0
  67. package/components/SideNav/Content/SelectRole/index.js +70 -0
  68. package/components/SideNav/Content/SelectRole/utils.js +142 -0
  69. package/components/SideNav/Content/index.js +3 -0
  70. package/components/SideNav/Details/IndividualDetails.jsx +18 -0
  71. package/components/SideNav/Details/PracticeDetails.jsx +51 -0
  72. package/components/SideNav/Details/index.js +4 -0
  73. package/components/SideNav/Links/CmsSwitchLink.jsx +41 -0
  74. package/components/SideNav/Links/NavItemInline.jsx +54 -0
  75. package/components/SideNav/Links/NavLinkContainer.jsx +38 -0
  76. package/components/SideNav/Links/NavLinkDrawer.jsx +296 -0
  77. package/components/SideNav/Links/NavLinkInline.jsx +111 -0
  78. package/components/SideNav/Links/NavLinkToggle.jsx +34 -0
  79. package/components/SideNav/Links/index.js +13 -0
  80. package/components/SideNav/SideNav.md +50 -0
  81. package/components/SideNav/UI/SideNavUI.jsx +323 -0
  82. package/components/SideNav/UI/default-markup.js +4 -0
  83. package/components/SideNav/UI/index.js +3 -0
  84. package/{js/main.js → components/SideNav/UI/utils.js} +0 -0
  85. package/components/SideNav/helpers.js +48 -0
  86. package/components/SideNav/index.js +29 -0
  87. package/components/Tabs/TabPanel.js +5 -0
  88. package/components/Tabs/Tabs.js +73 -0
  89. package/components/TextInput/index.js +137 -0
  90. package/components/hooks/useGetConfig.js +74 -0
  91. package/components/index.js +122 -0
  92. package/dist/browser.js +3 -0
  93. package/dist/browser.js.LICENSE.txt +31 -0
  94. package/dist/browser.js.map +1 -0
  95. package/dist/index.js +3 -0
  96. package/dist/index.js.LICENSE.txt +31 -0
  97. package/dist/index.js.map +1 -0
  98. package/dist/react/index.js +3 -0
  99. package/dist/react/index.js.LICENSE.txt +54 -0
  100. package/dist/react/index.js.map +1 -0
  101. package/fonts/FontAwesome.otf +0 -0
  102. package/fonts/OFL.txt +0 -0
  103. package/fonts/PublicSans-Black.ttf +0 -0
  104. package/fonts/PublicSans-BlackItalic.ttf +0 -0
  105. package/fonts/PublicSans-Bold.ttf +0 -0
  106. package/fonts/PublicSans-BoldItalic.ttf +0 -0
  107. package/fonts/PublicSans-ExtraBold.ttf +0 -0
  108. package/fonts/PublicSans-ExtraBoldItalic.ttf +0 -0
  109. package/fonts/PublicSans-ExtraLight.ttf +0 -0
  110. package/fonts/PublicSans-ExtraLightItalic.ttf +0 -0
  111. package/fonts/PublicSans-Italic.ttf +0 -0
  112. package/fonts/PublicSans-Light.ttf +0 -0
  113. package/fonts/PublicSans-LightItalic.ttf +0 -0
  114. package/fonts/PublicSans-Medium.ttf +0 -0
  115. package/fonts/PublicSans-MediumItalic.ttf +0 -0
  116. package/fonts/PublicSans-Regular.ttf +0 -0
  117. package/fonts/PublicSans-SemiBold.ttf +0 -0
  118. package/fonts/PublicSans-SemiBoldItalic.ttf +0 -0
  119. package/fonts/PublicSans-Thin.ttf +0 -0
  120. package/fonts/PublicSans-ThinItalic.ttf +0 -0
  121. package/fonts/Rubik-Black.ttf +0 -0
  122. package/fonts/Rubik-BlackItalic.ttf +0 -0
  123. package/fonts/Rubik-Bold.ttf +0 -0
  124. package/fonts/Rubik-BoldItalic.ttf +0 -0
  125. package/fonts/Rubik-Italic.ttf +0 -0
  126. package/fonts/Rubik-Light.ttf +0 -0
  127. package/fonts/Rubik-LightItalic.ttf +0 -0
  128. package/fonts/Rubik-Medium.ttf +0 -0
  129. package/fonts/Rubik-MediumItalic.ttf +0 -0
  130. package/fonts/Rubik-Regular.ttf +0 -0
  131. package/fonts/fontawesome-webfont.eot +0 -0
  132. package/fonts/fontawesome-webfont.svg +0 -0
  133. package/fonts/fontawesome-webfont.ttf +0 -0
  134. package/fonts/fontawesome-webfont.woff +0 -0
  135. package/fonts/fontawesome-webfont.woff2 +0 -0
  136. package/images/favicon/android-chrome-192x192.png +0 -0
  137. package/images/favicon/android-chrome-256x256.png +0 -0
  138. package/images/favicon/apple-touch-icon.png +0 -0
  139. package/{img → images}/favicon/browserconfig.xml +2 -2
  140. package/images/favicon/favicon-16x16.png +0 -0
  141. package/images/favicon/favicon-32x32.png +0 -0
  142. package/images/favicon/favicon.ico +0 -0
  143. package/{img → images}/favicon/manifest.json +4 -4
  144. package/images/favicon/mstile-150x150.png +0 -0
  145. package/images/favicon/safari-pinned-tab.svg +32 -0
  146. package/images/hhs-logo-black.svg +10 -0
  147. package/images/hhs-logo-white.svg +10 -0
  148. package/images/icon-dot-gov.svg +1 -0
  149. package/images/icon-https.svg +1 -0
  150. package/images/icons/close-x.svg +6 -0
  151. package/images/icons/help-headset.svg +21 -0
  152. package/images/icons/svg/arrow-down.svg +3 -0
  153. package/images/icons/svg/arrow-download.svg +1 -0
  154. package/images/icons/svg/arrow-right.svg +1 -0
  155. package/images/icons/svg/arrow-up.svg +3 -0
  156. package/images/icons/svg/block.svg +5 -0
  157. package/images/icons/svg/calendar.svg +1 -0
  158. package/images/icons/svg/check-circle.svg +5 -0
  159. package/images/icons/svg/checkmark.svg +7 -0
  160. package/images/icons/svg/chevron-down.svg +11 -0
  161. package/images/icons/svg/chevron-left.svg +12 -0
  162. package/images/icons/svg/chevron-right.svg +12 -0
  163. package/images/icons/svg/chevron-up.svg +12 -0
  164. package/images/icons/svg/clipboard.svg +1 -0
  165. package/images/icons/svg/close.svg +1 -0
  166. package/images/icons/svg/divide.svg +13 -0
  167. package/images/icons/svg/doctors-and-clinicians-preview.svg +10 -0
  168. package/images/icons/svg/download.svg +1 -0
  169. package/images/icons/svg/dropdown-arrow.svg +1 -0
  170. package/images/icons/svg/equals.svg +13 -0
  171. package/images/icons/svg/exclamation.svg +10 -0
  172. package/images/icons/svg/external.svg +1 -0
  173. package/images/icons/svg/file-download.svg +1 -0
  174. package/images/icons/svg/file-upload.svg +1 -0
  175. package/images/icons/svg/info.svg +17 -0
  176. package/images/icons/svg/manage-user-access.svg +8 -0
  177. package/images/icons/svg/multiply.svg +12 -0
  178. package/images/icons/svg/performance-feedback.svg +1 -0
  179. package/images/icons/svg/plus.svg +12 -0
  180. package/images/icons/svg/preview.svg +15 -0
  181. package/images/icons/svg/print.svg +1 -0
  182. package/images/icons/svg/registration.svg +8 -0
  183. package/images/icons/svg/reporting.svg +15 -0
  184. package/images/icons/svg/save-disk.svg +5 -0
  185. package/images/icons/svg/search.svg +1 -0
  186. package/images/icons/svg/subtract.svg +15 -0
  187. package/images/icons/svg/targeted-review.svg +15 -0
  188. package/images/icons/svg/tooltip-question.svg +1 -0
  189. package/images/icons/svg/trash.svg +1 -0
  190. package/images/icons/svg/upload.svg +1 -0
  191. package/images/qpp_logo_reversed.png +0 -0
  192. package/{img/logo.png → images/qpp_logo_rgb_color.png} +0 -0
  193. package/images/us_flag_small.png +0 -0
  194. package/index.js +31 -0
  195. package/jest/mediaFileTransformer.js +9 -0
  196. package/jest.config.js +188 -0
  197. package/lib/Chevron.jsx +32 -0
  198. package/lib/SvgComponents.jsx +705 -0
  199. package/lib/svg-definitions.svg +125 -0
  200. package/package.json +70 -18
  201. package/session/index.js +5 -0
  202. package/session/logout.js +79 -0
  203. package/session/refresh.js +49 -0
  204. package/session/ttl.js +21 -0
  205. package/styles/_global.scss +84 -53
  206. package/styles/_main.scss +11 -3
  207. package/styles/_paths.scss +1 -1
  208. package/styles/_qpp-style.scss +10 -6
  209. package/styles/components/_accordion.scss +273 -149
  210. package/styles/components/_alerts.scss +9 -6
  211. package/styles/components/_autocomplete.scss +47 -0
  212. package/styles/components/_breadcrumbs.scss +52 -9
  213. package/styles/components/_buttons.scss +545 -277
  214. package/styles/components/_error-page.scss +56 -0
  215. package/styles/components/_flash-notification.scss +98 -0
  216. package/styles/components/_fonts.scss +12 -13
  217. package/styles/components/_forms.scss +145 -67
  218. package/styles/components/_grid.scss +35 -3
  219. package/styles/components/_info-modal.scss +139 -0
  220. package/styles/components/_links.scss +4 -3
  221. package/styles/components/_modals.scss +10 -9
  222. package/styles/components/_notification-banner.scss +166 -0
  223. package/styles/components/_panels.scss +23 -21
  224. package/styles/components/_pie-chart.scss +3 -3
  225. package/styles/components/_score-chart.scss +164 -0
  226. package/styles/components/_spinner.scss +7 -0
  227. package/styles/components/_tables.scss +96 -72
  228. package/styles/components/_tabs.scss +69 -0
  229. package/styles/components/_text.scss +114 -58
  230. package/styles/components/_toggles.scss +0 -0
  231. package/styles/components/_tooltip.scss +23 -0
  232. package/styles/components/_variables.scss +91 -41
  233. package/styles/components/_wells.scss +39 -29
  234. package/styles/qppds/README.md +0 -0
  235. package/styles/qppds/base/_backgrounds.scss +7 -0
  236. package/styles/qppds/base/_fonts.scss +50 -0
  237. package/styles/qppds/base/_icon.scss +31 -0
  238. package/styles/qppds/base/_layout.scss +5 -0
  239. package/styles/qppds/base/_typography.scss +97 -0
  240. package/styles/qppds/base/index.scss +8 -0
  241. package/styles/qppds/components/_alert.scss +101 -0
  242. package/styles/qppds/components/_breadcrumbs.scss +93 -0
  243. package/styles/qppds/components/_button.scss +306 -0
  244. package/styles/qppds/components/_card.scss +176 -0
  245. package/styles/qppds/components/_checkbox.scss +201 -0
  246. package/styles/qppds/components/_circular-loader.scss +47 -0
  247. package/styles/qppds/components/_details.scss +91 -0
  248. package/styles/qppds/components/_dropdown-menu.scss +126 -0
  249. package/styles/qppds/components/_dropdown.scss +56 -0
  250. package/styles/qppds/components/_footer.scss +606 -0
  251. package/styles/qppds/components/_gov-banner.scss +342 -0
  252. package/styles/qppds/components/_header.scss +935 -0
  253. package/styles/qppds/components/_link.scss +54 -0
  254. package/styles/qppds/components/_modal.scss +153 -0
  255. package/styles/qppds/components/_page-header.scss +105 -0
  256. package/styles/qppds/components/_pagination.scss +230 -0
  257. package/styles/qppds/components/_process-list.scss +106 -0
  258. package/styles/qppds/components/_radio-button.scss +185 -0
  259. package/styles/qppds/components/_search.scss +222 -0
  260. package/styles/qppds/components/_sidebar.scss +10 -0
  261. package/styles/qppds/components/_step-indicator.scss +193 -0
  262. package/styles/qppds/components/_table.scss +159 -0
  263. package/styles/qppds/components/_tabs.scss +199 -0
  264. package/styles/qppds/components/_text-input.scss +60 -0
  265. package/styles/qppds/components/index.scss +25 -0
  266. package/styles/qppds/components/sidebar/_animations.scss +38 -0
  267. package/styles/qppds/components/sidebar/_cms.scss +61 -0
  268. package/styles/qppds/components/sidebar/_details.scss +61 -0
  269. package/styles/qppds/components/sidebar/_links.scss +462 -0
  270. package/styles/qppds/components/sidebar/_select-role-dropdown.scss +21 -0
  271. package/styles/qppds/components/sidebar/_sidebar-animation.scss +91 -0
  272. package/styles/qppds/components/sidebar/_sidebar-tooltip.scss +33 -0
  273. package/styles/qppds/components/sidebar/_sidebar.scss +145 -0
  274. package/styles/qppds/components/sidebar/project-specific/_wi.scss +42 -0
  275. package/styles/qppds/index.scss +4 -0
  276. package/styles/qppds/settings/_functions.scss +6 -0
  277. package/styles/qppds/settings/_index.scss +3 -0
  278. package/styles/qppds/settings/mixins/_borders.scss +6 -0
  279. package/styles/qppds/settings/mixins/_focus.scss +30 -0
  280. package/styles/qppds/settings/mixins/_icons.scss +43 -0
  281. package/styles/qppds/settings/mixins/_index.scss +8 -0
  282. package/styles/qppds/settings/mixins/_layout.scss +74 -0
  283. package/styles/qppds/settings/mixins/_lists.scss +12 -0
  284. package/styles/qppds/settings/mixins/_table.scss +92 -0
  285. package/styles/qppds/settings/mixins/_type.scss +90 -0
  286. package/styles/qppds/settings/mixins/_visually-hidden.scss +30 -0
  287. package/styles/qppds/settings/variables/_color.scss +86 -0
  288. package/styles/qppds/settings/variables/_index.scss +4 -0
  289. package/styles/qppds/settings/variables/_layout.scss +69 -0
  290. package/styles/qppds/settings/variables/_type.scss +135 -0
  291. package/styles/qppds/settings/variables/_z-index.scss +8 -0
  292. package/styles/qppds/utilities/_background-color.scss +134 -0
  293. package/styles/qppds/utilities/_color.scss +40 -0
  294. package/styles/qppds/utilities/_display-visibility.scss +84 -0
  295. package/styles/qppds/utilities/_flexbox.scss +240 -0
  296. package/styles/qppds/utilities/_font-family.scss +10 -0
  297. package/styles/qppds/utilities/_font-size.scss +8 -0
  298. package/styles/qppds/utilities/_font-weight.scss +10 -0
  299. package/styles/qppds/utilities/_gap.scss +38 -0
  300. package/styles/qppds/utilities/_height.scss +81 -0
  301. package/styles/qppds/utilities/_list-style.scss +17 -0
  302. package/styles/qppds/utilities/_margin.scss +136 -0
  303. package/styles/qppds/utilities/_padding.scss +76 -0
  304. package/styles/qppds/utilities/_position.scss +24 -0
  305. package/styles/qppds/utilities/_text-align.scss +40 -0
  306. package/styles/qppds/utilities/_text-transform.scss +7 -0
  307. package/styles/qppds/utilities/_vertical-align.scss +72 -0
  308. package/styles/qppds/utilities/_width.scss +82 -0
  309. package/styles/qppds/utilities/index.scss +17 -0
  310. package/styles/qppds.scss +2 -0
  311. package/styles/third-party/_legacy-bootstrap.scss +19 -0
  312. package/styles/third-party/legacy-bootstrap/_buttons.scss +126 -0
  313. package/styles/third-party/legacy-bootstrap/_dropdowns.scss +211 -0
  314. package/styles/third-party/legacy-bootstrap/_forms.scss +510 -0
  315. package/styles/third-party/legacy-bootstrap/_grid.scss +73 -0
  316. package/styles/third-party/legacy-bootstrap/_mixins.scss +27 -0
  317. package/styles/third-party/legacy-bootstrap/_navbar.scss +644 -0
  318. package/styles/third-party/legacy-bootstrap/_navs.scss +193 -0
  319. package/styles/third-party/legacy-bootstrap/_normalize.scss +385 -0
  320. package/styles/third-party/legacy-bootstrap/_scaffolding.scss +116 -0
  321. package/styles/third-party/legacy-bootstrap/_variables.scss +858 -0
  322. package/styles/third-party/legacy-bootstrap/mixins/_buttons.scss +70 -0
  323. package/styles/third-party/legacy-bootstrap/mixins/_clearfix.scss +22 -0
  324. package/styles/third-party/legacy-bootstrap/mixins/_forms.scss +108 -0
  325. package/styles/third-party/legacy-bootstrap/mixins/_grid-framework.scss +86 -0
  326. package/styles/third-party/legacy-bootstrap/mixins/_grid.scss +112 -0
  327. package/styles/third-party/legacy-bootstrap/mixins/_labels.scss +12 -0
  328. package/styles/third-party/legacy-bootstrap/mixins/_nav-divider.scss +10 -0
  329. package/styles/third-party/legacy-bootstrap/mixins/_nav-vertical-align.scss +9 -0
  330. package/styles/third-party/legacy-bootstrap/mixins/_opacity.scss +7 -0
  331. package/styles/third-party/legacy-bootstrap/mixins/_panels.scss +30 -0
  332. package/styles/third-party/legacy-bootstrap/mixins/_reset-filter.scss +7 -0
  333. package/styles/third-party/legacy-bootstrap/mixins/_reset-text.scss +18 -0
  334. package/styles/third-party/legacy-bootstrap/mixins/_resize.scss +6 -0
  335. package/styles/third-party/legacy-bootstrap/mixins/_responsive-visibility.scss +25 -0
  336. package/styles/third-party/legacy-bootstrap/mixins/_size.scss +10 -0
  337. package/styles/third-party/legacy-bootstrap/mixins/_tab-focus.scss +9 -0
  338. package/styles/third-party/legacy-bootstrap/mixins/_table-row.scss +28 -0
  339. package/styles/third-party/legacy-bootstrap/mixins/_text-emphasis.scss +12 -0
  340. package/styles/third-party/legacy-bootstrap/mixins/_text-overflow.scss +8 -0
  341. package/styles/third-party/legacy-bootstrap/mixins/_vendor-prefixes.scss +182 -0
  342. package/styles/utility/_mixins.scss +28 -20
  343. package/styles/utility/_utilities.scss +12 -1
  344. package/svgo.config.js +14 -0
  345. package/test/components/Accordion.test.js +12 -0
  346. package/test/components/ErrorUI.test.js +33 -0
  347. package/test/components/FooterUI.test.js +59 -0
  348. package/test/components/HeaderUI.test.js +35 -0
  349. package/test/components/Infotip.test.js +77 -0
  350. package/test/components/SideNavUI.test.js +23 -0
  351. package/test/index.test.js +8 -0
  352. package/test/session/session.test.js +220 -0
  353. package/test-setup.js +1 -0
  354. package/webpack.config.js +137 -0
  355. package/webpack.config.react.js +75 -0
  356. package/.npmignore +0 -26
  357. package/Gemfile +0 -25
  358. package/_config.yml +0 -17
  359. package/_data/nav.yml +0 -11
  360. package/_includes/footer.html +0 -3
  361. package/_includes/header.html +0 -10
  362. package/_layouts/base.html +0 -44
  363. package/css/main.scss +0 -5
  364. package/img/favicon/android-chrome-192x192.png +0 -0
  365. package/img/favicon/android-chrome-512x512.png +0 -0
  366. package/img/favicon/apple-touch-icon.png +0 -0
  367. package/img/favicon/favicon-16x16.png +0 -0
  368. package/img/favicon/favicon-32x32.png +0 -0
  369. package/img/favicon/favicon.ico +0 -0
  370. package/img/favicon/mstile-150x150.png +0 -0
  371. package/img/favicon/safari-pinned-tab.svg +0 -41
  372. package/index.md +0 -285
  373. package/interface.md +0 -153
  374. package/npm-shrinkwrap.json +0 -1573
  375. package/styles/components/_tool-tips.scss +0 -6
  376. package/styles/guide/_layout.scss +0 -119
  377. package/styles/layout/_footer.scss +0 -93
  378. package/styles/layout/_header.scss +0 -336
  379. package/typography.md +0 -146
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 CHANGED
@@ -6,7 +6,7 @@ root = true
6
6
 
7
7
  [*]
8
8
  indent_style = space
9
- indent_size = 4
9
+ indent_size = 2
10
10
  end_of_line = lf
11
11
  charset = utf-8
12
12
  trim_trailing_whitespace = true
package/.eslintignore ADDED
@@ -0,0 +1,5 @@
1
+ _*
2
+ css
3
+ dist
4
+ node_modules
5
+ test
package/.eslintrc.js ADDED
@@ -0,0 +1,32 @@
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
+ "react/no-deprecated": [0],
28
+ },
29
+ settings: {
30
+ react: { version: "detect" },
31
+ },
32
+ };
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/.prettierrc ADDED
@@ -0,0 +1 @@
1
+ {}
package/README.md CHANGED
@@ -1,57 +1,60 @@
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
- ## Install and Use
9
- ### node/npm
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:
10
12
 
11
- The best way to install qpp-style is with the node package manager or [npm](https://www.npmjs.com/). If you haven't already cloned the `qpp-style` [repository](https://github.com/CMSgov/qpp-style), run the following command on a computer with node/npm installed to install qpp-style into your project.
13
+ ```bash
14
+ cd qpp-style/react
15
+ npm version --no-git-tag-version patch
12
16
  ```
13
- npm install --save-dev CMSgov/qpp-style
17
+
18
+ Example Commit Message:
19
+
20
+ > x.xx.x release
21
+
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
25
+
26
+ ## Generate an NPM token with Publish permissions
27
+
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}
14
35
  ```
15
- 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:
16
-
17
- 1. Build all assets that came with the module:
18
- ```sh
19
- $ pushd .
20
- $ cd ./node_modules/qpp-style
21
- $ npm install
22
- $ npm start
23
- ```
24
- 1. Copy assets to project directory:
25
- ```sh
26
- $ popd
27
- $ mkdir -p public
28
- $ cp -r ./node_modules/qpp-style/build/* public
29
- ```
30
- 1. Create webpage:
31
- ```sh
32
- $ touch public/index.html
33
- ```
34
- 1. Link to css in html:
35
- ```html
36
- <html lang="en">
37
- <head>
38
- <link href="/css/qpp-style.css" type="text/css" rel="stylesheet" />
39
- </head>
40
- <body>
41
- <h1>QPP Quality Payment Program</h1>
42
- </body>
43
- </html>
44
- ```
45
-
46
- Another way to use the style is by importing the sass into your project. This can be done in the following way:
47
-
48
- 1. Copy the fonts to `/fonts`:
49
- ```sh
50
- $ mkdir -p fonts
51
- $ cp -r ./node_modules/qpp-style/fonts/* fonts
52
- ```
53
-
54
- 1. Create a `.scss` file and adding this line:
55
- ```scss
56
- @import "../node_modules/qpp-style/styles/qpp_style";
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
57
43
  ```
44
+
45
+ 7. Once published successfully, merge into main.
46
+
47
+ The Side Nav contains multiple item array types: divider, container, linkBack, linkHome, practiceDetails, individualDetails, linkDrawer, custom, chart, and switchLink.
48
+
49
+ | Item Array Type | Description |
50
+ |-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
51
+ | divider | <hr> element that is located above and below the practice container. |
52
+ | container | gets Dynamic Content of multiple items and contains the linkDrawer item. Level One and Level Two content are located in this container. |
53
+ | linkBack | <button> that links the user back to a URL. This uses a chevron Left icon. |
54
+ | linkHome | <a> tag element which sends the user back to the “Account Home” page /user/submissions. This uses the home icon SVG and is located at the top of the side nav. |
55
+ | practiceDetails | <div> element with the class name practice-container. Inside this container is the <h2> element which includes the Practice Name and the <p> element which is the Practice Tin. The Practice Tin shows either the CPC+ ID, PCF ID, APM Entity ID, VG ID, or Practice Tin. |
56
+ | individualDetails | <div> element with the class name “individual-container”. This parent element contains two other elements which are the <h3> Individual Name and the <p> Individual NPI. |
57
+ | linkDrawer | This is the most complex item type. This item displays the Level One and Level Two <button> elements which contain navigation links depending on each page as well as specific SVG icons. Depending on the page there can be multiple links to the user can access quickly using the side nav. |
58
+ | custom | This option is for sanitized HTML content. This custom HTML will be cleaned of any potentially harmful elements that could compromise the security of the web app. |
59
+ | chart | This option uses the ScoreChart component to display Chart Data on the Side Nav. This data includes categories from Quality Measures, Advancing Care Info, Promoting Interoperability, Improvement Activities, and Cost. |
60
+ | switchLink | This is an implementation of the “Switch Practice” button for the Side Nav. Clicking 'Switch Practice' will take the user back to the TIN list for the part of the application they are viewing. |
package/components/Accordion/index.jsx ADDED
@@ -0,0 +1,97 @@
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
+ setActive && props.isSticky ? "sticky" : ""
43
+ }`}
44
+ aria-label={props.title}
45
+ aria-pressed={ariaPressed}
46
+ aria-expanded={ariaPressed}
47
+ tabIndex="0"
48
+ onClick={toggleAccordion}
49
+ >
50
+ <div className="accordion-left-title">
51
+ <p className="accordion-title">{props.title}</p>
52
+ {props.subTitle && (
53
+ <p className="accordion-subtitle">{props.subTitle}</p>
54
+ )}
55
+ </div>
56
+ {props.centerItem && (
57
+ <div className="accordion-center">
58
+ <p>{props.centerItem}</p>
59
+ </div>
60
+ )}
61
+ {props.rightItem && (
62
+ <div className="accordion-right">
63
+ <p>{props.rightItem}</p>
64
+ </div>
65
+ )}
66
+ <div className="chevron-container">
67
+ <Chevron className={rotate} />
68
+ </div>
69
+ </button>
70
+ <div
71
+ ref={content}
72
+ style={{ maxHeight: height }}
73
+ className="accordion-content"
74
+ >
75
+ <div className="accordion-text dashed-border">{props.children}</div>
76
+ </div>
77
+ </div>
78
+ );
79
+ };
80
+
81
+ Accordion.propTypes = {
82
+ title: PropTypes.string.isRequired,
83
+ subTitle: PropTypes.string,
84
+ children: PropTypes.any.isRequired,
85
+ centerItem: PropTypes.string,
86
+ rightItem: PropTypes.string,
87
+ isOpen: PropTypes.bool,
88
+ isSticky: PropTypes.bool,
89
+ };
90
+
91
+ Accordion.defaultProps = {
92
+ title: "",
93
+ isOpen: false,
94
+ isSticky: false,
95
+ };
96
+
97
+ export default Accordion;
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;
package/components/Details/DetailsIcons.js ADDED
@@ -0,0 +1,50 @@
1
+ import React from "react";
2
+ import PropTypes from "prop-types";
3
+
4
+ export const Add = ({ iconText }) => (
5
+ <>
6
+ <svg
7
+ className="qpp-c-details--icon-closed qpp-icon-mat qpp-icon-inline--md"
8
+ aria-hidden="true"
9
+ xmlns="http://www.w3.org/2000/svg"
10
+ viewBox="0 0 24 24"
11
+ role="img"
12
+ focusable="false"
13
+ >
14
+ <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
15
+ </svg>{" "}
16
+ {iconText}
17
+ </>
18
+ );
19
+
20
+ Add.propTypes = {
21
+ iconText: PropTypes.string,
22
+ };
23
+
24
+ Add.defaultProps = {
25
+ iconText: null,
26
+ };
27
+
28
+ export const Remove = ({ iconText }) => (
29
+ <>
30
+ <svg
31
+ className="qpp-c-details--icon-open qpp-icon-mat qpp-icon-inline--md"
32
+ aria-hidden="true"
33
+ xmlns="http://www.w3.org/2000/svg"
34
+ viewBox="0 0 24 24"
35
+ role="img"
36
+ focusable="false"
37
+ >
38
+ <path d="M19 13H5v-2h14v2z" />
39
+ </svg>
40
+ {iconText}
41
+ </>
42
+ );
43
+
44
+ Remove.propTypes = {
45
+ iconText: PropTypes.string,
46
+ };
47
+
48
+ Remove.defaultProps = {
49
+ iconText: null,
50
+ };
package/components/Details/index.js ADDED
@@ -0,0 +1,53 @@
1
+ import React from "react";
2
+ import PropTypes from "prop-types";
3
+ import { Add, Remove } from "./DetailsIcons";
4
+
5
+ const Details = ({ children, title, variant, className, ...rest }) => {
6
+ if (variant === "header") {
7
+ return (
8
+ <details className="qpp-c-details qpp-c-details--header">
9
+ <summary>
10
+ {title}
11
+ <span className="qpp-c-details--icon-closed" aria-hidden="true">
12
+ <Add iconText="View" />
13
+ </span>
14
+ <span className="qpp-c-details--icon-open" aria-hidden="true">
15
+ <Remove iconText="Hide" />
16
+ </span>
17
+ </summary>
18
+ {children}
19
+ </details>
20
+ );
21
+ }
22
+
23
+ return (
24
+ <details className={`qpp-c-details ${className}`} {...rest}>
25
+ <summary
26
+ className={
27
+ variant === "text-button" ? "qpp-c-button qpp-c-button--text" : ""
28
+ }
29
+ >
30
+ <Add />
31
+ <Remove />
32
+ {title}
33
+ </summary>
34
+ {children}
35
+ </details>
36
+ );
37
+ };
38
+
39
+ Details.propTypes = {
40
+ children: PropTypes.node,
41
+ title: PropTypes.node,
42
+ variant: PropTypes.oneOf(["header", "text-button"]),
43
+ className: PropTypes.string,
44
+ };
45
+
46
+ Details.defaultProps = {
47
+ children: false,
48
+ title: null,
49
+ variant: null,
50
+ className: "",
51
+ };
52
+
53
+ export default Details;