@spothero/ui 15.1.3-beta.0 → 15.2.0-beta.0

package/CHANGELOG.md

@@ -2,10 +2,28 @@
 
 ## Miscellaneous Updates
 * [[bff3c9d](https://github.com/spothero/fe-ui/commit/bff3c9d)] - `fix:` Fix imports in v1 modal ([#302](https://github.com/spothero/fe-ui/pull/302)) (Mick Johnson)
+	* `fix:` Fix imports in v1 modal
+	* `publish:` Changelog update for 14.8.5-beta.0 release
+	* 14.8.5-beta.0
+	* `squash:` Remove beta release stuffCo-authored-by: sh-devtools-bot <sh-dev-tools-bot@spothero.com>
 
 # 14.8.4 - 06/21/2022
 ## Miscellaneous Updates
 * [[2809609](https://github.com/spothero/fe-ui/commit/2809609)] - `feature:` Add Modal to V2 ([#299](https://github.com/spothero/fe-ui/pull/299)) (Mick Johnson)
+	* `squash:` Add new Modal component
+	* `squash:` More specific styling and scroll behavior
+	* `squash:` Mobile styling
+	* `squash:` Add Accordion Story
+	* `squash:` Cleanup stories and add focus state to close button
+	* `squash:` Story name cleanup
+	* `squash:` Design review feedback
+	* `squash:` Add jsdoc comments
+	* `squash:` Move v1 Modal to right place and export the subcomponents
+	* `squash:` Fix stylesheet import
+	* `squash:` Add hideCloseButton Prop, Render Box with header styles if header not passed in, Adjust visuals based on presence of header and close button
+	* `squash:` Proptypes type
+	* `squash:` Fixing the old modal export
+	* `squash:` Make onClose not required, tweak header styling
 
 # 14.8.3 - 06/21/2022
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.1.3-beta.0",
+  "version": "15.2.0-beta.0",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",
@@ -61,8 +61,10 @@
     "test:unit": "npm run test:template -- --coverage",
     "test:unit:watch": "DEBUG_PRINT_LIMIT=-1 npm run test:template -- --watch",
     "clone:styles": "rsync -a src/ styles && rm -rf styles/**/*.{js,jsx} styles/**/stories",
-    "build:v1": "TARGET_ENTRY=v1 NODE_ENV=production dex",
-    "build:v2": "TARGET_ENTRY=v2 NODE_ENV=production dex",
+    "buildx:v1": "TARGET_ENTRY=v1 NODE_ENV=production dex",
+    "buildx:v2": "TARGET_ENTRY=v2 NODE_ENV=production dex",
+    "build:v1": "NODE_ENV=production babel src/v1 -d v1 --ignore \"**/*.spec.js\",\"**/stories/**\"",
+    "build:v2": "NODE_ENV=production babel src/v2 -d v2 --ignore \"**/*.spec.js\",\"**/stories/**\"",
     "build:backlog": "NODE_ENV=production babel src -d backlog --ignore \"**/*.spec.js\",\"**/stories/**\",\"**/v2/**\"",
     "build": "npm run clean && npm run clone:styles && npm run build:backlog && npm run build:v1 && npm run build:v2",
     "build:storybook": "build-storybook -o ./docs",

package/styles/v2/components/Modal/styles/dialogContainer.js

@@ -3,8 +3,5 @@ export default {
     zIndex: 'layer8',
     justifyContent: 'center',
     alignItems: {base: 'flex-end', tablet: 'center'},
-    height: '100%',
-    minHeight: '-moz-available',
-    minHeight: '-webkit-fill-available',
-    minHeight: 'fill-available',
+    overflow: 'hidden',
 };

package/styles/v2/components/Radio/Radio.jsx

@@ -23,8 +23,8 @@ const Radio = forwardRef(
                 isDisabled={isDisabled}
                 isFocusable={!isDisabled}
                 value={value}
-                alignItems="start"
                 {...props}
+                alignItems="start"
             >
                 {children}
                 {helperText && (

package/styles/v2/components/Radio/RadioGroup.jsx

@@ -29,7 +29,7 @@ const RadioGroup = forwardRef(
                 errorMessage={errorMessage}
                 label={label}
                 inputId={props.id}
-                isFieldset
+                isRadio
             >
                 <ChakraRadioGroup
                     ref={ref}

package/v1/components/Button/Button.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _buttonProps = _interopRequireDefault(require("./button-props"));
+
+var _deprecate = _interopRequireDefault(require("../../utils/deprecate"));
+
+var _excluded = ["className", "color", "iconPosition", "block", "loading", "asAnchor", "type"];
+(0, _deprecate.default)({
+  name: 'Button',
+  changes: ['iconPosition has been removed, iconLeft and iconRight have replaced it.', 'color is now variant and takes in new values.', 'block was removed, if full width is needed, use isFullWidth', 'loading was replaced by isLoading']
+});
+
+var Button = function Button(_ref) {
+  var className = _ref.className,
+      color = _ref.color,
+      iconPosition = _ref.iconPosition,
+      block = _ref.block,
+      loading = _ref.loading,
+      asAnchor = _ref.asAnchor,
+      type = _ref.type,
+      attrs = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)('Button', (0, _defineProperty2.default)({}, "Button-".concat(color), color), {
+    'Button-block': block
+  }, {
+    'Button-loading': loading
+  }, (0, _defineProperty2.default)({}, "Button-with-icon-".concat(iconPosition), iconPosition), className);
+
+  var _ref2 = asAnchor ? {
+    Element: 'a'
+  } : {
+    Element: 'button',
+    finalType: type
+  },
+      finalType = _ref2.finalType,
+      Element = _ref2.Element;
+
+  return /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({
+    className: classes,
+    type: finalType
+  }, attrs));
+};
+
+Button.defaultProps = {
+  type: 'button'
+};
+var _default = Button;
+exports.default = _default;

package/v1/components/Button/button-props.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var props = {
+  /** Additional class(es) to add to the component. */
+  className: _propTypes.default.string,
+
+  /** The markup node to insert into the button. */
+  children: _propTypes.default.node,
+
+  /** The type of button that is rendered. */
+  type: _propTypes.default.oneOf(['button', 'submit', 'reset']),
+
+  /** The color of the button. */
+  color: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary']),
+
+  /** If an icon is provided, whether to add the margin to the icon on the left or right side. */
+  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+
+  /** Whether the button should display as a block level element. */
+  block: _propTypes.default.bool,
+
+  /** Whether the button is disabled or not. */
+  disabled: _propTypes.default.bool,
+
+  /** Whether to show a loading animation inside of the button. */
+  loading: _propTypes.default.bool,
+
+  /**
+   * The handler to execute when the button is clicked.
+   *
+   * @param {SyntheticEvent} evt - The React `SyntheticEvent`.
+   */
+  onClick: _propTypes.default.func,
+
+  /** Determines if the underlying HTML element should be an <a> or <button>. */
+  asAnchor: _propTypes.default.bool
+};
+var _default = props;
+exports.default = _default;

package/v1/components/Image/Image.js

@@ -0,0 +1,193 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _Reflect$construct = require("@babel/runtime-corejs3/core-js-stable/reflect/construct");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _template = _interopRequireDefault(require("lodash/template"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactLazyLoad = _interopRequireDefault(require("react-lazy-load"));
+
+var _environment = _interopRequireDefault(require("@spothero/utils/environment"));
+
+var _PulseLoader = _interopRequireDefault(require("../../../PulseLoader/PulseLoader"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+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; } }
+
+var Image = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Image, _Component);
+
+  var _super = _createSuper(Image);
+
+  function Image(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Image);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_onLoaded", function (evt) {
+      var onLoad = _this.props.onLoad;
+
+      _this.setState({
+        isLoaded: true
+      });
+
+      if (onLoad) {
+        onLoad(evt);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isCloudinaryImageAndInvalid", function () {
+      var _this$props = _this.props,
+          cloudinaryImageId = _this$props.cloudinaryImageId,
+          cloudinaryTemplate = _this$props.cloudinaryTemplate,
+          width = _this$props.width,
+          height = _this$props.height;
+      return (cloudinaryImageId || cloudinaryTemplate) && (!width || !height);
+    });
+    var _cloudinaryImageId = props.cloudinaryImageId,
+        _cloudinaryTemplate = props.cloudinaryTemplate;
+    _this._imageProps = (0, _omit.default)(props, ['className', 'showLoader', 'lazyLoad', 'lazyLoadOffsetVertical', 'cloudinaryCloudName', 'cloudinaryImageId', 'cloudinaryTemplate', 'quality', 'onLoad']);
+    _this.state = {
+      isLoaded: false,
+      hasCloudinarySrc: !(_cloudinaryImageId || _cloudinaryTemplate)
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(Image, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props2 = this.props,
+          cloudinaryCloudName = _this$props2.cloudinaryCloudName,
+          cloudinaryTemplate = _this$props2.cloudinaryTemplate,
+          cloudinaryImageId = _this$props2.cloudinaryImageId,
+          width = _this$props2.width,
+          height = _this$props2.height,
+          quality = _this$props2.quality;
+
+      if (cloudinaryImageId || cloudinaryTemplate) {
+        var _context, _context2;
+
+        // cloudinary image provided, create the source path
+        if (this.isCloudinaryImageAndInvalid()) {
+          return;
+        }
+
+        var tmpl = cloudinaryTemplate ? cloudinaryTemplate : (0, _concat.default)(_context = (0, _concat.default)(_context2 = "https://res.cloudinary.com/".concat(cloudinaryCloudName, "/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,fl_progressive,dpr_")).call(_context2, _environment.default.isHighDensityDisplay() ? 2 : 1, ",h_$h,q_$q,w_$w/")).call(_context, cloudinaryImageId);
+        this._imageProps.src = (0, _template.default)(tmpl, {
+          interpolate: /{{([\s\S]+?)}}/g // matches template vars in the format '{{ var }}' or '{{var}}'
+
+        })({
+          WIDTH: width,
+          HEIGHT: height,
+          QUALITY: quality
+        }); // eslint-disable-next-line react/no-did-mount-set-state
+
+        this.setState({
+          hasCloudinarySrc: true
+        });
+      }
+    }
+  }, {
+    key: "_renderImage",
+    value: function _renderImage() {
+      var _this$props3 = this.props,
+          className = _this$props3.className,
+          width = _this$props3.width,
+          height = _this$props3.height,
+          showLoader = _this$props3.showLoader;
+      var isLoaded = this.state.isLoaded;
+      var classes = (0, _classnames.default)(className, 'Image-container');
+      var imgClasses = (0, _classnames.default)('Image', {
+        'Image-loaded': isLoaded
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes,
+        style: {
+          maxWidth: width,
+          maxHeight: height
+        }
+      }, showLoader && !isLoaded && /*#__PURE__*/_react.default.createElement(_PulseLoader.default, {
+        size: 32,
+        borderWidth: 2
+      }), /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, this._imageProps, {
+        className: imgClasses,
+        onLoad: this._onLoaded
+      })));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props4 = this.props,
+          lazyLoad = _this$props4.lazyLoad,
+          lazyLoadOffsetVertical = _this$props4.lazyLoadOffsetVertical;
+      var hasCloudinarySrc = this.state.hasCloudinarySrc; // the source is set after component is mounted in the case of Cloudinary images otherwise there are mis-matching
+      // DPR attributes in the url since node will always set the DPR to 1 and high density displays will have it set to 2+.
+
+      if (!hasCloudinarySrc) {
+        return null;
+      }
+
+      if (this.isCloudinaryImageAndInvalid()) {
+        return null;
+      }
+
+      if (lazyLoad) {
+        return /*#__PURE__*/_react.default.createElement(_reactLazyLoad.default, {
+          offsetVertical: lazyLoadOffsetVertical
+        }, this._renderImage());
+      }
+
+      return this._renderImage();
+    }
+  }]);
+  return Image;
+}(_react.Component);
+
+exports.default = Image;
+(0, _defineProperty2.default)(Image, "defaultProps", {
+  showLoader: true,
+  lazyLoadOffsetVertical: 100,
+  quality: 50,
+  cloudinaryCloudName: 'spothero'
+});

package/v1/components/Loader/Loader.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _deprecate = _interopRequireDefault(require("../../utils/deprecate"));
+
+var _excluded = ["className", "size", "borderWidth", "additionalMarkup"];
+(0, _deprecate.default)({
+  name: 'Loader',
+  newName: 'Loader',
+  changes: ['---- Changes in v2 component  ----', '`borderWidth` is now `thickness`', '`additionalMarkup` is no longer supported within this component', '`className` is no longer explicitly supported, but a custom class could still be passed in if needed, but with the move to ChakraUI custom classes are generally not needed', '---- Additional Information ----', 'new props are documented at: https://chakra-ui.com/docs/feedback/circular-progress']
+});
+
+var Loader = function Loader(_ref) {
+  var className = _ref.className,
+      size = _ref.size,
+      borderWidth = _ref.borderWidth,
+      additionalMarkup = _ref.additionalMarkup,
+      attrs = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)('Loader', className);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: classes
+  }, attrs), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Loader-spinner",
+    style: {
+      width: size,
+      height: size,
+      borderWidth: borderWidth
+    }
+  }), additionalMarkup);
+};
+
+Loader.defaultProps = {
+  size: 80,
+  borderWidth: 4
+};
+var _default = Loader;
+exports.default = _default;