@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/dist/Dropzone/index.scss

@@ -1,10 +1,12 @@
+@import "variables";
+
 .pgn__dropzone {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 200px;
-  padding: var(--pgn-spacing-dropzone-padding);
-  border: var(--pgn-spacing-dropzone-border-base) dashed var(--pgn-color-dropzone-border-base);
+  padding: $dropzone-padding;
+  border: $dropzone-border-default;
   box-sizing: border-box;
   cursor: pointer;
 
@@ -16,30 +18,30 @@
   }
 
   &:hover {
-    box-shadow: var(--pgn-elevation-dropzone-hover);
+    box-shadow: $dropzone-box-shadow-hover;
   }
 
   &:focus {
-    box-shadow: var(--pgn-elevation-dropzone-focus);
+    box-shadow: $dropzone-box-shadow-focus;
   }
 
   &.pgn__dropzone-validation-error {
-    box-shadow: var(--pgn-elevation-dropzone-error);
+    box-shadow: $dropzone-box-shadow-error;
   }
 
   &.pgn__dropzone-active {
-    box-shadow: var(--pgn-elevation-dropzone-active);
+    box-shadow: $dropzone-box-shadow-active;
   }
 }
 
 .pgn__dropzone-error-wrapper {
   text-align: center;
-  color: var(--pgn-color-dropzone-error-wrapper);
+  color: $dropzone-error-wrapper-color;
 }
 
 .pgn__dropzone-generic-alert {
   width: 100%;
-  margin-bottom: var(--pgn-spacing-spacer-4);
+  margin-bottom: map_get($spacers, 4);
 
   .pgn__alert-message-wrapper .alert-message-content {
     > span {
@@ -51,10 +53,10 @@
 .pgn__dropzone__upload-icon-wrapper {
   height: 56px;
   width: 56px;
-  background: var(--pgn-color-light-300);
+  background: $light-300;
   border-radius: 50%;
   position: relative;
-  margin-bottom: var(--pgn-spacing-spacer-4);
+  margin-bottom: map-get($spacers, 4);
 }
 
 .pgn__dropzone__upload-icon {
@@ -67,6 +69,6 @@
 }
 
 .pgn__dropzone__upload-restriction-message {
-  font-size: var(--pgn-typography-dropzone-restriction-msg-font-size);
-  color: var(--pgn-color-dropzone-restriction-msg);
+  font-size: $dropzone-restriction-msg-font-size;
+  color: $dropzone-restriction-msg-color;
 }

package/dist/Fieldset/index.js

@@ -0,0 +1,117 @@
+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); }
+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 classNames from 'classnames';
+import newId from '../utils/newId';
+import ValidationMessage from '../ValidationMessage/index';
+import Variant from '../utils/constants';
+var inputProps = {
+  legend: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  isValid: PropTypes.bool,
+  invalidMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  variant: PropTypes.shape({
+    status: PropTypes.oneOf(Object.keys(Variant.status).map(function (k) {
+      return Variant.status[k];
+    }))
+  }),
+  variantIconDescription: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+};
+var defaultProps = {
+  children: null,
+  className: undefined,
+  id: '',
+  isValid: true,
+  invalidMessage: '',
+  variant: {
+    status: Variant.status.INFO
+  },
+  variantIconDescription: ''
+};
+var Fieldset = /*#__PURE__*/function (_React$Component) {
+  _inherits(Fieldset, _React$Component);
+  var _super = _createSuper(Fieldset);
+  function Fieldset(props) {
+    var _this;
+    _classCallCheck(this, Fieldset);
+    _this = _super.call(this, props);
+    _this.state = {
+      id: props.id || newId('fieldset')
+    };
+    return _this;
+  }
+  _createClass(Fieldset, [{
+    key: "getVariantClassName",
+    value: function getVariantClassName() {
+      var variant = this.props.variant;
+      var className;
+      switch (variant.status) {
+        case Variant.status.INFO:
+          className = 'is-invalid-nodanger';
+          break;
+        default:
+          break;
+      }
+      return className;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        children = _this$props.children,
+        variantIconDescription = _this$props.variantIconDescription,
+        invalidMessage = _this$props.invalidMessage,
+        isValid = _this$props.isValid,
+        legend = _this$props.legend,
+        variant = _this$props.variant;
+      var errorId = "error-".concat(this.state.id);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "paragon-fieldset"
+      }, /*#__PURE__*/React.createElement("fieldset", {
+        className: classNames('form-control', 'p-3', {
+          'is-invalid': !isValid
+        }, this.getVariantClassName(), className),
+        "aria-describedby": errorId,
+        "data-testid": "fieldset"
+      }, /*#__PURE__*/React.createElement("legend", {
+        className: "p-1"
+      }, legend), children), /*#__PURE__*/React.createElement(ValidationMessage, {
+        id: errorId,
+        isValid: isValid,
+        invalidMessage: invalidMessage,
+        variant: variant,
+        variantIconDescription: variantIconDescription
+      }));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      if (nextProps.id !== prevState.id) {
+        return {
+          id: nextProps.id || newId('fieldset')
+        };
+      }
+      return null;
+    }
+  }]);
+  return Fieldset;
+}(React.Component);
+Fieldset.propTypes = inputProps;
+Fieldset.defaultProps = defaultProps;
+export default Fieldset;
+//# sourceMappingURL=index.js.map

