@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/ExpandCollapse/Control.js

@@ -1,165 +0,0 @@
-import React from 'react';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import PropTypes from 'prop-types';
-import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, 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]);
-function selectContainerStyles(_ref) {
-  let {
-    backgroundColor,
-    borderColor,
-    borderWidth,
-    borderStyle = 'solid',
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    justifyContent,
-    verticalAlign,
-    iconPosition,
-    borderTopRightRadius,
-    borderBottomRightRadius,
-    borderTopLeftRadius,
-    borderBottomLeftRadius
-  } = _ref;
-  return {
-    boxSizing: 'border-box',
-    backgroundColor,
-    borderColor,
-    borderWidth,
-    borderStyle,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    justifyContent,
-    borderTopRightRadius,
-    borderBottomRightRadius,
-    borderTopLeftRadius,
-    borderBottomLeftRadius,
-    ...verticalAlignRow(verticalAlign, iconPosition === 'right')
-  };
-}
-
-// TODO: use stack / spacer when available
-function selectIconContainerStyles(_ref2) {
-  let {
-    iconGap,
-    iconPaddingTop,
-    iconPosition
-  } = _ref2;
-  const paddingSide = iconPosition === 'right' ? 'paddingLeft' : 'paddingRight';
-  return {
-    [paddingSide]: iconGap,
-    paddingTop: iconPaddingTop
-  };
-}
-function selectTextContainerStyles(_ref3) {
-  let {
-    textLine
-  } = _ref3;
-  return {
-    textDecorationLine: textLine,
-    flex: 1
-  };
-}
-function selectIconTokens(tokens) {
-  return {
-    color: tokens.iconColor,
-    size: tokens.iconSize
-  };
-}
-const ExpandCollapseControl = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
-  let {
-    onPress,
-    isExpanded,
-    children,
-    tokens,
-    accessibilityRole = 'button',
-    variant,
-    ...rest
-  } = _ref4;
-  const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
-  const selectedProps = selectProps({
-    accessibilityRole,
-    ...rest,
-    accessibilityState: {
-      ...(rest.accessibilityState || {}),
-      expanded: isExpanded
-    }
-  });
-  const getControlState = _ref5 => {
-    let {
-      pressed,
-      hovered,
-      focused
-    } = _ref5;
-    return {
-      pressed,
-      hover: hovered,
-      focus: focused,
-      expanded: isExpanded
-    };
-  };
-  const getControlTokens = pressableState => getTokens(getControlState(pressableState));
-  const getPressableStyle = pressableState => ({
-    ...selectContainerStyles(getControlTokens(pressableState)),
-    ...(Platform.OS === 'web' ? {
-      outline: 'none'
-    } : {})
-  });
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    ...selectedProps,
-    onPress: onPress,
-    style: getPressableStyle,
-    children: pressableState => {
-      const {
-        icon: IconComponent,
-        ...themeTokens
-      } = getControlTokens(pressableState);
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [IconComponent && /*#__PURE__*/_jsx(View, {
-          style: [selectIconContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
-          children: /*#__PURE__*/_jsx(IconComponent, {
-            ...selectIconTokens(themeTokens)
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: [selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
-          children: typeof children === 'function' ? children(getControlState(pressableState)) : children
-        })]
-      });
-    }
-  });
-});
-ExpandCollapseControl.displayName = 'ExpandCollapseControl';
-const staticStyles = StyleSheet.create({
-  bubblePointerEvents: {
-    pointerEvents: 'none'
-  }
-});
-ExpandCollapseControl.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('ExpandCollapseControl'),
-  variant: variantProp.propType,
-  /**
-   * ExpandCollapseControl's children are the content within the button that opens or closes this panel. May
-   * accept a render function that recieves the control state: { pressed, hover, focus, expanded }
-   */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  /**
-   * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
-   */
-  isExpanded: PropTypes.bool,
-  /**
-   * Function called when the ExpandCollapse is pressed.
-   */
-  onPress: PropTypes.func.isRequired
-};
-export default ExpandCollapseControl;

