@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/dist/Carousel/index.scss

@@ -1,168 +1,2 @@
-.carousel {
-  position: relative;
-}
-
-.carousel.pointer-event {
-  touch-action: pan-y;
-}
-
-.carousel-inner {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-
-  @include clearfix();
-}
-
-.carousel-item {
-  position: relative;
-  display: none;
-  float: left;
-  width: 100%;
-  margin-right: -100%;
-  backface-visibility: hidden;
-  transition: var(--pgn-transition-carousel-base);
-}
-
-.carousel-item.active,
-.carousel-item-next,
-.carousel-item-prev {
-  display: block;
-}
-
-.carousel-item-next:not(.carousel-item-left),
-.active.carousel-item-right {
-  transform: translateX(100%);
-}
-
-.carousel-item-prev:not(.carousel-item-right),
-.active.carousel-item-left {
-  transform: translateX(-100%);
-}
-
-.carousel-fade {
-  .carousel-item {
-    opacity: 0;
-    transition-property: opacity;
-    transform: none;
-  }
-
-  .carousel-item.active,
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
-    z-index: 1;
-    opacity: 1;
-  }
-
-  .active.carousel-item-left,
-  .active.carousel-item-right {
-    z-index: 0;
-    opacity: 0;
-    transition: opacity 0s var(--pgn-transition-carousel-base);
-  }
-}
-
-.carousel-control-prev,
-.carousel-control-next {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--pgn-size-carousel-control-width-base);
-  padding: 0;
-  color: var(--pgn-color-carousel-control-base);
-  text-align: center;
-  background: none;
-  border: 0;
-  opacity: var(--pgn-other-carousel-control-opacity-base);
-  transition: var(--pgn-transition-carousel-control);
-
-  @include hover-focus() {
-    color: var(--pgn-carousel-control-color);
-    text-decoration: none;
-    outline: 0;
-    opacity: var(--pgn-other-carousel-control-opacity-hover);
-  }
-}
-
-.carousel-control-prev {
-  left: 0;
-
-  @if $enable-gradients {
-    background-image: linear-gradient(90deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001));
-  }
-}
-
-.carousel-control-next {
-  right: 0;
-
-  @if $enable-gradients {
-    background-image: linear-gradient(270deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001));
-  }
-}
-
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-  display: inline-block;
-  width: var(--pgn-size-carousel-control-width-icon);
-  height: var(--pgn-size-carousel-control-width-icon);
-  background: 50% / 100% 100% no-repeat;
-}
-
-.carousel-control-prev-icon {
-  background-image: var(--pgn-content-carousel-control-bg-prev-icon);
-}
-
-.carousel-control-next-icon {
-  background-image: var(--pgn-content-carousel-control-bg-next-icon);
-}
-
-.carousel-indicators {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 15;
-  display: flex;
-  justify-content: center;
-  padding-left: 0;
-  margin-right: var(--pgn-size-carousel-control-width-base);
-  margin-left: var(--pgn-size-carousel-control-width-base);
-  list-style: none;
-
-  li {
-    box-sizing: content-box;
-    flex: 0 1 auto;
-    width: var(--pgn-size-carousel-indicator-width);
-    height: var(--pgn-size-carousel-indicator-height-base);
-    margin-right: var(--pgn-spacing-carousel-indicator-spacer);
-    margin-left: var(--pgn-spacing-carousel-indicator-spacer);
-    text-indent: -999px;
-    cursor: pointer;
-    background-color: var(--pgn-color-carousel-indicator-active-bg);
-    background-clip: padding-box;
-    border-top: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent;
-    border-bottom: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent;
-    opacity: .5;
-    transition: var(--pgn-transition-carousel-indicator);
-  }
-
-  .active {
-    opacity: 1;
-  }
-}
-
-.carousel-caption {
-  position: absolute;
-  right: calc((calc(100% - var(--pgn-size-carousel-caption-width))) * .5);
-  bottom: 20px;
-  left: calc((calc(100% - var(--pgn-size-carousel-caption-width))) * .5);
-  z-index: 10;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  color: var(--pgn-color-carousel-caption);
-  text-align: center;
-}
+@import "variables";
+@import "~bootstrap/scss/carousel";

