@telus-uds/components-base 0.0.2-prerelease.6 → 0.0.2-prerelease.7

package/src/Button/ButtonBase.jsx

@@ -1,18 +1,16 @@
 import React from 'react'
 import { Pressable, Text, View, StyleSheet, Platform } from 'react-native'
 
-import { useThemeTokensCallback } from '../ThemeProvider'
 import { applyTextStyles, applyShadowToken } from '../ThemeProvider/utils'
 import buttonPropTypes from './propTypes'
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes'
-
-const getCursorStyle = (inactive, accessibilityRole) => {
-  if (inactive) return 'not-allowed'
-  // These roles should result in cursor: pointer but don't in current RNW releases
-  if (['checkbox', 'radio', 'switch'].includes(accessibilityRole)) return 'pointer'
-  // For everything else, let React Native Web figure it out internally
-  return undefined
-}
+import {
+  a11yProps,
+  getCursorStyle,
+  hrefAttrsProp,
+  linkProps,
+  resolvePressableState,
+  resolvePressableTokens
+} from '../utils'
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth
@@ -39,6 +37,7 @@ const selectOuterWidthStyles = ({ outerBorderGap, outerBorderWidth, width }) =>
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
   const outerBorderOffset = getOuterBorderOffset({ outerBorderGap, outerBorderWidth })
+
   const widthStyles = {
     margin: 0 - outerBorderOffset
   }
