@telus-uds/components-web 2.43.0 → 3.0.0

package/lib/Testimonial/Testimonial.js

@@ -1,19 +1,12 @@
-"use strict";
-
-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 _Image = _interopRequireDefault(require("../Image"));
-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 TestimonialContainer = /*#__PURE__*/_styledComponents.default.figure.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Icon, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import Image from '../Image';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const TestimonialContainer = /*#__PURE__*/styled.figure.withConfig({
   displayName: "Testimonial__TestimonialContainer",
   componentId: "components-web__sc-1az53gr-0"
 })(_ref => {
@@ -27,7 +20,7 @@ const TestimonialContainer = /*#__PURE__*/_styledComponents.default.figure.withC
     margin: 0
   };
 });
-const QuoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Testimonial__QuoteContainer",
   componentId: "components-web__sc-1az53gr-1"
 })(_ref2 => {
@@ -40,7 +33,7 @@ const QuoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     gap: quoteContainerGap
   };
 });
-const Divider = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const Divider = /*#__PURE__*/styled.div.withConfig({
   displayName: "Testimonial__Divider",
   componentId: "components-web__sc-1az53gr-2"
 })(_ref3 => {
@@ -54,20 +47,20 @@ const Divider = /*#__PURE__*/_styledComponents.default.div.withConfig({
     width: '100%'
   };
 });
-const BlockQuote = /*#__PURE__*/_styledComponents.default.blockquote.withConfig({
+const BlockQuote = /*#__PURE__*/styled.blockquote.withConfig({
   displayName: "Testimonial__BlockQuote",
   componentId: "components-web__sc-1az53gr-3"
 })({
   margin: 0
 });
-const AuthorInfoContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const AuthorInfoContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Testimonial__AuthorInfoContainer",
   componentId: "components-web__sc-1az53gr-4"
 })({
   display: 'flex',
   flexDirection: 'column'
 });
-const Figcaption = /*#__PURE__*/_styledComponents.default.figcaption.withConfig({
+const Figcaption = /*#__PURE__*/styled.figcaption.withConfig({
   displayName: "Testimonial__Figcaption",
   componentId: "components-web__sc-1az53gr-5"
 })(_ref4 => {
@@ -80,7 +73,7 @@ const Figcaption = /*#__PURE__*/_styledComponents.default.figcaption.withConfig(
     gap: figcaptionGap
   };
 });
-const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const Testimonial = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     showDivider,
     testimonial,
@@ -94,7 +87,7 @@ const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     variant = {},
     ...rest
   } = _ref5;
-  const viewport = (0, _componentsBase.useViewport)();
+  const viewport = useViewport();
   const {
     testimonialContainerGap,
     quoteContainerGap,
@@ -121,7 +114,7 @@ const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     additionalLineHeight,
     additionalFontName,
     additionalFontWeight
-  } = (0, _componentsBase.useThemeTokens)('Testimonial', tokens, variant, {
+  } = useThemeTokens('Testimonial', tokens, variant, {
     viewport
   });
   const getQuoteTestimonial = open => {
@@ -129,13 +122,13 @@ const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     if (copy === 'en') quote = open ? '\u201C' : '\u201D';else quote = open ? '\u00AB ' : ' \u00BB';
     return quote;
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TestimonialContainer, {
+  return /*#__PURE__*/_jsxs(TestimonialContainer, {
     testimonialContainerGap: testimonialContainerGap,
     ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(QuoteContainer, {
+    children: [/*#__PURE__*/_jsxs(QuoteContainer, {
       quoteContainerGap: quoteContainerGap,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+      children: [/*#__PURE__*/_jsx(Icon, {
         tokens: {
           color: iconColor
         },
@@ -143,13 +136,13 @@ const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
           size: 'micro'
         },
         icon: copy === 'en' ? icon : iconFr
-      }), showDivider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
+      }), showDivider && /*#__PURE__*/_jsx(Divider, {
         dividerBackgroundColor: dividerBackgroundColor,
         dividerBorder: dividerBorder,
         role: "separator"
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockQuote, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    }), /*#__PURE__*/_jsx(BlockQuote, {
+      children: /*#__PURE__*/_jsx(Typography, {
         variant: {
           size: testimonialStyle === 'large' ? 'large' : 'h3'
         },
@@ -162,16 +155,16 @@ const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
         },
         children: `${getQuoteTestimonial(true)}${testimonial}${getQuoteTestimonial()}`
       })
-    }), (image || title || additionalInfo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Figcaption, {
+    }), (image || title || additionalInfo) && /*#__PURE__*/_jsxs(Figcaption, {
       figcaptionGap: figcaptionGap,
-      children: [image && (typeof image === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+      children: [image && (typeof image === 'string' ? /*#__PURE__*/_jsx(Image, {
         rounded: "circle",
         src: image,
         alt: title,
         width: imageSize,
         height: imageSize
-      }) : image), (title || additionalInfo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AuthorInfoContainer, {
-        children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      }) : image), (title || additionalInfo) && /*#__PURE__*/_jsxs(AuthorInfoContainer, {
+        children: [title && /*#__PURE__*/_jsx(Typography, {
           variant: {
             size: 'small'
           },
@@ -183,7 +176,7 @@ const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
             fontWeight: authorFontWeight
           },
           children: title
-        }), additionalInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        }), additionalInfo && /*#__PURE__*/_jsx(Typography, {
           variant: {
             size: 'small'
           },
@@ -197,7 +190,7 @@ const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
           children: additionalInfo
         })]
       })]
-    }), showDivider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
+    }), showDivider && /*#__PURE__*/_jsx(Divider, {
       dividerBackgroundColor: dividerBackgroundColor,
       dividerBorder: dividerBorder,
       role: "separator"
@@ -207,35 +200,34 @@ const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
 Testimonial.displayName = 'Testimonial';
 Testimonial.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('Testimonial'),
+  tokens: getTokensPropType('Testimonial'),
   /**
    * Testimonial content
    */
-  testimonial: _propTypes.default.string.isRequired,
+  testimonial: PropTypes.string.isRequired,
   /**
    * Testimonial author or source
    */
-  title: _propTypes.default.string,
+  title: PropTypes.string,
   /**
    * Additional information on the author or source
    */
-  additionalInfo: _propTypes.default.string,
+  additionalInfo: PropTypes.string,
   /**
    * Testimonial style
    */
-  testimonialStyle: _propTypes.default.oneOf(['large', 'heading']),
+  testimonialStyle: PropTypes.oneOf(['large', 'heading']),
   /**
    * Whether to show or not dividers at the top and the bottom of the testimonial
   showDivider: PropTypes.bool,
   /**
    * The src attribute for the Image component or custom JSX content to render instead
    */
-  image: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * The src attribute for the `Image` component to be displayed on the testimonial
    * @deprecated please use the `image` prop instead
    */
-  imageSrc: _propTypes.default.string
+  imageSrc: PropTypes.string
 };
-var _default = Testimonial;
-exports.default = _default;
+export default Testimonial;

package/lib/Testimonial/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Testimonial = _interopRequireDefault(require("./Testimonial"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Testimonial.default;
-exports.default = _default;
+import Testimonial from './Testimonial';
+export default Testimonial;

package/lib/Toast/Toast.js

@@ -1,27 +1,18 @@
-"use strict";
-
-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 = _interopRequireWildcard(require("styled-components"));
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
 var _withLinkRouter$propT, _withLinkRouter$propT2;
-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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const transform = property => (from, to) => (0, _styledComponents.keyframes)(["from{", ":", ";}to{", ":", ";}"], property, from, property, to);
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter, Spacer, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import styled, { keyframes, css } from 'styled-components';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const transform = property => (from, to) => keyframes(["from{", ":", ";}to{", ":", ";}"], property, from, property, to);
 const slideDown = property => function (from, to) {
   let end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : to;
-  return (0, _styledComponents.keyframes)(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
+  return keyframes(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
 };
-const animation = props => (0, _styledComponents.css)(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter), transform('color')(props.animationFillColorBefore, props.animationFillColorAfter));
-const ToastContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter), transform('color')(props.animationFillColorBefore, props.animationFillColorAfter));
+const ToastContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Toast__ToastContainer",
   componentId: "components-web__sc-p78jdh-0"
 })(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-left:", "px;padding-right:", "px;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
@@ -45,7 +36,7 @@ const ToastContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref4;
   return containerGap;
 }, animation);
-const Toast = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const Toast = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     toast,
     copy,
@@ -56,7 +47,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     ...rest
   } = _ref5;
   // viewport hook added to work adjust the padding to different sizes
-  const viewport = (0, _componentsBase.useViewport)();
+  const viewport = useViewport();
   const {
     containerBackgroundColor,
     containerGap,
@@ -72,23 +63,23 @@ const Toast = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     animationColorAfter,
     chevronlinkFontWeight,
     ...extraTokens
-  } = (0, _componentsBase.useThemeTokens)('Toast', tokens, variant, {
+  } = useThemeTokens('Toast', tokens, variant, {
     viewport
   });
 
   // inherit ChevronLink tokens for animation colors
   const {
     color: chevronDefaultColor
-  } = (0, _componentsBase.useThemeTokens)('ChevronLink', {}, {});
+  } = useThemeTokens('ChevronLink', {}, {});
   const {
     color: chevronInverseColor
-  } = (0, _componentsBase.useThemeTokens)('ChevronLink', {}, {
+  } = useThemeTokens('ChevronLink', {}, {
     inverse: true
   });
   if (!toast) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToastContainer, {
+  return /*#__PURE__*/_jsxs(ToastContainer, {
     containerBackgroundColor: containerBackgroundColor,
     containerGap: containerGap,
     animationHeightBefore: animationHeightBefore,
@@ -106,24 +97,24 @@ const Toast = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     ref: ref,
     ...extraTokens,
     ...selectProps(rest),
-    children: [headline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    children: [headline && /*#__PURE__*/_jsx(Typography, {
       variant: {
         bold: true,
         inverse: true
       },
       children: headline
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+    }), /*#__PURE__*/_jsx(Spacer, {
       space: 2,
       direction: "row"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    }), /*#__PURE__*/_jsx(Typography, {
       variant: {
         inverse: true
       },
       children: copy
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+    }), /*#__PURE__*/_jsx(Spacer, {
       space: 2,
       direction: "row"
-    }), link && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ChevronLink, {
+    }), link && /*#__PURE__*/_jsx(ChevronLink, {
       variant: {
         inverse: true
       },
@@ -140,28 +131,27 @@ const Toast = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
 Toast.displayName = 'Toast';
 Toast.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('Toast'),
+  tokens: getTokensPropType('Toast'),
   /**
    * If true, the toast will be displayed
    */
-  toast: _propTypes.default.bool,
+  toast: PropTypes.bool,
   /**
    * The copy to display in the toast
    */
-  copy: _propTypes.default.string.isRequired,
+  copy: PropTypes.string.isRequired,
   /**
    * The headline to display in the toast (before copy)
    */
-  headline: _propTypes.default.string,
+  headline: PropTypes.string,
   /**
    * The link to display in the toast (after copy)
    */
-  link: _propTypes.default.shape({
-    href: _propTypes.default.string.isRequired,
-    text: _propTypes.default.string.isRequired,
-    LinkRouter: (_withLinkRouter$propT = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
-    linkRouterProps: (_withLinkRouter$propT2 = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps
+  link: PropTypes.shape({
+    href: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+    LinkRouter: (_withLinkRouter$propT = withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
+    linkRouterProps: (_withLinkRouter$propT2 = withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps
   })
 };
-var _default = Toast;
-exports.default = _default;
+export default Toast;

package/lib/Toast/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Toast = _interopRequireDefault(require("./Toast"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Toast.default;
-exports.default = _default;
+import Toast from './Toast';
+export default Toast;