@telus-uds/components-base 1.12.1 → 1.14.1

package/src/Icon/IconText.jsx

@@ -52,7 +52,7 @@ IconText.propTypes = {
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
   /**
    * Props that will be passed to the icon component. By default the icon's `scalesWithText`
    * prop will be set as "true" so that the icon continues to match the size of the text

package/src/Link/InlinePressable.jsx

@@ -9,17 +9,15 @@ import { Pressable, StyleSheet } from 'react-native'
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
  *
- * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
- *
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-const InlinePressable = forwardRef(({ children, style, inline = false, ...props }, ref) => (
+const InlinePressable = forwardRef(({ children, style, ...props }, ref) => (
   <Pressable
     ref={ref}
     style={(pressState) => [
-      staticStyles[inline ? 'inline' : 'inlineFlex'],
+      staticStyles.inline,
       typeof style === 'function' ? style(pressState) : style
     ]}
     {...props}
@@ -31,11 +29,7 @@ InlinePressable.displayName = 'InlinePressable'
 
 const staticStyles = StyleSheet.create({
   inline: {
-    // Stop Pressable defaulting to (block) flex
     display: 'inline'
-  },
-  inlineFlex: {
-    display: 'inline-flex'
   }
 })
 

package/src/Link/LinkBase.jsx

@@ -20,13 +20,10 @@ import { IconText, iconComponentPropTypes } from '../Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
 
-const selectOuterBorderStyles = ({
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  borderRadius,
-  outerBorderOutline
-}) =>
+const selectOuterBorderStyles = (
+  { outerBorderColor, outerBorderWidth, outerBorderGap, borderRadius, outerBorderOutline },
+  hasIcon
+) =>
   // A view wrapper with a border on native messes up inline text alignment
   // so for now make focus styles strictly web-only
   Platform.OS === 'web'
@@ -41,7 +38,7 @@ const selectOuterBorderStyles = ({
         }),
         // Stops focus ring stretching horizontally if parent has display: block
         // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
-        display: 'inline-flex'
+        display: hasIcon ? 'inline-flex' : 'inline' // Stop Pressable defaulting to (block) flex
       }
     : {}
 
@@ -147,18 +144,12 @@ const LinkBase = forwardRef(
     return (
       <InlinePressable
         {...selectedProps}
-        inline={hasIcon} // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
-          const outerBorderStyles = selectOuterBorderStyles(themeTokens)
+          const outerBorderStyles = selectOuterBorderStyles(themeTokens, hasIcon)
           const decorationStyles = selectDecorationStyles(themeTokens)
-          return [
-            outerBorderStyles,
-            blockLeftStyle,
-            decorationStyles,
-            hasIcon && staticStyles.rowContainer
-          ]
+          return [outerBorderStyles, blockLeftStyle, decorationStyles, staticStyles.rowContainer]
         }}
       >
         {(linkState) => {
@@ -202,7 +193,7 @@ LinkBase.propTypes = {
    * 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,
+  icon: PropTypes.elementType,
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
    */

package/src/List/ListItem.jsx

@@ -180,7 +180,7 @@ ListItem.propTypes = {
   /**
    * Renders side item icon
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
   /**
    * Will set display icon color
    */

package/src/Notification/Notification.jsx

@@ -10,7 +10,8 @@ import {
   selectTokens,
   variantProp,
   viewProps,
-  wrapStringsInText
+  wrapStringsInText,
+  useResponsiveProp
 } from '../utils'
 import ButtonBase from '../Button/ButtonBase'
 import useCopy from '../utils/useCopy'
@@ -41,6 +42,10 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
   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
@@ -98,6 +103,7 @@ const Notification = forwardRef(
     const themeTokens = useThemeTokens('Notification', tokens, variant, { system })
     const getCopy = useCopy({ dictionary, copy })
     const { themeOptions } = useTheme()
+    const contentMaxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
 
     if (isDismissed) {
       return null
@@ -121,25 +127,27 @@ const Notification = forwardRef(
         style={[staticStyles.container, selectContainerStyles(themeTokens)]}
         {...selectProps(rest)}
       >
-        {IconComponent && (
-          <View style={selectIconContainerStyles(themeTokens)}>
-            <IconComponent {...selectIconProps(themeTokens)} />
+        <View style={[staticStyles.content, selectContentContainerStyle(contentMaxWidth)]}>
+          <View style={staticStyles.contentContainer}>
+            {IconComponent && (
+              <View style={selectIconContainerStyles(themeTokens)}>
+                <IconComponent {...selectIconProps(themeTokens)} />
+              </View>
+            )}
+            {content && typeof content === 'function' ? content({ textStyles, variant }) : content}
           </View>
-        )}
-        <View style={staticStyles.contentContainer}>
-          {content && typeof content === 'function' ? content({ textStyles, variant }) : content}
+          {dismissible && DismissIconComponent && (
+            <View style={selectDismissButtonContainerStyles(themeTokens)}>
+              <ButtonBase
+                onPress={onDismissPress}
+                accessibilityRole="button"
+                accessibilityLabel={getCopy('dismiss')}
+              >
+                {() => <DismissIconComponent {...selectDismissIconProps(themeTokens)} />}
+              </ButtonBase>
+            </View>
+          )}
         </View>
-        {dismissible && DismissIconComponent && (
-          <View style={selectDismissButtonContainerStyles(themeTokens)}>
-            <ButtonBase
-              onPress={onDismissPress}
-              accessibilityRole="button"
-              accessibilityLabel={getCopy('dismiss')}
-            >
-              {() => <DismissIconComponent {...selectDismissIconProps(themeTokens)} />}
-            </ButtonBase>
-          </View>
-        )}
       </View>
     )
   }
@@ -175,9 +183,16 @@ 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/src/Radio/RadioGroup.jsx

@@ -84,6 +84,7 @@ const RadioGroup = forwardRef(
       legend,
       tooltip,
       hint,
+      hintPosition = 'inline',
       validation,
       feedback,
       initialCheckedId,
@@ -125,6 +126,7 @@ const RadioGroup = forwardRef(
 
         return (
           <Radio
+            error={validation === 'error'}
             ref={itemRef}
             key={radioId}
             id={radioId}
@@ -149,6 +151,7 @@ const RadioGroup = forwardRef(
         legend={legend}
         tooltip={tooltip}
         hint={hint}
+        hintPosition={hintPosition}
         space={fieldSpace}
         feedback={feedback}
         inactive={inactive}
@@ -201,6 +204,10 @@ RadioGroup.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/RadioCard/RadioCardGroup.jsx

@@ -85,6 +85,7 @@ const RadioCardGroup = forwardRef(
       legend,
       tooltip,
       hint,
+      hintPosition = 'inline',
       validation,
       feedback,
       initialCheckedId,
@@ -127,6 +128,7 @@ const RadioCardGroup = forwardRef(
         legend={legend}
         tooltip={tooltip}
         hint={hint}
+        hintPosition={hintPosition}
         space={fieldSpace}
         feedback={feedback}
         inactive={inactive || readOnly}
@@ -208,6 +210,10 @@ RadioCardGroup.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/SkipLink/SkipLink.jsx

@@ -0,0 +1,179 @@
+import React, { forwardRef } from 'react'
+import { Platform, Pressable, StyleSheet, Text } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { useThemeTokensCallback } from '../ThemeProvider'
+import {
+  a11yProps,
+  clickProps,
+  getTokensPropType,
+  linkProps,
+  resolvePressableTokens,
+  selectSystemProps,
+  variantProp,
+  withLinkRouter
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps])
+
+// ensure explicit selection of tokens
+const selectStyles = ({
+  backgroundColor,
+  outlineColor,
+  outlineOffset,
+  outlineStyle,
+  outlineWidth,
+  paddingHorizontal,
+  paddingVertical,
+  borderRadius
+}) => ({
+  backgroundColor,
+  outlineColor,
+  outlineOffset,
+  outlineStyle,
+  outlineWidth,
+  paddingHorizontal,
+  paddingVertical,
+  borderRadius
+})
+
+const selectTextStyles = ({ color }) => ({
+  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 = forwardRef(({ tokens, variant, href, children, ...rawRest }, ref) => {
+  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 (
+    <Pressable
+      ref={ref}
+      accessibilityRole="link"
+      onPress={handlePress}
+      href={href}
+      style={({ focused: focus }) => {
+        const themeTokens = getTokens({ focus })
+        const skipLinkStyle = selectStyles(themeTokens)
+
+        return [staticStyles.absolute, skipLinkStyle, !focus && staticStyles.hidden]
+      }}
+      {...selectProps(rest)}
+    >
+      {(pressState) => {
+        const themeTokens = resolveLinkTokens(pressState)
+        const textStyles = selectTextStyles(themeTokens)
+
+        return <Text style={[textStyles, staticStyles.baseline]}>{children}</Text>
+      }}
+    </Pressable>
+  )
+})
+
+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/src/SkipLink/index.js

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

package/src/ThemeProvider/ThemeProvider.jsx

@@ -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'
 
 export const uninitialisedError = new Error('Theme context used outside of ThemeProvider')
 
@@ -40,8 +41,13 @@ 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 })
+  themeOptions: PropTypes.shape({
+    forceAbsoluteFontSizing: PropTypes.bool,
+    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
+  })
 }
 
 export default ThemeProvider

package/src/ToggleSwitch/ToggleSwitchGroup.jsx

@@ -40,6 +40,7 @@ const ToggleSwitchGroup = forwardRef(
       inactive = false,
       feedback,
       hint,
+      hintPosition = 'inline',
       tooltip,
       legend,
       name: inputGroupName,
@@ -130,6 +131,7 @@ const ToggleSwitchGroup = forwardRef(
         legend={legend}
         tooltip={tooltip}
         hint={hint}
+        hintPosition={hintPosition}
         space={fieldSpace}
         feedback={feedback}
         inactive={inactive}
@@ -205,6 +207,10 @@ ToggleSwitchGroup.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/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'