@telus-uds/components-base 1.12.1 → 1.14.1

package/lib-module/Notification/Notification.js

@@ -3,7 +3,7 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp } from '../utils';
 import ButtonBase from '../Button/ButtonBase';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
@@ -57,6 +57,10 @@ const selectDismissButtonContainerStyles = _ref4 => {
     paddingLeft: dismissButtonGap
   };
 };
+
+const selectContentContainerStyle = maxWidth => ({
+  width: maxWidth || '100%'
+});
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -131,6 +135,7 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const contentMaxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
 
   if (isDismissed) {
     return null;
@@ -150,30 +155,33 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const onDismissPress = () => setIsDismissed(true); // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
 
 
-  return /*#__PURE__*/_jsxs(View, {
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [staticStyles.container, selectContainerStyles(themeTokens)],
     ...selectProps(rest),
-    children: [IconComponent && /*#__PURE__*/_jsx(View, {
-      style: selectIconContainerStyles(themeTokens),
-      children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconProps(themeTokens)
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: staticStyles.contentContainer,
-      children: content && typeof content === 'function' ? content({
-        textStyles,
-        variant
-      }) : content
-    }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
-      style: selectDismissButtonContainerStyles(themeTokens),
-      children: /*#__PURE__*/_jsx(ButtonBase, {
-        onPress: onDismissPress,
-        accessibilityRole: "button",
-        accessibilityLabel: getCopy('dismiss'),
-        children: () => /*#__PURE__*/_jsx(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.content, selectContentContainerStyle(contentMaxWidth)],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: staticStyles.contentContainer,
+        children: [IconComponent && /*#__PURE__*/_jsx(View, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconProps(themeTokens)
+          })
+        }), content && typeof content === 'function' ? content({
+          textStyles,
+          variant
+        }) : content]
+      }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
+        style: selectDismissButtonContainerStyles(themeTokens),
+        children: /*#__PURE__*/_jsx(ButtonBase, {
+          onPress: onDismissPress,
+          accessibilityRole: "button",
+          accessibilityLabel: getCopy('dismiss'),
+          children: () => /*#__PURE__*/_jsx(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+          })
         })
-      })
-    })]
+      })]
+    })
   });
 });
 Notification.displayName = 'Notification';
