@spothero/ui 21.0.0-beta.1 → 21.1.0

package/dist/components/Progress/Progress.js

@@ -0,0 +1,39 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@chakra-ui/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const Progress = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isRounded,
+    ...props
+  } = _ref;
+  // Passing `isRounded` in as a prop throws a 'React does not recognize the X prop on a DOM element' error. Passing `isRounded` through `sx` instead, allows for the prop to be utilized by the theme without being set on the DOM element, avoiding the error.
+  return /*#__PURE__*/_react.default.createElement(_react2.Progress, (0, _extends2.default)({
+    ref: ref,
+    sx: {
+      isRounded
+    }
+  }, props));
+});
+Progress.defaultProps = {
+  colorScheme: 'primary',
+  hasStripe: false,
+  isAnimated: false,
+  isIndeterminate: false,
+  isRounded: false,
+  max: 100,
+  min: 0,
+  size: 'md',
+  value: 0,
+  variant: 'solid'
+};
+var _default = Progress;
+exports.default = _default;

package/dist/components/Progress/Progress.stories.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Progress = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
+var _createControl = require("storybook/utils/create-control");
+var _Progress = _interopRequireDefault(require("./Progress"));
+var _default = {
+  title: 'v2/Progress',
+  component: _Progress.default,
+  parameters: {
+    removeBaseHtmlClass: true,
+    importBy: 'Progress'
+  },
+  argTypes: {
+    colorScheme: {
+      options: ['primary', 'secondary', 'green', 'yellow', 'red', 'gray'],
+      control: {
+        type: 'radio',
+        labels: {
+          primary: 'Primary',
+          secondary: 'Secondary',
+          green: 'Green',
+          yellow: 'Yellow',
+          red: 'Red',
+          gray: 'Gray'
+        }
+      }
+    },
+    ...(0, _disableArgs.default)('min'),
+    ...(0, _disableArgs.default)('max'),
+    size: {
+      options: ['xl', 'lg', 'md', 'sm', 'xs'],
+      control: {
+        type: 'radio',
+        labels: {
+          xl: 'xl',
+          lg: 'lg',
+          md: 'md',
+          sm: 'sm',
+          xs: 'xs'
+        }
+      }
+    },
+    ...(0, _createControl.createRangeControl)({
+      name: 'value',
+      min: 0,
+      max: 100
+    }),
+    variant: {
+      options: ['solid', 'outlined'],
+      control: {
+        type: 'radio',
+        labels: {
+          solid: 'Solid',
+          outlined: 'Outlined'
+        }
+      }
+    }
+  }
+};
+exports.default = _default;
+const ProgressTemplate = args => {
+  return /*#__PURE__*/_react.default.createElement(_Progress.default, args);
+};
+const Progress = ProgressTemplate.bind({});
+exports.Progress = Progress;
+Progress.args = {
+  colorScheme: 'primary',
+  hasStripe: false,
+  isAnimated: false,
+  isIndeterminate: false,
+  isRounded: false,
+  size: 'md',
+  value: 80,
+  variant: 'solid'
+};

package/dist/components/Progress/Progress.styles.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+var _themeTools = require("@chakra-ui/theme-tools");
+const filledStyle = props => {
+  const {
+    colorScheme,
+    hasStripe,
+    isIndeterminate,
+    theme
+  } = props;
+  const bgColor = colorScheme === 'gray' ? `${colorScheme}.dark` : `${colorScheme}.default`;
+  const gradient = `linear-gradient(
+      to right,
+      transparent 0%,
+      ${(0, _themeTools.getColor)(theme, bgColor)} 50%,
+      transparent 100%
+    )`;
+  const addStripe = !isIndeterminate && hasStripe;
+  return {
+    ...(addStripe && (0, _themeTools.generateStripe)()),
+    ...(isIndeterminate ? {
+      bgImage: gradient
+    } : {
+      bgColor
+    })
+  };
+};
+const variantOutlined = props => {
+  const {
+    theme: {
+      colors
+    }
+  } = props;
+  return {
+    track: {
+      bg: 'transparent',
+      borderWidth: '1px',
+      borderColor: colors.gray['200']
+    }
+  };
+};
+const variantSolid = props => {
+  const {
+    theme: {
+      colors
+    }
+  } = props;
+  return {
+    track: {
+      bg: colors.gray['100']
+    }
+  };
+};
+const variants = {
+  outlined: variantOutlined,
+  solid: variantSolid
+};
+const sizes = {
+  xl: {
+    track: {
+      height: 10
+    }
+  },
+  lg: {
+    track: {
+      height: 6
+    }
+  },
+  md: {
+    track: {
+      height: 4
+    }
+  },
+  sm: {
+    track: {
+      height: 2
+    }
+  },
+  xs: {
+    track: {
+      height: 1
+    }
+  }
+};
+const defaultProps = {
+  size: 'lg',
+  colorScheme: 'primary',
+  variant: 'solid'
+};
+const overrides = {
+  defaultProps,
+  variants,
+  sizes,
+  baseStyle: props => {
+    const {
+      sx: {
+        isRounded
+      }
+    } = props;
+    return (0, _merge.default)(_theme.default.components.Progress.baseStyle(props), {
+      filledTrack: {
+        borderRightRadius: isRounded ? 'none' : 'base',
+        ...filledStyle(props)
+      },
+      track: {
+        borderRightRadius: isRounded ? 'full' : 'base',
+        borderLeftRadius: isRounded ? 'full' : 'base'
+      }
+    });
+  }
+};
+var _default = {
+  ..._theme.default.components.Progress,
+  ...overrides
+};
+exports.default = _default;

