qpp-style 1.14.2 → 1.15.0-rm.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 (419) hide show
  1. package/.babelrc +10 -0
  2. package/.editorconfig +22 -0
  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 +50 -55
  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 +76 -0
  34. package/components/Header/HeaderLogo.jsx +60 -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 +168 -0
  41. package/components/Header/HelpIcon.jsx +32 -0
  42. package/components/Header/ImpersonatorBanner.jsx +83 -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/Infotip/Infotip.jsx +71 -0
  49. package/components/Infotip/InfotipContent.jsx +46 -0
  50. package/components/Infotip/InfotipIcon.jsx +41 -0
  51. package/components/Infotip/index.js +3 -0
  52. package/components/Link/index.js +61 -0
  53. package/components/Modal/LegacyModal.jsx +72 -0
  54. package/components/Modal/Modal.jsx +140 -0
  55. package/components/Modal/index.jsx +22 -0
  56. package/components/NotificationBanner/CollapsedView.js +39 -0
  57. package/components/NotificationBanner/ExpandedView.js +45 -0
  58. package/components/NotificationBanner/index.js +221 -0
  59. package/components/SanitizedContent/index.jsx +223 -0
  60. package/components/Search/index.js +98 -0
  61. package/components/Session/Session.jsx +99 -0
  62. package/components/Session/SessionDialogWrapped.jsx +12 -0
  63. package/components/Session/index.jsx +3 -0
  64. package/components/SideNav/AnimationGroup/AnimationGroup.jsx +27 -0
  65. package/components/SideNav/Content/LevelOneContent.jsx +49 -0
  66. package/components/SideNav/Content/SelectRole/index.js +78 -0
  67. package/components/SideNav/Content/SelectRole/utils.js +149 -0
  68. package/components/SideNav/Content/index.js +3 -0
  69. package/components/SideNav/Details/IndividualDetails.jsx +18 -0
  70. package/components/SideNav/Details/PracticeDetails.jsx +51 -0
  71. package/components/SideNav/Details/index.js +4 -0
  72. package/components/SideNav/Links/CmsSwitchLink.jsx +41 -0
  73. package/components/SideNav/Links/NavItemInline.jsx +54 -0
  74. package/components/SideNav/Links/NavLinkContainer.jsx +38 -0
  75. package/components/SideNav/Links/NavLinkDrawer.jsx +295 -0
  76. package/components/SideNav/Links/NavLinkInline.jsx +110 -0
  77. package/components/SideNav/Links/NavLinkToggle.jsx +34 -0
  78. package/components/SideNav/Links/index.js +13 -0
  79. package/components/SideNav/SideNav.md +50 -0
  80. package/components/SideNav/UI/SideNavUI.jsx +323 -0
  81. package/components/SideNav/UI/default-markup.js +4 -0
  82. package/components/SideNav/UI/index.js +3 -0
  83. package/components/SideNav/UI/utils.js +0 -0
  84. package/components/SideNav/helpers.js +399 -0
  85. package/components/SideNav/index.js +29 -0
  86. package/components/Tabs/TabPanel.js +5 -0
  87. package/components/Tabs/Tabs.js +73 -0
  88. package/components/TextInput/index.js +137 -0
  89. package/components/hooks/useGetConfig.js +74 -0
  90. package/components/index.js +122 -0
  91. package/dist/browser.js +3 -53
  92. package/dist/browser.js.LICENSE.txt +31 -0
  93. package/dist/browser.js.map +1 -0
  94. package/dist/index.js +3 -53
  95. package/dist/index.js.LICENSE.txt +31 -0
  96. package/dist/index.js.map +1 -0
  97. package/dist/react/index.js +3 -0
  98. package/dist/react/index.js.LICENSE.txt +54 -0
  99. package/dist/react/index.js.map +1 -0
  100. package/fonts/PublicSans-Black.ttf +0 -0
  101. package/fonts/PublicSans-BlackItalic.ttf +0 -0
  102. package/fonts/PublicSans-Bold.ttf +0 -0
  103. package/fonts/PublicSans-BoldItalic.ttf +0 -0
  104. package/fonts/PublicSans-ExtraBold.ttf +0 -0
  105. package/fonts/PublicSans-ExtraBoldItalic.ttf +0 -0
  106. package/fonts/PublicSans-ExtraLight.ttf +0 -0
  107. package/fonts/PublicSans-ExtraLightItalic.ttf +0 -0
  108. package/fonts/PublicSans-Italic.ttf +0 -0
  109. package/fonts/PublicSans-Light.ttf +0 -0
  110. package/fonts/PublicSans-LightItalic.ttf +0 -0
  111. package/fonts/PublicSans-Medium.ttf +0 -0
  112. package/fonts/PublicSans-MediumItalic.ttf +0 -0
  113. package/fonts/PublicSans-Regular.ttf +0 -0
  114. package/fonts/PublicSans-SemiBold.ttf +0 -0
  115. package/fonts/PublicSans-SemiBoldItalic.ttf +0 -0
  116. package/fonts/PublicSans-Thin.ttf +0 -0
  117. package/fonts/PublicSans-ThinItalic.ttf +0 -0
  118. package/images/favicon/manifest.json +3 -3
  119. package/images/hhs-logo-black.svg +10 -0
  120. package/images/icon-dot-gov.svg +1 -0
  121. package/images/icon-https.svg +1 -0
  122. package/images/icons/close-x.svg +6 -0
  123. package/images/icons/svg/arrow-down.svg +3 -0
  124. package/images/icons/svg/arrow-download.svg +1 -0
  125. package/images/icons/svg/arrow-right.svg +1 -0
  126. package/images/icons/svg/arrow-up.svg +3 -0
  127. package/images/icons/svg/block.svg +5 -0
  128. package/images/icons/svg/calendar.svg +1 -0
  129. package/images/icons/svg/check-circle.svg +5 -0
  130. package/images/icons/svg/checkmark.svg +7 -0
  131. package/images/icons/svg/chevron-down.svg +11 -0
  132. package/images/icons/svg/chevron-left.svg +12 -0
  133. package/images/icons/svg/chevron-right.svg +12 -0
  134. package/images/icons/svg/chevron-up.svg +12 -0
  135. package/images/icons/svg/clipboard.svg +1 -0
  136. package/images/icons/svg/close.svg +1 -0
  137. package/images/icons/svg/divide.svg +13 -0
  138. package/images/icons/svg/doctors-and-clinicians-preview.svg +10 -0
  139. package/images/icons/svg/download.svg +1 -0
  140. package/images/icons/svg/dropdown-arrow.svg +1 -0
  141. package/images/icons/svg/equals.svg +13 -0
  142. package/images/icons/svg/exclamation.svg +10 -0
  143. package/images/icons/svg/external.svg +1 -0
  144. package/images/icons/svg/file-download.svg +1 -0
  145. package/images/icons/svg/file-upload.svg +1 -0
  146. package/images/icons/svg/info.svg +17 -0
  147. package/images/icons/svg/manage-user-access.svg +8 -0
  148. package/images/icons/svg/multiply.svg +12 -0
  149. package/images/icons/svg/performance-feedback.svg +1 -0
  150. package/images/icons/svg/plus.svg +12 -0
  151. package/images/icons/svg/preview.svg +15 -0
  152. package/images/icons/svg/print.svg +1 -0
  153. package/images/icons/svg/registration.svg +8 -0
  154. package/images/icons/svg/reporting.svg +15 -0
  155. package/images/icons/svg/save-disk.svg +5 -0
  156. package/images/icons/svg/search.svg +1 -0
  157. package/images/icons/svg/subtract.svg +15 -0
  158. package/images/icons/svg/targeted-review.svg +15 -0
  159. package/images/icons/svg/tooltip-question.svg +1 -0
  160. package/images/icons/svg/trash.svg +1 -0
  161. package/images/icons/svg/upload.svg +1 -0
  162. package/images/us_flag_small.png +0 -0
  163. package/index.js +31 -0
  164. package/jest/mediaFileTransformer.js +9 -0
  165. package/jest.config.js +188 -0
  166. package/lib/Chevron.jsx +32 -0
  167. package/lib/SvgComponents.jsx +705 -0
  168. package/lib/svg-definitions.svg +125 -0
  169. package/package.json +63 -54
  170. package/{js/session → session}/index.js +2 -4
  171. package/session/isAuthV2.js +22 -0
  172. package/session/logout.js +65 -0
  173. package/session/refresh.js +52 -0
  174. package/session/ttl.js +25 -0
  175. package/styles/_global.scss +81 -55
  176. package/styles/_main.scss +11 -3
  177. package/styles/_paths.scss +1 -1
  178. package/styles/_qpp-style.scss +7 -4
  179. package/styles/components/_accordion.scss +273 -149
  180. package/styles/components/_alerts.scss +5 -7
  181. package/styles/components/_autocomplete.scss +47 -0
  182. package/styles/components/_breadcrumbs.scss +18 -17
  183. package/styles/components/_buttons.scss +545 -275
  184. package/styles/components/_error-page.scss +56 -0
  185. package/styles/components/_flash-notification.scss +98 -0
  186. package/styles/components/_fonts.scss +12 -13
  187. package/styles/components/_forms.scss +144 -70
  188. package/styles/components/_grid.scss +26 -20
  189. package/styles/components/_info-modal.scss +92 -19
  190. package/styles/components/_links.scss +4 -3
  191. package/styles/components/_modals.scss +10 -9
  192. package/styles/components/_notification-banner.scss +166 -0
  193. package/styles/components/_panels.scss +23 -21
  194. package/styles/components/_pie-chart.scss +3 -3
  195. package/styles/components/_score-chart.scss +135 -105
  196. package/styles/components/_spinner.scss +7 -0
  197. package/styles/components/_tables.scss +96 -72
  198. package/styles/components/_tabs.scss +69 -0
  199. package/styles/components/_text.scss +114 -48
  200. package/styles/components/_tooltip.scss +23 -0
  201. package/styles/components/_variables.scss +87 -58
  202. package/styles/components/_wells.scss +39 -29
  203. package/styles/qppds/README.md +0 -0
  204. package/styles/qppds/base/_backgrounds.scss +7 -0
  205. package/styles/qppds/base/_fonts.scss +50 -0
  206. package/styles/qppds/base/_icon.scss +31 -0
  207. package/styles/qppds/base/_layout.scss +5 -0
  208. package/styles/qppds/base/_typography.scss +97 -0
  209. package/styles/qppds/base/index.scss +8 -0
  210. package/styles/qppds/components/_alert.scss +101 -0
  211. package/styles/qppds/components/_breadcrumbs.scss +93 -0
  212. package/styles/qppds/components/_button.scss +306 -0
  213. package/styles/qppds/components/_card.scss +176 -0
  214. package/styles/qppds/components/_checkbox.scss +201 -0
  215. package/styles/qppds/components/_circular-loader.scss +47 -0
  216. package/styles/qppds/components/_details.scss +91 -0
  217. package/styles/qppds/components/_dropdown-menu.scss +126 -0
  218. package/styles/qppds/components/_dropdown.scss +56 -0
  219. package/styles/qppds/components/_footer.scss +606 -0
  220. package/styles/qppds/components/_gov-banner.scss +342 -0
  221. package/styles/qppds/components/_header.scss +913 -0
  222. package/styles/qppds/components/_link.scss +54 -0
  223. package/styles/qppds/components/_modal.scss +153 -0
  224. package/styles/qppds/components/_page-header.scss +105 -0
  225. package/styles/qppds/components/_pagination.scss +230 -0
  226. package/styles/qppds/components/_process-list.scss +106 -0
  227. package/styles/qppds/components/_radio-button.scss +185 -0
  228. package/styles/qppds/components/_search.scss +163 -0
  229. package/styles/qppds/components/_sidebar.scss +10 -0
  230. package/styles/qppds/components/_step-indicator.scss +193 -0
  231. package/styles/qppds/components/_table.scss +159 -0
  232. package/styles/qppds/components/_tabs.scss +199 -0
  233. package/styles/qppds/components/_text-input.scss +60 -0
  234. package/styles/qppds/components/index.scss +25 -0
  235. package/styles/qppds/components/sidebar/_animations.scss +38 -0
  236. package/styles/{components → qppds/components}/sidebar/_cms.scss +19 -10
  237. package/styles/{components → qppds/components}/sidebar/_details.scss +28 -21
  238. package/styles/qppds/components/sidebar/_links.scss +462 -0
  239. package/styles/qppds/components/sidebar/_select-role-dropdown.scss +21 -0
  240. package/styles/qppds/components/sidebar/_sidebar-animation.scss +91 -0
  241. package/styles/qppds/components/sidebar/_sidebar-tooltip.scss +33 -0
  242. package/styles/qppds/components/sidebar/_sidebar.scss +145 -0
  243. package/styles/qppds/components/sidebar/project-specific/_wi.scss +42 -0
  244. package/styles/qppds/index.scss +4 -0
  245. package/styles/qppds/settings/_functions.scss +6 -0
  246. package/styles/qppds/settings/_index.scss +3 -0
  247. package/styles/qppds/settings/mixins/_borders.scss +6 -0
  248. package/styles/qppds/settings/mixins/_focus.scss +30 -0
  249. package/styles/qppds/settings/mixins/_icons.scss +43 -0
  250. package/styles/qppds/settings/mixins/_index.scss +8 -0
  251. package/styles/qppds/settings/mixins/_layout.scss +74 -0
  252. package/styles/qppds/settings/mixins/_lists.scss +12 -0
  253. package/styles/qppds/settings/mixins/_table.scss +92 -0
  254. package/styles/qppds/settings/mixins/_type.scss +90 -0
  255. package/styles/qppds/settings/mixins/_visually-hidden.scss +30 -0
  256. package/styles/qppds/settings/variables/_color.scss +86 -0
  257. package/styles/qppds/settings/variables/_index.scss +4 -0
  258. package/styles/qppds/settings/variables/_layout.scss +69 -0
  259. package/styles/qppds/settings/variables/_type.scss +135 -0
  260. package/styles/qppds/settings/variables/_z-index.scss +8 -0
  261. package/styles/qppds/utilities/_background-color.scss +134 -0
  262. package/styles/qppds/utilities/_color.scss +40 -0
  263. package/styles/qppds/utilities/_display-visibility.scss +84 -0
  264. package/styles/qppds/utilities/_flexbox.scss +240 -0
  265. package/styles/qppds/utilities/_font-family.scss +10 -0
  266. package/styles/qppds/utilities/_font-size.scss +8 -0
  267. package/styles/qppds/utilities/_font-weight.scss +10 -0
  268. package/styles/qppds/utilities/_gap.scss +38 -0
  269. package/styles/qppds/utilities/_height.scss +81 -0
  270. package/styles/qppds/utilities/_list-style.scss +17 -0
  271. package/styles/qppds/utilities/_margin.scss +136 -0
  272. package/styles/qppds/utilities/_padding.scss +76 -0
  273. package/styles/qppds/utilities/_position.scss +24 -0
  274. package/styles/qppds/utilities/_text-align.scss +40 -0
  275. package/styles/qppds/utilities/_text-transform.scss +7 -0
  276. package/styles/qppds/utilities/_truncate.scss +8 -0
  277. package/styles/qppds/utilities/_vertical-align.scss +72 -0
  278. package/styles/qppds/utilities/_width.scss +82 -0
  279. package/styles/qppds/utilities/index.scss +17 -0
  280. package/styles/qppds.scss +2 -0
  281. package/styles/third-party/_legacy-bootstrap.scss +19 -0
  282. package/styles/third-party/legacy-bootstrap/_buttons.scss +126 -0
  283. package/styles/third-party/legacy-bootstrap/_dropdowns.scss +211 -0
  284. package/styles/third-party/legacy-bootstrap/_forms.scss +510 -0
  285. package/styles/third-party/legacy-bootstrap/_grid.scss +73 -0
  286. package/styles/third-party/legacy-bootstrap/_mixins.scss +27 -0
  287. package/styles/third-party/legacy-bootstrap/_navbar.scss +644 -0
  288. package/styles/third-party/legacy-bootstrap/_navs.scss +193 -0
  289. package/styles/third-party/legacy-bootstrap/_normalize.scss +385 -0
  290. package/styles/third-party/legacy-bootstrap/_scaffolding.scss +116 -0
  291. package/styles/third-party/legacy-bootstrap/_variables.scss +858 -0
  292. package/styles/third-party/legacy-bootstrap/mixins/_buttons.scss +70 -0
  293. package/styles/third-party/legacy-bootstrap/mixins/_clearfix.scss +22 -0
  294. package/styles/third-party/legacy-bootstrap/mixins/_forms.scss +108 -0
  295. package/styles/third-party/legacy-bootstrap/mixins/_grid-framework.scss +86 -0
  296. package/styles/third-party/legacy-bootstrap/mixins/_grid.scss +112 -0
  297. package/styles/third-party/legacy-bootstrap/mixins/_labels.scss +12 -0
  298. package/styles/third-party/legacy-bootstrap/mixins/_nav-divider.scss +10 -0
  299. package/styles/third-party/legacy-bootstrap/mixins/_nav-vertical-align.scss +9 -0
  300. package/styles/third-party/legacy-bootstrap/mixins/_opacity.scss +7 -0
  301. package/styles/third-party/legacy-bootstrap/mixins/_panels.scss +30 -0
  302. package/styles/third-party/legacy-bootstrap/mixins/_reset-filter.scss +7 -0
  303. package/styles/third-party/legacy-bootstrap/mixins/_reset-text.scss +18 -0
  304. package/styles/third-party/legacy-bootstrap/mixins/_resize.scss +6 -0
  305. package/styles/third-party/legacy-bootstrap/mixins/_responsive-visibility.scss +25 -0
  306. package/styles/third-party/legacy-bootstrap/mixins/_size.scss +10 -0
  307. package/styles/third-party/legacy-bootstrap/mixins/_tab-focus.scss +9 -0
  308. package/styles/third-party/legacy-bootstrap/mixins/_table-row.scss +28 -0
  309. package/styles/third-party/legacy-bootstrap/mixins/_text-emphasis.scss +12 -0
  310. package/styles/third-party/legacy-bootstrap/mixins/_text-overflow.scss +8 -0
  311. package/styles/third-party/legacy-bootstrap/mixins/_vendor-prefixes.scss +182 -0
  312. package/styles/utility/_mixins.scss +12 -11
  313. package/styles/utility/_utilities.scss +12 -1
  314. package/svgo.config.js +14 -0
  315. package/test/components/Accordion.test.js +12 -0
  316. package/test/components/ErrorUI.test.js +33 -0
  317. package/test/components/FooterUI.test.js +59 -0
  318. package/test/components/HeaderUI.test.js +35 -0
  319. package/test/components/Infotip.test.js +77 -0
  320. package/test/components/SideNavUI.test.js +23 -0
  321. package/test/index.test.js +8 -0
  322. package/test/session/session.test.js +220 -0
  323. package/test-setup.js +1 -0
  324. package/webpack.config.js +137 -0
  325. package/webpack.config.react.js +75 -0
  326. package/.npmignore +0 -20
  327. package/.sass-cache/002c9a202862ebaecdcfa2ffd25167fcb9a9f4d8/_mixins.scssc +0 -0
  328. package/.sass-cache/002c9a202862ebaecdcfa2ffd25167fcb9a9f4d8/_utilities.scssc +0 -0
  329. package/.sass-cache/5030049187d5e398bf789c14ee6a0d756703a14a/_global.scssc +0 -0
  330. package/.sass-cache/5030049187d5e398bf789c14ee6a0d756703a14a/_main.scssc +0 -0
  331. package/.sass-cache/5030049187d5e398bf789c14ee6a0d756703a14a/_paths.scssc +0 -0
  332. package/.sass-cache/5030049187d5e398bf789c14ee6a0d756703a14a/_qpp-style.scssc +0 -0
  333. package/.sass-cache/63ba9656f5a685b2d3fc16e888d2fb32bc122f86/_footer.scssc +0 -0
  334. package/.sass-cache/63ba9656f5a685b2d3fc16e888d2fb32bc122f86/_header.scssc +0 -0
  335. package/.sass-cache/aa56432bcb3b55155cd2ce66adbf1421d92c766f/_layout.scssc +0 -0
  336. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_accordion.scssc +0 -0
  337. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_alerts.scssc +0 -0
  338. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_breadcrumbs.scssc +0 -0
  339. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_buttons.scssc +0 -0
  340. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_fonts.scssc +0 -0
  341. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_forms.scssc +0 -0
  342. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_grid.scssc +0 -0
  343. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_links.scssc +0 -0
  344. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_modals.scssc +0 -0
  345. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_panels.scssc +0 -0
  346. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_pie-chart.scssc +0 -0
  347. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_sidebar.scssc +0 -0
  348. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_tables.scssc +0 -0
  349. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_text.scssc +0 -0
  350. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_toggles.scssc +0 -0
  351. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_tool-tips.scssc +0 -0
  352. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_variables.scssc +0 -0
  353. package/.sass-cache/c853175827d0a15f0e7f059d78b4d705b2f72646/_wells.scssc +0 -0
  354. package/Dockerfile +0 -27
  355. package/Jenkinsfile +0 -22
  356. package/_config.dev.yml +0 -17
  357. package/_layouts/base.html +0 -42
  358. package/css/main.scss +0 -5
  359. package/dist/default.css +0 -2
  360. package/dist/default.css.map +0 -1
  361. package/dist/fonts/FontAwesome.otf +0 -0
  362. package/dist/fonts/Rubik-Bold.ttf +0 -0
  363. package/dist/fonts/Rubik-Light.ttf +0 -0
  364. package/dist/fonts/Rubik-Medium.ttf +0 -0
  365. package/dist/fonts/Rubik-Regular.ttf +0 -0
  366. package/dist/fonts/fontawesome-webfont.eot +0 -0
  367. package/dist/fonts/fontawesome-webfont.ttf +0 -0
  368. package/dist/fonts/fontawesome-webfont.woff +0 -0
  369. package/dist/fonts/fontawesome-webfont.woff2 +0 -0
  370. package/dist/report.html +0 -25
  371. package/js/components/Footer/FooterUI.jsx +0 -39
  372. package/js/components/Footer/footer.js +0 -17
  373. package/js/components/Header/HeaderAbout.jsx +0 -27
  374. package/js/components/Header/HeaderAccountMenu.jsx +0 -114
  375. package/js/components/Header/HeaderApms.jsx +0 -25
  376. package/js/components/Header/HeaderMips.jsx +0 -43
  377. package/js/components/Header/HeaderUI.jsx +0 -75
  378. package/js/components/Header/header.js +0 -12
  379. package/js/components/InfoModal/index.jsx +0 -43
  380. package/js/components/SessionDialogUI.jsx +0 -181
  381. package/js/components/SideNav/Chart/ScoreChart.jsx +0 -206
  382. package/js/components/SideNav/Chart/__tests__/ScoreChart.test.js +0 -28
  383. package/js/components/SideNav/Chart/__tests__/__snapshots__/ScoreChart.test.js.snap +0 -57
  384. package/js/components/SideNav/Chart/index.js +0 -1
  385. package/js/components/SideNav/Content/CmsContent.jsx +0 -81
  386. package/js/components/SideNav/Content/LevelOneContent.jsx +0 -53
  387. package/js/components/SideNav/Content/LevelThreeContent.jsx +0 -96
  388. package/js/components/SideNav/Content/LevelTwoContent.jsx +0 -85
  389. package/js/components/SideNav/Content/index.js +0 -4
  390. package/js/components/SideNav/Details/IndividualDetails.jsx +0 -35
  391. package/js/components/SideNav/Details/PracticeDetails.jsx +0 -33
  392. package/js/components/SideNav/Details/index.js +0 -2
  393. package/js/components/SideNav/Links/CmsReportLink.jsx +0 -113
  394. package/js/components/SideNav/Links/NavLinkBack.jsx +0 -8
  395. package/js/components/SideNav/Links/NavLinkContainer.jsx +0 -33
  396. package/js/components/SideNav/Links/NavLinkDrawer.jsx +0 -65
  397. package/js/components/SideNav/Links/NavLinkInline.jsx +0 -14
  398. package/js/components/SideNav/Links/NavLinkSlideOut.jsx +0 -47
  399. package/js/components/SideNav/Links/NavLinkToggle.jsx +0 -25
  400. package/js/components/SideNav/Links/index.js +0 -7
  401. package/js/components/SideNav/UI/SideNavUI.jsx +0 -107
  402. package/js/components/SideNav/UI/index.js +0 -1
  403. package/js/components/SideNav/index.js +0 -24
  404. package/js/components/index.js +0 -9
  405. package/js/index.js +0 -24
  406. package/js/session/logout.js +0 -41
  407. package/js/session/refresh.js +0 -47
  408. package/package-lock.json +0 -12257
  409. package/sidebar-demo.html +0 -48
  410. package/styles/components/_footer.scss +0 -164
  411. package/styles/components/_header.scss +0 -393
  412. package/styles/components/_sidebar.scss +0 -6
  413. package/styles/components/_tool-tips.scss +0 -6
  414. package/styles/components/sidebar/_animations.scss +0 -16
  415. package/styles/components/sidebar/_links.scss +0 -269
  416. package/styles/components/sidebar/_sidebar.scss +0 -107
  417. package/styles/guide/_layout.scss +0 -120
  418. package/styles/guide/sidebar-demo.css +0 -121
  419. 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 = 2
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,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,65 +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
- ## 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.
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;