@telus-uds/components-base 2.0.0 → 2.0.1

package/lib-module/RadioCard/RadioCardGroup.js

@@ -1,259 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
-import StackView, { StackWrap } from '../StackView';
-import RadioCard from './RadioCard';
-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]);
-/**
- * A group of Cards that behave as a radio button group. Use when users select a single choice from mutually
- * exclusive options with need to show additional information for each option. The whole cards are each
- * interactive as one item.
- *
- * ## Component API
- *
- * Use the `items` prop to pass an array of objects describing each RadioCard in the group:
- *
- *  - `title`: main text passed to RadioCard's `title` prop
- *  - `content`: React content passed to RadioCard's `children` prop
- *  - `id`: identifier used to store which RadioCard is selected (uses `title` if undefinded)
- *  - `onChange`: optional function called on selection, in addition to updating the group's selection state
- *
- * ### Controlled version
- *
- * If the selection state is controlled from outside, it needs to receive `checkedId` and `onChange` props.
- *
- * ### Uncontrolled version
- *
- * If the RadioCardGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.
- * Whenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).
- *
- * ### Use in forms
- *
- * For web forms, the `name` prop may be used to define the name of the group's `fieldset` and input elements.
- *
- * ### Validation
- *
- * Validation state may be set by passing 'error' or 'success' to the `validation` prop.
- *
- * ## A11y guidelines
- *
- * RadioCardGroup accepts all the common accessibility props, but also sets accessibility role `'radiogroup'`
- * and controls the accessibility state of children like RadioCard and Feedback based on current state.
- *
- * @example
- * ```jsx
- * <RadioCardGroup
- *   initialCheckedId="card1"
- *   items={[
- *     { title: 'Card 1', id: 'card1', content: <Typography>More info</Typography> },
- *     { title: 'Card 2', id: 'card2', content: <Typography>Extra content</Typography> },
- *     { title: 'Card 3', id: 'card3', content: <Typography>More content</Typography> }
- *   ]}
- *   legend="Cards"
- *   hint="Choose a card to select"
- * />
- * ```
- */
-
-const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    copy = 'en',
-    tokens,
-    radioCardTokens,
-    variant,
-    items = [],
-    legend,
-    tooltip,
-    hint,
-    hintPosition = 'inline',
-    validation,
-    feedback,
-    initialCheckedId,
-    checkedId,
-    onChange,
-    readOnly,
-    name: inputGroupName,
-    inactive,
-    ...rest
-  } = _ref;
-  const viewport = useViewport();
-  const {
-    space,
-    fieldSpace,
-    direction
-  } = useThemeTokens('RadioCardGroup', tokens, variant, {
-    viewport
-  });
-  const {
-    currentValue,
-    setValue
-  } = useInputValue({
-    value: checkedId,
-    initialValue: initialCheckedId,
-    onChange,
-    readOnly: readOnly || inactive
-  });
-  const StackContainer = direction === 'row' ? StackWrap : StackView; // Needs 'radiogroup' role on direct parent of radios for MacOS Voiceover's numbering to work,
-  // and also needs 'radiogroup' role on fieldset for correct description on focusing the set.
-  // TODO: test this on more web screen readers.
-
-  const uniqueFields = ['id'];
-
-  if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error("RadioCardGroup items must have unique ".concat(uniqueFields.join(', ')));
-  }
-
-  return /*#__PURE__*/_jsx(Fieldset, {
-    copy: copy,
-    ref: ref,
-    name: inputGroupName,
-    legend: legend,
-    tooltip: tooltip,
-    hint: hint,
-    hintPosition: hintPosition,
-    space: fieldSpace,
-    feedback: feedback,
-    inactive: inactive || readOnly,
-    validation: validation,
-    showErrorBorder: true,
-    showIcon: true,
-    accessibilityRole: "radiogroup",
-    ...selectProps(rest),
-    children: props => /*#__PURE__*/_jsx(StackContainer, {
-      space: space,
-      accessibilityRole: "radiogroup",
-      children: items.map((_ref2, index) => {
-        let {
-          title,
-          content,
-          id,
-          onChange: itemOnChange,
-          ...itemRest
-        } = _ref2;
-        const cardId = id || "RadioCard[".concat(index, "]");
-
-        const handleChange = (newCheckedState, event) => {
-          if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
-          if (newCheckedState) setValue(cardId, event);
-        };
-
-        return /*#__PURE__*/_jsx(RadioCard, {
-          id: cardId,
-          checked: currentValue === cardId,
-          onChange: handleChange,
-          inactive: inactive,
-          title: title,
-          name: inputGroupName,
-          tokens: radioCardTokens,
-          variant: variant,
-          readOnly: readOnly,
-          ...selectItemProps(itemRest),
-          ...props,
-          children: content
-        }, cardId);
-      })
-    })
-  });
-});
-RadioCardGroup.displayName = 'RadioCardGroup';
-RadioCardGroup.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * Whether the English or French copy will be used (e.g. for accessibility labels).
-   */
-  copy: PropTypes.oneOf(['en', 'fr']),
-
-  /**
-   * Optional theme token overrides for the outer RadioCardGroup component
-   */
-  tokens: getTokensPropType('RadioCardGroup'),
-
-  /**
-   * Optional theme token overrides for each inner RadioCard component
-   */
-  radioCardTokens: getTokensPropType('RadioCard'),
-
-  /**
-   * Theme variants, shared between both RadioCardGroup and RadioCard
-   */
-  variant: variantProp.propType,
-
-  /**
-   * Array of objects containing specifics for each RadioCard to be rendered in the group.
-   */
-  items: PropTypes.arrayOf(PropTypes.exact({ ...selectedItemPropTypes,
-    title: PropTypes.string,
-    content: PropTypes.node,
-    id: PropTypes.string,
-    onChange: PropTypes.func
-  })),
-
-  /**
-   * Main text used to describe this group, used in Fieldset's Legend element.
-   */
-  legend: PropTypes.string,
-
-  /**
-   * Optional additional text giving more detail to help a user make a choice.
-   */
-  hint: PropTypes.string,
-
-  /**
-   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
-   */
-  hintPosition: PropTypes.oneOf(['inline', 'below']),
-
-  /**
-   * Optional tooltip text content to include alongside the legend and hint.
-   */
-  tooltip: PropTypes.string,
-
-  /**
-   * 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 radio card with this id is selected on first render.
-   */
-  initialCheckedId: PropTypes.string,
-
-  /**
-   * If not undefined, the radio 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.
-   */
-  checkedId: 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,
-
-  /**
-   * If true, the radio cards cannot be selected by the user and simply show their current state.
-   */
-  readOnly: PropTypes.bool,
-
-  /**
-   * If true, the radio card cannot be interacted with, elements are set as `disabled` and if the
-   * theme supports `inactive` appearances rules, these are applied.
-   */
-  inactive: PropTypes.bool,
-
-  /**
-   * On Web, this is passed to the `name` attribute of the fieldset and each radio input.
-   */
-  name: PropTypes.string
-};
-export default RadioCardGroup;

