@telus-uds/components-base 1.21.0 → 1.22.0

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/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';

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.21.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

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/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'