@spothero/ui 17.0.3-beta.0 → 17.1.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (163) hide show
  1. package/dist/components/Accordion/Accordion.js +2 -1
  2. package/dist/components/Accordion/Accordion.stories.js +22 -13
  3. package/dist/components/Accordion/index.js +8 -5
  4. package/dist/components/Accordion/styles/button.js +3 -1
  5. package/dist/components/Accordion/styles/container.js +1 -1
  6. package/dist/components/Accordion/styles/index.js +13 -4
  7. package/dist/components/Accordion/styles/panel.js +1 -1
  8. package/dist/components/Alert/Alert.js +44 -23
  9. package/dist/components/Alert/Alert.stories.js +12 -8
  10. package/dist/components/Alert/index.js +3 -1
  11. package/dist/components/Alert/styles/index.js +35 -12
  12. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +119 -84
  13. package/dist/components/AutoSuggestSelect/AutoSuggestSelect.stories.js +12 -4
  14. package/dist/components/AutoSuggestSelect/index.js +3 -1
  15. package/dist/components/Badge/Badge.js +2 -1
  16. package/dist/components/Badge/Badge.stories.js +20 -12
  17. package/dist/components/Badge/styles/index.js +12 -6
  18. package/dist/components/Button/Button.js +47 -17
  19. package/dist/components/Button/Button.spec.js +10 -4
  20. package/dist/components/Button/Button.styles.js +49 -36
  21. package/dist/components/Button/button-props.js +20 -2
  22. package/dist/components/Button/index.js +5 -2
  23. package/dist/components/Button/stories/button.js +17 -5
  24. package/dist/components/Button/stories/index.stories.js +48 -24
  25. package/dist/components/Button/stories/overview.js +62 -34
  26. package/dist/components/Card/Card.js +26 -11
  27. package/dist/components/Card/Card.stories.js +15 -5
  28. package/dist/components/Checkbox/Checkbox.js +2 -1
  29. package/dist/components/Checkbox/Checkbox.stories.js +10 -2
  30. package/dist/components/Checkbox/index.js +3 -1
  31. package/dist/components/Checkbox/styles/index.js +11 -3
  32. package/dist/components/Container/Container.js +21 -5
  33. package/dist/components/Container/Container.stories.js +43 -14
  34. package/dist/components/Container/Container.styles.js +1 -1
  35. package/dist/components/Datepicker/Datepicker.stories.js +295 -0
  36. package/dist/components/Datepicker/DatepickerContainer.js +114 -0
  37. package/dist/components/Datepicker/DatepickerContext.js +65 -0
  38. package/dist/components/Datepicker/DatepickerSingle.js +51 -0
  39. package/dist/components/Datepicker/components/DateRow.js +145 -0
  40. package/dist/components/Datepicker/components/DatepickerControl.js +83 -0
  41. package/dist/components/Datepicker/components/DatepickerDays.js +108 -0
  42. package/dist/components/Datepicker/components/DatepickerHeader.js +113 -0
  43. package/dist/components/Datepicker/constants.js +31 -0
  44. package/dist/components/Datepicker/utils/dateRowArithmentic.js +58 -0
  45. package/dist/components/Datepicker/utils/generalCalculations.js +71 -0
  46. package/dist/components/Datepicker/utils/getWeeksOfMonth.js +51 -0
  47. package/dist/components/Datepicker/utils/propTypes.js +201 -0
  48. package/dist/components/DatepickerRange/DatepickerRange.js +64 -0
  49. package/dist/components/DatepickerRange/DatepickerRange.stories.js +411 -0
  50. package/dist/components/DatepickerRange/DatepickerRangeContainer.js +158 -0
  51. package/dist/components/DatepickerRange/DatepickerRangeContext.js +80 -0
  52. package/dist/components/DatepickerRange/components/DateRow.js +260 -0
  53. package/dist/components/DatepickerRange/components/DatepickerDays.js +108 -0
  54. package/dist/components/DatepickerRange/components/DatepickerHeader.js +116 -0
  55. package/dist/components/DatepickerRange/components/DatepickerRangeControls.js +77 -0
  56. package/dist/components/DatepickerRange/components/DatepickerRangeInput.js +90 -0
  57. package/dist/components/DatepickerRange/components/WithPopoverAnchor.js +21 -0
  58. package/dist/components/DatepickerRange/constants.js +31 -0
  59. package/dist/components/DatepickerRange/utils/dateRowArithmentic.js +93 -0
  60. package/dist/components/DatepickerRange/utils/generalCalculations.js +71 -0
  61. package/dist/components/DatepickerRange/utils/getWeeksOfMonth.js +51 -0
  62. package/dist/components/DatepickerRange/utils/propTypes.js +245 -0
  63. package/dist/components/Divider/Divider.js +24 -8
  64. package/dist/components/Divider/Divider.stories.js +15 -3
  65. package/dist/components/Divider/Divider.styles.js +8 -2
  66. package/dist/components/FormControl/FormControl.js +29 -14
  67. package/dist/components/Grid/Grid.js +24 -7
  68. package/dist/components/Grid/Grid.stories.js +60 -36
  69. package/dist/components/Grid/Grid.styles.js +2 -2
  70. package/dist/components/Grid/GridItem.js +21 -5
  71. package/dist/components/Grid/GridItem.styles.js +1 -2
  72. package/dist/components/Grid/index.js +5 -2
  73. package/dist/components/Heading/Heading.js +29 -8
  74. package/dist/components/Heading/Heading.stories.js +15 -4
  75. package/dist/components/Heading/Heading.styles.js +38 -24
  76. package/dist/components/Icon/Icon.js +2 -1
  77. package/dist/components/Icon/Icon.stories.js +28 -19
  78. package/dist/components/Image/Image.js +69 -39
  79. package/dist/components/Image/Image.spec.js +22 -16
  80. package/dist/components/Image/Image.stories.js +19 -8
  81. package/dist/components/Input/Input.js +31 -14
  82. package/dist/components/Input/Input.stories.js +15 -5
  83. package/dist/components/Input/index.js +3 -1
  84. package/dist/components/Input/styles/index.js +10 -4
  85. package/dist/components/Link/Link.js +2 -1
  86. package/dist/components/Link/Link.stories.js +12 -5
  87. package/dist/components/Link/Link.styles.js +8 -8
  88. package/dist/components/List/List.js +37 -14
  89. package/dist/components/List/List.stories.js +55 -19
  90. package/dist/components/List/index.js +5 -2
  91. package/dist/components/List/styles/index.js +9 -2
  92. package/dist/components/List/styles/item.styles.js +1 -1
  93. package/dist/components/Loader/Loader.js +33 -17
  94. package/dist/components/Loader/Loader.stories.js +44 -24
  95. package/dist/components/Modal/Modal.js +23 -17
  96. package/dist/components/Modal/Modal.stories.js +100 -30
  97. package/dist/components/Modal/index.js +3 -1
  98. package/dist/components/Modal/styles/body.js +28 -11
  99. package/dist/components/Modal/styles/closeButton.js +4 -4
  100. package/dist/components/Modal/styles/dialog.js +4 -4
  101. package/dist/components/Modal/styles/dialogContainer.js +11 -5
  102. package/dist/components/Modal/styles/header.js +5 -5
  103. package/dist/components/Modal/styles/index.js +28 -12
  104. package/dist/components/Popover/Popover.js +33 -12
  105. package/dist/components/Popover/Popover.stories.js +62 -36
  106. package/dist/components/Popover/PopoverArrow.js +17 -3
  107. package/dist/components/Popover/PopoverCloseButton.js +17 -3
  108. package/dist/components/Popover/PopoverContent.js +27 -10
  109. package/dist/components/Popover/index.js +8 -4
  110. package/dist/components/Popover/styles/index.js +22 -9
  111. package/dist/components/Popover/styles/popover-arrow.js +4 -4
  112. package/dist/components/Popover/styles/popover-body.js +7 -3
  113. package/dist/components/Popover/styles/popover-close-button.js +10 -7
  114. package/dist/components/Popover/styles/popover-content.js +7 -5
  115. package/dist/components/Popover/styles/popover-header.js +1 -1
  116. package/dist/components/Popover/styles/popper.js +1 -1
  117. package/dist/components/Radio/Radio.js +27 -12
  118. package/dist/components/Radio/Radio.stories.js +12 -2
  119. package/dist/components/Radio/RadioGroup.js +33 -17
  120. package/dist/components/Radio/index.js +5 -2
  121. package/dist/components/Radio/styles/index.js +13 -5
  122. package/dist/components/Select/Select.js +33 -14
  123. package/dist/components/Select/Select.stories.js +22 -13
  124. package/dist/components/Select/index.js +3 -1
  125. package/dist/components/Select/styles/index.js +14 -4
  126. package/dist/components/Skeleton/Skeleton.stories.js +20 -6
  127. package/dist/components/Skeleton/Skeleton.styles.js +3 -0
  128. package/dist/components/Skeleton/index.js +4 -3
  129. package/dist/components/Spinner/Spinner.js +25 -9
  130. package/dist/components/Spinner/Spinner.stories.js +70 -42
  131. package/dist/components/Spinner/Spinner.styles.js +43 -56
  132. package/dist/components/Switch/Switch.js +30 -13
  133. package/dist/components/Switch/Switch.stories.js +10 -2
  134. package/dist/components/Switch/index.js +3 -1
  135. package/dist/components/Switch/styles/index.js +31 -10
  136. package/dist/components/Table/Table.js +2 -1
  137. package/dist/components/Table/Table.stories.js +37 -17
  138. package/dist/components/Table/Table.styles.js +32 -13
  139. package/dist/components/Table/index.js +11 -8
  140. package/dist/components/Tabs/Tabs.js +22 -14
  141. package/dist/components/Tabs/Tabs.stories.js +20 -4
  142. package/dist/components/Tabs/combineSizeWithVariant.js +17 -11
  143. package/dist/components/Tabs/index.js +8 -5
  144. package/dist/components/Tabs/styles/index.js +8 -2
  145. package/dist/components/Text/Text.js +17 -8
  146. package/dist/components/Text/Text.stories.js +15 -3
  147. package/dist/components/Text/Text.styles.js +35 -15
  148. package/dist/components/Text/combineAsWithVariant.js +57 -36
  149. package/dist/components/Text/options.js +1 -1
  150. package/dist/components/ThemeProvider/ThemeProvider.js +33 -10
  151. package/dist/components/ThemeProvider/ThemeProvider.stories.js +16 -7
  152. package/dist/components/index.js +135 -74
  153. package/dist/components/styles.js +43 -21
  154. package/dist/theme/base/breakpoints.js +4 -1
  155. package/dist/theme/base/colors.js +45 -32
  156. package/dist/theme/base/index.js +13 -7
  157. package/dist/theme/base/sizes.js +4 -4
  158. package/dist/theme/base/typography.js +6 -5
  159. package/dist/theme/base/zindices.js +2 -1
  160. package/dist/theme/global.js +20 -87
  161. package/dist/theme/index.js +41 -15
  162. package/dist/utils/Spaces.js +12 -5
  163. package/package.json +2 -2
