@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/QuickLinks/QuickLinksCard.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils';
-import CardBase from '../Card/CardBase';
-
-/**
- * Private subcomponent for use within QuickLinks.
- *
- * Restyled Card with identical behaviour to Card, but themed according to the
- * QuickLinksCard theme rather than the Card theme.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const QuickLinksList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    tokens,
-    variant,
-    children
-  } = _ref;
-  const themeTokens = useThemeTokens('QuickLinksCard', tokens, variant);
-  return /*#__PURE__*/_jsx(CardBase, {
-    tokens: themeTokens,
-    ref: ref,
-    children: children
-  });
-});
-QuickLinksList.displayName = 'QuickLinksList';
-QuickLinksList.propTypes = {
-  tokens: getTokensPropType('QuickLinksCard'),
-  variant: variantProp.propType,
-  children: PropTypes.node
-};
-export default QuickLinksList;

package/lib-module/QuickLinks/QuickLinksItem.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getTokensPropType, variantProp, withLinkRouter } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import PressableListItemBase from '../List/PressableListItemBase';
-import ButtonBase from '../Button/ButtonBase';
-
-/**
- * Public component exported as QuickLinks.Item, for use as children of QuickLinks.
- *
- * Receives props injected by QuickLinks and renders the appropriate child component.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const QuickLinksItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    tokens,
-    variant,
-    children,
-    ...rest
-  } = _ref;
-  const viewport = useViewport();
-  const {
-    list
-  } = useThemeTokens('QuickLinks', tokens, variant, {
-    viewport
-  });
-  const themeName = list ? 'QuickLinksList' : 'QuickLinksButton';
-  const getTokens = useThemeTokensCallback(themeName, tokens, variant);
-  return list ? /*#__PURE__*/_jsx(PressableListItemBase, {
-    ref: ref,
-    tokens: getTokens,
-    ...rest,
-    children: children
-  }) : /*#__PURE__*/_jsx(ButtonBase, {
-    ref: ref,
-    tokens: getTokens,
-    ...rest,
-    children: children
-  });
-});
-QuickLinksItem.displayName = 'QuickLinksItem';
-QuickLinksItem.propTypes = {
-  ...withLinkRouter.propTypes,
-  ...PressableListItemBase.propTypes,
-  ...ButtonBase.propTypes,
-  tokens: getTokensPropType('QuickLinksList', 'QuickLinksButton'),
-  variant: variantProp.propType,
-  children: PropTypes.node
-};
-export default withLinkRouter(QuickLinksItem);

package/lib-module/QuickLinks/index.js

@@ -1,4 +0,0 @@
-import QuickLinks from './QuickLinks';
-import QuickLinksItem from './QuickLinksItem';
-QuickLinks.Item = QuickLinksItem;
-export default QuickLinks;

package/lib-module/QuickLinksFeature/QuickLinksFeature.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { StackWrap } from '../StackView';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-
-// pass through and type relevant system props - add more sets for interactive components
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const isQuickListItem = element => {
-  var _element$type, _element$type2;
-  const elementName = (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name);
-  return Boolean(elementName.match(/QuickLinksFeatureItem/));
-};
-
-/**
- * QuickLinksFeature renders a list of interactive items.
- *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
- */
-const QuickLinksFeature = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    tokens,
-    variant,
-    tag = 'ul',
-    children,
-    ...rest
-  } = _ref;
-  const viewport = useViewport();
-  const {
-    stackGap,
-    stackJustify,
-    stackSpace
-  } = useThemeTokens('QuickLinksFeature', tokens, variant, {
-    viewport
-  });
-  const items = React.Children.map(children, child => {
-    if (isQuickListItem(child)) {
-      return /*#__PURE__*/React.cloneElement(child, child.props);
-    }
-    return null;
-  });
-  return /*#__PURE__*/_jsx(StackWrap, {
-    space: stackSpace,
-    gap: stackGap,
-    tokens: {
-      justifyContent: stackJustify
-    },
-    tag: tag,
-    ref: ref,
-    ...selectProps(rest),
-    children: items
-  });
-});
-QuickLinksFeature.displayName = 'QuickLinksFeature';
-QuickLinksFeature.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('QuickLinksFeature'),
-  variant: variantProp.propType,
-  /**
-   * Default wrapper tag, by default it's "ul"
-   */
-  tag: PropTypes.string,
-  /**
-   * QuickLinksFeature.Item component
-   */
-  children: PropTypes.node
-};
-export default QuickLinksFeature;

