@telus-uds/components-base 1.20.0 → 1.22.0

package/src/Fieldset/FieldsetContainer.jsx

@@ -7,17 +7,32 @@ import cssReset from './cssReset'
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
 const FieldsetContainer = forwardRef(
-  ({ children, inactive, accessibilityRole, name: fieldsetName }, ref) => (
-    <fieldset
-      ref={ref}
-      disabled={inactive}
-      style={cssReset}
-      role={accessibilityRole}
-      name={fieldsetName}
-    >
-      {children}
-    </fieldset>
-  )
+  (
+    {
+      children,
+      inactive,
+      accessibilityRole,
+      name: fieldsetName,
+      showBorderStyle = false,
+      borderStyle
+    },
+    ref
+  ) => {
+    // If needs border for error design or reset the component style
+    const styleContainer = showBorderStyle ? borderStyle : cssReset
+
+    return (
+      <fieldset
+        ref={ref}
+        disabled={inactive}
+        style={styleContainer}
+        role={accessibilityRole}
+        name={fieldsetName}
+      >
+        {children}
+      </fieldset>
+    )
+  }
 )
 FieldsetContainer.displayName = 'FieldsetContainer'
 
@@ -25,7 +40,9 @@ 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/src/QuickLinksFeature/QuickLinksFeature.jsx

@@ -0,0 +1,65 @@
+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
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+const isQuickListItem = (element) => {
+  const elementName = element?.type?.displayName || element?.type?.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 = forwardRef(({ 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 cloneElement(child, child.props)
+    }
+
+    return null
+  })
+
+  return (
+    <StackWrap
+      space={stackSpace}
+      gap={stackGap}
+      tokens={{ justifyContent: stackJustify }}
+      tag={tag}
+      ref={ref}
+      {...selectProps(rest)}
+    >
+      {items}
+    </StackWrap>
+  )
+})
+
+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/src/QuickLinksFeature/QuickLinksFeatureItem.jsx

@@ -0,0 +1,114 @@
+import React, { forwardRef, useState } from 'react'
+import PropTypes from 'prop-types'
+
+import { Image, Platform, Text, View } from 'react-native'
+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
+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 = ({ contentMaxDimension, textAlign }) => ({
+  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 = forwardRef(
+  ({ tokens, variant, children, imageAccessibilityLabel, imageSource, ...rest }, ref) => {
+    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 (
+      <Link
+        ref={ref}
+        tokens={(state) => {
+          setHover(state.hover)
+          return getTokens(state)
+        }}
+        {...selectProps(rest)}
+      >
+        <View style={selectContainerStyle({ contentMaxDimension, textAlign })}>
+          <StackWrap
+            direction={contentDirection}
+            space={contentSpace}
+            tokens={{ alignItems: contentAlignItems }}
+          >
+            <View style={selectImageContainerStyle(contentMaxDimension)}>
+              <Image
+                accessibilityIgnoresInvertColors
+                imageAccessibilityLabel={imageAccessibilityLabel}
+                source={imageSource}
+                style={selectImageStyle(imageDimension)}
+              />
+            </View>
+            <Text>{children}</Text>
+          </StackWrap>
+        </View>
+      </Link>
+    )
+  }
+)
+
+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/src/QuickLinksFeature/index.js

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

package/src/RadioCard/RadioCardGroup.jsx

@@ -133,6 +133,8 @@ const RadioCardGroup = forwardRef(
         feedback={feedback}
         inactive={inactive || readOnly}
         validation={validation}
+        showErrorBorder
+        showIcon
         accessibilityRole="radiogroup"
         {...selectProps(rest)}
       >

package/src/ThemeProvider/ThemeProvider.jsx

@@ -8,15 +8,22 @@ export const uninitialisedError = new Error('Theme context used outside of Theme
 export const ThemeContext = createContext(uninitialisedError)
 export const ThemeSetterContext = createContext(uninitialisedError)
 
-const ThemeProvider = ({
-  children,
-  defaultTheme,
+// 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
-  themeOptions = { forceAbsoluteFontSizing: true, forceZIndex: true }
-}) => {
+  forceZIndex: true,
+  // TODO: switch `enableHelmetSSR` to be false by default in the next major version
+  enableHelmetSSR: true
+}
+
+const ThemeProvider = ({ children, defaultTheme, themeOptions = {} }) => {
   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.
@@ -24,7 +31,9 @@ const ThemeProvider = ({
 
   return (
     <ThemeSetterContext.Provider value={setTheme}>
-      <ThemeContext.Provider value={{ ...theme, themeOptions }}>{children}</ThemeContext.Provider>
+      <ThemeContext.Provider value={{ ...theme, themeOptions: appliedThemeOptions }}>
+        {children}
+      </ThemeContext.Provider>
     </ThemeSetterContext.Provider>
   )
 }
@@ -46,10 +55,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/src/ThemeProvider/utils/styles.js

@@ -45,7 +45,9 @@ export function applyTextStyles({
     // 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 = `${fontName}${fontWeight}${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/src/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'
@@ -51,6 +52,7 @@ 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,