@telus-uds/components-base 1.7.1 → 1.8.2

package/lib-module/HorizontalScroll/index.js

@@ -1,11 +0,0 @@
-import HorizontalScroll, { selectHorizontalScrollTokens } from './HorizontalScroll';
-import { useItemPositions, getItemPositionScrollTarget, getItemPositionLayoutHandler, itemPositionsPropType } from './itemPositions';
-export default HorizontalScroll;
-export { default as HorizontalScrollButton } from './HorizontalScrollButton';
-export const horizontalScrollUtils = {
-  selectHorizontalScrollTokens,
-  useItemPositions,
-  getItemPositionScrollTarget,
-  getItemPositionLayoutHandler,
-  itemPositionsPropType
-};

package/lib-module/HorizontalScroll/itemPositions.js

@@ -1,106 +0,0 @@
-import { useRef, useState } from 'react';
-import PropTypes from 'prop-types'; // Utilities to assist scrolling a parent so that it snaps neatly to an appropriate child.
-
-/**
- * @typedef ItemPositionPosition
- * @property {number} [ItemPositionItem.start] - optional theme scale variants e.g. compact, wide
- * @property {number} [ItemPositionItem.end] - optional override to force a particular pixel size
- *
- * @typedef {Object.<number, ItemPositionItem>} ItemPositionPositions - ref object of start/end coordinates
- *
- * @typedef ItemPositions
- * @property {number} ItemPositions.contentWidth - current width of potentially-overflowing content inside scrollable
- * @property {number} ItemPositions.containerWidth - current width of non-overflowing outer scroll container
- * @property {number} ItemPositions.scrollOffset - current x position of the left edge of the visible section of the scrollable content
- * @property {ItemPositionPositions} ItemPositions.positions - `{ start, end }` coordinates of each scrollable content item, by index
- * @property {(targetX: number) => void)} ItemPositions.scrollTo - function to scroll to a co-ordinate, applying scrolling logic
- * @property {() => void)} ItemPositions.setIsReady - function to call when layout has been calculated and itemPositions data is ready
- */
-
-/**
- * Takes a desired scroll target coordinate and returns a valid coordinate
- * that, when not scrolling to one end or another, snaps to the start of an item,
- * making sure any "scroll back" button doesn't overlap the first item.
- *
- * @param {number} x - the intended coordinate to scroll to
- * @param {number} scrollMax - the highest posible coordinate to scroll to
- * @param {ItemPositionPositions} positions - positions list from `useItemPositions` ref
- * @param {number} [buttonClearance] - offset to allow space for a button
- * @returns {number}
- */
-
-export const getItemPositionScrollTarget = (x, scrollMax, positions, buttonClearance = 0) => {
-  if (x <= 0) return 0;
-  if (x >= scrollMax) return scrollMax; // If not scrolling all the way to the start or end, stop
-  // where the first item is not coverred by the scroll previous button
-
-  const targetItem = Object.values(positions).find(({
-    start,
-    end
-  }) => start <= x && end > x); // If there's no target item we're landing at a gap between items
-
-  const targetX = targetItem ? targetItem.start : x;
-  return Math.max(0, targetX - buttonClearance);
-};
-/**
- * Returns a handler for React Native's `onLayout` which updates the values of
- * the ref object returned from `useItemPositions`.
- *
- * @param {ItemPositionPositions} positions
- * @param {number} index
- * @returns {function}
- */
-
-export const getItemPositionLayoutHandler = (positions, index) => {
-  const handleLayout = ({
-    nativeEvent: {
-      layout: {
-        width,
-        x
-      }
-    }
-  }) => {
-    /* eslint-disable-next-line no-param-reassign */
-    positions[index] = {
-      start: x,
-      end: x + width
-    };
-  };
-
-  return handleLayout;
-};
-/**
- * Wrapper for `useRef` which gives a mutable object in which item start/end coordinates,
- * scrollTo method and content/container widths may be set and updated without causing a re-render.
- *
- * @returns {[ItemPositions, isReady: bool]} tuple array of:
- *  - current ref object `{ positions, contentWidth, containerWidth, scrollOffset, scrollTo, setIsReady }`
- *  - boolean that updates to `true` (causing a re-render) after the first time `setIsReady` is called
- */
-
-export const useItemPositions = () => {
-  const [isReady, setIsReady] = useState(false);
-  return [useRef({
-    positions: {},
-    scrollTo: () => {},
-    contentWidth: 0,
-    containerWidth: 0,
-    scrollOffset: 0,
-    setIsReady
-  }).current, isReady];
-};
-/**
- * PropType for the ref object returned by `useItemPositions`
- */
-
-export const itemPositionsPropType = PropTypes.exact({
-  positions: PropTypes.objectOf(PropTypes.shape({
-    start: PropTypes.number,
-    end: PropTypes.number
-  })),
-  scrollTo: PropTypes.func,
-  contentWidth: PropTypes.number,
-  containerWidth: PropTypes.number,
-  scrollOffset: PropTypes.number,
-  setIsReady: PropTypes.func
-});

