@spothero/ui 20.5.0 → 20.6.1-beta.1

package/dist/components/Checkbox/Checkbox.js

@@ -1,12 +1,40 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _react.Checkbox;
-  }
+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 Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    defaultChecked,
+    isChecked,
+    isDisabled,
+    value,
+    helperText,
+    children,
+    size = 'md',
+    ...props
+  } = _ref;
+  const helperTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
+  return /*#__PURE__*/_react.default.createElement(_react2.Checkbox, (0, _extends2.default)({
+    ref: ref,
+    defaultChecked: defaultChecked,
+    isChecked: isChecked,
+    isDisabled: isDisabled,
+    isFocusable: !isDisabled,
+    value: value,
+    alignItems: "start",
+    size: size
+  }, props), children, helperText && /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    color: "gray.600",
+    fontSize: helperTextSize
+  }, helperText));
 });
-var _react = require("@chakra-ui/react");
+var _default = Checkbox;
+exports.default = _default;

package/dist/components/Checkbox/Checkbox.stories.js

@@ -24,13 +24,44 @@ Checkbox.argTypes = {
     control: {
       type: 'select'
     }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  isDisabled: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  isChecked: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  children: {
+    table: {
+      disable: true
+    }
+  },
+  defaultChecked: {
+    table: {
+      disable: true
+    }
+  },
+  value: {
+    table: {
+      disable: true
+    }
   }
 };
 Checkbox.args = {
-  defaultIsChecked: true,
+  defaultChecked: true,
   isChecked: true,
   isDisabled: false,
   isIndeterminate: false,
   size: 'md',
-  children: 'R U Cool'
+  children: 'R U Cool',
+  helperText: 'Helper text'
 };

package/dist/components/Checkbox/styles/index.js

@@ -15,6 +15,7 @@ const baseStyle = {
     borderRadius: 'sm',
     borderColor: 'gray.600',
     transition: 'all 150ms ease',
+    marginTop: 1.5,
     _readOnly: {
       boxShadow: 'none !important',
       userSelect: 'all'

package/dist/components/Radio/Radio.js

@@ -18,8 +18,10 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     value,
     helperText,
     children,
+    size = 'md',
     ...props
   } = _ref;
+  const helperTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
   return /*#__PURE__*/_react.default.createElement(_react2.Radio, (0, _extends2.default)({
     ref: ref,
     defaultChecked: defaultChecked,
@@ -27,10 +29,10 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     isDisabled: isDisabled,
     isFocusable: !isDisabled,
     value: value,
-    alignItems: "start"
+    size: size
   }, props), children, helperText && /*#__PURE__*/_react.default.createElement(_react2.Box, {
     color: "gray.600",
-    fontSize: "xs"
+    fontSize: helperTextSize
   }, helperText));
 });
 var _default = Radio;

package/dist/components/Radio/Radio.stories.js

@@ -26,6 +26,12 @@ const Individual = props => {
 };
 exports.Individual = Individual;
 Individual.argTypes = {
+  size: {
+    options: ['sm', 'md', 'lg'],
+    control: {
+      type: 'select'
+    }
+  },
   helperText: {
     control: {
       type: 'text'
@@ -60,7 +66,8 @@ Individual.argTypes = {
 Individual.args = {
   helperText: 'Helper text',
   isDisabled: false,
-  isChecked: false
+  isChecked: false,
+  size: 'md'
 };
 const Group = props => {
   return /*#__PURE__*/_react.default.createElement(_RadioGroup.default, (0, _extends2.default)({

package/dist/components/Radio/styles/index.js

@@ -4,11 +4,14 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.baseStyle = void 0;
 var _merge = _interopRequireDefault(require("lodash/merge"));
 var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
 const parts = ['control', 'label'];
 const baseStyle = {
+  container: {
+    alignItems: 'start'
+  },
   control: {
     borderRadius: '50%',
     borderWidth: '1px',
@@ -60,8 +63,52 @@ const baseStyle = {
     }
   }
 };
+exports.baseStyle = baseStyle;
+const sizes = {
+  sm: {
+    control: {
+      minWidth: 4,
+      minHeight: 4,
+      _checked: {
+        _before: {
+          width: 1.5,
+          height: 1.5
+        }
+      }
+    }
+  },
+  md: {
+    control: {
+      minWidth: 5,
+      minHeight: 5,
+      _checked: {
+        _before: {
+          width: 2,
+          height: 2
+        }
+      }
+    }
+  },
+  lg: {
+    control: {
+      minWidth: 6,
+      minHeight: 6,
+      _checked: {
+        _before: {
+          width: 2.5,
+          height: 2.5
+        }
+      }
+    }
+  }
+};
+const defaultProps = {
+  size: sizes.md
+};
 var _default = (0, _merge.default)(_theme.default.components.Radio, {
   parts,
-  baseStyle
+  baseStyle,
+  sizes,
+  defaultProps
 });
 exports.default = _default;

package/dist/components/SelectionCard/SelectionCard.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 _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _Radio = require("../Radio");
+var _Checkbox = _interopRequireDefault(require("../Checkbox"));
+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 SelectionCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isChecked,
+    isDisabled,
+    value,
+    helperText,
+    expandableChildren,
+    defaultChecked,
+    isRadio,
+    label,
+    isExpandable,
+    size = 'md',
+    ...props
+  } = _ref;
+  const Component = isRadio ? _Radio.Radio : _Checkbox.default;
+  const expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
+  const hasExpandableContent = isExpandable && isChecked && expandableChildren;
+  return /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    paddingY: 3,
+    paddingX: hasExpandableContent ? 0 : 4,
+    borderRadius: "lg",
+    borderColor: isChecked ? 'primary.default' : 'gray.medium',
+    borderWidth: "1px",
+    _hover: {
+      borderColor: 'primary.default'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    paddingX: hasExpandableContent ? 4 : 0,
+    paddingBottom: hasExpandableContent ? 3 : 0,
+    borderColor: "gray.medium",
+    borderBottomWidth: hasExpandableContent ? '1px' : 0
+  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    isChecked: isChecked,
+    isDisabled: isDisabled,
+    isFocusable: !isDisabled,
+    value: value,
+    defaultChecked: defaultChecked,
+    helperText: helperText,
+    size: size,
+    width: "100%"
+  }, props), label)), hasExpandableContent && /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    color: "gray.600",
+    fontSize: expandableTextSize,
+    paddingTop: 3,
+    paddingX: 4
+  }, expandableChildren));
+});
+var _default = SelectionCard;
+exports.default = _default;

