@openedx/paragon 21.7.1 → 22.0.0-alpha.15

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 (543) hide show
  1. package/README.md +36 -5
  2. package/bin/paragon-scripts.js +128 -10
  3. package/dist/ActionRow/_index.scss +2 -4
  4. package/dist/Alert/index.scss +41 -32
  5. package/dist/Annotation/_mixins.scss +104 -0
  6. package/dist/Annotation/index.scss +130 -103
  7. package/dist/Avatar/index.scss +18 -20
  8. package/dist/AvatarButton/index.scss +3 -5
  9. package/dist/Badge/index.scss +112 -2
  10. package/dist/Breadcrumb/index.scss +14 -16
  11. package/dist/Bubble/index.scss +25 -12
  12. package/dist/Button/_mixins.scss +14 -0
  13. package/dist/Button/button-group.scss +126 -0
  14. package/dist/Button/index.js +0 -2
  15. package/dist/Button/index.js.map +1 -1
  16. package/dist/Button/index.scss +855 -358
  17. package/dist/Card/card-bootstrap.scss +168 -0
  18. package/dist/Card/index.scss +78 -79
  19. package/dist/Carousel/index.scss +168 -2
  20. package/dist/Chip/index.scss +36 -34
  21. package/dist/ChipCarousel/index.scss +1 -3
  22. package/dist/CloseButton/index.scss +31 -2
  23. package/dist/Code/index.scss +47 -2
  24. package/dist/Collapsible/index.scss +15 -15
  25. package/dist/ColorPicker/index.scss +9 -11
  26. package/dist/DataTable/CollapsibleButtonGroup.js +2 -2
  27. package/dist/DataTable/CollapsibleButtonGroup.js.map +1 -1
  28. package/dist/DataTable/ExpandRow.js +8 -3
  29. package/dist/DataTable/ExpandRow.js.map +1 -1
  30. package/dist/DataTable/filters/TextFilter.js +2 -3
  31. package/dist/DataTable/filters/TextFilter.js.map +1 -1
  32. package/dist/DataTable/index.scss +48 -50
  33. package/dist/DataTable/selection/ControlledSelect.js +7 -3
  34. package/dist/DataTable/selection/ControlledSelect.js.map +1 -1
  35. package/dist/DataTable/selection/ControlledSelectHeader.js +7 -3
  36. package/dist/DataTable/selection/ControlledSelectHeader.js.map +1 -1
  37. package/dist/DataTable/selection/ControlledSelectionStatus.js +14 -5
  38. package/dist/DataTable/selection/ControlledSelectionStatus.js.map +1 -1
  39. package/dist/Dropdown/dropdown-bootstrap.scss +181 -0
  40. package/dist/Dropdown/index.js +0 -2
  41. package/dist/Dropdown/index.js.map +1 -1
  42. package/dist/Dropdown/index.scss +11 -12
  43. package/dist/Dropzone/index.scss +12 -14
  44. package/dist/Form/_FormText.scss +8 -8
  45. package/dist/Form/_bootstrap-custom-forms.scss +551 -0
  46. package/dist/Form/_bootstrap-forms.scss +381 -0
  47. package/dist/Form/_index.scss +165 -143
  48. package/dist/Form/_input-group.scss +188 -0
  49. package/dist/Form/_mixins.scss +216 -3
  50. package/dist/Hyperlink/index.scss +1 -1
  51. package/dist/Icon/index.scss +10 -12
  52. package/dist/IconButton/_mixins.scss +4 -0
  53. package/dist/IconButton/index.js +5 -11
  54. package/dist/IconButton/index.js.map +1 -1
  55. package/dist/IconButton/index.scss +387 -74
  56. package/dist/IconButtonToggle/index.scss +1 -1
  57. package/dist/Image/index.scss +53 -2
  58. package/dist/Menu/index.scss +25 -27
  59. package/dist/Modal/_ModalDialog.scss +51 -49
  60. package/dist/Modal/index.scss +6 -73
  61. package/dist/Nav/_mixins.scss +4 -4
  62. package/dist/Nav/index.scss +70 -66
  63. package/dist/Navbar/index.scss +276 -2
  64. package/dist/OverflowScroll/data/useOverflowScrollElementAttributes.js +3 -3
  65. package/dist/Overlay/index.js +2 -3
  66. package/dist/Overlay/index.js.map +1 -1
  67. package/dist/PageBanner/index.scss +17 -21
  68. package/dist/Pagination/index.scss +51 -46
  69. package/dist/Pagination/pagination-bootstrap.scss +83 -0
  70. package/dist/Popover/index.scss +9 -10
  71. package/dist/Popover/popover-bootstrap.scss +198 -0
  72. package/dist/ProductTour/Checkpoint.scss +71 -43
  73. package/dist/ProgressBar/_mixins.scss +22 -0
  74. package/dist/ProgressBar/bootstrap-progress.scss +49 -0
  75. package/dist/ProgressBar/index.scss +28 -36
  76. package/dist/Scrollable/index.scss +2 -2
  77. package/dist/SearchField/SearchFieldInput.js +2 -2
  78. package/dist/SearchField/SearchFieldInput.js.map +1 -1
  79. package/dist/SearchField/index.scss +19 -21
  80. package/dist/SelectableBox/index.scss +11 -13
  81. package/dist/Sheet/index.scss +10 -10
  82. package/dist/Spinner/index.scss +57 -2
  83. package/dist/Stack/index.scss +1 -3
  84. package/dist/Stepper/index.scss +19 -20
  85. package/dist/Sticky/index.scss +4 -6
  86. package/dist/Tabs/index.js +0 -2
  87. package/dist/Tabs/index.js.map +1 -1
  88. package/dist/Tabs/index.scss +23 -30
  89. package/dist/Toast/ToastContainer.scss +9 -11
  90. package/dist/Toast/bootstrap-toast.scss +46 -0
  91. package/dist/Toast/index.scss +9 -10
  92. package/dist/Tooltip/index.scss +136 -10
  93. package/dist/ValidationMessage/index.scss +1 -1
  94. package/dist/core.css +16706 -0
  95. package/dist/core.css.map +1 -0
  96. package/dist/core.min.css +2 -0
  97. package/dist/index.js +0 -14
  98. package/dist/index.scss +0 -4
  99. package/dist/light.css +4083 -0
  100. package/dist/light.css.map +1 -0
  101. package/dist/light.min.css +2 -0
  102. package/dist/theme-urls.json +21 -0
  103. package/dist/utils/breakpoints.js +1 -1
  104. package/lib/build-scss.js +188 -0
  105. package/lib/build-tokens.js +119 -0
  106. package/lib/help.js +36 -23
  107. package/lib/replace-variables.js +38 -0
  108. package/lib/utils.js +9 -0
  109. package/package.json +25 -11
  110. package/src/ActionRow/_index.scss +2 -4
  111. package/src/Alert/index.scss +41 -32
  112. package/src/Annotation/_mixins.scss +104 -0
  113. package/src/Annotation/index.scss +130 -103
  114. package/src/Avatar/index.scss +18 -20
  115. package/src/AvatarButton/index.scss +3 -5
  116. package/src/Badge/index.scss +112 -2
  117. package/src/Breadcrumb/index.scss +14 -16
  118. package/src/Bubble/index.scss +25 -12
  119. package/src/Button/README.md +0 -54
  120. package/src/Button/_mixins.scss +14 -0
  121. package/src/Button/button-group.scss +126 -0
  122. package/src/Button/index.jsx +0 -3
  123. package/src/Button/index.scss +855 -358
  124. package/src/Card/card-bootstrap.scss +168 -0
  125. package/src/Card/index.scss +78 -79
  126. package/src/Carousel/index.scss +168 -2
  127. package/src/Chip/index.scss +36 -34
  128. package/src/ChipCarousel/index.scss +1 -3
  129. package/src/CloseButton/index.scss +31 -2
  130. package/src/Code/index.scss +47 -2
  131. package/src/Collapsible/index.scss +15 -15
  132. package/src/ColorPicker/index.scss +9 -11
  133. package/src/DataTable/CollapsibleButtonGroup.jsx +2 -2
  134. package/src/DataTable/ExpandRow.jsx +2 -2
  135. package/src/DataTable/filters/TextFilter.jsx +2 -3
  136. package/src/DataTable/index.scss +48 -50
  137. package/src/DataTable/selection/ControlledSelect.jsx +2 -1
  138. package/src/DataTable/selection/ControlledSelectHeader.jsx +2 -1
  139. package/src/DataTable/selection/ControlledSelectionStatus.jsx +2 -1
  140. package/src/DataTable/tests/ExpandRow.test.jsx +8 -2
  141. package/src/Dropdown/README.md +0 -93
  142. package/src/Dropdown/dropdown-bootstrap.scss +181 -0
  143. package/src/Dropdown/index.jsx +0 -2
  144. package/src/Dropdown/index.scss +11 -12
  145. package/src/Dropzone/index.scss +12 -14
  146. package/src/Form/_FormText.scss +8 -8
  147. package/src/Form/_bootstrap-custom-forms.scss +551 -0
  148. package/src/Form/_bootstrap-forms.scss +381 -0
  149. package/src/Form/_index.scss +165 -143
  150. package/src/Form/_input-group.scss +188 -0
  151. package/src/Form/_mixins.scss +216 -3
  152. package/src/Hyperlink/index.scss +1 -1
  153. package/src/Icon/index.scss +10 -12
  154. package/src/IconButton/README.md +1 -15
  155. package/src/IconButton/__snapshots__/IconButton.test.jsx.snap +5 -26
  156. package/src/IconButton/_mixins.scss +4 -0
  157. package/src/IconButton/index.jsx +6 -13
  158. package/src/IconButton/index.scss +387 -74
  159. package/src/IconButtonToggle/index.scss +1 -1
  160. package/src/Image/index.scss +53 -2
  161. package/src/Menu/index.scss +25 -27
  162. package/src/Modal/_ModalDialog.scss +51 -49
  163. package/src/Modal/index.scss +6 -73
  164. package/src/Nav/_mixins.scss +4 -4
  165. package/src/Nav/index.scss +70 -66
  166. package/src/Navbar/index.scss +276 -2
  167. package/src/OverflowScroll/data/useOverflowScrollElementAttributes.js +3 -3
  168. package/src/Overlay/index.jsx +2 -3
  169. package/src/PageBanner/index.scss +17 -21
  170. package/src/Pagination/index.scss +51 -46
  171. package/src/Pagination/pagination-bootstrap.scss +83 -0
  172. package/src/Popover/index.scss +9 -10
  173. package/src/Popover/popover-bootstrap.scss +198 -0
  174. package/src/ProductTour/Checkpoint.scss +71 -43
  175. package/src/ProgressBar/_mixins.scss +22 -0
  176. package/src/ProgressBar/bootstrap-progress.scss +49 -0
  177. package/src/ProgressBar/index.scss +28 -36
  178. package/src/Scrollable/index.scss +2 -2
  179. package/src/SearchField/SearchFieldInput.jsx +2 -2
  180. package/src/SearchField/__snapshots__/SearchField.test.jsx.snap +12 -8
  181. package/src/SearchField/index.scss +19 -21
  182. package/src/SelectableBox/index.scss +11 -13
  183. package/src/Sheet/index.scss +10 -10
  184. package/src/Spinner/index.scss +57 -2
  185. package/src/Stack/index.scss +1 -3
  186. package/src/Stepper/index.scss +19 -20
  187. package/src/Sticky/index.scss +4 -6
  188. package/src/Tabs/README.md +1 -25
  189. package/src/Tabs/index.jsx +0 -3
  190. package/src/Tabs/index.scss +23 -30
  191. package/src/Toast/ToastContainer.scss +9 -11
  192. package/src/Toast/bootstrap-toast.scss +46 -0
  193. package/src/Toast/index.scss +9 -10
  194. package/src/Tooltip/index.scss +136 -10
  195. package/src/TransitionReplace/README.md +4 -4
  196. package/src/ValidationMessage/index.scss +1 -1
  197. package/src/index.js +0 -14
  198. package/src/index.scss +0 -4
  199. package/src/utils/breakpoints.js +1 -1
  200. package/styles/css/core/custom-media-breakpoints.css +17 -0
  201. package/styles/css/core/index.css +2 -0
  202. package/styles/css/core/variables.css +608 -0
  203. package/styles/css/themes/light/index.css +2 -0
  204. package/styles/css/themes/light/utility-classes.css +2454 -0
  205. package/styles/css/themes/light/variables.css +1629 -0
  206. package/{scss → styles/scss}/core/_functions.scss +1 -1
  207. package/styles/scss/core/_grid.scss +21 -0
  208. package/{scss → styles/scss}/core/_utilities.scss +17 -11
  209. package/styles/scss/core/_variables.scss +869 -0
  210. package/styles/scss/core/bootstrap-override/_functions.scss +104 -0
  211. package/styles/scss/core/bootstrap-override/_mixins.scss +4 -0
  212. package/styles/scss/core/bootstrap-override/_utilities.scss +4 -0
  213. package/styles/scss/core/bootstrap-override/bootstrap.scss +2 -0
  214. package/styles/scss/core/bootstrap-override/mixins/_grid-framework.scss +80 -0
  215. package/styles/scss/core/bootstrap-override/mixins/_grid.scss +69 -0
  216. package/styles/scss/core/bootstrap-override/mixins/_list-group.scss +22 -0
  217. package/styles/scss/core/bootstrap-override/utilities/_background.scss +7 -0
  218. package/styles/scss/core/bootstrap-override/utilities/_borders.scss +67 -0
  219. package/styles/scss/core/bootstrap-override/utilities/_spacing.scss +70 -0
  220. package/styles/scss/core/bootstrap-override/utilities/_text.scss +68 -0
  221. package/styles/scss/core/core.scss +20 -0
  222. package/{scss → styles/scss}/core/utilities-only.scss +1 -0
  223. package/tokens/README.md +158 -0
  224. package/tokens/css-utilities.js +56 -0
  225. package/tokens/map-scss-to-css.js +24 -0
  226. package/tokens/replace-variables.js +32 -0
  227. package/tokens/sass-helpers.js +98 -0
  228. package/tokens/src/core/alias/size.json +15 -0
  229. package/tokens/src/core/components/ActionRow.json +10 -0
  230. package/tokens/src/core/components/Alert.json +30 -0
  231. package/tokens/src/core/components/Annotation.json +25 -0
  232. package/tokens/src/core/components/Avatar.json +17 -0
  233. package/tokens/src/core/components/AvatarButton.json +11 -0
  234. package/tokens/src/core/components/Badge.json +33 -0
  235. package/tokens/src/core/components/Breadcrumb.json +37 -0
  236. package/tokens/src/core/components/Bubble.json +10 -0
  237. package/tokens/src/core/components/Button/core.json +101 -0
  238. package/tokens/src/core/components/Card.json +91 -0
  239. package/tokens/src/core/components/Carousel.json +37 -0
  240. package/tokens/src/core/components/Chip.json +19 -0
  241. package/tokens/src/core/components/ChipCarousel.json +9 -0
  242. package/tokens/src/core/components/CloseButton.json +14 -0
  243. package/tokens/src/core/components/Code.json +34 -0
  244. package/tokens/src/core/components/Collapsible.json +29 -0
  245. package/tokens/src/core/components/ColorPicker.json +8 -0
  246. package/tokens/src/core/components/Container.json +13 -0
  247. package/tokens/src/core/components/DataTable.json +27 -0
  248. package/tokens/src/core/components/Dropdown.json +67 -0
  249. package/tokens/src/core/components/Dropzone.json +25 -0
  250. package/tokens/src/core/components/Form/other.json +14 -0
  251. package/tokens/src/core/components/Form/size.json +233 -0
  252. package/tokens/src/core/components/Form/spacing.json +155 -0
  253. package/tokens/src/core/components/Form/transition.json +16 -0
  254. package/tokens/src/core/components/Form/typography.json +122 -0
  255. package/tokens/src/core/components/Icon.json +11 -0
  256. package/tokens/src/core/components/IconButton.json +15 -0
  257. package/tokens/src/core/components/Image.json +28 -0
  258. package/tokens/src/core/components/Menu.json +48 -0
  259. package/tokens/src/core/components/Modal.json +47 -0
  260. package/tokens/src/core/components/Nav.json +55 -0
  261. package/tokens/src/core/components/Navbar.json +70 -0
  262. package/tokens/src/core/components/Pagination.json +70 -0
  263. package/tokens/src/core/components/Popover.json +48 -0
  264. package/tokens/src/core/components/ProductTour.json +37 -0
  265. package/tokens/src/core/components/ProgressBar.json +44 -0
  266. package/tokens/src/core/components/SearchField.json +23 -0
  267. package/tokens/src/core/components/SelectableBox.json +9 -0
  268. package/tokens/src/core/components/Sheet.json +10 -0
  269. package/tokens/src/core/components/Spinner.json +19 -0
  270. package/tokens/src/core/components/Stack.json +7 -0
  271. package/tokens/src/core/components/Stepper.json +42 -0
  272. package/tokens/src/core/components/Sticky.json +7 -0
  273. package/tokens/src/core/components/Tab.json +18 -0
  274. package/tokens/src/core/components/Tabs.json +19 -0
  275. package/tokens/src/core/components/Toast.json +30 -0
  276. package/tokens/src/core/components/Tooltip.json +33 -0
  277. package/tokens/src/core/components/general/caret.json +13 -0
  278. package/tokens/src/core/components/general/headings.json +16 -0
  279. package/tokens/src/core/components/general/hr.json +10 -0
  280. package/tokens/src/core/components/general/input.json +51 -0
  281. package/tokens/src/core/components/general/link.json +30 -0
  282. package/tokens/src/core/components/general/list.json +26 -0
  283. package/tokens/src/core/components/general/text.json +24 -0
  284. package/tokens/src/core/global/breakpoints.json +12 -0
  285. package/tokens/src/core/global/display.json +21 -0
  286. package/tokens/src/core/global/elevation.json +19 -0
  287. package/tokens/src/core/global/other.json +4 -0
  288. package/tokens/src/core/global/spacing.json +35 -0
  289. package/tokens/src/core/global/transition.json +14 -0
  290. package/tokens/src/core/global/typography.json +91 -0
  291. package/tokens/src/core/utilities/color.json +12 -0
  292. package/tokens/src/themes/light/alias/color.json +114 -0
  293. package/tokens/src/themes/light/components/Alert.json +47 -0
  294. package/tokens/src/themes/light/components/Annotation.json +29 -0
  295. package/tokens/src/themes/light/components/Avatar.json +7 -0
  296. package/tokens/src/themes/light/components/Badge.json +186 -0
  297. package/tokens/src/themes/light/components/Breadcrumb.json +15 -0
  298. package/tokens/src/themes/light/components/Bubble.json +18 -0
  299. package/tokens/src/themes/light/components/Button/brand.json +260 -0
  300. package/tokens/src/themes/light/components/Button/core.json +24 -0
  301. package/tokens/src/themes/light/components/Button/danger.json +247 -0
  302. package/tokens/src/themes/light/components/Button/dark.json +230 -0
  303. package/tokens/src/themes/light/components/Button/info.json +238 -0
  304. package/tokens/src/themes/light/components/Button/light.json +236 -0
  305. package/tokens/src/themes/light/components/Button/primary.json +250 -0
  306. package/tokens/src/themes/light/components/Button/secondary.json +278 -0
  307. package/tokens/src/themes/light/components/Button/success.json +253 -0
  308. package/tokens/src/themes/light/components/Button/tertiary.json +109 -0
  309. package/tokens/src/themes/light/components/Button/warning.json +276 -0
  310. package/tokens/src/themes/light/components/Card.json +40 -0
  311. package/tokens/src/themes/light/components/Carousel.json +45 -0
  312. package/tokens/src/themes/light/components/Chip.json +19 -0
  313. package/tokens/src/themes/light/components/CloseButton.json +10 -0
  314. package/tokens/src/themes/light/components/Code.json +23 -0
  315. package/tokens/src/themes/light/components/DataTable.json +26 -0
  316. package/tokens/src/themes/light/components/Dropdown.json +36 -0
  317. package/tokens/src/themes/light/components/Dropzone.json +19 -0
  318. package/tokens/src/themes/light/components/Form/color.json +270 -0
  319. package/tokens/src/themes/light/components/Form/elevation.json +76 -0
  320. package/tokens/src/themes/light/components/Form/other.json +131 -0
  321. package/tokens/src/themes/light/components/IconButton.json +451 -0
  322. package/tokens/src/themes/light/components/Image.json +18 -0
  323. package/tokens/src/themes/light/components/Menu.json +30 -0
  324. package/tokens/src/themes/light/components/Modal.json +37 -0
  325. package/tokens/src/themes/light/components/Nav.json +145 -0
  326. package/tokens/src/themes/light/components/Navbar.json +136 -0
  327. package/tokens/src/themes/light/components/OverflowScroll.json +9 -0
  328. package/tokens/src/themes/light/components/PageBanner.json +24 -0
  329. package/tokens/src/themes/light/components/Pagination.json +40 -0
  330. package/tokens/src/themes/light/components/Popover.json +55 -0
  331. package/tokens/src/themes/light/components/ProductTour.json +35 -0
  332. package/tokens/src/themes/light/components/ProgressBar.json +20 -0
  333. package/tokens/src/themes/light/components/Scrollable.json +14 -0
  334. package/tokens/src/themes/light/components/SearchField.json +25 -0
  335. package/tokens/src/themes/light/components/Sheet.json +22 -0
  336. package/tokens/src/themes/light/components/Stepper.json +34 -0
  337. package/tokens/src/themes/light/components/Sticky.json +18 -0
  338. package/tokens/src/themes/light/components/Tab.json +55 -0
  339. package/tokens/src/themes/light/components/Toast.json +33 -0
  340. package/tokens/src/themes/light/components/Tooltip.json +30 -0
  341. package/tokens/src/themes/light/components/general/body.json +8 -0
  342. package/tokens/src/themes/light/components/general/headings.json +7 -0
  343. package/tokens/src/themes/light/components/general/hr.json +15 -0
  344. package/tokens/src/themes/light/components/general/input.json +18 -0
  345. package/tokens/src/themes/light/components/general/link.json +109 -0
  346. package/tokens/src/themes/light/components/general/list.json +38 -0
  347. package/tokens/src/themes/light/components/general/text.json +6 -0
  348. package/tokens/src/themes/light/global/color.json +1661 -0
  349. package/tokens/src/themes/light/global/elevation.json +201 -0
  350. package/tokens/src/themes/light/global/other.json +4 -0
  351. package/tokens/style-dictionary.js +223 -0
  352. package/tokens/utils.js +210 -0
  353. package/dist/ActionRow/_variables.scss +0 -2
  354. package/dist/Alert/_variables.scss +0 -24
  355. package/dist/Annotation/_variables.scss +0 -18
  356. package/dist/Avatar/_variables.scss +0 -10
  357. package/dist/AvatarButton/_variables.scss +0 -3
  358. package/dist/Badge/_variables.scss +0 -16
  359. package/dist/Breadcrumb/_variables.scss +0 -27
  360. package/dist/Bubble/_variables.scss +0 -8
  361. package/dist/Button/_variables.scss +0 -50
  362. package/dist/Button/deprecated/index.js +0 -128
  363. package/dist/Button/deprecated/index.js.map +0 -1
  364. package/dist/Card/_variables.scss +0 -56
  365. package/dist/Carousel/_variables.scss +0 -27
  366. package/dist/CheckBox/index.js +0 -72
  367. package/dist/CheckBox/index.js.map +0 -1
  368. package/dist/CheckBoxGroup/index.js +0 -15
  369. package/dist/CheckBoxGroup/index.js.map +0 -1
  370. package/dist/Chip/_variables.scss +0 -19
  371. package/dist/ChipCarousel/_variables.scss +0 -1
  372. package/dist/CloseButton/_variables.scss +0 -6
  373. package/dist/Code/_variables.scss +0 -17
  374. package/dist/Collapsible/_variables.scss +0 -12
  375. package/dist/ColorPicker/_variables.scss +0 -2
  376. package/dist/Container/_variables.scss +0 -5
  377. package/dist/DataTable/_variables.scss +0 -11
  378. package/dist/Dropdown/_variables.scss +0 -33
  379. package/dist/Dropdown/deprecated/DropdownButton.js +0 -48
  380. package/dist/Dropdown/deprecated/DropdownButton.js.map +0 -1
  381. package/dist/Dropdown/deprecated/DropdownItem.js +0 -34
  382. package/dist/Dropdown/deprecated/DropdownItem.js.map +0 -1
  383. package/dist/Dropdown/deprecated/DropdownMenu.js +0 -50
  384. package/dist/Dropdown/deprecated/DropdownMenu.js.map +0 -1
  385. package/dist/Dropdown/deprecated/index.js +0 -209
  386. package/dist/Dropdown/deprecated/index.js.map +0 -1
  387. package/dist/Dropzone/_variables.scss +0 -9
  388. package/dist/Fieldset/index.js +0 -92
  389. package/dist/Fieldset/index.js.map +0 -1
  390. package/dist/Fieldset/index.scss +0 -12
  391. package/dist/Form/_variables.scss +0 -267
  392. package/dist/Icon/_variables.scss +0 -7
  393. package/dist/Image/_variables.scss +0 -13
  394. package/dist/Input/index.js +0 -136
  395. package/dist/Input/index.js.map +0 -1
  396. package/dist/InputSelect/index.js +0 -78
  397. package/dist/InputSelect/index.js.map +0 -1
  398. package/dist/InputText/index.js +0 -43
  399. package/dist/InputText/index.js.map +0 -1
  400. package/dist/ListBox/index.js +0 -116
  401. package/dist/ListBox/index.js.map +0 -1
  402. package/dist/ListBoxOption/index.js +0 -71
  403. package/dist/ListBoxOption/index.js.map +0 -1
  404. package/dist/Menu/_variables.scss +0 -24
  405. package/dist/Modal/_variables.scss +0 -50
  406. package/dist/Modal/index.js +0 -260
  407. package/dist/Modal/index.js.map +0 -1
  408. package/dist/Nav/_variables.scss +0 -59
  409. package/dist/Navbar/_variables.scss +0 -40
  410. package/dist/OverflowScroll/_variables.scss +0 -5
  411. package/dist/OverflowScroll/index.scss +0 -1
  412. package/dist/Pagination/_variables.scss +0 -52
  413. package/dist/Popover/_variables.scss +0 -36
  414. package/dist/ProductTour/_variables.scss +0 -15
  415. package/dist/ProgressBar/_variables.scss +0 -23
  416. package/dist/RadioButtonGroup/index.js +0 -157
  417. package/dist/RadioButtonGroup/index.js.map +0 -1
  418. package/dist/SearchField/_variables.scss +0 -16
  419. package/dist/SelectableBox/_variables.scss +0 -5
  420. package/dist/Spinner/_variables.scss +0 -9
  421. package/dist/Stack/_variables.scss +0 -1
  422. package/dist/StatusAlert/index.js +0 -130
  423. package/dist/StatusAlert/index.js.map +0 -1
  424. package/dist/Stepper/_variables.scss +0 -18
  425. package/dist/Sticky/_variables.scss +0 -3
  426. package/dist/Table/_variables.scss +0 -34
  427. package/dist/Table/index.js +0 -198
  428. package/dist/Table/index.js.map +0 -1
  429. package/dist/Table/index.scss +0 -12
  430. package/dist/Tabs/_variables.scss +0 -24
  431. package/dist/Tabs/deprecated/Tabs.scss +0 -3
  432. package/dist/Tabs/deprecated/index.js +0 -90
  433. package/dist/Tabs/deprecated/index.js.map +0 -1
  434. package/dist/TextArea/index.js +0 -42
  435. package/dist/TextArea/index.js.map +0 -1
  436. package/dist/Toast/_variables.scss +0 -19
  437. package/dist/Tooltip/_variables.scss +0 -21
  438. package/dist/ValidationFormGroup/index.js +0 -105
  439. package/dist/ValidationFormGroup/index.js.map +0 -1
  440. package/dist/paragon.css +0 -39
  441. package/scss/core/_grid.scss +0 -21
  442. package/scss/core/_variables.scss +0 -875
  443. package/scss/core/core.scss +0 -21
  444. package/src/ActionRow/_variables.scss +0 -2
  445. package/src/Alert/_variables.scss +0 -24
  446. package/src/Annotation/_variables.scss +0 -18
  447. package/src/Avatar/_variables.scss +0 -10
  448. package/src/AvatarButton/_variables.scss +0 -3
  449. package/src/Badge/_variables.scss +0 -16
  450. package/src/Breadcrumb/_variables.scss +0 -27
  451. package/src/Bubble/_variables.scss +0 -8
  452. package/src/Button/_variables.scss +0 -50
  453. package/src/Button/deprecated/Button.test.jsx +0 -34
  454. package/src/Button/deprecated/index.jsx +0 -145
  455. package/src/Card/_variables.scss +0 -56
  456. package/src/Carousel/_variables.scss +0 -27
  457. package/src/CheckBox/CheckBox.test.jsx +0 -65
  458. package/src/CheckBox/README.md +0 -93
  459. package/src/CheckBox/index.jsx +0 -80
  460. package/src/CheckBoxGroup/CheckBoxGroup.test.jsx +0 -33
  461. package/src/CheckBoxGroup/README.md +0 -35
  462. package/src/CheckBoxGroup/index.jsx +0 -19
  463. package/src/Chip/_variables.scss +0 -19
  464. package/src/ChipCarousel/_variables.scss +0 -1
  465. package/src/CloseButton/_variables.scss +0 -6
  466. package/src/Code/_variables.scss +0 -17
  467. package/src/Collapsible/_variables.scss +0 -12
  468. package/src/ColorPicker/_variables.scss +0 -2
  469. package/src/Container/_variables.scss +0 -5
  470. package/src/DataTable/_variables.scss +0 -11
  471. package/src/Dropdown/_variables.scss +0 -33
  472. package/src/Dropdown/deprecated/Dropdown.test.jsx +0 -238
  473. package/src/Dropdown/deprecated/DropdownButton.jsx +0 -52
  474. package/src/Dropdown/deprecated/DropdownItem.jsx +0 -34
  475. package/src/Dropdown/deprecated/DropdownMenu.jsx +0 -50
  476. package/src/Dropdown/deprecated/__snapshots__/Dropdown.test.jsx.snap +0 -229
  477. package/src/Dropdown/deprecated/index.jsx +0 -222
  478. package/src/Dropzone/_variables.scss +0 -9
  479. package/src/Fieldset/Fieldset.test.jsx +0 -101
  480. package/src/Fieldset/README.md +0 -146
  481. package/src/Fieldset/index.jsx +0 -107
  482. package/src/Fieldset/index.scss +0 -12
  483. package/src/Form/_variables.scss +0 -267
  484. package/src/Icon/_variables.scss +0 -7
  485. package/src/Image/_variables.scss +0 -13
  486. package/src/Input/README.md +0 -74
  487. package/src/Input/__snapshots__/input.test.jsx.snap +0 -53
  488. package/src/Input/index.jsx +0 -151
  489. package/src/Input/input.test.jsx +0 -85
  490. package/src/InputSelect/README.md +0 -136
  491. package/src/InputSelect/index.jsx +0 -92
  492. package/src/InputText/InputText.test.jsx +0 -74
  493. package/src/InputText/README.md +0 -293
  494. package/src/InputText/index.jsx +0 -49
  495. package/src/ListBox/ListBox.test.jsx +0 -161
  496. package/src/ListBox/README.md +0 -185
  497. package/src/ListBox/index.jsx +0 -115
  498. package/src/ListBoxOption/ListBoxOption.test.jsx +0 -154
  499. package/src/ListBoxOption/index.jsx +0 -78
  500. package/src/Menu/_variables.scss +0 -24
  501. package/src/Modal/README.md +0 -148
  502. package/src/Modal/_variables.scss +0 -50
  503. package/src/Modal/index.jsx +0 -314
  504. package/src/Modal/tests/Modal.test.jsx +0 -261
  505. package/src/Nav/_variables.scss +0 -59
  506. package/src/Navbar/_variables.scss +0 -40
  507. package/src/OverflowScroll/_variables.scss +0 -5
  508. package/src/OverflowScroll/index.scss +0 -1
  509. package/src/Pagination/_variables.scss +0 -52
  510. package/src/Popover/_variables.scss +0 -36
  511. package/src/ProductTour/_variables.scss +0 -15
  512. package/src/ProgressBar/_variables.scss +0 -23
  513. package/src/RadioButtonGroup/README.md +0 -50
  514. package/src/RadioButtonGroup/RadioButtonGroup.test.jsx +0 -127
  515. package/src/RadioButtonGroup/index.jsx +0 -185
  516. package/src/SearchField/_variables.scss +0 -16
  517. package/src/SelectableBox/_variables.scss +0 -5
  518. package/src/Spinner/_variables.scss +0 -9
  519. package/src/Stack/_variables.scss +0 -1
  520. package/src/StatusAlert/README.md +0 -149
  521. package/src/StatusAlert/StatusAlert.test.jsx +0 -150
  522. package/src/StatusAlert/index.jsx +0 -144
  523. package/src/Stepper/_variables.scss +0 -18
  524. package/src/Sticky/_variables.scss +0 -3
  525. package/src/Table/README.md +0 -506
  526. package/src/Table/Table.test.jsx +0 -367
  527. package/src/Table/_variables.scss +0 -34
  528. package/src/Table/index.jsx +0 -264
  529. package/src/Table/index.scss +0 -12
  530. package/src/Tabs/_variables.scss +0 -24
  531. package/src/Tabs/deprecated/Tabs.scss +0 -3
  532. package/src/Tabs/deprecated/Tabs.test.jsx +0 -50
  533. package/src/Tabs/deprecated/index.jsx +0 -117
  534. package/src/TextArea/README.md +0 -63
  535. package/src/TextArea/index.jsx +0 -48
  536. package/src/Toast/_variables.scss +0 -19
  537. package/src/Tooltip/_variables.scss +0 -21
  538. package/src/ValidationFormGroup/README.md +0 -116
  539. package/src/ValidationFormGroup/ValidationFormGroup.test.jsx +0 -146
  540. package/src/ValidationFormGroup/__snapshots__/ValidationFormGroup.test.jsx.snap +0 -161
  541. package/src/ValidationFormGroup/index.jsx +0 -114
  542. /package/{scss → styles/scss}/core/_exports.module.scss +0 -0
  543. /package/{scss → styles/scss}/core/_typography.scss +0 -0