package/lib-module/Icon/Icon.js

@@ -1,61 +0,0 @@
-import React, { forwardRef } from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, scaleWithText, variantProp } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Icon = /*#__PURE__*/forwardRef(({
-  icon: IconComponent,
-  accessibilityLabel,
-  variant,
-  tokens,
-  scalesWithText = false,
-  dataSet
-}, ref) => {
-  const themeTokens = useThemeTokens('Icon', tokens, variant);
-  const size = scalesWithText ? scaleWithText(themeTokens.size) : themeTokens.size;
-
-  const iconContent = /*#__PURE__*/_jsx(IconComponent, {
-    title: accessibilityLabel,
-    size: size,
-    color: themeTokens.color
-  });
-
-  return Platform.OS === 'web' ? /*#__PURE__*/_jsx(View, {
-    ref: ref // eslint-disable-next-line react-native/no-inline-styles
-    ,
-    style: {
-      // TODO: systematise animations.
-      // https://github.com/telus/universal-design-system/issues/487
-      transition: 'transform 200ms, color 200ms',
-      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
-    },
-    dataSet: dataSet,
-    children: iconContent
-  }) : iconContent;
-});
-Icon.displayName = 'Icon';
-export const iconComponentPropTypes = {
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Icon'),
-
-  /**
-   * Descriptive label used in web SVG title tag for accessibility
-   */
-  accessibilityLabel: PropTypes.string,
-
-  /**
-   * controls whether the icon size should be proportionate to any accessibility-related font scaling.
-   */
-  scalesWithText: PropTypes.bool
-};
-Icon.propTypes = { ...iconComponentPropTypes,
-
-  /**
-   * A valid UDS icon component imported from a UDS palette
-   * (e.g.) `import { MyIcon } from @telus-uds/palette-<brand>/build/web/icons`
-   */
-  icon: PropTypes.elementType.isRequired
-};
-export default Icon;

package/lib-module/Icon/IconText.js

