@telus-uds/components-base 1.71.0 → 1.72.0

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/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/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/package.json

@@ -11,7 +11,7 @@
     "@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.48.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "lodash.debounce": "^4.0.8",
@@ -74,5 +74,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.71.0"
+  "version": "1.72.0"
 }

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

package/src/Modal/ModalContent.jsx

@@ -25,14 +25,15 @@ const ModalContent = ({
   children,
   onCancel
 }) => {
+  const viewport = useViewport()
   const { headingColor, cancelButtonColor, ...themeTokens } = useThemeTokens(
     'Modal',
     tokens,
-    variant
+    variant,
+    { viewport }
   )
   const [scrollContainerHeight, setScrollContainerHeight] = useState(0)
   const [scrollContentHeight, setScrollContentHeight] = useState(0)
-  const viewport = useViewport()
 
   const handleContainerLayout = ({
     nativeEvent: {
@@ -128,7 +129,7 @@ const ModalContent = ({
             </Button>
           )}
           {hasCancelButton ? (
-            <View style={styles.styledTextButtonContainer}>
+            <View>
               <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
                 {cancelButtonText}
               </CancelButton>
@@ -145,9 +146,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     minHeight: Platform.OS === 'web' ? '100%' : 'auto'
-  },
-  styledTextButtonContainer: {
-    flex: 1
   }
 })
 

package/src/OrderedList/Item.jsx

@@ -0,0 +1,152 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+const selectItemTextStyles = (
+  { itemFontHeight, itemFontSize, itemLineHeight, itemFontName, itemColor },
+  themeOptions
+) =>
+  applyTextStyles({
+    fontWeight: itemFontHeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor,
+    themeOptions,
+    lineHeight: itemLineHeight
+  })
+
+const selectItemCounterStyles = ({
+  itemBulletContainerWidth,
+  itemBulletContainerAlign,
+  itemFontWeight,
+  itemFontSize,
+  itemFontName,
+  itemLineHeight,
+  themeOptions,
+  listGutter,
+  itemColor
+}) => ({
+  color: itemColor,
+  width: itemBulletContainerWidth,
+  paddingRight: listGutter,
+  textAlign: itemBulletContainerAlign,
+  ...applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    themeOptions
+  }),
+  lineHeight: itemLineHeight * itemFontSize
+})
+
+const selectItemContentStyles = ({ interItemMargin, ...themeTokens }, isLastChild) => ({
+  ...themeTokens,
+  marginBottom: !isLastChild ? interItemMargin : 0
+})
+
+const Item = forwardRef(
+  ({ children, index, isLastChild, title, tokens, variant, ...rest }, ref) => {
+    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 (
+      <ItemBase
+        ref={ref}
+        style={{ ...staticStyles.container, ...themeTokens }}
+        {...selectProps(rest)}
+      >
+        <View style={[staticStyles.itemCounter, selectItemCounterStyles(themeTokens)]}>
+          {itemCounter}
+        </View>
+        <View style={staticStyles.itemContent}>
+          {title ? (
+            <StackView tokens={{ flexShrink: 1 }} space={0}>
+              <Typography variant={{ size: 'h4' }} tokens={headingTokens}>
+                {title}
+              </Typography>
+              <View style={selectItemContentStyles(themeTokens, isLastChild)}>{itemContent}</View>
+            </StackView>
+          ) : (
+            <View style={selectItemContentStyles(themeTokens, isLastChild)}>{itemContent}</View>
+          )}
+        </View>
+      </ItemBase>
+    )
+  }
+)
+
+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/src/OrderedList/ItemBase.jsx

@@ -0,0 +1,31 @@
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+
+const Item = forwardRef(({ children, style, ...rest }, ref) => (
+  <View accessibilityRole="listitem" ref={ref} style={[staticStyles.container, style]} {...rest}>
+    {children}
+  </View>
+))
+
+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'
+  }
+})