@telus-uds/components-base 1.64.0 → 1.65.0

package/src/CheckboxCard/CheckboxCard.jsx

@@ -0,0 +1,190 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, Text, View } from 'react-native'
+
+import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider'
+import {
+  a11yProps,
+  focusHandlerProps,
+  getTokensPropType,
+  selectSystemProps,
+  selectTokens,
+  useInputValue,
+  useUniqueId,
+  variantProp,
+  viewProps
+} from '../utils'
+import { PressableCardBase, selectPressableCardTokens } from '../Card'
+import StackView from '../StackView'
+import CheckboxButton, { selectCheckboxTokens } from '../Checkbox/CheckboxButton'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
+
+const CheckboxCard = forwardRef(
+  (
+    {
+      tokens,
+      variant,
+      title,
+      children,
+      inactive,
+      defaultChecked,
+      checked,
+      name: inputName,
+      value,
+      id,
+      iconId,
+      onChange,
+      ...rest
+    },
+    ref
+  ) => {
+    const {
+      currentValue: isChecked,
+      setValue: setIsChecked,
+      isControlled
+    } = useInputValue({
+      value: checked,
+      initialValue: defaultChecked,
+      onChange
+    })
+
+    const handleChange = (event) => {
+      if (!inactive) {
+        setIsChecked(!isChecked, event)
+      }
+    }
+    const uniqueId = useUniqueId('CheckboxCard')
+    const inputId = id ?? uniqueId
+
+    const uniqueIconId = useUniqueId('CheckboxIcon')
+    const iconCheckboxId = iconId ?? uniqueIconId
+
+    const getTokens = useThemeTokensCallback('CheckboxCard', tokens, variant)
+    const getCardTokens = (cardState) => selectPressableCardTokens(getTokens(cardState))
+    const { themeOptions } = useTheme()
+
+    const selectedProps = selectProps({
+      accessibilityRole: 'checkbox',
+      accessibilityState: { checked: isChecked, disabled: inactive },
+      ...rest
+    })
+
+    return (
+      <PressableCardBase
+        ref={ref}
+        inactive={inactive}
+        checked={isChecked}
+        tokens={getCardTokens}
+        onPress={handleChange}
+        {...selectedProps}
+      >
+        {(cardState) => {
+          const { checkboxSpace, contentSpace, ...themeTokens } = getTokens(cardState)
+          const checkboxTokens = selectCheckboxTokens(themeTokens, 'checkbox')
+          const titleTokens = selectTokens('Typography', themeTokens)
+          const textStyle = applyTextStyles({ ...titleTokens, themeOptions })
+          return (
+            <StackView direction="row" space={checkboxSpace}>
+              <View style={[staticStyles.alignWithText, { height: textStyle.lineHeight }]}>
+                <CheckboxButton
+                  tokens={checkboxTokens}
+                  isControlled={isControlled}
+                  isChecked={isChecked}
+                  inactive={inactive}
+                  defaultChecked={defaultChecked}
+                  inputId={inputId}
+                  iconId={iconCheckboxId}
+                  handleChange={handleChange}
+                  name={inputName}
+                  value={value}
+                />
+              </View>
+              <StackView direction="column" space={contentSpace} tokens={{ flexShrink: 1 }}>
+                {title ? <Text style={textStyle}>{title}</Text> : null}
+                {typeof children === 'function' ? children(cardState, textStyle) : children}
+              </StackView>
+            </StackView>
+          )
+        }}
+      </PressableCardBase>
+    )
+  }
+)
+CheckboxCard.displayName = 'CheckboxCard'
+
+CheckboxCard.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Content to be displayed at the top of the card alongside the checkbox
+   */
+  title: PropTypes.string,
+  /**
+   * Additional content to be displayed below the checkbox.
+   */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /**
+   * Use `checked` for controlled checkbox. For uncontrolled checkbox, use the `defaultChecked` prop.
+   */
+  checked: PropTypes.bool,
+  /**
+   * Use `defaultChecked` to provide the initial value for an uncontrolled checkbox.
+   */
+  defaultChecked: PropTypes.bool,
+  /**
+   * An optional checkboxdescription.
+   */
+  description: PropTypes.string,
+  /**
+   * Checkbox card ID.
+   */
+  id: PropTypes.string,
+  /**
+   * Checkbox icon ID.
+   */
+  iconId: PropTypes.string,
+  /**
+   * Whether the corresponding input is disabled or active.
+   */
+  inactive: PropTypes.bool,
+  /**
+   * The label.
+   */
+  label: PropTypes.string,
+  /**
+   * Associate this checkbox card with a group (set as the name attribute).
+   */
+  name: PropTypes.string,
+  /**
+   * Whether the underlying input triggered a validation error or not.
+   */
+  error: PropTypes.bool,
+  /**
+   * The value. Must be unique within the group.
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+  /**
+   * Callback called when a controlled checkbox card gets interacted with.
+   */
+  onChange: PropTypes.func,
+  /**
+   * checkbox card tokens.
+   */
+  tokens: getTokensPropType('CheckboxCard'),
+  /**
+   * checkbox variant.
+   */
+  variant: variantProp.propType
+}
+
+export default CheckboxCard
+
+const staticStyles = StyleSheet.create({
+  alignWithText: {
+    justifyContent: 'center'
+  }
+})

package/src/CheckboxCard/index.js

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

package/src/StackView/StackView.jsx

@@ -89,9 +89,10 @@ const StackView = forwardRef(
     const content = getStackedContent(children, { direction, divider, space })
     const themeTokens = useThemeTokens('StackView', tokens, variant, { viewport })
     const flexStyles = selectFlexStyles(themeTokens)
+    const size = { width: themeTokens.width }
 
     return (
-      <View ref={ref} {...selectedProps} style={[flexStyles, staticStyles[direction]]}>
+      <View ref={ref} {...selectedProps} style={[flexStyles, staticStyles[direction], size]}>
         {content}
       </View>
     )

package/src/Tabs/Tabs.jsx

@@ -1,4 +1,5 @@
 import React, { forwardRef, useCallback } from 'react'
+import { Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 import { useThemeTokens } from '../ThemeProvider'
@@ -42,6 +43,17 @@ const getDefaultTabItemAccessibilityRole = (parentRole) => {
   }
 }
 
+const getStackViewTokens = (variant) => {
+  const equalWidth = variant?.equalWidth
+  return Platform.select({
+    web: {
+      justifyContent: equalWidth ? 'space-evenly' : 'flex-start',
+      width: equalWidth ? '100%' : 'auto'
+    },
+    default: {}
+  })
+}
+
 /**
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
@@ -88,6 +100,7 @@ const Tabs = forwardRef(
     const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist'
     const defaultTabItemAccessibiltyRole =
       getDefaultTabItemAccessibilityRole(parentAccessibilityRole)
+    const stackViewTokens = getStackViewTokens(variant)
 
     return (
       <HorizontalScroll
@@ -99,7 +112,7 @@ const Tabs = forwardRef(
         accessibilityRole={parentAccessibilityRole}
         {...restProps}
       >
-        <StackView space={space} direction="row">
+        <StackView space={space} direction="row" tokens={stackViewTokens}>
           {items.map(
             (
               {

package/src/index.js

@@ -8,6 +8,7 @@ export * from './Carousel'
 export { default as Listbox } from './Listbox'
 export { default as Checkbox } from './Checkbox'
 export * from './Checkbox'
+export { default as CheckboxCard } from './CheckboxCard'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as Feedback } from './Feedback'