@telus-uds/components-base 1.20.0 → 1.22.0

package/lib-module/Fieldset/Fieldset.js

@@ -1,12 +1,12 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 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.
@@ -23,6 +23,8 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback,
     feedbackPosition = 'top',
     validation,
+    showIcon = false,
+    showErrorBorder = false,
     legend,
     hint,
     hintPosition,
@@ -44,21 +46,20 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     validation
   });
 
-  const legendContent = legend && /*#__PURE__*/_jsx(Legend, {
-    children: /*#__PURE__*/_jsx(InputLabel, {
-      copy: copy,
-      label: legend,
-      hint: hint,
-      hintPosition: hintPosition,
-      hintId: hintId,
-      tooltip: tooltip
-    })
+  const legendContent = legend && /*#__PURE__*/_jsx(InputLabel, {
+    copy: copy,
+    label: legend,
+    hint: hint,
+    hintPosition: hintPosition,
+    hintId: hintId,
+    tooltip: tooltip
   });
 
   const feedbackContent = feedback && /*#__PURE__*/_jsx(Feedback, {
     id: feedbackId,
     title: feedback,
-    validation: validation
+    validation: validation,
+    icon: showIcon
   }); // 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
@@ -74,14 +75,30 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     space,
     preserveFragments: true
   });
+  const borderStyle = validation === 'error' && showErrorBorder && staticStyles.errorBorder || staticStyles.noBorder;
   return /*#__PURE__*/_jsx(FieldsetContainer, {
     ref: ref,
     inactive: inactive,
     accessibilityRole: accessibilityRole,
     name: fieldsetName,
+    borderStyle: borderStyle,
+    showBorderStyle: showErrorBorder,
     children: stackedContent
   });
 });
+const staticStyles = StyleSheet.create({
+  errorBorder: {
+    border: true,
+    borderWidth: 1,
+    borderColor: 'red',
+    borderRadius: 10,
+    padding: 8
+  },
+  noBorder: {
+    padding: 9,
+    border: 'unset'
+  }
+});
 Fieldset.displayName = 'Fieldset';
 Fieldset.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
@@ -148,6 +165,16 @@ Fieldset.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: PropTypes.oneOf(['error', 'success'])
+  validation: PropTypes.oneOf(['error', 'success']),
+
+  /**
+   * Use to show error or success icon in the feedback
+   */
+  showIcon: PropTypes.bool,
+
+  /**
+   * Use to show border in case of error for a group of components
+   */
+  showErrorBorder: PropTypes.bool
 };
 export default Fieldset;

package/lib-module/Fieldset/FieldsetContainer.js

@@ -11,12 +11,16 @@ const FieldsetContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     inactive,
     accessibilityRole,
-    name: fieldsetName
+    name: fieldsetName,
+    showBorderStyle = false,
+    borderStyle
   } = _ref;
+  // If needs border for error design or reset the component style
+  const styleContainer = showBorderStyle ? borderStyle : cssReset;
   return /*#__PURE__*/_jsx("fieldset", {
     ref: ref,
     disabled: inactive,
-    style: cssReset,
+    style: styleContainer,
     role: accessibilityRole,
     name: fieldsetName,
     children: children
@@ -27,6 +31,8 @@ FieldsetContainer.propTypes = {
   accessibilityRole: PropTypes.string,
   children: PropTypes.node,
   inactive: PropTypes.bool,
-  name: PropTypes.string
+  name: PropTypes.string,
+  showBorderStyle: PropTypes.bool,
+  borderStyle: PropTypes.object
 };
 export default FieldsetContainer;

package/lib-module/QuickLinksFeature/QuickLinksFeature.js

@@ -0,0 +1,69 @@
+import React, { forwardRef, Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import { StackWrap } from '../StackView';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'; // pass through and type relevant system props - add more sets for interactive components
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const isQuickListItem = element => {
+  var _element$type, _element$type2;
+
+  const elementName = (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name);
+  return Boolean(elementName.match(/QuickLinksFeatureItem/));
+};
+/**
+ * QuickLinksFeature renders a list of interactive items.
+ *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
+ */
+
+
+const QuickLinksFeature = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    tag = 'ul',
+    children,
+    ...rest
+  } = _ref;
+  const {
+    stackGap,
+    stackJustify,
+    stackSpace
+  } = useThemeTokens('QuickLinksFeature', tokens, variant);
+  const items = Children.map(children, child => {
+    if (isQuickListItem(child)) {
+      return /*#__PURE__*/cloneElement(child, child.props);
+    }
+
+    return null;
+  });
+  return /*#__PURE__*/_jsx(StackWrap, {
+    space: stackSpace,
+    gap: stackGap,
+    tokens: {
+      justifyContent: stackJustify
+    },
+    tag: tag,
+    ref: ref,
+    ...selectProps(rest),
+    children: items
+  });
+});
+QuickLinksFeature.displayName = 'QuickLinksFeature';
+QuickLinksFeature.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('QuickLinksFeature'),
+  variant: variantProp.propType,
+
+  /**
+   * Default wrapper tag, by default it's "ul"
+   */
+  tag: PropTypes.string,
+
+  /**
+   * QuickLinksFeature.Item component
+   */
+  children: PropTypes.node
+};
+export default QuickLinksFeature;