package/dist/CheckBox/index.js

@@ -0,0 +1,102 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["inputRef"];
+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); }
+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; }
+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; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+import React from 'react';
+import PropTypes from 'prop-types';
+import asInput from '../asInput';
+import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
+var Check = /*#__PURE__*/function (_React$Component) {
+  _inherits(Check, _React$Component);
+  var _super = _createSuper(Check);
+  function Check(props) {
+    var _this;
+    _classCallCheck(this, Check);
+    _this = _super.call(this, props);
+    _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.state = {
+      checked: props.checked || false
+    };
+    return _this;
+  }
+
+  /* eslint-disable react/no-did-update-set-state */
+  _createClass(Check, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.checked !== this.props.checked) {
+        this.setState({
+          checked: this.props.checked
+        });
+      }
+    }
+  }, {
+    key: "onChange",
+    value: function onChange(event) {
+      this.setState(function (prevState) {
+        return {
+          checked: !prevState.checked
+        };
+      });
+      this.props.onChange(event);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        inputRef = _this$props.inputRef,
+        others = _objectWithoutProperties(_this$props, _excluded);
+      return /*#__PURE__*/React.createElement("input", _extends({}, others, {
+        type: "checkbox",
+        ref: inputRef,
+        checked: this.state.checked,
+        "aria-checked": this.state.checked,
+        onChange: this.onChange
+      }));
+    }
+  }]);
+  return Check;
+}(React.Component);
+Check.propTypes = {
+  // eslint-disable-next-line max-len
+  /** (`Boolean`): `true` if the state should be checked, `false` otherwise. This prop can be used to manage the Checkbox more directly, overriding the default Checkbox checked state. */
+  checked: PropTypes.bool,
+  /** (`Boolean`): `true` if the checkbox should be disabled, `false` otherwise */
+  onChange: PropTypes.func,
+  /** function to be called when the checkbox changes state */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(PropTypes.element)
+  })])
+};
+Check.defaultProps = {
+  checked: false,
+  onChange: function onChange() {},
+  inputRef: undefined
+};
+var CheckBox = asInput(withDeprecatedProps(Check, 'Checkbox', {
+  className: {
+    deprType: DeprTypes.FORMAT,
+    expect: function expect(value) {
+      return typeof value === 'string';
+    },
+    transform: function transform(value) {
+      return Array.isArray(value) ? value.join(' ') : value;
+    },
+    message: 'It should be a string.'
+  }
+}), 'checkbox', false);
+export default CheckBox;
+//# sourceMappingURL=index.js.map

