@telus-uds/components-web 2.21.2 → 2.22.0

package/lib/PriceLockup/PriceLockup.js

@@ -4,32 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _FootnoteLink = _interopRequireDefault(require("../Footnote/FootnoteLink"));
-
 var _tokens = _interopRequireDefault(require("./tokens"));
-
 var _utils = require("../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-
 const PriceLockupContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__PriceLockupContainer",
   componentId: "components-web__sc-1x6duay-0"
 })(["display:flex;flex-direction:column;width:fit-content;"]);
-
 const PriceContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__PriceContainer",
   componentId: "components-web__sc-1x6duay-1"
@@ -39,7 +27,6 @@ const PriceContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref;
   return priceMarginBottom;
 });
-
 const FootnoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__FootnoteContainer",
   componentId: "components-web__sc-1x6duay-2"
@@ -54,7 +41,6 @@ const FootnoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   } = _ref3;
   return footnoteGap;
 });
-
 const BottomTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__BottomTextContainer",
   componentId: "components-web__sc-1x6duay-3"
@@ -64,7 +50,6 @@ const BottomTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfi
   } = _ref4;
   return bottomTextMarginTop;
 });
-
 const BottomLinksContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__BottomLinksContainer",
   componentId: "components-web__sc-1x6duay-4"
@@ -74,7 +59,6 @@ const BottomLinksContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   } = _ref5;
   return bottomLinksMarginLeft;
 });
-
 const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__TopTextContainer",
   componentId: "components-web__sc-1x6duay-5"
@@ -84,39 +68,54 @@ const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref6;
   return topTextMarginBottom;
 });
-
+const PriceTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__PriceTextContainer",
+  componentId: "components-web__sc-1x6duay-6"
+})(["display:flex;flex-direction:", ";"], _ref7 => {
+  let {
+    ratePosition
+  } = _ref7;
+  return ratePosition === 'bottom' ? 'column' : 'row';
+});
+const RateContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__RateContainer",
+  componentId: "components-web__sc-1x6duay-7"
+})(["display:flex;"]);
 const RateTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__RateTextContainer",
-  componentId: "components-web__sc-1x6duay-6"
-})(["align-self:flex-end;"]);
-
+  componentId: "components-web__sc-1x6duay-8"
+})(["align-self:", ";"], _ref8 => {
+  let {
+    ratePosition
+  } = _ref8;
+  return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
+});
 const StrikeThroughContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__StrikeThroughContainer",
-  componentId: "components-web__sc-1x6duay-7"
-})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref7 => {
+  componentId: "components-web__sc-1x6duay-9"
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref9 => {
   let {
     strikeThroughPosition
-  } = _ref7;
+  } = _ref9;
   return `${strikeThroughPosition}px`;
-}, _ref8 => {
+}, _ref10 => {
   let {
     strikeThroughHeight
-  } = _ref8;
+  } = _ref10;
   return `${strikeThroughHeight}px`;
-}, _ref9 => {
+}, _ref11 => {
   let {
     strikeThroughColor
-  } = _ref9;
+  } = _ref11;
   return strikeThroughColor;
 });
-
-const selectFootnoteLinkStyles = _ref10 => {
+const selectFootnoteLinkStyles = _ref12 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight,
     footnoteLinkLineHeight
-  } = _ref10;
+  } = _ref12;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -124,21 +123,19 @@ const selectFootnoteLinkStyles = _ref10 => {
     lineHeight: footnoteLinkLineHeight
   };
 };
-
-const selectStrikeThroughTokens = _ref11 => {
+const selectStrikeThroughTokens = _ref13 => {
   let {
     strikeThroughPosition,
     strikeThroughHeight,
     strikeThroughColor
-  } = _ref11;
+  } = _ref13;
   return {
     strikeThroughHeight,
     strikeThroughPosition,
     strikeThroughColor
   };
 };