package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -0,0 +1,130 @@
+import React, { forwardRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import Image from "react-native-web/dist/exports/Image";
+import Platform from "react-native-web/dist/exports/Platform";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import { getTokensPropType, variantProp, withLinkRouter, a11yProps, linkProps, selectSystemProps } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { Link } from '../Link';
+import { StackWrap } from '../StackView'; // pass through and type relevant system props - add more sets for interactive components
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps]);
+
+const selectImageStyle = imageDimension => ({
+  width: imageDimension,
+  height: imageDimension,
+  ...Platform.select({
+    // TODO: https://github.com/telus/universal-design-system/issues/487
+    web: {
+      transition: 'width 200ms, height 200ms'
+    }
+  })
+});
+
+const selectContainerStyle = _ref => {
+  let {
+    contentMaxDimension,
+    textAlign
+  } = _ref;
+  return {
+    textAlign,
+    width: contentMaxDimension,
+    overflow: 'hidden'
+  };
+};
+
+const selectImageContainerStyle = contentMaxDimension => ({
+  width: contentMaxDimension,
+  height: contentMaxDimension,
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+/**
+ * Component export along with QuickLinksFeature to be used as children
+ *
+ * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
+ */
+
+
+const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    imageAccessibilityLabel,
+    imageSource,
+    ...rest
+  } = _ref2;
+  const viewport = useViewport();
+  const getTokens = useThemeTokensCallback('QuickLinksFeatureItem', tokens, variant);
+  const [hover, setHover] = useState(false);
+  const {
+    contentDirection,
+    contentSpace,
+    contentAlignItems,
+    contentMaxDimension,
+    imageDimension,
+    textAlign
+  } = getTokens({
+    viewport,
+    hover
+  });
+  return /*#__PURE__*/_jsx(Link, {
+    ref: ref,
+    tokens: state => {
+      setHover(state.hover);
+      return getTokens(state);
+    },
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(View, {
+      style: selectContainerStyle({
+        contentMaxDimension,
+        textAlign
+      }),
+      children: /*#__PURE__*/_jsxs(StackWrap, {
+        direction: contentDirection,
+        space: contentSpace,
+        tokens: {
+          alignItems: contentAlignItems
+        },
+        children: [/*#__PURE__*/_jsx(View, {
+          style: selectImageContainerStyle(contentMaxDimension),
+          children: /*#__PURE__*/_jsx(Image, {
+            accessibilityIgnoresInvertColors: true,
+            imageAccessibilityLabel: imageAccessibilityLabel,
+            source: imageSource,
+            style: selectImageStyle(imageDimension)
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          children: children
+        })]
+      })
+    })
+  });
+});
+QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem';
+QuickLinksFeatureItem.propTypes = { ...withLinkRouter.propTypes,
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('QuickLinksFeatureItem'),
+  variant: variantProp.propType,
+
+  /**
+   * Text which will be rendered within the Link
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Image accessibility label
+   */
+  imageAccessibilityLabel: PropTypes.string.isRequired,
+
+  /**
+   * Image node or Image url
+   */
+  imageSource: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+};
+export default withLinkRouter(QuickLinksFeatureItem);

package/lib-module/QuickLinksFeature/index.js

@@ -0,0 +1,4 @@
+import QuickLinksFeature from './QuickLinksFeature';
+import QuickLinksFeatureItem from './QuickLinksFeatureItem';
+QuickLinksFeature.Item = QuickLinksFeatureItem;
+export default QuickLinksFeature;

package/lib-module/RadioCard/RadioCardGroup.js

@@ -120,6 +120,8 @@ const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback: feedback,
     inactive: inactive || readOnly,
     validation: validation,
+    showErrorBorder: true,
+    showIcon: true,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: props => /*#__PURE__*/_jsx(StackContainer, {

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -5,20 +5,28 @@ import responsiveProps from '../utils/props/responsiveProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
 export const ThemeContext = /*#__PURE__*/createContext(uninitialisedError);
-export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError);
+export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError); // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
+// This should change in future major releases to become "opt-in" legacy support.
+
+const defaultThemeOptions = {
+  // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+  forceAbsoluteFontSizing: true,
+  // TODO: switch `forceZIndex` to be false by default in the next major version
+  forceZIndex: true,
+  // TODO: switch `enableHelmetSSR` to be false by default in the next major version
+  enableHelmetSSR: true
+};
 
 const ThemeProvider = _ref => {
   let {
     children,
     defaultTheme,
-    // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
-    // TODO: switch `forceZIndex` to be false by default in the next major version
-    themeOptions = {
-      forceAbsoluteFontSizing: true,
-      forceZIndex: true
-    }
+    themeOptions = {}
   } = _ref;
-  const [theme, setTheme] = useState(defaultTheme); // Validate the theme tokens version on every render.
+  const [theme, setTheme] = useState(defaultTheme);
+  const appliedThemeOptions = { ...defaultThemeOptions,
+    ...themeOptions
+  }; // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
   // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
 
@@ -27,7 +35,7 @@ const ThemeProvider = _ref => {
     value: setTheme,
     children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
       value: { ...theme,
-        themeOptions
+        themeOptions: appliedThemeOptions
       },
       children: children
     })
@@ -52,10 +60,14 @@ ThemeProvider.propTypes = {
    *   such as Footnote and Notification to avoid content to stretch width more then the page's width
    * - `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`
    *   and when true, sets zIndex to be `0` (the default from `react-native-web`)
+   * - `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be
+   *   disabled unless a web app has been specifically configured to stop React Helmet accumulating
+   *   instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet
    */
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
     forceZIndex: PropTypes.bool,
+    enableHelmetSSR: PropTypes.bool,
     contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
   })
 };

package/lib-module/ThemeProvider/utils/styles.js

@@ -45,7 +45,9 @@ export function applyTextStyles(_ref) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
     styles.fontFamily = "".concat(fontName).concat(fontWeight).concat(fontStyle);
-  } else if (fontWeight) {
+  }
+
+  if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
     styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;

package/lib-module/index.js

@@ -26,6 +26,7 @@ export { default as Notification } from './Notification';
 export { default as Pagination } from './Pagination';
 export { default as Progress } from './Progress';
 export { default as QuickLinks } from './QuickLinks';
+export { default as QuickLinksFeature } from './QuickLinksFeature';
 export { default as Radio } from './Radio';
 export * from './Radio';
 export { default as RadioCard } from './RadioCard';
@@ -50,6 +51,7 @@ export { default as TooltipButton } from './TooltipButton';
 export { default as Typography } from './Typography';
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
 export { default as BaseProvider } from './BaseProvider';
+export { useHydrationContext } from './BaseProvider/HydrationContext';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
 export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
 export * from './utils';

package/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.8.0",
+    "@telus-uds/system-theme-tokens": "^2.9.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -70,5 +70,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.20.0"
+  "version": "1.22.0"
 }

package/src/Button/ButtonGroup.jsx

@@ -50,6 +50,8 @@ const ButtonGroup = forwardRef(
       feedback,
       name: inputGroupName,
       copy,
+      iconPosition,
+
       accessibilityRole = maxValues === 1
         ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
         : Platform.select({ web: 'group', default: 'none' }),
@@ -123,6 +125,8 @@ const ButtonGroup = forwardRef(
                 toggleOneValue(id, event)
               }
 
+              const iconProp = itemRest.icon || undefined
+
               const itemA11y = {
                 accessibilityState: { checked: isSelected },
                 accessibilityRole: itemA11yRole,
@@ -141,10 +145,12 @@ const ButtonGroup = forwardRef(
                   tokens={getButtonTokens}
                   selected={isSelected}
                   inactive={inactive}
+                  icon={iconProp}
                   {...selectItemProps({
                     ...itemRest,
                     ...itemA11y
                   })}
+                  iconPosition={iconPosition}
                 >
                   {label}
                 </ButtonBase>
@@ -213,6 +219,10 @@ ButtonGroup.propTypes = {
    * Changing the `initialValues` does not change the user's selections.
    */
   initialValues: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Defines if the icon will be displayed on the right or left side of the label.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right']),
   /**
    * Main text used to describe this group, used in Fieldset's Legend element.
    */

package/src/ExpandCollapse/Control.jsx

@@ -35,10 +35,11 @@ function selectContainerStyles({
 }
 
 // TODO: use stack / spacer when available
-function selectIconContainerStyles({ iconGap, iconPosition }) {
+function selectIconContainerStyles({ iconGap, iconPaddingTop, iconPosition }) {
   const paddingSide = iconPosition === 'right' ? 'paddingLeft' : 'paddingRight'
   return {
-    [paddingSide]: iconGap
+    [paddingSide]: iconGap,
+    paddingTop: iconPaddingTop
   }
 }
 

package/src/Feedback/Feedback.jsx

@@ -56,8 +56,8 @@ const selectIconContainerStyles = ({ iconGap }) => ({
  * All accessibility props set on this component will be applied to the outer container.
  */
 const Feedback = forwardRef(
-  ({ title, children, id, validation, tokens, variant, ...rest }, ref) => {
-    const themeTokens = useThemeTokens('Feedback', tokens, { ...variant, validation })
+  ({ title, children, id, validation, tokens, variant, icon, ...rest }, ref) => {
+    const themeTokens = useThemeTokens('Feedback', tokens, { ...variant, validation, icon })
     const { space } = themeTokens
 
     const { icon: IconComponent } = themeTokens

package/src/Fieldset/Fieldset.jsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import { StyleSheet } from 'react-native'
 
 import Feedback from '../Feedback'
 import { spacingProps } from '../utils'
@@ -7,7 +8,6 @@ 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
@@ -23,6 +23,8 @@ const Fieldset = forwardRef(
       feedback,
       feedbackPosition = 'top',
       validation,
+      showIcon = false,
+      showErrorBorder = false,
       legend,
       hint,
       hintPosition,
@@ -43,19 +45,17 @@ const Fieldset = forwardRef(
     })
 
     const legendContent = legend && (
-      <Legend>
-        <InputLabel
-          copy={copy}
-          label={legend}
-          hint={hint}
-          hintPosition={hintPosition}
-          hintId={hintId}
-          tooltip={tooltip}
-        />
-      </Legend>
+      <InputLabel
+        copy={copy}
+        label={legend}
+        hint={hint}
+        hintPosition={hintPosition}
+        hintId={hintId}
+        tooltip={tooltip}
+      />
     )
     const feedbackContent = feedback && (
-      <Feedback id={feedbackId} title={feedback} validation={validation} />
+      <Feedback id={feedbackId} title={feedback} validation={validation} icon={showIcon} />
     )
 
     // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
@@ -68,6 +68,9 @@ const Fieldset = forwardRef(
         ? [legendContent, feedbackContent, childContent]
         : [legendContent, childContent, feedbackContent]
     const stackedContent = getStackedContent(orderedContent, { space, preserveFragments: true })
+    const borderStyle =
+      (validation === 'error' && showErrorBorder && staticStyles.errorBorder) ||
+      staticStyles.noBorder
 
     return (
       <FieldsetContainer
@@ -75,12 +78,28 @@ const Fieldset = forwardRef(
         inactive={inactive}
         accessibilityRole={accessibilityRole}
         name={fieldsetName}
+        borderStyle={borderStyle}
+        showBorderStyle={showErrorBorder}
       >
         {stackedContent}
       </FieldsetContainer>
     )
   }
 )
+const staticStyles = StyleSheet.create({
+  errorBorder: {
+    border: true,
+    borderWidth: 1,
+    borderColor: 'red',
+    borderRadius: 10,
+    padding: 8
+  },
+  noBorder: {
+    padding: 9,
+    border: 'unset'
+  }
+})
+
 Fieldset.displayName = 'Fieldset'
 
 Fieldset.propTypes = {
@@ -136,7 +155,15 @@ Fieldset.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: PropTypes.oneOf(['error', 'success'])
+  validation: PropTypes.oneOf(['error', 'success']),
+  /**
+   * Use to show error or success icon in the feedback
+   */
+  showIcon: PropTypes.bool,
+  /**
+   * Use to show border in case of error for a group of components
+   */
+  showErrorBorder: PropTypes.bool
 }
 
 export default Fieldset