@@ -206,9 +214,16 @@ Notification.propTypes = { ...selectedSystemPropTypes,
 export default Notification;
 const staticStyles = StyleSheet.create({
   container: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   contentContainer: {
-    flex: 1
+    flexDirection: 'row',
+    flexShrink: 1
+  },
+  content: {
+    flexDirection: 'row',
+    flexShrink: 1,
+    justifyContent: 'space-between'
   }
 });

package/lib-module/Radio/RadioGroup.js

@@ -69,6 +69,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     initialCheckedId,
@@ -118,6 +119,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     };
 
     return /*#__PURE__*/_jsx(Radio, {
+      error: validation === 'error',
       ref: itemRef,
       id: radioId,
       checked: isChecked,
@@ -137,6 +139,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
@@ -192,6 +195,11 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
    */
   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']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/lib-module/RadioCard/RadioCardGroup.js

@@ -70,6 +70,7 @@ const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     initialCheckedId,
@@ -114,6 +115,7 @@ const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive || readOnly,
@@ -199,6 +201,11 @@ RadioCardGroup.propTypes = { ...selectedSystemPropTypes,
    */
   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']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/lib-module/SkipLink/SkipLink.js

@@ -0,0 +1,188 @@
+import React, { forwardRef } from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import PropTypes from 'prop-types';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, clickProps, getTokensPropType, linkProps, resolvePressableTokens, selectSystemProps, variantProp, withLinkRouter } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps]); // ensure explicit selection of tokens
+
+const selectStyles = _ref => {
+  let {
+    backgroundColor,
+    outlineColor,
+    outlineOffset,
+    outlineStyle,
+    outlineWidth,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius
+  } = _ref;
+  return {
+    backgroundColor,
+    outlineColor,
+    outlineOffset,
+    outlineStyle,
+    outlineWidth,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius
+  };
+};
+
+const selectTextStyles = _ref2 => {
+  let {
+    color
+  } = _ref2;
+  return {
+    color
+  };
+};
+/**
+ * A generic Skip link component, unstyled by default.
+ * A Skip link component help keyboard-only users, screen reader users to skip
+ * sections and navigate to the content they want.
+ *
+ * ## Component API
+ *
+ * For common uses, pass a `href` that is a # link to a DOM id that can be skipped to (web only).
+ *
+ * The element with this ID should be focusable, e.g. `<Box nativeID="skip-target" focusable>`.
+ *
+ * Other custom behaviour may be set by passing an `onPress` function, and routers may be integrated
+ * in the same way as other navigation-related components by passing a `LinkRouter`; but a # anchor
+ * href on web and/or a `targetRef` for cross-platform applications is the recommended approach.
+ *
+ * ## Visible styling
+ *
+ * When focused, the skip link shows as a visible element similar to a simplified ButtonLink using
+ * UDS theming. The `tokens` prop may be used to override these styles.
+ *
+ * To control the background of a skip link, the following tokens can be used:
+ *
+ * - `backgroundColor`
+ * *
+ * In order to control the color of the skip link text, the following tokens can be used:
+ *
+ * - `color`
+ *
+ * ### Padding
+ *
+ * The following padding tokens can be used:
+ *
+ * - `paddingHorizontal`
+ * - `paddingVertical`
+ *
+ * ### Outline
+ *
+ * The following tokens to control the outline:
+ *
+ * - `outlineColor`
+ * - `outlineOffset`
+ * - `outlineStyle`
+ * - `outlineWidth`
+ *
+ * ## Usability and A11y guidelines
+ *
+ * - The skip link component is visually hidden until a keyboard press activates it.
+ * - Usually, you should place the skip link immediately after the opening <body> tag.
+ * - This lets users bypass top-level navigation links and jump to the main content on a page.
+ * - Also consider using SkipLink before a complex feature containing many focusable elements.
+ *
+ * ## Accessibility
+ *
+ * Skip link supports all the common a11y and link props.
+ */
+
+
+const SkipLink = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    tokens,
+    variant,
+    href,
+    children,
+    ...rawRest
+  } = _ref3;
+  const {
+    onPress,
+    ...rest
+  } = clickProps.toPressProps(rawRest);
+  const getTokens = useThemeTokensCallback('SkipLink', tokens, variant);
+  const defaultTokens = getTokens();
+
+  const resolveLinkTokens = pressState => resolvePressableTokens(defaultTokens, pressState);
+
+  const handlePress = event => {
+    if (typeof onPress === 'function') onPress(event); // TODO - support native apps with something based on refs and/or setAccessibilityFocus
+  };
+
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    accessibilityRole: "link",
+    onPress: handlePress,
+    href: href,
+    style: _ref4 => {
+      let {
+        focused: focus
+      } = _ref4;
+      const themeTokens = getTokens({
+        focus
+      });
+      const skipLinkStyle = selectStyles(themeTokens);
+      return [staticStyles.absolute, skipLinkStyle, !focus && staticStyles.hidden];
+    },
+    ...selectProps(rest),
+    children: pressState => {
+      const themeTokens = resolveLinkTokens(pressState);
+      const textStyles = selectTextStyles(themeTokens);
+      return /*#__PURE__*/_jsx(Text, {
+        style: [textStyles, staticStyles.baseline],
+        children: children
+      });
+    }
+  });
+});
+SkipLink.displayName = 'SkipLink';
+SkipLink.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The text content shown or read out when the SkipLink is focused, usually a string.
+   */
+  children: PropTypes.node,
+
+  /**
+   * The target to skip to. Usually an anchor link to a section id (e.g. href="#main-section").
+   */
+  href: PropTypes.string,
+  tokens: getTokensPropType('SkipLink'),
+  variant: variantProp.propType
+};
+const staticStyles = StyleSheet.create({
+  baseline: {
+    alignSelf: 'baseline'
+  },
+  absolute: {
+    margin: 0,
+    position: 'absolute',
+    top: 0,
+    left: 0
+  },
+  hidden: {
+    overflow: 'hidden',
+    ...Platform.select({
+      web: {
+        clip: 'rect(0 0 0 0)',
+        clipPath: 'inset(50%)'
+      },
+      default: {
+        // width / height of 0 would make it non-focusable
+        height: 1,
+        width: 1,
+        opacity: 0
+      }
+    })
+  }
+});
+export default withLinkRouter(SkipLink);