@@ -83,7 +82,8 @@ const selectInnerContainerStyles = ({
   paddingTop,
   paddingBottom,
   shadow,
-  borderWidth
+  borderWidth,
+  minWidth
 }) => {
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -98,6 +98,7 @@ const selectInnerContainerStyles = ({
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     backgroundColor,
+    minWidth,
     ...applyShadowToken(shadow)
   }
 }
@@ -118,76 +119,76 @@ const selectTextStyles = ({ fontSize, color, lineHeight, fontName, fontWeight, t
     textAlign
   })
 
-const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) =>
-  Platform.OS === 'web'
-    ? {
-        // if it would overflow the container, wraps instead
-        maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
-        cursor: getCursorStyle(inactive, accessibilityRole),
-        outline: 'none' // removes the default browser :focus outline
-      }
-    : {}
+const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
+  return Platform.select({
+    web: {
+      // if it would overflow the container, wraps instead
+      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      outline: 'none', // removes the default browser :focus outline
+      ...getCursorStyle(inactive, accessibilityRole)
+    },
+    default: {}
+  })
+}
+
+// TODO: see if this can be made into a generalised utility, ideally when
+// there is a stable, generic, generalised approach to within-component text
+const resolveChildren = (children, { textStyles, state }) => {
+  switch (typeof children) {
+    case 'function':
+      return children(state)
+    case 'string':
+      return <Text style={textStyles}>{children}</Text>
+    default:
+      return children
+  }
+}
 
 const ButtonBase = ({
   href,
   hrefAttrs,
   children,
-  variant,
   onPress,
-  tokens,
+  tokens = {},
   disabled = false, // alias for inactive
   inactive = disabled,
   selected = false,
   ...rest
 }) => {
-  const getTokens = useThemeTokensCallback('Button', tokens, variant)
-  const getButtonState = ({ pressed, focused, hovered }) => ({
-    pressed,
-    focus: focused,
-    hover: hovered,
-    inactive,
-    selected
-  })
-  const getTokensByPressableState = (pressableState) => getTokens(getButtonState(pressableState))
+  const extraButtonState = { inactive, selected }
+  const resolveTokens = (pressableState) =>
+    resolvePressableTokens(tokens, pressableState, extraButtonState)
 
   const a11y = a11yProps.select(rest)
 
   const getPressableStyle = (pressableState) => {
-    const themeTokens = getTokensByPressableState(pressableState)
+    const themeTokens = resolveTokens(pressableState)
     return [
-      staticStyles.wrapper,
+      staticStyles.row,
       selectWebOnlyStyles(inactive, themeTokens, a11y),
       selectOuterContainerStyles(themeTokens),
       selectOuterWidthStyles(themeTokens)
     ]
   }
 
-  const handlePress = linkProps.handleHref({ href, onPress })
-
   return (
     <Pressable
-      onPress={handlePress}
+      href={href}
+      onPress={linkProps.handleHref({ href, onPress })}
       style={getPressableStyle}
       disabled={inactive}
-      href={href}
       {...hrefAttrsProp.spread(hrefAttrs)}
       {...a11y}
     >
       {(pressableState) => {
-        const themeTokens = getTokensByPressableState(pressableState)
+        const themeTokens = resolveTokens(pressableState)
         const containerStyles = selectInnerContainerStyles(themeTokens)
         const borderStyles = selectBorderStyles(themeTokens)
-        const textStyles = {
-          ...selectTextStyles(themeTokens),
-          ...Platform.select({
-            // TODO: https://github.com/telus/universal-design-system/issues/487
-            web: { transition: 'color 200ms' }
-          })
-        }
+        const textStyles = [selectTextStyles(themeTokens), staticStyles.text]
 
         // If the container has a width set, fill it instead of sizing from content.
         // If in future we support text alignments other than center, add here.
-        const stretchStyles = !!themeTokens.width && staticStyles.center
+        const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align
 
         return (
           <View
@@ -195,6 +196,7 @@ const ButtonBase = ({
               containerStyles,
               borderStyles,
               stretchStyles,
+              staticStyles.row,
               Platform.select({
                 web: {
                   maxWidth: '100%', // ensure overflowing content wraps
@@ -204,14 +206,10 @@ const ButtonBase = ({
               })
             ]}
           >
-            {typeof children === 'function' ? (
-              children({
-                ...getButtonState(pressableState),
-                textStyles
-              })
-            ) : (
-              <Text style={textStyles}>{children}</Text>
-            )}
+            {resolveChildren(children, {
+              state: { ...resolvePressableState(pressableState, extraButtonState), textStyles },
+              textStyles
+            })}
           </View>
         )
       }}
@@ -226,10 +224,21 @@ ButtonBase.propTypes = {
 }
 
 const staticStyles = StyleSheet.create({
-  wrapper: {
-    flexDirection: 'row' // ensures alignSelf is horizontal
+  row: {
+    // Apply all button alignment horizontally; no vertical stacking within a button
+    flexDirection: 'row'
+  },
+  text: {
+    flexGrow: 1, // On native but not web, flexShrink here wraps text prematurely
+    ...Platform.select({
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      web: { transition: 'color 200ms' }
+    })
+  },
+  align: {
+    alignItems: 'center'
   },
-  center: {
+  stretch: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center'

package/src/Button/ButtonGroup.jsx

@@ -5,7 +5,7 @@ import { Platform } from 'react-native'
 import ButtonBase from './ButtonBase'
 import { StackWrap } from '../StackView'
 import { useViewport } from '../ViewportProvider'
-import { useThemeTokens } from '../ThemeProvider'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
   pressProps,
@@ -14,10 +14,10 @@ import {
   selectTokens
 } from '../utils/propTypes'
 import { useMultipleInputValues } from '../utils/input'
+import { getPressHandlersWithArgs } from '../utils/pressability'
 
 const ButtonGroup = ({
   variant,
-  buttonVariant = {},
   tokens,
   items = [],
   values,
@@ -36,6 +36,8 @@ const ButtonGroup = ({
   const stackTokens = selectTokens('StackView', themeTokens)
   const { direction, space } = themeTokens
 
+  const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
+
   const { currentValues, toggleOneValue } = useMultipleInputValues({
     initialValues,
     values,
@@ -55,15 +57,9 @@ const ButtonGroup = ({
       {items.map(({ label, id = label, accessibilityLabel }, index) => {
         const isSelected = currentValues.includes(id)
 
-        // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
-        const pressHandlers = Object.fromEntries(
-          Object.entries(pressProps.select(rest)).map(([key, handler]) => ({
-            [key]: (args) => {
-              // Pass each handler data on this button and current selection
-              handler({ id, label, currentValues }, ...args)
-            }
-          }))
-        )
+        // Pass an object of relevant component state as first argument for any passed-in press handlers
+        const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
+
         const handlePress = () => {
           if (pressHandlers.onPress) pressHandlers.onPress()
           toggleOneValue(id)
@@ -73,15 +69,7 @@ const ButtonGroup = ({
           accessibilityState: { checked: isSelected },
           accessibilityRole: itemA11yRole,
           accessibilityLabel,
-          ...Platform.select({
-            web: {
-              // accessibilityPosInSet etc exists in React Native Web main branch
-              // but not in a release compatible with Expo etc; just use `aria-*`
-              'aria-setsize': items.length,
-              'aria-posinset': index + 1
-            },
-            default: {}
-          })
+          ...a11yProps.getPositionInSet(items.length, index)
         }
 
         // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
@@ -91,7 +79,7 @@ const ButtonGroup = ({
             key={id}
             {...pressHandlers}
             onPress={handlePress}
-            variant={{ component: 'ButtonGroup', ...buttonVariant }}
+            tokens={getButtonTokens}
             selected={isSelected}
             inactive={inactive}
             {...itemA11y}
@@ -109,7 +97,6 @@ ButtonGroup.propTypes = {
   ...pressProps.propTypes,
   tokens: getTokensPropType('ButtonGroup'),
   variant: variantProp.propType,
-  buttonVariant: variantProp.propType,
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves
    * like radio buttons. To have no limit and allow any number of selections, pass `null`.

package/src/Button/ButtonLink.jsx

@@ -2,14 +2,23 @@ import React from 'react'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes from './propTypes'
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes'
+import { useThemeTokensCallback } from '../ThemeProvider'
 
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
  */
-const ButtonLink = ({ accessibilityRole = 'link', ...props }) => {
+const ButtonLink = ({ accessibilityRole = 'link', tokens, variant, ...props }) => {
   const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-  return <ButtonBase accessibilityRole={accessibilityRole} hrefAttrs={hrefAttrs} {...rest} />
+  const getTokens = useThemeTokensCallback('Button', tokens, variant)
+  return (
+    <ButtonBase
+      accessibilityRole={accessibilityRole}
+      tokens={getTokens}
+      hrefAttrs={hrefAttrs}
+      {...rest}
+    />
+  )
 }
 
 ButtonLink.propTypes = {

package/src/Checkbox/Checkbox.jsx

@@ -0,0 +1,275 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import CheckboxInput from './CheckboxInput'
+// @todo move `LabelContent` outside of the `InputLabel` and fix
+// the issue with the cursor not being pointer on Web
+import CheckboxLabel from '../InputLabel/LabelContent'
+import Feedback from '../Feedback'
+import StackView from '../StackView'
+import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
+import { getTokensPropType, useInputValue, variantProp } from '../utils'
+import { a11yProps } from '../utils/propTypes'
+import useUniqueId from '../utils/useUniqueId'
+
+const selectInputStyles = (
+  {
+    iconBackgroundColor,
+    inputBorderColor,
+    inputBorderRadius,
+    inputBorderWidth,
+    inputBackgroundColor,
+    inputHeight,
+    inputOutlineColor,
+    inputOutlineWidth,
+    inputShadow,
+    inputWidth
+  },
+  isChecked
+) => ({
+  borderColor: inputBorderColor,
+  borderWidth: inputBorderWidth,
+  borderRadius: inputBorderRadius,
+  backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
+  outlineStyle: 'solid',
+  outlineColor: inputOutlineColor,
+  outlineWidth: inputOutlineWidth,
+  height: inputHeight,
+  width: inputWidth,
+  ...applyShadowToken(inputShadow)
+})
+const selectLabelStyles = ({
+  labelColor,
+  labelFontName,
+  labelFontSize,
+  labelFontWeight,
+  labelMarginLeft,
+  labelLineHeight
+}) => ({
+  marginLeft: labelMarginLeft,
+  ...applyTextStyles({
+    color: labelColor,
+    fontName: labelFontName,
+    fontWeight: labelFontWeight,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight
+  })
+})
+const selectContainerStyles = ({ containerMarginBottom }) => ({
+  marginBottom: containerMarginBottom
+})
+const selectIconTokens = ({ iconColor, iconSize }) => ({
+  color: iconColor,
+  size: iconSize
+})
+const selectFeedbackTokens = ({ feedbackMarginBottom, feedbackMarginTop, feedbackPosition }) => ({
+  feedbackPosition,
+  feedbackMarginBottom,
+  feedbackMarginTop
+})
+
+/**
+ * Basic Checkbox component.
+ *
+ * ## Component API
+ *
+ * Use `label` prop to provide a label for the checkbox.
+ * For a disabled `Checkbox` set the `inactive` prop to `true`.
+ *
+ * ### Controlled version
+ *
+ * If the checkbox is controlled from outside, it needs to receive `checked` and `onChange` props.
+ *
+ * ### Uncontrolled version
+ *
+ * In case of uncontrolled checkbox you can use `defaultChecked` prop to provide the initial value.
+ * Whenever the checkbox gets toggled, it calls the `onChange` callback with the new value (boolean).
+ *
+ * ### Using within forms
+ *
+ * You can pass `name` and `value` props if you need a particular checkbox to be a part of a group of
+ * checkboxes on a form.
+ *
+ * ### Validation and feedback
+ *
+ * You can use the `feedback` prop to provide a comment related to the checkbox element. If the comment
+ * is related to a validation error, the checkbox and the feedback can be styled accordingly by setting
+ * the `error` prop to `true` (can also be done without feedback).
+ *
+ * ## A11y guidelines
+ *
+ * Checkbox component accepts all the common accessibility props, but also sets some defaults, including
+ * accessibility role `'checkbox'` and accessibility state that depends on the other props (`checked`, `inactive`)
+ * or the internal state in case of uncontrolled checkbox.
+ *
+ */
+const Checkbox = ({
+  checked,
+  defaultChecked,
+  error = false,
+  feedback,
+  id,
+  inactive,
+  label,
+  name,
+  onChange,
+  tokens,
+  value,
+  variant,
+  ...rest
+}) => {
+  const { currentValue: isChecked, setValue: setIsChecked, isControlled } = useInputValue(
+    {
+      value: checked,
+      initialValue: defaultChecked,
+      onChange
+    },
+    'useCheckboxValue'
+  )
+  const getTokens = useThemeTokensCallback('Checkbox', tokens, {
+    checked: isChecked,
+    inactive,
+    error,
+    ...variant
+  })
+  const defaultTokens = getTokens()
+  const { feedbackMarginBottom, feedbackMarginTop, feedbackPosition } = selectFeedbackTokens(
+    defaultTokens
+  )
+  const styles = StyleSheet.create({
+    feedbackContainer: { marginTop: feedbackMarginTop, marginBottom: feedbackMarginBottom }
+  })
+  const handleChange = () => {
+    if (!inactive) {
+      setIsChecked(!isChecked)
+    }
+  }
+  const accessibilityProps = a11yProps.select(rest)
+  const uniqueId = useUniqueId('checkbox')
+  const inputId = id ?? uniqueId
+
+  // @todo our current version of React Native Web doesn't include
+  // keyboard support on `Pressable` (which starts with 0.15.3), so
+  // the complete accessibility of the `Checkbox` component on Web
+  // (namely, change on key pressed) is pending RNW upgrade
+  // (see https://github.com/necolas/react-native-web/issues/1950)
+  return (
+    <View style={staticStyles.wrapper}>
+      <StackView direction={feedbackPosition === 'top' ? 'column-reverse' : 'column'} space={0}>
+        <Pressable
+          disabled={inactive}
+          onPress={handleChange}
+          accessibilityRole="checkbox"
+          accessibilityState={{ checked: isChecked, disabled: inactive }}
+          {...accessibilityProps}
+        >
+          {({ focused: focus, hovered: hover, pressed }) => {
+            const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
+            const iconTokens = selectIconTokens(stateTokens)
+
+            return (
+              <View style={[staticStyles.container, selectContainerStyles(stateTokens)]}>
+                <View
+                  style={StyleSheet.flatten([
+                    staticStyles.defaultInputStyles,
+                    selectInputStyles(stateTokens, isChecked)
+                  ])}
+                  testID="Checkbox-Input"
+                >
+                  {/* Add a real input on Web, skip on native platforms */}
+                  <CheckboxInput
+                    checked={isChecked}
+                    defaultChecked={defaultChecked}
+                    disabled={inactive}
+                    id={inputId}
+                    isControlled={isControlled}
+                    name={name}
+                    value={value}
+                  />
+                  {isChecked && IconComponent && (
+                    <IconComponent tokens={iconTokens} testID="Checkbox-Icon" />
+                  )}
+                </View>
+                {Boolean(label) && (
+                  <Text style={selectLabelStyles(stateTokens)}>
+                    <CheckboxLabel forId={inputId}>{label}</CheckboxLabel>
+                  </Text>
+                )}
+              </View>
+            )
+          }}
+        </Pressable>
+        {Boolean(feedback) && (
+          <View style={styles.feedbackContainer}>
+            <Feedback
+              title={feedback}
+              variant={{ icon: error === true }}
+              validation={error === true ? 'error' : undefined}
+            />
+          </View>
+        )}
+      </StackView>
+    </View>
+  )
+}
+
+Checkbox.propTypes = {
+  ...a11yProps.propTypes,
+  /**
+   * 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,
+  /**
+   * A detailed description of related validation error or additional instructions (depending on the `error` prop).
+   */
+  feedback: PropTypes.string,
+  /**
+   * Checkbox ID.
+   */
+  id: PropTypes.string,
+  /**
+   * Whether the corresponding input is disabled or active.
+   */
+  inactive: PropTypes.bool,
+  /**
+   * The label.
+   */
+  label: PropTypes.string,
+  /**
+   * Associate this checkbox 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 gets interacted with.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Checkbox tokens.
+   */
+  tokens: getTokensPropType('Checkbox'),
+  /**
+   * Checkbox variant.
+   */
+  variant: variantProp.propType
+}
+
+export default Checkbox
+
+const staticStyles = StyleSheet.create({
+  wrapper: { backgroundColor: 'transparent' },
+  container: { flexDirection: 'row', alignItems: 'center' },
+  defaultInputStyles: { alignItems: 'center', justifyContent: 'center' }
+})

package/src/Checkbox/CheckboxInput.native.jsx

@@ -0,0 +1,6 @@
+/**
+ * There's no checkbox input on native platforms, so this is a noop.
+ */
+const CheckboxInput = () => null
+
+export default CheckboxInput

package/src/Checkbox/CheckboxInput.web.jsx

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * On Web we need to include an actual input but hide it.
+ */
+const CheckboxInput = forwardRef(
+  ({ checked, defaultChecked, disabled, id, isControlled, name, onChange, value }, ref) => {
+    const handleClick = (event) => {
+      // Cancel the click dispatched via the label tag, since it's already wrapped
+      // in <Pressable>
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
+    return (
+      <input
+        checked={isControlled ? checked : undefined}
+        defaultChecked={isControlled ? undefined : defaultChecked}
+        disabled={disabled}
+        hidden
+        id={id}
+        name={name}
+        onChange={onChange}
+        onClick={handleClick}
+        ref={ref}
+        type="checkbox"
+        value={value}
+      />
+    )
+  }
+)
+CheckboxInput.displayName = 'CheckboxInput'
+
+CheckboxInput.propTypes = {
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+  isControlled: PropTypes.bool.isRequired,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.string
+}
+
+CheckboxInput.defaultProps = {
+  checked: undefined,
+  defaultChecked: undefined,
+  disabled: false,
+  name: undefined,
+  onChange: () => {},
+  value: undefined
+}
+
+export default CheckboxInput

package/src/Checkbox/index.js

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