@@ -1,13 +1,18 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = exports.Icon = void 0;
9
+
8
10
  var _react = _interopRequireDefault(require("react"));
11
+
9
12
  var _icons = require("@spothero/icons");
13
+
10
14
  var _Icon = _interopRequireDefault(require("./Icon"));
15
+
11
16
  var _default = {
12
17
  title: 'v2/Icon',
13
18
  component: _Icon.default,
@@ -16,23 +21,27 @@ var _default = {
16
21
  }
17
22
  };
18
23
  exports.default = _default;
19
- const Template = props => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
20
- as: _icons.HeroCar,
21
- color: "primary.default",
22
- height: "24",
23
- width: "24"
24
- }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
25
- as: _icons.S4BLogo,
26
- color: "gray.dark",
27
- height: "24",
28
- width: "24",
29
- paddingLeft: "16"
30
- }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
31
- as: _icons.Shield,
32
- color: "green.default",
33
- height: "24",
34
- width: "24",
35
- paddingLeft: "16"
36
- }));
37
- const Icon = Template.bind({});
24
+
25
+ var Template = function Template(props) {
26
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
27
+ as: _icons.HeroCar,
28
+ color: "primary.default",
29
+ height: "24",
30
+ width: "24"
31
+ }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
32
+ as: _icons.S4BLogo,
33
+ color: "gray.dark",
34
+ height: "24",
35
+ width: "24",
36
+ paddingLeft: "16"
37
+ }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
38
+ as: _icons.Shield,
39
+ color: "green.default",
40
+ height: "24",
41
+ width: "24",
42
+ paddingLeft: "16"
43
+ }));
44
+ };
45
+
46
+ var Icon = Template.bind({});
38
47
  exports.Icon = Icon;