package/lib-module/SkipLink/index.js

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

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -1,6 +1,7 @@
 import React, { createContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { validateThemeTokensVersion } from './utils';
+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);
@@ -45,9 +46,12 @@ ThemeProvider.propTypes = {
    * - `forceAbsoluteFontSizing`: available on web only; when set to true, allows
    *   using absolute font sizing (in pixels, doesn't scale) instead of the
    *   relative sizing (in `rem`, scales depending on the browser settings)
+   * - `contentMaxWidth`: allows configuration of the content max width to be used in components
+   *   such as Footnote and Notification to avoid content to stretch width more then the page's width
    */
   themeOptions: PropTypes.shape({
-    forceAbsoluteFontSizing: PropTypes.bool
+    forceAbsoluteFontSizing: PropTypes.bool,
+    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
   })
 };
 export default ThemeProvider;

package/lib-module/ToggleSwitch/ToggleSwitchGroup.js

@@ -25,6 +25,7 @@ const ToggleSwitchGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     inactive = false,
     feedback,
     hint,
+    hintPosition = 'inline',
     tooltip,
     legend,
     name: inputGroupName,
@@ -110,6 +111,7 @@ const ToggleSwitchGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
@@ -192,6 +194,11 @@ ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
    */
   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']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/lib-module/index.js

@@ -32,6 +32,7 @@ export { default as Search } from './Search';
 export { default as Select } from './Select';
 export { default as SideNav } from './SideNav';
 export { default as Skeleton } from './Skeleton';
+export { default as SkipLink } from './SkipLink';
 export { default as Spacer } from './Spacer';
 export { default as StackView } from './StackView';
 export * from './StackView';

package/package.json

@@ -1,21 +1,55 @@
 {
-  "name": "@telus-uds/components-base",
-  "version": "1.12.1",
+  "author": "TELUS Digital",
+  "browserslist": [
+    "extends @telus-uds/browserslist-config"
+  ],
+  "bugs": {
+    "url": "https://github.com/telus/universal-design-system/issues"
+  },
+  "dependencies": {
+    "airbnb-prop-types": "^2.16.0",
+    "@telus-uds/system-constants": "^1.0.4",
+    "@telus-uds/system-theme-tokens": "^2.3.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.merge": "^4.6.2",
+    "prop-types": "^15.7.2",
+    "react-native-picker-select": "^8.0.4",
+    "semver": "^7.3.5"
+  },
   "description": "Base components",
+  "devDependencies": {
+    "@storybook/addon-a11y": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/cli": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@storybook/builder-webpack5": "^6.5.6",
+    "@storybook/manager-webpack5": "^6.5.6",
+    "@telus-uds/browserslist-config": "^1.0.4",
+    "@testing-library/jest-native": "^4.0.1",
+    "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/react-native": "^7.2.0",
+    "react-test-renderer": "^16.3.2",
+    "webpack": "5.x"
+  },
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "homepage": "https://github.com/telus/universal-design-system#readme",
   "keywords": [
     "base"
   ],
-  "author": "TELUS Digital",
-  "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "UNLICENSED",
   "main": "lib/index.js",
   "module": "lib-module/index.js",
-  "react-native": "src/index.js",
-  "sideEffects": false,
-  "directories": {
-    "lib": "lib",
-    "test": "__tests__"
+  "name": "@telus-uds/components-base",
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-native": "*",
+    "react-native-web": "~0.17.5"
   },
+  "react-native": "src/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/telus/universal-design-system.git"
@@ -31,46 +65,11 @@
     "build:code": "npm run build:main && npm run build:module",
     "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js",
     "storybook": "start-storybook",
-    "build-storybook": "build-storybook",
-    "dev": "npm run build:code --watch"
-  },
-  "bugs": {
-    "url": "https://github.com/telus/universal-design-system/issues"
+    "build-storybook": "build-storybook"
   },
+  "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "browserslist": [
-    "extends @telus-uds/browserslist-config"
-  ],
-  "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-native": "*",
-    "react-native-web": "~0.17.5"
-  },
-  "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/cli": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@storybook/builder-webpack5": "^6.5.6",
-    "@storybook/manager-webpack5": "^6.5.6",
-    "@telus-uds/browserslist-config": "^1.0.4",
-    "@testing-library/jest-native": "^4.0.1",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/react-native": "^7.2.0",
-    "react-test-renderer": "^16.3.2",
-    "webpack": "5.x"
-  },
-  "dependencies": {
-    "airbnb-prop-types": "^2.16.0",
-    "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.1.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.merge": "^4.6.2",
-    "prop-types": "^15.7.2",
-    "react-native-picker-select": "^8.0.4",
-    "semver": "^7.3.5"
-  }
+  "version": "1.14.1"
 }

