@telus-uds/components-base 1.12.0 → 1.14.0

package/lib-module/TextInput/TextInputBase.js

@@ -4,13 +4,13 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import NativeTextInput from "react-native-web/dist/exports/TextInput";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, 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, textInputHandlerProps, textInputProps, viewProps]);
 
-const selectInputStyles = (_ref, inactive) => {
+const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,
     color,
@@ -41,7 +41,8 @@ const selectInputStyles = (_ref, inactive) => {
     fontName,
     fontSize,
     lineHeight,
-    fontWeight
+    fontWeight,
+    themeOptions
   });
 
   function linesToHeight(lines) {
@@ -210,9 +211,12 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
     // Input could lead to changing its state from uncontrolled to controlled
     value: isControlled ? currentValue : undefined
   };
+  const {
+    themeOptions
+  } = useTheme();
   const nativeInputStyle = selectInputStyles({ ...themeTokens,
     height
-  }, inactive);
+  }, themeOptions, inactive);
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/_jsx(NativeTextInput, {

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);
@@ -9,7 +10,11 @@ export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError)
 const ThemeProvider = _ref => {
   let {
     children,
-    defaultTheme
+    defaultTheme,
+    // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+    themeOptions = {
+      forceAbsoluteFontSizing: true
+    }
   } = _ref;
   const [theme, setTheme] = useState(defaultTheme); // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
@@ -19,7 +24,9 @@ const ThemeProvider = _ref => {
   return /*#__PURE__*/_jsx(ThemeSetterContext.Provider, {
     value: setTheme,
     children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
-      value: theme,
+      value: { ...theme,
+        themeOptions
+      },
       children: children
     })
   });
@@ -31,6 +38,20 @@ ThemeProvider.propTypes = {
     metadata: PropTypes.shape({
       themeTokensVersion: PropTypes.string.isRequired
     }).isRequired
-  }).isRequired
+  }).isRequired,
+
+  /**
+   * An object containing options allowing to customize the theming experience:
+   *
+   * - `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,
+    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
+  })
 };
 export default ThemeProvider;

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

@@ -14,14 +14,21 @@ export function applyTextStyles(_ref) {
     fontWeight = '400',
     fontName,
     fontStyle = 'normal',
+    themeOptions = {
+      // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+      forceAbsoluteFontSizing: true
+    },
     ...rest
   } = _ref;
   const styles = { ...rest
   };
+  const {
+    forceAbsoluteFontSizing
+  } = themeOptions;
 
   if (fontSize) {
     // If relative font sizes are needed, catch and calculate them here
-    styles.fontSize = fontSize;
+    styles.fontSize = Platform.OS === 'web' && !forceAbsoluteFontSizing ? "".concat(fontSize / fontBasePixels, "rem") : fontSize;
   }
 
   if (typeof lineHeight === 'number') {

package/lib-module/ThemeProvider/utils/theme-tokens.js

@@ -158,6 +158,6 @@ export const validateThemeTokensVersion = theme => {
   const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
 
   if (!semVerSatisfies(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(pkg.name, " v").concat(pkg.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(pkg.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md"));
+    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(pkg.name, " v").concat(pkg.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(pkg.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md"));
   }
 };

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/Typography/Typography.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
-import { useThemeTokens } from '../ThemeProvider';
+import { useTheme, useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { applyTextStyles } from '../ThemeProvider/utils';
 import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag } from '../utils';
@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps]);
 
-const selectTextStyles = _ref => {
+const selectTextStyles = (_ref, themeOptions) => {
   let {
     fontWeight,
     fontSize,
@@ -31,6 +31,7 @@ const selectTextStyles = _ref => {
     color,
     lineHeight,
     fontName,
+    themeOptions,
     textAlign,
     textTransform,
     letterSpacing
@@ -55,10 +56,13 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
   const themeTokens = useThemeTokens('Typography', tokens, variant, {
     viewport
   });
+  const {
+    themeOptions
+  } = useTheme();
   const resolvedTextProps = { ...selectTextProps(rest),
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
-    } : themeTokens),
+    } : themeTokens, themeOptions),
     dataSet,
     maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
   };

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.0",
+  "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.2.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.0"
 }

package/src/BaseProvider/index.jsx

@@ -4,17 +4,20 @@ import A11yInfoProvider from '../A11yInfoProvider'
 import ViewportProvider from '../ViewportProvider'
 import ThemeProvider from '../ThemeProvider'
 
-const BaseProvider = ({ defaultTheme, children }) => (
+const BaseProvider = ({ defaultTheme, children, themeOptions }) => (
   <A11yInfoProvider>
     <ViewportProvider>
-      <ThemeProvider defaultTheme={defaultTheme}>{children}</ThemeProvider>
+      <ThemeProvider defaultTheme={defaultTheme} themeOptions={themeOptions}>
+        {children}
+      </ThemeProvider>
     </ViewportProvider>
   </A11yInfoProvider>
 )
 
 BaseProvider.propTypes = {
+  children: PropTypes.node.isRequired,
   defaultTheme: ThemeProvider.propTypes?.defaultTheme,
-  children: PropTypes.node.isRequired
+  themeOptions: PropTypes.shape({ forceAbsoluteFontSizing: PropTypes.bool })
 }
 
 export default BaseProvider

package/src/Button/ButtonBase.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
-import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils'
+import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider'
 import buttonPropTypes from './propTypes'
 import {
   a11yProps,
@@ -17,6 +17,7 @@ import {
   wrapStringsInText,
   withLinkRouter
 } from '../utils'
+import { IconText } from '../Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -121,13 +122,17 @@ const selectBorderStyles = ({ borderColor, borderWidth, borderRadius }) => ({
   borderRadius
 })
 
-const selectTextStyles = ({ fontSize, color, lineHeight, fontName, fontWeight, textAlign }) =>
+const selectTextStyles = (
+  { fontSize, color, lineHeight, fontName, fontWeight, textAlign },
+  themeOptions
+) =>
   applyTextStyles({
     fontSize,
     color,
     lineHeight,
     fontName,
     fontWeight,
+    themeOptions,
     textAlign
   })
 
@@ -143,6 +148,11 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
   })
 }
 
+const selectItemIconTokens = ({ color, iconSize }) => ({
+  size: iconSize,
+  color
+})
+
 const ButtonBase = forwardRef(
   (
     {
@@ -154,6 +164,9 @@ const ButtonBase = forwardRef(
       disabled = false, // alias for inactive
       inactive = disabled,
       selected = false,
+      icon,
+      iconPosition = icon ? 'left' : undefined,
+      iconProps,
       ...rawRest
     },
     ref
@@ -174,6 +187,7 @@ const ButtonBase = forwardRef(
         selectOuterWidthStyles(themeTokens)
       ]
     }
+    const { themeOptions } = useTheme()
 
     return (
       <Pressable
@@ -189,11 +203,14 @@ const ButtonBase = forwardRef(
           const themeTokens = resolveButtonTokens(pressableState)
           const containerStyles = selectInnerContainerStyles(themeTokens)
           const borderStyles = selectBorderStyles(themeTokens)
-          const textStyles = [selectTextStyles(themeTokens), staticStyles.text]
+          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
@@ -212,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