@telus-uds/components-base 1.70.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/lib-module/utils/ssr-media-query/utils/inject.js

@@ -1,6 +1,16 @@
 import React from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
 const rules = {};
+let styleSheet;
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  styleSheet = (() => {
+    const style = document.createElement('style');
+    style.id = 'RNMQCSS';
+    style.appendChild(document.createTextNode(''));
+    document.head.appendChild(style);
+    return style.sheet;
+  })();
+}
 export const hasCss = (id, text) => {
   var _rules$id$text, _rules$id$text$includ;
   return !!rules[id] && !!((_rules$id$text = rules[id].text) !== null && _rules$id$text !== void 0 && (_rules$id$text$includ = _rules$id$text.includes) !== null && _rules$id$text$includ !== void 0 && _rules$id$text$includ.call(_rules$id$text, text));
@@ -10,6 +20,9 @@ export const addCss = (id, text) => {
     var _rules$id;
     rules[id] = (rules === null || rules === void 0 ? void 0 : rules[id]) || {};
     rules[id].text = (((_rules$id = rules[id]) === null || _rules$id === void 0 ? void 0 : _rules$id.text) || '') + text;
+    if (styleSheet) {
+      styleSheet.insertRule(text, Object.keys(rules).length - 1);
+    }
   }
 };
 export const flush = () => {

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.46.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.70.0"
+  "version": "1.72.0"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -241,31 +241,24 @@ const Autocomplete = forwardRef(
     }, [nestedSelectedValue, items])
 
     const handleClose = (event) => {
-      if (event.type === 'keydown') {
-        if (event.key === 'Escape' || event.key === 27) {
-          setIsExpanded(false)
-          setNestedSelectedValue(null)
-        } else if (event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef?.current) {
-          targetRef.current.focus()
-        }
-      } else if (
-        event.type === 'click' &&
-        openOverlayRef?.current &&
-        event.target &&
-        !openOverlayRef?.current?.contains(event.target)
+      if (
+        (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27')) ||
+        (event.type === 'click' && !openOverlayRef?.current?.contains(event.target)) ||
+        (event.type === 'touchstart' &&
+          openOverlayRef?.current &&
+          event.touches[0].target &&
+          !openOverlayRef?.current?.contains(event.touches[0].target))
       ) {
         setIsExpanded(false)
+        setNestedSelectedValue(null)
       } else if (
-        event.type === 'touchstart' &&
-        openOverlayRef?.current &&
-        event.touches[0].target &&
-        !openOverlayRef?.current?.contains(event.touches[0].target)
+        event.type === 'keydown' &&
+        event.key === 'ArrowDown' &&
+        isExpanded &&
+        !isLoading &&
+        targetRef?.current
       ) {
-        setIsExpanded(false)
-      } else if (Platform.OS === 'web') {
-        // needed for dropdown to be collapsed when clicking outside on web
-        setIsExpanded(false)
-        setNestedSelectedValue(null)
+        targetRef.current.focus()
       }
     }
     const itemsToShow = currentValue

package/src/Card/Card.jsx

@@ -1,11 +1,13 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import { View } from 'react-native'
 
-import { useThemeTokens } from '../ThemeProvider'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props'
 import CardBase from './CardBase'
+import PressableCardBase from './PressableCardBase'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -57,24 +59,84 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = forwardRef(({ children, tokens, variant, dataSet, ...rest }, ref) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
+const Card = forwardRef(
+  ({ children, tokens, variant, dataSet, onPress, interactiveCard, ...rest }, ref) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
+    const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
+      interactive: true,
+      ...(interactiveCard?.variant || {})
+    })
+    // When interactive area is present, spacing tokens should only be applied
+    // to individual Card sections, not Card as a whole
+    const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...restOfTokens } = themeTokens
 
-  return (
-    <CardBase ref={ref} tokens={themeTokens} dataSet={dataSet} {...selectProps(rest)}>
-      {children}
-    </CardBase>
-  )
-})
+    return (
+      <>
+        <CardBase
+          ref={ref}
+          tokens={interactiveCard?.body ? restOfTokens : themeTokens}
+          dataSet={dataSet}
+          {...selectProps(rest)}
+        >
+          {interactiveCard?.body ? (
+            <>
+              <PressableCardBase
+                ref={ref}
+                tokens={getThemeTokens}
+                dataSet={dataSet}
+                onPress={onPress}
+                {...selectProps(rest)}
+              >
+                {interactiveCard?.body}
+              </PressableCardBase>
+              {children ? (
+                <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>
+                  {children}
+                </View>
+              ) : null}
+            </>
+          ) : (
+            children
+          )}
+        </CardBase>
+      </>
+    )
+  }
+)
 
 Card.displayName = 'Card'
 
 Card.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Card content.
+   */
   children: PropTypes.node,
+  /**
+   * Card tokens.
+   */
   tokens: getTokensPropType('Card'),
-  variant: variantProp.propType
+  /**
+   * Card variant.
+   */
+  variant: variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * Note: This is only available when `interactiveCard` prop is used.
+   */
+  onPress: PropTypes.func,
+  /**
+   * Object to set interactive card's properties
+   * - body: The body of the interactive card, can be any renderable node
+   * - tokens: The tokens to be used for the interactive card
+   * - variant: The variant to be used for the interactive card
+   */
+  interactiveCard: PropTypes.shape({
+    body: PropTypes.node,
+    tokens: getTokensPropType('Card'),
+    variant: variantProp.propType
+  })
 }
 
 export default Card

package/src/Card/PressableCardBase.jsx

@@ -54,6 +54,7 @@ const PressableCardBase = forwardRef(
       inactive,
       href,
       hrefAttrs,
+      dataSet,
       accessibilityRole = href ? 'link' : undefined,
       ...rawRest
     },
@@ -103,6 +104,7 @@ const PressableCardBase = forwardRef(
         onKeyDown={handleKeyDown}
         hrefAttrs={hrefAttrs}
         style={getOuterBorderStyle}
+        dataSet={dataSet}
         {...selectProps({ ...rest, accessibilityRole })}
       >
         {(pressableState) => (

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