package/src/Button/ButtonBase.jsx

@@ -17,6 +17,7 @@ import {
   wrapStringsInText,
   withLinkRouter
 } from '../utils'
+import { IconText } from '../Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -147,6 +148,11 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
   })
 }
 
+const selectItemIconTokens = ({ color, iconSize }) => ({
+  size: iconSize,
+  color
+})
+
 const ButtonBase = forwardRef(
   (
     {
@@ -158,6 +164,9 @@ const ButtonBase = forwardRef(
       disabled = false, // alias for inactive
       inactive = disabled,
       selected = false,
+      icon,
+      iconPosition = icon ? 'left' : undefined,
+      iconProps,
       ...rawRest
     },
     ref
@@ -195,10 +204,13 @@ const ButtonBase = forwardRef(
           const containerStyles = selectInnerContainerStyles(themeTokens)
           const borderStyles = selectBorderStyles(themeTokens)
           const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text]
+          const iconTokens = selectItemIconTokens(themeTokens)
+          const { iconSpace } = themeTokens
 
           // If the container has a width set, fill it instead of sizing from content.
           // If in future we support text alignments other than center, add here.
           const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align
+          const IconComponent = icon || themeTokens.icon
 
           return (
             <View
@@ -217,15 +229,22 @@ const ButtonBase = forwardRef(
                 })
               ]}
             >
-              {wrapStringsInText(
-                typeof children === 'function'
-                  ? children({
-                      ...resolvePressableState(pressableState, extraButtonState),
-                      textStyles
-                    })
-                  : children,
-                { style: textStyles }
-              )}
+              <IconText
+                icon={IconComponent}
+                iconPosition={iconPosition}
+                space={iconSpace}
+                iconProps={{ ...iconProps, tokens: iconTokens }}
+              >
+                {wrapStringsInText(
+                  typeof children === 'function'
+                    ? children({
+                        ...resolvePressableState(pressableState, extraButtonState),
+                        textStyles
+                      })
+                    : children,
+                  { style: textStyles }
+                )}
+              </IconText>
             </View>
           )
         }}

package/src/Button/ButtonGroup.jsx

@@ -45,6 +45,7 @@ const ButtonGroup = forwardRef(
       legend,
       tooltip,
       hint,
+      hintPosition = 'inline',
       validation,
       feedback,
       name: inputGroupName,
@@ -94,6 +95,7 @@ const ButtonGroup = forwardRef(
         legend={legend}
         tooltip={tooltip}
         hint={hint}
+        hintPosition={hintPosition}
         space={fieldSpace}
         feedback={feedback}
         readOnly={readOnly}
@@ -217,6 +219,10 @@ ButtonGroup.propTypes = {
    * Optional additional text giving more detail to help a user make a choice.
    */
   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']),
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/src/Button/propTypes.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 import { variantProp, getTokensPropType } from '../utils/props'
 import A11yText from '../A11yText'
+import { iconComponentPropTypes } from '../Icon'
 
 export const textAndA11yText = ABBPropTypes.childrenOf(
   PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])
@@ -31,6 +32,19 @@ const buttonPropTypes = {
    * Function called when the button is pressed. Required unless the button has a href.
    */
   onPress: PropTypes.func,
+  /**
+   * Optional variant that may be passed down to the link's icon if there is one
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+  /**
+   * A function component for an SVG icon to render inside the link. Inherits size and color from
+   * the link and any Typography the link is nested inside.
+   */
+  icon: PropTypes.func,
   variant: variantProp.propType
 }
 export default buttonPropTypes