-
-const PriceLockup = _ref12 => {
+const PriceLockup = _ref14 => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -147,6 +144,7 @@ const PriceLockup = _ref12 => {
     price,
     currencySymbol = '$',
     rateText,
+    ratePosition = 'right',
     bottomText,
     onClickFootnote,
     strikeThrough,
@@ -154,7 +152,7 @@ const PriceLockup = _ref12 => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref12;
+  } = _ref14;
   const viewport = (0, _componentsBase.useViewport)();
   const {
     footnoteMarginTop,
@@ -167,7 +165,8 @@ const PriceLockup = _ref12 => {
     dividerColor,
     footnoteLinkFontSize,
     ...themeTokens
-  } = (0, _componentsBase.useThemeTokens)('PriceLockup', priceLockupTokens, { ...variant,
+  } = (0, _componentsBase.useThemeTokens)('PriceLockup', priceLockupTokens, {
+    ...variant,
     size
   }, {
     viewport,
@@ -177,59 +176,72 @@ const PriceLockup = _ref12 => {
   const priceString = String(price);
   const lastDotPosition = priceString.lastIndexOf('.');
   const lastCommaPosition = priceString.lastIndexOf(',');
-  const [separator, separatorPosition] = lastDotPosition > lastCommaPosition ? ['.', lastDotPosition] : [',', lastCommaPosition]; // If the separator is at the fourth character from the end of the string or more, it's most probably
-  // a part of the amount, and the cents are not included in the price string
+  const [separator, separatorPosition] = lastDotPosition > lastCommaPosition ? ['.', lastDotPosition] : [',', lastCommaPosition];
 
+  // If the separator is at the fourth character from the end of the string or more, it's most probably
+  // a part of the amount, and the cents are not included in the price string
   const hasCents = separatorPosition !== -1 && separatorPosition >= priceString.length - 3;
   const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString;
   const cents = hasCents ? priceString.substring(separatorPosition + 1) : null;
-
-  const renderTypography = (value, tokens) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-    tokens: { ...tokens,
-      color: fontColor
-    },
-    children: value
-  });
-
+  const renderTypography = (value, tokens, position) => {
+    const customProps = position === 'bottom' ? {
+      variant: {
+        size: 'micro'
+      },
+      tokens: {
+        color: fontColor
+      }
+    } : {
+      tokens: {
+        ...tokens,
+        color: fontColor
+      }
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      ...customProps,
+      children: value
+    });
+  };
   const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign);
-
   const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.default, {
     fontSize: footnoteLinkFontSize,
     tokens: selectFootnoteLinkStyles(themeTokens),
     number: footnoteLinks,
     onClick: onClickFootnote
   }) : null;
-
   const renderAmount = () => {
     const amountComponent = renderTypography(amount, typographyTokens.amount);
-
     if (strikeThrough) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.A11yText, {
           text: a11yText
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StrikeThroughContainer, { ...selectStrikeThroughTokens(themeTokens),
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StrikeThroughContainer, {
+          ...selectStrikeThroughTokens(themeTokens),
           children: amountComponent
         })]
       });
     }
-
     return amountComponent;
   };
-
   const renderPrice = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceContainer, {
       priceMarginBottom: `${priceMarginBottom}px`,
-      children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, typographyTokens.cents), signDirection === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: ["\xA0", renderCurrencySymbol()]
-      }), rateText && /*#__PURE__*/(0, _jsxRuntime.jsx)(RateTextContainer, {
-        children: renderTypography(rateText, typographyTokens.rate)
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceTextContainer, {
+        ratePosition: ratePosition,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(RateContainer, {
+          children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, typographyTokens.cents), signDirection === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: ["\xA0", renderCurrencySymbol()]
+          })]
+        }), rateText && /*#__PURE__*/(0, _jsxRuntime.jsx)(RateTextContainer, {
+          ratePosition: ratePosition,
+          children: renderTypography(rateText, typographyTokens.rate, ratePosition)
+        })]
       }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomLinksContainer, {
         bottomLinksMarginLeft: `${bottomLinksMarginLeft}px`,
         children: renderFootnoteLinks()
       })]
     }), !bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()]
   });
-
   const renderFootnoteContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(FootnoteContainer, {
       footnoteMarginTop: `${footnoteMarginTop}px`,
@@ -240,12 +252,11 @@ const PriceLockup = _ref12 => {
       }), footnoteLinks.length <= 3 && renderFootnoteLinks()]
     }), footnoteLinks.length > 3 && renderFootnoteLinks()]
   });
-
   if (strikeThrough && !a11yText) {
     (0, _utils.warn)('PriceLockup', 'a11yText must be provided with strikethrough pricing');
   }
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceLockupContainer, { ...selectProps(rest),
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceLockupContainer, {
+    ...selectProps(rest),
     children: [topText && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,
       children: renderTypography(topText, typographyTokens.topText)
@@ -258,68 +269,60 @@ const PriceLockup = _ref12 => {
     }), bottomText && renderFootnoteContent()]
   });
 };