package/dist/CheckBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PropTypes","asInput","withDeprecatedProps","DeprTypes","Check","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","onChange","bind","_assertThisInitialized","state","checked","_createClass","key","value","componentDidUpdate","prevProps","setState","event","prevState","render","_this$props","inputRef","others","_objectWithoutProperties","_excluded","createElement","_extends","type","ref","Component","propTypes","bool","func","oneOfType","shape","current","instanceOf","element","defaultProps","undefined","CheckBox","className","deprType","FORMAT","expect","transform","Array","isArray","join","message"],"sources":["../../src/CheckBox/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport asInput from '../asInput';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nclass Check extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.onChange = this.onChange.bind(this);\n\n    this.state = {\n      checked: props.checked || false,\n    };\n  }\n\n  /* eslint-disable react/no-did-update-set-state */\n  componentDidUpdate(prevProps) {\n    if (prevProps.checked !== this.props.checked) {\n      this.setState({\n        checked: this.props.checked,\n      });\n    }\n  }\n\n  onChange(event) {\n    this.setState(prevState => ({\n      checked: !prevState.checked,\n    }));\n    this.props.onChange(event);\n  }\n\n  render() {\n    const {\n      inputRef,\n      ...others\n    } = this.props;\n    return (\n      <input\n        {...others}\n        type=\"checkbox\"\n        ref={inputRef}\n        checked={this.state.checked}\n        aria-checked={this.state.checked}\n        onChange={this.onChange}\n      />\n    );\n  }\n}\n\nCheck.propTypes = {\n  // eslint-disable-next-line max-len\n  /** (`Boolean`): `true` if the state should be checked, `false` otherwise. This prop can be used to manage the Checkbox more directly, overriding the default Checkbox checked state. */\n  checked: PropTypes.bool,\n  /** (`Boolean`): `true` if the checkbox should be disabled, `false` otherwise */\n  onChange: PropTypes.func,\n  /** function to be called when the checkbox changes state */\n  inputRef: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.element) }),\n  ]),\n};\n\nCheck.defaultProps = {\n  checked: false,\n  onChange: () => {},\n  inputRef: undefined,\n};\n\nconst CheckBox = asInput(withDeprecatedProps(Check, 'Checkbox', {\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}), 'checkbox', false);\n\nexport default CheckBox;\n"],"mappings":"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"}

package/dist/CheckBoxGroup/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+function CheckBoxGroup(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "form-group"
+  }, props.children);
+}
+CheckBoxGroup.propTypes = {
+  // eslint-disable-next-line max-len
+  /** represents the CheckBox components defined within the CheckBoxGroup component and is not a specific named prop that needs to be passed in. At least one CheckBox must be defined within the group. Example: `<CheckBoxGroup><CheckBox .../></CheckBoxGroup>`
+   */
+  children: PropTypes.arrayOf(PropTypes.element).isRequired
+};
+export default CheckBoxGroup;
+//# sourceMappingURL=index.js.map