@@ -1,81 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import View from "react-native-web/dist/exports/View";
-import Icon, { iconComponentPropTypes } from './Icon';
-import { getStackedContent } from '../StackView';
-import { spacingProps } from '../utils';
-/**
- * Returns an icon and some text with a sized gap between them. This is a utility component
- * intended for use when creating components, not intended for use in applications on its own.
- *
- * IconText does not wrap its children, so should be used either:
- *  - inline within a <Text> element
- *  - within a container with `flexDirection: 'row'`
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const IconText = /*#__PURE__*/forwardRef(({
-  space,
-  iconPosition = 'left',
-  icon: IconComponent,
-  iconProps,
-  children
-}, ref) => {
-  var _iconProps$tokens;
-
-  const iconContent = IconComponent && /*#__PURE__*/_jsx(Icon, {
-    ref: ref,
-    icon: IconComponent,
-    scalesWithText: true,
-    ...iconProps
-  }); // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
-  // See abandoned issue https://github.com/facebook/react-native/issues/6529
-
-
-  const size = iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size;
-  const iconAdjusted = Platform.OS === 'android' && iconContent && size ? /*#__PURE__*/_jsx(View, {
-    style: {
-      transform: [{
-        translateY: size * 0.2
-      }]
-    },
-    children: iconContent
-  }) : iconContent;
-  return getStackedContent(iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted], {
-    space,
-    direction: 'row'
-  });
-});
-IconText.displayName = 'IconText';
-IconText.propTypes = {
-  /**
-   * Amount of space to separate the text content and icon. Uses the themes's spacing scale
-   * (see useSpacingScale for more info).
-   */
-  space: spacingProps.types.spacingValue,
-
-  /**
-   * Whether the icon should be to the left of the content or the right of the content.
-   */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
-
-  /**
-   * A valid UDS icon component imported from a UDS palette.
-   */
-  icon: PropTypes.func,
-
-  /**
-   * Props that will be passed to the icon component. By default the icon's `scalesWithText`
-   * prop will be set as "true" so that the icon continues to match the size of the text
-   * if users use accessibility settings to increase text size.
-   */
-  iconProps: PropTypes.exact(iconComponentPropTypes),
-
-  /**
-   * Content to be rendered alongside the Icon component. Usually this should be a
-   * `<Typography>` component, or a component that renders `<Text>`.
-   */
-  children: PropTypes.node
-};
-export default IconText;

package/lib-module/Icon/index.js

@@ -1,4 +0,0 @@
-import Icon, { iconComponentPropTypes } from './Icon';
-import IconText from './IconText';
-export default Icon;
-export { iconComponentPropTypes, IconText };

package/lib-module/IconButton/IconButton.js

@@ -1,115 +0,0 @@
-import React, { forwardRef } 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 StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, resolvePressableState, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
-import Icon from '../Icon';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectOuterStyle = ({
-  backgroundColor,
-  borderRadius,
-  outerBorderWidth,
-  outerBorderColor,
-  outerBorderGap,
-  shadow
-}) => [{
-  backgroundColor,
-  ...applyShadowToken(shadow),
-  ...applyOuterBorder({
-    borderRadius,
-    outerBorderWidth,
-    outerBorderColor,
-    outerBorderGap
-  }),
-  ...Platform.select({
-    web: {
-      outline: 'none',
-      display: 'inline-flex'
-    }
-  })
-}, staticStyles.outer];
-
-const selectInnerStyle = ({
-  borderColor,
-  borderWidth = 0,
-  borderRadius,
-  padding = 0
-}) => ({
-  // Inner borders animate with the icon and should be treated like a themable feature of the icon
-  borderColor,
-  borderRadius,
-  borderWidth,
-  padding: Math.max(0, padding - borderWidth) // Stable size as border changes
-
-});
-/**
- * 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 IconButton = /*#__PURE__*/forwardRef(({
-  tokens,
-  variant,
-  icon: IconComponent,
-  href,
-  hrefAttrs,
-  accessibilityRole = href ? 'link' : 'button',
-  ...rawRest
-}, ref) => {
-  const {
-    onPress,
-    ...rest
-  } = clickProps.toPressProps(rawRest);
-  const selectedProps = selectProps({ ...rest,
-    accessibilityRole
-  });
-  const handlePress = linkProps.handleHref({
-    href,
-    onPress
-  });
-  const getTokens = useThemeTokensCallback('IconButton', tokens, variant);
-
-  const getOuterStyle = pressableState => selectOuterStyle(getTokens(resolvePressableState(pressableState)));
-
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    href: href,
-    onPress: handlePress,
-    hrefAttrs: hrefAttrs,
-    style: getOuterStyle,
-    ...selectedProps,
-    children: pressableState => {
-      const themeTokens = getTokens(resolvePressableState(pressableState));
-      return /*#__PURE__*/_jsx(View, {
-        style: selectInnerStyle(themeTokens),
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: IconComponent,
-          title: selectedProps.accessibilityLabel,
-          tokens: selectTokens('Icon', themeTokens, 'icon')
-        })
-      });
-    }
-  });
-});
-IconButton.displayName = 'IconButton';
-IconButton.propTypes = { ...selectedSystemPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('IconButton'),
-  icon: PropTypes.elementType.isRequired,
-  href: PropTypes.string,
-  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
-  onPress: PropTypes.func
-};
-const staticStyles = StyleSheet.create({
-  outer: {
-    alignSelf: 'flex-start'
-  }
-});
-export default withLinkRouter(IconButton);

