@shopgate/pwa-ui-shared 7.30.0-alpha.7 → 7.30.0-alpha.8

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 (266) hide show
  1. package/AccordionContainer/index.js +39 -5
  2. package/AccordionContainer/spec.js +25 -2
  3. package/ActionButton/index.js +63 -7
  4. package/ActionButton/spec.js +59 -2
  5. package/ActionButton/style.js +22 -1
  6. package/AddToCartButton/index.js +184 -27
  7. package/AddToCartButton/mock.js +18 -4
  8. package/AddToCartButton/spec.js +51 -2
  9. package/AddToCartButton/style.js +127 -11
  10. package/Availability/index.js +34 -2
  11. package/Availability/spec.js +41 -1
  12. package/Availability/style.js +19 -1
  13. package/Button/index.js +76 -5
  14. package/Button/spec.js +33 -1
  15. package/Button/style.js +130 -21
  16. package/ButtonLink/connector.js +11 -2
  17. package/ButtonLink/index.js +44 -6
  18. package/ButtonLink/spec.js +23 -1
  19. package/Card/index.js +19 -2
  20. package/Card/style.js +11 -1
  21. package/CardList/components/Item/index.js +26 -2
  22. package/CardList/components/Item/style.js +7 -1
  23. package/CardList/index.js +34 -3
  24. package/CartTotalLine/components/Amount/index.js +28 -2
  25. package/CartTotalLine/components/Amount/style.js +8 -1
  26. package/CartTotalLine/components/Hint/index.js +23 -2
  27. package/CartTotalLine/components/Hint/style.js +12 -1
  28. package/CartTotalLine/components/Label/index.js +36 -2
  29. package/CartTotalLine/components/Label/style.js +17 -1
  30. package/CartTotalLine/components/Spacer/index.js +16 -2
  31. package/CartTotalLine/index.js +39 -2
  32. package/CartTotalLine/style.js +31 -1
  33. package/Checkbox/index.js +31 -2
  34. package/Checkbox/style.js +18 -1
  35. package/Chip/index.js +61 -2
  36. package/Chip/spec.js +24 -1
  37. package/Chip/style.js +71 -3
  38. package/ContextMenu/ContextMenu.hooks.js +6 -2
  39. package/ContextMenu/ContextMenuProvider.context.js +9 -3
  40. package/ContextMenu/ContextMenuProvider.js +21 -2
  41. package/ContextMenu/components/Item/index.js +67 -5
  42. package/ContextMenu/components/Item/style.js +32 -3
  43. package/ContextMenu/components/Position/index.js +61 -10
  44. package/ContextMenu/components/Position/style.js +11 -1
  45. package/ContextMenu/index.js +124 -3
  46. package/ContextMenu/spec.js +101 -2
  47. package/ContextMenu/style.js +45 -1
  48. package/Dialog/components/BasicDialog/index.js +5 -1
  49. package/Dialog/components/HtmlContentDialog/index.js +22 -2
  50. package/Dialog/components/HtmlContentDialog/spec.js +59 -1
  51. package/Dialog/components/PipelineErrorDialog/index.js +114 -25
  52. package/Dialog/components/PipelineErrorDialog/spec.js +92 -12
  53. package/Dialog/components/TextMessageDialog/index.js +28 -2
  54. package/Dialog/components/TextMessageDialog/spec.js +59 -1
  55. package/Dialog/components/VariantSelectModal/connector.js +11 -2
  56. package/Dialog/components/VariantSelectModal/index.js +65 -6
  57. package/Dialog/components/VariantSelectModal/spec.js +51 -2
  58. package/Dialog/constants.js +6 -1
  59. package/Dialog/index.js +114 -7
  60. package/Dialog/spec.js +81 -3
  61. package/DiscountBadge/index.js +30 -2
  62. package/DiscountBadge/spec.js +19 -1
  63. package/DiscountBadge/style.js +34 -2
  64. package/FavoritesButton/connector.js +18 -3
  65. package/FavoritesButton/index.js +118 -15
  66. package/FavoritesButton/mock.js +50 -4
  67. package/FavoritesButton/spec.js +120 -2
  68. package/FavoritesButton/style.js +26 -1
  69. package/Form/Builder/builders/buildCountryList.js +40 -6
  70. package/Form/Builder/builders/buildFormDefaults.js +35 -6
  71. package/Form/Builder/builders/buildFormElements.js +68 -10
  72. package/Form/Builder/builders/buildProvinceList.js +19 -2
  73. package/Form/Builder/builders/buildValidationErrorList.js +7 -2
  74. package/Form/Builder/classes/ActionListener/constants.js +22 -2
  75. package/Form/Builder/classes/ActionListener/index.js +441 -93
  76. package/Form/Builder/classes/ActionListener/spec.js +321 -19
  77. package/Form/Builder/components/CheckboxElement.js +35 -3
  78. package/Form/Builder/components/CountryElement.js +40 -3
  79. package/Form/Builder/components/ProvinceElement.js +40 -3
  80. package/Form/Builder/components/RadioElement.js +41 -3
  81. package/Form/Builder/components/SelectElement.js +39 -3
  82. package/Form/Builder/components/TextElement.js +49 -4
  83. package/Form/Builder/elementTypes.js +11 -1
  84. package/Form/Builder/index.js +298 -52
  85. package/Form/Builder/iso-3166-2.js +4943 -1
  86. package/Form/Builder/spec.js +300 -16
  87. package/Form/Checkbox/index.js +66 -4
  88. package/Form/Checkbox/style.js +25 -2
  89. package/Form/InfoField/index.js +50 -2
  90. package/Form/InfoField/spec.js +9 -1
  91. package/Form/InfoField/style.js +11 -1
  92. package/Form/Password/index.js +51 -6
  93. package/Form/Password/spec.js +34 -1
  94. package/Form/Password/style.js +11 -1
  95. package/Form/RadioGroup/components/Item/index.js +59 -3
  96. package/Form/RadioGroup/components/Item/style.js +32 -2
  97. package/Form/RadioGroup/index.js +101 -9
  98. package/Form/RadioGroup/spec.js +83 -3
  99. package/Form/RadioGroup/style.js +18 -2
  100. package/Form/Select/index.js +158 -10
  101. package/Form/Select/spec.js +36 -5
  102. package/Form/Select/style.js +27 -1
  103. package/Form/SelectContextChoices/index.js +77 -3
  104. package/Form/SelectContextChoices/spec.js +33 -4
  105. package/Form/SelectContextChoices/style.js +23 -1
  106. package/Form/TextField/index.js +92 -8
  107. package/Form/TextField/spec.js +110 -1
  108. package/Form/TextField/style.js +66 -8
  109. package/Form/index.js +54 -13
  110. package/FormElement/components/ErrorText/index.js +31 -2
  111. package/FormElement/components/ErrorText/style.js +13 -1
  112. package/FormElement/components/Label/index.js +35 -2
  113. package/FormElement/components/Label/style.js +76 -8
  114. package/FormElement/components/Placeholder/index.js +26 -2
  115. package/FormElement/components/Placeholder/style.js +48 -6
  116. package/FormElement/components/Underline/index.js +18 -2
  117. package/FormElement/components/Underline/style.js +51 -4
  118. package/FormElement/index.js +91 -6
  119. package/FormElement/spec.js +67 -2
  120. package/FormElement/style.js +13 -2
  121. package/Glow/index.js +90 -7
  122. package/Glow/spec.js +9 -1
  123. package/Glow/style.js +18 -1
  124. package/IndicatorCircle/index.js +33 -3
  125. package/IndicatorCircle/spec.js +28 -1
  126. package/IndicatorCircle/style.js +57 -3
  127. package/LoadingIndicator/index.js +29 -2
  128. package/LoadingIndicator/style.js +20 -1
  129. package/Manufacturer/index.js +20 -2
  130. package/Manufacturer/style.js +5 -1
  131. package/MessageBar/index.js +36 -2
  132. package/MessageBar/spec.js +79 -1
  133. package/MessageBar/style.js +38 -1
  134. package/NoResults/components/Icon/index.js +130 -2
  135. package/NoResults/components/Icon/style.js +17 -1
  136. package/NoResults/index.js +46 -2
  137. package/NoResults/style.js +31 -1
  138. package/Placeholder/index.js +25 -3
  139. package/Placeholder/style.js +11 -1
  140. package/PlaceholderLabel/index.js +27 -2
  141. package/PlaceholderLabel/spec.js +19 -1
  142. package/PlaceholderLabel/style.js +12 -1
  143. package/PlaceholderParagraph/index.js +36 -2
  144. package/PlaceholderParagraph/spec.js +19 -1
  145. package/Price/index.js +88 -7
  146. package/Price/style.js +22 -1
  147. package/PriceInfo/index.js +20 -2
  148. package/PriceInfo/style.js +5 -1
  149. package/PriceStriked/index.js +83 -12
  150. package/PriceStriked/style.js +33 -3
  151. package/ProductProperties/index.js +32 -2
  152. package/ProgressBar/index.js +101 -13
  153. package/ProgressBar/spec.js +13 -1
  154. package/ProgressBar/style.js +83 -2
  155. package/RadioButton/index.js +18 -2
  156. package/RadioButton/spec.js +21 -1
  157. package/RadioButton/style.js +21 -1
  158. package/RatingNumber/index.js +29 -2
  159. package/RatingStars/constants.js +2 -1
  160. package/RatingStars/index.js +130 -12
  161. package/RatingStars/spec.js +90 -3
  162. package/RatingStars/style.js +51 -2
  163. package/Ripple/components/RippleAnimation/index.js +88 -6
  164. package/Ripple/index.js +218 -40
  165. package/Ripple/style.js +18 -1
  166. package/RippleButton/index.js +52 -5
  167. package/RippleButton/spec.js +45 -1
  168. package/ScannerOverlay/components/CameraOverlay/index.js +13 -2
  169. package/ScannerOverlay/components/CameraOverlay/style.js +41 -1
  170. package/ScannerOverlay/components/ScannerBar/components/FlashlightButton/index.js +34 -2
  171. package/ScannerOverlay/components/ScannerBar/components/FlashlightButton/style.js +28 -1
  172. package/ScannerOverlay/components/ScannerBar/components/ScannerInstructions/index.js +11 -2
  173. package/ScannerOverlay/components/ScannerBar/index.js +31 -2
  174. package/ScannerOverlay/components/ScannerBar/style.js +20 -1
  175. package/ScannerOverlay/index.js +47 -7
  176. package/Sheet/components/Header/components/SearchBar/index.js +46 -2
  177. package/Sheet/components/Header/components/SearchBar/spec.js +21 -3
  178. package/Sheet/components/Header/components/SearchBar/style.js +47 -1
  179. package/Sheet/components/Header/index.js +75 -7
  180. package/Sheet/components/Header/spec.js +14 -1
  181. package/Sheet/components/Header/style.js +50 -1
  182. package/Sheet/index.js +170 -17
  183. package/Sheet/spec.js +85 -5
  184. package/Sheet/style.js +143 -2
  185. package/TaxDisclaimer/index.js +34 -4
  186. package/TaxDisclaimer/spec.js +31 -3
  187. package/TaxDisclaimer/style.js +9 -1
  188. package/TextField/components/ErrorText/index.js +33 -2
  189. package/TextField/components/ErrorText/style.js +25 -3
  190. package/TextField/components/FormElement/index.js +19 -2
  191. package/TextField/components/FormElement/style.js +32 -4
  192. package/TextField/components/Hint/index.js +21 -2
  193. package/TextField/components/Hint/style.js +40 -5
  194. package/TextField/components/Label/index.js +32 -3
  195. package/TextField/components/Label/style.js +68 -8
  196. package/TextField/components/Underline/index.js +19 -2
  197. package/TextField/components/Underline/style.js +51 -4
  198. package/TextField/index.js +189 -27
  199. package/TextField/spec.js +128 -3
  200. package/TextField/style.js +34 -4
  201. package/ToggleIcon/index.js +58 -8
  202. package/ToggleIcon/spec.js +35 -1
  203. package/icons/AccountBoxIcon.js +11 -2
  204. package/icons/AddMoreIcon.js +11 -2
  205. package/icons/ArrowDropIcon.js +11 -2
  206. package/icons/ArrowIcon.js +21 -2
  207. package/icons/BarcodeScannerIcon.js +11 -2
  208. package/icons/BoxIcon.js +11 -2
  209. package/icons/BrowseIcon.js +11 -2
  210. package/icons/BurgerIcon.js +11 -2
  211. package/icons/CalendarIcon.js +15 -3
  212. package/icons/CartCouponIcon.js +72 -2
  213. package/icons/CartIcon.js +11 -2
  214. package/icons/CartPlusIcon.js +11 -2
  215. package/icons/CheckIcon.js +11 -2
  216. package/icons/CheckedIcon.js +11 -2
  217. package/icons/ChevronIcon.js +11 -2
  218. package/icons/CreditCardIcon.js +11 -2
  219. package/icons/CrossIcon.js +11 -2
  220. package/icons/DescriptionIcon.js +11 -2
  221. package/icons/FilterIcon.js +11 -2
  222. package/icons/FlashDisabledIcon.js +11 -2
  223. package/icons/FlashEnabledIcon.js +11 -2
  224. package/icons/GridIcon.js +11 -2
  225. package/icons/HeartIcon.js +11 -2
  226. package/icons/HeartOutlineIcon.js +11 -2
  227. package/icons/HeartPlusIcon.js +12 -2
  228. package/icons/HeartPlusOutlineIcon.js +12 -2
  229. package/icons/HomeIcon.js +11 -2
  230. package/icons/InfoIcon.js +11 -2
  231. package/icons/InfoOutlineIcon.js +11 -2
  232. package/icons/ListIcon.js +11 -2
  233. package/icons/LocalShippingIcon.js +11 -2
  234. package/icons/LocationIcon.js +13 -3
  235. package/icons/LocatorIcon.js +11 -2
  236. package/icons/LockIcon.js +11 -2
  237. package/icons/LogoutIcon.js +11 -2
  238. package/icons/MagnifierIcon.js +11 -2
  239. package/icons/MapMarkerIcon.js +24 -3
  240. package/icons/MoreIcon.js +11 -2
  241. package/icons/MoreVertIcon.js +11 -2
  242. package/icons/NotificationIcon.js +14 -3
  243. package/icons/PersonIcon.js +12 -2
  244. package/icons/PhoneIcon.js +13 -3
  245. package/icons/PlaceholderIcon.js +11 -2
  246. package/icons/RadioCheckedIcon.js +11 -2
  247. package/icons/RadioUncheckedIcon.js +11 -2
  248. package/icons/SecurityIcon.js +11 -2
  249. package/icons/ShippingMethodIcon.js +18 -3
  250. package/icons/ShoppingCartIcon.js +11 -2
  251. package/icons/SortIcon.js +11 -2
  252. package/icons/StarHalfIcon.js +18 -2
  253. package/icons/StarIcon.js +18 -2
  254. package/icons/StarOutlineIcon.js +11 -2
  255. package/icons/StopIcon.js +11 -2
  256. package/icons/TickIcon.js +11 -2
  257. package/icons/TimeIcon.js +14 -3
  258. package/icons/TrashIcon.js +11 -2
  259. package/icons/TrashOutlineIcon.js +12 -2
  260. package/icons/UncheckedIcon.js +11 -2
  261. package/icons/ViewListIcon.js +11 -2
  262. package/icons/VisibilityIcon.js +11 -2
  263. package/icons/VisibilityOffIcon.js +11 -2
  264. package/icons/WarningIcon.js +11 -2
  265. package/index.js +13 -1
  266. package/package.json +5 -5