package/lib-module/ExpandCollapse/ExpandCollapse.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-function selectBorderStyles(tokens) {
-  return {
-    borderBottomWidth: tokens.borderWidth,
-    borderBottomStyle: tokens.borderStyle,
-    borderBottomColor: tokens.borderColor
-  };
-}
-
-/**
- * Flexible base component for lists where some or all items are collapsible headers.
- *
- * Pass a render function as `children` which takes and passes `openIds` and `onToggle` props to
- * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
- * nested (they do not need to be direct children), and non-interactive items may be included too.
- */
-const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    tokens,
-    variant,
-    maxOpen,
-    open,
-    initialOpen,
-    onChange,
-    ...rest
-  } = _ref;
-  const {
-    currentValues: openIds,
-    toggleOneValue: onToggle,
-    resetValues,
-    setValues,
-    unsetValues
-  } = useMultipleInputValues({
-    maxValues: maxOpen,
-    values: open,
-    initialValues: initialOpen,
-    onChange
-  });
-  const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant);
-  return /*#__PURE__*/_jsx(View, {
-    style: staticStyles.container,
-    ref: ref,
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsx(View, {
-      style: selectBorderStyles(themeTokens),
-      children: typeof children === 'function' ? children({
-        openIds,
-        onToggle,
-        resetValues,
-        setValues,
-        unsetValues
-      }) : children
-    })
-  });
-});
-ExpandCollapse.displayName = 'ExpandCollapse';
-ExpandCollapse.propTypes = {
-  ...selectedSystemPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('ExpandCollapse'),
-  /**
-   * ExpandCollapse usually takes a render function to which it passes an object with properties
-   * { openIds, onToggle, resetValues, setValues, unsetValues }. openIds (array of ids) and
-   * onToggle (function) will usually be passed to `<ExpandCollapse.Panel>`
-   */
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-  /**
-   * If set, enforces a specific maximum number of open items, closing already-open items when new
-   * items are opened. By default, any number of items may be open at once.
-   */
-  maxOpen: PropTypes.number,
-  /**
-   * If passed, the item or items that are expanded will be controlled by a parent component
-   */
-  open: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Function called when which panels are currently open changes. Necessary if `open` is passed.
-   */
-  onChange: PropTypes.func,
-  /**
-   * Allows items with specified ids to be open by default on first load. Should not be used with `open`.
-   */
-  initialOpen: PropTypes.arrayOf(PropTypes.string)
-};
-export default ExpandCollapse;
-const staticStyles = StyleSheet.create({
-  container: {
-    display: 'flex'
-  }
-});

package/lib-module/ExpandCollapse/Panel.js