package/lib-module/IconButton/index.js

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

package/lib-module/InputLabel/InputLabel.js

@@ -1,134 +0,0 @@
-import React, { forwardRef } 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, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils';
-import LabelContent from './LabelContent';
-import Tooltip from '../Tooltip';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectLabelStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
-
-const selectHintStyles = ({
-  hintColor,
-  hintFontName,
-  hintFontSize,
-  hintFontWeight,
-  hintLineHeight
-}) => applyTextStyles({
-  color: hintColor,
-  fontName: hintFontName,
-  fontSize: hintFontSize,
-  fontWeight: hintFontWeight,
-  lineHeight: hintLineHeight
-});
-
-const selectGapStyles = ({
-  gap
-}) => ({
-  marginRight: gap
-});
-
-const InputLabel = /*#__PURE__*/forwardRef(({
-  label,
-  forId,
-  hint,
-  hintPosition = 'inline',
-  hintId,
-  tooltip,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
-  const themeTokens = useThemeTokens('InputLabel', tokens, variant);
-  const hasTooltip = tooltip !== undefined;
-  const isHintInline = hintPosition === 'inline';
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(View, {
-      ref: ref,
-      style: staticStyles.container,
-      ...selectProps(rest),
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
-        children: /*#__PURE__*/_jsx(LabelContent, {
-          forId: forId,
-          children: label
-        })
-      }), hint && isHintInline && /*#__PURE__*/_jsx(Text, {
-        style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
-        nativeID: hintId,
-        children: hint
-      }), hasTooltip && /*#__PURE__*/_jsx(View, {
-        style: [staticStyles.tooltipAlign, {
-          height: themeTokens.fontSize * themeTokens.lineHeight
-        }],
-        children: /*#__PURE__*/_jsx(Tooltip, {
-          content: tooltip
-        })
-      })]
-    }), hint && !isHintInline && /*#__PURE__*/_jsx(Text, {
-      style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
-      nativeID: hintId,
-      children: hint
-    })]
-  });
-});
-InputLabel.displayName = 'InputLabel';
-InputLabel.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * The input label.
-   */
-  label: PropTypes.string.isRequired,
-
-  /**
-   * The id attribute of the input which this label refers to.
-   */
-  forId: PropTypes.string,
-
-  /**
-   * A short description of the expected input.
-   */
-  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']),
-
-  /**
-   * The id attribute passed down to the hint element.
-   */
-  hintId: PropTypes.string,
-
-  /**
-   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
-   */
-  tooltip: PropTypes.string,
-  tokens: getTokensPropType('InputLabel'),
-  variant: variantProp.propType
-};
-export default InputLabel;
-const staticStyles = StyleSheet.create({
-  container: {
-    flexShrink: 1,
-    flexDirection: 'row',
-    alignItems: 'baseline'
-  },
-  label: {
-    flexShrink: 1
-  },
-  hintBelow: {
-    flexBasis: '100%',
-    flexShrink: 0
-  },
-  tooltipAlign: {
-    alignSelf: 'flex-start',
-    justifyContent: 'center'
-  }
-});

package/lib-module/InputLabel/LabelContent.js