@@ -1,34 +0,0 @@
1
- // Tables
2
- //
3
- // Customizes the `.table` component with basic values, each used across all table variations.
4
-
5
- $table-cell-padding: .75rem !default;
6
- $table-cell-padding-sm: .3rem !default;
7
-
8
- $table-color: $body-color !default;
9
- $table-bg: null !default;
10
- $table-accent-bg: rgba($black, .05) !default;
11
- $table-hover-color: $table-color !default;
12
- $table-hover-bg: rgba($black, .075) !default;
13
- $table-active-bg: $table-hover-bg !default;
14
-
15
- $table-border-width: $border-width !default;
16
- $table-border-color: $border-color !default;
17
-
18
- $table-head-bg: theme-color("gray", "background") !default;
19
- $table-head-color: theme-color("gray", "text") !default;
20
-
21
- $table-dark-color: $white !default;
22
- $table-dark-bg: theme-color("gray", "hover") !default;
23
- $table-dark-accent-bg: rgba($white, .05) !default;
24
- $table-dark-hover-color: $table-dark-color !default;
25
- $table-dark-hover-bg: rgba($white, .075) !default;
26
- $table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;
27
- $table-dark-color: $white !default;
28
-
29
- $table-striped-order: odd !default;
30
-
31
- $table-caption-color: $text-muted !default;
32
-
33
- $table-bg-level: -9 !default;
34
- $table-border-level: -6 !default;
@@ -1,198 +0,0 @@
1
- /* eslint-disable max-len */
2
- import React from 'react';
3
- import classNames from 'classnames';
4
- import isRequiredIf from 'react-proptype-conditional-require';
5
- import PropTypes from 'prop-types';
6
- import Button from '../Button';
7
- import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
8
- class Table extends React.Component {
9
- constructor(props) {
10
- super(props);
11
- this.state = {
12
- sortedColumn: props.tableSortable ? this.props.defaultSortedColumn : '',
13
- sortDirection: props.tableSortable ? this.props.defaultSortDirection : ''
14
- };
15
- this.onSortClick = this.onSortClick.bind(this);
16
- }
17
- onSortClick(columnKey) {
18
- let newDirection = 'desc';
19
- if (this.state.sortedColumn === columnKey) {
20
- newDirection = this.state.sortDirection === 'desc' ? 'asc' : 'desc';
21
- }
22
- this.setState({
23
- sortedColumn: columnKey,
24
- sortDirection: newDirection
25
- });
26
- const currentlySortedColumn = this.props.columns.find(column => columnKey === column.key);
27
- currentlySortedColumn.onSort(newDirection);
28
- }
29
- getCaption() {
30
- return this.props.caption && /*#__PURE__*/React.createElement("caption", null, this.props.caption);
31
- }
32
- getSortButtonScreenReaderText(columnKey) {
33
- let text;
34
- if (this.state.sortedColumn === columnKey) {
35
- text = this.props.sortButtonsScreenReaderText[this.state.sortDirection];
36
- } else {
37
- text = this.props.sortButtonsScreenReaderText.defaultText;
38
- }
39
- return text;
40
- }
41
- getSortIcon(sortDirection) {
42
- const sortIconClassName = ['fa-sort', sortDirection].filter(n => n).join('-');
43
- return /*#__PURE__*/React.createElement("span", {
44
- className: classNames('fa', sortIconClassName),
45
- "aria-hidden": true
46
- });
47
- }
48
- getTableHeading(column) {
49
- let heading;
50
- if (this.props.tableSortable && column.columnSortable) {
51
- heading = /*#__PURE__*/React.createElement(Button, {
52
- variant: "header",
53
- onClick: () => this.onSortClick(column.key)
54
- }, /*#__PURE__*/React.createElement("span", null, column.label, /*#__PURE__*/React.createElement("span", {
55
- className: classNames('sr-only'),
56
- "data-testid": "table-heading-sr"
57
- }, ' ', this.getSortButtonScreenReaderText(column.key)), ' ', this.getSortIcon(column.key === this.state.sortedColumn ? this.state.sortDirection : '')));
58
- } else if (column.hideHeader) {
59
- heading = /*#__PURE__*/React.createElement("span", {
60
- className: classNames('sr-only'),
61
- "data-testid": "table-heading-sr"
62
- }, column.label);
63
- } else {
64
- heading = column.label;
65
- }
66
- return heading;
67
- }
68
- getHeadings() {
69
- return /*#__PURE__*/React.createElement("thead", {
70
- className: classNames(...this.props.headingClassName, {
71
- 'd-inline': this.props.hasFixedColumnWidths
72
- })
73
- }, /*#__PURE__*/React.createElement("tr", {
74
- className: classNames({
75
- 'd-flex': this.props.hasFixedColumnWidths
76
- })
77
- }, this.props.columns.map(col => /*#__PURE__*/React.createElement("th", {
78
- className: classNames({
79
- sortable: this.props.tableSortable && col.columnSortable
80
- }, this.props.hasFixedColumnWidths ? col.width : null),
81
- key: col.key,
82
- scope: "col"
83
- }, this.getTableHeading(col)))));
84
- }
85
- getBody() {
86
- return /*#__PURE__*/React.createElement("tbody", {
87
- className: classNames({
88
- 'd-inline': this.props.hasFixedColumnWidths
89
- })
90
- }, this.props.data.map((row, i) => /*#__PURE__*/React.createElement("tr", {
91
- // eslint-disable-next-line react/no-array-index-key
92
- key: i,
93
- className: classNames({
94
- 'd-flex': this.props.hasFixedColumnWidths
95
- })
96
- }, this.props.columns.map(_ref => {
97
- let {
98
- key,
99
- width
100
- } = _ref;
101
- return /*#__PURE__*/React.createElement(key === this.props.rowHeaderColumnKey ? 'th' : 'td', {
102
- key,
103
- className: classNames(this.props.hasFixedColumnWidths ? width : null),
104
- scope: key === this.props.rowHeaderColumnKey ? 'row' : null
105
- }, row[key]);
106
- }))));
107
- }
108
- render() {
109
- return /*#__PURE__*/React.createElement("table", {
110
- className: classNames('table', this.props.className)
111
- }, this.getCaption(), this.getHeadings(), this.getBody());
112
- }
113
- }
114
- Table.propTypes = {
115
- caption: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
116
- className: PropTypes.string,
117
- /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
118
- 1. `label` (string or element; required) contains the display string for each column's heading.
119
- 2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.
120
- 3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.
121
- 4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.
122
- 5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.
123
- 6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.
124
- The order of objects in `columns` specifies the order of the columns in the table. */
125
- data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
126
- /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
127
- 1. `label` (string or element; required) contains the display string for each column's heading.
128
- 2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.
129
- 3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.
130
- 4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.
131
- 5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.
132
- 6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.
133
- The order of objects in `columns` specifies the order of the columns in the table. */
134
- columns: PropTypes.arrayOf(PropTypes.shape({
135
- key: PropTypes.string.isRequired,
136
- label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
137
- columnSortable: isRequiredIf(PropTypes.bool, props => props.tableSortable),
138
- onSort: isRequiredIf(PropTypes.func, props => props.columnSortable),
139
- hideHeader: PropTypes.bool,
140
- width: isRequiredIf(PropTypes.string, props => props.hasFixedColumnWidths)
141
- })).isRequired,
142
- /** Specifies Bootstrap class names to apply to the table heading. Options are detailed in [Bootstrap's docs](https://getbootstrap.com/docs/4.0/content/tables/#table-head-options).
143
- */
144
- headingClassName: PropTypes.arrayOf(PropTypes.string),
145
- /** Specifies whether the table is sortable. This setting supercedes column-level sortability, so if it is `false`, no sortable components will be rendered. */
146
- tableSortable: PropTypes.bool,
147
- /** Specifies whether the table's columns have fixed widths. Every element in `columns` must define a `width` if this is `true`.
148
- */
149
- hasFixedColumnWidths: PropTypes.bool,
150
- /* eslint-disable react/require-default-props */
151
- /** Specifies the key of the column that is sorted by default. It is only required if `tableSortable` is set to `true`. */
152
- defaultSortedColumn: isRequiredIf(PropTypes.string, props => props.tableSortable),
153
- /* eslint-disable react/require-default-props */
154
- /** Specifies the direction the `defaultSortedColumn` is sorted in by default; it will typically be either 'asc' or 'desc'. It is only required if `tableSortable` is set to `true`. */
155
- defaultSortDirection: isRequiredIf(PropTypes.string, props => props.tableSortable),
156
- /** Specifies the screen reader only text that accompanies the sort buttons for sortable columns. It takes the form of an object containing the following keys:
157
- 1. `asc`: (string) specifies the screen reader only text for sort buttons in the ascending state.
158
- 2. `desc`: (string) specifies the screen reader only text for sort buttons in the descending state.
159
- 3. `defaultText`: (string) specifies the screen reader only text for sort buttons that are not engaged.
160
- It is only required if `tableSortable` is set to `true`.
161
- Default:
162
- ```javascript
163
- {
164
- asc: 'sort ascending',
165
- desc: 'sort descending',
166
- defaultText: 'click to sort',
167
- }
168
- ``` */
169
- sortButtonsScreenReaderText: isRequiredIf(PropTypes.shape({
170
- asc: PropTypes.string,
171
- desc: PropTypes.string,
172
- defaultText: PropTypes.string
173
- }), props => props.tableSortable),
174
- /** Specifies the key for the column that should act as a row header. Rather than rendering as `<td>` elements,
175
- cells in this column will render as `<th scope="row">` */
176
- rowHeaderColumnKey: PropTypes.string
177
- };
178
- Table.defaultProps = {
179
- caption: null,
180
- className: undefined,
181
- headingClassName: [],
182
- tableSortable: false,
183
- hasFixedColumnWidths: false,
184
- sortButtonsScreenReaderText: {
185
- asc: 'sort ascending',
186
- desc: 'sort descending',
187
- defaultText: 'click to sort'
188
- }
189
- };
190
- export default withDeprecatedProps(Table, 'TableDeprecated', {
191
- className: {
192
- deprType: DeprTypes.FORMAT,
193
- expect: value => typeof value === 'string',
194
- transform: value => Array.isArray(value) ? value.join(' ') : value,
195
- message: 'It should be a string.'
196
- }
197
- });
198
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","names":["React","classNames","isRequiredIf","PropTypes","Button","withDeprecatedProps","DeprTypes","Table","Component","constructor","props","state","sortedColumn","tableSortable","defaultSortedColumn","sortDirection","defaultSortDirection","onSortClick","bind","columnKey","newDirection","setState","currentlySortedColumn","columns","find","column","key","onSort","getCaption","caption","createElement","getSortButtonScreenReaderText","text","sortButtonsScreenReaderText","defaultText","getSortIcon","sortIconClassName","filter","n","join","className","getTableHeading","heading","columnSortable","variant","onClick","label","hideHeader","getHeadings","headingClassName","hasFixedColumnWidths","map","col","sortable","width","scope","getBody","data","row","i","_ref","rowHeaderColumnKey","render","propTypes","oneOfType","string","element","arrayOf","shape","isRequired","bool","func","asc","desc","defaultProps","undefined","deprType","FORMAT","expect","value","transform","Array","isArray","message"],"sources":["../../src/Table/index.jsx"],"sourcesContent":["/* eslint-disable max-len */\nimport React from 'react';\nimport classNames from 'classnames';\nimport isRequiredIf from 'react-proptype-conditional-require';\nimport PropTypes from 'prop-types';\n\nimport Button from '../Button';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nclass Table extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n sortedColumn: props.tableSortable ? this.props.defaultSortedColumn : '',\n sortDirection: props.tableSortable ? this.props.defaultSortDirection : '',\n };\n\n this.onSortClick = this.onSortClick.bind(this);\n }\n\n onSortClick(columnKey) {\n let newDirection = 'desc';\n\n if (this.state.sortedColumn === columnKey) {\n newDirection = (this.state.sortDirection === 'desc' ? 'asc' : 'desc');\n }\n\n this.setState({\n sortedColumn: columnKey,\n sortDirection: newDirection,\n });\n\n const currentlySortedColumn = this.props.columns.find(column => (columnKey === column.key));\n currentlySortedColumn.onSort(newDirection);\n }\n\n getCaption() {\n return this.props.caption && (\n <caption>{this.props.caption}</caption>\n );\n }\n\n getSortButtonScreenReaderText(columnKey) {\n let text;\n\n if (this.state.sortedColumn === columnKey) {\n text = this.props.sortButtonsScreenReaderText[this.state.sortDirection];\n } else {\n text = this.props.sortButtonsScreenReaderText.defaultText;\n }\n\n return text;\n }\n\n getSortIcon(sortDirection) {\n const sortIconClassName = ['fa-sort', sortDirection].filter(n => n).join('-');\n\n return (\n <span\n className={classNames('fa', sortIconClassName)}\n aria-hidden\n />\n );\n }\n\n getTableHeading(column) {\n let heading;\n if (this.props.tableSortable && column.columnSortable) {\n heading = (\n <Button\n variant=\"header\"\n onClick={() => this.onSortClick(column.key)}\n >\n <span>\n {column.label}\n <span className={classNames('sr-only')} data-testid=\"table-heading-sr\">\n {' '}\n {this.getSortButtonScreenReaderText(column.key)}\n </span>\n {' '}\n {this.getSortIcon(column.key === this.state.sortedColumn ? this.state.sortDirection : '')}\n </span>\n </Button>\n );\n } else if (column.hideHeader) {\n heading = (<span className={classNames('sr-only')} data-testid=\"table-heading-sr\">{column.label}</span>);\n } else {\n heading = column.label;\n }\n\n return heading;\n }\n\n getHeadings() {\n return (\n <thead\n className={classNames(\n ...this.props.headingClassName,\n { 'd-inline': this.props.hasFixedColumnWidths },\n )}\n >\n <tr className={classNames({ 'd-flex': this.props.hasFixedColumnWidths })}>\n {this.props.columns.map(col => (\n <th\n className={classNames(\n { sortable: this.props.tableSortable && col.columnSortable },\n this.props.hasFixedColumnWidths ? col.width : null,\n )}\n key={col.key}\n scope=\"col\"\n >\n {this.getTableHeading(col)}\n </th>\n ))}\n </tr>\n </thead>\n );\n }\n\n getBody() {\n return (\n <tbody className={classNames({ 'd-inline': this.props.hasFixedColumnWidths })}>\n {this.props.data.map((row, i) => (\n <tr\n // eslint-disable-next-line react/no-array-index-key\n key={i}\n className={classNames({ 'd-flex': this.props.hasFixedColumnWidths })}\n >\n {this.props.columns.map(({ key, width }) => (\n React.createElement(\n (key === this.props.rowHeaderColumnKey) ? 'th' : 'td',\n {\n key,\n className: classNames(this.props.hasFixedColumnWidths ? width : null),\n scope: (key === this.props.rowHeaderColumnKey) ? 'row' : null,\n },\n row[key],\n )\n ))}\n </tr>\n ))}\n </tbody>\n );\n }\n\n render() {\n return (\n <table className={classNames(\n 'table',\n this.props.className,\n )}\n >\n {this.getCaption()}\n {this.getHeadings()}\n {this.getBody()}\n </table>\n );\n }\n}\n\nTable.propTypes = {\n caption: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.element,\n ]),\n className: PropTypes.string,\n /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:\n\n1. `label` (string or element; required) contains the display string for each column's heading.\n2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.\n3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.\n4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.\n5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.\n6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.\n\nThe order of objects in `columns` specifies the order of the columns in the table. */\n data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:\n\n1. `label` (string or element; required) contains the display string for each column's heading.\n2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.\n3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.\n4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.\n5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.\n6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.\n\nThe order of objects in `columns` specifies the order of the columns in the table. */\n columns: PropTypes.arrayOf(PropTypes.shape({\n key: PropTypes.string.isRequired,\n label: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.element,\n ]).isRequired,\n columnSortable: isRequiredIf(PropTypes.bool, props => props.tableSortable),\n onSort: isRequiredIf(PropTypes.func, props => props.columnSortable),\n hideHeader: PropTypes.bool,\n width: isRequiredIf(PropTypes.string, props => props.hasFixedColumnWidths),\n })).isRequired,\n /** Specifies Bootstrap class names to apply to the table heading. Options are detailed in [Bootstrap's docs](https://getbootstrap.com/docs/4.0/content/tables/#table-head-options).\n */\n headingClassName: PropTypes.arrayOf(PropTypes.string),\n /** Specifies whether the table is sortable. This setting supercedes column-level sortability, so if it is `false`, no sortable components will be rendered. */\n tableSortable: PropTypes.bool,\n /** Specifies whether the table's columns have fixed widths. Every element in `columns` must define a `width` if this is `true`.\n */\n hasFixedColumnWidths: PropTypes.bool,\n /* eslint-disable react/require-default-props */\n /** Specifies the key of the column that is sorted by default. It is only required if `tableSortable` is set to `true`. */\n defaultSortedColumn: isRequiredIf(PropTypes.string, props => props.tableSortable),\n /* eslint-disable react/require-default-props */\n /** Specifies the direction the `defaultSortedColumn` is sorted in by default; it will typically be either 'asc' or 'desc'. It is only required if `tableSortable` is set to `true`. */\n defaultSortDirection: isRequiredIf(PropTypes.string, props => props.tableSortable),\n /** Specifies the screen reader only text that accompanies the sort buttons for sortable columns. It takes the form of an object containing the following keys:\n\n1. `asc`: (string) specifies the screen reader only text for sort buttons in the ascending state.\n2. `desc`: (string) specifies the screen reader only text for sort buttons in the descending state.\n3. `defaultText`: (string) specifies the screen reader only text for sort buttons that are not engaged.\n\nIt is only required if `tableSortable` is set to `true`.\n\nDefault:\n\n```javascript\n{\n asc: 'sort ascending',\n desc: 'sort descending',\n defaultText: 'click to sort',\n}\n``` */\n sortButtonsScreenReaderText: isRequiredIf(\n PropTypes.shape({\n asc: PropTypes.string,\n desc: PropTypes.string,\n defaultText: PropTypes.string,\n }),\n props => props.tableSortable,\n ),\n /** Specifies the key for the column that should act as a row header. Rather than rendering as `<td>` elements,\ncells in this column will render as `<th scope=\"row\">` */\n rowHeaderColumnKey: PropTypes.string,\n};\n\nTable.defaultProps = {\n caption: null,\n className: undefined,\n headingClassName: [],\n tableSortable: false,\n hasFixedColumnWidths: false,\n sortButtonsScreenReaderText: {\n asc: 'sort ascending',\n desc: 'sort descending',\n defaultText: 'click to sort',\n },\n};\n\nexport default withDeprecatedProps(Table, 'TableDeprecated', {\n className: {\n deprType: DeprTypes.FORMAT,\n expect: value => typeof value === 'string',\n transform: value => (Array.isArray(value) ? value.join(' ') : value),\n message: 'It should be a string.',\n },\n});\n"],"mappings":"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"}
@@ -1,12 +0,0 @@
1
- @import "variables";
2
- @import "~bootstrap/scss/tables";
3
-
4
- .btn-header {
5
- padding: 0;
6
- font-weight: $font-weight-bold;
7
- }
8
-
9
- .table th,
10
- .table td {
11
- word-wrap: break-word;
12
- }
@@ -1,24 +0,0 @@
1
- $tab-notification-height: 1rem !default;
2
- $tab-notification-width: 1rem !default;
3
- $tab-notification-font-size: $font-size-xs !default;
4
- $tab-more-link-dropdown-toggle-padding-x: .7rem !default;
5
- $tab-more-link-dropdown-toggle-padding-y: $spacer !default;
6
- $tab-more-link-dropdown-toggle-focus-bg: $primary-500 !default;
7
- $tab-more-link-dropdown-toggle-focus-border-color: $tab-more-link-dropdown-toggle-focus-bg !default;
8
- $tab-more-link-dropdown-toggle-focus-color: $white !default;
9
- $tab-more-link-dropdown-toggle-btn-focus-color: $tab-more-link-dropdown-toggle-focus-color !default;
10
- $tab-more-link-dropdown-toggle-btn-focus-border-color: $tab-more-link-dropdown-toggle-focus-bg !default;
11
- $tab-more-link-dropdown-toggle-active-color: $tab-more-link-dropdown-toggle-focus-color !default;
12
- $tab-more-link-dropdown-toggle-hover-color: $tab-more-link-dropdown-toggle-focus-bg !default;
13
- $tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem !default;
14
- $tab-inverse-pills-link-dropdown-toggle-padding-y: $spacer !default;
15
- $tab-inverse-pills-link-dropdown-toggle-focus-bg: $white !default;
16
- $tab-inverse-pills-link-dropdown-toggle-focus-color: $primary-500 !default;
17
- $tab-inverse-pills-link-dropdown-toggle-focus-border-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
18
- $tab-inverse-pills-link-dropdown-toggle-active-color: $tab-inverse-pills-link-dropdown-toggle-focus-color !default;
19
- $tab-inverse-pills-link-dropdown-toggle-active-hover-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
20
- $tab-inverse-pills-link-dropdown-toggle-active-hover-bg: $primary-300 !default;
21
- $tab-inverse-pills-link-dropdown-distance: 5px !default;
22
- $tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem !default;
23
- $tab-inverse-tabs-link-dropdown-toggle-padding-y: $spacer !default;
24
- $tab-inverse-tabs-link-dropdown-toggle-hover-bg: transparent !default;
@@ -1,3 +0,0 @@
1
- .nav-tabs .nav-link {
2
- background: transparent;
3
- }
@@ -1,90 +0,0 @@
1
- // TODO: @jaebradley fix these eslint errors
2
- /* eslint-disable jsx-a11y/click-events-have-key-events */
3
- /* eslint-disable jsx-a11y/anchor-is-valid */
4
- /* eslint-disable max-len */
5
- import React from 'react';
6
- import classNames from 'classnames';
7
- import PropTypes from 'prop-types';
8
- import newId from '../../utils/newId';
9
- class Tabs extends React.Component {
10
- constructor(props) {
11
- super(props);
12
- this.toggle = this.toggle.bind(this);
13
- this.state = {
14
- activeTab: 0,
15
- uuid: newId('tabInterface')
16
- };
17
- }
18
- toggle(tab) {
19
- if (this.state.activeTab !== tab) {
20
- this.setState({
21
- activeTab: tab
22
- });
23
- }
24
- }
25
- genLabelId(index) {
26
- return `tab-label-${this.state.uuid}-${index}`;
27
- }
28
- genPanelId(index) {
29
- return `tab-panel-${this.state.uuid}-${index}`;
30
- }
31
- buildLabels() {
32
- return this.props.labels.map((label, i) => {
33
- const selected = this.state.activeTab === i;
34
- const labelId = this.genLabelId(i);
35
- return /*#__PURE__*/React.createElement("li", {
36
- key: labelId
37
- }, /*#__PURE__*/React.createElement("button", {
38
- role: "tab",
39
- "aria-selected": selected,
40
- "aria-controls": this.genPanelId(i),
41
- id: labelId,
42
- onClick: () => {
43
- this.toggle(i);
44
- },
45
- className: classNames('nav-link nav-item', {
46
- active: selected
47
- })
48
- }, label));
49
- });
50
- }
51
- buildPanels() {
52
- return this.props.children.map((panel, i) => {
53
- const selected = this.state.activeTab === i;
54
- const panelId = this.genPanelId(i);
55
- return /*#__PURE__*/React.createElement("div", {
56
- "aria-hidden": !selected,
57
- "aria-labelledby": this.genLabelId(i),
58
- className: classNames('tab-pane', {
59
- active: selected
60
- }),
61
- id: panelId,
62
- key: panelId,
63
- role: "tabpanel"
64
- }, panel);
65
- });
66
- }
67
- render() {
68
- const labels = this.buildLabels();
69
- const panels = this.buildPanels();
70
- return /*#__PURE__*/React.createElement("div", {
71
- className: "tabs"
72
- }, /*#__PURE__*/React.createElement("ul", {
73
- role: "tablist",
74
- className: classNames(['nav', 'nav-tabs'])
75
- }, labels), /*#__PURE__*/React.createElement("div", {
76
- role: "tabpanel",
77
- className: "tab-content"
78
- }, panels));
79
- }
80
- }
81
- // TODO: custom validator that ensures labels and panels are the same length
82
- Tabs.propTypes = {
83
- /** specifies the list of elements that will be displayed within each of the tabbed views. It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing `<Tabs> </Tabs>` tags. */
84
- labels: PropTypes.arrayOf(PropTypes.node).isRequired,
85
- /** specifies the list of headings that will appear on all of the tabs that will be created.
86
- */
87
- children: PropTypes.arrayOf(PropTypes.element).isRequired
88
- };
89
- export default Tabs;
90
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","names":["React","classNames","PropTypes","newId","Tabs","Component","constructor","props","toggle","bind","state","activeTab","uuid","tab","setState","genLabelId","index","genPanelId","buildLabels","labels","map","label","i","selected","labelId","createElement","key","role","id","onClick","className","active","buildPanels","children","panel","panelId","render","panels","propTypes","arrayOf","node","isRequired","element"],"sources":["../../../src/Tabs/deprecated/index.jsx"],"sourcesContent":["// TODO: @jaebradley fix these eslint errors\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/anchor-is-valid */\n/* eslint-disable max-len */\nimport React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport newId from '../../utils/newId';\n\nclass Tabs extends React.Component {\n constructor(props) {\n super(props);\n\n this.toggle = this.toggle.bind(this);\n this.state = {\n activeTab: 0,\n uuid: newId('tabInterface'),\n };\n }\n\n toggle(tab) {\n if (this.state.activeTab !== tab) {\n this.setState({\n activeTab: tab,\n });\n }\n }\n\n genLabelId(index) {\n return `tab-label-${this.state.uuid}-${index}`;\n }\n\n genPanelId(index) {\n return `tab-panel-${this.state.uuid}-${index}`;\n }\n\n buildLabels() {\n return this.props.labels.map((label, i) => {\n const selected = this.state.activeTab === i;\n const labelId = this.genLabelId(i);\n\n return (\n <li key={labelId}>\n {/* eslint-disable-next-line react/button-has-type */}\n <button\n role=\"tab\"\n aria-selected={selected}\n aria-controls={this.genPanelId(i)}\n id={labelId}\n onClick={() => { this.toggle(i); }}\n className={classNames('nav-link nav-item', {\n active: selected,\n })}\n >\n {label}\n </button>\n </li>\n );\n });\n }\n\n buildPanels() {\n return this.props.children.map((panel, i) => {\n const selected = this.state.activeTab === i;\n const panelId = this.genPanelId(i);\n\n return (\n <div\n aria-hidden={!selected}\n aria-labelledby={this.genLabelId(i)}\n className={classNames(\n 'tab-pane',\n { active: selected },\n )}\n id={panelId}\n key={panelId}\n role=\"tabpanel\"\n >\n {panel}\n </div>\n );\n });\n }\n\n render() {\n const labels = this.buildLabels();\n const panels = this.buildPanels();\n\n return (\n <div className=\"tabs\">\n <ul\n role=\"tablist\"\n className={classNames([\n 'nav',\n 'nav-tabs',\n ])}\n >\n {labels}\n </ul>\n <div role=\"tabpanel\" className=\"tab-content\">\n {panels}\n </div>\n </div>\n );\n }\n}\n// TODO: custom validator that ensures labels and panels are the same length\nTabs.propTypes = {\n /** specifies the list of elements that will be displayed within each of the tabbed views. It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing `<Tabs> </Tabs>` tags. */\n labels: PropTypes.arrayOf(PropTypes.node).isRequired,\n /** specifies the list of headings that will appear on all of the tabs that will be created.\n */\n children: PropTypes.arrayOf(PropTypes.element).isRequired,\n};\n\nexport default Tabs;\n"],"mappings":"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"}
@@ -1,42 +0,0 @@
1
- const _excluded = ["className", "inputRef"];
2
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
5
- /* eslint-disable max-len */
6
- import React from 'react';
7
- import PropTypes from 'prop-types';
8
- import asInput from '../asInput';
9
- import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
10
- function Text(props) {
11
- const {
12
- className,
13
- inputRef
14
- } = props,
15
- others = _objectWithoutProperties(props, _excluded);
16
- return /*#__PURE__*/React.createElement("textarea", _extends({}, others, {
17
- className: className,
18
- ref: inputRef
19
- }));
20
- }
21
- Text.propTypes = {
22
- className: PropTypes.string,
23
- /** specifies all of the properties that are necessary from the included `asInput` component. Please see details for input requirements within that component.
24
- */
25
- inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
26
- current: PropTypes.instanceOf(PropTypes.element)
27
- })])
28
- };
29
- Text.defaultProps = {
30
- className: undefined,
31
- inputRef: undefined
32
- };
33
- const TextArea = asInput(withDeprecatedProps(Text, 'TextArea', {
34
- className: {
35
- deprType: DeprTypes.FORMAT,
36
- expect: value => typeof value === 'string',
37
- transform: value => Array.isArray(value) ? value.join(' ') : value,
38
- message: 'It should be a string.'
39
- }
40
- }));
41
- export default TextArea;
42
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","asInput","withDeprecatedProps","DeprTypes","Text","props","className","inputRef","others","_objectWithoutProperties","_excluded","createElement","_extends","ref","propTypes","string","oneOfType","func","shape","current","instanceOf","element","defaultProps","undefined","TextArea","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/TextArea/index.jsx"],"sourcesContent":["/* eslint-disable max-len */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport asInput from '../asInput';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nfunction Text(props) {\n const {\n className,\n inputRef,\n ...others\n } = props;\n\n return (\n <textarea\n {...others}\n className={className}\n ref={inputRef}\n />\n );\n}\n\nText.propTypes = {\n className: PropTypes.string,\n /** specifies all of the properties that are necessary from the included `asInput` component. Please see details for input requirements within that component.\n */\n inputRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.element) }),\n ]),\n};\n\nText.defaultProps = {\n className: undefined,\n inputRef: undefined,\n};\n\nconst TextArea = asInput(withDeprecatedProps(Text, 'TextArea', {\n className: {\n deprType: DeprTypes.FORMAT,\n expect: value => typeof value === 'string',\n transform: value => (Array.isArray(value) ? value.join(' ') : value),\n message: 'It should be a string.',\n },\n}));\n\nexport default TextArea;\n"],"mappings":";;;;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,OAAO,MAAM,YAAY;AAChC,OAAOC,mBAAmB,IAAIC,SAAS,QAAQ,wBAAwB;AAEvE,SAASC,IAAIA,CAACC,KAAK,EAAE;EACnB,MAAM;MACJC,SAAS;MACTC;IAEF,CAAC,GAAGF,KAAK;IADJG,MAAM,GAAAC,wBAAA,CACPJ,KAAK,EAAAK,SAAA;EAET,oBACEX,KAAA,CAAAY,aAAA,aAAAC,QAAA,KACMJ,MAAM;IACVF,SAAS,EAAEA,SAAU;IACrBO,GAAG,EAAEN;EAAS,EACf,CAAC;AAEN;AAEAH,IAAI,CAACU,SAAS,GAAG;EACfR,SAAS,EAAEN,SAAS,CAACe,MAAM;EAC3B;AACF;EACER,QAAQ,EAAEP,SAAS,CAACgB,SAAS,CAAC,CAC5BhB,SAAS,CAACiB,IAAI,EACdjB,SAAS,CAACkB,KAAK,CAAC;IAAEC,OAAO,EAAEnB,SAAS,CAACoB,UAAU,CAACpB,SAAS,CAACqB,OAAO;EAAE,CAAC,CAAC,CACtE;AACH,CAAC;AAEDjB,IAAI,CAACkB,YAAY,GAAG;EAClBhB,SAAS,EAAEiB,SAAS;EACpBhB,QAAQ,EAAEgB;AACZ,CAAC;AAED,MAAMC,QAAQ,GAAGvB,OAAO,CAACC,mBAAmB,CAACE,IAAI,EAAE,UAAU,EAAE;EAC7DE,SAAS,EAAE;IACTmB,QAAQ,EAAEtB,SAAS,CAACuB,MAAM;IAC1BC,MAAM,EAAEC,KAAK,IAAI,OAAOA,KAAK,KAAK,QAAQ;IAC1CC,SAAS,EAAED,KAAK,IAAKE,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,GAAGA,KAAK,CAACI,IAAI,CAAC,GAAG,CAAC,GAAGJ,KAAM;IACpEK,OAAO,EAAE;EACX;AACF,CAAC,CAAC,CAAC;AAEH,eAAeT,QAAQ"}
@@ -1,19 +0,0 @@
1
- // Toasts
2
-
3
- $toast-max-width: 400px !default;
4
- $toast-padding-x: .75rem !default;
5
- $toast-padding-y: .25rem !default;
6
- $toast-font-size: .875rem !default;
7
- $toast-color: null !default;
8
- $toast-background-color: $gray-700 !default;
9
- $toast-border-width: 1px !default;
10
- $toast-border-color: rgba(0, 0, 0, .1) !default;
11
- $toast-border-radius: .25rem !default;
12
- $toast-box-shadow: 0 1.25rem 2.5rem rgba($black, .15), 0 .5rem 3rem rgba($black, .15) !default;
13
-
14
- $toast-header-color: $white !default;
15
- $toast-header-background-color: $gray-700 !default;
16
- $toast-header-border-color: rgba(0, 0, 0, .5) !default;
17
-
18
- $toast-container-gutter-lg: 1.25rem !default;
19
- $toast-container-gutter-sm: .625rem !default;
@@ -1,21 +0,0 @@
1
- // Tooltips
2
-
3
- $tooltip-font-size: $font-size-sm !default;
4
- $tooltip-max-width: 200px !default;
5
- $tooltip-color: $white !default;
6
- $tooltip-bg: $black !default;
7
- $tooltip-border-radius: $border-radius !default;
8
- $tooltip-opacity: 1 !default;
9
- $tooltip-padding-y: .5rem !default;
10
- $tooltip-padding-x: .5rem !default;
11
- $tooltip-margin: 0 !default;
12
- $tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
13
- drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
14
-
15
- $tooltip-arrow-width: .8rem !default;
16
- $tooltip-arrow-height: .4rem !default;
17
- $tooltip-arrow-color: $tooltip-bg !default;
18
-
19
- $tooltip-color-light: $black !default;
20
- $tooltip-bg-light: $white !default;
21
- $tooltip-arrow-color-light: $white !default;
@@ -1,105 +0,0 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
- import classNames from 'classnames';
4
- import Input from '../Input';
5
- import { FormControl } from '../Form';
6
- const propTypes = {
7
- /** Id of the form input that the validation is for */
8
- for: PropTypes.string.isRequired,
9
- /** Additional classnames for this component */
10
- className: PropTypes.string,
11
- /** Determines if invalid styles / message will be shown */
12
- invalid: PropTypes.bool,
13
- /** Determines if invalid styles / message will be shown */
14
- valid: PropTypes.bool,
15
- /** Message to display on valid input */
16
- validMessage: PropTypes.node,
17
- /** Message to display on invalid input */
18
- invalidMessage: PropTypes.node,
19
- /** Help text for the form input */
20
- helpText: PropTypes.node,
21
- /** Specifies contents of the component. */
22
- children: PropTypes.node
23
- };
24
- const defaultProps = {
25
- invalid: undefined,
26
- valid: undefined,
27
- validMessage: undefined,
28
- invalidMessage: undefined,
29
- helpText: undefined,
30
- children: undefined,
31
- className: undefined
32
- };
33
- function ValidationFormGroup(props) {
34
- const {
35
- className,
36
- invalidMessage,
37
- invalid,
38
- valid,
39
- validMessage,
40
- helpText,
41
- for: id,
42
- children
43
- } = props;
44
- const renderChildren = () => React.Children.map(children, child => {
45
- // Any non-user input element should pass through unmodified
46
- if (['input', 'textarea', 'select', Input, FormControl].indexOf(child.type) === -1) {
47
- return child;
48
- }
49
-
50
- // Add validation class names and describedby values to input element
51
- return /*#__PURE__*/React.cloneElement(child, {
52
- className: classNames(child.props.className, {
53
- 'is-invalid': invalid,
54
- 'is-valid': valid
55
- }),
56
- // This is a non-standard use of the classNames package, but it's exactly the same use case.
57
- 'aria-describedby': classNames(child.props['aria-describedby'], {
58
- [`${id}-help-text`]: Boolean(helpText),
59
- [`${id}-invalid-feedback`]: invalid && invalidMessage,
60
- [`${id}-valid-feedback`]: valid && validMessage
61
- })
62
- });
63
- });
64
- const renderHelpText = text => {
65
- if (!text) {
66
- return null;
67
- }
68
- return /*#__PURE__*/React.createElement("small", {
69
- id: `${id}-help-text`,
70
- className: "form-text text-muted"
71
- }, text);
72
- };
73
-
74
- /**
75
- * The red text conveys semantic emphasis using color and font weight. For WCAG 2.1, the
76
- * semantics need to be exposed programmatically as well. To do this, we use <strong/>
77
- * elements and attach the formatting classes to them.
78
- */
79
- const renderInvalidFeedback = message => {
80
- if (!message) {
81
- return null;
82
- }
83
- return /*#__PURE__*/React.createElement("strong", {
84
- id: `${id}-invalid-feedback`,
85
- className: "invalid-feedback"
86
- }, message);
87
- };
88
- const renderValidFeedback = message => {
89
- if (!message) {
90
- return null;
91
- }
92
- return /*#__PURE__*/React.createElement("div", {
93
- className: "valid-feedback",
94
- id: `${id}-valid-feedback`
95
- }, message);
96
- };
97
- return /*#__PURE__*/React.createElement("div", {
98
- className: classNames('form-group', className),
99
- "data-testid": "validation-form-group"
100
- }, renderChildren(), renderHelpText(helpText), renderInvalidFeedback(invalidMessage), renderValidFeedback(validMessage));
101
- }
102
- ValidationFormGroup.propTypes = propTypes;
103
- ValidationFormGroup.defaultProps = defaultProps;
104
- export default ValidationFormGroup;
105
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","classNames","Input","FormControl","propTypes","for","string","isRequired","className","invalid","bool","valid","validMessage","node","invalidMessage","helpText","children","defaultProps","undefined","ValidationFormGroup","props","id","renderChildren","Children","map","child","indexOf","type","cloneElement","Boolean","renderHelpText","text","createElement","renderInvalidFeedback","message","renderValidFeedback"],"sources":["../../src/ValidationFormGroup/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Input from '../Input';\nimport { FormControl } from '../Form';\n\nconst propTypes = {\n /** Id of the form input that the validation is for */\n for: PropTypes.string.isRequired,\n /** Additional classnames for this component */\n className: PropTypes.string,\n /** Determines if invalid styles / message will be shown */\n invalid: PropTypes.bool,\n /** Determines if invalid styles / message will be shown */\n valid: PropTypes.bool,\n /** Message to display on valid input */\n validMessage: PropTypes.node,\n /** Message to display on invalid input */\n invalidMessage: PropTypes.node,\n /** Help text for the form input */\n helpText: PropTypes.node,\n /** Specifies contents of the component. */\n children: PropTypes.node,\n};\n\nconst defaultProps = {\n invalid: undefined,\n valid: undefined,\n validMessage: undefined,\n invalidMessage: undefined,\n helpText: undefined,\n children: undefined,\n className: undefined,\n};\n\nfunction ValidationFormGroup(props) {\n const {\n className,\n invalidMessage,\n invalid,\n valid,\n validMessage,\n helpText,\n for: id,\n children,\n } = props;\n\n const renderChildren = () => React.Children.map(children, (child) => {\n // Any non-user input element should pass through unmodified\n if (['input', 'textarea', 'select', Input, FormControl].indexOf(child.type) === -1) { return child; }\n\n // Add validation class names and describedby values to input element\n return React.cloneElement(child, {\n className: classNames(child.props.className, {\n 'is-invalid': invalid,\n 'is-valid': valid,\n }),\n // This is a non-standard use of the classNames package, but it's exactly the same use case.\n 'aria-describedby': classNames(child.props['aria-describedby'], {\n [`${id}-help-text`]: Boolean(helpText),\n [`${id}-invalid-feedback`]: invalid && invalidMessage,\n [`${id}-valid-feedback`]: valid && validMessage,\n }),\n });\n });\n\n const renderHelpText = (text) => {\n if (!text) { return null; }\n return <small id={`${id}-help-text`} className=\"form-text text-muted\">{text}</small>;\n };\n\n /**\n * The red text conveys semantic emphasis using color and font weight. For WCAG 2.1, the\n * semantics need to be exposed programmatically as well. To do this, we use <strong/>\n * elements and attach the formatting classes to them.\n */\n const renderInvalidFeedback = (message) => {\n if (!message) { return null; }\n return (\n <strong\n id={`${id}-invalid-feedback`}\n className=\"invalid-feedback\"\n >\n {message}\n </strong>\n );\n };\n\n const renderValidFeedback = (message) => {\n if (!message) { return null; }\n return (\n <div\n className=\"valid-feedback\"\n id={`${id}-valid-feedback`}\n >\n {message}\n </div>\n );\n };\n\n return (\n <div className={classNames('form-group', className)} data-testid=\"validation-form-group\">\n {renderChildren()}\n {renderHelpText(helpText)}\n {renderInvalidFeedback(invalidMessage)}\n {renderValidFeedback(validMessage)}\n </div>\n );\n}\n\nValidationFormGroup.propTypes = propTypes;\nValidationFormGroup.defaultProps = defaultProps;\n\nexport default ValidationFormGroup;\n"],"mappings":"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"}