@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/ColourToggle/ColourBubble.js

@@ -1,126 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import Pressable from "react-native-web/dist/exports/Pressable";
-import Platform from "react-native-web/dist/exports/Platform";
-import { resolvePressableTokens } from '../utils/pressability';
-import { applyShadowToken } from '../ThemeProvider';
-import { getTokensPropType } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const selectGeneralBubbleTokens = _ref => {
-  let {
-    outerBubbleHeight,
-    outerBubbleWidth,
-    outerBubbleContentAlignItems,
-    outerBubbleJustifyContent,
-    bubbleBorderColor,
-    bubbleBorderWidth,
-    bubbleBorderRadius
-  } = _ref;
-  return {
-    height: outerBubbleHeight,
-    width: outerBubbleWidth,
-    justifyContent: outerBubbleContentAlignItems,
-    alignItems: outerBubbleJustifyContent,
-    borderColor: bubbleBorderColor,
-    borderWidth: bubbleBorderWidth,
-    borderRadius: bubbleBorderRadius,
-    ...Platform.select({
-      web: {
-        outline: 'none'
-      }
-    })
-  };
-};
-const selectInnerBubbleTokens = _ref2 => {
-  let {
-    innerBubbleHeight,
-    innerBubbleWidth,
-    innerBubbleBorderRadius,
-    borderColor,
-    borderWidth,
-    shadow
-  } = _ref2;
-  return {
-    height: innerBubbleHeight,
-    width: innerBubbleWidth,
-    borderRadius: innerBubbleBorderRadius,
-    borderColor,
-    borderWidth,
-    ...applyShadowToken(shadow)
-  };
-};
-const selectBorderBubbleTokens = _ref3 => {
-  let {
-    bubbleBorderColor,
-    bubbleBorderWidth,
-    bubbleBorderRadius
-  } = _ref3;
-  return {
-    borderColor: bubbleBorderColor,
-    borderWidth: bubbleBorderWidth,
-    borderRadius: bubbleBorderRadius
-  };
-};
-const ColourBubble = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
-  let {
-    tokens = {},
-    id,
-    colourHexCode,
-    colourName,
-    isSelected,
-    onPress
-  } = _ref4;
-  const defaultTokens = tokens({
-    selected: isSelected
-  });
-  const resolveColourBubbleTokens = pressState => resolvePressableTokens(tokens, pressState, {});
-  const themeTokens = React.useMemo(() => tokens(), [tokens]);
-  return /*#__PURE__*/_jsx(Pressable, {
-    style: state => [selectGeneralBubbleTokens(resolveColourBubbleTokens(state)), isSelected && selectBorderBubbleTokens(defaultTokens)],
-    onPress: onPress,
-    accessible: true,
-    accessibilityRole: "radio",
-    accessibilityLabel: colourName,
-    accessibilityState: {
-      checked: isSelected
-    },
-    ref: ref,
-    testID: id,
-    children: /*#__PURE__*/_jsx(View, {
-      style: [selectInnerBubbleTokens(themeTokens), {
-        backgroundColor: colourHexCode
-      }]
-    })
-  });
-});
-ColourBubble.displayName = 'ColourBubble';
-ColourBubble.propTypes = {
-  /**
-   * Colour toggle tokens callback.
-   */
-  tokens: getTokensPropType('ColourToggle'),
-  /**
-   * 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/lib-module/ColourToggle/ColourToggle.js

@@ -1,92 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-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';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    tokens,
-    variant,
-    defaultColourId,
-    items,
-    onChange,
-    ...rest
-  } = _ref;
-  const [currentColourId, setCurrentColourId] = React.useState(defaultColourId);
-  const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant);
-  const {
-    space
-  } = getTokens();
-  const {
-    colourName: currentColourName = ''
-  } = items.find(item => item.id === currentColourId) || '';
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    ...selectProps(rest),
-    children: [/*#__PURE__*/_jsx(Typography, {
-      children: currentColourName
-    }), /*#__PURE__*/_jsx(StackWrap, {
-      space: space,
-      accessibilityRole: "radiogroup",
-      children: items.map((_ref2, index) => {
-        let {
-          id,
-          colourHexCode,
-          colourName
-        } = _ref2;
-        const colourBubbleId = id || `ColourBubble[${index}]`;
-        const handleChangeColour = event => {
-          setCurrentColourId(id);
-          onChange === null || onChange === void 0 ? void 0 : onChange(event, {
-            id,
-            colourHexCode,
-            colourName
-          });
-        };
-        return /*#__PURE__*/_jsx(ColourBubble, {
-          id: colourBubbleId,
-          tokens: getTokens,
-          isSelected: id === currentColourId,
-          colourHexCode: colourHexCode,
-          colourName: colourName,
-          onPress: handleChangeColour
-        }, colourBubbleId);
-      })
-    })]
-  });
-});
-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/lib-module/ColourToggle/index.js

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