-
-PriceLockup.propTypes = { ...selectedSystemPropTypes,
-
+PriceLockup.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Size of the component
    *
    * Small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
    */
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
   /**
    * If currency symbol other than `$` to be used
    */
   currencySymbol: _propTypes.default.string,
-
   /**
    * Shows additional info above the price
    */
   topText: _propTypes.default.string,
-
   /**
    * Monetary value (including decimals separated by ".")
    */
   price: _propTypes.default.string.isRequired,
-
   /**
    * Shows month/year unit
    */
   rateText: _propTypes.default.string,
-
   /**
    * Shows additional info below the price with a `Divider`
    */
   bottomText: _propTypes.default.string,
-
   /**
    * Displays which side the currency should apperar (left, right)
    */
   signDirection: _propTypes.default.oneOf(['right', 'left']),
-
+  /**
+   * Displays where the rate should apperar (bottom, right)
+   */
+  ratePosition: _propTypes.default.oneOf(['right', 'bottom']),
   /**
    * Shows additional link for context
    */
   footnoteLinks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
-
   /**
    * Function to be called when a footnote link is clicked
    */
   onClickFootnote: _propTypes.default.func,
-
   /**
    * To show price savings comparison
    */
   strikeThrough: _propTypes.default.bool,
-
   /**
    * To provide a11y text for `PriceLockup` component
    *
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
   a11yText: _propTypes.default.string,
-
   /**
    * `PriceLockup` tokens
    */

package/lib/PriceLockup/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _PriceLockup.default;
 exports.default = _default;

package/lib/PriceLockup/tokens.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 // map typography tokens accordenly
 var _default = _ref => {
   let {
@@ -60,5 +59,4 @@ var _default = _ref => {
     }
   };
 };
-
 exports.default = _default;

package/lib/Progress/ProgressBar.js

@@ -4,25 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // Passes React Native-oriented system props through UDS Progress
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
 const {
   Bar: ProgressBarBase
 } = _componentsBase.Progress;
-
 const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
   'data-testid': 'ProgressBar-Gradient'
 }).withConfig({
@@ -46,6 +38,7 @@ const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
     background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`
   };
 });
+
 /**
  * The `ProgressBar` is a visual representation of linear progression.
  * It provides simple but important information at a quick glance.
@@ -57,8 +50,6 @@ const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
  * `gradient` is being used here to provide gradient filling.
  *
  */
-
-
 const ProgressBar = _ref2 => {
   let {
     percentage,
@@ -73,24 +64,22 @@ const ProgressBar = _ref2 => {
     tokens: tokens,
     variant: variant,
     ...selectedProps,
-    children: themeTokens.gradient && /*#__PURE__*/(0, _jsxRuntime.jsx)(Gradient, { ...themeTokens,
+    children: themeTokens.gradient && /*#__PURE__*/(0, _jsxRuntime.jsx)(Gradient, {
+      ...themeTokens,
       percentage: percentage
     })
   });
 };
-
-ProgressBar.propTypes = { ...selectedSystemPropTypes,
-
+ProgressBar.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Percentage of completion.
    */
   percentage: _propTypes.default.number,
-
   /**
    * ProgressBar tokens.
    */
   tokens: (0, _componentsBase.getTokensPropType)('ProgressBar'),
-
   /**
    * ProgressBar variant.
    */

package/lib/Progress/index.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 _componentsBase.Progress.Bar = _ProgressBar.default;
 var _default = _componentsBase.Progress;
 exports.default = _default;

package/lib/QuantitySelector/QuantitySelector.js

@@ -4,35 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _styles = require("./styles");
-
 var _dictionary = _interopRequireDefault(require("./dictionary"));
-
 var _SideButton = _interopRequireDefault(require("./SideButton"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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 {
   isNaN
 } = Number;
-
 const isNumber = value => {
   return typeof value === 'number' && !isNaN(value);
 };
-
 const QuantitySelector = _ref => {
   let {
     id,
@@ -60,14 +47,12 @@ const QuantitySelector = _ref => {
     dictionary,
     copy
   });
-
   const getValidatedNumber = numberToEvaluate => {
     if (isNaN(numberToEvaluate)) return null;
     if (isNumber(minNumber) && numberToEvaluate < minNumber) throw getCopy('errors').numberIsTooSmall(minNumber);
     if (isNumber(maxNumber) && numberToEvaluate > maxNumber) throw getCopy('errors').numberIsTooBig(maxNumber);
     return numberToEvaluate;
   };
-
   const {
     currentValue: number,
     setValue: setNumber
@@ -79,7 +64,6 @@ const QuantitySelector = _ref => {
   const isDecreaseEnabled = !disabled && !isNumber(minNumber) || number > minNumber;
   const isIncreaseEnabled = !disabled && !isNumber(maxNumber) || number < maxNumber;
   const inputValue = isNumber(number) ? number.toString() : '';
-
   const updateNumber = (newNumber, originalInputEvent) => {
     try {
       const validatedNumber = getValidatedNumber(newNumber);
@@ -89,18 +73,15 @@ const QuantitySelector = _ref => {
       setError(e);
     }
   };
-
   const inputChangeHandler = (textInputValue, event) => {
     if (textInputValue === '') setNumber(null);
     const numberFromTextInput = Number(textInputValue);
-
     if (isNumber(numberFromTextInput)) {
       updateNumber(numberFromTextInput, event);
     } else {
       setError(getCopy('errors').invalidCharacters);
     }
   };
-
   const renderLabel = () => label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.InputLabel, {
     forId: id,
     label: label,
@@ -108,9 +89,7 @@ const QuantitySelector = _ref => {
     hintPosition: hintPosition,
     tooltip: tooltip
   }) : null;
-
   const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelector', tokens, variant);
-
   const renderTextInput = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
     nativeID: id,
     value: inputValue,
@@ -123,9 +102,11 @@ const QuantitySelector = _ref => {
         textColor,
         inputBackgroundColor,
         ...rest
-      } = getTokens({ ...textInputState
+      } = getTokens({
+        ...textInputState
       });
-      return { ...rest,
+      return {
+        ...rest,
         order: 1,
         borderWidth: inputBorderWidth,
         backgroundColor: inputBackgroundColor,
@@ -136,7 +117,8 @@ const QuantitySelector = _ref => {
         outerBorderWidth: 0
       };
     },
-    onChange: inputChangeHandler // Using title as an accessibility workaround
+    onChange: inputChangeHandler
+    // Using title as an accessibility workaround
     // given that accessibilityLabel is not available
     ,
     keyboardType: "numeric",
@@ -146,11 +128,9 @@ const QuantitySelector = _ref => {
     accessibilityValueMin: minNumber,
     accessibilityValueNow: number
   });
-
   const flexOrder = order => ({
     order
   });
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
     space: 2,
     testID: testID,
@@ -196,9 +176,9 @@ const QuantitySelector = _ref => {
       })
     }) : null]
   });
-}; // If a language dictionary entry is provided, it must contain every key
-
+};
 
+// If a language dictionary entry is provided, it must contain every key
 const dictionaryContentShape = _propTypes.default.shape({
   accessibility: _propTypes.default.shape({
     a11yLabel: _propTypes.default.string.isRequired,
@@ -211,64 +191,52 @@ const dictionaryContentShape = _propTypes.default.shape({
     invalidCharacters: _propTypes.default.string.isRequired
   }).isRequired
 });
-
 QuantitySelector.propTypes = {
   /**
    * The id of the input field
    */
   id: _propTypes.default.string,
-
   /**
    * The minimum number allowed
    */
   minNumber: _propTypes.default.number,
-
   /**
    * The maximum number allowed
    */
   maxNumber: _propTypes.default.number,
-
   /**
    * The callback function that is called when the value of the input field changes
    */
   onChange: _propTypes.default.func,
-
   /**
    * The default value of the input field
    */
   defaultValue: _propTypes.default.number,
-
   /**
    * If the input's state is to be controlled by a parent component, use this prop
    * together with the `onChange` to pass down and update the lifted state.
    */
   value: _propTypes.default.number,
-
   /**
    * The label of the input field
    */
   label: _propTypes.default.string,
-
   /**
    * The hint of the input field
    */
   hint: _propTypes.default.string,
-
   /**
    * The position of the hint. Could be shown along side the label or below it
    */
   hintPosition: _propTypes.default.oneOf(['inline', 'below']),
-
   /**
    * Adds a question mark which will display a tooltip when clicked
    */
   tooltip: _propTypes.default.string,
-
   /**
    * The accessibility label of the input field
    */
   accessibilityLabel: _propTypes.default.string,
-
   /**
    * The dictionary object containing the content for the input field
    */
@@ -276,7 +244,6 @@ QuantitySelector.propTypes = {
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
-
   /**
    * The language to use for the copy.
    */
@@ -286,7 +253,6 @@ QuantitySelector.propTypes = {
     disabled: _propTypes.default.bool
   }),
   tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
-
   /**
    * Sets `data-testid` attribute on the input field for testing purposes.
    */