package/dist/components/SelectionCard/SelectionCard.stories.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SelectionCard = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _SelectionCard = _interopRequireDefault(require("./SelectionCard"));
+var _default = {
+  title: 'v2/SelectionCard',
+  component: _SelectionCard.default,
+  parameters: {
+    importBy: 'SelectionCard',
+    removeBaseHtmlClass: true
+  }
+};
+exports.default = _default;
+const SelectionCard = _ref => {
+  let {
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_SelectionCard.default, (0, _extends2.default)({
+    value: "1"
+  }, props));
+};
+exports.SelectionCard = SelectionCard;
+SelectionCard.argTypes = {
+  size: {
+    options: ['sm', 'md', 'lg'],
+    control: {
+      type: 'select'
+    }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  label: {
+    control: {
+      type: 'text'
+    }
+  },
+  expandableChildren: {
+    control: {
+      type: 'text'
+    }
+  },
+  isDisabled: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  isChecked: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  defaultChecked: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  isRadio: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  isExpandable: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  value: {
+    table: {
+      disable: true
+    }
+  }
+};
+SelectionCard.args = {
+  label: 'The Label',
+  expandableChildren: 'Some default expandable text but this could also be components, not just text',
+  helperText: 'Helper text',
+  isDisabled: false,
+  isChecked: false,
+  defaultChecked: false,
+  isRadio: true,
+  isExpandable: false,
+  size: 'md'
+};

package/dist/components/SelectionCard/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SelectionCard", {
+  enumerable: true,
+  get: function () {
+    return _SelectionCard.default;
+  }
+});
+var _SelectionCard = _interopRequireDefault(require("./SelectionCard"));

package/dist/components/index.js

@@ -29,6 +29,7 @@ var _exportNames = {
   Loader: true,
   Checkbox: true,
   Input: true,
+  SelectionCard: true,
   Divider: true,
   Popover: true,
   PopoverAnchor: true,
@@ -368,6 +369,12 @@ Object.defineProperty(exports, "Select", {
     return _Select.default;
   }
 });
+Object.defineProperty(exports, "SelectionCard", {
+  enumerable: true,
+  get: function () {
+    return _SelectionCard.default;
+  }
+});
 Object.defineProperty(exports, "SimpleGrid", {
   enumerable: true,
   get: function () {
@@ -614,6 +621,7 @@ var _Image = _interopRequireDefault(require("./Image/Image"));
 var _Loader = _interopRequireDefault(require("./Loader/Loader"));
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 var _Input = _interopRequireDefault(require("./Input"));
+var _SelectionCard = _interopRequireDefault(require("./SelectionCard"));
 var _Divider = _interopRequireDefault(require("./Divider/Divider"));
 var _Popover = require("./Popover");
 var _Radio = require("./Radio");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "20.5.0",
+  "version": "20.6.1-beta.1",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -96,9 +96,9 @@
     "css-loader": "5.1.3",
     "sass-loader": "10.2.1",
     "@spothero/babel-preset-spothero": "5.0.0",
-    "@spothero/browserslist-config": "4.0.0",
-    "@spothero/core": "7.0.0",
     "@spothero/eslint-config": "6.0.0",
+    "@spothero/core": "7.0.0",
+    "@spothero/browserslist-config": "4.0.0",
     "@spothero/icons": "7.1.0",
     "@spothero/npm-publisher": "7.0.0",
     "@spothero/prettier-config": "4.0.0",