package/dist/Fieldset/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","ValidationMessage","Variant","inputProps","legend","oneOfType","string","element","isRequired","children","node","className","id","isValid","bool","invalidMessage","variant","shape","status","oneOf","Object","keys","map","k","variantIconDescription","defaultProps","undefined","INFO","Fieldset","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","state","_createClass","key","value","getVariantClassName","render","_this$props","errorId","concat","createElement","getDerivedStateFromProps","nextProps","prevState","Component","propTypes"],"sources":["../../src/Fieldset/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\n\nimport ValidationMessage from '../ValidationMessage/index';\nimport Variant from '../utils/constants';\n\nconst inputProps = {\n  legend: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n\n  children: PropTypes.node,\n  className: PropTypes.string,\n  id: PropTypes.string,\n  isValid: PropTypes.bool,\n  invalidMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  variant: PropTypes.shape({\n    status: PropTypes.oneOf(Object.keys(Variant.status).map(k => Variant.status[k])),\n  }),\n  variantIconDescription: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nconst defaultProps = {\n  children: null,\n  className: undefined,\n  id: '',\n  isValid: true,\n  invalidMessage: '',\n  variant: {\n    status: Variant.status.INFO,\n  },\n  variantIconDescription: '',\n};\n\nclass Fieldset extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { id: props.id || newId('fieldset') };\n  }\n\n  static getDerivedStateFromProps(nextProps, prevState) {\n    if (nextProps.id !== prevState.id) {\n      return { id: nextProps.id || newId('fieldset') };\n    }\n\n    return null;\n  }\n\n  getVariantClassName() {\n    const { variant } = this.props;\n    let className;\n\n    switch (variant.status) {\n      case Variant.status.INFO:\n        className = 'is-invalid-nodanger';\n        break;\n      default:\n        break;\n    }\n\n    return className;\n  }\n\n  render() {\n    const {\n      className,\n      children,\n      variantIconDescription,\n      invalidMessage,\n      isValid,\n      legend,\n      variant,\n    } = this.props;\n    const errorId = `error-${this.state.id}`;\n    return (\n      <div className=\"paragon-fieldset\">\n        <fieldset\n          className={classNames(\n            'form-control',\n            'p-3',\n            { 'is-invalid': !isValid },\n            this.getVariantClassName(),\n            className,\n          )}\n          aria-describedby={errorId}\n          data-testid=\"fieldset\"\n        >\n          <legend className=\"p-1\">{legend}</legend>\n          {children}\n        </fieldset>\n        <ValidationMessage\n          id={errorId}\n          isValid={isValid}\n          invalidMessage={invalidMessage}\n          variant={variant}\n          variantIconDescription={variantIconDescription}\n        />\n      </div>\n    );\n  }\n}\n\nFieldset.propTypes = inputProps;\nFieldset.defaultProps = defaultProps;\n\nexport default Fieldset;\n"],"mappings":"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"}

package/dist/Fieldset/index.scss

@@ -0,0 +1,12 @@
+.paragon-fieldset {
+  margin-bottom: $spacer * 1.5;
+
+  .form-control {
+    height: auto;
+  }
+
+  fieldset legend {
+    width: auto;
+    margin-bottom: 0;
+  }
+}