@openedx/paragon 23.0.0-alpha.2 → 23.0.0-alpha.4

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 (274) hide show
  1. package/bin/paragon-scripts.js +10 -0
  2. package/dist/Annotation/index.scss +16 -0
  3. package/dist/Button/index.d.ts +35 -0
  4. package/dist/Button/index.js +37 -15
  5. package/dist/Button/index.js.map +1 -1
  6. package/dist/Card/CardDeck.js +0 -2
  7. package/dist/Card/CardDeck.js.map +1 -1
  8. package/dist/Card/index.scss +6 -6
  9. package/dist/Carousel/index.scss +24 -1
  10. package/dist/Chip/ChipIcon.d.ts +13 -8
  11. package/dist/Chip/ChipIcon.js +0 -2
  12. package/dist/Chip/ChipIcon.js.map +1 -1
  13. package/dist/Chip/constants.d.ts +4 -0
  14. package/dist/Chip/constants.js +3 -2
  15. package/dist/Chip/constants.js.map +1 -0
  16. package/dist/Chip/index.d.ts +4 -3
  17. package/dist/Chip/index.js +2 -4
  18. package/dist/Chip/index.js.map +1 -1
  19. package/dist/ChipCarousel/index.js +0 -2
  20. package/dist/ChipCarousel/index.js.map +1 -1
  21. package/dist/CloseButton/index.scss +8 -0
  22. package/dist/ColorPicker/index.scss +1 -1
  23. package/dist/DataTable/index.scss +12 -0
  24. package/dist/Dropdown/dropdown-bootstrap.scss +6 -0
  25. package/dist/Dropzone/index.scss +34 -0
  26. package/dist/Form/_FormText.scss +1 -1
  27. package/dist/Form/_bootstrap-custom-forms.scss +40 -0
  28. package/dist/Form/_index.scss +9 -0
  29. package/dist/Form/_mixins.scss +22 -0
  30. package/dist/Hyperlink/index.d.ts +24 -0
  31. package/dist/Hyperlink/index.js +20 -32
  32. package/dist/Hyperlink/index.js.map +1 -1
  33. package/dist/Icon/index.d.ts +4 -2
  34. package/dist/Icon/index.js +1 -1
  35. package/dist/Icon/index.js.map +1 -1
  36. package/dist/IconButton/index.d.ts +342 -0
  37. package/dist/IconButton/index.js +18 -26
  38. package/dist/IconButton/index.js.map +1 -1
  39. package/dist/IconButton/index.scss +146 -0
  40. package/dist/Menu/index.scss +8 -0
  41. package/dist/Modal/ModalDialog.js +8 -4
  42. package/dist/Modal/ModalDialog.js.map +1 -1
  43. package/dist/Modal/ModalPopup.js +7 -1
  44. package/dist/Modal/ModalPopup.js.map +1 -1
  45. package/dist/Modal/_ModalDialog.scss +26 -2
  46. package/dist/Nav/index.scss +8 -0
  47. package/dist/Overlay/index.d.ts +128 -0
  48. package/dist/Overlay/index.js +8 -2
  49. package/dist/Overlay/index.js.map +1 -1
  50. package/dist/PageBanner/index.scss +2 -2
  51. package/dist/Pagination/pagination-bootstrap.scss +9 -0
  52. package/dist/Popover/index.scss +1 -1
  53. package/dist/ProductTour/Checkpoint.scss +1 -1
  54. package/dist/ProgressBar/bootstrap-progress.scss +20 -5
  55. package/dist/ProgressBar/index.scss +3 -3
  56. package/dist/Stepper/index.scss +1 -1
  57. package/dist/Sticky/index.scss +12 -0
  58. package/dist/Toast/index.scss +13 -1
  59. package/dist/Tooltip/index.d.ts +7 -0
  60. package/dist/Tooltip/index.js.map +1 -1
  61. package/dist/Tooltip/index.scss +16 -0
  62. package/dist/core.css +914 -470
  63. package/dist/core.css.map +1 -1
  64. package/dist/core.min.css +1 -1
  65. package/dist/index.d.ts +5 -5
  66. package/dist/index.js +7 -7
  67. package/dist/light.css +2035 -1315
  68. package/dist/light.css.map +1 -1
  69. package/dist/light.min.css +1 -1
  70. package/dist/setupTest.d.ts +2 -0
  71. package/dist/setupTest.js.map +1 -0
  72. package/dist/utils/types/bootstrap.d.ts +39 -0
  73. package/dist/utils/types/bootstrap.js +2 -0
  74. package/dist/utils/types/bootstrap.js.map +1 -0
  75. package/lib/build-tokens.js +67 -31
  76. package/package.json +11 -8
  77. package/src/Annotation/index.scss +16 -0
  78. package/src/Button/{Button.test.jsx → Button.test.tsx} +14 -2
  79. package/src/Button/__snapshots__/{Button.test.jsx.snap → Button.test.tsx.snap} +19 -2
  80. package/src/Button/{index.jsx → index.tsx} +58 -16
  81. package/src/Card/CardDeck.jsx +0 -3
  82. package/src/Card/README.md +0 -31
  83. package/src/Card/index.scss +6 -6
  84. package/src/Carousel/index.scss +24 -1
  85. package/src/Chip/{Chip.test.jsx → Chip.test.tsx} +5 -7
  86. package/src/Chip/ChipIcon.tsx +8 -8
  87. package/src/Chip/{constants.js → constants.ts} +1 -1
  88. package/src/Chip/index.tsx +6 -8
  89. package/src/ChipCarousel/index.tsx +0 -2
  90. package/src/CloseButton/index.scss +8 -0
  91. package/src/ColorPicker/index.scss +1 -1
  92. package/src/DataTable/index.scss +12 -0
  93. package/src/Dropdown/dropdown-bootstrap.scss +6 -0
  94. package/src/Dropzone/index.scss +34 -0
  95. package/src/Form/_FormText.scss +1 -1
  96. package/src/Form/_bootstrap-custom-forms.scss +40 -0
  97. package/src/Form/_index.scss +9 -0
  98. package/src/Form/_mixins.scss +22 -0
  99. package/src/Hyperlink/{Hyperlink.test.jsx → Hyperlink.test.tsx} +21 -10
  100. package/src/Hyperlink/{index.jsx → index.tsx} +41 -37
  101. package/src/Icon/index.d.ts +4 -2
  102. package/src/Icon/index.jsx +1 -1
  103. package/src/IconButton/{IconButton.test.jsx → IconButton.test.tsx} +24 -3
  104. package/src/IconButton/__snapshots__/IconButton.test.tsx.snap +90 -0
  105. package/src/IconButton/index.scss +146 -0
  106. package/src/IconButton/{index.jsx → index.tsx} +66 -26
  107. package/src/Menu/index.scss +8 -0
  108. package/src/Modal/ModalDialog.jsx +7 -3
  109. package/src/Modal/ModalPopup.jsx +9 -1
  110. package/src/Modal/_ModalDialog.scss +26 -2
  111. package/src/Modal/modal-dialog.mdx +95 -6
  112. package/src/Modal/tests/ModalDialog.test.jsx +2 -0
  113. package/src/Modal/tests/ModalPopupNoMock.test.jsx +29 -0
  114. package/src/Nav/index.scss +8 -0
  115. package/src/Overlay/{index.jsx → index.tsx} +13 -8
  116. package/src/PageBanner/index.scss +2 -2
  117. package/src/Pagination/pagination-bootstrap.scss +9 -0
  118. package/src/Popover/index.scss +1 -1
  119. package/src/ProductTour/Checkpoint.scss +1 -1
  120. package/src/ProgressBar/bootstrap-progress.scss +20 -5
  121. package/src/ProgressBar/index.scss +3 -3
  122. package/src/Stepper/index.scss +1 -1
  123. package/src/Sticky/index.scss +12 -0
  124. package/src/Toast/index.scss +13 -1
  125. package/src/Tooltip/index.scss +16 -0
  126. package/src/Tooltip/{index.jsx → index.tsx} +9 -3
  127. package/src/index.d.ts +5 -5
  128. package/src/index.js +7 -7
  129. package/src/{setupTest.js → setupTest.ts} +1 -0
  130. package/src/utils/types/bootstrap.test.tsx +86 -0
  131. package/src/utils/types/bootstrap.ts +43 -0
  132. package/styles/css/core/abstraction-variables.css +44 -0
  133. package/styles/css/core/custom-media-breakpoints.css +3 -4
  134. package/styles/css/core/index.css +2 -1
  135. package/styles/css/core/variables.css +494 -430
  136. package/styles/css/themes/light/abstraction-variables.css +304 -0
  137. package/styles/css/themes/light/index.css +1 -0
  138. package/styles/css/themes/light/utility-classes.css +2 -3
  139. package/styles/css/themes/light/variables.css +1753 -1334
  140. package/styles/scss/core/_typography.scss +16 -4
  141. package/styles/scss/core/_utilities.scss +7 -3
  142. package/styles/scss/core/_variables.scss +43 -30
  143. package/styles/scss/core/core.scss +1 -0
  144. package/tokens/src/core/alias/size.json +6 -5
  145. package/tokens/src/core/components/ActionRow.json +3 -2
  146. package/tokens/src/core/components/Alert.json +12 -10
  147. package/tokens/src/core/components/Annotation.json +9 -7
  148. package/tokens/src/core/components/Avatar.json +9 -9
  149. package/tokens/src/core/components/AvatarButton.json +4 -3
  150. package/tokens/src/core/components/Badge.json +12 -9
  151. package/tokens/src/core/components/Breadcrumb.json +7 -5
  152. package/tokens/src/core/components/Bubble.json +4 -3
  153. package/tokens/src/core/components/Button/core.json +35 -59
  154. package/tokens/src/core/components/Card.json +33 -44
  155. package/tokens/src/core/components/Carousel.json +39 -13
  156. package/tokens/src/core/components/Chip.json +13 -21
  157. package/tokens/src/core/components/ChipCarousel.json +4 -5
  158. package/tokens/src/core/components/CloseButton.json +2 -6
  159. package/tokens/src/core/components/Code.json +9 -8
  160. package/tokens/src/core/components/Collapsible.json +10 -13
  161. package/tokens/src/core/components/ColorPicker.json +3 -2
  162. package/tokens/src/core/components/Container.json +6 -5
  163. package/tokens/src/core/components/DataTable.json +17 -9
  164. package/tokens/src/core/components/Dropdown.json +24 -29
  165. package/tokens/src/core/components/Dropzone.json +5 -7
  166. package/tokens/src/core/components/Form/other.json +5 -4
  167. package/tokens/src/core/components/Form/size.json +72 -119
  168. package/tokens/src/core/components/Form/spacing.json +39 -83
  169. package/tokens/src/core/components/Form/transition.json +43 -7
  170. package/tokens/src/core/components/Form/typography.json +24 -88
  171. package/tokens/src/core/components/Icon.json +6 -5
  172. package/tokens/src/core/components/IconButton.json +4 -7
  173. package/tokens/src/core/components/Image.json +7 -6
  174. package/tokens/src/core/components/Menu.json +14 -12
  175. package/tokens/src/core/components/Modal.json +26 -21
  176. package/tokens/src/core/components/Nav.json +14 -16
  177. package/tokens/src/core/components/Navbar.json +15 -30
  178. package/tokens/src/core/components/Pagination.json +23 -24
  179. package/tokens/src/core/components/Popover.json +18 -14
  180. package/tokens/src/core/components/ProductTour.json +8 -14
  181. package/tokens/src/core/components/ProgressBar.json +29 -14
  182. package/tokens/src/core/components/SearchField.json +7 -9
  183. package/tokens/src/core/components/SelectableBox.json +4 -3
  184. package/tokens/src/core/components/Sheet.json +3 -2
  185. package/tokens/src/core/components/Spinner.json +9 -7
  186. package/tokens/src/core/components/Stack.json +2 -1
  187. package/tokens/src/core/components/Stepper.json +12 -14
  188. package/tokens/src/core/components/Sticky.json +2 -1
  189. package/tokens/src/core/components/Tab.json +8 -7
  190. package/tokens/src/core/components/Tabs.json +5 -5
  191. package/tokens/src/core/components/Toast.json +11 -8
  192. package/tokens/src/core/components/Tooltip.json +13 -11
  193. package/tokens/src/core/components/general/caret.json +5 -3
  194. package/tokens/src/core/components/general/headings.json +5 -4
  195. package/tokens/src/core/components/general/hr.json +3 -2
  196. package/tokens/src/core/components/general/input.json +19 -19
  197. package/tokens/src/core/components/general/link.json +13 -12
  198. package/tokens/src/core/components/general/list.json +9 -6
  199. package/tokens/src/core/components/general/text.json +6 -12
  200. package/tokens/src/core/global/breakpoints.json +25 -6
  201. package/tokens/src/core/global/elevation.json +55 -13
  202. package/tokens/src/core/global/other.json +5 -1
  203. package/tokens/src/core/global/spacing.json +70 -17
  204. package/tokens/src/core/global/transition.json +41 -4
  205. package/tokens/src/core/global/typography.json +248 -53
  206. package/tokens/src/core/utilities/color.json +35 -4
  207. package/tokens/src/themes/light/alias/color.json +276 -75
  208. package/tokens/src/themes/light/components/Alert.json +15 -26
  209. package/tokens/src/themes/light/components/Annotation.json +27 -13
  210. package/tokens/src/themes/light/components/Avatar.json +2 -1
  211. package/tokens/src/themes/light/components/Badge.json +57 -122
  212. package/tokens/src/themes/light/components/Breadcrumb.json +6 -5
  213. package/tokens/src/themes/light/components/Bubble.json +9 -8
  214. package/tokens/src/themes/light/components/Button/brand.json +171 -119
  215. package/tokens/src/themes/light/components/Button/core.json +8 -9
  216. package/tokens/src/themes/light/components/Button/danger.json +171 -112
  217. package/tokens/src/themes/light/components/Button/dark.json +188 -106
  218. package/tokens/src/themes/light/components/Button/info.json +186 -112
  219. package/tokens/src/themes/light/components/Button/light.json +186 -110
  220. package/tokens/src/themes/light/components/Button/primary.json +178 -116
  221. package/tokens/src/themes/light/components/Button/secondary.json +166 -132
  222. package/tokens/src/themes/light/components/Button/success.json +176 -117
  223. package/tokens/src/themes/light/components/Button/tertiary.json +34 -60
  224. package/tokens/src/themes/light/components/Button/warning.json +164 -128
  225. package/tokens/src/themes/light/components/Card.json +10 -21
  226. package/tokens/src/themes/light/components/Carousel.json +12 -11
  227. package/tokens/src/themes/light/components/Chip.json +14 -26
  228. package/tokens/src/themes/light/components/CloseButton.json +12 -2
  229. package/tokens/src/themes/light/components/Code.json +7 -9
  230. package/tokens/src/themes/light/components/DataTable.json +7 -11
  231. package/tokens/src/themes/light/components/Dropdown.json +17 -20
  232. package/tokens/src/themes/light/components/Dropzone.json +49 -11
  233. package/tokens/src/themes/light/components/Form/color.json +101 -155
  234. package/tokens/src/themes/light/components/Form/elevation.json +38 -42
  235. package/tokens/src/themes/light/components/Form/other.json +44 -41
  236. package/tokens/src/themes/light/components/IconButton.json +408 -256
  237. package/tokens/src/themes/light/components/Image.json +7 -4
  238. package/tokens/src/themes/light/components/Menu.json +12 -10
  239. package/tokens/src/themes/light/components/Modal.json +22 -12
  240. package/tokens/src/themes/light/components/Nav.json +82 -94
  241. package/tokens/src/themes/light/components/Navbar.json +32 -76
  242. package/tokens/src/themes/light/components/OverflowScroll.json +3 -1
  243. package/tokens/src/themes/light/components/PageBanner.json +11 -10
  244. package/tokens/src/themes/light/components/Pagination.json +19 -23
  245. package/tokens/src/themes/light/components/Popover.json +22 -27
  246. package/tokens/src/themes/light/components/ProductTour.json +9 -20
  247. package/tokens/src/themes/light/components/ProgressBar.json +12 -10
  248. package/tokens/src/themes/light/components/Scrollable.json +3 -3
  249. package/tokens/src/themes/light/components/SearchField.json +9 -9
  250. package/tokens/src/themes/light/components/Sheet.json +6 -7
  251. package/tokens/src/themes/light/components/Stepper.json +12 -17
  252. package/tokens/src/themes/light/components/Sticky.json +31 -6
  253. package/tokens/src/themes/light/components/Tab.json +47 -24
  254. package/tokens/src/themes/light/components/Toast.json +26 -14
  255. package/tokens/src/themes/light/components/Tooltip.json +25 -10
  256. package/tokens/src/themes/light/components/general/body.json +3 -2
  257. package/tokens/src/themes/light/components/general/headings.json +2 -1
  258. package/tokens/src/themes/light/components/general/hr.json +3 -6
  259. package/tokens/src/themes/light/components/general/input.json +11 -4
  260. package/tokens/src/themes/light/components/general/link.json +34 -43
  261. package/tokens/src/themes/light/components/general/list.json +15 -19
  262. package/tokens/src/themes/light/components/general/text.json +5 -6
  263. package/tokens/src/themes/light/global/color.json +1592 -867
  264. package/tokens/src/themes/light/global/elevation.json +481 -93
  265. package/tokens/style-dictionary.js +342 -144
  266. package/tokens/utils.js +176 -6
  267. package/src/IconButton/__snapshots__/IconButton.test.jsx.snap +0 -20
  268. package/tokens/src/core/global/display.json +0 -22
  269. /package/src/Button/{ButtonGroup.test.jsx → ButtonGroup.test.tsx} +0 -0
  270. /package/src/Button/{ButtonToolbar.test.jsx → ButtonToolbar.test.tsx} +0 -0
  271. /package/src/Button/__snapshots__/{ButtonGroup.test.jsx.snap → ButtonGroup.test.tsx.snap} +0 -0
  272. /package/src/Button/__snapshots__/{ButtonToolbar.test.jsx.snap → ButtonToolbar.test.tsx.snap} +0 -0
  273. /package/src/Chip/__snapshots__/{Chip.test.jsx.snap → Chip.test.tsx.snap} +0 -0
  274. /package/src/Tooltip/{Tooltip.test.jsx → Tooltip.test.tsx} +0 -0
