@telus-uds/components-web 2.21.2 → 2.22.0

package/lib/QuantitySelector/SideButton.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const SideButton = _ref => {
   let {
     isEnabled,
@@ -26,7 +20,6 @@ const SideButton = _ref => {
     variant
   } = _ref;
   const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelectorSideButton', tokens, variant);
-
   const getButtonTokens = _ref2 => {
     let {
       buttonState,
@@ -39,10 +32,12 @@ const SideButton = _ref => {
       borderBottomLeftRadius,
       borderBottomRightRadius,
       ...rest
-    } = getTokens({ ...buttonState,
+    } = getTokens({
+      ...buttonState,
       disabled
     });
-    return { ...rest,
+    return {
+      ...rest,
       borderRadius,
       borderTopLeftRadius,
       borderTopRightRadius,
@@ -57,7 +52,6 @@ const SideButton = _ref => {
       outerBorderWidth: 0
     };
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
     tokens: buttonState => getButtonTokens({
       disabled: !isEnabled,
@@ -69,7 +63,6 @@ const SideButton = _ref => {
     accessibilityDisabled: accessibilityDisabled
   });
 };
-
 SideButton.displayName = 'QuantitySelectorSideButton';
 SideButton.defaultProps = {
   isEnabled: true,

package/lib/QuantitySelector/index.js

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

package/lib/QuantitySelector/styles.js

@@ -4,21 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InputWrapper = exports.InputField = void 0;
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const InputField = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "styles__InputField",
   componentId: "components-web__sc-1lrz1xk-0"
 })(["order:1;text-align:center;z-index:10;input{text-align:center;}"]);
-
 exports.InputField = InputField;
-
 const InputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "styles__InputWrapper",
   componentId: "components-web__sc-1lrz1xk-1"
 })(["text-align:start;display:flex;flex-direction:row;flex-wrap:nowrap;"]);
-
 exports.InputWrapper = InputWrapper;

package/lib/ResponsiveImage/ResponsiveImage.js

@@ -4,21 +4,13 @@ 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 _systemConstants = require("@telus-uds/system-constants");
-
 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 staticStyles = {
   image: {
@@ -26,10 +18,10 @@ const staticStyles = {
     width: '100%'
   }
 };
+
 /**
  * Provide different image sources for different screen sizes.
  */
-
 const ResponsiveImage = _ref => {
   let {
     xsSrc,
@@ -42,7 +34,8 @@ const ResponsiveImage = _ref => {
     loading = 'eager',
     ...rest
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("picture", { ...selectProps(rest),
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("picture", {
+    ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
       srcSet: xlSrc,
       media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.xl)}px)`
@@ -66,44 +59,36 @@ const ResponsiveImage = _ref => {
     })]
   });
 };
-
-ResponsiveImage.propTypes = { ...selectedSystemPropTypes,
-
+ResponsiveImage.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The src attribute used for screen widths up to 575px
    */
   xsSrc: _propTypes.default.string.isRequired,
-
   /**
    * The src attribute used for screen widths greater than 576px
    */
   smSrc: _propTypes.default.string.isRequired,
-
   /**
    * The src attribute used for screen widths greater than 768px
    */
   mdSrc: _propTypes.default.string,
-
   /**
    * The src attribute used for screen widths greater than 992px
    */
   lgSrc: _propTypes.default.string,
-
   /**
    * The src attribute used for screen widths greater than 1200px
    */
   xlSrc: _propTypes.default.string,
-
   /**
    * The src attribute used for browsers that don't support responsive images (InternetExplorer)
    */
   fallbackSrc: _propTypes.default.string.isRequired,
-
   /**
    * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
    */
   alt: _propTypes.default.string.isRequired,
-
   /**
    * Loading strategy.
    * @default 'eager'

package/lib/ResponsiveImage/index.js

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

package/lib/Ribbon/Ribbon.js

@@ -4,23 +4,14 @@ 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 _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 RibbonWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Ribbon__RibbonWrapper",
   componentId: "components-web__sc-186270k-0"
@@ -41,7 +32,6 @@ const RibbonWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref3;
   return top && `${top}px`;
 });
-
 const RibbonContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Ribbon__RibbonContainer",
   componentId: "components-web__sc-186270k-1"
@@ -77,7 +67,6 @@ const RibbonContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref9;
   return borderRadiusBottomRight;
 });
-
 const RibbonCurve = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Ribbon__RibbonCurve",
   componentId: "components-web__sc-186270k-2"
@@ -122,7 +111,6 @@ const RibbonCurve = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref17;
   return curveAfterWidth;
 });
-
 const Ribbon = _ref18 => {
   let {
     children,
@@ -161,11 +149,11 @@ const Ribbon = _ref18 => {
     fontWeight,
     fontSize,
     lineHeight
-  } = (0, _componentsBase.useThemeTokens)('Ribbon', tokens, { ...variant,
+  } = (0, _componentsBase.useThemeTokens)('Ribbon', tokens, {
+    ...variant,
     wrap: shouldWrap
   });
   let background = backgroundColor;
-
   if (gradient) {
     const {
       type: gradientType,
@@ -175,7 +163,6 @@ const Ribbon = _ref18 => {
     const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`;
     background = gradientBackground;
   }
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RibbonWrapper, {
     left: left,
     top: top,
@@ -217,19 +204,16 @@ const Ribbon = _ref18 => {
     })]
   });
 };
-
-Ribbon.propTypes = { ...selectedSystemPropTypes,
+Ribbon.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.getTokensPropType)('Ribbon'),
   children: _propTypes.default.node,
-
   /** show/hide the ribbon fold
    * @deprecated please don't rely on `wrap` to turn off the wrapping (use `Badge` instead) as it will be removed in the future
    */
   wrap: _propTypes.default.bool,
-
   /** sets the left offset (triggers absolute positioning) */
   left: _propTypes.default.number,
-
   /** sets the top offset (triggers absolute positioning) */
   top: _propTypes.default.number
 };

package/lib/Ribbon/index.js

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

package/lib/SkeletonProvider/SkeletonImage.js

@@ -4,19 +4,12 @@ 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 _jsxRuntime = require("react/jsx-runtime");
-
 var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const SkeletonImage = _ref => {
   let {
     rounded,
@@ -28,11 +21,9 @@ const SkeletonImage = _ref => {
     show,
     children
   } = _ref;
-
   if (!show) {
     return children;
   }
-
   const shape = rounded !== 'circle' ? 'box' : rounded;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Skeleton, {
     size: size,
@@ -41,7 +32,6 @@ const SkeletonImage = _ref => {
     shape: shape
   });
 };
-
 SkeletonImage.propTypes = {
   imgHeight: _propTypes.default.number,
   rounded: _propTypes.default.oneOf(['circle', 'corners']),

package/lib/SkeletonProvider/SkeletonProvider.js

@@ -4,44 +4,29 @@ 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 _Image = _interopRequireDefault(require("../Image"));
-
 var _SkeletonTypography = _interopRequireDefault(require("./SkeletonTypography"));
-
 var _SkeletonImage = _interopRequireDefault(require("./SkeletonImage"));
-
 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 SkeletonProvider = _ref => {
   let {
     children,
     show
   } = _ref;
-
   if (!show) {
     return children;
   }
-
   const mapChild = child => {
     if (!child) {
       return null;
     }
-
     let childElement = child;
-
     if (childElement.props && 'children' in childElement.props) {
       const {
         children: elementChildren
@@ -51,31 +36,28 @@ const SkeletonProvider = _ref => {
         children: mappedChildren
       });
     }
-
     if (childElement.type === _componentsBase.Typography) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonTypography.default, { ...childElement.props.skeleton,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonTypography.default, {
+        ...childElement.props.skeleton,
         show: show,
         children: childElement
       });
     }
-
     if (childElement.type === _Image.default) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonImage.default, { ...childElement.props.skeleton,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonImage.default, {
+        ...childElement.props.skeleton,
         imgHeight: childElement.props.height,
         rounded: childElement.props.rounded,
         show: show,
         children: childElement
       });
     }
-
     return childElement;
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: _react.Children.map(children, mapChild)
   });
 };
-
 SkeletonProvider.propTypes = {
   show: _propTypes.default.bool.isRequired,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]).isRequired

package/lib/SkeletonProvider/SkeletonTypography.js

@@ -4,19 +4,12 @@ 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 _jsxRuntime = require("react/jsx-runtime");
-
 var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3, _Skeleton$propTypes4, _Skeleton$propTypes5;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const SkeletonTypography = _ref => {
   let {
     show,
@@ -27,11 +20,9 @@ const SkeletonTypography = _ref => {
     lines,
     children
   } = _ref;
-
   if (!show) {
     return children;
   }
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Skeleton, {
     size: size,
     sizeIndex: sizeIndex,
@@ -40,7 +31,6 @@ const SkeletonTypography = _ref => {
     lines: lines
   });
 };
-
 SkeletonTypography.propTypes = {
   show: _propTypes.default.bool.isRequired,
   children: _propTypes.default.node,

package/lib/SkeletonProvider/index.js

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

package/lib/Span/Span.js

@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 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 StyledSpan = /*#__PURE__*/_styledComponents.default.span.withConfig({
   displayName: "Span__StyledSpan",
   componentId: "components-web__sc-o7sihn-0"
@@ -30,14 +21,13 @@ const StyledSpan = /*#__PURE__*/_styledComponents.default.span.withConfig({
   } = _ref;
   return flex ? 'display: inline-flex' : '';
 });
+
 /**
  * Text as an HTML ```<span>``` element.
  *
  * Span may be used in cases where an inline span or direct access to HTML attributes is required.
  * In most cases, `Typography` should be used for text, or Paragraph for body text.
  */
-
-
 const Span = _ref2 => {
   let {
     children,
@@ -56,26 +46,22 @@ const Span = _ref2 => {
     children: children
   });
 };
-
-Span.propTypes = { ...selectedSystemPropTypes,
+Span.propTypes = {
+  ...selectedSystemPropTypes,
   children: _propTypes.default.node.isRequired,
-
   /**
    * Adds `data-testid` attribute for testing
    */
   testID: _propTypes.default.string,
-
   /**
    * Sets display to inline-flex so that children are laid out using the flex model.
    * Use this if the span contains children that expect to be inside a flex container.
    */
   flex: _propTypes.default.bool,
-
   /**
    * Span takes the same tokens overrides as Typography
    */
   tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
-
   /**
    * Span can take any of Typography's theme variants
    */

package/lib/Span/index.js

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