@@ -1,9 +1,47 @@
1
- var _excluded=["children","href","navigate"];function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}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,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}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 _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import ActionButton from"../ActionButton";import connect from"./connector";/**
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React, { Component } from 'react';
3
+ import PropTypes from 'prop-types';
4
+ import ActionButton from "../ActionButton";
5
+ import connect from "./connector";
6
+
7
+ /**
2
8
  * Simple wrapper around ActionButton so it's easy to render buttons which behave as links.
3
- */var ButtonLink=/*#__PURE__*/function(_Component){function ButtonLink(){var _this2;_classCallCheck(this,ButtonLink);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,ButtonLink,[].concat(args));/**
4
- * Opens the given url on click.
5
- * @returns {undefined}
6
- */_defineProperty(_this2,"handleClick",function(){_this2.props.navigate(_this2.props.href);});return _this2;}_inherits(ButtonLink,_Component);return _createClass(ButtonLink,[{key:"render",value:/**
9
+ */
10
+ class ButtonLink extends Component {
11
+ constructor(...args) {
12
+ super(...args);
13
+ /**
14
+ * Opens the given url on click.
15
+ * @returns {undefined}
16
+ */
17
+ this.handleClick = () => {
18
+ this.props.navigate(this.props.href);
19
+ };
20
+ }
21
+ /**
7
22
  * Renders an ActionButton and handles link handling.
8
23
  * @returns {JSX.Element}
9
- */function render(){var _this$props=this.props,children=_this$props.children,href=_this$props.href,navigate=_this$props.navigate,props=_objectWithoutProperties(_this$props,_excluded);return React.createElement(ActionButton,_extends({className:"ui-shared__button-link",onClick:this.handleClick,type:"secondary"},props),children);}}]);}(Component);_defineProperty(ButtonLink,"defaultProps",{disabled:false,className:'',navigate:function navigate(){},noGap:false,flat:true});export default connect(ButtonLink);export{ButtonLink as UnwrappedButtonLink};
24
+ */
25
+ render() {
26
+ const {
27
+ children,
28
+ href,
29
+ navigate,
30
+ ...props
31
+ } = this.props;
32
+ return /*#__PURE__*/React.createElement(ActionButton, _extends({
33
+ className: "ui-shared__button-link",
34
+ onClick: this.handleClick,
35
+ type: "secondary"
36
+ }, props), children);
37
+ }
38
+ }
39
+ ButtonLink.defaultProps = {
40
+ disabled: false,
41
+ className: '',
42
+ navigate: () => {},
43
+ noGap: false,
44
+ flat: true
45
+ };
46
+ export default connect(ButtonLink);
47
+ export { ButtonLink as UnwrappedButtonLink };
@@ -1 +1,23 @@
1
- import React from'react';import{shallow}from'enzyme';import ActionButton from"../ActionButton";import{UnwrappedButtonLink as ButtonLink}from"./index";describe('<ButtonLink>',function(){describe('On click action',function(){beforeAll(function(){ActionButton.clickDelay=0;});it('should create component and open page on click',function(){var mockedNavigate=jest.fn();var link='https://example.com';var component=shallow(React.createElement(ButtonLink,{href:link,navigate:mockedNavigate},"Text inside"));expect(component).toMatchSnapshot();component.simulate('click');expect(mockedNavigate).toHaveBeenCalledTimes(1);expect(mockedNavigate).toHaveBeenCalledWith(link);});});});
1
+ import React from 'react';
2
+ import { shallow } from 'enzyme';
3
+ import ActionButton from "../ActionButton";
4
+ import { UnwrappedButtonLink as ButtonLink } from "./index";
5
+ describe('<ButtonLink>', () => {
6
+ describe('On click action', () => {
7
+ beforeAll(() => {
8
+ ActionButton.clickDelay = 0;
9
+ });
10
+ it('should create component and open page on click', () => {
11
+ const mockedNavigate = jest.fn();
12
+ const link = 'https://example.com';
13
+ const component = shallow(/*#__PURE__*/React.createElement(ButtonLink, {
14
+ href: link,
15
+ navigate: mockedNavigate
16
+ }, "Text inside"));
17
+ expect(component).toMatchSnapshot();
18
+ component.simulate('click');
19
+ expect(mockedNavigate).toHaveBeenCalledTimes(1);
20
+ expect(mockedNavigate).toHaveBeenCalledWith(link);
21
+ });
22
+ });
23
+ });
package/Card/index.js CHANGED
@@ -1,5 +1,22 @@
1
- import React from'react';import PropTypes from'prop-types';import styles from"./style";/**
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import styles from "./style";
4
+
5
+ /**
2
6
  * Renders the card component.
3
7
  * @param {Object} props The component properties.
4
8
  * @returns {JSX}
5
- */var Card=function Card(_ref){var className=_ref.className,children=_ref.children,id=_ref.id;return React.createElement("div",{className:"ui-shared__card ".concat(styles," ").concat(className),id:id},children);};Card.defaultProps={className:'',id:null};export default Card;
9
+ */
10
+ const Card = ({
11
+ className,
12
+ children,
13
+ id
14
+ }) => /*#__PURE__*/React.createElement("div", {
15
+ className: `ui-shared__card ${styles} ${className}`,
16
+ id: id
17
+ }, children);
18
+ Card.defaultProps = {
19
+ className: '',
20
+ id: null
21
+ };
22
+ export default Card;
package/Card/style.js CHANGED
@@ -1 +1,11 @@
1
- import{css}from'glamor';import{themeConfig,themeName}from'@shopgate/pwa-common/helpers/config';var isIOS=themeName.includes('ios');export default css({boxShadow:themeConfig.shadows.productCard,margin:'5px 5px 10px',borderRadius:isIOS?10:2,background:themeConfig.colors.light,overflow:'hidden',position:'relative'}).toString();
1
+ import { css } from 'glamor';
2
+ import { themeConfig, themeName } from '@shopgate/pwa-common/helpers/config';
3
+ const isIOS = themeName.includes('ios');
4
+ export default css({
5
+ boxShadow: themeConfig.shadows.productCard,
6
+ margin: '5px 5px 10px',
7
+ borderRadius: isIOS ? 10 : 2,
8
+ background: themeConfig.colors.light,
9
+ overflow: 'hidden',
10
+ position: 'relative'
11
+ }).toString();
@@ -1,5 +1,29 @@
1
- import React,{Children}from'react';import PropTypes from'prop-types';import ListItem from'@shopgate/pwa-common/components/List/components/Item';import styles from"./style";/**
1
+ import React, { Children } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import ListItem from '@shopgate/pwa-common/components/List/components/Item';
4
+ import styles from "./style";
5
+
6
+ /**
2
7
  * The Card List Item component implemented as class so that ref prop is available.
3
8
  * @param {Object} props The component props.
4
9
  * @return {JSX}
5
- */var Item=function Item(_ref){var children=_ref.children,className=_ref.className,isSelected=_ref.isSelected;if(!Children.count(children)){return null;}return React.createElement(ListItem,{className:"".concat(styles," ").concat(className),isSelected:isSelected},children);};Item.defaultProps={children:null,className:null,isSelected:false};export default Item;
10
+ */
11
+ const Item = ({
12
+ children,
13
+ className,
14
+ isSelected
15
+ }) => {
16
+ if (!Children.count(children)) {
17
+ return null;
18
+ }
19
+ return /*#__PURE__*/React.createElement(ListItem, {
20
+ className: `${styles} ${className}`,
21
+ isSelected: isSelected
22
+ }, children);
23
+ };
24
+ Item.defaultProps = {
25
+ children: null,
26
+ className: null,
27
+ isSelected: false
28
+ };
29
+ export default Item;
@@ -1 +1,7 @@
1
- import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';export default css({background:themeConfig.colors.light,marginBottom:themeConfig.variables.gap.small/2,position:'relative'}).toString();
1
+ import { css } from 'glamor';
2
+ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
3
+ export default css({
4
+ background: themeConfig.colors.light,
5
+ marginBottom: themeConfig.variables.gap.small / 2,
6
+ position: 'relative'
7
+ }).toString();
package/CardList/index.js CHANGED
@@ -1,6 +1,37 @@
1
- function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _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,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}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 _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component,Children,isValidElement}from'react';import PropTypes from'prop-types';import List from'@shopgate/pwa-common/components/List';import Item from"./components/Item";/**
1
+ import React, { Component, Children, isValidElement } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import List from '@shopgate/pwa-common/components/List';
4
+ import Item from "./components/Item";
5
+
6
+ /**
2
7
  * The CardList component.
3
- */var CardList=/*#__PURE__*/function(_Component){function CardList(){_classCallCheck(this,CardList);return _callSuper(this,CardList,arguments);}_inherits(CardList,_Component);return _createClass(CardList,[{key:"render",value:/**
8
+ */
9
+ class CardList extends Component {
10
+ /**
4
11
  * Renders the component.
5
12
  * @return {JSX}
6
- */function render(){var _this$props=this.props,children=_this$props.children,className=_this$props.className;if(!Children.count(children)){return null;}return React.createElement(List,{className:"ui-shared__card-list ".concat(className)},Children.map(children,function(child){if(!isValidElement(child)){return null;}return child;}));}}]);}(Component);_defineProperty(CardList,"Item",Item);_defineProperty(CardList,"defaultProps",{children:null,className:''});export default CardList;
13
+ */
14
+ render() {
15
+ const {
16
+ children,
17
+ className
18
+ } = this.props;
19
+ if (!Children.count(children)) {
20
+ return null;
21
+ }
22
+ return /*#__PURE__*/React.createElement(List, {
23
+ className: `ui-shared__card-list ${className}`
24
+ }, Children.map(children, child => {
25
+ if (! /*#__PURE__*/isValidElement(child)) {
26
+ return null;
27
+ }
28
+ return child;
29
+ }));
30
+ }
31
+ }
32
+ CardList.Item = Item;
33
+ CardList.defaultProps = {
34
+ children: null,
35
+ className: ''
36
+ };
37
+ export default CardList;
@@ -1,5 +1,31 @@
1
- import React from'react';import PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import I18n from '@shopgate/pwa-common/components/I18n';
4
+ import styles from "./style";
5
+
6
+ /**
2
7
  * The Amount component.
3
8
  * @param {Object} props The component props.
4
9
  * @return {JSX}
5
- */var Amount=function Amount(_ref){var amount=_ref.amount,currency=_ref.currency;if(amount===null){return null;}return React.createElement("div",{className:styles.amount},typeof amount==='string'&&React.createElement(I18n.Text,{string:amount}),typeof amount==='number'&&React.createElement(I18n.Price,{price:amount,currency:currency}));};Amount.defaultProps={amount:null,currency:null};export default Amount;
10
+ */
11
+ const Amount = ({
12
+ amount,
13
+ currency
14
+ }) => {
15
+ if (amount === null) {
16
+ return null;
17
+ }
18
+ return /*#__PURE__*/React.createElement("div", {
19
+ className: styles.amount
20
+ }, typeof amount === 'string' && /*#__PURE__*/React.createElement(I18n.Text, {
21
+ string: amount
22
+ }), typeof amount === 'number' && /*#__PURE__*/React.createElement(I18n.Price, {
23
+ price: amount,
24
+ currency: currency
25
+ }));
26
+ };
27
+ Amount.defaultProps = {
28
+ amount: null,
29
+ currency: null
30
+ };
31
+ export default Amount;
@@ -1 +1,8 @@
1
- import{css}from'glamor';var amount=css({textAlign:'right',order:4}).toString();export default{amount:amount};
1
+ import { css } from 'glamor';
2
+ const amount = css({
3
+ textAlign: 'right',
4
+ order: 4
5
+ }).toString();
6
+ export default {
7
+ amount
8
+ };
@@ -1,5 +1,26 @@
1
- import React from'react';import PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import I18n from '@shopgate/pwa-common/components/I18n';
4
+ import styles from "./style";
5
+
6
+ /**
2
7
  * The Hint component.
3
8
  * @param {Object} props The component props.
4
9
  * @return {JSX|null}
5
- */var Hint=function Hint(_ref){var hint=_ref.hint;if(hint===null){return null;}return React.createElement("div",{className:styles.hint},React.createElement(I18n.Text,{string:hint}));};Hint.defaultProps={hint:null};export default Hint;
10
+ */
11
+ const Hint = ({
12
+ hint
13
+ }) => {
14
+ if (hint === null) {
15
+ return null;
16
+ }
17
+ return /*#__PURE__*/React.createElement("div", {
18
+ className: styles.hint
19
+ }, /*#__PURE__*/React.createElement(I18n.Text, {
20
+ string: hint
21
+ }));
22
+ };
23
+ Hint.defaultProps = {
24
+ hint: null
25
+ };
26
+ export default Hint;
@@ -1 +1,12 @@
1
- import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;var hint=css({paddingLeft:variables.gap.small,order:5}).toString();export default{hint:hint};
1
+ import { css } from 'glamor';
2
+ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
3
+ const {
4
+ variables
5
+ } = themeConfig;
6
+ const hint = css({
7
+ paddingLeft: variables.gap.small,
8
+ order: 5
9
+ }).toString();
10
+ export default {
11
+ hint
12
+ };
@@ -1,5 +1,39 @@
1
- function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{I18n}from'@shopgate/engage/components';import styles from"./style";/**
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import classNames from 'classnames';
4
+ import { I18n } from '@shopgate/engage/components';
5
+ import styles from "./style";
6
+
7
+ /**
2
8
  * The ShippingCostsLabel component.
3
9
  * @param {Object} props The component props.
4
10
  * @return {JSX|null}
5
- */function Label(_ref){var label=_ref.label,showSeparator=_ref.showSeparator,labelParams=_ref.labelParams,suffix=_ref.suffix;if(!label){return React.createElement("div",{className:styles.label});}return React.createElement("div",{className:styles.label},React.createElement(I18n.Text,{string:label,params:labelParams,className:classNames(_defineProperty({},styles.labelWithSuffix,!!suffix))}),suffix,"".concat(showSeparator?':':''));}Label.defaultProps={label:null,suffix:null,showSeparator:true,labelParams:{}};export default Label;
11
+ */
12
+ function Label({
13
+ label,
14
+ showSeparator,
15
+ labelParams,
16
+ suffix
17
+ }) {
18
+ if (!label) {
19
+ return /*#__PURE__*/React.createElement("div", {
20
+ className: styles.label
21
+ });
22
+ }
23
+ return /*#__PURE__*/React.createElement("div", {
24
+ className: styles.label
25
+ }, /*#__PURE__*/React.createElement(I18n.Text, {
26
+ string: label,
27
+ params: labelParams,
28
+ className: classNames({
29
+ [styles.labelWithSuffix]: !!suffix
30
+ })
31
+ }), suffix, `${showSeparator ? ':' : ''}`);
32
+ }
33
+ Label.defaultProps = {
34
+ label: null,
35
+ suffix: null,
36
+ showSeparator: true,
37
+ labelParams: {}
38
+ };
39
+ export default Label;
@@ -1 +1,17 @@
1
- import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;var label=css({flexGrow:1,paddingRight:variables.gap.small,order:3}).toString();var labelWithSuffix=css({paddingRight:variables.gap.small});export default{label:label,labelWithSuffix:labelWithSuffix};
1
+ import { css } from 'glamor';
2
+ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
3
+ const {
4
+ variables
5
+ } = themeConfig;
6
+ const label = css({
7
+ flexGrow: 1,
8
+ paddingRight: variables.gap.small,
9
+ order: 3
10
+ }).toString();
11
+ const labelWithSuffix = css({
12
+ paddingRight: variables.gap.small
13
+ });
14
+ export default {
15
+ label,
16
+ labelWithSuffix
17
+ };
@@ -1,4 +1,18 @@
1
- import React from'react';import PropTypes from'prop-types';/**
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+
4
+ /**
2
5
  * @param {props} The component props
3
6
  * @returns {JSX}
4
- */var Spacer=function Spacer(_ref){var children=_ref.children,className=_ref.className;return React.createElement("div",{className:className},children);};Spacer.defaultProps={children:null,className:null};export default Spacer;
7
+ */
8
+ const Spacer = ({
9
+ children,
10
+ className
11
+ }) => /*#__PURE__*/React.createElement("div", {
12
+ className: className
13
+ }, children);
14
+ Spacer.defaultProps = {
15
+ children: null,
16
+ className: null
17
+ };
18
+ export default Spacer;
@@ -1,3 +1,40 @@
1
- function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import Label from"./components/Label";import Amount from"./components/Amount";import Hint from"./components/Hint";import Spacer from"./components/Spacer";import styles from"./style";/**
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import classNames from 'classnames';
4
+ import Label from "./components/Label";
5
+ import Amount from "./components/Amount";
6
+ import Hint from "./components/Hint";
7
+ import Spacer from "./components/Spacer";
8
+ import styles from "./style";
9
+
10
+ /**
2
11
  * @returns {JSX}
3
- */var CartTotalLine=function CartTotalLine(_ref){var children=_ref.children,type=_ref.type,isDisabled=_ref.isDisabled,className=_ref.className;if(!children){return null;}return React.createElement("div",{className:classNames(className,"ui-shared__cart-total-line ui-shared__cart-".concat(type,"-line"),styles.line,_defineProperty(_defineProperty({},styles.disabled,isDisabled),styles[type]||styles.base,true)),"data-test-id":"".concat(type,"CartTotal")},children);};CartTotalLine.defaultProps={children:null,className:null,isDisabled:false,type:null};CartTotalLine.Label=Label;CartTotalLine.Amount=Amount;CartTotalLine.Hint=Hint;CartTotalLine.Spacer=Spacer;export default CartTotalLine;
12
+ */
13
+ const CartTotalLine = ({
14
+ children,
15
+ type,
16
+ isDisabled,
17
+ className
18
+ }) => {
19
+ if (!children) {
20
+ return null;
21
+ }
22
+ return /*#__PURE__*/React.createElement("div", {
23
+ className: classNames(className, `ui-shared__cart-total-line ui-shared__cart-${type}-line`, styles.line, {
24
+ [styles.disabled]: isDisabled,
25
+ [styles[type] || styles.base]: true
26
+ }),
27
+ "data-test-id": `${type}CartTotal`
28
+ }, children);
29
+ };
30
+ CartTotalLine.defaultProps = {
31
+ children: null,
32
+ className: null,
33
+ isDisabled: false,
34
+ type: null
35
+ };
36
+ CartTotalLine.Label = Label;
37
+ CartTotalLine.Amount = Amount;
38
+ CartTotalLine.Hint = Hint;
39
+ CartTotalLine.Spacer = Spacer;
40
+ export default CartTotalLine;
@@ -1 +1,31 @@
1
- import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var disabled=css({color:"".concat(colors.shade4," !important")}).toString();var base=css({color:colors.shade9}).toString();var subTotal=css({color:"".concat(colors.dark)}).toString();var grandTotal=css({color:"".concat(colors.dark),fontSize:'1rem !important'}).toString();var line=css({display:'flex',justifyContent:'space-between',fontSize:'0.875rem',alignItems:'baseline'}).toString();export default{subTotal:subTotal,grandTotal:grandTotal,base:base,line:line,disabled:disabled};
1
+ import { css } from 'glamor';
2
+ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
3
+ const {
4
+ colors
5
+ } = themeConfig;
6
+ const disabled = css({
7
+ color: `${colors.shade4} !important`
8
+ }).toString();
9
+ const base = css({
10
+ color: colors.shade9
11
+ }).toString();
12
+ const subTotal = css({
13
+ color: `${colors.dark}`
14
+ }).toString();
15
+ const grandTotal = css({
16
+ color: `${colors.dark}`,
17
+ fontSize: '1rem !important'
18
+ }).toString();
19
+ const line = css({
20
+ display: 'flex',
21
+ justifyContent: 'space-between',
22
+ fontSize: '0.875rem',
23
+ alignItems: 'baseline'
24
+ }).toString();
25
+ export default {
26
+ subTotal,
27
+ grandTotal,
28
+ base,
29
+ line,
30
+ disabled
31
+ };
package/Checkbox/index.js CHANGED
@@ -1,8 +1,37 @@
1
- var _excluded=["checkedClassName","unCheckedClassName","className"];function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import BaseCheckbox from'@shopgate/pwa-common/components/Checkbox';import CheckedIcon from"../icons/CheckedIcon";import UncheckedIcon from"../icons/UncheckedIcon";import styles from"./style";/**
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import PropTypes from 'prop-types';
4
+ import classNames from 'classnames';
5
+ import BaseCheckbox from '@shopgate/pwa-common/components/Checkbox';
6
+ import CheckedIcon from "../icons/CheckedIcon";
7
+ import UncheckedIcon from "../icons/UncheckedIcon";
8
+ import styles from "./style";
9
+
10
+ /**
2
11
  * The checkbox template component.
3
12
  * @param {Object} props The component props
4
13
  * @param {string} props.className Class for the underlying Checkbox component
5
14
  * @param {string} props.checkedClassName Class for checked icon.
6
15
  * @param {string} props.unCheckedClassName Class for unchecked icon.
7
16
  * @returns {JSX.Element}
8
- */var Checkbox=function Checkbox(_ref){var checkedClassName=_ref.checkedClassName,unCheckedClassName=_ref.unCheckedClassName,className=_ref.className,props=_objectWithoutProperties(_ref,_excluded);return React.createElement(BaseCheckbox,_extends({},props,{className:"ui-shared__checkbox ".concat(className),checkedIcon:React.createElement(CheckedIcon,{className:classNames(styles.icon,checkedClassName,'checkedIcon')}),uncheckedIcon:React.createElement(UncheckedIcon,{className:classNames(styles.icon,unCheckedClassName,'uncheckedIcon')})}));};Checkbox.defaultProps={checkedClassName:styles.checkedIcon,className:'',unCheckedClassName:styles.uncheckedIcon};export default Checkbox;
17
+ */
18
+ const Checkbox = ({
19
+ checkedClassName,
20
+ unCheckedClassName,
21
+ className,
22
+ ...props
23
+ }) => /*#__PURE__*/React.createElement(BaseCheckbox, _extends({}, props, {
24
+ className: `ui-shared__checkbox ${className}`,
25
+ checkedIcon: /*#__PURE__*/React.createElement(CheckedIcon, {
26
+ className: classNames(styles.icon, checkedClassName, 'checkedIcon')
27
+ }),
28
+ uncheckedIcon: /*#__PURE__*/React.createElement(UncheckedIcon, {
29
+ className: classNames(styles.icon, unCheckedClassName, 'uncheckedIcon')
30
+ })
31
+ }));
32
+ Checkbox.defaultProps = {
33
+ checkedClassName: styles.checkedIcon,
34
+ className: '',
35
+ unCheckedClassName: styles.uncheckedIcon
36
+ };
37
+ export default Checkbox;
package/Checkbox/style.js CHANGED
@@ -1 +1,18 @@
1
- import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var icon=css({width:24,height:24,flexShrink:0}).toString();var checkedIcon=css({color:"var(--color-secondary, ".concat(themeConfig.colors.accent,")")}).toString();var uncheckedIcon=css({color:themeConfig.colors.shade6}).toString();export default{icon:icon,checkedIcon:checkedIcon,uncheckedIcon:uncheckedIcon};
1
+ import { css } from 'glamor';
2
+ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
3
+ const icon = css({
4
+ width: 24,
5
+ height: 24,
6
+ flexShrink: 0
7
+ }).toString();
8
+ const checkedIcon = css({
9
+ color: `var(--color-secondary, ${themeConfig.colors.accent})`
10
+ }).toString();
11
+ const uncheckedIcon = css({
12
+ color: themeConfig.colors.shade6
13
+ }).toString();
14
+ export default {
15
+ icon,
16
+ checkedIcon,
17
+ uncheckedIcon
18
+ };
package/Chip/index.js CHANGED
@@ -1,5 +1,64 @@
1
- import React,{useRef,useCallback,useEffect}from'react';import PropTypes from'prop-types';import Button from'@shopgate/pwa-common/components/Button';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import CrossIcon from"../icons/CrossIcon";import styles from"./style";/**
1
+ import React, { useRef, useCallback, useEffect } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import Button from '@shopgate/pwa-common/components/Button';
4
+ import ResponsiveContainer from '@shopgate/engage/components/ResponsiveContainer';
5
+ import CrossIcon from "../icons/CrossIcon";
6
+ import styles from "./style";
7
+
8
+ /**
2
9
  * The chip component.
3
10
  * @param {Object} props The component props.
4
11
  * @returns {JSX}
5
- */function Chip(props){var removable=props.removable,children=props.children,id=props.id,onClick=props.onClick,onRemove=props.onRemove,invert=props.invert,removeLabel=props.removeLabel,editLabel=props.editLabel;var ref=useRef(null);var handleRemove=useCallback(function(){onRemove(id);},[onRemove,id]);useEffect(function(){ref.current.removeAttribute('style');});return React.createElement("div",{ref:ref,className:"ui-shared__chip ".concat(styles.chip(removable,invert)),"data-test-id":id},removable&&React.createElement(Button,{className:styles.removeButton,onClick:handleRemove,testId:"removeFilter","aria-label":removeLabel},React.createElement(ResponsiveContainer,{breakpoint:"<=xs",appAlways:true},React.createElement(CrossIcon,{size:16})),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},React.createElement(CrossIcon,{size:18}))),React.createElement(Button,{className:styles.name,onClick:onClick,"aria-label":editLabel},children));}Chip.defaultProps={invert:false,onClick:function onClick(){},onRemove:function onRemove(){},removable:true,removeLabel:null,editLabel:null};export default Chip;
12
+ */
13
+ function Chip(props) {
14
+ const {
15
+ removable,
16
+ children,
17
+ id,
18
+ onClick,
19
+ onRemove,
20
+ invert,
21
+ removeLabel,
22
+ editLabel
23
+ } = props;
24
+ const ref = useRef(null);
25
+ const handleRemove = useCallback(() => {
26
+ onRemove(id);
27
+ }, [onRemove, id]);
28
+ useEffect(() => {
29
+ ref.current.removeAttribute('style');
30
+ });
31
+ return /*#__PURE__*/React.createElement("div", {
32
+ ref: ref,
33
+ className: `ui-shared__chip ${styles.chip(removable, invert)}`,
34
+ "data-test-id": id
35
+ }, removable && /*#__PURE__*/React.createElement(Button, {
36
+ className: styles.removeButton,
37
+ onClick: handleRemove,
38
+ testId: "removeFilter",
39
+ "aria-label": removeLabel
40
+ }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
41
+ breakpoint: "<=xs",
42
+ appAlways: true
43
+ }, /*#__PURE__*/React.createElement(CrossIcon, {
44
+ size: 16
45
+ })), /*#__PURE__*/React.createElement(ResponsiveContainer, {
46
+ breakpoint: ">xs",
47
+ webOnly: true
48
+ }, /*#__PURE__*/React.createElement(CrossIcon, {
49
+ size: 18
50
+ }))), /*#__PURE__*/React.createElement(Button, {
51
+ className: styles.name,
52
+ onClick: onClick,
53
+ "aria-label": editLabel
54
+ }, children));
55
+ }
56
+ Chip.defaultProps = {
57
+ invert: false,
58
+ onClick: () => {},
59
+ onRemove: () => {},
60
+ removable: true,
61
+ removeLabel: null,
62
+ editLabel: null
63
+ };
64
+ export default Chip;
package/Chip/spec.js CHANGED
@@ -1 +1,24 @@
1
- import React from'react';import{mount}from'enzyme';import Chip from'.';describe('<Chip />',function(){it('should render a tag',function(){var wrapper=mount(React.createElement(Chip,{id:"some-id"},"text"));expect(wrapper).toMatchSnapshot();expect(wrapper.find('button').length).toEqual(2);expect(wrapper.find('button').at(1).text()).toEqual('text');});});describe('<Chip />',function(){it('should render a without removable icon',function(){var wrapper=mount(React.createElement(Chip,{id:"some-id",removable:false},"text"));expect(wrapper).toMatchSnapshot();expect(wrapper.find('button').length).toEqual(1);expect(wrapper.find('button').at(0).text()).toEqual('text');});});
1
+ import React from 'react';
2
+ import { mount } from 'enzyme';
3
+ import Chip from '.';
4
+ describe('<Chip />', () => {
5
+ it('should render a tag', () => {
6
+ const wrapper = mount(/*#__PURE__*/React.createElement(Chip, {
7
+ id: "some-id"
8
+ }, "text"));
9
+ expect(wrapper).toMatchSnapshot();
10
+ expect(wrapper.find('button').length).toEqual(2);
11
+ expect(wrapper.find('button').at(1).text()).toEqual('text');
12
+ });
13
+ });
14
+ describe('<Chip />', () => {
15
+ it('should render a without removable icon', () => {
16
+ const wrapper = mount(/*#__PURE__*/React.createElement(Chip, {
17
+ id: "some-id",
18
+ removable: false
19
+ }, "text"));
20
+ expect(wrapper).toMatchSnapshot();
21
+ expect(wrapper.find('button').length).toEqual(1);
22
+ expect(wrapper.find('button').at(0).text()).toEqual('text');
23
+ });
24
+ });