@telus-uds/components-base 1.7.1 → 1.8.2

package/lib-module/Feedback/Feedback.js

@@ -1,144 +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 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 = ({
-  titleFontSize,
-  ...tokens
-}) => applyTextStyles(selectTokens('Typography', { ...tokens,
-  fontSize: titleFontSize
-}));
-
-const selectContentTextStyles = ({
-  contentFontSize,
-  ...tokens
-}) => applyTextStyles(selectTokens('Typography', { ...tokens,
-  fontSize: contentFontSize
-}));
-
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
-
-const selectIconContainerStyles = ({
-  iconGap
-}) => ({
-  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__*/forwardRef(({
-  title,
-  children,
-  id,
-  validation,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
-  const themeTokens = useThemeTokens('Feedback', tokens, { ...variant,
-    validation
-  });
-  const {
-    space
-  } = themeTokens;
-  const {
-    icon: IconComponent
-  } = themeTokens;
-  const titleTextStyles = selectTitleTextStyles(themeTokens);
-  const contentTextStyles = selectContentTextStyles(themeTokens);
-  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',
-    alignItems: 'center'
-  }
-});

package/lib-module/Feedback/index.js

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

package/lib-module/Fieldset/Fieldset.js

@@ -1,145 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import Feedback from '../Feedback';
-import { spacingProps } from '../utils';
-import FieldsetContainer from './FieldsetContainer';
-import { getStackedContent } from '../StackView';
-import InputLabel from '../InputLabel';
-import useInputSupports from '../InputSupports/useInputSupports';
-import Legend from './Legend';
-/**
- * An alternative to InputSupports for groups of input elements that, on web, are to be
- * wrapped in a `<fieldset>` tag, with label content displated in a `<legend>` tag.
- *
- * Follows the same theming and most of the same props as InputSupports.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-const Fieldset = /*#__PURE__*/forwardRef(({
-  space,
-  feedback,
-  feedbackPosition = 'top',
-  validation,
-  legend,
-  hint,
-  hintPosition,
-  tooltip,
-  inactive,
-  accessibilityRole,
-  name: fieldsetName,
-  children
-}, ref) => {
-  // Skips `inputId` because a fieldset' legend describes multiple inputs
-  const {
-    hintId,
-    feedbackId,
-    a11yProps
-  } = useInputSupports({
-    feedback,
-    hint,
-    label: legend,
-    validation
-  });
-
-  const legendContent = legend && /*#__PURE__*/_jsx(Legend, {
-    children: /*#__PURE__*/_jsx(InputLabel, {
-      label: legend,
-      hint: hint,
-      hintPosition: hintPosition,
-      hintId: hintId,
-      tooltip: tooltip
-    })
-  });
-
-  const feedbackContent = feedback && /*#__PURE__*/_jsx(Feedback, {
-    id: feedbackId,
-    title: feedback,
-    validation: validation
-  }); // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
-  // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
-  // fieldset as much as possible, but also allow different spacing within content and between
-  // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
-
-
-  const childContent = /*#__PURE__*/_jsx(_Fragment, {
-    children: typeof children === 'function' ? children(a11yProps) : children
-  });
-
-  const orderedContent = feedbackPosition === 'bottom' ? [legendContent, feedbackContent, childContent] : [legendContent, childContent, feedbackContent];
-  const stackedContent = getStackedContent(orderedContent, {
-    space,
-    preserveFragments: true
-  });
-  return /*#__PURE__*/_jsx(FieldsetContainer, {
-    ref: ref,
-    inactive: inactive,
-    accessibilityRole: accessibilityRole,
-    name: fieldsetName,
-    children: stackedContent
-  });
-});
-Fieldset.displayName = 'Fieldset';
-Fieldset.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * The accessibility role of the `<fieldset>` element itself. Other React Native accessibility
-   * props are not supported because there is not an appropriate counterpart for Fieldsets.
-   */
-  accessibilityRole: PropTypes.string,
-
-  /**
-   * The amout of space between legend, feedback and content; according  to the theme's spacing scale.
-   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
-   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
-   */
-  space: spacingProps.types.spacingValue,
-
-  /**
-   * The text for the fieldset's legend, describing the fieldset content.
-   */
-  legend: 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,
-
-  /**
-   * Position of the feedback block relative to the fieldset's content.
-   */
-  feedbackPosition: PropTypes.oneOf(['above', 'below']),
-
-  /**
-   * If true, the fieldset is treated as inactive (setting `disabled` attribute on web).
-   */
-  inactive: PropTypes.bool,
-
-  /**
-   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
-   */
-  tooltip: PropTypes.string,
-
-  /**
-   * On web, this is passed to the `<fieldset>`'s `name` attribute.
-   */
-  name: PropTypes.string,
-
-  /**
-   * Use to visually mark an input as valid or invalid.
-   */
-  validation: PropTypes.oneOf(['error', 'success'])
-};
-export default Fieldset;

package/lib-module/Fieldset/FieldsetContainer.js

@@ -1,29 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import cssReset from './cssReset';
-/**
- * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const FieldsetContainer = /*#__PURE__*/forwardRef(({
-  children,
-  inactive,
-  accessibilityRole,
-  name: fieldsetName
-}, ref) => /*#__PURE__*/_jsx("fieldset", {
-  ref: ref,
-  disabled: inactive,
-  style: cssReset,
-  role: accessibilityRole,
-  name: fieldsetName,
-  children: children
-}));
-FieldsetContainer.displayName = 'FieldsetContainer';
-FieldsetContainer.propTypes = {
-  accessibilityRole: PropTypes.string,
-  children: PropTypes.node,
-  inactive: PropTypes.bool,
-  name: PropTypes.string
-};
-export default FieldsetContainer;

package/lib-module/Fieldset/FieldsetContainer.native.js

@@ -1,20 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View"; // No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
-// If a11y testing finds any additional handling is needed at the container level, add it here.
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const FieldsetContainer = /*#__PURE__*/forwardRef(({
-  children,
-  accessibilityRole
-}, ref) => /*#__PURE__*/_jsx(View, {
-  ref: ref,
-  accessibilityRole: accessibilityRole,
-  children: children
-}));
-FieldsetContainer.displayName = 'FieldsetContainer';
-FieldsetContainer.propTypes = {
-  children: PropTypes.node,
-  accessibilityRole: PropTypes.string
-};
-export default FieldsetContainer;

package/lib-module/Fieldset/Legend.js

@@ -1,21 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import cssReset from './cssReset';
-/**
- * On Web, wraps children in HTML `<legend>` tag.
- * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const Legend = /*#__PURE__*/forwardRef(({
-  children
-}, ref) => /*#__PURE__*/_jsx("legend", {
-  ref: ref,
-  style: cssReset,
-  children: children
-}));
-Legend.displayName = 'Legend';
-Legend.propTypes = {
-  children: PropTypes.node
-};
-export default Legend;

package/lib-module/Fieldset/Legend.native.js

@@ -1,28 +0,0 @@
-import React, { forwardRef } 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';
-/**
- * On Web, wraps children in HTML `<legend>` tag.
- * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const Legend = /*#__PURE__*/forwardRef(({
-  children
-}, ref) => /*#__PURE__*/_jsx(View, {
-  ref: ref,
-  style: staticStyles.stretch,
-  children: children
-}));
-Legend.displayName = 'Legend';
-Legend.propTypes = {
-  children: PropTypes.node
-};
-const staticStyles = StyleSheet.create({
-  stretch: {
-    width: '100%',
-    flexGrow: 1
-  }
-});
-export default Legend;

package/lib-module/Fieldset/cssReset.js

@@ -1,14 +0,0 @@
-// React Native Web has no built-in `fieldset` or `legend` support.
-// This reset makes them consistent with other RNW views.
-// Can't use RN stylesheets because it's not an RN element (RNW's createElement tooling is unstable).
-// Using CSS `all` doesn't work well as an inline style.
-// https://github.com/necolas/react-native-web/issues/1385
-export default {
-  margin: 'unset',
-  padding: 'unset',
-  float: 'unset',
-  border: 'unset',
-  width: 'unset',
-  display: 'flex',
-  flexDirection: 'column'
-};

package/lib-module/Fieldset/index.js

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

package/lib-module/FlexGrid/Col/Col.js

@@ -1,275 +0,0 @@
-import React, { forwardRef, useContext } from 'react';
-import PropTypes from 'prop-types';
-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 { viewports } from '@telus-uds/system-constants';
-import GutterContext from '../providers/GutterContext';
-import { useViewport } from '../../ViewportProvider';
-import applyInheritance from '../helpers';
-import { responsiveProps } from '../../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Col = /*#__PURE__*/forwardRef(({
-  horizontalAlign,
-  children,
-  xs,
-  sm,
-  md,
-  lg,
-  xl,
-  xsOffset,
-  smOffset,
-  mdOffset,
-  lgOffset,
-  xlOffset,
-  flex,
-  ...viewProps
-}, ref) => {
-  const gutter = useContext(GutterContext);
-  const viewPort = useViewport();
-  const hiddenLevels = applyInheritance([xs, sm, md, lg, xl]);
-
-  const getHorizontalAlignLevel = () => {
-    if (typeof horizontalAlign === 'object') {
-      return applyInheritance([horizontalAlign.xs, horizontalAlign.sm, horizontalAlign.md, horizontalAlign.lg, horizontalAlign.xl]);
-    }
-
-    if (typeof horizontalAlign === 'string') {
-      return [horizontalAlign, horizontalAlign, horizontalAlign, horizontalAlign, horizontalAlign];
-    }
-
-    return ['inherit', 'inherit', 'inherit', 'inherit', 'inherit'];
-  };
-
-  const horizontalAlignLevel = getHorizontalAlignLevel();
-
-  const toPercent = num => {
-    return `${num / 12 * 100}%`;
-  };
-
-  const calculateWidth = value => {
-    if (typeof value === 'undefined') {
-      return {};
-    }
-
-    if (typeof value === 'number') {
-      const percent = toPercent(value);
-      return {
-        maxWidth: percent,
-        flexBasis: percent
-      };
-    }
-
-    return {
-      flexGrow: 1,
-      flexBasis: 0,
-      maxWidth: '100%'
-    };
-  };
-
-  const calculateOffset = value => {
-    if (typeof value === 'number') {
-      const percent = toPercent(value);
-      return {
-        marginLeft: percent
-      };
-    }
-
-    return {};
-  };
-
-  const sizeStyles = sizes => {
-    const currViewport = Object.keys(sizes).find(key => key.startsWith(viewPort));
-    const currSize = sizes[currViewport];
-    return { ...calculateWidth(currSize)
-    };
-  };
-
-  const offsetStyles = offsets => {
-    const currViewport = Object.keys(offsets).find(key => key.startsWith(viewPort));
-    const currOffset = offsets[currViewport];
-    return { ...calculateOffset(currOffset)
-    };
-  };
-
-  const gutterPadding = {
-    paddingLeft: gutter ? 16 : 0,
-    paddingRight: gutter ? 16 : 0
-  };
-  let hidingStyles = {}; // TODO: consider setting this to always 'flex' in a major release.
-  // `display: block` is invalid in native apps.
-  // See https://telusdigital.atlassian.net/browse/UDS1-92
-
-  const shown = !flex && Platform.OS === 'web' ? 'block' : 'flex';
-
-  if (viewPort === viewports.xs) {
-    hidingStyles = {
-      display: hiddenLevels[0] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[0]
-    };
-  }
-
-  if (viewPort === viewports.sm) {
-    hidingStyles = {
-      display: hiddenLevels[1] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[1]
-    };
-  }
-
-  if (viewPort === viewports.md) {
-    hidingStyles = {
-      display: hiddenLevels[2] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[2]
-    };
-  }
-
-  if (viewPort === viewports.lg) {
-    hidingStyles = {
-      display: hiddenLevels[3] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[3]
-    };
-  }
-
-  if (viewPort === viewports.xl) {
-    hidingStyles = {
-      display: hiddenLevels[4] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[4]
-    };
-  }
-
-  const sizesArray = [xs, sm, md, lg, xl];
-  const offSetsArray = [xsOffset, smOffset, mdOffset, lgOffset, xlOffset];
-  const sizesWithIheritance = applyInheritance(sizesArray);
-  const offsetsWithIheritance = applyInheritance(offSetsArray);
-  const sizes = {
-    xs: sizesWithIheritance[0],
-    sm: sizesWithIheritance[1],
-    md: sizesWithIheritance[2],
-    lg: sizesWithIheritance[3],
-    xl: sizesWithIheritance[4]
-  };
-  const offsets = {
-    xs: offsetsWithIheritance[0],
-    sm: offsetsWithIheritance[1],
-    md: offsetsWithIheritance[2],
-    lg: offsetsWithIheritance[3],
-    xl: offsetsWithIheritance[4]
-  };
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    ...viewProps,
-    style: [styles.col, gutterPadding, offsetStyles(offsets), sizeStyles(sizes), { ...hidingStyles
-    }],
-    children: children
-  });
-});
-Col.displayName = 'Col';
-const styles = StyleSheet.create({
-  col: {
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 'auto',
-    maxWidth: '100%'
-  }
-});
-/*
- * We're disabling default props since passing undefined props to
- * the react-flexbox-grid component sets up blank classes that may cause
- * styling issues.
- */
-
-Col.propTypes = {
-  /**
-   * Specify number of columns within the 'xs' breakpoint range. `0` hides the column.
-   *
-   * `true` sets the column width automatically;
-   * `false` disables the prop
-   *
-   */
-  xs: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
-
-  /**
-   * Specify number of columns within the 'sm' breakpoint range. `0` hides the column.
-   *
-   * `true` sets the column width automatically;
-   * `false` disables the prop
-   *
-   */
-  sm: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
-
-  /**
-   * Specify number of columns within the 'md' breakpoint range. `0` hides the column.
-   *
-   * `true` sets the column width automatically;
-   * `false` disables the prop
-   *
-   */
-  md: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
-
-  /**
-   * Specify number of columns within the 'lg' breakpoint range. `0` hides the column.
-   *
-   * `true` sets the column width automatically;
-   * `false` disables the prop
-   *
-   */
-  lg: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
-
-  /**
-   * Specify number of columns after the 'xl' breakpoint. `0` hides the column.
-   *
-   * `true` sets the column width automatically;
-   * `false` disables the prop
-   *
-   */
-  xl: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
-
-  /**
-   * Offset the specified number of columns within the 'xs' breakpoint range. `0` hides the column.
-   *
-   */
-  xsOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
-
-  /**
-   * Offset the specified number of columns within the 'sm' breakpoint range.
-   *
-   */
-  smOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
-
-  /**
-   * Offset the specified number of columns within the 'md' breakpoint range.
-   *
-   */
-  mdOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
-
-  /**
-   * Offset the specified number of columns within the 'lg' breakpoint range.
-   *
-   */
-  lgOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
-
-  /**
-   * Offset the specified number of columns within the 'xl' breakpoint range.
-   */
-  xlOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
-
-  /**
-   * The columns of the Grid. Will typically be `FlexGrid.Col` components.
-   */
-  children: PropTypes.node.isRequired,
-
-  /**
-   *
-   * Align content horizontally within the column.
-   *
-   * Accepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure.
-   */
-  horizontalAlign: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['left', 'center', 'right'])),
-
-  /**
-   * (web only) Stretches the column to fill vertical space using `display: flex`.
-   * In native apps, FlexGrid.Col behaves as if this is always true (as do all `View`s).
-   */
-  flex: PropTypes.bool
-};
-export default Col;

package/lib-module/FlexGrid/Col/index.js

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