@telus-uds/components-base 1.1.0 → 1.3.1

package/lib-module/Fieldset/Fieldset.js

@@ -0,0 +1,145 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,14 @@
+// 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

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

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

@@ -0,0 +1,265 @@
+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,
+  ...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 = {};
+  const shown = 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']))
+};
+export default Col;

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

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

package/lib-module/FlexGrid/FlexGrid.js

@@ -0,0 +1,147 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { viewports } from '@telus-uds/system-constants';
+import Row from './Row';
+import Col from './Col';
+import { useViewport } from '../ViewportProvider';
+import GutterContext from './providers/GutterContext';
+import applyInheritance from './helpers';
+import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ * A mobile-first flexbox grid.
+ */
+
+const FlexGrid = /*#__PURE__*/forwardRef(({
+  limitWidth = true,
+  gutter = true,
+  outsideGutter = true,
+  xsReverse,
+  smReverse,
+  mdReverse,
+  lgReverse,
+  xlReverse,
+  tag,
+  accessibilityRole,
+  children,
+  ...rest
+}, ref) => {
+  const viewPort = useViewport();
+  const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
+  const marginVertical = 0;
+  const marginHorizontal = outsideGutter ? 'auto' : -16;
+  const width = outsideGutter ? '100%' : 'auto';
+  let flexDirection;
+  let maxWidth;
+
+  if (viewPort === viewports.xs) {
+    // no maxWidth for xs
+    flexDirection = reverseLevel[0] ? 'column-reverse' : 'column';
+  }
+
+  if (viewPort === viewports.sm) {
+    maxWidth = limitWidth && viewports.map.get(viewports.sm);
+    flexDirection = reverseLevel[1] ? 'column-reverse' : 'column';
+  }
+
+  if (viewPort === viewports.md) {
+    maxWidth = limitWidth && viewports.map.get(viewports.md);
+    flexDirection = reverseLevel[2] ? 'column-reverse' : 'column';
+  }
+
+  if (viewPort === viewports.lg) {
+    maxWidth = limitWidth && viewports.map.get(viewports.lg);
+    flexDirection = reverseLevel[3] ? 'column-reverse' : 'column';
+  }
+
+  if (viewPort === viewports.xl) {
+    maxWidth = limitWidth && viewports.map.get(viewports.xl);
+    flexDirection = reverseLevel[4] ? 'column-reverse' : 'column';
+  }
+
+  const props = { ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+    ...selectProps(rest)
+  };
+  return /*#__PURE__*/_jsx(GutterContext.Provider, {
+    value: gutter,
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      ...props,
+      style: [styles.grid, {
+        marginHorizontal,
+        marginVertical,
+        width,
+        flexDirection,
+        maxWidth
+      }],
+      children: children
+    })
+  });
+});
+FlexGrid.displayName = 'FlexGrid';
+const styles = StyleSheet.create({
+  grid: {
+    flexWrap: 'wrap'
+  }
+});
+FlexGrid.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Whether or not to give the grid a fixed width. This also centres the grid horizontally.
+   */
+  limitWidth: PropTypes.bool,
+
+  /**
+   * Whether or not to include gutters in between columns.
+   */
+  gutter: PropTypes.bool,
+
+  /**
+   * Whether or not to include gutter at the ends to the left and right of the FlexGrid
+   */
+  outsideGutter: PropTypes.bool,
+
+  /**
+   * Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
+   */
+  xsReverse: PropTypes.bool,
+
+  /**
+   * Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop.
+   */
+  smReverse: PropTypes.bool,
+
+  /**
+   * Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop.
+   */
+  mdReverse: PropTypes.bool,
+
+  /**
+   * Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop.
+   */
+  lgReverse: PropTypes.bool,
+
+  /**
+   * Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
+   */
+  xlReverse: PropTypes.bool,
+
+  /**
+   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: PropTypes.oneOf(layoutTags),
+
+  /**
+   * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
+   */
+  children: PropTypes.node.isRequired
+};
+FlexGrid.Row = Row;
+FlexGrid.Col = Col;
+export default FlexGrid;