package/dist/CheckBoxGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PropTypes","CheckBoxGroup","props","createElement","className","children","propTypes","arrayOf","element","isRequired"],"sources":["../../src/CheckBoxGroup/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nfunction CheckBoxGroup(props) {\n  return (\n    <div className=\"form-group\">\n      {props.children}\n    </div>\n  );\n}\n\nCheckBoxGroup.propTypes = {\n  // eslint-disable-next-line max-len\n  /** represents the CheckBox components defined within the CheckBoxGroup component and is not a specific named prop that needs to be passed in. At least one CheckBox must be defined within the group. Example: `<CheckBoxGroup><CheckBox .../></CheckBoxGroup>`\n   */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired,\n};\n\nexport default CheckBoxGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,aAAaA,CAACC,KAAK,EAAE;EAC5B,oBACEH,KAAA,CAAAI,aAAA;IAAKC,SAAS,EAAC;EAAY,GACxBF,KAAK,CAACG,QACJ,CAAC;AAEV;AAEAJ,aAAa,CAACK,SAAS,GAAG;EACxB;EACA;AACF;EACED,QAAQ,EAAEL,SAAS,CAACO,OAAO,CAACP,SAAS,CAACQ,OAAO,CAAC,CAACC;AACjD,CAAC;AAED,eAAeR,aAAa"}

package/dist/Chip/ChipIcon.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../Icon';
+// @ts-ignore
+import IconButton from '../IconButton';
+// @ts-ignore
+import { STYLE_VARIANTS } from './constants';
+function ChipIcon(_ref) {
+  var className = _ref.className,
+    src = _ref.src,
+    onClick = _ref.onClick,
+    alt = _ref.alt,
+    variant = _ref.variant,
+    disabled = _ref.disabled;
+  if (onClick) {
+    return /*#__PURE__*/React.createElement(IconButton, {
+      className: className,
+      src: src,
+      onClick: onClick,
+      iconAs: Icon,
+      alt: alt,
+      invertColors: variant === STYLE_VARIANTS.DARK,
+      tabIndex: disabled ? -1 : 0
+    });
+  }
+  return /*#__PURE__*/React.createElement(Icon, {
+    src: src,
+    className: className,
+    size: "sm"
+  });
+}
+ChipIcon.propTypes = {
+  className: PropTypes.string.isRequired,
+  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+  onClick: PropTypes.func,
+  alt: PropTypes.string,
+  variant: PropTypes.string,
+  disabled: PropTypes.bool
+};
+ChipIcon.defaultProps = {
+  onClick: undefined,
+  alt: undefined,
+  variant: STYLE_VARIANTS.LIGHT,
+  disabled: false
+};
+export default ChipIcon;
+//# sourceMappingURL=ChipIcon.js.map

package/dist/Chip/ChipIcon.js.map

@@ -0,0 +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"}

package/dist/Chip/_variables.scss

@@ -0,0 +1,28 @@
+$chip-padding-x:                            .5rem !default;
+$chip-padding-y:                            1px !default;
+$chip-icon-margin:                          .25rem !default;
+$chip-margin:                               .125rem !default;
+$chip-border-radius:                        .375rem !default;
+$chip-disable-opacity:                      .3 !default;
+$chip-icon-size:                            1.5rem !default;
+$chip-label-color:                          $primary-700 !default;
+$chip-border-color:                         $light-800 !default;
+$chip-outline-width:                        3px !default;
+$chip-light-bg-color:                       $white !default;
+$chip-light-outline-color:                  $chip-label-color !default;
+$chip-light-selected-outline-distance:      3px !default;
+$chip-light-selected-focus-border-color:    $dark-500 !default;
+$chip-light-hover-bg:                       $dark-500 !default;
+$chip-light-hover-border-color:             $chip-light-hover-bg !default;
+$chip-light-hover-label-color:              $chip-light-bg-color !default;
+$chip-light-hover-icon-color:               $chip-light-hover-label-color !default;
+$chip-light-focus-outline-distance:         .313rem !default;
+$chip-dark-bg:                              $primary-300 !default;
+$chip-dark-outline-color:                   $white !default;
+$chip-dark-selected-outline-distance:       3px !default;
+$chip-dark-selected-focus-border-color:     $chip-dark-outline-color !default;
+$chip-dark-label-color:                     $chip-dark-outline-color !default;
+$chip-dark-hover-bg:                        $white !default;
+$chip-dark-hover-border-color:              $chip-dark-hover-bg !default;
+$chip-dark-hover-label-color:               $primary-500 !default;
+$chip-dark-focus-outline-distance:          .313rem !default;

package/dist/Chip/constants.js

@@ -0,0 +1,5 @@
+// eslint-disable-next-line import/prefer-default-export
+export const STYLE_VARIANTS = {
+  DARK: 'dark',
+  LIGHT: 'light',
+};

package/dist/Chip/index.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "className", "variant", "iconBefore", "iconAfter", "onIconBeforeClick", "onIconAfterClick", "disabled"];
+var _excluded = ["children", "className", "variant", "iconBefore", "iconBeforeAlt", "iconAfter", "iconAfterAlt", "onIconBeforeClick", "onIconAfterClick", "disabled", "isSelected", "onClick"];
 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); }
 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; }
 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; }