package/lib-module/RadioCard/index.js

@@ -1,3 +0,0 @@
-import RadioCard from './RadioCard';
-export default RadioCard;
-export { default as RadioCardGroup } from './RadioCardGroup';

package/lib-module/Responsive/index.js

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

package/lib-module/Search/Search.js

@@ -1,241 +0,0 @@
-import React, { forwardRef } from 'react';
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
-import TextInputBase from '../TextInput/TextInputBase';
-import ButtonBase from '../Button/ButtonBase';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
-
-const selectInputTokens = _ref => {
-  let {
-    searchTokens,
-    buttonTokens,
-    buttonsGapSize
-  } = _ref;
-  const {
-    paddingRight: inputPaddingRight,
-    clearButtonIcon,
-    submitButtonIcon
-  } = searchTokens;
-  const {
-    paddingLeft = 0,
-    paddingRight = 0,
-    iconSize = 0
-  } = buttonTokens;
-  const buttonWidth = paddingLeft + paddingRight + iconSize;
-  const paddingWithButtons = inputPaddingRight + (submitButtonIcon ? buttonWidth : 0) + (clearButtonIcon ? buttonsGapSize + buttonWidth : 0);
-  return { ...selectTokens('TextInput', searchTokens),
-    paddingRight: paddingWithButtons
-  };
-};
-
-const selectButtonTokens = tokens => selectTokens('Button', tokens);
-
-const selectIconTokens = _ref2 => {
-  let {
-    iconSize,
-    iconColor
-  } = _ref2;
-  return {
-    color: iconColor,
-    size: iconSize
-  };
-};
-/**
- * The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.
- * Use `Search` to feature autocomplete interactions.
- *
- * This component includes a clear button, which will appear as text is entered and pressing it will
- * cause the input's internal state value to be set to an empty string.
- *
- * This component may only be used as uncontrolled, as the search value is managed within an internal state.
- * You can use the `onChange` prop to react to value changes and the `onSubmit` prop to react on search submission.
- *
- * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
- * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
- */
-
-
-const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
-    initialValue,
-    value,
-    placeholder,
-    inactive,
-    onChange,
-    onSubmit,
-    onClear,
-    onFocus,
-    accessibilityLabel,
-    copy = 'en',
-    tokens,
-    variant,
-    ...rest
-  } = _ref3;
-  const {
-    currentValue = '',
-    setValue
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange
-  });
-  const themeTokens = useThemeTokens('Search', tokens, variant);
-  const buttonTokens = useThemeTokens('SearchButton', tokens, variant);
-  const getThemeTokens = useThemeTokensCallback('Search', tokens, variant);
-  const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant); // TODO: support overriding the a11y props using a custom dictionary
-
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const {
-    placeholderColor,
-    buttonsGap,
-    clearButtonIcon: ClearButtonIcon,
-    submitButtonIcon: SubmitButtonIcon
-  } = themeTokens; // get the actual gap value for the current viewport
-
-  const buttonsGapSize = useSpacingScale(buttonsGap);
-
-  const handleSubmit = event => {
-    if (onSubmit !== undefined) {
-      onSubmit(currentValue, event);
-    }
-  };
-
-  const handleClear = event => {
-    var _ref$current;
-
-    setValue('', event);
-    onClear === null || onClear === void 0 ? void 0 : onClear('', event);
-    ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
-  };
-
-  const handleFocus = event => {
-    if (onFocus !== undefined) onFocus(event);
-  };
-
-  const isEmpty = currentValue === ''; // Accessibility label should always be present and correctly localised
-
-  const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel'); // Placeholder is optional and may be unset by passing an empty string
-
-  const placeholderText = placeholder !== null && placeholder !== void 0 ? placeholder : a11yLabelText;
-  const {
-    nativeID,
-    testID,
-    ...containerProps
-  } = selectContainerProps(rest);
-  return /*#__PURE__*/_jsx(View, { ...containerProps,
-    children: /*#__PURE__*/_jsx(TextInputBase, {
-      nativeID: nativeID,
-      testID: testID,
-      ...selectInputProps(rest),
-      ref: ref,
-      tokens: appearances => selectInputTokens({
-        searchTokens: getThemeTokens(appearances),
-        buttonTokens,
-        buttonsGapSize,
-        isEmpty
-      }),
-      placeholder: placeholderText,
-      placeholderTextColor: placeholderColor,
-      inactive: inactive,
-      enablesReturnKeyAutomatically: true,
-      returnKeyType: "search",
-      value: currentValue,
-      onChange: setValue,
-      onSubmitEditing: handleSubmit,
-      onFocus: handleFocus,
-      accessibilityLabel: a11yLabelText,
-      buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
-        accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
-        accessibilityRole: "button",
-        inactive: inactive,
-        onPress: handleClear,
-        tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
-        children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
-        })
-      }, "clear"), SubmitButtonIcon && /*#__PURE__*/_jsx(ButtonBase, {
-        accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
-        accessibilityRole: "button",
-        inactive: inactive,
-        onPress: handleSubmit,
-        tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
-          priority: 'high'
-        })),
-        children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
-            priority: 'high'
-          }))
-        })
-      }, "submit")]
-    })
-  });
-});
-Search.displayName = 'Search';
-Search.propTypes = { ...selectedContainerPropTypes,
-  ...selectedInputPropTypes,
-
-  /**
-   * Use this to set the initial value of the search input.
-   * Updating `initialValue` will **not** update the actual value.
-   */
-  initialValue: PropTypes.string,
-
-  /**
-   * Label rendered in the search input when it has no value.
-   */
-  placeholder: PropTypes.string,
-
-  /**
-   * Disables all user interactions with the search input.
-   */
-  inactive: PropTypes.bool,
-
-  /**
-   * Use to react upon search input's value changes.
-   * Will receive the searched value as an argument.
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * Triggered when the search input is submitted,
-   * either by pressing the submit button, "Enter" key on web,
-   * or "Search" key in a mobile keyboard.
-   */
-  onSubmit: PropTypes.func,
-
-  /**
-   * Triggered when the clear button is pressed.
-   */
-  onClear: PropTypes.func,
-
-  /**
-   * Triggered when the search input is focused.
-   */
-  onFocus: PropTypes.func,
-
-  /**
-   *
-   * Use to provide an accessible label for the input (visually hidden).
-   */
-  accessibilityLabel: PropTypes.string,
-
-  /**
-   * Select English or French copy for the accessible labels.
-   * You may also pass in a custom dictionary object.
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
-    accessibilityLabel: PropTypes.string,
-    clearButtonAccessibilityLabel: PropTypes.string,
-    submitButtonAccessibilityLabel: PropTypes.string
-  })]),
-  tokens: getTokensPropType('Search'),
-  variant: variantProp.propType
-};
-export default Search;

package/lib-module/Search/dictionary.js

@@ -1,12 +0,0 @@
-export default {
-  en: {
-    accessibilityLabel: 'Search',
-    clearButtonAccessibilityLabel: 'Clear',
-    submitButtonAccessibilityLabel: 'Search'
-  },
-  fr: {
-    accessibilityLabel: 'Chercher',
-    clearButtonAccessibilityLabel: 'Effacer',
-    submitButtonAccessibilityLabel: 'Chercher'
-  }
-};

package/lib-module/Search/index.js

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

package/lib-module/Select/Group.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const Group = _ref => {
-  let {
-    children,
-    label
-  } = _ref;
-  return /*#__PURE__*/_jsx("optgroup", {
-    label: label,
-    children: children
-  });
-};
-
-export default Group;
-Group.propTypes = {
-  children: componentPropType('Item'),
-  label: PropTypes.string.isRequired
-};

