@telus-uds/components-base 1.3.0 → 1.5.0

package/lib-module/ExpandCollapse/Panel.js

@@ -0,0 +1,158 @@
+import React, { forwardRef, useState } from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+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 PropTypes from 'prop-types';
+import ExpandCollapseControl from './Control';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, useVerticalExpandAnimation, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]); // just void functions for now, since there are no style tokens for a panel or control at this point
+
+const selectGroupStyles = () => {};
+
+const selectContainerStyles = ({
+  contentPaddingLeft,
+  contentPaddingRight,
+  contentPaddingTop,
+  contentPaddingBottom
+}) => ({
+  paddingLeft: contentPaddingLeft,
+  paddingRight: contentPaddingRight,
+  paddingTop: contentPaddingTop,
+  paddingBottom: contentPaddingBottom
+});
+/**
+ * An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens
+ * and closes the collapsible children when pressed.
+ *
+ * Expects `openIds` and `onToggle` props from the `ExpandCollapse` render function and a unique
+ * `panelId` that matches the ids passed to the `<ExpandCollapse>`.
+ *
+ * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
+ * by the chosen accessibility props for a particular accessibility tools).
+ */
+
+
+const ExpandCollapsePanel = /*#__PURE__*/forwardRef(({
+  openIds = [],
+  panelId,
+  onToggle,
+  onPress,
+  control,
+  controlTokens,
+  children,
+  tokens,
+  variant,
+  ...rest
+}, ref) => {
+  const [containerHeight, setContainerHeight] = useState(null);
+  const isExpanded = openIds.includes(panelId);
+  const selectedProps = selectProps(rest);
+  selectedProps.accessibilityState = { ...(selectedProps.accessibilityState || {}),
+    expanded: isExpanded
+  };
+  const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
+    expanded: isExpanded
+  });
+
+  const handleControlPress = event => {
+    onToggle(panelId, event);
+    if (onPress) onPress(panelId, event);
+  };
+
+  const onContainerLayout = event => {
+    if (containerHeight === null) {
+      const {
+        layout: {
+          height = 0
+        } = {}
+      } = event.nativeEvent;
+      setContainerHeight(height);
+    }
+  };
+
+  const animatedStyles = useVerticalExpandAnimation({
+    containerHeight,
+    isExpanded,
+    tokens: themeTokens
+  }); // on web we can hide the contents until we have the container measured and avoid occasional jitter
+  // this won't work on native platforms
+
+  const overflowContainerStyles = containerHeight === null && Platform.OS === 'web' ? {
+    height: 0,
+    visibility: 'hidden'
+  } : undefined;
+  const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps;
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: selectGroupStyles(themeTokens),
+    children: [/*#__PURE__*/_jsx(ExpandCollapseControl, { ...selectedProps,
+      isExpanded: isExpanded,
+      tokens: controlTokens,
+      onPress: handleControlPress,
+      children: control
+    }), /*#__PURE__*/_jsx(View, {
+      style: overflowContainerStyles,
+      ...focusabilityProps,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        onLayout: onContainerLayout,
+        style: [staticStyles.itemsContainer, animatedStyles],
+        children: /*#__PURE__*/_jsx(View, {
+          style: selectContainerStyles(themeTokens),
+          children: children
+        })
+      })
+    })]
+  });
+});
+ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
+ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('ExpandCollapsePanel'),
+
+  /**
+   * Array of the ids of currently open groups
+   */
+  openIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+
+  /**
+   * Unique name by which the ExpandCollapse controls this element.
+   */
+  panelId: PropTypes.string.isRequired,
+
+  /**
+   * Function to call on pressing the panel's control, which should open or close the panel.
+   * If Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent.
+   */
+  onToggle: PropTypes.func.isRequired,
+
+  /**
+   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel.
+   */
+  onPress: PropTypes.func,
+
+  /**
+   * ExpandCollapsePanel's children are the content that is hidden or revealed on open or close, and may be any
+   * single React element or a render function which takes this group's isExpanded state, onToggle function and panelId
+   */
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+
+  /**
+   * The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed.
+   */
+  control: ExpandCollapseControl.propTypes.children.isRequired,
+
+  /**
+   * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
+   */
+  controlTokens: getTokensPropType('ExpandCollapseControl')
+};
+const staticStyles = StyleSheet.create({
+  itemsContainer: {
+    overflow: 'hidden'
+  }
+});
+export default ExpandCollapsePanel;

package/lib-module/ExpandCollapse/index.js

@@ -0,0 +1,7 @@
+import ExpandCollapse from './ExpandCollapse';
+import Accordion from './Accordion';
+import Panel from './Panel';
+ExpandCollapse.Panel = Panel;
+Accordion.Panel = Panel;
+export default ExpandCollapse;
+export { Accordion };

package/lib-module/Feedback/Feedback.js

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

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

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;