@telus-uds/components-web 3.4.0 → 4.1.0

package/.eslintrc.cjs

@@ -18,7 +18,13 @@ base.settings = {
     },
     exports: true,
     alias: {
-      map: [['@telus-uds/components-base/server', '../components-base/lib/server.js']]
+      map: [
+        [
+          '@telus-uds/components-base/server',
+          '../components-base/lib/cjs/server.js',
+          '../components-base/lib/esm/server.js'
+        ]
+      ]
     }
   }
 }

package/CHANGELOG.md

@@ -1,12 +1,48 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 22 Jan 2025 21:06:14 GMT and should not be manually modified.
+This log was last generated on Mon, 10 Feb 2025 17:30:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.1.0
+
+Mon, 10 Feb 2025 17:30:58 GMT
+
+### Minor changes
+
+- `PriceLockup`: aria-label added for all the group of elements (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v3.1.0
+- Bump @telus-uds/system-theme-tokens to v4.1.0
+
+### Patches
+
+- QuantitySelector: update snapshot tests (guillermo.peitzner@telus.com)
+- `Table`: new tokens added at row and cell level to achieve new designs (35577399+JoshHC@users.noreply.github.com)
+- `Listbox`: Include export type members for components-web (jaime.tuyuc@telus.com)
+
+## 4.0.0
+
+Fri, 31 Jan 2025 20:53:28 GMT
+
+### Major changes
+
+- Add CommonJS builds along with ESM (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v3.0.0
+- Bump @telus-uds/system-constants to v3.0.0
+- Bump @telus-uds/system-theme-tokens to v4.0.0
+
+### Minor changes
+
+- `Countdown`: units prop added (guillermo.peitzner@telus.com)
+- `Table`: add row background color on hover (guillermo.peitzner@telus.com)
+
+### Patches
+
+- `TextArea`: minLines token issue when value size changes fixed (35577399+JoshHC@users.noreply.github.com)
+
 ## 3.4.0
 
-Wed, 22 Jan 2025 21:06:14 GMT
+Wed, 22 Jan 2025 21:08:36 GMT
 
 ### Minor changes
 

package/jest.config.cjs

@@ -13,7 +13,7 @@ module.exports = {
     // mock icon imports as in https://jestjs.io/docs/webpack#mocking-css-modules
     '\\.icon.svg': '<rootDir>/__mocks__/iconMock.jsx',
     '\\.css': '<rootDir>/__mocks__/styleMock.js',
-    '^@telus-uds/components-base/server$': '<rootDir>/../components-base/lib/server.js'
+    '^@telus-uds/components-base/server$': '<rootDir>/../components-base/lib/cjs/server.js'
   },
   testMatch: [`<rootDir>/__tests__/**/*.test.js?(x)`],
   transformIgnorePatterns: [

package/lib/cjs/Badge/Badge.js

@@ -0,0 +1,128 @@
+"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 = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const BadgeContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Badge__BadgeContainer",
+  componentId: "components-web__sc-tsiuo2-0"
+})(["background:", ";border:", ";display:inline-flex;justify-content:center;align-items:center;height:fit-content;padding:", ";border-radius:", ";width:fit-content;", ""], _ref => {
+  let {
+    background
+  } = _ref;
+  return background;
+}, _ref2 => {
+  let {
+    border
+  } = _ref2;
+  return border;
+}, _ref3 => {
+  let {
+    padding
+  } = _ref3;
+  return padding;
+}, _ref4 => {
+  let {
+    radius
+  } = _ref4;
+  return radius;
+}, _ref5 => {
+  let {
+    isOutlineOffer,
+    isAlternative,
+    gradient
+  } = _ref5;
+  return (isOutlineOffer || isAlternative) && `
+    > div {
+      background: ${gradient};
+	    -webkit-background-clip: text;
+	    ${gradient && '-webkit-text-fill-color: transparent;'}
+    }`;
+});
+const fontSizeMapping = {
+  12: 'micro',
+  14: 'small',
+  16: 'h6'
+};
+const Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+  let {
+    children,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref6;
+  const {
+    backgroundColor,
+    gradient,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    color,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    fontName,
+    fontWeight,
+    fontSize
+  } = (0, _componentsBase.useThemeTokens)('Badge', tokens, variant);
+  const semanticGradient = gradient && (0, _utils.transformGradient)(gradient);
+  const {
+    outline,
+    purpose,
+    alternative
+  } = variant;
+  let background = backgroundColor;
+  const isOutlineOffer = purpose === 'offer' && outline;
+  if ((isOutlineOffer || alternative) && gradient) {
+    background = `linear-gradient(#fff 0 0) padding-box, ${semanticGradient} border-box`;
+  } else if (purpose === 'offer' && gradient) {
+    background = semanticGradient;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeContainer, {
+    isOutlineOffer: isOutlineOffer,
+    isAlternative: alternative,
+    padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+    radius: `${borderRadius}px`,
+    background: background,
+    fontName: fontName,
+    fontWeight: fontWeight,
+    gradient: semanticGradient,
+    border: `${borderWidth}px solid ${borderColor}`,
+    ref: ref,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      tokens: {
+        fontName,
+        fontWeight,
+        color
+      },
+      variant: {
+        size: fontSizeMapping[fontSize]
+      },
+      children: children
+    })
+  });
+});
+Badge.displayName = 'Badge';
+Badge.propTypes = {
+  ...selectedSystemPropTypes,
+  children: _propTypes.default.node,
+  tokens: (0, _componentsBase.getTokensPropType)('Badge'),
+  variant: _propTypes.default.exact({
+    outline: _propTypes.default.bool,
+    purpose: _propTypes.default.oneOf(['offer', 'editorial']),
+    alternative: _propTypes.default.bool,
+    inverse: _propTypes.default.bool
+  })
+};
+var _default = exports.default = Badge;

