@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/Card/CardBase.js

@@ -1,114 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-import ImageBackground from "react-native-web/dist/exports/ImageBackground";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { applyShadowToken } from '../ThemeProvider';
-import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils';
-import { a11yProps, viewProps, selectSystemProps } from '../utils/props';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-// Ensure explicit selection of tokens
-const selectStyles = _ref => {
-  let {
-    flex,
-    backgroundColor,
-    borderColor,
-    borderRadius,
-    borderWidth,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    minWidth,
-    shadow,
-    backgroundGradient,
-    gradient
-  } = _ref;
-  return {
-    flex,
-    backgroundColor,
-    borderColor,
-    borderRadius,
-    borderWidth,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    minWidth,
-    ...applyShadowToken(shadow),
-    ...(gradient && Platform.OS === 'web' ? {
-      backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops[0].color}, ${gradient.stops[1].color})`,
-      backgroundOrigin: `border-box`,
-      boxShadow: `inset 0 1000px white`,
-      border: `${borderWidth}px solid transparent`
-    } : {}),
-    ...(backgroundGradient && Platform.OS === 'web' ? {
-      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
-    } : {})
-  };
-};
-
-/**
- * A themeless base component for Card which components can apply theme tokens to. Not
- * intended to be used in apps or sites directly: build themed components on top of this.
- */
-const CardBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children,
-    tokens,
-    dataSet,
-    backgroundImage,
-    ...rest
-  } = _ref2;
-  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
-  const props = selectProps(rest);
-  const {
-    src = '',
-    alt = '',
-    resizeMode = ''
-  } = backgroundImage || {};
-  const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover');
-  const imageSourceViewport = formatImageSource(useResponsiveProp(src));
-  return /*#__PURE__*/_jsx(View, {
-    style: cardStyle,
-    dataSet: dataSet,
-    ref: ref,
-    ...props,
-    children: src ? /*#__PURE__*/_jsx(ImageBackground, {
-      alt: alt,
-      source: imageSourceViewport,
-      imageStyle: {
-        borderRadius: (cardStyle === null || cardStyle === void 0 ? void 0 : cardStyle.borderRadius) - (cardStyle === null || cardStyle === void 0 ? void 0 : cardStyle.borderWidth)
-      },
-      resizeMode: backgroundImageResizeMode,
-      style: styles.imageBackground,
-      children: children
-    }) : children
-  });
-});
-CardBase.displayName = 'CardBase';
-const styles = StyleSheet.create({
-  imageBackground: {
-    width: '100%',
-    height: '100%'
-  }
-});
-CardBase.propTypes = {
-  ...selectedSystemPropTypes,
-  children: PropTypes.node,
-  tokens: getTokensPropType('Card'),
-  /**
-   * Apply background image to the card.
-   */
-  backgroundImage: PropTypes.shape({
-    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
-    // src is an object when used responsively to provide different image sources for different screen sizes
-    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
-    alt: PropTypes.string,
-    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
-  })
-};
-export default CardBase;

package/lib-module/Card/PressableCardBase.js

@@ -1,112 +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 { useViewport } from '../ViewportProvider';
-import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider';
-import { a11yProps, clickProps, focusHandlerProps, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
-import CardBase from './CardBase';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
-// Outer border tokens. TODO: centralise common token sets like these as part of
-// https://github.com/telus/universal-design-system/issues/782
-'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];
-export const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key => [key, tokens[key]]));
-
-/**
- * A pressable themeless base component that handles pressable states and passes tokens
- * based on these to an outer border and a base Card component. Not intended to be used in
- * apps or sites directly: build themed components on top of this.
- */
-const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    tokens,
-    checked,
-    validation,
-    inactive,
-    href,
-    hrefAttrs,
-    dataSet,
-    accessibilityRole = href ? 'link' : undefined,
-    ...rawRest
-  } = _ref;
-  const {
-    onPress,
-    ...rest
-  } = clickProps.toPressProps(rawRest);
-  const viewport = useViewport();
-  const additionalState = {
-    checked,
-    validation,
-    inactive,
-    viewport
-  };
-  const getCardState = pressableState => resolvePressableState(pressableState, additionalState);
-  const getTokens = pressableState => validateThemeTokens(resolvePressableTokens(tokens, pressableState, additionalState), getTokensSetPropType(tokenKeys, {
-    requireAll: true
-  }), 'PressableCard');
-  const getCardTokens = pressableState => selectTokens('Card', getTokens(pressableState));
-  const getOuterBorderStyle = pressableState => {
-    const {
-      flex,
-      minWidth,
-      outerBorderColor,
-      outerBorderGap = 0,
-      outerBorderWidth = 0,
-      borderRadius
-    } = getTokens(pressableState);
-    return {
-      flex,
-      minWidth: minWidth + outerBorderGap + outerBorderWidth,
-      ...applyOuterBorder({
-        outerBorderColor,
-        outerBorderGap,
-        outerBorderWidth,
-        borderRadius
-      }),
-      ...Platform.select({
-        web: {
-          outline: 'none'
-        }
-      })
-    };
-  };
-  const handleChange = linkProps.handleHref({
-    href,
-    onPress
-  });
-  const handleKeyDown = event => {
-    // The expected keyboard shortcut for selecting a focused item is the Space key
-    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
-  };
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    href: href,
-    onPress: handleChange,
-    onKeyDown: handleKeyDown,
-    hrefAttrs: hrefAttrs,
-    style: getOuterBorderStyle,
-    dataSet: dataSet,
-    ...selectProps({
-      ...rest,
-      accessibilityRole
-    }),
-    children: pressableState => /*#__PURE__*/_jsx(CardBase, {
-      tokens: getCardTokens(pressableState),
-      children: typeof children === 'function' ? children(getCardState(pressableState)) : children
-    })
-  });
-});
-PressableCardBase.displayName = 'PressableCardBase';
-PressableCardBase.propTypes = {
-  ...selectedSystemPropTypes,
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  tokens: getTokensSetPropType(tokenKeys, {
-    partial: true,
-    allowFunction: true
-  }),
-  variant: variantProp.propType
-};
-export default withLinkRouter(PressableCardBase);

package/lib-module/Card/index.js

@@ -1,4 +0,0 @@
-import Card from './Card';
-export default Card;
-export { default as PressableCardBase } from './PressableCardBase';
-export * from './PressableCardBase';

package/lib-module/CardGroup/CardGroup.js

@@ -1,210 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { a11yProps, focusHandlerProps, containUniqueFields, selectSystemProps, useMultipleInputValues, useInputValue, useCopy, viewProps, variantProp, getTokensPropType, copyPropTypes } from '../utils';
-import defaultDictionary from './dictionary';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import StackView, { StackWrap } from '../StackView';
-import Card from '../Card';
-import Fieldset from '../Fieldset';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const uniqueFields = ['id'];
-const CardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    copy = 'en',
-    tokens = {},
-    variant = {},
-    items = [],
-    validation,
-    feedback,
-    initialCheckedIds,
-    checkedIds,
-    onChange,
-    role = 'radiogroup',
-    isInactive,
-    name: inputGroupName,
-    dictionary = defaultDictionary,
-    ...rest
-  } = _ref;
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const viewport = useViewport();
-  const cardGroupTokens = useThemeTokens('CardGroup', tokens, variant, {
-    viewport
-  });
-  const {
-    space,
-    fieldSpace,
-    direction,
-    showIcon,
-    outlineWidth,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    outlineOffset,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  } = cardGroupTokens;
-  const borderTokens = {
-    outlineWidth,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    outlineOffset
-  };
-  const singleSelection = role === 'radiogroup';
-  const inputControl = {
-    value: checkedIds,
-    initialValue: initialCheckedIds,
-    onChange,
-    readOnly: isInactive
-  };
-  const singleInputValue = useInputValue(inputControl);
-  const multipleInputValues = useMultipleInputValues(inputControl);
-  const StackContainer = direction === 'row' ? StackWrap : StackView;
-  if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error(`CardGroup items must have unique ${uniqueFields.join(', ')}`);
-  }
-  const handleChange = React.useCallback((checked, event, cardId, itemOnChange) => {
-    if (checked && singleSelection) {
-      singleInputValue.setValue(cardId, event);
-    } else {
-      multipleInputValues.toggleOneValue(cardId, event);
-    }
-    return itemOnChange === null || itemOnChange === void 0 ? void 0 : itemOnChange(checked, event);
-  }, [singleInputValue, multipleInputValues, singleSelection]);
-  return /*#__PURE__*/_jsx(Fieldset, {
-    copy: copy,
-    ref: ref,
-    name: inputGroupName,
-    space: fieldSpace,
-    feedback: feedback,
-    validation: validation,
-    tokens: borderTokens,
-    inactive: isInactive,
-    showErrorBorder: true,
-    showIcon: showIcon,
-    accessibilityRole: role,
-    ...selectProps(rest),
-    children: props => /*#__PURE__*/_jsx(StackContainer, {
-      space: space,
-      children: items.map((_ref2, index) => {
-        let {
-          id,
-          interactiveCard,
-          card,
-          onPress: itemOnChange,
-          ...itemRest
-        } = _ref2;
-        const cardId = id || `${getCopy('prefixId')}[${index}]`;
-        const itemHandleChange = (checked, event) => handleChange(checked, event, cardId, itemOnChange);
-        return /*#__PURE__*/_jsx(Card, {
-          id: cardId,
-          onPress: itemHandleChange,
-          interactiveCard: {
-            ...interactiveCard,
-            tokens: {
-              paddingTop,
-              paddingBottom,
-              paddingLeft,
-              paddingRight,
-              ...(interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens)
-            },
-            variant: {
-              isControl: true,
-              selected: singleSelection ? singleInputValue.currentValue === cardId : multipleInputValues.currentValues.includes(cardId),
-              inactive: isInactive
-            },
-            selectionType: role
-          },
-          ...selectItemProps(itemRest),
-          ...props,
-          children: card === null || card === void 0 ? void 0 : card.body
-        }, cardId);
-      })
-    })
-  });
-});
-CardGroup.displayName = 'CardGroup';
-const dictionaryContentShape = PropTypes.shape({
-  prefixId: PropTypes.string.isRequired
-});
-CardGroup.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
-  }),
-  /**
-   * Optional theme token overrides for the outer RadioCardGroup component
-   */
-  tokens: getTokensPropType('CardGroup'),
-  /**
-   * Theme variants, shared between both RadioCardGroup and RadioCard
-   */
-  variant: variantProp.propType,
-  /**
-   * Array of objects containing specifics for each Card to be rendered in the group.
-   */
-  items: PropTypes.arrayOf(PropTypes.exact({
-    ...selectedItemPropTypes,
-    id: PropTypes.string,
-    interactiveCard: PropTypes.object,
-    card: PropTypes.object,
-    onPress: PropTypes.func
-  })),
-  /**
-   * Current validation status of the group, passed to the feedback element if there is one.
-   */
-  validation: PropTypes.oneOf(['error', 'success']),
-  /**
-   * If provided, a Feedback element is rendered containing this text.
-   */
-  feedback: PropTypes.string,
-  /**
-   * If provided, the card with this id is selected on first render.
-   * If the role is radiogroup, it's a string
-   * If the role is checkbox, it's a array of string.
-   * Can have 'null' as value
-   */
-  initialCheckedIds: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  /**
-   * If not undefined, the card with this id is selected (or none is selected if `null`), and the
-   * element's selection state will be controlled by its parent using the `onChange` function.
-   * If the role is radiogroup, it's a string
-   * If the role is checkbox, it's a array of string.
-   * Can have 'null' as value
-   */
-  checkedIds: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  /**
-   * Function to call on change in selection state. Is required if the selection state is controlled
-   * by a parent using checkedId and the input is not readOnly.
-   */
-  onChange: PropTypes.func,
-  /**
-   * Renders the card group like a radio card group or a checkbox card group
-   */
-  role: PropTypes.oneOf(['radiogroup', 'checkbox']),
-  /**
-   * If true, the card cannot be interacted with, elements are set as `disabled` and if the
-   * theme supports `inactive` appearances rules, these are applied.
-   */
-  isInactive: PropTypes.bool,
-  /**
-   * On Web, this is passed to the `name` attribute of the fieldset and each input.
-   */
-  name: PropTypes.string
-};
-export default CardGroup;

package/lib-module/CardGroup/dictionary.js

@@ -1,8 +0,0 @@
-export default {
-  en: {
-    prefixId: 'Card'
-  },
-  fr: {
-    prefixId: 'Carte'
-  }
-};

package/lib-module/CardGroup/index.js

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