@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/Button/ButtonDropdown.js

@@ -1,173 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import Text from "react-native-web/dist/exports/Text";
-import View from "react-native-web/dist/exports/View";
-import buttonPropTypes, { textAndA11yText } from './propTypes';
-import ButtonBase from './ButtonBase';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, focusHandlerProps, resolvePressableState, selectTokens, useInputValue } from '../utils';
-import Icon from '../Icon';
-import { getStackedContent } from '../StackView';
-import { getPressHandlersWithArgs } from '../utils/pressability';
-import { jsx as _jsx } from "react/jsx-runtime";
-const selectIconTokens = _ref => {
-  let {
-    icon,
-    iconPosition,
-    iconSpace,
-    iconSize,
-    iconColor,
-    iconBackground,
-    iconBorderRadius,
-    iconAlignSelf,
-    iconPadding,
-    iconTranslateX,
-    iconTranslateY
-  } = _ref;
-  return {
-    icon,
-    iconPosition,
-    iconSpace,
-    iconWrapperStyle: {
-      backgroundColor: iconBackground,
-      borderRadius: iconBorderRadius,
-      alignSelf: iconAlignSelf,
-      padding: iconPadding,
-      ...Platform.select({
-        // TODO: https://github.com/telus/universal-design-system/issues/487
-        web: {
-          transition: 'color 200ms, background 200ms'
-        }
-      })
-    },
-    iconTokens: {
-      size: iconSize,
-      color: iconColor,
-      translateX: iconTranslateX,
-      translateY: iconTranslateY
-    }
-  };
-};
-const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    value,
-    initialValue,
-    onChange,
-    label,
-    tokens,
-    variant,
-    inactive = false,
-    readOnly = false,
-    children = null,
-    accessibilityRole = 'radio',
-    ...props
-  } = _ref2;
-  const {
-    currentValue: isOpen,
-    setValue: setIsOpen
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange,
-    readOnly
-  }, 'useButtonDropdownValues');
-  const extraState = {
-    open: isOpen,
-    inactive,
-    ...variant
-  };
-  const getTokens = useThemeTokensCallback('ButtonDropdown', tokens, extraState);
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
-
-  // Pass an object of relevant component state as first argument for any passed-in press handlers
-  const pressHandlers = getPressHandlersWithArgs(props, [{
-    label,
-    open: isOpen
-  }]);
-  const handlePress = event => {
-    if (!inactive) {
-      if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 || pressHandlers.onPress(event);
-      setIsOpen(!isOpen, event);
-    }
-  };
-  return /*#__PURE__*/_jsx(ButtonBase, {
-    ref: ref,
-    ...pressHandlers,
-    onPress: handlePress,
-    tokens: getButtonTokens,
-    inactive: inactive,
-    icon: () => null,
-    accessibilityRole: accessibilityRole,
-    ...props,
-    children: _ref3 => {
-      let {
-        textStyles,
-        ...buttonState
-      } = _ref3;
-      // TODO: once Icon/IconButton designs are stable, see if this sort of styling around
-      // an icon should go in Icon itself, or possibly via an IconText token set. Related issues:
-      // - Icon: https://github.com/telus/universal-design-system/issues/327
-      // - IconButton: https://github.com/telus/universal-design-system/issues/281
-      // - Token sets: https://github.com/telus/universal-design-system/issues/782
-
-      const itemTokens = getTokens(buttonState);
-      const {
-        iconTokens,
-        iconPosition,
-        iconSpace,
-        iconWrapperStyle,
-        icon: IconComponent
-      } = selectIconTokens(itemTokens);
-      const iconContent = IconComponent ? /*#__PURE__*/_jsx(View, {
-        style: iconWrapperStyle,
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: IconComponent,
-          tokens: iconTokens
-        })
-      }) : null;
-      const childrenContent = () => typeof children === 'function' ? children({
-        ...resolvePressableState(buttonState, extraState),
-        textStyles
-      }) : children;
-      const content = children ? childrenContent() : /*#__PURE__*/_jsx(Text, {
-        style: textStyles,
-        children: label
-      });
-      return getStackedContent(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
-        space: iconSpace,
-        direction: 'row'
-      });
-    }
-  });
-});
-ButtonDropdown.displayName = 'ButtonDropdown';
-ButtonDropdown.propTypes = {
-  ...a11yProps.types,
-  ...focusHandlerProps.types,
-  ...buttonPropTypes,
-  children: textAndA11yText,
-  tokens: getTokensPropType('ButtonDropdown'),
-  /**
-   * Callback called when a controlled ButtonDropdown gets interacted with.
-   */
-  onChange: PropTypes.func,
-  /**
-   * `value` prop is being used to set the 'open' state of ButtonDropdown. Use it for
-   *  controlled ButtonDropdown. For uncontrolled ButtonDropdown, use `initialValue`.
-   */
-  value: PropTypes.bool,
-  /**
-   * Use `initialValue` to provide the initial value for an uncontrolled version.
-   */
-  initialValue: PropTypes.bool,
-  /**
-   * The label of ButtonDropdown.
-   */
-  label: PropTypes.string,
-  /**
-   * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
-   */
-  accessibilityRole: PropTypes.string
-};
-export default ButtonDropdown;

