@telus-uds/components-base 1.71.0 → 1.73.0

package/lib-module/OrderedList/Item.js

@@ -0,0 +1,171 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { getTokensPropType, htmlAttrs, selectSystemProps, variantProp, viewProps, wrapStringsInText } from '../utils';
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
+import StackView from '../StackView';
+import Typography from '../Typography';
+import ItemBase from './ItemBase';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
+const selectItemTextStyles = (_ref, themeOptions) => {
+  let {
+    itemFontHeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName,
+    itemColor
+  } = _ref;
+  return applyTextStyles({
+    fontWeight: itemFontHeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor,
+    themeOptions,
+    lineHeight: itemLineHeight
+  });
+};
+const selectItemCounterStyles = _ref2 => {
+  let {
+    itemBulletContainerWidth,
+    itemBulletContainerAlign,
+    itemFontWeight,
+    itemFontSize,
+    itemFontName,
+    itemLineHeight,
+    themeOptions,
+    listGutter,
+    itemColor
+  } = _ref2;
+  return {
+    color: itemColor,
+    width: itemBulletContainerWidth,
+    paddingRight: listGutter,
+    textAlign: itemBulletContainerAlign,
+    ...applyTextStyles({
+      fontWeight: itemFontWeight,
+      fontSize: itemFontSize,
+      fontName: itemFontName,
+      themeOptions
+    }),
+    lineHeight: itemLineHeight * itemFontSize
+  };
+};
+const selectItemContentStyles = (_ref3, isLastChild) => {
+  let {
+    interItemMargin,
+    ...themeTokens
+  } = _ref3;
+  return {
+    ...themeTokens,
+    marginBottom: !isLastChild ? interItemMargin : 0
+  };
+};
+const Item = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    children,
+    index,
+    isLastChild,
+    title,
+    tokens,
+    variant,
+    ...rest
+  } = _ref4;
+  const themeTokens = useThemeTokens('OrderedList', tokens, variant);
+  const headingTokens = title && {
+    lineHeight: themeTokens.itemLineHeight,
+    fontSize: themeTokens.itemFontSize,
+    color: themeTokens.itemColor,
+    fontName: themeTokens.headerFontName,
+    fontWeight: themeTokens.headerFontWeight
+  };
+  const {
+    themeOptions
+  } = useTheme();
+  const itemContent = wrapStringsInText(children, {
+    style: selectItemTextStyles(themeTokens, themeOptions)
+  });
+  const itemCounter = wrapStringsInText(`${index}.`, {
+    style: selectItemTextStyles(themeTokens, themeOptions)
+  });
+  return /*#__PURE__*/_jsxs(ItemBase, {
+    ref: ref,
+    style: {
+      ...staticStyles.container,
+      ...themeTokens
+    },
+    ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [staticStyles.itemCounter, selectItemCounterStyles(themeTokens)],
+      children: itemCounter
+    }), /*#__PURE__*/_jsx(View, {
+      style: staticStyles.itemContent,
+      children: title ? /*#__PURE__*/_jsxs(StackView, {
+        tokens: {
+          flexShrink: 1
+        },
+        space: 0,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'h4'
+          },
+          tokens: headingTokens,
+          children: title
+        }), /*#__PURE__*/_jsx(View, {
+          style: selectItemContentStyles(themeTokens, isLastChild),
+          children: itemContent
+        })]
+      }) : /*#__PURE__*/_jsx(View, {
+        style: selectItemContentStyles(themeTokens, isLastChild),
+        children: itemContent
+      })
+    })]
+  });
+});
+Item.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Item index
+   */
+  index: PropTypes.number,
+  /**
+   * If true, the item is the last one on the list
+   */
+  isLastChild: PropTypes.bool,
+  /**
+   * Defines the title of the `OrderedList.Item`
+   */
+  title: PropTypes.string,
+  /**
+   * Item tokens
+   */
+  tokens: getTokensPropType('List'),
+  /**
+   * Item variant
+   */
+  variant: variantProp.propType
+};
+Item.displayName = 'OrderedListItem';
+Item.defaultProps = {
+  title: undefined,
+  tokens: {}
+};
+export default Item;
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row'
+  },
+  itemCounter: {
+    flexWrap: 'wrap'
+  },
+  itemContent: {
+    flexDirection: 'column',
+    marginLeft: 8
+  }
+});