@@ -6,47 +6,61 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 // @ts-ignore
-import Icon from '../Icon';
-const STYLE_VARIANTS = ['light', 'dark'];
-export const CHIP_PGN_CLASS = 'pgn__chip';
-const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      children,
-      className,
-      variant,
-      iconBefore,
-      iconAfter,
-      onIconBeforeClick,
-      onIconAfterClick,
-      disabled
-    } = _ref,
+import { requiredWhen } from '../utils/propTypes';
+// @ts-ignore
+import { STYLE_VARIANTS } from './constants';
+// @ts-ignore
+import ChipIcon from './ChipIcon';
+export var CHIP_PGN_CLASS = 'pgn__chip';
+var Chip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    variant = _ref.variant,
+    iconBefore = _ref.iconBefore,
+    iconBeforeAlt = _ref.iconBeforeAlt,
+    iconAfter = _ref.iconAfter,
+    iconAfterAlt = _ref.iconAfterAlt,
+    onIconBeforeClick = _ref.onIconBeforeClick,
+    onIconAfterClick = _ref.onIconAfterClick,
+    disabled = _ref.disabled,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
     props = _objectWithoutProperties(_ref, _excluded);
+  var hasInteractiveIcons = !!(onIconBeforeClick || onIconAfterClick);
+  var isChipInteractive = !hasInteractiveIcons && !!onClick;
+  var interactionProps = isChipInteractive ? {
+    onClick: onClick,
+    onKeyPress: onClick,
+    tabIndex: 0,
+    role: 'button'
+  } : {};
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(CHIP_PGN_CLASS, `pgn__chip-${variant}`, className, {
-      disabled
+    className: classNames(CHIP_PGN_CLASS, "pgn__chip-".concat(variant), className, {
+      disabled: disabled,
+      selected: isSelected,
+      interactive: isChipInteractive
     }),
     ref: ref
-  }, props), iconBefore && /*#__PURE__*/React.createElement("div", {
-    className: classNames('pgn__chip__icon-before')
-  }, /*#__PURE__*/React.createElement(Icon, {
-    src: iconBefore
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classNames('pgn__chip__label', {
+  }, interactionProps, props), iconBefore && /*#__PURE__*/React.createElement(ChipIcon, {
+    className: "".concat(CHIP_PGN_CLASS, "__icon-before"),
+    src: iconBefore,
+    onClick: onIconBeforeClick,
+    alt: iconBeforeAlt,
+    variant: variant,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(CHIP_PGN_CLASS, "__label"), {
       'p-before': iconBefore,
       'p-after': iconAfter
     })
-  }, children), iconAfter && /*#__PURE__*/React.createElement("div", {
-    className: classNames('pgn__chip__icon-after', {
-      active: onIconAfterClick
-    }),
-    role: "button",
+  }, children), iconAfter && /*#__PURE__*/React.createElement(ChipIcon, {
+    className: "".concat(CHIP_PGN_CLASS, "__icon-after"),
+    src: iconAfter,
     onClick: onIconAfterClick,
-    onKeyPress: onIconAfterClick,
-    tabIndex: disabled ? -1 : 0,
-    "data-testid": "icon-after"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    src: iconAfter
-  })));
+    alt: iconAfterAlt,
+    variant: variant,
+    disabled: disabled
+  }));
 });
 Chip.propTypes = {
   /** Specifies the content of the `Chip`. */
@@ -54,36 +68,48 @@ Chip.propTypes = {
   /** Specifies an additional `className` to add to the base element. */
   className: PropTypes.string,
   /** The `Chip` style variant to use. */
-  variant: PropTypes.oneOf(STYLE_VARIANTS),
+  variant: PropTypes.oneOf(['light', 'dark']),
   /** Disables the `Chip`. */
   disabled: PropTypes.bool,
+  /** Click handler for the whole Chip, has effect only when Chip does not have any interactive icons. */
+  onClick: PropTypes.func,
   /**
    * An icon component to render before the content.
    * Example import of a Paragon icon component:
    *
-   * `import { Check } from '@edx/paragon/icons';`
+   * `import { Check } from '@openedx/paragon/icons';`
    */
   iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /** Specifies icon alt text. */
+  iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),
   /** A click handler for the `Chip` icon before. */
   onIconBeforeClick: PropTypes.func,
   /**
    * An icon component to render before after the content.
    * Example import of a Paragon icon component:
    *
-   * `import { Check } from '@edx/paragon/icons';`
+   * `import { Check } from '@openedx/paragon/icons';`
    */
   iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /** Specifies icon alt text. */
+  iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),
   /** A click handler for the `Chip` icon after. */