package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -1,147 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Image from "react-native-web/dist/exports/Image";
-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 { getTokensPropType, variantProp, withLinkRouter, a11yProps, linkProps, selectSystemProps } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
-import { Link } from '../Link';
-import { StackWrap } from '../StackView';
-
-// pass through and type relevant system props - add more sets for interactive components
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps]);
-const selectImageStyle = imageDimension => ({
-  width: imageDimension,
-  height: imageDimension,
-  ...Platform.select({
-    // TODO: https://github.com/telus/universal-design-system/issues/487
-    web: {
-      transition: 'width 200ms, height 200ms'
-    }
-  })
-});
-const selectContainerStyle = _ref => {
-  let {
-    contentMaxDimension,
-    textAlign
-  } = _ref;
-  return {
-    textAlign,
-    outline: 'red',
-    width: contentMaxDimension,
-    overflow: 'hidden'
-  };
-};
-const selectImageContainerStyle = contentMaxDimension => ({
-  width: contentMaxDimension,
-  height: contentMaxDimension,
-  justifyContent: 'center',
-  alignItems: 'center'
-});
-const selectLinkToken = _ref2 => {
-  let {
-    outerBorderColor
-  } = _ref2;
-  return {
-    outerBorderColor
-  };
-};
-
-/**
- * Component export along with QuickLinksFeature to be used as children
- *
- * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
- */
-const QuickLinksFeatureItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    tokens,
-    variant,
-    children,
-    imageAccessibilityLabel,
-    imageSource,
-    ...rest
-  } = _ref3;
-  const viewport = useViewport();
-  const getTokens = useThemeTokensCallback('QuickLinksFeatureItem', tokens, variant);
-  return /*#__PURE__*/_jsx(Link, {
-    ref: ref,
-    ...selectProps(rest),
-    tokens: state => selectLinkToken(getTokens(state)),
-    children: _ref4 => {
-      let {
-        hovered: hover,
-        pressed,
-        focused: focus
-      } = _ref4;
-      const {
-        contentDirection,
-        contentSpace,
-        contentAlignItems,
-        contentMaxDimension,
-        imageDimension,
-        textLine,
-        gap,
-        ...themeTokens
-      } = getTokens({
-        viewport,
-        hover,
-        pressed,
-        focus
-      });
-      const textStyle = {
-        ...applyTextStyles(themeTokens),
-        textDecorationLine: textLine
-      };
-      return /*#__PURE__*/_jsx(View, {
-        style: selectContainerStyle({
-          ...themeTokens,
-          contentMaxDimension
-        }),
-        children: /*#__PURE__*/_jsx(StackWrap, {
-          direction: contentDirection,
-          space: contentSpace,
-          gap: gap,
-          tokens: {
-            alignItems: contentAlignItems
-          },
-          children: /*#__PURE__*/_jsxs(View, {
-            style: selectImageContainerStyle(contentMaxDimension),
-            children: [/*#__PURE__*/_jsx(Image, {
-              accessibilityIgnoresInvertColors: true,
-              imageAccessibilityLabel: imageAccessibilityLabel,
-              source: imageSource,
-              style: selectImageStyle(imageDimension)
-            }), /*#__PURE__*/_jsx(Text, {
-              style: textStyle,
-              children: children
-            })]
-          })
-        })
-      });
-    }
-  });
-});
-QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem';
-QuickLinksFeatureItem.propTypes = {
-  ...withLinkRouter.propTypes,
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('QuickLinksFeatureItem'),
-  variant: variantProp.propType,
-  /**
-   * Text which will be rendered within the Link
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Image accessibility label
-   */
-  imageAccessibilityLabel: PropTypes.string.isRequired,
-  /**
-   * Image node or Image url
-   */
-  imageSource: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
-};
-export default withLinkRouter(QuickLinksFeatureItem);