@@ -1,242 +0,0 @@
-import React from 'react';
-import Animated from "react-native-web/dist/exports/Animated";
-import Platform from "react-native-web/dist/exports/Platform";
-import View from "react-native-web/dist/exports/View";
-import Text from "react-native-web/dist/exports/Text";
-import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
-import ExpandCollapseControl from './Control';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useVerticalExpandAnimation, variantProp, viewProps, useCopy } from '../utils';
-import dictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-// just void functions for now, since there are no style tokens for a panel or control at this point
-const selectContainerStyles = _ref => {
-  let {
-    contentPaddingLeft,
-    contentPaddingRight,
-    contentPaddingTop,
-    contentPaddingBottom
-  } = _ref;
-  return {
-    paddingLeft: contentPaddingLeft,
-    paddingRight: contentPaddingRight,
-    paddingTop: contentPaddingTop,
-    paddingBottom: contentPaddingBottom,
-    flex: 1
-  };
-};
-const selectTextStyles = _ref2 => {
-  let {
-    contentPanelFontSize,
-    contentPanelFontName,
-    contentPanelFontColor,
-    contentPanelFontWeight,
-    contentPanelLineHeight
-  } = _ref2;
-  return {
-    fontSize: contentPanelFontSize,
-    fontFamily: `${contentPanelFontName}${contentPanelFontWeight}normal`,
-    lineHeight: contentPanelFontSize * contentPanelLineHeight,
-    color: contentPanelFontColor
-  };
-};
-const selectContentPanelStyles = _ref3 => {
-  let {
-    contentPanelBackgroundColor,
-    contentPanelPaddingTop,
-    contentPanelPaddingBottom,
-    contentPanelPaddingLeft,
-    contentPanelPaddingRight,
-    contentPanelBorderWidth,
-    contentPanelBorderColor,
-    borderRadius,
-    marginBottom
-  } = _ref3;
-  return {
-    backgroundColor: contentPanelBackgroundColor,
-    paddingTop: contentPanelPaddingTop,
-    paddingBottom: contentPanelPaddingBottom,
-    paddingLeft: contentPanelPaddingLeft,
-    paddingRight: contentPanelPaddingRight,
-    borderWidth: contentPanelBorderWidth,
-    borderColor: contentPanelBorderColor,
-    borderStyle: 'solid',
-    borderRadius,
-    marginBottom
-  };
-};
-const selectControlPanelStyles = _ref4 => {
-  let {
-    contentPanelBackgroundColor
-  } = _ref4;
-  return {
-    backgroundColor: contentPanelBackgroundColor
-  };
-};
-
-/**
- * An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens
- * and closes the collapsible children when pressed.
- *
- * Expects `openIds` and `onToggle` props from the `ExpandCollapse` render function and a unique
- * `panelId` that matches the ids passed to the `<ExpandCollapse>`.
- *
- * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
- * by the chosen accessibility props for a particular accessibility tools).
- */
-const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
-  let {
-    openIds = [],
-    panelId,
-    onToggle,
-    onPress,
-    control,
-    controlTokens,
-    children,
-    tokens,
-    variant,
-    controlRef,
-    content,
-    copy = 'en',
-    ...rest
-  } = _ref5;
-  const [containerHeight, setContainerHeight] = React.useState(null);
-  const isExpanded = openIds.includes(panelId);
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const selectedProps = selectProps({
-    ...rest,
-    accessibilityState: {
-      ...(rest.accessibilityState || {}),
-      expanded: isExpanded
-    }
-  });
-  const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
-    expanded: isExpanded
-  });
-  const handleControlPress = event => {
-    onToggle(panelId, event);
-    if (onPress) onPress(panelId, event);
-  };
-  const onContainerLayout = event => {
-    const {
-      layout: {
-        height = 0
-      } = {}
-    } = event.nativeEvent;
-    if (Platform.OS === 'web' || Platform.OS !== 'web' && containerHeight === null) {
-      setContainerHeight(height);
-    }
-  };
-  const [animatedStyles, animatedRef] = useVerticalExpandAnimation({
-    containerHeight,
-    isExpanded,
-    tokens: themeTokens
-  });
-  const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps;
-  const panelAccessibilityLabel = `${panelId} ${getCopy('panel')}`;
-  const subPanelAccessibilityLabel = `${panelId} ${getCopy('subPanel')}`;
-  return content ? /*#__PURE__*/_jsx(View, {
-    style: selectContentPanelStyles(themeTokens),
-    accessibilityLabel: panelAccessibilityLabel,
-    children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-      style: selectTextStyles(themeTokens),
-      accessibilityLabel: subPanelAccessibilityLabel,
-      children: children
-    }) : children
-  }) : /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: themeTokens,
-    accessibilityLabel: panelAccessibilityLabel,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: selectControlPanelStyles(themeTokens),
-      children: /*#__PURE__*/_jsx(ExpandCollapseControl, {
-        ...selectedProps,
-        isExpanded: isExpanded,
-        tokens: controlTokens,
-        variant: variant,
-        onPress: handleControlPress,
-        ref: controlRef,
-        children: control
-      })
-    }), isExpanded && /*#__PURE__*/_jsx(View, {
-      style: {
-        borderTopColor: themeTokens.expandDividerColor,
-        borderTopWidth: themeTokens.expandDividerWidth,
-        marginLeft: themeTokens.contentPaddingLeft,
-        marginRight: themeTokens.contentPaddingRight
-      }
-    }), /*#__PURE__*/_jsx(Animated.View, {
-      ref: animatedRef,
-      style: animatedStyles,
-      ...focusabilityProps,
-      children: /*#__PURE__*/_jsx(View, {
-        onLayout: onContainerLayout,
-        style: {
-          ...Platform.select({
-            default: {
-              flex: 1
-            },
-            web: {}
-          })
-        },
-        children: /*#__PURE__*/_jsx(View, {
-          style: selectContainerStyles(themeTokens),
-          accessibilityLabel: subPanelAccessibilityLabel,
-          children: children
-        })
-      })
-    })]
-  });
-});
-ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
-ExpandCollapsePanel.propTypes = {
-  ...selectedSystemPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('ExpandCollapsePanel'),
-  /**
-   * Array of the ids of currently open groups
-   */
-  openIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-  /**
-   * Unique name by which the ExpandCollapse controls this element.
-   */
-  panelId: PropTypes.string.isRequired,
-  /**
-   * Function to call on pressing the panel's control, which should open or close the panel.
-   * If Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent.
-   */
-  onToggle: PropTypes.func,
-  /**
-   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel.
-   */
-  onPress: PropTypes.func,
-  /**
-   * ExpandCollapsePanel's children are the content that is hidden or revealed on open or close, and may be any
-   * single React element or a render function which takes this group's isExpanded state, onToggle function and panelId
-   */
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  /**
-   * The content inside the control element that opens and closes the ExpandCollapse when pressed.
-   */
-  control: ExpandCollapseControl.propTypes.children,
-  /**
-   * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
-   */
-  controlTokens: getTokensPropType('ExpandCollapseControl'),
-  /**
-   * An optional ref to be attached to the control
-   */
-  controlRef: ABBPropTypes.ref(),
-  /**
-   * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
-   */
-  content: PropTypes.bool
-};
-export default ExpandCollapsePanel;

package/lib-module/ExpandCollapse/dictionary.js

@@ -1,10 +0,0 @@
-export default {
-  en: {
-    panel: 'Panel',
-    subPanel: 'SubPanel'
-  },
-  fr: {
-    panel: 'Panneau',
-    subPanel: 'Sous-Panneau'
-  }
-};

