@telus-uds/components-base 1.21.0 → 1.23.0

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/Radio/RadioGroup.jsx

@@ -116,17 +116,15 @@ const RadioGroup = forwardRef(
     }
 
     const radios = items.map(
-      ({ label, id, onChange: itemOnChange, ref: itemRef, ...itemRest }, index) => {
+      ({ label, id, onChange: itemOnChange, ref: itemRef, description, ...itemRest }, index) => {
         const radioId = id || `Radio[${index}]`
         const isChecked = currentValue === radioId
         const handleChange = (newCheckedState, event) => {
           if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
           if (newCheckedState) setValue(radioId, event)
         }
-
         return (
           <Radio
-            error={validation === 'error'}
             ref={itemRef}
             key={radioId}
             id={radioId}
@@ -137,6 +135,7 @@ const RadioGroup = forwardRef(
             name={inputGroupName}
             tokens={radioTokens}
             variant={variant}
+            description={description}
             {...selectItemProps(itemRest)}
           />
         )
@@ -156,6 +155,8 @@ const RadioGroup = forwardRef(
         feedback={feedback}
         inactive={inactive}
         validation={validation}
+        showIcon
+        showErrorBorder
         accessibilityRole="radiogroup"
         {...selectProps(rest)}
       >
@@ -193,6 +194,7 @@ RadioGroup.propTypes = {
       label: PropTypes.string,
       id: PropTypes.string,
       onChange: PropTypes.func,
+      description: PropTypes.string,
       ref: ABBPropTypes.ref()
     })
   ),

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'