package/dist/components/index.js

@@ -27,6 +27,7 @@ var _exportNames = {
   Icon: true,
   Image: true,
   Loader: true,
+  Progress: true,
   Checkbox: true,
   Input: true,
   SelectionCard: true,
@@ -53,7 +54,6 @@ var _exportNames = {
   VStack: true,
   LinkBox: true,
   Collapse: true,
-  Progress: true,
   useToken: true,
   useTheme: true,
   useToast: true,
@@ -342,7 +342,7 @@ Object.defineProperty(exports, "Portal", {
 Object.defineProperty(exports, "Progress", {
   enumerable: true,
   get: function () {
-    return _react.Progress;
+    return _Progress.default;
   }
 });
 Object.defineProperty(exports, "Radio", {
@@ -619,6 +619,7 @@ var _Card = _interopRequireDefault(require("./Card/Card"));
 var _Icon = _interopRequireDefault(require("./Icon/Icon"));
 var _Image = _interopRequireDefault(require("./Image/Image"));
 var _Loader = _interopRequireDefault(require("./Loader/Loader"));
+var _Progress = _interopRequireDefault(require("./Progress/Progress"));
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 var _Input = _interopRequireDefault(require("./Input"));
 var _SelectionCard = require("./SelectionCard");

package/dist/components/styles.js

@@ -82,6 +82,12 @@ Object.defineProperty(exports, "Popover", {
     return _styles7.default;
   }
 });
+Object.defineProperty(exports, "Progress", {
+  enumerable: true,
+  get: function () {
+    return _Progress.default;
+  }
+});
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () {
@@ -150,4 +156,5 @@ var _styles9 = _interopRequireDefault(require("./Modal/styles"));
 var _styles10 = _interopRequireDefault(require("./Radio/styles"));
 var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
 var _styles11 = _interopRequireDefault(require("./Badge/styles"));
-var _styles12 = _interopRequireDefault(require("./Drawer/styles"));
+var _styles12 = _interopRequireDefault(require("./Drawer/styles"));
+var _Progress = _interopRequireDefault(require("./Progress/Progress.styles"));

package/dist/theme/base/colors.js

@@ -81,20 +81,14 @@ const red = {
   900: '#901530'
 };
 const colors = {
-  primary: {
-    ...blue,
-    default: blue['500']
-  },
-  secondary: {
-    ...navy,
-    default: navy['900']
-  },
   gray: {
     ...gray,
     light: gray['50'],
     medium: gray['200'],
     dark: gray['600']
   },
+  blue,
+  navy,
   red: {
     ...red,
     default: red['700']
@@ -107,6 +101,14 @@ const colors = {
     ...yellow,
     default: yellow['400']
   },
+  primary: {
+    ...blue,
+    default: blue['500']
+  },
+  secondary: {
+    ...navy,
+    default: navy['900']
+  },
   success: green['700'],
   warning: yellow['400'],
   error: red['700'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "21.0.0-beta.1",
+  "version": "21.1.0",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -97,9 +97,9 @@
     "sass-loader": "10.2.1",
     "@spothero/babel-preset-spothero": "5.0.0",
     "@spothero/core": "7.0.0",
-    "@spothero/eslint-config": "6.0.0",
-    "@spothero/icons": "8.0.0-beta.1",
     "@spothero/browserslist-config": "4.0.0",
+    "@spothero/eslint-config": "6.0.0",
+    "@spothero/icons": "8.0.0",
     "@spothero/npm-publisher": "7.0.0",
     "@spothero/stylelint-config": "6.0.0",
     "@spothero/prettier-config": "4.0.0"
@@ -118,7 +118,7 @@
     "regenerator-runtime": "0.13.7",
     "ssr-window": "1.0.1",
     "transitionEnd": "1.0.2",
-    "@spothero/utils": "14.0.0-beta.1"
+    "@spothero/utils": "14.0.0"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",
@@ -134,7 +134,7 @@
     "lint": "eslint .storybook src --ext .jsx,.js",
     "start": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
     "test": "pnpm run test:unit",
-    "test:template": "NODE_ENV=test jest --config ./jest.config.json",
+    "test:template": "NODE_ENV=test jest --config ./jest.config.json --bail --silent",
     "test:unit": "pnpm run test:template",
     "test:unit:watch": "DEBUG_PRINT_LIMIT=-1 pnpm run test:template -- --watch",
     "build:v2": "BABEL_ENV=production babel src -d dist",