package/lib-module/ExpandCollapse/index.js

@@ -1,7 +0,0 @@
-import ExpandCollapse from './ExpandCollapse';
-import Accordion from './Accordion';
-import Panel from './Panel';
-ExpandCollapse.Panel = Panel;
-Accordion.Panel = Panel;
-export default ExpandCollapse;
-export { Accordion };

package/lib-module/Feedback/Feedback.js

@@ -1,161 +0,0 @@
-import React from 'react';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Text from "react-native-web/dist/exports/Text";
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
-import StackView from '../StackView';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectStyles = tokens => selectTokens('Feedback', tokens);
-const selectTitleTextStyles = (_ref, themeOptions) => {
-  let {
-    titleFontSize,
-    ...tokens
-  } = _ref;
-  return applyTextStyles({
-    ...selectTokens('Typography', {
-      ...tokens,
-      fontSize: titleFontSize,
-      themeOptions
-    }),
-    themeOptions
-  });
-};
-const selectContentTextStyles = (_ref2, themeOptions) => {
-  let {
-    contentFontSize,
-    ...tokens
-  } = _ref2;
-  return applyTextStyles({
-    ...selectTokens('Typography', {
-      ...tokens,
-      fontSize: contentFontSize
-    }),
-    themeOptions
-  });
-};
-const selectIconTokens = _ref3 => {
-  let {
-    iconSize,
-    iconColor
-  } = _ref3;
-  return {
-    size: iconSize,
-    color: iconColor
-  };
-};
-const selectIconContainerStyles = _ref4 => {
-  let {
-    iconGap
-  } = _ref4;
-  return {
-    paddingRight: iconGap
-  };
-};
-
-/**
- * A feedback box commonly used with form fields.
- *
- * ### Standalone usage
- * While its primary use is to facilitate feedback states for other form components such as `TextInput`,
- * you may use it standalone.
- *
- * ### Complex content
- * You may pass any React tree as the children of this component, bear in mind that a render function
- * is better suited for styling children based on Feedback's variant.
- *
- * ### Using a render function
- * When a function is passed for rendering content, it will receive the feedback text styles and
- * variant as arguments.
- *
- * ### Accessibility
- * All accessibility props set on this component will be applied to the outer container.
- */
-const Feedback = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
-  let {
-    title,
-    children,
-    id,
-    validation,
-    tokens,
-    variant,
-    ...rest
-  } = _ref5;
-  const themeTokens = useThemeTokens('Feedback', tokens, {
-    ...variant,
-    validation
-  });
-  const {
-    space
-  } = themeTokens;
-  const {
-    icon: IconComponent
-  } = themeTokens;
-  const {
-    themeOptions
-  } = useTheme();
-  const titleTextStyles = selectTitleTextStyles(themeTokens, themeOptions);
-  const contentTextStyles = selectContentTextStyles(themeTokens, themeOptions);
-  const content = typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-    style: contentTextStyles,
-    children: children
-  }) : children;
-  const selectedProps = selectProps({
-    accessibilityRole: validation === 'error' ? 'alert' : undefined,
-    ...rest
-  });
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: selectStyles(themeTokens),
-    nativeID: id,
-    ...selectedProps,
-    children: /*#__PURE__*/_jsxs(StackView, {
-      space: space,
-      children: [title !== undefined && /*#__PURE__*/_jsxs(View, {
-        style: staticStyles.title,
-        children: [IconComponent && /*#__PURE__*/_jsx(View, {
-          style: selectIconContainerStyles(themeTokens),
-          children: /*#__PURE__*/_jsx(IconComponent, {
-            ...selectIconTokens(themeTokens)
-          })
-        }), /*#__PURE__*/_jsx(Text, {
-          style: titleTextStyles,
-          children: title
-        })]
-      }), content && typeof content === 'function' ? content({
-        textStyles: contentTextStyles,
-        variant
-      }) : content]
-    })
-  });
-});
-Feedback.displayName = 'Feedback';
-Feedback.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Emphasized summary of the feedback. If an icon is set, it is rendered next to the title.
-   */
-  title: PropTypes.string,
-  /**
-   * Feedback content rendered below the title. A render function `({textStyles, variant}) => {}` is supported.
-   */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
-  /**
-   * Use to visually mark the Feedback as valid or invalid.
-   */
-  validation: PropTypes.oneOf(['error', 'success']),
-  /** @ignore */
-  id: PropTypes.string,
-  tokens: getTokensPropType('Feedback'),
-  variant: variantProp.propType
-};
-export default Feedback;
-const staticStyles = StyleSheet.create({
-  title: {
-    display: 'flex',
-    flexDirection: 'row'
-  }
-});

package/lib-module/Feedback/index.js

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