package/lib-module/OrderedList/ItemBase.js

@@ -0,0 +1,43 @@
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getAccessibilityRole = () => Platform.select({
+  ios: 'listitem',
+  android: 'none',
+  web: 'listitem'
+});
+const Item = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    style,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: getAccessibilityRole(),
+    ref: ref,
+    style: [staticStyles.container, style],
+    ...rest,
+    children: children
+  });
+});
+Item.propTypes = {
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Item custom styles
+   */
+  style: PropTypes.object
+};
+Item.displayName = 'OrderedListItem';
+export default Item;
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex'
+  }
+});

package/lib-module/OrderedList/OrderedList.js

@@ -0,0 +1,61 @@
+import React, { forwardRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { getTokensPropType, htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils';
+import OrderedListBase from './OrderedListBase';
+import Item from './Item';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps]);
+const getChildrenWithParentVariants = (variant, children, start) => {
+  if (variant) return children.map((child, i) => {
+    var _child$props;
+    const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+    return {
+      ...child,
+      props: {
+        ...child.props,
+        index: start + i,
+        isLastChild: i === children.length - 1,
+        variant: {
+          ...existingChildVariants,
+          ...variant
+        }
+      }
+    };
+  });
+  return children;
+};
+const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    start,
+    variant,
+    ...rest
+  } = _ref;
+  const childrenWithParentVariants = useMemo(() => getChildrenWithParentVariants(variant, children, start), [children, variant, start]);
+  return /*#__PURE__*/_jsx(OrderedListBase, {
+    ref: ref,
+    ...selectProps(rest),
+    children: childrenWithParentVariants
+  });
+});
+OrderedList.propTypes = {
+  ...selectedSystemPropsTypes,
+  tokens: getTokensPropType('OrderedList'),
+  /**
+   * A list of ordered items wrapped in `OrderedList.Item`.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The position to start the list with.
+   */
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  variant: variantProp.propType
+};
+OrderedList.defaultProps = {
+  start: 1,
+  tokens: {},
+  variant: {}
+};
+OrderedList.displayName = 'OrderedList';
+OrderedList.Item = Item;
+export default OrderedList;

package/lib-module/OrderedList/OrderedListBase.js

@@ -0,0 +1,36 @@
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import ItemBase from './ItemBase';
+import { jsx as _jsx } from "react/jsx-runtime";
+const OrderedListBase = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: "list",
+    ref: ref,
+    style: staticStyles.container,
+    ...rest,
+    children: children
+  });
+});
+OrderedListBase.propTypes = {
+  /**
+   * A list of ordered items wrapped in `OrderedListBase.Item`.
+   */
+  children: PropTypes.node.isRequired
+};
+OrderedListBase.displayName = 'OrderedList';
+OrderedListBase.Item = ItemBase;
+export default OrderedListBase;
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    margin: 0,
+    padding: 0
+  }
+});

package/lib-module/OrderedList/index.js

@@ -0,0 +1,2 @@
+import OrderedList from './OrderedList';
+export default OrderedList;

package/lib-module/Responsive/Responsive.js

