@telus-uds/components-base 1.71.0 → 1.73.0

package/lib-module/Typography/Typography.js

@@ -2,10 +2,10 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
-import { useTheme, useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
+import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider';
 import { applyTextStyles } from '../ThemeProvider/utils';
-import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag } from '../utils';
+import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag, StyleSheet, createMediaQueryStyles } from '../utils';
+import { useViewport } from '../ViewportProvider';
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
@@ -21,7 +21,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     fontName,
     textAlign,
     textTransform,
-    letterSpacing
+    letterSpacing,
+    textDecorationLine
   } = _ref;
   return applyTextStyles({
     fontWeight,
@@ -32,7 +33,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     themeOptions,
     textAlign,
     textTransform,
-    letterSpacing
+    letterSpacing,
+    textDecorationLine
   });
 };
 
@@ -52,23 +54,48 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   const viewport = useViewport();
-  const {
-    superScriptFontSize,
-    ...themeTokens
-  } = useThemeTokens('Typography', tokens, variant, {
-    viewport
-  });
   const {
     themeOptions
   } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Typography', tokens, variant);
+  const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? getMaxFontMultiplier(themeTokens[viewport]) : getMaxFontMultiplier(themeTokens);
+  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  let textStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref3) => {
+      let [vp, viewportTokens] = _ref3;
+      acc[vp] = selectTextStyles({
+        textAlign: align,
+        textDecorationLine,
+        ...viewportTokens
+      }, themeOptions);
+      return acc;
+    }, {});
+    const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      text: mediaQueryStyles
+    });
+    textStyles = styles.text;
+    mediaIds = ids.text;
+  } else {
+    textStyles = selectTextStyles({
+      textAlign: align,
+      textDecorationLine,
+      ...themeTokens
+    }, themeOptions);
+  }
   const resolvedTextProps = {
     ...selectTextProps(rest),
-    style: selectTextStyles(align ? {
-      ...themeTokens,
-      textAlign: align
-    } : themeTokens, themeOptions),
     dataSet,
-    maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
+    maxFontSizeMultiplier
   };
   const containerProps = {
     accessibilityRole,
@@ -79,7 +106,7 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
       var _child$props;
       const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
-      const supFontSize = childStyles.fontSize ?? superScriptFontSize;
+      const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
       const sanitizedChild = /*#__PURE__*/React.cloneElement(child, {
         style: {
           ...childStyles,
@@ -99,19 +126,15 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     }
     return resetTagStyling(children);
   };
-  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
-  const textStyles = resolvedTextProps.style ? {
-    ...resolvedTextProps.style,
-    textDecorationLine
-  } : {
-    textDecorationLine
-  };
   return block ? /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/_jsx(Text, {
       ...resolvedTextProps,
       style: textStyles,
+      dataSet: mediaIds && {
+        media: mediaIds
+      },
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/_jsx(Text, {
@@ -119,6 +142,9 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...containerProps,
     ...resolvedTextProps,
     style: textStyles,
+    dataSet: mediaIds && {
+      media: mediaIds
+    },
     children: sanitizeChildren(children)
   });
 });

package/lib-module/index.js

@@ -11,6 +11,7 @@ export { default as Checkbox } from './Checkbox';
 export * from './Checkbox';
 export { default as CheckboxCard } from './CheckboxCard';
 export { default as CheckboxCardGroup } from './CheckboxCardGroup';
+export { default as ColourToggle } from './ColourToggle';
 export { default as Divider } from './Divider';
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
 export { default as Feedback } from './Feedback';
@@ -28,6 +29,7 @@ export { default as List, ListItem, ListBase } from './List';
 export { default as Modal } from './Modal';
 export { default as MultiSelectFilter } from './MultiSelectFilter';
 export { default as Notification } from './Notification';
+export { default as OrderedList } from './OrderedList';
 export { default as Pagination } from './Pagination';
 export { default as Progress } from './Progress';
 export { default as QuickLinks } from './QuickLinks';

package/lib-module/server.js

@@ -0,0 +1,4 @@
+export { default as selectSystemProps } from './utils/props/selectSystemProps';
+export { getTokensPropType } from './utils/props/tokens';
+export { default as htmlAttrs } from './utils/htmlAttrs';
+export { getComponentTheme, getThemeTokens } from './ThemeProvider/utils/theme-tokens';

package/lib-module/utils/ssr-media-query/create-stylesheet/create-stylesheet-mobile.js

@@ -0,0 +1,48 @@
+import mediaQuery from 'css-mediaquery';
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import { isMediaOrPseudo, isMedia } from '../utils/common';
+const createStyleSheet = stylesWithQuery => {
+  if (!stylesWithQuery) return {
+    ids: {},
+    styles: {},
+    fullStyles: {}
+  };
+  let cleanStyles;
+  const ids = {};
+  Object.keys(stylesWithQuery).forEach(key => {
+    if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
+    cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
+    mediaQueriesAndPseudoClasses.forEach(str => {
+      if (isMedia(str)) {
+        const mqStr = str.replace('@media', '');
+        const {
+          width,
+          height
+        } = Dimensions.get('window');
+        const isMatchingMediaQuery = mediaQuery.match(mqStr, {
+          width,
+          height,
+          orientation: width > height ? 'landscape' : 'portrait',
+          'aspect-ratio': width / height
+        });
+        if (isMatchingMediaQuery) {
+          cleanStyles = {
+            ...cleanStyles,
+            [key]: {
+              ...cleanStyles[key],
+              ...stylesWithQuery[key][str]
+            }
+          };
+        }
+      }
+      delete cleanStyles[key][str];
+    });
+  });
+  return {
+    ids,
+    styles: cleanStyles,
+    fullStyles: stylesWithQuery
+  };
+};
+export default createStyleSheet;

package/lib-module/utils/ssr-media-query/create-stylesheet/index.android.js

@@ -0,0 +1,2 @@
+import createStyleSheet from './create-stylesheet-mobile';
+export default createStyleSheet;

package/lib-module/utils/ssr-media-query/create-stylesheet/index.ios.js

@@ -0,0 +1,2 @@
+import createStyleSheet from './create-stylesheet-mobile';
+export default createStyleSheet;

package/lib-module/utils/ssr-media-query/create-stylesheet/index.js

@@ -0,0 +1,36 @@
+import { addCss } from '../utils/inject';
+import createDeclarationBlock from '../utils/create-declaration-block';
+import hash from '../hash';
+import { isMediaOrPseudo, deepClone, createCssRule } from '../utils/common';
+const createStyleSheet = stylesWithQuery => {
+  if (!stylesWithQuery) return {
+    ids: {},
+    styles: {},
+    fullStyles: {}
+  };
+  let cleanStyles;
+  let ids = {};
+  Object.keys(stylesWithQuery).forEach(key => {
+    if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
+    cleanStyles = deepClone(stylesWithQuery);
+    mediaQueriesAndPseudoClasses.forEach(query => {
+      var _ids;
+      const css = createDeclarationBlock(stylesWithQuery[key][query]);
+      const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`;
+      const rule = createCssRule(query, stringHash, css);
+      addCss(`${stringHash}`, rule);
+      delete cleanStyles[key][query];
+      ids = {
+        ...ids,
+        [key]: `${(_ids = ids) !== null && _ids !== void 0 && _ids[key] ? `${ids[key]} ` : ''}${stringHash}`
+      };
+    });
+  });
+  return {
+    ids,
+    styles: cleanStyles,
+    fullStyles: stylesWithQuery
+  };
+};
+export default createStyleSheet;

package/lib-module/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -1,21 +1,51 @@
 import { viewports } from '@telus-uds/system-constants';
+const inherit = _ref => {
+  let {
+    xs,
+    sm = xs,
+    md = sm,
+    lg = md,
+    xl = lg
+  } = _ref;
+  return {
+    xs,
+    sm,
+    md,
+    lg,
+    xl
+  };
+};
 
 /**
  * @typedef { Object } CssStyles
- * @typedef { Record<"xs" | "sm" | "md" | "lg" | "xl", CssStyles> } ViewportStyles
+ */
+
+/**
+ * @typedef { Object } ViewportStyles
+ * @property { CssStyles } xs - The CSS styles for the "xs" viewport (required).
+ * @property { CssStyles } [sm] - Optional styles for the "sm" viewport. Inherits from "xs" if not specified.
+ * @property { CssStyles } [md] - Optional styles for the "md" viewport. Inherits from "sm" if not specified.
+ * @property { CssStyles } [lg] - Optional styles for the "lg" viewport. Inherits from "md" if not specified.
+ * @property { CssStyles } [xl] - Optional styles for the "xl" viewport. Inherits from "lg" if not specified.
+ */
+
+/**
  * @typedef { Record<String, CssStyles> } MediaQueryStyles
  */
 
 /**
  * Generates media query styles based on specified viewport styles.
- * @param {ViewportStyles} viewportStyles
- * @returns { MediaQueryStyles }
+ * @param { Object } viewportStyles - The styles for different viewports.
+ * @param { boolean } [shouldInherit=true] - Flag indicating whether to inherit styles.
+ * @returns { Object } - The media query styles.
  */
 
 function createMediaQueryStyles(viewportStyles) {
-  const viewportsArray = Object.keys(viewportStyles);
-  const mediaQueries = Object.entries(viewportStyles).reduce((acc, _ref) => {
-    let [viewport, styles] = _ref;
+  let shouldInherit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const effectiveStyles = shouldInherit ? inherit(viewportStyles) : viewportStyles;
+  const viewportsArray = viewports.keys;
+  const mediaQueries = Object.entries(effectiveStyles).reduce((acc, _ref2) => {
+    let [viewport, styles] = _ref2;
     const minWidth = viewports.map.get(viewport);
     const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1];
     const maxWidth = viewports.map.get(nextViewport);

package/package.json

@@ -11,9 +11,10 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.47.0",
+    "@telus-uds/system-theme-tokens": "^2.49.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
+    "expo-linear-gradient": "^12.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "lodash.throttle": "^4.1.1",
@@ -38,6 +39,16 @@
     "lib": "lib",
     "test": "__tests__"
   },
+  "exports": {
+    ".": {
+      "import": "./lib-module/index.js",
+      "require": "./lib/index.js"
+    },
+    "./server": {
+      "import": "./lib-module/server.js",
+      "require": "./lib/server.js"
+    }
+  },
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "keywords": [
     "base"
@@ -74,5 +85,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.71.0"
+  "version": "1.73.0"
 }

package/src/Box/Box.jsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { View, ScrollView } from 'react-native'
+import { View, ScrollView, Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
@@ -23,17 +23,20 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
-const selectBoxStyles = ({
-  backgroundColor,
-  gradient,
-  borderWidth,
-  borderColor,
-  borderTopLeftRadius,
-  borderTopRightRadius,
-  borderBottomLeftRadius,
-  borderBottomRightRadius,
-  ...rest
-}) => {
+const selectBoxStyles = (
+  {
+    backgroundColor,
+    gradient,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    ...rest
+  },
+  customGradient
+) => {
   const styles = {
     backgroundColor,
     borderWidth,
@@ -48,7 +51,12 @@ const selectBoxStyles = ({
       angle,
       stops: [stopOne, stopTwo]
     } = gradient
-    styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
+
+    if (Platform.OS === 'web') {
+      styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75%, ${stopTwo.color})`
+    } else if (customGradient && Platform.OS !== 'web') {
+      styles.colors = [stopOne.color, stopTwo.color]
+    }
   }
 
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
@@ -145,6 +153,7 @@ const Box = forwardRef(
       accessibilityRole,
       testID,
       dataSet,
+      customGradient,
       ...rest
     },
     ref
@@ -162,21 +171,26 @@ const Box = forwardRef(
       paddingRight: useSpacingScale(right),
       paddingTop: useSpacingScale(top),
       paddingBottom: useSpacingScale(bottom),
-      ...selectBoxStyles(themeTokens)
+      ...selectBoxStyles(themeTokens, customGradient)
     }
 
+    const childrenToRender =
+      typeof customGradient === 'function'
+        ? customGradient(styles.colors, styles)(children)
+        : children
+
     if (scroll) {
       const scrollProps = typeof scroll === 'object' ? scroll : {}
       scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
       return (
         <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSet} ref={ref}>
-          {children}
+          {childrenToRender}
         </ScrollView>
       )
     }
     return (
       <View {...props} style={styles} testID={testID} dataSet={dataSet} ref={ref}>
-        {children}
+        {childrenToRender}
       </View>
     )
   }
@@ -266,7 +280,11 @@ Box.propTypes = {
   /**
    * Box accepts any content as children.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  /**
+  Use this prop if need to add a custom gradient for mobile
+  */
+  customGradient: PropTypes.func
 }
 
 export default Box

package/src/ColourToggle/ColourBubble.jsx

@@ -0,0 +1,111 @@
+import React, { forwardRef, useMemo } from 'react'
+import PropTypes from 'prop-types'
+
+import { View, Pressable, Platform } from 'react-native'
+import { resolvePressableTokens } from '../utils/pressability'
+import { applyShadowToken } from '../ThemeProvider'
+
+const selectGeneralBubbleTokens = ({
+  outerBubbleHeight,
+  outerBubbleWidth,
+  outerBubbleContentAlignItems,
+  outerBubbleJustifyContent,
+  bubbleBorderColor,
+  bubbleBorderWidth,
+  bubbleBorderRadius
+}) => ({
+  height: outerBubbleHeight,
+  width: outerBubbleWidth,
+  justifyContent: outerBubbleContentAlignItems,
+  alignItems: outerBubbleJustifyContent,
+  borderColor: bubbleBorderColor,
+  borderWidth: bubbleBorderWidth,
+  borderRadius: bubbleBorderRadius,
+  ...Platform.select({ web: { outline: 'none' } })
+})
+
+const selectInnerBubbleTokens = ({
+  innerBubbleHeight,
+  innerBubbleWidth,
+  innerBubbleBorderRadius,
+  borderColor,
+  borderWidth,
+  shadow
+}) => ({
+  height: innerBubbleHeight,
+  width: innerBubbleWidth,
+  borderRadius: innerBubbleBorderRadius,
+  borderColor,
+  borderWidth,
+  ...applyShadowToken(shadow)
+})
+
+const selectBorderBubbleTokens = ({
+  bubbleBorderColor,
+  bubbleBorderWidth,
+  bubbleBorderRadius
+}) => ({
+  borderColor: bubbleBorderColor,
+  borderWidth: bubbleBorderWidth,
+  borderRadius: bubbleBorderRadius
+})
+
+const ColourBubble = forwardRef(
+  ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress }, ref) => {
+    const defaultTokens = tokens({ selected: isSelected })
+
+    const resolveColourBubbleTokens = (pressState) => resolvePressableTokens(tokens, pressState, {})
+
+    const themeTokens = useMemo(() => tokens(), [tokens])
+
+    return (
+      <Pressable
+        style={(state) => [
+          selectGeneralBubbleTokens(resolveColourBubbleTokens(state)),
+          isSelected && selectBorderBubbleTokens(defaultTokens)
+        ]}
+        onPress={onPress}
+        accessible
+        accessibilityRole="radio"
+        accessibilityLabel={colourName}
+        accessibilityState={{ checked: isSelected }}
+        ref={ref}
+        testID={id}
+      >
+        <View style={[selectInnerBubbleTokens(themeTokens), { backgroundColor: colourHexCode }]} />
+      </Pressable>
+    )
+  }
+)
+ColourBubble.displayName = 'ColourBubble'
+
+ColourBubble.propTypes = {
+  /**
+   * Colour toggle tokens callback.
+   */
+  tokens: PropTypes.func,
+  /**
+   * ID of each colour bubble
+   */
+  id: PropTypes.string,
+  /**
+   * Hexadecimal code for the background of the colour bubble
+   */
+  colourHexCode: PropTypes.string,
+  /**
+   * Name of the colour bubble
+   */
+  colourName: PropTypes.string,
+  /**
+   * If the current colour bubble is selected
+   */
+  isSelected: PropTypes.bool,
+  /**
+   * If provided, this function is called when the current selection
+   * of the color is changed of all currently `items`.
+   * Receives two parameters: item object selected and the event
+   */
+  onPress: PropTypes.func
+}
+
+export default ColourBubble

package/src/ColourToggle/ColourToggle.jsx

@@ -0,0 +1,83 @@
+import React, { forwardRef, useState } from 'react'
+import { View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { useThemeTokensCallback } from '../ThemeProvider'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+import { StackWrap } from '../StackView'
+import Typography from '../Typography'
+import ColourBubble from './ColourBubble'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+const ColourToggle = forwardRef(
+  ({ tokens, variant, defaultColourId, items, onChange, ...rest }, ref) => {
+    const [currentColourId, setCurrentColourId] = useState(defaultColourId)
+    const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant)
+
+    const { space } = getTokens()
+    const { colourName: currentColourName = '' } =
+      items.find((item) => item.id === currentColourId) || ''
+
+    return (
+      <View ref={ref} {...selectProps(rest)}>
+        <Typography>{currentColourName}</Typography>
+        <StackWrap space={space} accessibilityRole="radiogroup">
+          {items.map(({ id, colourHexCode, colourName }, index) => {
+            const colourBubbleId = id || `ColourBubble[${index}]`
+
+            const handleChangeColour = (event) => {
+              setCurrentColourId(id)
+              onChange?.(event, { id, colourHexCode, colourName })
+            }
+
+            return (
+              <ColourBubble
+                key={colourBubbleId}
+                id={colourBubbleId}
+                tokens={getTokens}
+                isSelected={id === currentColourId}
+                colourHexCode={colourHexCode}
+                colourName={colourName}
+                onPress={handleChangeColour}
+              />
+            )
+          })}
+        </StackWrap>
+      </View>
+    )
+  }
+)
+ColourToggle.displayName = 'ColourToggle'
+
+ColourToggle.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Optional theme token overrides for the outer ColourToggle component
+   */
+  tokens: getTokensPropType('ColourToggle'),
+  /**
+   * Colour toggle variant.
+   */
+  variant: variantProp.propType,
+  /**
+   * Id of the selected color when component mounts
+   */
+  defaultColourId: PropTypes.string,
+  /**
+   * Array of objects containing specifics for each ColourBubble to be rendered in the group.
+   */
+  items: PropTypes.arrayOf(
+    PropTypes.exact({
+      colourHexCode: PropTypes.string,
+      colourName: PropTypes.string,
+      id: PropTypes.string
+    })
+  ),
+  /**
+   * If provided, this function is called when the current selection of the color is changed of all currently `items`. Receives two parameters: item object selected and the event
+   */
+  onChange: PropTypes.func
+}
+
+export default ColourToggle

package/src/ColourToggle/index.js

@@ -0,0 +1,3 @@
+import ColourToggle from './ColourToggle'
+
+export default ColourToggle