package/lib/cjs/Badge/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Badge = _interopRequireDefault(require("./Badge"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Badge.default;

package/lib/cjs/BlockQuote/BlockQuote.js

@@ -0,0 +1,256 @@
+"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 = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const BlockQuoteContainer = /*#__PURE__*/_styledComponents.default.blockquote.withConfig({
+  displayName: "BlockQuote__BlockQuoteContainer",
+  componentId: "components-web__sc-vals3u-0"
+})(["margin:0;position:relative;padding-left:", ";padding-right:", ";padding-bottom:", ";padding-top:", ";&::before{content:'';left:0;top:0;position:absolute;height:100%;width:", ";background:", ";}"], _ref => {
+  let {
+    paddingLeft
+  } = _ref;
+  return `${paddingLeft}px`;
+}, _ref2 => {
+  let {
+    paddingRight
+  } = _ref2;
+  return `${paddingRight}px`;
+}, _ref3 => {
+  let {
+    paddingBottom
+  } = _ref3;
+  return `${paddingBottom}px`;
+}, _ref4 => {
+  let {
+    paddingTop
+  } = _ref4;
+  return `${paddingTop}px`;
+}, _ref5 => {
+  let {
+    width
+  } = _ref5;
+  return `${width}px`;
+}, _ref6 => {
+  let {
+    backgroundGradient
+  } = _ref6;
+  return backgroundGradient && (0, _utils.transformGradient)(backgroundGradient);
+});
+const QuoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "BlockQuote__QuoteContainer",
+  componentId: "components-web__sc-vals3u-1"
+})(["margin-bottom:", ";"], _ref7 => {
+  let {
+    marginBottom
+  } = _ref7;
+  return `${marginBottom}px`;
+});
+const selectTitleHeadingTokens = themeTokens => ({
+  fontSize: themeTokens.titleHeadingFontSize,
+  fontName: themeTokens.titleHeadingFontName,
+  fontWeight: themeTokens.titleHeadingFontWeight,
+  lineHeight: themeTokens.titleHeadingLineHeight
+});
+const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+  let {
+    children,
+    link,
+    additionalInfo,
+    linkHref,
+    textStyle = 'large',
+    LinkRouter,
+    linkRouterProps,
+    tokens,
+    variant,
+    ...rest
+  } = _ref8;
+  const viewport = (0, _componentsBase.useViewport)();
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = (0, _componentsBase.useTheme)();
+  const useTokens = enableMediaQueryStyleSheet ? _componentsBase.useResponsiveThemeTokens : _componentsBase.useThemeTokens;
+  const themeTokens = useTokens('BlockQuote', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  const {
+    color,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    marginBottom,
+    width,
+    backgroundGradient,
+    titleHeadingFontSize,
+    titleHeadingFontName,
+    titleHeadingFontWeight,
+    titleHeadingLineHeight,
+    titleFontSize,
+    titleFontName,
+    titleFontWeight,
+    titleLineHeight,
+    linkFontSize,
+    linkFontName,
+    linkFontWeight,
+    linkLineHeight
+  } = themeTokens;
+  let titleHeadingStyles;
+  let titleHeadingMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedTitleHeadingThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref9) => {
+      let [vp, viewportTokens] = _ref9;
+      acc.transformedTitleHeadingThemeTokens[vp] = {
+        fontSize: viewportTokens.titleHeadingFontSize,
+        fontName: viewportTokens.titleHeadingFontName,
+        fontWeight: viewportTokens.titleHeadingFontWeight,
+        lineHeight: viewportTokens.titleHeadingLineHeight
+      };
+      return acc;
+    }, {
+      transformedTitleHeadingThemeTokens: {}
+    });
+    const titleHeadingMediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(transformedTitleHeadingThemeTokens);
+    const {
+      ids,
+      styles
+    } = _componentsBase.StyleSheet.create({
+      titleHeading: {
+        ...selectTitleHeadingTokens(themeTokens[viewport]),
+        ...titleHeadingMediaQueryStyles
+      }
+    });
+    titleHeadingStyles = styles.titleHeading;
+    titleHeadingMediaIds = ids.titleHeading;
+  } else {
+    titleHeadingStyles = {
+      fontSize: titleHeadingFontSize,
+      fontName: titleHeadingFontName,
+      fontWeight: titleHeadingFontWeight,
+      lineHeight: titleHeadingLineHeight
+    };
+  }
+  const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle;
+  const titleTokens = textStyle === 'heading' ? titleHeadingStyles : {
+    fontSize: titleFontSize,
+    fontName: titleFontName,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight
+  };
+  const renderLink = () => {
+    if (linkHref) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
+        href: linkHref,
+        tokens: {
+          blockFontSize: linkFontSize,
+          blockFontName: linkFontName,
+          blockFontWeight: linkFontWeight,
+          blockLineHeight: linkLineHeight,
+          color
+        },
+        variant: {
+          alternative: true
+        },
+        LinkRouter: LinkRouter,
+        linkRouterProps: linkRouterProps,
+        children: link
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      tokens: {
+        color,
+        fontName: linkFontName,
+        fontSize: linkFontSize,
+        fontWeight: linkFontWeight,
+        lineHeight: linkLineHeight
+      },
+      children: link
+    });
+  };
+  const renderQuote = () => {
+    const quote = /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      tokens: {
+        color,
+        ...titleTokens
+      },
+      media: titleHeadingMediaIds,
+      variant: {
+        size: mappedTextSize
+      },
+      children: children
+    });
+    if (additionalInfo || link) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(QuoteContainer, {
+        marginBottom: marginBottom,
+        children: quote
+      });
+    }
+    return quote;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BlockQuoteContainer, {
+    ...selectProps(rest),
+    paddingTop: paddingTop,
+    paddingBottom: paddingBottom,
+    paddingLeft: paddingLeft,
+    paddingRight: paddingRight,
+    width: width,
+    backgroundGradient: backgroundGradient,
+    ref: ref,
+    children: [renderQuote(), (additionalInfo || link) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      space: 0,
+      children: [link && renderLink(), additionalInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        tokens: {
+          color
+        },
+        variant: {
+          size: 'small'
+        },
+        children: additionalInfo
+      })]
+    })]
+  });
+});
+BlockQuote.displayName = 'BlockQuote';
+BlockQuote.propTypes = {
+  ...selectedSystemPropTypes,
+  ..._componentsBase.withLinkRouter.propTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('BlockQuote'),
+  variant: _propTypes.default.exact({
+    alternative: _propTypes.default.bool,
+    size: _propTypes.default.string
+  }),
+  /**
+   * Children nodes that can be added
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * External source's identifier (e.g. author's name)
+   */
+  link: _propTypes.default.string,
+  /**
+   * External source's URL
+   */
+  linkHref: _propTypes.default.string,
+  /**
+   * To provide additional information about the source, rendered underneath `link`
+   */
+  additionalInfo: _propTypes.default.string,
+  /**
+   * Whether to render BlockQuote as a heading size of `h3` or large text size
+   */
+  textStyle: _propTypes.default.oneOf(['large', 'heading'])
+};
+var _default = exports.default = BlockQuote;

package/lib/cjs/BlockQuote/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _BlockQuote = _interopRequireDefault(require("./BlockQuote"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _BlockQuote.default;