package/lib-module/QuickLinksFeature/index.js

@@ -1,4 +0,0 @@
-import QuickLinksFeature from './QuickLinksFeature';
-import QuickLinksFeatureItem from './QuickLinksFeatureItem';
-QuickLinksFeature.Item = QuickLinksFeatureItem;
-export default QuickLinksFeature;

package/lib-module/Radio/Radio.js

@@ -1,283 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
-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 RadioLabel from '../InputLabel/LabelContent';
-import RadioButton, { selectRadioButtonTokens } from './RadioButton';
-import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, useUniqueId, 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, focusHandlerProps, viewProps]);
-const selectContainerStyles = _ref => {
-  let {
-    containerBackgroundColor,
-    containerBorderRadius,
-    containerOpacity,
-    containerPaddingBottom,
-    containerPaddingLeft,
-    containerPaddingRight,
-    containerPaddingTop,
-    containerShadow
-  } = _ref;
-  return {
-    backgroundColor: containerBackgroundColor,
-    borderRadius: containerBorderRadius,
-    opacity: containerOpacity,
-    paddingBottom: containerPaddingBottom,
-    paddingLeft: containerPaddingLeft,
-    paddingRight: containerPaddingRight,
-    paddingTop: containerPaddingTop,
-    ...applyShadowToken(containerShadow)
-  };
-};
-const selectDescriptionStyles = _ref2 => {
-  let {
-    containerPaddingLeft = 0,
-    descriptionFontSize,
-    descriptionLineHeight,
-    descriptionMarginLeft,
-    descriptionFontName,
-    descriptionFontWeight,
-    inputSize,
-    fontColor,
-    labelMarginLeft = 0
-  } = _ref2;
-  return {
-    marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
-    color: fontColor,
-    ...applyTextStyles({
-      fontSize: descriptionFontSize,
-      lineHeight: descriptionLineHeight,
-      fontName: descriptionFontName,
-      fontWeight: descriptionFontWeight
-    })
-  };
-};
-const selectLabelStyles = _ref3 => {
-  let {
-    labelColor,
-    labelFontName,
-    labelFontSize,
-    labelFontWeight,
-    labelMarginLeft,
-    labelLineHeight
-  } = _ref3;
-  return applyTextStyles({
-    color: labelColor,
-    fontName: labelFontName,
-    fontWeight: labelFontWeight,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    marginLeft: labelMarginLeft
-  });
-};
-
-/**
- * Basic Radio component.
- *
- * ## Component API
- *
- * Use `label` prop to provide a label for the radio button. For a disabled `Radio` set the `inactive` prop to `true`.
- *
- * ### Controlled version
- *
- * If the radio button is controlled from outside, it needs to receive `checked` and `onChange` props.
- *
- * ### Uncontrolled version
- *
- * In case of uncontrolled radio button you can use `defaultChecked` prop to provide the initial value.
- * Whenever the radio button gets toggled, it calls the `onChange` callback with the new value (boolean).
- *
- * ### Using within forms
- *
- * You can pass `name` and `value` props if you need a particular radio button to be a part of a radio group
- * on a form.
- *
- * ### Validation
- *
- * You can mark a radio button as failing validation by setting the `error` prop to `true`.
- *
- * ## A11y guidelines
- *
- * Radio component accepts all the common accessibility props, but also sets some defaults, including
- * accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
- * or the internal state in case of uncontrolled radio button.
- *
- */
-const Radio = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
-  let {
-    checked,
-    defaultChecked,
-    description,
-    error = false,
-    id,
-    inactive,
-    label,
-    name: inputName,
-    onChange,
-    tokens,
-    value,
-    variant,
-    ...rest
-  } = _ref4;
-  const {
-    currentValue: isChecked,
-    setValue: setIsChecked,
-    isControlled
-  } = useInputValue({
-    value: checked,
-    initialValue: defaultChecked,
-    onChange
-  }, 'useRadioValue');
-  const getTokens = useThemeTokensCallback('Radio', tokens, {
-    checked: isChecked,
-    inactive,
-    error,
-    ...variant
-  });
-  const handleChange = event => {
-    if (!inactive && !isChecked) {
-      setIsChecked(true, event);
-    }
-  };
-  const handleKeyDown = event => {
-    // The expected keyboard shortcut for activating a radio is the Space key
-    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
-  };
-  const uniqueId = useUniqueId('radio');
-  const inputId = id ?? uniqueId;
-  const selectedProps = selectProps({
-    accessibilityRole: 'radio',
-    accessibilityState: {
-      checked: isChecked,
-      disabled: inactive
-    },
-    ...rest
-  });
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    disabled: inactive,
-    onKeyDown: handleKeyDown,
-    onPress: handleChange,
-    ...selectedProps,
-    style: staticStyles.removeOutline,
-    children: _ref5 => {
-      let {
-        focused: focus,
-        hovered: hover,
-        pressed
-      } = _ref5;
-      const stateTokens = getTokens({
-        focus,
-        hover,
-        pressed
-      });
-      const labelStyles = selectLabelStyles(stateTokens);
-      const alignWithLabel = label ? [staticStyles.alignWithLabel, {
-        height: labelStyles.lineHeight
-      }] : null;
-      return /*#__PURE__*/_jsxs(StackView, {
-        space: 0,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: [staticStyles.container, selectContainerStyles(stateTokens)],
-          children: [/*#__PURE__*/_jsx(View, {
-            style: alignWithLabel,
-            children: /*#__PURE__*/_jsx(RadioButton, {
-              tokens: selectRadioButtonTokens(stateTokens),
-              isControlled: isControlled,
-              isChecked: isChecked,
-              inactive: inactive,
-              defaultChecked: defaultChecked,
-              inputId: inputId,
-              handleChange: handleChange,
-              name: inputName,
-              value: value
-            })
-          }), Boolean(label) && /*#__PURE__*/_jsx(Text, {
-            style: labelStyles,
-            children: /*#__PURE__*/_jsx(RadioLabel, {
-              forId: inputId,
-              children: label
-            })
-          })]
-        }), Boolean(description) && /*#__PURE__*/_jsx(Text, {
-          style: selectDescriptionStyles({
-            ...getTokens(),
-            fontColor: labelStyles.color
-          }),
-          children: description
-        })]
-      });
-    }
-  });
-});
-Radio.displayName = 'Radio';
-Radio.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop.
-   */
-  checked: PropTypes.bool,
-  /**
-   * Use `defaultChecked` to provide the initial value for an uncontrolled Radio.
-   */
-  defaultChecked: PropTypes.bool,
-  /**
-   * An optional radio button description.
-   */
-  description: PropTypes.string,
-  /**
-   * Radio button ID.
-   */
-  id: PropTypes.string,
-  /**
-   * Whether the corresponding input is disabled or active.
-   */
-  inactive: PropTypes.bool,
-  /**
-   * The label.
-   */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /**
-   * Associate this radio button with a group (set as the name attribute).
-   */
-  name: PropTypes.string,
-  /**
-   * Whether the underlying input triggered a validation error or not.
-   */
-  error: PropTypes.bool,
-  /**
-   * The value. Must be unique within the group.
-   */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
-  /**
-   * Callback called when a controlled radio button gets interacted with.
-   */
-  onChange: PropTypes.func,
-  /**
-   * Radio tokens.
-   */
-  tokens: getTokensPropType('Radio'),
-  /**
-   * Radio variant.
-   */
-  variant: variantProp.propType
-};
-export default Radio;
-const staticStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  alignWithLabel: {
-    alignSelf: 'flex-start',
-    justifyContent: 'center'
-  },
-  removeOutline: {
-    outlineStyle: 'none'
-  }
-});