package/lib/Card/Card.js

@@ -1,328 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTheme } from '../ThemeProvider';
-import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { a11yProps, linkProps, selectSystemProps, viewProps, responsiveProps } from '../utils/props';
-import CardBase from './CardBase';
-import PressableCardBase from './PressableCardBase';
-import CheckboxButton from '../Checkbox/CheckboxButton';
-import RadioButton from '../Radio/RadioButton';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps, linkProps]);
-const SelectionType = {
-  Checkbox: 'checkbox',
-  Radio: 'radiogroup',
-  None: undefined
-};
-const selectInputStyle = _ref => {
-  let {
-    paddingTop,
-    paddingRight
-  } = _ref;
-  return {
-    position: 'absolute',
-    top: paddingTop,
-    right: paddingRight
-  };
-};
-const getInputProps = _ref2 => {
-  let {
-    id,
-    checkColor,
-    boxBackgroundColor,
-    checkBackgroundColor,
-    isControlled,
-    isChecked,
-    isInactive,
-    handleChange
-  } = _ref2;
-  return {
-    inputId: id,
-    tokens: {
-      iconColor: checkColor,
-      inputBackgroundColor: boxBackgroundColor,
-      iconBackgroundColor: checkBackgroundColor
-    },
-    isControlled,
-    isChecked,
-    inactive: isInactive,
-    handleChange
-  };
-};
-
-/**
- * A basic card component, unstyled by default.
- *
- * ## Component API
- *
- * ### Background
- *
- * In order to control the background of a card, the following tokens are currently
- * supported:
- *
- * - `backgroundColor`
- *
- * ### Border
- *
- * The following border tokens can be used:
- *
- * - `borderColor`
- * - `borderRadius`
- * - `borderWidth`
- *
- * ### Padding
- *
- * Please use the following tokens to control the padding:
- *
- * - `paddingBottom`
- * - `paddingLeft`
- * - `paddingRight`
- * - `paddingTop`
- *
- * Note that various viewport sizes are supported as well.
- *
- * ### Shadow
- *
- * Feel free to use the following properties within the `shadow` token:
- *
- * - `inset`: boolean
- * - `color`: string
- * - `offsetX`: number
- * - `offsetY`: number
- * - `blur`: number
- * - `spread`: number
- *
- * ## Accessibility
- *
- * Card supports all the common a11y props. Please remember that by marking a card as `accessible`
- * you automatically make inaccessible its children, which may or may not be appropriate
- * depending on what you are trying to achieve.
- */
-const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  var _interactiveCard$vari, _interactiveCard$vari2;
-  let {
-    children,
-    tokens,
-    variant,
-    dataSet,
-    onPress,
-    id,
-    interactiveCard,
-    backgroundImage,
-    ...rest
-  } = _ref3;
-  const viewport = useViewport();
-  const {
-    themeOptions
-  } = useTheme();
-  const {
-    enableMediaQueryStyleSheet
-  } = themeOptions;
-  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
-  const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
-    viewport
-  });
-  const selected = interactiveCard === null || interactiveCard === void 0 || (_interactiveCard$vari = interactiveCard.variant) === null || _interactiveCard$vari === void 0 ? void 0 : _interactiveCard$vari.selected;
-  const inactive = interactiveCard === null || interactiveCard === void 0 || (_interactiveCard$vari2 = interactiveCard.variant) === null || _interactiveCard$vari2 === void 0 ? void 0 : _interactiveCard$vari2.inactive;
-  const selectionType = interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.selectionType;
-  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
-    interactive: true,
-    ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : 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
-  } = selectionType ? getThemeTokens() : themeTokens;
-  const {
-    inputBackgroundColor,
-    iconBackgroundColor,
-    iconColor,
-    icon,
-    inputBorderRadius,
-    inputHeight,
-    inputWidth,
-    iconSize,
-    inputShadow,
-    inputBorderWidth,
-    inputBorderColor
-  } = getThemeTokens();
-  const checkboxTokens = {
-    inputBackgroundColor,
-    iconBackgroundColor,
-    icon,
-    iconColor,
-    inputBorderRadius,
-    inputHeight,
-    inputWidth,
-    iconSize,
-    inputShadow,
-    inputBorderWidth,
-    inputBorderColor
-  };
-  const radioTokens = {
-    iconBackgroundColor,
-    iconColor,
-    containerShadow: inputShadow,
-    icon,
-    inputBackgroundColor,
-    inputBorderRadius,
-    inputSize: inputHeight,
-    checkedSize: iconSize,
-    inputBorderWidth,
-    inputBorderColor
-  };
-  let cardStyles;
-  let mediaIds;
-  if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyleSheet = createMediaQueryStyles(themeTokens);
-    const {
-      ids,
-      styles
-    } = StyleSheet.create({
-      card: mediaQueryStyleSheet
-    });
-    cardStyles = styles.card;
-    mediaIds = ids.card;
-  } else {
-    cardStyles = themeTokens;
-  }
-  const renderInputPerSelectionType = props => {
-    switch (selectionType) {
-      case SelectionType.Checkbox:
-        return /*#__PURE__*/_jsx(View, {
-          style: selectInputStyle(getThemeTokens()),
-          children: /*#__PURE__*/_jsx(CheckboxButton, {
-            ...props,
-            tokens: {
-              ...checkboxTokens,
-              ...(props === null || props === void 0 ? void 0 : props.tokens)
-            }
-          })
-        });
-      case SelectionType.Radio:
-        return /*#__PURE__*/_jsx(View, {
-          style: selectInputStyle(getThemeTokens()),
-          children: /*#__PURE__*/_jsx(RadioButton, {
-            ...props,
-            tokens: {
-              ...radioTokens,
-              ...(props === null || props === void 0 ? void 0 : props.tokens)
-            }
-          })
-        });
-      default:
-        return null;
-    }
-  };
-  const renderNoSelectionView = () => /*#__PURE__*/_jsx(View, {
-    style: {
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight
-    },
-    children: children
-  });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(CardBase, {
-      ref: ref,
-      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : cardStyles,
-      backgroundImage: backgroundImage,
-      dataSet: mediaIds && {
-        media: mediaIds
-      },
-      ...selectProps(rest),
-      children: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(PressableCardBase, {
-          ref: ref,
-          tokens: getThemeTokens,
-          dataSet: dataSet,
-          onPress: onPress,
-          ...selectProps(rest),
-          children: cardState => {
-            const {
-              iconColor: checkColor,
-              inputBackgroundColor: boxBackgroundColor,
-              iconBackgroundColor: checkBackgroundColor
-            } = getThemeTokens({
-              ...cardState,
-              selected,
-              interactive: true,
-              isControl: true
-            }, interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens);
-            return /*#__PURE__*/_jsxs(_Fragment, {
-              children: [renderInputPerSelectionType(getInputProps({
-                id,
-                checkColor,
-                boxBackgroundColor,
-                checkBackgroundColor,
-                isControlled: true,
-                isChecked: selected || (cardState === null || cardState === void 0 ? void 0 : cardState.hover),
-                isInactive: inactive,
-                onPress
-              })), typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
-            });
-          }
-        }), children && selectionType !== SelectionType.None ? renderNoSelectionView() : null]
-      }) : children
-    })
-  });
-});
-Card.displayName = 'Card';
-Card.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Card content.
-   */
-  children: PropTypes.node,
-  /**
-   * Card tokens.
-   */
-  tokens: getTokensPropType('Card'),
-  /**
-   * 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,
-  /**
-   * Card ID.
-   */
-  id: PropTypes.string,
-  /**
-   * 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
-   * - selectionType: If the card has `isControl` variant set to `true`, the selectionType can have one of the following options: 
-        - `radiogroup`
-        - `checkbox`
-   * - variant: The variant to be used for the interactive card
-   */
-  interactiveCard: PropTypes.shape({
-    body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    tokens: getTokensPropType('Card'),
-    selectionType: PropTypes.oneOf(Object.values(SelectionType)),
-    variant: variantProp.propType
-  }),
-  /**
-   * 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 Card;

package/lib/Card/CardBase.js

@@ -1,120 +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,
-    maxHeight,
-    overflowY
-  } = _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})`
-    } : {}),
-    ...(Platform.OS === 'web' ? {
-      maxHeight,
-      overflowY
-    } : {})
-  };
-};
-
-/**
- * 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;