package/lib-module/Divider/Divider.js

@@ -1,133 +0,0 @@
-import React 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 { useThemeTokens } from '../ThemeProvider';
-import Spacer from '../Spacer';
-import { a11yProps, getTokensPropType, selectSystemProps, spacingProps, variantProp, viewProps } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-/**
- * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
- * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
- */
-
-/**
- * A basic divider component, horizontal by default. Color and thickness can be controlled by theme.
- * Divider is based on the flexbox model and uses `alignSelf: flex` to span its flex parent.
- *
- * ## Vertical
- *
- * Vertical dividers can be created by passing a `vertical` boolean prop.
- * Note that for a vertical divider the parent flex element **must** have flex direction set to row.
- * This is the default for web but not for React Native.
- *
- * In a flexbox row, vertical dividers will automatically size to their parent height.
- *
- * ## Space
- *
- * Use this to create **space either side of the divider**. For simple cases, pass a number referring to
- * a position on the theme's spacing scale; for example, this will put a Spacer of the smallest supported
- * size either side of the divider:
- *
- * ```jsx
- * <Divider space={1} />
- * ```
- *
- * `space` prop uses `useSpacingScale` and may accept a {@link SpacingObject} or a {@link SpacingIndex} number.
- *
- * To **reduce the length of a divider** as well as creating space between it and its neighbours, wrap it in
- * a `Box` component. For example, this will have the second-smallest theme-supported spacing value between
- * the dividing line and its neighbours, and will shorten the line at either end by the same amount:
- *
- * ```jsx
- * <Box space={2}><Divider /></Box>
- * ```
- *
- * ## Accessibility
- *
- * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
- */
-const Divider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    variant,
-    vertical = false,
-    space,
-    tokens,
-    ...rest
-  } = _ref;
-  const {
-    color,
-    width
-  } = useThemeTokens('Divider', tokens, variant);
-  const borderStyles = vertical ? {
-    borderRightColor: color,
-    borderRightWidth: width
-  } : {
-    borderBottomColor: color,
-    borderBottomWidth: width
-  };
-  const a11y = Platform.OS === 'web' ?
-  // There are aria attributes for dividers on web
-  {
-    // Early versions of React Native Web support 'aria-orientation' while
-    // later versions only support accessibilityOrientation and map it. Supply both.
-    'aria-orientation': vertical ? 'vertical' : 'horizontal',
-    accessibilityOrientation: vertical ? 'vertical' : 'horizontal',
-    accessibilityRole: 'separator'
-  } :
-  // There are no such equivalent attributes for native
-  {};
-  const {
-    testID,
-    ...selectedProps
-  } = selectProps({
-    ...a11y,
-    ...rest
-  });
-  const divider = /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [styles.divider, borderStyles],
-    testID: testID,
-    ...selectedProps
-  });
-  if (!space) return divider;
-  const spacerProps = {
-    space,
-    direction: vertical ? 'row' : 'column'
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Spacer, {
-      ...spacerProps,
-      testID: testID ? `${testID}-Spacer-before` : undefined
-    }), divider, /*#__PURE__*/_jsx(Spacer, {
-      ...spacerProps,
-      testID: testID ? `${testID}-Spacer-after` : undefined
-    })]
-  });
-});
-Divider.displayName = 'Divider';
-Divider.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Divider'),
-  /**
-   * A number referring to a position on the space scale to create space on either side of the divider
-   */
-  space: spacingProps.types.spacingValue,
-  variant: variantProp.propType,
-  /**
-   * By default, the divider is a horizontal line the full width of its parent.
-   * With `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.
-   */
-  vertical: PropTypes.bool
-};
-const styles = StyleSheet.create({
-  divider: {
-    alignSelf: 'stretch'
-  }
-});
-export default Divider;

package/lib-module/Divider/index.js

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

package/lib-module/DownloadApp/DownloadApp.js