@@ -1,72 +1,102 @@
1
1
  "use strict";
2
2
 
3
+ var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
4
+
5
+ var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
6
+
7
+ var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
8
+
9
+ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
10
+
11
+ var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
12
+
3
13
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
+
4
15
  Object.defineProperty(exports, "__esModule", {
5
16
  value: true
6
17
  });
7
18
  exports.default = void 0;
19
+
20
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
21
+
22
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
23
+
24
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
25
+
8
26
  var _react = _interopRequireDefault(require("react"));
27
+
9
28
  var _react2 = require("@chakra-ui/react");
29
+
10
30
  var _template = _interopRequireDefault(require("lodash/template"));
31
+
11
32
  var _environment = _interopRequireDefault(require("@spothero/utils/environment"));
12
- const buildCloudinarySrc = _ref => {
13
- let {
14
- cloudinaryImageId,
15
- cloudinaryTemplate,
16
- cloudinaryCloudName,
17
- htmlWidth,
18
- htmlHeight,
19
- quality
20
- } = _ref;
21
- const defaultTemplate = `https://res.cloudinary.com/${cloudinaryCloudName}/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,fl_progressive,dpr_${_environment.default.isHighDensityDisplay() ? 2 : 1},h_$h,q_$q,w_$w/${cloudinaryImageId}`;
22
- const tmpl = cloudinaryTemplate ? cloudinaryTemplate : defaultTemplate;
33
+
34
+ var _excluded = ["isSSR", "cloudinaryImageId", "cloudinaryTemplate", "cloudinaryCloudName", "htmlWidth", "htmlHeight", "quality", "lazyLoad"];
35
+
36
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
37
+
38
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
39
+
40
+ var buildCloudinarySrc = function buildCloudinarySrc(_ref) {
41
+ var _context, _context2;
42
+
43
+ var cloudinaryImageId = _ref.cloudinaryImageId,
44
+ cloudinaryTemplate = _ref.cloudinaryTemplate,
45
+ cloudinaryCloudName = _ref.cloudinaryCloudName,
46
+ htmlWidth = _ref.htmlWidth,
47
+ htmlHeight = _ref.htmlHeight,
48
+ quality = _ref.quality;
49
+ var defaultTemplate = (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);
50
+ var tmpl = cloudinaryTemplate ? cloudinaryTemplate : defaultTemplate;
23
51
  return (0, _template.default)(tmpl, {
24
52
  interpolate: /{{([\s\S]+?)}}/g // matches template vars in the format '{{ var }}' or '{{var}}'
53
+
25
54
  })({
26
55
  WIDTH: htmlWidth,
27
56
  HEIGHT: htmlHeight,
28
57
  QUALITY: quality
29
58
  });
30
59
  };
31
- const Image = _ref2 => {
32
- let {
33
- isSSR,
34
- cloudinaryImageId,
35
- cloudinaryTemplate,
36
- cloudinaryCloudName,
37
- htmlWidth,
38
- htmlHeight,
39
- quality,
40
- lazyLoad,
41
- ...otherProps
42
- } = _ref2;
43
- const hasValidCloudinarySrc = (cloudinaryImageId || cloudinaryTemplate) && Boolean(htmlWidth) && Boolean(htmlHeight);
44
- let cloudinarySrc;
60
+
61
+ var Image = function Image(_ref2) {
62
+ var isSSR = _ref2.isSSR,
63
+ cloudinaryImageId = _ref2.cloudinaryImageId,
64
+ cloudinaryTemplate = _ref2.cloudinaryTemplate,
65
+ cloudinaryCloudName = _ref2.cloudinaryCloudName,
66
+ htmlWidth = _ref2.htmlWidth,
67
+ htmlHeight = _ref2.htmlHeight,
68
+ quality = _ref2.quality,
69
+ lazyLoad = _ref2.lazyLoad,
70
+ otherProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
71
+ var hasValidCloudinarySrc = (cloudinaryImageId || cloudinaryTemplate) && Boolean(htmlWidth) && Boolean(htmlHeight);
72
+ var cloudinarySrc;
73
+
45
74
  if (hasValidCloudinarySrc) {
46
75
  cloudinarySrc = buildCloudinarySrc({
47
- cloudinaryImageId,
48
- cloudinaryTemplate,
49
- cloudinaryCloudName,
50
- htmlWidth,
51
- htmlHeight,
52
- quality
76
+ cloudinaryImageId: cloudinaryImageId,
77
+ cloudinaryTemplate: cloudinaryTemplate,
78
+ cloudinaryCloudName: cloudinaryCloudName,
79
+ htmlWidth: htmlWidth,
80
+ htmlHeight: htmlHeight,
81
+ quality: quality
53
82
  });
54
83
  }
55
- const imageProps = {
56
- ...otherProps,
84
+
85
+ var imageProps = _objectSpread(_objectSpread({}, otherProps), {}, {
57
86
  src: cloudinarySrc || otherProps.src,
58
- htmlWidth,
59
- htmlHeight,
60
- ...(lazyLoad && {
61
- loading: 'lazy'
62
- })
63
- };
87
+ htmlWidth: htmlWidth,
88
+ htmlHeight: htmlHeight
89
+ }, lazyLoad && {
90
+ loading: 'lazy'
91
+ });
92
+
64
93
  if (isSSR) {
65
94
  return /*#__PURE__*/_react.default.createElement(_react2.Img, imageProps);
66
95
  } else {
67
96
  return /*#__PURE__*/_react.default.createElement(_react2.Image, imageProps);
68
97
  }
69
98
  };
99
+
70
100
  Image.defaultProps = {
71
101
  isSSR: false,
72
102
  quality: 50,
@@ -1,25 +1,31 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
4
5
  var _react = _interopRequireDefault(require("react"));
6
+
5
7
  var _react2 = require("@testing-library/react");
8
+
6
9
  var _Image = _interopRequireDefault(require("./Image"));
7
- const defaultSrc = 'http://placehold.it/350x200';
8
- const render = props => {
10
+
11
+ var defaultSrc = 'http://placehold.it/350x200';
12
+
13
+ var render = function render(props) {
9
14
  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Image.default, props));
10
15
  };
11
- describe('Image', () => {
12
- describe('basic behavior', () => {
13
- it('displays an image', () => {
16
+
17
+ describe('Image', function () {
18
+ describe('basic behavior', function () {
19
+ it('displays an image', function () {
14
20
  render({
15
21
  src: defaultSrc,
16
22
  alt: 'An image'
17
23
  });
18
- (0, _react2.waitFor)(() => {
24
+ (0, _react2.waitFor)(function () {
19
25
  expect(_react2.screen.getByRole('img')).toHaveAttribute('src', defaultSrc);
20
26
  });
21
27
  });
22
- it('displays an image (SSR)', () => {
28
+ it('displays an image (SSR)', function () {
23
29
  render({
24
30
  src: defaultSrc,
25
31
  alt: 'An image',
@@ -28,8 +34,8 @@ describe('Image', () => {
28
34
  expect(_react2.screen.getByRole('img')).toHaveAttribute('src', defaultSrc);
29
35
  });
30
36
  });
31
- describe('Cloudinary properties', () => {
32
- it('correctly sets image src when a Cloudinary image template is passed in', () => {
37
+ describe('Cloudinary properties', function () {
38
+ it('correctly sets image src when a Cloudinary image template is passed in', function () {
33
39
  render({
34
40
  cloudinaryTemplate: 'https://res.cloudinary.com/spothero/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,h_$h,q_$q,w_$w/html-emails/google',
35
41
  htmlWidth: 250,
@@ -37,11 +43,11 @@ describe('Image', () => {
37
43
  quality: 75,
38
44
  alt: 'An image'
39
45
  });
40
- (0, _react2.waitFor)(() => {
46
+ (0, _react2.waitFor)(function () {
41
47
  expect(_react2.screen.getByRole('img')).toHaveAttribute('src', 'https://res.cloudinary.com/spothero/image/upload/$w_250,$h_500,$q_75/c_fill,f_auto,h_$h,q_$q,w_$w/html-emails/google');
42
48
  });
43
49
  });
44
- it('correctly sets image src when a Cloudinary image id is passed in', () => {
50
+ it('correctly sets image src when a Cloudinary image id is passed in', function () {
45
51
  render({
46
52
  cloudinaryImageId: 'html-emails/partner-hertz',
47
53
  htmlWidth: 250,
@@ -51,25 +57,25 @@ describe('Image', () => {
51
57
  });
52
58
  expect(_react2.screen.getByRole('img')).toHaveAttribute('src', 'https://res.cloudinary.com/spothero/image/upload/$w_250,$h_500,$q_50/c_fill,f_auto,fl_progressive,dpr_1,h_$h,q_$q,w_$w/html-emails/partner-hertz');
53
59
  });
54
- it('does not set in image src when invalid set of Cloudinary props is passed in', () => {
60
+ it('does not set in image src when invalid set of Cloudinary props is passed in', function () {
55
61
  render({
56
62
  cloudinaryImageId: 'html-emails/partner-hertz',
57
63
  alt: 'An image',
58
64
  isSSR: true
59
65
  });
60
- (0, _react2.waitFor)(() => {
66
+ (0, _react2.waitFor)(function () {
61
67
  expect(_react2.screen.getByRole('img')).not.toHaveAttribute('src');
62
68
  });
63
69
  });
64
70
  });
65
- describe('Lazy loading', () => {
66
- it('correctly sets image loading attribute to lazy when lazyLoad prop is true', () => {
71
+ describe('Lazy loading', function () {
72
+ it('correctly sets image loading attribute to lazy when lazyLoad prop is true', function () {
67
73
  render({
68
74
  src: defaultSrc,
69
75
  alt: 'An image',
70
76
  lazyLoad: true
71
77
  });
72
- (0, _react2.waitFor)(() => {
78
+ (0, _react2.waitFor)(function () {
73
79
  expect(_react2.screen.getByRole('img')).toHaveAttribute('loading', 'lazy');
74
80
  });
75
81
  });
@@ -1,12 +1,16 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = exports.StyledImage = exports.SSRImg = exports.LazyLoadImage = exports.DefaultImage = exports.CloudinaryImageTemplate = exports.CloudinaryImageId = void 0;
9
+
8
10
  var _react = _interopRequireDefault(require("react"));
11
+
9
12
  var _Image = _interopRequireDefault(require("./Image"));
13
+
10
14
  var _default = {
11
15
  title: 'v2/Image',
12
16
  component: _Image.default,
@@ -16,9 +20,16 @@ var _default = {
16
20
  }
17
21
  };
18
22
  exports.default = _default;
19
- const Template = props => /*#__PURE__*/_react.default.createElement(_Image.default, props);
20
- const LazyLoadTemplate = props => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Scroll down to see lazy loaded image in action..."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Image.default, props));
21
- const DefaultImage = Template.bind({});
23
+
24
+ var Template = function Template(props) {
25
+ return /*#__PURE__*/_react.default.createElement(_Image.default, props);
26
+ };
27
+
28
+ var LazyLoadTemplate = function LazyLoadTemplate(props) {
29
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Scroll down to see lazy loaded image in action..."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Image.default, props));
30
+ };
31
+
32
+ var DefaultImage = Template.bind({});
22
33
  exports.DefaultImage = DefaultImage;
23
34
  DefaultImage.args = {
24
35
  src: 'http://placehold.it/350x200',
@@ -26,7 +37,7 @@ DefaultImage.args = {
26
37
  height: 200,
27
38
  alt: 'Placeholder image'
28
39
  };
29
- const StyledImage = Template.bind({});
40
+ var StyledImage = Template.bind({});
30
41
  exports.StyledImage = StyledImage;
31
42
  StyledImage.args = {
32
43
  src: 'http://placehold.it/350x200',
@@ -44,7 +55,7 @@ StyledImage.args = {
44
55
  tablet: 52
45
56
  }
46
57
  };
47
- const SSRImg = Template.bind({});
58
+ var SSRImg = Template.bind({});
48
59
  exports.SSRImg = SSRImg;
49
60
  SSRImg.args = {
50
61
  src: 'http://placehold.it/350x200',
@@ -52,7 +63,7 @@ SSRImg.args = {
52
63
  height: 200,
53
64
  alt: 'SSR image'
54
65
  };
55
- const CloudinaryImageId = Template.bind({});
66
+ var CloudinaryImageId = Template.bind({});
56
67
  exports.CloudinaryImageId = CloudinaryImageId;
57
68
  CloudinaryImageId.args = {
58
69
  cloudinaryImageId: 'html-emails/partner-hertz',
@@ -61,7 +72,7 @@ CloudinaryImageId.args = {
61
72
  quality: 50,
62
73
  alt: 'Cloudinary image ID'
63
74
  };
64
- const CloudinaryImageTemplate = Template.bind({});
75
+ var CloudinaryImageTemplate = Template.bind({});
65
76
  exports.CloudinaryImageTemplate = CloudinaryImageTemplate;
66
77
  CloudinaryImageTemplate.args = {
67
78
  cloudinaryTemplate: 'https://res.cloudinary.com/spothero/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,h_$h,q_$q,w_$w/html-emails/google',
@@ -70,7 +81,7 @@ CloudinaryImageTemplate.args = {
70
81
  quality: 80,
71
82
  alt: 'Cloudinary image template'
72
83
  };
73
- const LazyLoadImage = LazyLoadTemplate.bind({});
84
+ var LazyLoadImage = LazyLoadTemplate.bind({});
74
85
  exports.LazyLoadImage = LazyLoadImage;
75
86
  LazyLoadImage.args = {
76
87
  src: 'https://res.cloudinary.com/spothero/image/upload/$w_1024,$h_704,$q_50/c_fill,f_auto,h_$h,q_$q,w_$w,x_375,y_250/v1577978927/rzm2xqhtgqxfv3isxmyy.jpg',
@@ -1,29 +1,46 @@
1
1
  "use strict";
2
2
 
3
+ var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
+
5
+ var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
6
+
7
+ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
8
+
3
9
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
10
+
4
11
  Object.defineProperty(exports, "__esModule", {
5
12
  value: true
6
13
  });
7
14
  exports.default = void 0;
15
+
8
16
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
17
+
18
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
19
+
9
20
  var _react = _interopRequireWildcard(require("react"));
21
+
10
22
  var _classnames = _interopRequireDefault(require("classnames"));
23
+
11
24
  var _react2 = require("@chakra-ui/react");
25
+
12
26
  var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
13
- 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); }
14
- 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; }
15
- const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
16
- let {
17
- label,
18
- helperText,
19
- errorMessage,
20
- isInvalid,
21
- isDisabled,
22
- isRequired,
23
- isOptional,
24
- ...props
25
- } = _ref;
26
- const classes = (0, _classnames.default)({
27
+
28
+ var _excluded = ["label", "helperText", "errorMessage", "isInvalid", "isDisabled", "isRequired", "isOptional"];
29
+
30
+ 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); }
31
+
32
+ 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; }
33
+
34
+ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
35
+ var label = _ref.label,
36
+ helperText = _ref.helperText,
37
+ errorMessage = _ref.errorMessage,
38
+ isInvalid = _ref.isInvalid,
39
+ isDisabled = _ref.isDisabled,
40
+ isRequired = _ref.isRequired,
41
+ isOptional = _ref.isOptional,
42
+ props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
43
+ var classes = (0, _classnames.default)({
27
44
  'FormElement-contains-error': isInvalid
28
45
  });
29
46
  return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
@@ -1,14 +1,20 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = exports.Input = void 0;
9
+
8
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
11
+
9
12
  var _react = _interopRequireDefault(require("react"));
13
+
10
14
  var _Input = _interopRequireDefault(require("./Input"));
15
+
11
16
  var _react2 = require("@chakra-ui/react");
17
+
12
18
  var _default = {
13
19
  title: 'v2/Input',
14
20
  component: _Input.default,
@@ -19,11 +25,15 @@ var _default = {
19
25
  }
20
26
  };
21
27
  exports.default = _default;
22
- const InputTemplate = props => /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
23
- variant: "outline",
24
- maxWidth: "200px"
25
- }, props));
26
- const Input = InputTemplate.bind({});
28
+
29
+ var InputTemplate = function InputTemplate(props) {
30
+ return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
31
+ variant: "outline",
32
+ maxWidth: "200px"
33
+ }, props));
34
+ };
35
+
36
+ var Input = InputTemplate.bind({});
27
37
  exports.Input = Input;
28
38
  Input.argTypes = {
29
39
  placeholder: {
@@ -1,13 +1,15 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  Object.defineProperty(exports, "default", {
8
9
  enumerable: true,
9
- get: function () {
10
+ get: function get() {
10
11
  return _Input.default;
11
12
  }
12
13
  });
14
+
13
15
  var _Input = _interopRequireDefault(require("./Input"));
@@ -1,13 +1,17 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = void 0;
9
+
8
10
  var _merge = _interopRequireDefault(require("lodash/merge"));
11
+
9
12
  var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
10
- const baseStyle = {
13
+
14
+ var baseStyle = {
11
15
  field: {
12
16
  _placeholder: {
13
17
  color: 'text.secondary.light',
@@ -19,7 +23,7 @@ const baseStyle = {
19
23
  }
20
24
  }
21
25
  };
22
- const variants = {
26
+ var variants = {
23
27
  outline: {
24
28
  field: {
25
29
  border: '1px solid',
@@ -58,8 +62,10 @@ const variants = {
58
62
  }
59
63
  }
60
64
  };
65
+
61
66
  var _default = (0, _merge.default)(_theme.default.components.Input, {
62
- baseStyle,
63
- variants
67
+ baseStyle: baseStyle,
68
+ variants: variants
64
69
  });
70
+
65
71
  exports.default = _default;
@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  Object.defineProperty(exports, "default", {
7
7
  enumerable: true,
8
- get: function () {
8
+ get: function get() {
9
9
  return _react.Link;
10
10
  }
11
11
  });
12
+
12
13
  var _react = require("@chakra-ui/react");
@@ -1,15 +1,22 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = exports.Overview = void 0;
9
+
8
10
  var _react = _interopRequireDefault(require("react"));
11
+
9
12
  var _react2 = require("@chakra-ui/react");
13
+
10
14
  var _share = _interopRequireDefault(require("@spothero/icons/share"));
15
+
11
16
  var _Text = _interopRequireDefault(require("../Text/Text"));
17
+
12
18
  var _Link = _interopRequireDefault(require("./Link"));
19
+
13
20
  var _default = {
14
21
  title: 'v2/Link',
15
22
  component: _Link.default,
@@ -18,10 +25,9 @@ var _default = {
18
25
  }
19
26
  };
20
27
  exports.default = _default;
21
- const OverviewTemplate = (props, _ref) => {
22
- let {
23
- hasDarkBackground
24
- } = _ref;
28
+
29
+ var OverviewTemplate = function OverviewTemplate(props, _ref) {
30
+ var hasDarkBackground = _ref.hasDarkBackground;
25
31
  return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
26
32
  color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
27
33
  }, "A link with", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
@@ -47,7 +53,8 @@ const OverviewTemplate = (props, _ref) => {
47
53
  variant: hasDarkBackground ? 'onDark' : 'standard'
48
54
  }, "React Router"), ' ', "and it will replace the ", /*#__PURE__*/_react.default.createElement("code", null, "a"), " tag with it's", ' ', /*#__PURE__*/_react.default.createElement("code", null, "Link"), "."));
49
55
  };
50
- const Overview = OverviewTemplate.bind({});
56
+
57
+ var Overview = OverviewTemplate.bind({});
51
58
  exports.Overview = Overview;
52
59
  Overview.parameters = {
53
60
  importBy: 'Link'