@@ -85,11 +85,21 @@ const COMMANDS = {
85
85
  description: 'Include only source design tokens in the build.',
86
86
  defaultValue: false,
87
87
  },
88
+ {
89
+ name: '--output-token-references',
90
+ description: 'Include references for tokens with aliases to other tokens in the build output.',
91
+ defaultValue: true,
92
+ },
88
93
  {
89
94
  name: '-t, --themes',
90
95
  description: 'Specify themes to include in the token build.',
91
96
  defaultValue: 'light',
92
97
  },
98
+ {
99
+ name: '-v, --verbose',
100
+ description: 'Enable verbose logging.',
101
+ defaultValue: false,
102
+ },
93
103
  ],
94
104
  },
95
105
  'replace-variables': {
@@ -1,5 +1,21 @@
1
1
  @import "mixins";
2
2
 
3
+ :root {
4
+ --pgn-elevation-annotation-box-shadow:
5
+ drop-shadow(
6
+ var(--pgn-elevation-annotation-box-shadow-1-offset-x)
7
+ var(--pgn-elevation-annotation-box-shadow-1-offset-y)
8
+ var(--pgn-elevation-annotation-box-shadow-1-blur)
9
+ var(--pgn-elevation-annotation-box-shadow-1-color)
10
+ )
11
+ drop-shadow(
12
+ var(--pgn-elevation-annotation-box-shadow-2-offset-x)
13
+ var(--pgn-elevation-annotation-box-shadow-2-offset-y)
14
+ var(--pgn-elevation-annotation-box-shadow-2-blur)
15
+ var(--pgn-elevation-annotation-box-shadow-2-color)
16
+ );
17
+ }
18
+
3
19
  .pgn__annotation {
4
20
  padding: var(--pgn-spacing-annotation-padding);
5
21
  border-radius: var(--pgn-size-annotation-border-radius);
@@ -0,0 +1,35 @@
1
+ import React from 'react';
2
+ import { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button';
3
+ import { type ButtonGroupProps as BaseButtonGroupProps } from 'react-bootstrap/ButtonGroup';
4
+ import { type ButtonToolbarProps } from 'react-bootstrap/ButtonToolbar';
5
+ import type { ComponentWithAsProp } from '../utils/types/bootstrap';
6
+ interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
7
+ /**
8
+ * An icon component to render. Example:
9
+ * ```
10
+ * import { Close } from '@openedx/paragon/icons';
11
+ * <Button iconBefore={Close}>Close</Button>
12
+ * ```
13
+ */
14
+ iconBefore?: React.ComponentType;
15
+ /**
16
+ * An icon component to render. Example:
17
+ * ```
18
+ * import { Close } from '@openedx/paragon/icons';
19
+ * <Button iconAfter={Close}>Close</Button>
20
+ * ```
21
+ */
22
+ iconAfter?: React.ComponentType;
23
+ size?: 'sm' | 'md' | 'lg' | 'inline';
24
+ }
25
+ type ButtonType = ComponentWithAsProp<'button', ButtonProps> & {
26
+ Deprecated?: any;
27
+ };
28
+ declare const Button: ButtonType;
29
+ interface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {
30
+ size?: 'sm' | 'md' | 'lg' | 'inline';
31
+ }
32
+ declare const ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps>;
33
+ declare const ButtonToolbar: ComponentWithAsProp<'div', ButtonToolbarProps>;
34
+ export default Button;
35
+ export { ButtonGroup, ButtonToolbar };
@@ -1,5 +1,6 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["children", "iconAfter", "iconBefore"];
2
+ var _excluded = ["children", "iconAfter", "iconBefore", "size"],
3
+ _excluded2 = ["size"];
3
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
6
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -19,21 +20,24 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
19
20
  var children = _ref.children,
20
21
  iconAfter = _ref.iconAfter,
21
22
  iconBefore = _ref.iconBefore,
23
+ size = _ref.size,
22
24
  props = _objectWithoutProperties(_ref, _excluded);
23
- return /*#__PURE__*/React.createElement(BaseButton, _extends({}, props, {
25
+ return /*#__PURE__*/React.createElement(BaseButton, _extends({
26
+ size: size // Bootstrap's <Button> types do not allow 'md' or 'inline', but we do.
27
+ }, props, {
24
28
  className: classNames(props.className),
25
29
  ref: ref
26
30
  }), iconBefore && /*#__PURE__*/React.createElement(Icon, {
27
31
  className: "btn-icon-before",
28
- size: props.size,
32
+ size: size,
29
33
  src: iconBefore
30
34
  }), children, iconAfter && /*#__PURE__*/React.createElement(Icon, {
31
35
  className: "btn-icon-after",
32
- size: props.size,
36
+ size: size,
33
37
  src: iconAfter
34
38
  }));
35
39
  });
36
- Button.propTypes = _objectSpread(_objectSpread({}, Button.propTypes), {}, {
40
+ Button.propTypes = {
37
41
  /** Specifies class name to apply to the button */
38
42
  className: PropTypes.string,
39
43
  /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */
@@ -59,11 +63,14 @@ Button.propTypes = _objectSpread(_objectSpread({}, Button.propTypes), {}, {
59
63
  variant: PropTypes.string,
60
64
  /** An icon component to render.
61
65
  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
62
- iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
66
+ iconBefore: PropTypes.elementType,
63
67
  /** An icon component to render.
64
68
  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
65
- iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node])
66
- });
69
+ iconAfter: PropTypes.elementType
70
+ // The 'as' type casting above is required for TypeScript checking, because the 'PropTypes.elementType' type normally
71
+ // allows strings as a value (for use cases like 'div') but we don't support that for <Icon />/iconBefore/iconAfter.
72
+ // The React TypeScript type definitions are more specific (React.ComponentType vs React.ElementType).
73
+ };
67
74
  Button.defaultProps = _objectSpread(_objectSpread({}, Button.defaultProps), {}, {
68
75
  children: undefined,
69
76
  className: undefined,
@@ -71,19 +78,29 @@ Button.defaultProps = _objectSpread(_objectSpread({}, Button.defaultProps), {},
71
78
  iconAfter: undefined,
72
79
  disabled: false
73
80
  });
74
- function ButtonGroup(props) {
75
- return /*#__PURE__*/React.createElement(BaseButtonGroup, props);
76
- }
77
- function ButtonToolbar(props) {
78
- return /*#__PURE__*/React.createElement(BaseButtonToolbar, props);
79
- }
81
+
82
+ // We could just re-export 'ButtonGroup' and 'ButtonToolbar', but we currently
83
+ // override them to add propTypes validation at runtime, since most Paragon
84
+ // consumers aren't using TypeScript yet. We also force ButtonGroup's 'size'
85
+ // prop to accept our custom values of 'md' and 'inline' which are used in
86
+ // Paragon but not used in the base Bootstrap classes.
87
+
88
+ var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
89
+ var size = _ref2.size,
90
+ props = _objectWithoutProperties(_ref2, _excluded2);
91
+ return /*#__PURE__*/React.createElement(BaseButtonGroup, _extends({
92
+ size: size
93
+ }, props, {
94
+ ref: ref
95
+ }));
96
+ });
80
97
  ButtonGroup.propTypes = {
81
98
  /** Specifies element type for this component. */
82
99
  as: PropTypes.elementType,
83
100
  /** An ARIA role describing the button group. */
84
101
  role: PropTypes.string,
85
102
  /** Specifies the size for all Buttons in the group. */
86
- size: PropTypes.oneOf(['sm', 'md', 'lg']),
103
+ size: PropTypes.oneOf(['sm', 'md', 'lg', 'inline']),
87
104
  /** Display as a button toggle group. */
88
105
  toggle: PropTypes.bool,
89
106
  /** Specifies if the set of Buttons should appear vertically stacked. */
@@ -99,6 +116,11 @@ ButtonGroup.defaultProps = {
99
116
  bsPrefix: 'btn-group',
100
117
  size: 'md'
101
118
  };
119
+ var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
120
+ return /*#__PURE__*/React.createElement(BaseButtonToolbar, _extends({}, props, {
121
+ ref: ref
122
+ }));
123
+ });
102
124
  ButtonToolbar.propTypes = {
103
125
  /** An ARIA role describing the button group. */
104
126
  role: PropTypes.string,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseButton","BaseButtonGroup","BaseButtonToolbar","Icon","Button","forwardRef","_ref","ref","children","iconAfter","iconBefore","props","_objectWithoutProperties","_excluded","createElement","_extends","className","size","src","propTypes","_objectSpread","string","disabled","bool","node","isRequired","onClick","func","onKeyDown","type","variant","oneOfType","elementType","defaultProps","undefined","ButtonGroup","ButtonToolbar","as","role","oneOf","toggle","vertical","bsPrefix"],"sources":["../../src/Button/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseButton from 'react-bootstrap/Button';\nimport BaseButtonGroup from 'react-bootstrap/ButtonGroup';\nimport BaseButtonToolbar from 'react-bootstrap/ButtonToolbar';\n\nimport Icon from '../Icon';\n\nconst Button = React.forwardRef(({\n children,\n iconAfter,\n iconBefore,\n ...props\n}, ref) => (\n <BaseButton\n {...props}\n className={classNames(props.className)}\n ref={ref}\n >\n {iconBefore && <Icon className=\"btn-icon-before\" size={props.size} src={iconBefore} />}\n {children}\n {iconAfter && <Icon className=\"btn-icon-after\" size={props.size} src={iconAfter} />}\n </BaseButton>\n));\n\nButton.propTypes = {\n ...Button.propTypes,\n /** Specifies class name to apply to the button */\n className: PropTypes.string,\n /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */\n disabled: PropTypes.bool,\n /** Specifies the text that is displayed within the button. */\n children: PropTypes.node.isRequired,\n /** A function that would specify what the button should do when the `onClick` event is triggered.\n * For example, the button could launch a `Modal`. The default is an empty function. */\n onClick: PropTypes.func,\n /** A function that would specify what the button should do when the `onKeyDown` event is triggered.\n * For example, this could handle using the `Escape` key to trigger the button's action.\n * The default is an empty function. */\n onKeyDown: PropTypes.func,\n /** Used to set the `type` attribute on the `button` tag. The default type is `button`. */\n type: PropTypes.string,\n /** Specifies variant to use.\n * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,\n * `light`, `link`\n *\n * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`\n * or `inverse-outline-`)\n * */\n variant: PropTypes.string,\n /** An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n /** An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n};\n\nButton.defaultProps = {\n ...Button.defaultProps,\n children: undefined,\n className: undefined,\n iconBefore: undefined,\n iconAfter: undefined,\n disabled: false,\n};\n\nfunction ButtonGroup(props) {\n return <BaseButtonGroup {...props} />;\n}\nfunction ButtonToolbar(props) {\n return <BaseButtonToolbar {...props} />;\n}\n\nButtonGroup.propTypes = {\n /** Specifies element type for this component. */\n as: PropTypes.elementType,\n /** An ARIA role describing the button group. */\n role: PropTypes.string,\n /** Specifies the size for all Buttons in the group. */\n size: PropTypes.oneOf(['sm', 'md', 'lg']),\n /** Display as a button toggle group. */\n toggle: PropTypes.bool,\n /** Specifies if the set of Buttons should appear vertically stacked. */\n vertical: PropTypes.bool,\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nButtonGroup.defaultProps = {\n as: 'div',\n role: 'group',\n toggle: false,\n vertical: false,\n bsPrefix: 'btn-group',\n size: 'md',\n};\n\nButtonToolbar.propTypes = {\n /** An ARIA role describing the button group. */\n role: PropTypes.string,\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nButtonToolbar.defaultProps = {\n role: 'toolbar',\n bsPrefix: 'btn-toolbar',\n};\n\nexport default Button;\nexport { ButtonGroup, ButtonToolbar };\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseButton","BaseButtonGroup","BaseButtonToolbar","Icon","Button","forwardRef","_ref","ref","children","iconAfter","iconBefore","size","props","_objectWithoutProperties","_excluded","createElement","_extends","className","src","propTypes","string","disabled","bool","node","isRequired","onClick","func","onKeyDown","type","variant","elementType","defaultProps","_objectSpread","undefined","ButtonGroup","_ref2","_excluded2","as","role","oneOf","toggle","vertical","bsPrefix","ButtonToolbar"],"sources":["../../src/Button/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes, { type Requireable } from 'prop-types';\nimport classNames from 'classnames';\nimport BaseButton, { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button';\nimport BaseButtonGroup, { type ButtonGroupProps as BaseButtonGroupProps } from 'react-bootstrap/ButtonGroup';\nimport BaseButtonToolbar, { type ButtonToolbarProps } from 'react-bootstrap/ButtonToolbar';\nimport type { ComponentWithAsProp } from '../utils/types/bootstrap';\n\nimport Icon from '../Icon';\n\ninterface ButtonProps extends Omit<BaseButtonProps, 'size'> {\n /**\n * An icon component to render. Example:\n * ```\n * import { Close } from '@openedx/paragon/icons';\n * <Button iconBefore={Close}>Close</Button>\n * ```\n */\n iconBefore?: React.ComponentType;\n /**\n * An icon component to render. Example:\n * ```\n * import { Close } from '@openedx/paragon/icons';\n * <Button iconAfter={Close}>Close</Button>\n * ```\n */\n iconAfter?: React.ComponentType;\n size?: 'sm' | 'md' | 'lg' | 'inline';\n}\n\ntype ButtonType = ComponentWithAsProp<'button', ButtonProps> & { Deprecated?: any };\n\nconst Button: ButtonType = React.forwardRef<HTMLButtonElement, ButtonProps>(({\n children,\n iconAfter,\n iconBefore,\n size,\n ...props\n}, ref) => (\n <BaseButton\n size={size as 'sm' | 'lg' | undefined} // Bootstrap's <Button> types do not allow 'md' or 'inline', but we do.\n {...props}\n className={classNames(props.className)}\n ref={ref}\n >\n {iconBefore && <Icon className=\"btn-icon-before\" size={size} src={iconBefore} />}\n {children}\n {iconAfter && <Icon className=\"btn-icon-after\" size={size} src={iconAfter} />}\n </BaseButton>\n));\n\nButton.propTypes = {\n /** Specifies class name to apply to the button */\n className: PropTypes.string,\n /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */\n disabled: PropTypes.bool,\n /** Specifies the text that is displayed within the button. */\n children: PropTypes.node.isRequired,\n /** A function that would specify what the button should do when the `onClick` event is triggered.\n * For example, the button could launch a `Modal`. The default is an empty function. */\n onClick: PropTypes.func,\n /** A function that would specify what the button should do when the `onKeyDown` event is triggered.\n * For example, this could handle using the `Escape` key to trigger the button's action.\n * The default is an empty function. */\n onKeyDown: PropTypes.func,\n /** Used to set the `type` attribute on the `button` tag. The default type is `button`. */\n type: PropTypes.string,\n /** Specifies variant to use.\n * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,\n * `light`, `link`\n *\n * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`\n * or `inverse-outline-`)\n * */\n variant: PropTypes.string,\n /** An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,\n /** An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,\n // The 'as' type casting above is required for TypeScript checking, because the 'PropTypes.elementType' type normally\n // allows strings as a value (for use cases like 'div') but we don't support that for <Icon />/iconBefore/iconAfter.\n // The React TypeScript type definitions are more specific (React.ComponentType vs React.ElementType).\n};\n\nButton.defaultProps = {\n ...Button.defaultProps,\n children: undefined,\n className: undefined,\n iconBefore: undefined,\n iconAfter: undefined,\n disabled: false,\n};\n\n// We could just re-export 'ButtonGroup' and 'ButtonToolbar', but we currently\n// override them to add propTypes validation at runtime, since most Paragon\n// consumers aren't using TypeScript yet. We also force ButtonGroup's 'size'\n// prop to accept our custom values of 'md' and 'inline' which are used in\n// Paragon but not used in the base Bootstrap classes.\n\ninterface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {\n size?: 'sm' | 'md' | 'lg' | 'inline';\n}\n\nconst ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = (\n React.forwardRef<HTMLButtonElement, ButtonGroupProps>(({ size, ...props }, ref) => (\n <BaseButtonGroup size={size as 'sm' | 'lg'} {...props} ref={ref} />\n ))\n);\n\nButtonGroup.propTypes = {\n /** Specifies element type for this component. */\n as: PropTypes.elementType,\n /** An ARIA role describing the button group. */\n role: PropTypes.string,\n /** Specifies the size for all Buttons in the group. */\n size: PropTypes.oneOf(['sm', 'md', 'lg', 'inline']),\n /** Display as a button toggle group. */\n toggle: PropTypes.bool,\n /** Specifies if the set of Buttons should appear vertically stacked. */\n vertical: PropTypes.bool,\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nButtonGroup.defaultProps = {\n as: 'div',\n role: 'group',\n toggle: false,\n vertical: false,\n bsPrefix: 'btn-group',\n size: 'md',\n};\n\nconst ButtonToolbar: ComponentWithAsProp<'div', ButtonToolbarProps> = (\n React.forwardRef<HTMLButtonElement, ButtonToolbarProps>((props, ref) => (\n <BaseButtonToolbar {...props} ref={ref} />\n ))\n);\n\nButtonToolbar.propTypes = {\n /** An ARIA role describing the button group. */\n role: PropTypes.string,\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nButtonToolbar.defaultProps = {\n role: 'toolbar',\n bsPrefix: 'btn-toolbar',\n};\n\nexport default Button;\nexport { ButtonGroup, ButtonToolbar };\n"],"mappings":"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","ignoreList":[]}
@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
2
2
  import React, { Children, useMemo } from 'react';
3
3
  import classNames from 'classnames';
4
4
  import PropTypes from 'prop-types';
5
- import BaseCardDeck from 'react-bootstrap/CardDeck';
6
5
  import Row from 'react-bootstrap/Row';
7
6
  import Col from 'react-bootstrap/Col';
8
7
  import { useOverflowScrollItems } from '../OverflowScroll';
@@ -79,6 +78,5 @@ CardDeck.defaultProps = {
79
78
  hasOverflowScrollItems: false,
80
79
  hasEqualColumnHeights: true
81
80
  };
82
- CardDeck.Deprecated = BaseCardDeck;
83
81
  export default CardDeck;
84
82
  //# sourceMappingURL=CardDeck.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CardDeck.js","names":["React","Children","useMemo","classNames","PropTypes","BaseCardDeck","Row","Col","useOverflowScrollItems","CardDeck","forwardRef","_ref","ref","className","children","columnSizes","hasInteractiveChildren","canScrollHorizontal","hasOverflowScrollItems","hasEqualColumnHeights","cards","map","card","createElement","_extends","overflowCardDeckItems","cardDeckChildren","tabIndex","propTypes","string","node","isRequired","shape","xs","number","sm","md","lg","xl","bool","defaultProps","undefined","Deprecated"],"sources":["../../src/Card/CardDeck.jsx"],"sourcesContent":["import React, { Children, useMemo } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseCardDeck from 'react-bootstrap/CardDeck';\nimport Row from 'react-bootstrap/Row';\nimport Col from 'react-bootstrap/Col';\nimport { useOverflowScrollItems } from '../OverflowScroll';\n\nconst CardDeck = React.forwardRef(({\n className,\n children,\n columnSizes,\n hasInteractiveChildren,\n canScrollHorizontal,\n hasOverflowScrollItems,\n hasEqualColumnHeights,\n}, ref) => {\n const cards = useMemo(\n () => Children.map(children, (card) => (\n <Col\n {...columnSizes}\n className={classNames(\n 'pgn__card-deck__card-item',\n {\n 'pgn__card__disable-equal-column-heights': !hasEqualColumnHeights,\n },\n )}\n >\n {card}\n </Col>\n )),\n [children, columnSizes, hasEqualColumnHeights],\n );\n const overflowCardDeckItems = useOverflowScrollItems(cards);\n\n const cardDeckChildren = useMemo(() => {\n if (hasOverflowScrollItems) {\n return overflowCardDeckItems;\n }\n return cards;\n }, [hasOverflowScrollItems, overflowCardDeckItems, cards]);\n\n return (\n <div\n className={classNames(\n 'pgn__card-deck',\n {\n 'pgn__card-deck-has-horizontal-scroll': canScrollHorizontal,\n },\n className,\n )}\n >\n <Row\n className=\"pgn__card-deck-row\"\n tabIndex={hasInteractiveChildren ? -1 : 0}\n ref={ref}\n >\n {cardDeckChildren}\n </Row>\n </div>\n );\n});\n\nCardDeck.propTypes = {\n /** The class name for the CardDeck component */\n className: PropTypes.string,\n /** The Card components to organize */\n children: PropTypes.node.isRequired,\n /**\n * An object containing the desired column size at each breakpoint, following a similar\n * props API as ``react-bootstrap/Col``\n */\n columnSizes: PropTypes.shape({\n xs: PropTypes.number,\n sm: PropTypes.number,\n md: PropTypes.number,\n lg: PropTypes.number,\n xl: PropTypes.number,\n }),\n /** Whether the child `Card` components are interactive/focusable. If not, a `tabindex=\"0\"` is\n * added to be a11y-compliant */\n hasInteractiveChildren: PropTypes.bool,\n /** Whether the `CardDeck` supports horizontal scrolling when there are overflow children */\n canScrollHorizontal: PropTypes.bool,\n /** Whether the children of CardDeck should be processed by `useOverflowScrollItems` to give\n * each child a known/stable CSS classname */\n hasOverflowScrollItems: PropTypes.bool,\n /** Whether to disable the default equal height cards */\n hasEqualColumnHeights: PropTypes.bool,\n};\n\nCardDeck.defaultProps = {\n className: undefined,\n columnSizes: {\n sm: 12,\n lg: 6,\n xl: 4,\n },\n hasInteractiveChildren: false,\n canScrollHorizontal: true,\n hasOverflowScrollItems: false,\n hasEqualColumnHeights: true,\n};\n\nCardDeck.Deprecated = BaseCardDeck;\n\nexport default CardDeck;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"CardDeck.js","names":["React","Children","useMemo","classNames","PropTypes","Row","Col","useOverflowScrollItems","CardDeck","forwardRef","_ref","ref","className","children","columnSizes","hasInteractiveChildren","canScrollHorizontal","hasOverflowScrollItems","hasEqualColumnHeights","cards","map","card","createElement","_extends","overflowCardDeckItems","cardDeckChildren","tabIndex","propTypes","string","node","isRequired","shape","xs","number","sm","md","lg","xl","bool","defaultProps","undefined"],"sources":["../../src/Card/CardDeck.jsx"],"sourcesContent":["import React, { Children, useMemo } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport Row from 'react-bootstrap/Row';\nimport Col from 'react-bootstrap/Col';\nimport { useOverflowScrollItems } from '../OverflowScroll';\n\nconst CardDeck = React.forwardRef(({\n className,\n children,\n columnSizes,\n hasInteractiveChildren,\n canScrollHorizontal,\n hasOverflowScrollItems,\n hasEqualColumnHeights,\n}, ref) => {\n const cards = useMemo(\n () => Children.map(children, (card) => (\n <Col\n {...columnSizes}\n className={classNames(\n 'pgn__card-deck__card-item',\n {\n 'pgn__card__disable-equal-column-heights': !hasEqualColumnHeights,\n },\n )}\n >\n {card}\n </Col>\n )),\n [children, columnSizes, hasEqualColumnHeights],\n );\n const overflowCardDeckItems = useOverflowScrollItems(cards);\n\n const cardDeckChildren = useMemo(() => {\n if (hasOverflowScrollItems) {\n return overflowCardDeckItems;\n }\n return cards;\n }, [hasOverflowScrollItems, overflowCardDeckItems, cards]);\n\n return (\n <div\n className={classNames(\n 'pgn__card-deck',\n {\n 'pgn__card-deck-has-horizontal-scroll': canScrollHorizontal,\n },\n className,\n )}\n >\n <Row\n className=\"pgn__card-deck-row\"\n tabIndex={hasInteractiveChildren ? -1 : 0}\n ref={ref}\n >\n {cardDeckChildren}\n </Row>\n </div>\n );\n});\n\nCardDeck.propTypes = {\n /** The class name for the CardDeck component */\n className: PropTypes.string,\n /** The Card components to organize */\n children: PropTypes.node.isRequired,\n /**\n * An object containing the desired column size at each breakpoint, following a similar\n * props API as ``react-bootstrap/Col``\n */\n columnSizes: PropTypes.shape({\n xs: PropTypes.number,\n sm: PropTypes.number,\n md: PropTypes.number,\n lg: PropTypes.number,\n xl: PropTypes.number,\n }),\n /** Whether the child `Card` components are interactive/focusable. If not, a `tabindex=\"0\"` is\n * added to be a11y-compliant */\n hasInteractiveChildren: PropTypes.bool,\n /** Whether the `CardDeck` supports horizontal scrolling when there are overflow children */\n canScrollHorizontal: PropTypes.bool,\n /** Whether the children of CardDeck should be processed by `useOverflowScrollItems` to give\n * each child a known/stable CSS classname */\n hasOverflowScrollItems: PropTypes.bool,\n /** Whether to disable the default equal height cards */\n hasEqualColumnHeights: PropTypes.bool,\n};\n\nCardDeck.defaultProps = {\n className: undefined,\n columnSizes: {\n sm: 12,\n lg: 6,\n xl: 4,\n },\n hasInteractiveChildren: false,\n canScrollHorizontal: true,\n hasOverflowScrollItems: false,\n hasEqualColumnHeights: true,\n};\n\nexport default CardDeck;\n"],"mappings":"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","ignoreList":[]}
@@ -136,11 +136,11 @@ a.pgn__card {
136
136
  }
137
137
 
138
138
  .pgn__card-header-title-sm {
139
- font-size: var(--pgn-typography-font-size-h4);
139
+ font-size: var(--pgn-typography-font-size-h4-base);
140
140
  }
141
141
 
142
142
  .pgn__card-header-title-md {
143
- font-size: var(--pgn-typography-font-size-h3);
143
+ font-size: var(--pgn-typography-font-size-h3-base);
144
144
  }
145
145
 
146
146
  %header-subtitle {
@@ -155,11 +155,11 @@ a.pgn__card {
155
155
  }
156
156
 
157
157
  .pgn__card-header-subtitle-sm {
158
- font-size: var(--pgn-typography-font-size-h5);
158
+ font-size: var(--pgn-typography-font-size-h5-base);
159
159
  }
160
160
 
161
161
  .pgn__card-header-subtitle-md {
162
- font-size: var(--pgn-typography-font-size-h4);
162
+ font-size: var(--pgn-typography-font-size-h4-base);
163
163
  }
164
164
 
165
165
  .pgn__card-header-actions {
@@ -271,7 +271,7 @@ a.pgn__card {
271
271
  .pgn__card-section-title {
272
272
  color: var(--pgn-color-black);
273
273
  font-weight: var(--pgn-typography-font-weight-bold);
274
- font-size: var(--pgn-typography-font-size-h5);
274
+ font-size: var(--pgn-typography-font-size-h5-base);
275
275
  margin-bottom: var(--pgn-spacing-card-spacer-y);
276
276
  }
277
277
 
@@ -392,7 +392,7 @@ a.pgn__card {
392
392
  }
393
393
 
394
394
  .pgn__card-status__heading {
395
- font-size: var(--pgn-typography-font-size-h4);
395
+ font-size: var(--pgn-typography-font-size-h4-base);
396
396
  color: var(--pgn-color-black);
397
397
  display: flex;
398
398
  font-weight: var(--pgn-typography-font-weight-bold);
@@ -1,3 +1,26 @@
1
+ :root {
2
+ --pgn-transition-carousel-base:
3
+ var(--pgn-transition-carousel-base-property)
4
+ var(--pgn-transition-carousel-base-duration)
5
+ var(--pgn-transition-carousel-base-timing-function)
6
+ var(--pgn-transition-carousel-base-delay)
7
+ var(--pgn-transition-carousel-base-behavior);
8
+
9
+ --pgn-transition-carousel-indicator:
10
+ var(--pgn-transition-carousel-indicator-property)
11
+ var(--pgn-transition-carousel-indicator-duration)
12
+ var(--pgn-transition-carousel-indicator-timing-function)
13
+ var(--pgn-transition-carousel-indicator-delay)
14
+ var(--pgn-transition-carousel-indicator-behavior);
15
+
16
+ --pgn-transition-carousel-control:
17
+ var(--pgn-transition-carousel-control-property)
18
+ var(--pgn-transition-carousel-control-duration)
19
+ var(--pgn-transition-carousel-control-timing-function)
20
+ var(--pgn-transition-carousel-control-delay)
21
+ var(--pgn-transition-carousel-control-behavior);
22
+ }
23
+
1
24
  .carousel {
2
25
  position: relative;
3
26
  }
@@ -58,7 +81,7 @@
58
81
  .active.carousel-item-right {
59
82
  z-index: 0;
60
83
  opacity: 0;
61
- transition: opacity 0s var(--pgn-transition-carousel-base);
84
+ transition: var(--pgn-transition-carousel-base);
62
85
  }
63
86
  }
64
87
 
@@ -1,14 +1,19 @@
1
1
  import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
2
2
  import PropTypes from 'prop-types';
3
- export interface ChipIconProps {
3
+ import { STYLE_VARIANTS } from './constants';
4
+ export type ChipIconProps = {
4
5
  className: string;
5
- src: React.ReactElement | Function;
6
- onClick?: KeyboardEventHandler & MouseEventHandler;
7
- alt?: string;
8
- variant: string;
6
+ src: React.ComponentType;
7
+ variant: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS];
9
8
  disabled?: boolean;
10
- }
11
- declare function ChipIcon({ className, src, onClick, alt, variant, disabled, }: ChipIconProps): JSX.Element;
9
+ } & ({
10
+ onClick: KeyboardEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLButtonElement>;
11
+ alt: string;
12
+ } | {
13
+ onClick?: undefined;
14
+ alt?: undefined;
15
+ });
16
+ declare function ChipIcon({ className, src, onClick, alt, variant, disabled, }: ChipIconProps): import("react/jsx-runtime").JSX.Element;
12
17
  declare namespace ChipIcon {
13
18
  var propTypes: {
14
19
  className: PropTypes.Validator<string>;
@@ -21,7 +26,7 @@ declare namespace ChipIcon {
21
26
  var defaultProps: {
22
27
  onClick: undefined;
23
28
  alt: undefined;
24
- variant: any;
29
+ variant: "light";
25
30
  disabled: boolean;
26
31
  };
27
32
  }
@@ -1,9 +1,7 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import Icon from '../Icon';
4
- // @ts-ignore
5
4
  import IconButton from '../IconButton';
6
- // @ts-ignore
7
5
  import { STYLE_VARIANTS } from './constants';
8
6
  function ChipIcon(_ref) {
9
7
  var className = _ref.className,
@@ -1 +1 @@
1
- {"version":3,"file":"ChipIcon.js","names":["React","PropTypes","Icon","IconButton","STYLE_VARIANTS","ChipIcon","_ref","className","src","onClick","alt","variant","disabled","createElement","iconAs","invertColors","DARK","tabIndex","size","propTypes","string","isRequired","oneOfType","element","func","bool","defaultProps","undefined","LIGHT"],"sources":["../../src/Chip/ChipIcon.tsx"],"sourcesContent":["import React, { KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '../Icon';\n// @ts-ignore\nimport IconButton from '../IconButton';\n// @ts-ignore\nimport { STYLE_VARIANTS } from './constants';\n\nexport interface ChipIconProps {\n className: string,\n src: React.ReactElement | Function,\n onClick?: KeyboardEventHandler & MouseEventHandler,\n alt?: string,\n variant: string,\n disabled?: boolean,\n}\n\nfunction ChipIcon({\n className, src, onClick, alt, variant, disabled,\n}: ChipIconProps) {\n if (onClick) {\n return (\n <IconButton\n className={className}\n src={src}\n onClick={onClick}\n iconAs={Icon}\n alt={alt}\n invertColors={variant === STYLE_VARIANTS.DARK}\n tabIndex={disabled ? -1 : 0}\n />\n );\n }\n\n return <Icon src={src} className={className} size=\"sm\" />;\n}\n\nChipIcon.propTypes = {\n className: PropTypes.string.isRequired,\n src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,\n onClick: PropTypes.func,\n alt: PropTypes.string,\n variant: PropTypes.string,\n disabled: PropTypes.bool,\n};\n\nChipIcon.defaultProps = {\n onClick: undefined,\n alt: undefined,\n variant: STYLE_VARIANTS.LIGHT,\n disabled: false,\n};\n\nexport default ChipIcon;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAmD,OAAO;AACtE,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,SAAS;AAC1B;AACA,OAAOC,UAAU,MAAM,eAAe;AACtC;AACA,SAASC,cAAc,QAAQ,aAAa;AAW5C,SAASC,QAAQA,CAAAC,IAAA,EAEC;EAAA,IADhBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAEC,GAAG,GAAAJ,IAAA,CAAHI,GAAG;IAAEC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;EAE/C,IAAIH,OAAO,EAAE;IACX,oBACET,KAAA,CAAAa,aAAA,CAACV,UAAU;MACTI,SAAS,EAAEA,SAAU;MACrBC,GAAG,EAAEA,GAAI;MACTC,OAAO,EAAEA,OAAQ;MACjBK,MAAM,EAAEZ,IAAK;MACbQ,GAAG,EAAEA,GAAI;MACTK,YAAY,EAAEJ,OAAO,KAAKP,cAAc,CAACY,IAAK;MAC9CC,QAAQ,EAAEL,QAAQ,GAAG,CAAC,CAAC,GAAG;IAAE,CAC7B,CAAC;EAEN;EAEA,oBAAOZ,KAAA,CAAAa,aAAA,CAACX,IAAI;IAACM,GAAG,EAAEA,GAAI;IAACD,SAAS,EAAEA,SAAU;IAACW,IAAI,EAAC;EAAI,CAAE,CAAC;AAC3D;AAEAb,QAAQ,CAACc,SAAS,GAAG;EACnBZ,SAAS,EAAEN,SAAS,CAACmB,MAAM,CAACC,UAAU;EACtCb,GAAG,EAAEP,SAAS,CAACqB,SAAS,CAAC,CAACrB,SAAS,CAACsB,OAAO,EAAEtB,SAAS,CAACuB,IAAI,CAAC,CAAC,CAACH,UAAU;EACxEZ,OAAO,EAAER,SAAS,CAACuB,IAAI;EACvBd,GAAG,EAAET,SAAS,CAACmB,MAAM;EACrBT,OAAO,EAAEV,SAAS,CAACmB,MAAM;EACzBR,QAAQ,EAAEX,SAAS,CAACwB;AACtB,CAAC;AAEDpB,QAAQ,CAACqB,YAAY,GAAG;EACtBjB,OAAO,EAAEkB,SAAS;EAClBjB,GAAG,EAAEiB,SAAS;EACdhB,OAAO,EAAEP,cAAc,CAACwB,KAAK;EAC7BhB,QAAQ,EAAE;AACZ,CAAC;AAED,eAAeP,QAAQ","ignoreList":[]}
1
+ {"version":3,"file":"ChipIcon.js","names":["React","PropTypes","Icon","IconButton","STYLE_VARIANTS","ChipIcon","_ref","className","src","onClick","alt","variant","disabled","createElement","iconAs","invertColors","DARK","tabIndex","size","propTypes","string","isRequired","oneOfType","element","func","bool","defaultProps","undefined","LIGHT"],"sources":["../../src/Chip/ChipIcon.tsx"],"sourcesContent":["import React, { KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { STYLE_VARIANTS } from './constants';\n\nexport type ChipIconProps = {\n className: string,\n src: React.ComponentType,\n variant: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],\n disabled?: boolean,\n} & (\n // Either _both_ onClick and alt are provided, or neither is:\n | { onClick: KeyboardEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLButtonElement>, alt: string }\n | { onClick?: undefined, alt?: undefined }\n);\n\nfunction ChipIcon({\n className, src, onClick, alt, variant, disabled,\n}: ChipIconProps) {\n if (onClick) {\n return (\n <IconButton\n className={className}\n src={src}\n onClick={onClick}\n iconAs={Icon}\n alt={alt}\n invertColors={variant === STYLE_VARIANTS.DARK}\n tabIndex={disabled ? -1 : 0}\n />\n );\n }\n\n return <Icon src={src} className={className} size=\"sm\" />;\n}\n\nChipIcon.propTypes = {\n className: PropTypes.string.isRequired,\n src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,\n onClick: PropTypes.func,\n alt: PropTypes.string,\n variant: PropTypes.string,\n disabled: PropTypes.bool,\n};\n\nChipIcon.defaultProps = {\n onClick: undefined,\n alt: undefined,\n variant: STYLE_VARIANTS.LIGHT,\n disabled: false,\n};\n\nexport default ChipIcon;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAmD,OAAO;AACtE,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,cAAc,QAAQ,aAAa;AAa5C,SAASC,QAAQA,CAAAC,IAAA,EAEC;EAAA,IADhBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IAAEC,GAAG,GAAAJ,IAAA,CAAHI,GAAG;IAAEC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;EAE/C,IAAIH,OAAO,EAAE;IACX,oBACET,KAAA,CAAAa,aAAA,CAACV,UAAU;MACTI,SAAS,EAAEA,SAAU;MACrBC,GAAG,EAAEA,GAAI;MACTC,OAAO,EAAEA,OAAQ;MACjBK,MAAM,EAAEZ,IAAK;MACbQ,GAAG,EAAEA,GAAI;MACTK,YAAY,EAAEJ,OAAO,KAAKP,cAAc,CAACY,IAAK;MAC9CC,QAAQ,EAAEL,QAAQ,GAAG,CAAC,CAAC,GAAG;IAAE,CAC7B,CAAC;EAEN;EAEA,oBAAOZ,KAAA,CAAAa,aAAA,CAACX,IAAI;IAACM,GAAG,EAAEA,GAAI;IAACD,SAAS,EAAEA,SAAU;IAACW,IAAI,EAAC;EAAI,CAAE,CAAC;AAC3D;AAEAb,QAAQ,CAACc,SAAS,GAAG;EACnBZ,SAAS,EAAEN,SAAS,CAACmB,MAAM,CAACC,UAAU;EACtCb,GAAG,EAAEP,SAAS,CAACqB,SAAS,CAAC,CAACrB,SAAS,CAACsB,OAAO,EAAEtB,SAAS,CAACuB,IAAI,CAAC,CAAC,CAACH,UAAU;EACxEZ,OAAO,EAAER,SAAS,CAACuB,IAAI;EACvBd,GAAG,EAAET,SAAS,CAACmB,MAAM;EACrBT,OAAO,EAAEV,SAAS,CAACmB,MAAM;EACzBR,QAAQ,EAAEX,SAAS,CAACwB;AACtB,CAAC;AAEDpB,QAAQ,CAACqB,YAAY,GAAG;EACtBjB,OAAO,EAAEkB,SAAS;EAClBjB,GAAG,EAAEiB,SAAS;EACdhB,OAAO,EAAEP,cAAc,CAACwB,KAAK;EAC7BhB,QAAQ,EAAE;AACZ,CAAC;AAED,eAAeP,QAAQ","ignoreList":[]}
@@ -0,0 +1,4 @@
1
+ export declare const STYLE_VARIANTS: {
2
+ readonly DARK: "dark";
3
+ readonly LIGHT: "light";
4
+ };
@@ -1,5 +1,6 @@
1
1
  // eslint-disable-next-line import/prefer-default-export
2
- export const STYLE_VARIANTS = {
2
+ export var STYLE_VARIANTS = {
3
3
  DARK: 'dark',
4
- LIGHT: 'light',
4
+ LIGHT: 'light'
5
5
  };
6
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","names":["STYLE_VARIANTS","DARK","LIGHT"],"sources":["../../src/Chip/constants.ts"],"sourcesContent":["// eslint-disable-next-line import/prefer-default-export\nexport const STYLE_VARIANTS = {\n DARK: 'dark',\n LIGHT: 'light',\n} as const;\n"],"mappings":"AAAA;AACA,OAAO,IAAMA,cAAc,GAAG;EAC5BC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE;AACT,CAAU","ignoreList":[]}
@@ -1,13 +1,14 @@
1
1
  import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
2
+ import { STYLE_VARIANTS } from './constants';
2
3
  export declare const CHIP_PGN_CLASS = "pgn__chip";
3
4
  export interface IChip {
4
5
  children: React.ReactNode;
5
6
  onClick?: KeyboardEventHandler & MouseEventHandler;
6
7
  className?: string;
7
- variant?: string;
8
- iconBefore?: React.ReactElement | Function;
8
+ variant?: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS];
9
+ iconBefore?: React.ComponentType;
9
10
  iconBeforeAlt?: string;
10
- iconAfter?: React.ReactElement | Function;
11
+ iconAfter?: React.ComponentType;
11
12
  iconAfterAlt?: string;
12
13
  onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler;
13
14
  onIconAfterClick?: KeyboardEventHandler & MouseEventHandler;
@@ -7,9 +7,7 @@ import PropTypes from 'prop-types';
7
7
  import classNames from 'classnames';
8
8
  // @ts-ignore
9
9
  import { requiredWhen } from '../utils/propTypes';
10
- // @ts-ignore
11
10
  import { STYLE_VARIANTS } from './constants';
12
- // @ts-ignore
13
11
  import ChipIcon from './ChipIcon';
14
12
  export var CHIP_PGN_CLASS = 'pgn__chip';
15
13
  var Chip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -79,7 +77,7 @@ Chip.propTypes = {
79
77
  *
80
78
  * `import { Check } from '@openedx/paragon/icons';`
81
79
  */
82
- iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
80
+ iconBefore: PropTypes.elementType,
83
81
  /** Specifies icon alt text. */
84
82
  iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),
85
83
  /** A click handler for the `Chip` icon before. */
@@ -90,7 +88,7 @@ Chip.propTypes = {
90
88
  *
91
89
  * `import { Check } from '@openedx/paragon/icons';`
92
90
  */
93
- iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
91
+ iconAfter: PropTypes.elementType,
94
92
  /** Specifies icon alt text. */
95
93
  iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),
96
94
  /** A click handler for the `Chip` icon after. */
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","classNames","requiredWhen","STYLE_VARIANTS","ChipIcon","CHIP_PGN_CLASS","Chip","forwardRef","_ref","ref","children","className","variant","iconBefore","iconBeforeAlt","iconAfter","iconAfterAlt","onIconBeforeClick","onIconAfterClick","disabled","isSelected","onClick","props","_objectWithoutProperties","_excluded","hasInteractiveIcons","isChipInteractive","interactionProps","onKeyPress","tabIndex","role","createElement","_extends","concat","selected","interactive","src","alt","propTypes","node","isRequired","string","oneOf","bool","func","oneOfType","element","defaultProps","undefined","LIGHT"],"sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n// @ts-ignore\nimport { requiredWhen } from '../utils/propTypes';\n// @ts-ignore\nimport { STYLE_VARIANTS } from './constants';\n// @ts-ignore\nimport ChipIcon from './ChipIcon';\n\nexport const CHIP_PGN_CLASS = 'pgn__chip';\n\nexport interface IChip {\n children: React.ReactNode,\n onClick?: KeyboardEventHandler & MouseEventHandler,\n className?: string,\n variant?: string,\n iconBefore?: React.ReactElement | Function,\n iconBeforeAlt?: string,\n iconAfter?: React.ReactElement | Function,\n iconAfterAlt?: string,\n onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,\n onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,\n disabled?: boolean,\n isSelected?: boolean,\n}\n\nconst Chip = React.forwardRef(({\n children,\n className,\n variant,\n iconBefore,\n iconBeforeAlt,\n iconAfter,\n iconAfterAlt,\n onIconBeforeClick,\n onIconAfterClick,\n disabled,\n isSelected,\n onClick,\n ...props\n}: IChip, ref: ForwardedRef<HTMLDivElement>) => {\n const hasInteractiveIcons = !!(onIconBeforeClick || onIconAfterClick);\n const isChipInteractive = !hasInteractiveIcons && !!onClick;\n\n const interactionProps = isChipInteractive ? {\n onClick,\n onKeyPress: onClick,\n tabIndex: 0,\n role: 'button',\n } : {};\n\n return (\n <div\n className={classNames(\n CHIP_PGN_CLASS,\n `pgn__chip-${variant}`,\n className,\n { disabled, selected: isSelected, interactive: isChipInteractive },\n )}\n ref={ref}\n {...interactionProps}\n {...props}\n >\n {iconBefore && (\n <ChipIcon\n className={`${CHIP_PGN_CLASS}__icon-before`}\n src={iconBefore}\n onClick={onIconBeforeClick}\n alt={iconBeforeAlt}\n variant={variant}\n disabled={disabled}\n />\n )}\n <div\n className={classNames(`${CHIP_PGN_CLASS}__label`, {\n 'p-before': iconBefore,\n 'p-after': iconAfter,\n })}\n >\n {children}\n </div>\n {iconAfter && (\n <ChipIcon\n className={`${CHIP_PGN_CLASS}__icon-after`}\n src={iconAfter}\n onClick={onIconAfterClick}\n alt={iconAfterAlt}\n variant={variant}\n disabled={disabled}\n />\n )}\n </div>\n );\n});\n\nChip.propTypes = {\n /** Specifies the content of the `Chip`. */\n children: PropTypes.node.isRequired,\n /** Specifies an additional `className` to add to the base element. */\n className: PropTypes.string,\n /** The `Chip` style variant to use. */\n variant: PropTypes.oneOf(['light', 'dark']),\n /** Disables the `Chip`. */\n disabled: PropTypes.bool,\n /** Click handler for the whole Chip, has effect only when Chip does not have any interactive icons. */\n onClick: PropTypes.func,\n /**\n * An icon component to render before the content.\n * Example import of a Paragon icon component:\n *\n * `import { Check } from '@openedx/paragon/icons';`\n */\n iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n /** Specifies icon alt text. */\n iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),\n /** A click handler for the `Chip` icon before. */\n onIconBeforeClick: PropTypes.func,\n /**\n * An icon component to render before after the content.\n * Example import of a Paragon icon component:\n *\n * `import { Check } from '@openedx/paragon/icons';`\n */\n iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n /** Specifies icon alt text. */\n iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),\n /** A click handler for the `Chip` icon after. */\n onIconAfterClick: PropTypes.func,\n /** Indicates if `Chip` has been selected. */\n isSelected: PropTypes.bool,\n};\n\nChip.defaultProps = {\n className: undefined,\n variant: STYLE_VARIANTS.LIGHT,\n disabled: false,\n onClick: undefined,\n iconBefore: undefined,\n iconAfter: undefined,\n onIconBeforeClick: undefined,\n onIconAfterClick: undefined,\n isSelected: false,\n iconAfterAlt: undefined,\n iconBeforeAlt: undefined,\n};\n\nexport default Chip;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","classNames","requiredWhen","STYLE_VARIANTS","ChipIcon","CHIP_PGN_CLASS","Chip","forwardRef","_ref","ref","children","className","variant","iconBefore","iconBeforeAlt","iconAfter","iconAfterAlt","onIconBeforeClick","onIconAfterClick","disabled","isSelected","onClick","props","_objectWithoutProperties","_excluded","hasInteractiveIcons","isChipInteractive","interactionProps","onKeyPress","tabIndex","role","createElement","_extends","concat","selected","interactive","src","alt","propTypes","node","isRequired","string","oneOf","bool","func","elementType","defaultProps","undefined","LIGHT"],"sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes, { type Requireable } from 'prop-types';\nimport classNames from 'classnames';\n// @ts-ignore\nimport { requiredWhen } from '../utils/propTypes';\nimport { STYLE_VARIANTS } from './constants';\nimport ChipIcon from './ChipIcon';\n\nexport const CHIP_PGN_CLASS = 'pgn__chip';\n\nexport interface IChip {\n children: React.ReactNode,\n onClick?: KeyboardEventHandler & MouseEventHandler,\n className?: string,\n variant?: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],\n iconBefore?: React.ComponentType,\n iconBeforeAlt?: string,\n iconAfter?: React.ComponentType,\n iconAfterAlt?: string,\n onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,\n onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,\n disabled?: boolean,\n isSelected?: boolean,\n}\n\nconst Chip = React.forwardRef(({\n children,\n className,\n variant,\n iconBefore,\n iconBeforeAlt,\n iconAfter,\n iconAfterAlt,\n onIconBeforeClick,\n onIconAfterClick,\n disabled,\n isSelected,\n onClick,\n ...props\n}: IChip, ref: ForwardedRef<HTMLDivElement>) => {\n const hasInteractiveIcons = !!(onIconBeforeClick || onIconAfterClick);\n const isChipInteractive = !hasInteractiveIcons && !!onClick;\n\n const interactionProps = isChipInteractive ? {\n onClick,\n onKeyPress: onClick,\n tabIndex: 0,\n role: 'button',\n } : {};\n\n return (\n <div\n className={classNames(\n CHIP_PGN_CLASS,\n `pgn__chip-${variant}`,\n className,\n { disabled, selected: isSelected, interactive: isChipInteractive },\n )}\n ref={ref}\n {...interactionProps}\n {...props}\n >\n {iconBefore && (\n <ChipIcon\n className={`${CHIP_PGN_CLASS}__icon-before`}\n src={iconBefore}\n onClick={onIconBeforeClick}\n alt={iconBeforeAlt}\n variant={variant}\n disabled={disabled}\n />\n )}\n <div\n className={classNames(`${CHIP_PGN_CLASS}__label`, {\n 'p-before': iconBefore,\n 'p-after': iconAfter,\n })}\n >\n {children}\n </div>\n {iconAfter && (\n <ChipIcon\n className={`${CHIP_PGN_CLASS}__icon-after`}\n src={iconAfter}\n onClick={onIconAfterClick}\n alt={iconAfterAlt}\n variant={variant}\n disabled={disabled}\n />\n )}\n </div>\n );\n});\n\nChip.propTypes = {\n /** Specifies the content of the `Chip`. */\n children: PropTypes.node.isRequired,\n /** Specifies an additional `className` to add to the base element. */\n className: PropTypes.string,\n /** The `Chip` style variant to use. */\n variant: PropTypes.oneOf(['light', 'dark']),\n /** Disables the `Chip`. */\n disabled: PropTypes.bool,\n /** Click handler for the whole Chip, has effect only when Chip does not have any interactive icons. */\n onClick: PropTypes.func,\n /**\n * An icon component to render before the content.\n * Example import of a Paragon icon component:\n *\n * `import { Check } from '@openedx/paragon/icons';`\n */\n iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,\n /** Specifies icon alt text. */\n iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),\n /** A click handler for the `Chip` icon before. */\n onIconBeforeClick: PropTypes.func,\n /**\n * An icon component to render before after the content.\n * Example import of a Paragon icon component:\n *\n * `import { Check } from '@openedx/paragon/icons';`\n */\n iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,\n /** Specifies icon alt text. */\n iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),\n /** A click handler for the `Chip` icon after. */\n onIconAfterClick: PropTypes.func,\n /** Indicates if `Chip` has been selected. */\n isSelected: PropTypes.bool,\n};\n\nChip.defaultProps = {\n className: undefined,\n variant: STYLE_VARIANTS.LIGHT,\n disabled: false,\n onClick: undefined,\n iconBefore: undefined,\n iconAfter: undefined,\n onIconBeforeClick: undefined,\n onIconAfterClick: undefined,\n isSelected: false,\n iconAfterAlt: undefined,\n iconBeforeAlt: undefined,\n};\n\nexport default Chip;\n"],"mappings":"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","ignoreList":[]}
@@ -14,9 +14,7 @@ import { useIntl } from 'react-intl';
14
14
  import classNames from 'classnames';
15
15
  // @ts-ignore
16
16
  import { OverflowScroll, OverflowScrollContext } from '../OverflowScroll';
17
- // @ts-ignore
18
17
  import IconButton from '../IconButton';
19
- // @ts-ignore
20
18
  import Icon from '../Icon';
21
19
  // @ts-ignore
22
20
  import { ArrowForward, ArrowBack } from '../../icons';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","useIntl","classNames","OverflowScroll","OverflowScrollContext","IconButton","Icon","ArrowForward","ArrowBack","messages","Chip","ChipCarousel","forwardRef","_ref","ref","className","items","ariaLabel","disableOpacityMasks","onScrollPrevious","onScrollNext","_ref$canScrollHorizon","canScrollHorizontal","_ref$offset","offset","_ref$offsetType","offsetType","gap","props","_objectWithoutProperties","_excluded","intl","createElement","_extends","concat","hasInteractiveChildren","disableScroll","Consumer","_ref2","setOverflowRef","isScrolledToStart","isScrolledToEnd","scrollToPrevious","scrollToNext","Fragment","size","src","iconAs","alt","formatMessage","onClick","Items","map","item","id","_ref3","children","_objectSpread","key","propTypes","string","isRequired","arrayOf","element","bool","func","oneOfType","number","oneOf","defaultProps","undefined"],"sources":["../../src/ChipCarousel/index.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useIntl } from 'react-intl';\nimport classNames from 'classnames';\n// @ts-ignore\nimport { OverflowScroll, OverflowScrollContext } from '../OverflowScroll';\n// @ts-ignore\nimport IconButton from '../IconButton';\n// @ts-ignore\nimport Icon from '../Icon';\n// @ts-ignore\nimport { ArrowForward, ArrowBack } from '../../icons';\n// @ts-ignore\nimport messages from './messages';\nimport Chip from '../Chip';\n\nexport interface OverflowScrollContextProps {\n setOverflowRef: () => void,\n isScrolledToStart: boolean,\n isScrolledToEnd: boolean,\n scrollToPrevious: () => void,\n scrollToNext: () => void,\n}\n\nexport interface ChipCarouselProps {\n className?: string;\n items: Array<React.ReactElement>;\n ariaLabel: string;\n disableOpacityMasks?: boolean;\n onScrollPrevious?: () => void;\n onScrollNext?: () => void;\n canScrollHorizontal?: boolean;\n offset?: number | string;\n offsetType?: 'percentage' | 'fixed';\n gap?: number;\n}\n\nconst ChipCarousel = React.forwardRef(({\n className,\n items,\n ariaLabel,\n disableOpacityMasks,\n onScrollPrevious,\n onScrollNext,\n canScrollHorizontal = false,\n offset = 120,\n offsetType = 'fixed',\n gap,\n ...props\n}: ChipCarouselProps, ref: ForwardedRef<HTMLDivElement>) => {\n const intl = useIntl();\n\n return (\n <div\n className={classNames('pgn__chip-carousel', className, gap ? `pgn__chip-carousel-gap__${gap}` : '')}\n {...props}\n ref={ref}\n >\n <OverflowScroll\n ariaLabel={ariaLabel}\n hasInteractiveChildren\n disableScroll={!canScrollHorizontal}\n disableOpacityMasks={disableOpacityMasks}\n onScrollPrevious={onScrollPrevious}\n onScrollNext={onScrollNext}\n offset={offset}\n offsetType={offsetType}\n >\n <OverflowScrollContext.Consumer>\n {({\n setOverflowRef,\n isScrolledToStart,\n isScrolledToEnd,\n scrollToPrevious,\n scrollToNext,\n }: OverflowScrollContextProps) => (\n <>\n <>\n {!isScrolledToStart && (\n <IconButton\n size=\"sm\"\n className=\"pgn__chip-carousel__left-control\"\n src={ArrowBack}\n iconAs={Icon}\n alt={intl.formatMessage(messages.scrollToPrevious)}\n onClick={scrollToPrevious}\n />\n )}\n {!isScrolledToEnd && (\n <IconButton\n size=\"sm\"\n className=\"pgn__chip-carousel__right-control\"\n src={ArrowForward}\n iconAs={Icon}\n alt={intl.formatMessage(messages.scrollToNext)}\n onClick={scrollToNext}\n />\n )}\n </>\n <div ref={setOverflowRef} className=\"d-flex\">\n <OverflowScroll.Items>\n {items?.map((item, id) => {\n const { children } = item?.props || {};\n if (!children) {\n return null;\n }\n // eslint-disable-next-line react/no-array-index-key\n return React.createElement(Chip, { ...item.props, key: id });\n })}\n </OverflowScroll.Items>\n </div>\n </>\n )}\n </OverflowScrollContext.Consumer>\n </OverflowScroll>\n </div>\n );\n});\n\nChipCarousel.propTypes = {\n /** Text describing the ChipCarousel for screen readers. */\n ariaLabel: PropTypes.string.isRequired,\n /** Specifies class name for the ChipCarousel. */\n className: PropTypes.string,\n /** Specifies array of `Chip` elements to be rendered inside the carousel. */\n // @ts-ignore\n items: PropTypes.arrayOf(PropTypes.element).isRequired,\n /** Whether the default opacity masks should be shown at the start/end, if applicable. */\n disableOpacityMasks: PropTypes.bool,\n /** Callback function for when the user scrolls to the previous element. */\n onScrollPrevious: PropTypes.func,\n /** Callback function for when the user scrolls to the next element. */\n onScrollNext: PropTypes.func,\n /** Whether users can scroll within the overflow container. */\n canScrollHorizontal: PropTypes.bool,\n /** A value specifying the distance the scroll should move. */\n offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n /** Type of offset value (percentage or fixed). */\n offsetType: PropTypes.oneOf(['percentage', 'fixed']),\n /**\n * Specifies inner space between children blocks.\n *\n * Valid values are based on `the spacing classes`:\n * `0, 0.5, ... 6`.\n */\n gap: PropTypes.number,\n};\n\nChipCarousel.defaultProps = {\n className: undefined,\n disableOpacityMasks: undefined,\n onScrollPrevious: undefined,\n onScrollNext: undefined,\n canScrollHorizontal: false,\n offset: 120,\n offsetType: 'fixed',\n gap: 3,\n};\n\nexport default ChipCarousel;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","useIntl","classNames","OverflowScroll","OverflowScrollContext","IconButton","Icon","ArrowForward","ArrowBack","messages","Chip","ChipCarousel","forwardRef","_ref","ref","className","items","ariaLabel","disableOpacityMasks","onScrollPrevious","onScrollNext","_ref$canScrollHorizon","canScrollHorizontal","_ref$offset","offset","_ref$offsetType","offsetType","gap","props","_objectWithoutProperties","_excluded","intl","createElement","_extends","concat","hasInteractiveChildren","disableScroll","Consumer","_ref2","setOverflowRef","isScrolledToStart","isScrolledToEnd","scrollToPrevious","scrollToNext","Fragment","size","src","iconAs","alt","formatMessage","onClick","Items","map","item","id","_ref3","children","_objectSpread","key","propTypes","string","isRequired","arrayOf","element","bool","func","oneOfType","number","oneOf","defaultProps","undefined"],"sources":["../../src/ChipCarousel/index.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useIntl } from 'react-intl';\nimport classNames from 'classnames';\n// @ts-ignore\nimport { OverflowScroll, OverflowScrollContext } from '../OverflowScroll';\nimport IconButton from '../IconButton';\nimport Icon from '../Icon';\n// @ts-ignore\nimport { ArrowForward, ArrowBack } from '../../icons';\n// @ts-ignore\nimport messages from './messages';\nimport Chip from '../Chip';\n\nexport interface OverflowScrollContextProps {\n setOverflowRef: () => void,\n isScrolledToStart: boolean,\n isScrolledToEnd: boolean,\n scrollToPrevious: () => void,\n scrollToNext: () => void,\n}\n\nexport interface ChipCarouselProps {\n className?: string;\n items: Array<React.ReactElement>;\n ariaLabel: string;\n disableOpacityMasks?: boolean;\n onScrollPrevious?: () => void;\n onScrollNext?: () => void;\n canScrollHorizontal?: boolean;\n offset?: number | string;\n offsetType?: 'percentage' | 'fixed';\n gap?: number;\n}\n\nconst ChipCarousel = React.forwardRef(({\n className,\n items,\n ariaLabel,\n disableOpacityMasks,\n onScrollPrevious,\n onScrollNext,\n canScrollHorizontal = false,\n offset = 120,\n offsetType = 'fixed',\n gap,\n ...props\n}: ChipCarouselProps, ref: ForwardedRef<HTMLDivElement>) => {\n const intl = useIntl();\n\n return (\n <div\n className={classNames('pgn__chip-carousel', className, gap ? `pgn__chip-carousel-gap__${gap}` : '')}\n {...props}\n ref={ref}\n >\n <OverflowScroll\n ariaLabel={ariaLabel}\n hasInteractiveChildren\n disableScroll={!canScrollHorizontal}\n disableOpacityMasks={disableOpacityMasks}\n onScrollPrevious={onScrollPrevious}\n onScrollNext={onScrollNext}\n offset={offset}\n offsetType={offsetType}\n >\n <OverflowScrollContext.Consumer>\n {({\n setOverflowRef,\n isScrolledToStart,\n isScrolledToEnd,\n scrollToPrevious,\n scrollToNext,\n }: OverflowScrollContextProps) => (\n <>\n <>\n {!isScrolledToStart && (\n <IconButton\n size=\"sm\"\n className=\"pgn__chip-carousel__left-control\"\n src={ArrowBack}\n iconAs={Icon}\n alt={intl.formatMessage(messages.scrollToPrevious)}\n onClick={scrollToPrevious}\n />\n )}\n {!isScrolledToEnd && (\n <IconButton\n size=\"sm\"\n className=\"pgn__chip-carousel__right-control\"\n src={ArrowForward}\n iconAs={Icon}\n alt={intl.formatMessage(messages.scrollToNext)}\n onClick={scrollToNext}\n />\n )}\n </>\n <div ref={setOverflowRef} className=\"d-flex\">\n <OverflowScroll.Items>\n {items?.map((item, id) => {\n const { children } = item?.props || {};\n if (!children) {\n return null;\n }\n // eslint-disable-next-line react/no-array-index-key\n return React.createElement(Chip, { ...item.props, key: id });\n })}\n </OverflowScroll.Items>\n </div>\n </>\n )}\n </OverflowScrollContext.Consumer>\n </OverflowScroll>\n </div>\n );\n});\n\nChipCarousel.propTypes = {\n /** Text describing the ChipCarousel for screen readers. */\n ariaLabel: PropTypes.string.isRequired,\n /** Specifies class name for the ChipCarousel. */\n className: PropTypes.string,\n /** Specifies array of `Chip` elements to be rendered inside the carousel. */\n // @ts-ignore\n items: PropTypes.arrayOf(PropTypes.element).isRequired,\n /** Whether the default opacity masks should be shown at the start/end, if applicable. */\n disableOpacityMasks: PropTypes.bool,\n /** Callback function for when the user scrolls to the previous element. */\n onScrollPrevious: PropTypes.func,\n /** Callback function for when the user scrolls to the next element. */\n onScrollNext: PropTypes.func,\n /** Whether users can scroll within the overflow container. */\n canScrollHorizontal: PropTypes.bool,\n /** A value specifying the distance the scroll should move. */\n offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n /** Type of offset value (percentage or fixed). */\n offsetType: PropTypes.oneOf(['percentage', 'fixed']),\n /**\n * Specifies inner space between children blocks.\n *\n * Valid values are based on `the spacing classes`:\n * `0, 0.5, ... 6`.\n */\n gap: PropTypes.number,\n};\n\nChipCarousel.defaultProps = {\n className: undefined,\n disableOpacityMasks: undefined,\n onScrollPrevious: undefined,\n onScrollNext: undefined,\n canScrollHorizontal: false,\n offset: 120,\n offsetType: 'fixed',\n gap: 3,\n};\n\nexport default ChipCarousel;\n"],"mappings":"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","ignoreList":[]}