@@ -1,24 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/forwardRef(({
-  children,
-  forId
-}, ref) => /*#__PURE__*/_jsx("label", {
-  ref: ref,
-  htmlFor: forId,
-  style: staticStyles.inheritCursor,
-  children: children
-}));
-LabelContent.displayName = 'LabelContent';
-LabelContent.propTypes = {
-  children: PropTypes.string,
-  forId: PropTypes.string
-}; // Note that <label> is not React Native, so we can't use `StyleSheet.create` here
-
-const staticStyles = {
-  inheritCursor: {
-    cursor: 'inherit'
-  }
-};
-export default LabelContent;

package/lib-module/InputLabel/LabelContent.native.js

@@ -1,16 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View"; // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/forwardRef(({
-  children
-}, ref) => ref ? /*#__PURE__*/_jsx(View, {
-  ref: ref,
-  children: children
-}) : children);
-LabelContent.displayName = 'LabelContent';
-LabelContent.propTypes = {
-  children: PropTypes.node
-};
-export default LabelContent;

package/lib-module/InputLabel/index.js

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

package/lib-module/InputSupports/InputSupports.js

@@ -1,88 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import InputLabel from '../InputLabel';
-import Feedback from '../Feedback';
-import StackView from '../StackView';
-import { useThemeTokens } from '../ThemeProvider';
-import useInputSupports from './useInputSupports';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const InputSupports = /*#__PURE__*/forwardRef(({
-  children,
-  label,
-  hint,
-  hintPosition = 'inline',
-  feedback,
-  tooltip,
-  validation
-}, ref) => {
-  const {
-    space
-  } = useThemeTokens('InputSupports');
-  const {
-    inputId,
-    hintId,
-    feedbackId,
-    a11yProps
-  } = useInputSupports({
-    feedback,
-    hint,
-    label,
-    validation
-  });
-  return /*#__PURE__*/_jsxs(StackView, {
-    space: space,
-    ref: ref,
-    children: [label && /*#__PURE__*/_jsx(InputLabel, {
-      label: label,
-      hint: hint,
-      hintPosition: hintPosition,
-      hintId: hintId,
-      tooltip: tooltip,
-      forId: inputId
-    }), typeof children === 'function' ? children({
-      inputId,
-      ...a11yProps
-    }) : children, feedback && /*#__PURE__*/_jsx(Feedback, {
-      id: feedbackId,
-      title: feedback,
-      validation: validation
-    })]
-  });
-});
-InputSupports.displayName = 'InputSupports';
-InputSupports.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * The input label.
-   */
-  label: PropTypes.string,
-
-  /**
-   * A short description of the expected input.
-   */
-  hint: PropTypes.string,
-
-  /**
-   * Position of the hint relative to label.
-   */
-  hintPosition: PropTypes.oneOf(['inline', 'below']),
-
-  /**
-   * A detailed description of validation error/success or additional instructions.
-   * Visual variant is determined based on the `validation` prop.
-   */
-  feedback: PropTypes.string,
-
-  /**
-   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
-   */
-  tooltip: PropTypes.string,
-
-  /**
-   * Use to visually mark an input as valid or invalid.
-   */
-  validation: PropTypes.oneOf(['error', 'success'])
-};
-export default InputSupports;

package/lib-module/InputSupports/index.js

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

package/lib-module/InputSupports/useInputSupports.js

@@ -1,31 +0,0 @@
-import useUniqueId from '../utils/useUniqueId';
-
-const joinDefined = array => array.filter(item => item !== undefined).join(' ');
-
-const useInputSupports = ({
-  label,
-  feedback,
-  validation,
-  hint
-}) => {
-  const hasValidationError = validation === 'error';
-  const inputId = useUniqueId('input');
-  const hintId = useUniqueId('input-hint');
-  const feedbackId = useUniqueId('input-feedback');
-  const a11yProps = {
-    accessibilityLabel: label,
-    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]),
-    // native only -> replaced with describedBy on web
-    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
-    hint && hintId]),
-    accessibilityInvalid: hasValidationError
-  };
-  return {
-    inputId,
-    hintId,
-    feedbackId,
-    a11yProps
-  };
-};
-
-export default useInputSupports;