@@ -1,160 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { a11yProps, linkProps, hrefAttrsProp, viewProps, getTokensPropType, resolvePressableTokens, variantProp, copyPropTypes, selectSystemProps, useCopy } from '../utils';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import defaultDictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
-const selectOuterStyles = _ref => {
-  let {
-    borderColor,
-    borderWidth,
-    borderGap,
-    borderRadius,
-    padding
-  } = _ref;
-  return {
-    outline: 'none',
-    borderColor,
-    borderWidth,
-    borderGap,
-    borderRadius,
-    padding
-  };
-};
-const DownloadApp = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    copy = 'en',
-    dictionary = defaultDictionary,
-    type = 'ios',
-    href,
-    onPress,
-    tokens = {},
-    variant = {},
-    ...props
-  } = _ref2;
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const {
-    hrefAttrs,
-    rest
-  } = hrefAttrsProp.bundle(props);
-  const selectedProps = selectProps({
-    accessibilityRole: href ? 'link' : 'button',
-    href,
-    onPress: linkProps.handleHref({
-      href,
-      onPress
-    }),
-    hrefAttrs,
-    ...rest
-  });
-  const getDownloadAppTokens = useThemeTokensCallback('DownloadApp', tokens, variant);
-  const resolveDownloadAppTokens = pressableState => {
-    const themeTokens = resolvePressableTokens(getDownloadAppTokens, pressableState, {});
-    return selectOuterStyles(themeTokens);
-  };
-  const {
-    androidENIcon,
-    androidFRIcon,
-    iosENIcon,
-    iosFRIcon
-  } = getDownloadAppTokens();
-  const imageResources = {
-    en: {
-      android: androidENIcon,
-      ios: iosENIcon
-    },
-    fr: {
-      android: androidFRIcon,
-      ios: iosFRIcon
-    }
-  };
-  const IconComponent = imageResources[copy][type];
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    style: pressState => [resolveDownloadAppTokens(pressState), staticStyles.row],
-    ...selectedProps,
-    children: /*#__PURE__*/_jsx(IconComponent, {
-      style: staticImageSizes[type][copy],
-      alt: type === 'ios' ? getCopy('altTextIos') : getCopy('altTextAndroid')
-    })
-  });
-});
-DownloadApp.displayName = 'DownloadApp';
-const dictionaryContentShape = PropTypes.shape({
-  altTextAndroid: PropTypes.string.isRequired,
-  altTextIos: PropTypes.string.isRequired
-});
-DownloadApp.propTypes = {
-  ...selectedSystemPropTypes,
-  copy: copyPropTypes,
-  /**
-   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
-   */
-  dictionary: PropTypes.shape({
-    en: dictionaryContentShape,
-    fr: dictionaryContentShape
-  }),
-  /**
-   * Select the type of image to show.
-   */
-  type: PropTypes.oneOf(['android', 'ios']),
-  /**
-   * It's a simple link that opens the Download Button instead of the onPress function.
-   */
-  href: PropTypes.string,
-  /**
-   * Function called when the button is pressed. Required unless the button has a href.
-   */
-  onPress: PropTypes.func,
-  /**
-   * DownloadApp tokens.
-   */
-  tokens: getTokensPropType('DownloadApp'),
-  /**
-   * DownloadApp variant.
-   */
-  variant: variantProp.propType
-};
-const staticStyles = StyleSheet.create({
-  row: {
-    ...Platform.select({
-      web: {
-        display: 'inline-flex',
-        width: 'fit-content'
-      },
-      default: {
-        alignSelf: 'flex-start'
-      }
-    })
-  }
-});
-const staticImageSizes = {
-  android: {
-    en: {
-      width: 162,
-      height: 48
-    },
-    fr: {
-      width: 162,
-      height: 48
-    }
-  },
-  ios: {
-    en: {
-      width: 144,
-      height: 48
-    },
-    fr: {
-      width: 152,
-      height: 48
-    }
-  }
-};
-export default DownloadApp;

package/lib-module/DownloadApp/dictionary.js

@@ -1,10 +0,0 @@
-export default {
-  en: {
-    altTextAndroid: 'Get it on Google Play',
-    altTextIos: 'Download on the App Store'
-  },
-  fr: {
-    altTextAndroid: 'Disponible sur Google Play',
-    altTextIos: 'Télécharger dans l’App Store'
-  }
-};

package/lib-module/DownloadApp/index.js

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

package/lib-module/ExpandCollapse/Accordion.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import ExpandCollapse from './ExpandCollapse';
-
-/**
- * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const Accordion = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(ExpandCollapse, {
-  ref: ref,
-  ...props,
-  maxOpen: 1
-}));
-Accordion.displayName = 'Accordion';
-Accordion.propTypes = ExpandCollapse.propTypes;
-export default Accordion;