@telus-uds/components-web 2.27.0 → 2.28.0

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 13 Dec 2023 21:13:56 GMT and should not be manually modified.
+This log was last generated on Mon, 08 Jan 2024 20:08:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.28.0
+
+Mon, 08 Jan 2024 20:08:06 GMT
+
+### Minor changes
+
+- Get a theme wrapper to grab thteme from either server or client (wlsdud194@hotmail.com)
+- Update eslintrc (wlsdud194@hotmail.com)
+- update badge story to include subtle variant (evander.owusu@telus.com)
+- add the display token to the table component (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v1.73.0
+- Bump @telus-uds/system-theme-tokens to v2.49.0
+
 ## 2.27.0
 
-Wed, 13 Dec 2023 21:13:56 GMT
+Wed, 13 Dec 2023 21:24:24 GMT
 
 ### Minor changes
 

package/lib/Image/Image.js

@@ -6,40 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 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 _server = require("@telus-uds/components-base/server");
+var _logger = require("../utils/logger");
 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 StyledImage = /*#__PURE__*/_styledComponents.default.img.withConfig({
-  displayName: "Image__StyledImage",
-  componentId: "components-web__sc-blwu4l-0"
-})(_ref => {
-  let {
-    height
-  } = _ref;
-  return {
-    height: height ?? 'auto',
-    maxWidth: '100%'
-  };
-});
-const StyledRoundedImage = /*#__PURE__*/(0, _styledComponents.default)(StyledImage).withConfig({
-  displayName: "Image__StyledRoundedImage",
-  componentId: "components-web__sc-blwu4l-1"
-})(["border-radius:", "px;"], _ref2 => {
-  let {
-    borderRadius
-  } = _ref2;
-  return borderRadius;
-});
-const StyledCircularImage = /*#__PURE__*/(0, _styledComponents.default)(StyledImage).withConfig({
-  displayName: "Image__StyledCircularImage",
-  componentId: "components-web__sc-blwu4l-2"
-})({
-  borderRadius: '50%'
-});
-const Image = _ref3 => {
+const [selectProps, selectedSystemPropTypes] = (0, _server.selectSystemProps)([_server.htmlAttrs]);
+const Image = _ref => {
   let {
     src,
     width,
@@ -48,29 +20,32 @@ const Image = _ref3 => {
     rounded,
     loading = 'eager',
     tokens,
+    theme,
     variant,
     ...rest
-  } = _ref3;
-  const {
+  } = _ref;
+  let {
     borderRadius
-  } = (0, _componentsBase.useThemeTokens)('Image', tokens, variant);
+  } = theme;
   const isCircle = rounded === 'circle';
   const isCorners = rounded === 'corners';
   const isSquare = width === height;
   if (isCircle && !isSquare) {
-    (0, _utils.warn)('Image', 'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.');
+    (0, _logger.warn)('Image', 'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.');
   }
-  let ImageComponent;
   if (isCircle) {
-    ImageComponent = StyledCircularImage;
+    borderRadius = '50%';
   } else if (isCorners) {
-    ImageComponent = StyledRoundedImage;
-  } else {
-    ImageComponent = StyledImage;
+    borderRadius = '4px';
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageComponent, {
+  const style = {
+    borderRadius,
+    height: height ?? 'auto',
+    maxWidth: '100%'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
     ...selectProps(rest),
-    borderRadius: borderRadius,
+    style: style,
     src: src,
     width: width,
     height: height,
@@ -107,7 +82,8 @@ Image.propTypes = {
    * Make image render as a circle or with rounded corners.
    */
   rounded: _propTypes.default.oneOf(['circle', 'corners']),
-  tokens: (0, _componentsBase.getTokensPropType)('Image')
+  tokens: (0, _server.getTokensPropType)('Image')
 };
+Image.displayName = 'Image';
 var _default = Image;
 exports.default = _default;

package/lib/Image/index.js

@@ -3,8 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DefaultImage", {
+  enumerable: true,
+  get: function () {
+    return _Image.default;
+  }
+});
 exports.default = void 0;
 var _Image = _interopRequireDefault(require("./Image"));
+var _withClientTheme = _interopRequireDefault(require("../utils/theming/with-client-theme"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Image.default;
+// Exporting the unwrapped component separately for react-docgen to extract info for docsite
+
+const ClientThemedImage = (0, _withClientTheme.default)(_Image.default);
+var _default = ClientThemedImage;
 exports.default = _default;

package/lib/Image/server.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _withServerTheme = _interopRequireDefault(require("../utils/theming/with-server-theme"));
+var _Image = _interopRequireDefault(require("./Image"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ServerThemedImage = (0, _withServerTheme.default)(_Image.default, 'Image');
+var _default = ServerThemedImage;
+exports.default = _default;

package/lib/Table/Cell.js

@@ -49,23 +49,30 @@ const sharedStyles = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _ref2 =>
 const createStyledCell = htmlElement => _styledComponents.default[htmlElement].withConfig({
   displayName: "Cell__createStyledCell",
   componentId: "components-web__sc-ltgfic-0"
-})(["", ";box-shadow:", ";"], sharedStyles, _ref3 => {
+})(["", ";box-shadow:", ";", ""], sharedStyles, _ref3 => {
   let {
     cellBoxShadowColor,
     type
   } = _ref3;
   return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
+}, _ref4 => {
+  let {
+    display
+  } = _ref4;
+  return display && `*:not(:empty) {
+    display: ${display};
+  }`;
 });
 const StyledHeaderCell = createStyledCell('th');
 const StyledDataCell = createStyledCell('td');
-const Cell = _ref4 => {
+const Cell = _ref5 => {
   let {
     children,
     isFirstInRow,
     align = 'left',
     tokens: cellTokens,
     type = 'default'
-  } = _ref4;
+  } = _ref5;
   const {
     text,
     isScrollable: isTableScrollable,
@@ -90,7 +97,8 @@ const Cell = _ref4 => {
     fontSize,
     lineHeight,
     stickyBackgroundColor,
-    fontColor
+    fontColor,
+    display
   } = (0, _componentsBase.useThemeTokens)('Table', themeTokens, {
     spacing,
     type,
@@ -107,7 +115,8 @@ const Cell = _ref4 => {
     cellPaddingLeft,
     cellPaddingBottom,
     stickyBackgroundColor,
-    cellBoxShadowColor
+    cellBoxShadowColor,
+    display
   };
   const typographyTokens = {
     fontName,

package/lib/index.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -19,6 +20,8 @@ var _exportNames = {
   Footnote: true,
   QuantitySelector: true,
   IconButton: true,
+  Image: true,
+  DefaultImage: true,
   transformGradient: true,
   ssrStyles: true,
   Breadcrumbs: true,
@@ -27,7 +30,6 @@ var _exportNames = {
   Testimonial: true,
   Toast: true,
   Table: true,
-  Image: true,
   WebVideo: true,
   WaffleGrid: true,
   Spinner: true,
@@ -85,6 +87,12 @@ Object.defineProperty(exports, "DatePicker", {
     return _DatePicker.default;
   }
 });
+Object.defineProperty(exports, "DefaultImage", {
+  enumerable: true,
+  get: function () {
+    return _Image.DefaultImage;
+  }
+});
 Object.defineProperty(exports, "Disclaimer", {
   enumerable: true,
   get: function () {
@@ -286,6 +294,7 @@ var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
 var _Footnote = _interopRequireDefault(require("./Footnote"));
 var _QuantitySelector = _interopRequireDefault(require("./QuantitySelector"));
 var _IconButton = _interopRequireDefault(require("./IconButton"));
+var _Image = _interopRequireWildcard(require("./Image"));
 var _utils = require("./utils");
 var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
 var _BlockQuote = _interopRequireDefault(require("./BlockQuote"));
@@ -293,7 +302,6 @@ var _OptimizeImage = _interopRequireDefault(require("./OptimizeImage"));
 var _Testimonial = _interopRequireDefault(require("./Testimonial"));
 var _Toast = _interopRequireDefault(require("./Toast"));
 var _Table = _interopRequireDefault(require("./Table"));
-var _Image = _interopRequireDefault(require("./Image"));
 var _WebVideo = _interopRequireDefault(require("./WebVideo"));
 var _WaffleGrid = _interopRequireDefault(require("./WaffleGrid"));
 var _Spinner = _interopRequireDefault(require("./Spinner"));
@@ -320,4 +328,6 @@ Object.keys(_baseExports).forEach(function (key) {
     }
   });
 });
+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 }; }

package/lib/server.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function () {
+    return _server.default;
+  }
+});
+var _server = _interopRequireDefault(require("./Image/server"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/theming/get-theme-from-server.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getTheme;
+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 cachedTheme = {};
+const theme = process.env.UDS_THEME;
+async function importTheme(componentName) {
+  try {
+    cachedTheme[componentName] = await Promise.resolve(`@telus-uds/theme-${theme}/build/rn/${componentName}.js`).then(s => _interopRequireWildcard(require(s)));
+  } catch (_) {
+    throw new Error(`An error occurred while trying to import theme-${process.env.UDS_THEME}. Please check that the theme has been installed in your app or that you are not importing a server component inside a client component.`);
+  }
+}
+async function getTheme(componentName) {
+  if (cachedTheme[componentName]) {
+    return cachedTheme[componentName];
+  }
+  await importTheme(componentName);
+  return cachedTheme[componentName];
+}

package/lib/utils/theming/with-client-theme.js

@@ -0,0 +1,32 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const withClientTheme = Component => {
+  const UdsStyledComponent = _ref => {
+    let {
+      tokens: tokenOverrides,
+      variant,
+      ...props
+    } = _ref;
+    const theme = (0, _componentsBase.useThemeTokens)(Component.displayName, variant, tokenOverrides);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      theme: theme,
+      ...props
+    });
+  };
+  UdsStyledComponent.propTypes = {
+    tokens: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    variant: _propTypes.default.string
+  };
+  return UdsStyledComponent;
+};
+var _default = withClientTheme;
+exports.default = _default;

package/lib/utils/theming/with-server-theme.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _server = require("@telus-uds/components-base/server");
+var _getThemeFromServer = _interopRequireDefault(require("./get-theme-from-server"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const withServerTheme = (Component, componentName) => {
+  const UdsStyledComponent = async _ref => {
+    let {
+      tokens: tokenOverrides,
+      variant,
+      ...props
+    } = _ref;
+    const componentTheme = await (0, _getThemeFromServer.default)(componentName);
+    const themeTokens = (0, _server.getThemeTokens)(componentTheme, tokenOverrides, variant);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      theme: themeTokens,
+      ...props
+    });
+  };
+  UdsStyledComponent.propTypes = {
+    tokens: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    variant: _propTypes.default.string
+  };
+  return UdsStyledComponent;
+};
+var _default = withServerTheme;
+exports.default = _default;

package/lib-module/Image/Image.js

@@ -1,38 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { selectSystemProps, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-import { htmlAttrs, warn } from '../utils';
+import { htmlAttrs, selectSystemProps, getTokensPropType } from '@telus-uds/components-base/server';
+import { warn } from '../utils/logger';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledImage = /*#__PURE__*/styled.img.withConfig({
-  displayName: "Image__StyledImage",
-  componentId: "components-web__sc-blwu4l-0"
-})(_ref => {
-  let {
-    height
-  } = _ref;
-  return {
-    height: height ?? 'auto',
-    maxWidth: '100%'
-  };
-});
-const StyledRoundedImage = /*#__PURE__*/styled(StyledImage).withConfig({
-  displayName: "Image__StyledRoundedImage",
-  componentId: "components-web__sc-blwu4l-1"
-})(["border-radius:", "px;"], _ref2 => {
-  let {
-    borderRadius
-  } = _ref2;
-  return borderRadius;
-});
-const StyledCircularImage = /*#__PURE__*/styled(StyledImage).withConfig({
-  displayName: "Image__StyledCircularImage",
-  componentId: "components-web__sc-blwu4l-2"
-})({
-  borderRadius: '50%'
-});
-const Image = _ref3 => {
+const Image = _ref => {
   let {
     src,
     width,
@@ -41,29 +13,32 @@ const Image = _ref3 => {
     rounded,
     loading = 'eager',
     tokens,
+    theme,
     variant,
     ...rest
-  } = _ref3;
-  const {
+  } = _ref;
+  let {
     borderRadius
-  } = useThemeTokens('Image', tokens, variant);
+  } = theme;
   const isCircle = rounded === 'circle';
   const isCorners = rounded === 'corners';
   const isSquare = width === height;
   if (isCircle && !isSquare) {
     warn('Image', 'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.');
   }
-  let ImageComponent;
   if (isCircle) {
-    ImageComponent = StyledCircularImage;
+    borderRadius = '50%';
   } else if (isCorners) {
-    ImageComponent = StyledRoundedImage;
-  } else {
-    ImageComponent = StyledImage;
+    borderRadius = '4px';
   }
-  return /*#__PURE__*/_jsx(ImageComponent, {
+  const style = {
+    borderRadius,
+    height: height ?? 'auto',
+    maxWidth: '100%'
+  };
+  return /*#__PURE__*/_jsx("img", {
     ...selectProps(rest),
-    borderRadius: borderRadius,
+    style: style,
     src: src,
     width: width,
     height: height,
@@ -102,4 +77,5 @@ Image.propTypes = {
   rounded: PropTypes.oneOf(['circle', 'corners']),
   tokens: getTokensPropType('Image')
 };
+Image.displayName = 'Image';
 export default Image;

package/lib-module/Image/index.js

@@ -1,2 +1,7 @@
 import Image from './Image';
-export default Image;
+import withClientTheme from '../utils/theming/with-client-theme';
+
+// Exporting the unwrapped component separately for react-docgen to extract info for docsite
+export { Image as DefaultImage };
+const ClientThemedImage = withClientTheme(Image);
+export default ClientThemedImage;

package/lib-module/Image/server.js

@@ -0,0 +1,4 @@
+import withServerTheme from '../utils/theming/with-server-theme';
+import Image from './Image';
+const ServerThemedImage = withServerTheme(Image, 'Image');
+export default ServerThemedImage;

package/lib-module/Table/Cell.js

@@ -40,23 +40,30 @@ const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
 const createStyledCell = htmlElement => styled[htmlElement].withConfig({
   displayName: "Cell__createStyledCell",
   componentId: "components-web__sc-ltgfic-0"
-})(["", ";box-shadow:", ";"], sharedStyles, _ref3 => {
+})(["", ";box-shadow:", ";", ""], sharedStyles, _ref3 => {
   let {
     cellBoxShadowColor,
     type
   } = _ref3;
   return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
+}, _ref4 => {
+  let {
+    display
+  } = _ref4;
+  return display && `*:not(:empty) {
+    display: ${display};
+  }`;
 });
 const StyledHeaderCell = createStyledCell('th');
 const StyledDataCell = createStyledCell('td');
-const Cell = _ref4 => {
+const Cell = _ref5 => {
   let {
     children,
     isFirstInRow,
     align = 'left',
     tokens: cellTokens,
     type = 'default'
-  } = _ref4;
+  } = _ref5;
   const {
     text,
     isScrollable: isTableScrollable,
@@ -81,7 +88,8 @@ const Cell = _ref4 => {
     fontSize,
     lineHeight,
     stickyBackgroundColor,
-    fontColor
+    fontColor,
+    display
   } = useThemeTokens('Table', themeTokens, {
     spacing,
     type,
@@ -98,7 +106,8 @@ const Cell = _ref4 => {
     cellPaddingLeft,
     cellPaddingBottom,
     stickyBackgroundColor,
-    cellBoxShadowColor
+    cellBoxShadowColor,
+    display
   };
   const typographyTokens = {
     fontName,

package/lib-module/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 export { default as Badge } from './Badge';
 export { default as OrderedList } from './OrderedList';
 export { default as PreviewCard } from './PreviewCard';
@@ -13,6 +15,7 @@ export { default as PriceLockup } from './PriceLockup';
 export { default as Footnote } from './Footnote';
 export { default as QuantitySelector } from './QuantitySelector';
 export { default as IconButton } from './IconButton';
+export { default as Image, DefaultImage } from './Image';
 export { transformGradient } from './utils';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export { default as BlockQuote } from './BlockQuote';
@@ -20,7 +23,6 @@ export { default as OptimizeImage } from './OptimizeImage';
 export { default as Testimonial } from './Testimonial';
 export { default as Toast } from './Toast';
 export { default as Table } from './Table';
-export { default as Image } from './Image';
 export { default as WebVideo } from './WebVideo';
 export { default as WaffleGrid } from './WaffleGrid';
 export { default as Spinner } from './Spinner';

package/lib-module/server.js

@@ -0,0 +1,5 @@
+import ServerThemedImage from './Image/server';
+
+// Export themed components
+/* eslint-disable import/prefer-default-export */
+export { ServerThemedImage as Image };

package/lib-module/utils/theming/get-theme-from-server.js

@@ -0,0 +1,16 @@
+const cachedTheme = {};
+const theme = process.env.UDS_THEME;
+async function importTheme(componentName) {
+  try {
+    cachedTheme[componentName] = await import(`@telus-uds/theme-${theme}/build/rn/${componentName}.js`);
+  } catch (_) {
+    throw new Error(`An error occurred while trying to import theme-${process.env.UDS_THEME}. Please check that the theme has been installed in your app or that you are not importing a server component inside a client component.`);
+  }
+}
+export default async function getTheme(componentName) {
+  if (cachedTheme[componentName]) {
+    return cachedTheme[componentName];
+  }
+  await importTheme(componentName);
+  return cachedTheme[componentName];
+}

package/lib-module/utils/theming/with-client-theme.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '@telus-uds/components-base';
+import { jsx as _jsx } from "react/jsx-runtime";
+const withClientTheme = Component => {
+  const UdsStyledComponent = _ref => {
+    let {
+      tokens: tokenOverrides,
+      variant,
+      ...props
+    } = _ref;
+    const theme = useThemeTokens(Component.displayName, variant, tokenOverrides);
+    return /*#__PURE__*/_jsx(Component, {
+      theme: theme,
+      ...props
+    });
+  };
+  UdsStyledComponent.propTypes = {
+    tokens: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    variant: PropTypes.string
+  };
+  return UdsStyledComponent;
+};
+export default withClientTheme;

package/lib-module/utils/theming/with-server-theme.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getThemeTokens } from '@telus-uds/components-base/server';
+import getTheme from './get-theme-from-server';
+import { jsx as _jsx } from "react/jsx-runtime";
+const withServerTheme = (Component, componentName) => {
+  const UdsStyledComponent = async _ref => {
+    let {
+      tokens: tokenOverrides,
+      variant,
+      ...props
+    } = _ref;
+    const componentTheme = await getTheme(componentName);
+    const themeTokens = getThemeTokens(componentTheme, tokenOverrides, variant);
+    return /*#__PURE__*/_jsx(Component, {
+      theme: themeTokens,
+      ...props
+    });
+  };
+  UdsStyledComponent.propTypes = {
+    tokens: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    variant: PropTypes.string
+  };
+  return UdsStyledComponent;
+};
+export default withServerTheme;

package/package.json

@@ -5,18 +5,37 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.72.0",
+    "@telus-uds/components-base": "1.73.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
+    "moment": "2.29.4",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.48.0",
+    "@telus-uds/system-theme-tokens": "^2.49.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
-    "moment": "2.29.4"
+    "semver": "^7.5.4"
+  },
+  "exports": {
+    ".": {
+      "import": "./lib-module/index.js",
+      "require": "./lib/index.js"
+    },
+    "./*": {
+      "import": "./lib-module/*/index.js",
+      "require": "./lib/*/index.js"
+    },
+    "./server": {
+      "import": "./lib-module/server.js",
+      "require": "./lib/server.js"
+    },
+    "./server/*": {
+      "import": "./lib-module/*/server.js",
+      "require": "./lib/server/*/server.js"
+    }
   },
   "description": "UDS mult-brand web components",
   "devDependencies": {
@@ -27,6 +46,8 @@
     "assert": "^2.0.0",
     "babel-plugin-react-native-web": "^0.18.7",
     "babel-plugin-styled-components": "^2.0.6",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-exports": "^1.0.0-beta.5",
     "jest-axe": "^6.0.0",
     "jest-styled-components": "^7.0.8",
     "react-test-renderer": "~18.0.0",
@@ -62,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.27.0"
+  "version": "2.28.0"
 }

package/src/Image/Image.jsx

@@ -1,24 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import { selectSystemProps, useThemeTokens, getTokensPropType } from '@telus-uds/components-base'
-import { htmlAttrs, warn } from '../utils'
+import { htmlAttrs, selectSystemProps, getTokensPropType } from '@telus-uds/components-base/server'
+import { warn } from '../utils/logger'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const StyledImage = styled.img(({ height }) => {
-  return {
-    height: height ?? 'auto',
-    maxWidth: '100%'
-  }
-})
-const StyledRoundedImage = styled(StyledImage)`
-  border-radius: ${({ borderRadius }) => borderRadius}px;
-`
-const StyledCircularImage = styled(StyledImage)({
-  borderRadius: '50%'
-})
-
 const Image = ({
   src,
   width,
@@ -27,10 +13,11 @@ const Image = ({
   rounded,
   loading = 'eager',
   tokens,
+  theme,
   variant,
   ...rest
 }) => {
-  const { borderRadius } = useThemeTokens('Image', tokens, variant)
+  let { borderRadius } = theme
   const isCircle = rounded === 'circle'
   const isCorners = rounded === 'corners'
   const isSquare = width === height
@@ -42,19 +29,21 @@ const Image = ({
     )
   }
 
-  let ImageComponent
   if (isCircle) {
-    ImageComponent = StyledCircularImage
+    borderRadius = '50%'
   } else if (isCorners) {
-    ImageComponent = StyledRoundedImage
-  } else {
-    ImageComponent = StyledImage
+    borderRadius = '4px'
   }
 
+  const style = {
+    borderRadius,
+    height: height ?? 'auto',
+    maxWidth: '100%'
+  }
   return (
-    <ImageComponent
+    <img
       {...selectProps(rest)}
-      borderRadius={borderRadius}
+      style={style}
       src={src}
       width={width}
       height={height}
@@ -97,4 +86,6 @@ Image.propTypes = {
   tokens: getTokensPropType('Image')
 }
 
+Image.displayName = 'Image'
+
 export default Image

package/src/Image/index.js

@@ -1,3 +1,8 @@
 import Image from './Image'
+import withClientTheme from '../utils/theming/with-client-theme'
 
-export default Image
+// Exporting the unwrapped component separately for react-docgen to extract info for docsite
+export { Image as DefaultImage }
+
+const ClientThemedImage = withClientTheme(Image)
+export default ClientThemedImage

package/src/Image/server.js

@@ -0,0 +1,5 @@
+import withServerTheme from '../utils/theming/with-server-theme'
+import Image from './Image'
+
+const ServerThemedImage = withServerTheme(Image, 'Image')
+export default ServerThemedImage

package/src/Table/Cell.jsx

@@ -59,6 +59,11 @@ const createStyledCell = (htmlElement) => styled[htmlElement]`
       ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}`
       : `inset 0 1px 0 ${cellBoxShadowColor}`
   }};
+  ${({ display }) =>
+    display &&
+    `*:not(:empty) {
+    display: ${display};
+  }`}
 `
 const StyledHeaderCell = createStyledCell('th')
 const StyledDataCell = createStyledCell('td')
@@ -81,7 +86,8 @@ const Cell = ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type
     fontSize,
     lineHeight,
     stickyBackgroundColor,
-    fontColor
+    fontColor,
+    display
   } = useThemeTokens('Table', themeTokens, { spacing, type, text })
 
   const sharedProps = {
@@ -95,7 +101,8 @@ const Cell = ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type
     cellPaddingLeft,
     cellPaddingBottom,
     stickyBackgroundColor,
-    cellBoxShadowColor
+    cellBoxShadowColor,
+    display
   }
 
   const typographyTokens = {

package/src/index.js

@@ -1,3 +1,5 @@
+'use client'
+
 export { default as Badge } from './Badge'
 export { default as OrderedList } from './OrderedList'
 export { default as PreviewCard } from './PreviewCard'
@@ -13,6 +15,7 @@ export { default as PriceLockup } from './PriceLockup'
 export { default as Footnote } from './Footnote'
 export { default as QuantitySelector } from './QuantitySelector'
 export { default as IconButton } from './IconButton'
+export { default as Image, DefaultImage } from './Image'
 export { transformGradient } from './utils'
 export { default as Breadcrumbs } from './Breadcrumbs'
 export { default as BlockQuote } from './BlockQuote'
@@ -20,7 +23,6 @@ export { default as OptimizeImage } from './OptimizeImage'
 export { default as Testimonial } from './Testimonial'
 export { default as Toast } from './Toast'
 export { default as Table } from './Table'
-export { default as Image } from './Image'
 export { default as WebVideo } from './WebVideo'
 export { default as WaffleGrid } from './WaffleGrid'
 export { default as Spinner } from './Spinner'

package/src/server.js

@@ -0,0 +1,5 @@
+import ServerThemedImage from './Image/server'
+
+// Export themed components
+/* eslint-disable import/prefer-default-export */
+export { ServerThemedImage as Image }

package/src/utils/theming/get-theme-from-server.js

@@ -0,0 +1,22 @@
+const cachedTheme = {}
+const theme = process.env.UDS_THEME
+
+async function importTheme(componentName) {
+  try {
+    cachedTheme[componentName] = await import(
+      `@telus-uds/theme-${theme}/build/rn/${componentName}.js`
+    )
+  } catch (_) {
+    throw new Error(
+      `An error occurred while trying to import theme-${process.env.UDS_THEME}. Please check that the theme has been installed in your app or that you are not importing a server component inside a client component.`
+    )
+  }
+}
+
+export default async function getTheme(componentName) {
+  if (cachedTheme[componentName]) {
+    return cachedTheme[componentName]
+  }
+  await importTheme(componentName)
+  return cachedTheme[componentName]
+}

package/src/utils/theming/with-client-theme.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useThemeTokens } from '@telus-uds/components-base'
+
+const withClientTheme = (Component) => {
+  const UdsStyledComponent = ({ tokens: tokenOverrides, variant, ...props }) => {
+    const theme = useThemeTokens(Component.displayName, variant, tokenOverrides)
+    return <Component theme={theme} {...props} />
+  }
+
+  UdsStyledComponent.propTypes = {
+    tokens: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    variant: PropTypes.string
+  }
+
+  return UdsStyledComponent
+}
+
+export default withClientTheme

package/src/utils/theming/with-server-theme.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { getThemeTokens } from '@telus-uds/components-base/server'
+
+import getTheme from './get-theme-from-server'
+
+const withServerTheme = (Component, componentName) => {
+  const UdsStyledComponent = async ({ tokens: tokenOverrides, variant, ...props }) => {
+    const componentTheme = await getTheme(componentName)
+    const themeTokens = getThemeTokens(componentTheme, tokenOverrides, variant)
+    return <Component theme={themeTokens} {...props} />
+  }
+  UdsStyledComponent.propTypes = {
+    tokens: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    variant: PropTypes.string
+  }
+
+  return UdsStyledComponent
+}
+
+export default withServerTheme