@@ -1,17 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { viewports } from '@telus-uds/system-constants';
-import { useResponsiveProp } from '../utils';
+import { useTheme } from '../ThemeProvider';
+import ResponsiveProp from './ResponsiveProp';
+import ResponsiveWithMediaQueryStyleSheet from './ResponsiveWithMediaQueryStyleSheet';
 
 /**
  * Responsive conditionally renders children based on whether the viewport matches the provided
  * min and max viewports.
  *
- * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * If enableMediaQueryStyleSheet themeOption is set to false in ThemeProvider, then in SSR,
+ * like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
  * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
  * after hydration. This may cause a layout shift on devices other than the narrowest.
+ *
+ * If enableMediaQueryStyleSheet themeOption is set to true in ThemeProvider, then media query stylesheet
+ * is used to hide and show children of `Responsive` within a View.
  */
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Responsive = _ref => {
   let {
@@ -19,20 +23,25 @@ const Responsive = _ref => {
     max,
     children
   } = _ref;
-  // Start returning children at the 'min' viewport or greater
-  const byViewports = {
-    [min]: children
-  };
-  if (max && max !== 'xl') {
-    // Stop returning children at the viewport one above 'max' or greater
-    const maxIndex = viewports.keys.indexOf(max);
-    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null;
-    if (maxPlusOne) byViewports[maxPlusOne] = null;
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = useTheme();
+  if (enableMediaQueryStyleSheet) {
+    return /*#__PURE__*/_jsx(ResponsiveWithMediaQueryStyleSheet, {
+      min: min,
+      max: max,
+      children: children
+    });
   }
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: useResponsiveProp(byViewports, null)
+  return /*#__PURE__*/_jsx(ResponsiveProp, {
+    min: min,
+    max: max,
+    children: children
   });
 };
+Responsive.displayName = 'Responsive';
 Responsive.propTypes = {
   /**
    * To hide children of `Responsive` if the current viewport is smaller than `min`

package/lib-module/Responsive/ResponsiveProp.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { useResponsiveProp } from '../utils';
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ResponsiveProp = _ref => {
+  let {
+    min = 'xs',
+    max,
+    children
+  } = _ref;
+  const byViewports = {
+    [min]: children
+  };
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = viewports.keys.indexOf(max);
+    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null;
+    if (maxPlusOne) byViewports[maxPlusOne] = null;
+  }
+  const responsiveProp = useResponsiveProp(byViewports, null);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: responsiveProp
+  });
+};
+ResponsiveProp.displayName = 'Responsive';
+ResponsiveProp.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+};
+export default ResponsiveProp;

package/lib-module/Responsive/ResponsiveWithMediaQueryStyleSheet.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { BaseView, StyleSheet, createMediaQueryStyles } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+function generateResponsiveStyles(min, max) {
+  const viewportsArray = viewports.keys;
+  const minIndex = viewportsArray.indexOf(min);
+  const maxIndex = viewportsArray.indexOf(max);
+  let hiddenViewports = [];
+  if (minIndex !== -1) {
+    hiddenViewports = viewportsArray.slice(0, minIndex);
+  }
+  if (maxIndex !== -1) {
+    hiddenViewports = hiddenViewports.concat(viewportsArray.slice(maxIndex + 1));
+  }
+  const styles = {};
+  viewportsArray.forEach(viewport => {
+    if (hiddenViewports.includes(viewport)) {
+      styles[viewport] = {
+        display: 'none'
+      };
+    }
+  });
+  return createMediaQueryStyles(styles, false);
+}
+const ResponsiveWithMediaQueryStyleSheet = _ref => {
+  let {
+    min,
+    max,
+    children
+  } = _ref;
+  const {
+    ids,
+    styles
+  } = StyleSheet.create({
+    responsive: {
+      flexDirection: 'inherit',
+      alignItems: 'inherit',
+      justifyContent: 'inherit',
+      ...generateResponsiveStyles(min, max)
+    }
+  });
+  return /*#__PURE__*/_jsx(BaseView, {
+    style: styles.responsive,
+    dataSet: ids.responsive && {
+      media: ids.responsive
+    },
+    children: children
+  });
+};
+ResponsiveWithMediaQueryStyleSheet.displayName = 'Responsive';
+ResponsiveWithMediaQueryStyleSheet.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+};
+export default ResponsiveWithMediaQueryStyleSheet;

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -15,7 +15,8 @@ const defaultThemeOptions = {
   // TODO: switch `forceZIndex` to be false by default in the next major version
   forceZIndex: true,
   // TODO: switch `enableHelmetSSR` to be false by default in the next major version
-  enableHelmetSSR: true
+  enableHelmetSSR: true,
+  enableMediaQueryStyleSheet: false
 };
 const ThemeProvider = _ref => {
   let {
@@ -70,12 +71,14 @@ ThemeProvider.propTypes = {
    * - `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be
    *   disabled unless a web app has been specifically configured to stop React Helmet accumulating
    *   instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet
+   * - `enableMediaQueryStyleSheet`: enables the use of Media Query StyleSheet.
    */
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
     forceZIndex: PropTypes.bool,
     enableHelmetSSR: PropTypes.bool,
-    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
+    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
+    enableMediaQueryStyleSheet: PropTypes.bool
   })
 };
 export default ThemeProvider;

package/lib-module/ThemeProvider/index.js

@@ -1,6 +1,7 @@
 import ThemeProvider from './ThemeProvider';
 export { default as useTheme } from './useTheme';
 export { default as useSetTheme } from './useSetTheme';
+export { default as useResponsiveThemeTokens } from './useResponsiveThemeTokens';
 export * from './useThemeTokens';
 export * from './utils';
 export default ThemeProvider;

package/lib-module/ThemeProvider/useResponsiveThemeTokens.js

@@ -0,0 +1,81 @@
+import { viewports } from '@telus-uds/system-constants';
+import useTheme from './useTheme';
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils';
+const getResponsiveThemeTokens = function (_ref, tokensProp) {
+  let {
+    rules = [],
+    tokens: defaultThemeTokens = {}
+  } = _ref;
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 ? arguments[3] : undefined;
+  const appearances = mergeAppearances(variants, states);
+  const tokensByViewport = Object.fromEntries(viewports.keys.map(viewport => [viewport, {
+    ...defaultThemeTokens
+  }]));
+
+  // Go through each rule and collect them for the corresponding viewport if they apply
+  rules.forEach(rule => {
+    if (doesRuleApply(rule, appearances)) {
+      // If the rule does not have a viewport specified, we collect it in all viewports
+      let targetViewports = rule.if.viewport || viewports.keys;
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports];
+      }
+      targetViewports.forEach(viewport => {
+        tokensByViewport[viewport] = {
+          ...tokensByViewport[viewport],
+          ...rule.tokens
+        };
+      });
+    }
+  });
+  Object.keys(tokensByViewport).forEach(viewport => {
+    tokensByViewport[viewport] = resolveThemeTokens(tokensByViewport[viewport], appearances, tokensProp);
+  });
+  return tokensByViewport;
+};
+const doesRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesConditionApply(condition, appearances));
+const doesConditionApply = (_ref2, appearances) => {
+  let [key, value] = _ref2;
+  if (key === 'viewport') {
+    return true;
+  }
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null;
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
+};
+
+/**
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/variantProp').AppearanceSet} AppearanceSet
+ *
+ * Returns a complete set of tokens for a component for each viewport based on which of the
+ * component's theme rules apply to the current set of theme appearances.
+ * Pass the returned output to createMediaQueryStyles to generate media query styles for use inside
+ * the media query stylesheet from './utils/ssr-media-query'.
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param { string } componentName
+ * @param { TokensProp } tokens
+ * @param { AppearanceSet } variants
+ * @param { AppearanceSet } states
+ * @returns { ResponsiveObject }
+ */
+
+const useResponsiveThemeTokens = function (componentName) {
+  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  const theme = useTheme();
+  const componentTheme = getComponentTheme(theme, componentName);
+  const themeTokens = getResponsiveThemeTokens(componentTheme, tokens, variants, states);
+  return themeTokens;
+};
+export default useResponsiveThemeTokens;