package/lib-module/Select/Group.native.js

@@ -1,15 +0,0 @@
-import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
-
-const Group = _ref => {
-  let {
-    children
-  } = _ref;
-  return children;
-};
-
-export default Group;
-Group.propTypes = {
-  children: componentPropType('Item'),
-  label: PropTypes.string.isRequired
-};

package/lib-module/Select/Item.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const Item = _ref => {
-  let {
-    children,
-    value
-  } = _ref;
-  return /*#__PURE__*/_jsx("option", {
-    value: value,
-    children: children
-  });
-};
-
-export default Item;
-Item.propTypes = {
-  children: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired
-};

package/lib-module/Select/Item.native.js

@@ -1,3 +0,0 @@
-const Item = () => null;
-
-export default Item;

package/lib-module/Select/Picker.js

@@ -1,68 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const Picker = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    value,
-    onChange,
-    onFocus,
-    onBlur,
-    onMouseOver,
-    onMouseOut,
-    style,
-    inactive,
-    children,
-    placeholder,
-    nativeID,
-    testID,
-    ...rest
-  } = _ref;
-  const {
-    accessibilityLabel,
-    accessibilityDescribedBy,
-    accessibilityInvalid
-  } = rest;
-  return /*#__PURE__*/_jsxs("select", {
-    ref: ref,
-    style: style,
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    disabled: inactive,
-    value: value || (placeholder !== undefined ? placeholder.value : undefined),
-    onChange: event => onChange(event.target.value, event),
-    id: nativeID,
-    "aria-label": accessibilityLabel,
-    "aria-describedby": accessibilityDescribedBy,
-    "aria-invalid": accessibilityInvalid,
-    "data-testid": testID,
-    children: [placeholder !== undefined && /*#__PURE__*/_jsx("option", {
-      value: placeholder.value,
-      disabled: true,
-      hidden: true,
-      children: placeholder.label
-    }), children]
-  });
-});
-Picker.displayName = 'Picker';
-export default Picker;
-Picker.propTypes = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  style: PropTypes.object,
-  inactive: PropTypes.bool,
-  children: componentPropType(['Item', 'Group']),
-  placeholder: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
-  }),
-  nativeID: PropTypes.string,
-  testID: PropTypes.string
-};