-  onIconAfterClick: PropTypes.func
+  onIconAfterClick: PropTypes.func,
+  /** Indicates if `Chip` has been selected. */
+  isSelected: PropTypes.bool
 };
 Chip.defaultProps = {
   className: undefined,
-  variant: 'light',
+  variant: STYLE_VARIANTS.LIGHT,
   disabled: false,
+  onClick: undefined,
   iconBefore: undefined,
   iconAfter: undefined,
   onIconBeforeClick: undefined,
-  onIconAfterClick: undefined
+  onIconAfterClick: undefined,
+  isSelected: false,
+  iconAfterAlt: undefined,
+  iconBeforeAlt: undefined
 };
 export default Chip;
 //# sourceMappingURL=index.js.map

package/dist/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Icon","STYLE_VARIANTS","CHIP_PGN_CLASS","Chip","forwardRef","_ref","ref","children","className","variant","iconBefore","iconAfter","onIconBeforeClick","onIconAfterClick","disabled","props","_objectWithoutProperties","_excluded","createElement","_extends","src","active","role","onClick","onKeyPress","tabIndex","propTypes","node","isRequired","string","oneOf","bool","oneOfType","element","func","defaultProps","undefined"],"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 Icon from '../Icon';\n\nconst STYLE_VARIANTS = [\n  'light',\n  'dark',\n];\n\nexport interface IChip {\n  children: React.ReactNode,\n  className?: string,\n  variant?: string,\n  iconBefore?: React.ReactElement | Function,\n  iconAfter?: React.ReactElement | Function,\n  onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,\n  onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,\n  disabled?: boolean,\n}\n\nexport const CHIP_PGN_CLASS = 'pgn__chip';\n\nconst Chip = React.forwardRef(({\n  children,\n  className,\n  variant,\n  iconBefore,\n  iconAfter,\n  onIconBeforeClick,\n  onIconAfterClick,\n  disabled,\n  ...props\n}: IChip, ref: ForwardedRef<HTMLDivElement>) => (\n  <div\n    className={classNames(\n      CHIP_PGN_CLASS,\n      `pgn__chip-${variant}`,\n      className,\n      { disabled },\n    )}\n    ref={ref}\n    {...props}\n  >\n    {iconBefore && (\n      <div\n        className={classNames('pgn__chip__icon-before')}\n      >\n        <Icon src={iconBefore} />\n      </div>\n    )}\n    <div\n      className={classNames('pgn__chip__label', {\n        'p-before': iconBefore,\n        'p-after': iconAfter,\n      })}\n    >\n      {children}\n    </div>\n    {iconAfter && (\n      <div\n        className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}\n        role=\"button\"\n        onClick={onIconAfterClick}\n        onKeyPress={onIconAfterClick}\n        tabIndex={disabled ? -1 : 0}\n        data-testid=\"icon-after\"\n      >\n        <Icon src={iconAfter} />\n      </div>\n    )}\n  </div>\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(STYLE_VARIANTS),\n  /** Disables the `Chip`. */\n  disabled: PropTypes.bool,\n  /**\n   * An icon component to render before the content.\n   * Example import of a Paragon icon component:\n   *\n   * `import { Check } from '@edx/paragon/icons';`\n   */\n  iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\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 '@edx/paragon/icons';`\n   */\n  iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  /** A click handler for the `Chip` icon after. */\n  onIconAfterClick: PropTypes.func,\n};\n\nChip.defaultProps = {\n  className: undefined,\n  variant: 'light',\n  disabled: false,\n  iconBefore: undefined,\n  iconAfter: undefined,\n  onIconBeforeClick: undefined,\n  onIconAfterClick: undefined,\n};\n\nexport default Chip;\n"],"mappings":"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"}
+{"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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"}