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

package/src/Typography/Typography.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Platform, Text, View } from 'react-native'
+import { Text, View } from 'react-native'
 
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import { applyTextStyles } from '../ThemeProvider/utils'
-import { a11yProps, variantProp, getTokensPropType } from '../utils/propTypes'
+import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier } from '../utils'
 
 /**
  * If passed a string like 'h1', 'h2' etc, returns the heading number as a string,
@@ -16,17 +16,6 @@ function getHeadingLevel(heading) {
   return match && match[1]
 }
 
-/**
- * Enforces `fontScaleCap` theme tokens as the maximum font size text can become
- * after iOS or Android font scaling, to give consistent accessible maximum sizes
- * that don't make the content unusable
- */
-function getMaxFontMultiplier({ fontSize, fontScaleCap }) {
-  if (!fontScaleCap || !fontSize) return undefined
-  if (fontScaleCap <= fontSize) return 1
-  return fontScaleCap / fontSize
-}
-
 const selectTextStyles = ({
   fontWeight,
   fontSize,
@@ -60,9 +49,9 @@ const Typography = ({
   const viewport = useViewport()
   const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
   const textProps = {
-    style: selectTextStyles(align ? { ...themeTokens, textAlign: align } : themeTokens)
+    style: selectTextStyles(align ? { ...themeTokens, textAlign: align } : themeTokens),
+    maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
   }
-  if (Platform.OS !== 'web') textProps.maxFontSizeMultiplier = getMaxFontMultiplier(themeTokens)
 
   const headingLevel = getHeadingLevel(heading)
   const a11y = {

package/src/index.js

@@ -1,7 +1,9 @@
+export { default as A11yText } from './A11yText'
 export { default as ActivityIndicator } from './ActivityIndicator'
 export { default as Box } from './Box'
 export * from './Button'
 export { default as Card } from './Card'
+export { default as Checkbox } from './Checkbox'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as Feedback } from './Feedback'
@@ -9,12 +11,17 @@ export { default as FlexGrid } from './FlexGrid'
 export { default as Icon } from './Icon'
 export * from './Icon'
 export * from './Link'
+export { default as List } from './List'
 export { default as Pagination } from './Pagination'
+export { default as Radio } from './Radio'
+export { default as Select } from './Select'
 export { default as SideNav } from './SideNav'
+export { default as Skeleton } from './Skeleton'
 export { default as Spacer } from './Spacer'
 export { default as StackView } from './StackView'
 export * from './StackView'
-export { default as TextInput } from './TextInput'
+export { default as Tags } from './Tags'
+export * from './TextInput'
 export { default as ToggleSwitch } from './ToggleSwitch'
 export { default as Tooltip } from './Tooltip'
 export { default as TooltipButton } from './TooltipButton'

package/src/utils/a11y/index.js

@@ -0,0 +1 @@
+export * from './textSize'

package/src/utils/a11y/textSize.js

@@ -0,0 +1,30 @@
+import { PixelRatio, Platform } from 'react-native'
+
+/**
+ * When a user increases text size using device accessibility settings, some elements
+ * should also scale, such as icons alongside text and space between paragraphs.
+ *
+ * @param {number} [value] - the value to multiply; defaults to system default font size
+ * @param {number} [maxScale] - the maximum multiplier to apply; defaults to no maximum
+ */
+export const scaleWithText = (value, maxScale = Infinity) => {
+  if (!value) return value
+  const scale = Math.min(PixelRatio.getFontScale(), maxScale) || 1
+  return value * scale
+}
+
+/**
+ * Native only, returns `undefined` on Web.
+ *
+ * Enforces `fontScaleCap` theme tokens as the maximum font size text can become
+ * after iOS or Android font scaling, to give consistent accessible maximum sizes
+ * that don't make the content unusable.
+ *
+ * The return value of this function can be used as a React Native `Text` element's
+ * `maxFontSizeMultiplier` prop value.
+ */
+export const getMaxFontMultiplier = ({ fontSize, fontScaleCap }) => {
+  if (Platform.OS === 'web' || !fontScaleCap || !fontSize) return undefined
+  if (fontScaleCap <= fontSize) return 1
+  return fontScaleCap / fontSize
+}

package/src/utils/index.js

@@ -1,7 +1,10 @@
+export * from './a11y'
 export * from './animation'
 export * from './input'
+export * from './pressability'
 export * from './propTypes'
 
+export { default as info } from './info'
 export { default as useSpacingScale } from './useSpacingScale'
 export { default as useResponsiveProp } from './useResponsiveProp'
 export * from './useResponsiveProp'

package/src/utils/info/index.js

@@ -0,0 +1,8 @@
+import platform from './platform'
+import versions from './versions'
+
+// export an object accessed like info.platform.OS, info.version.uds, etc
+export default {
+  platform,
+  versions
+}

package/src/utils/info/platform/index.js

@@ -0,0 +1,11 @@
+import { Platform } from 'react-native'
+import fileSuffix from './platform'
+
+// Allows consuming libraries that might not have a direct dependency on
+// React Native to check what the current platform is.
+
+// Particularly useful for validating Jest config: it is possible for Jest to
+// get configured such that Platform.OS returns a different mocked value to the
+// OS being used to select files by platform suffix (e.g. .web, .native).
+
+export default { OS: Platform.OS, fileSuffix }

package/src/utils/info/platform/platform.android.js

@@ -0,0 +1 @@
+export default '.android'

package/src/utils/info/platform/platform.ios.js

@@ -0,0 +1 @@
+export default '.ios'

package/src/utils/info/platform/platform.native.js

@@ -0,0 +1,4 @@
+// This shouldn't ever be chosen, as the more specific '.ios' and '.android' are available.
+// If this gets picked, either an unsupported React Native platform is being used somehow
+// (e.g. a native Windows app), or there's a serious config problem somewhere.
+export default '.native'

package/src/utils/info/platform/platform.web.js

@@ -0,0 +1 @@
+export default '.web'

package/src/utils/info/versions.js

@@ -0,0 +1,6 @@
+import { version } from '../../../package.json'
+
+// Add more versions if they are useful e.g. theme schema version
+export default {
+  uds: version
+}

package/src/utils/pressability.js

@@ -0,0 +1,92 @@
+import { Platform, StyleSheet } from 'react-native'
+import { pressProps } from './propTypes'
+
+// These roles should result in cursor: pointer but don't in current RNW releases
+const shouldUseCursor = ['checkbox', 'radio', 'switch']
+
+/**
+ * React Native Web has some built-in logic for applying cursor styles based on accessibility roles;
+ * however, it misses certain cases. This fills in known cases where widely used versions of RNW
+ * fail to apply an expected cursor style.
+ *
+ * @param {object} props
+ * @param {boolean} [props.inactive]
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.accessibilityRole]
+ * @returns
+ */
+export const getCursorStyle = ({ inactive, disabled, accessibilityRole }) => {
+  if (Platform.OS !== 'web') return undefined
+
+  if (inactive || disabled) return staticStyles.notAllowed
+  if (shouldUseCursor.includes(accessibilityRole)) return staticStyles.pointer
+
+  return undefined // allows React Native Web's built-in logic to apply
+}
+
+/**
+ * @typedef {{ pressed: boolean, focused: boolean, hovered?: boolean }} PressableState
+ */
+
+/**
+ * Maps the state object given by the React Native `Pressable` component to the set of
+ * equivalent appearance names used in UDS.
+ *
+ * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>` into
+ *   render functions passed to its `style` or `children` props.
+ * @param {object} [additionalState] - properties specific to the current component,
+ *   such as `inactive`, `selected`, etc.
+ * @returns {object}
+ */
+export const resolvePressableState = (
+  { pressed = false, focused = false, hovered = false } = {},
+  additionalState
+) => ({
+  ...additionalState,
+  focus: focused,
+  hover: hovered,
+  pressed
+})
+
+/**
+ * Takes a UDS `tokens` prop and, if it is a function, resolves it based on a state
+ * object passed from the React Native `Pressable` component and optional extra properties.
+ *
+ * @param {object|function} tokens - UDS system tokens prop
+ * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>`
+ * @param {object} [additionalState] - properties specific to the current component
+ * @returns {object} - resolved tokens object
+ */
+export const resolvePressableTokens = (tokens, pressableState, additionalState) => {
+  if (typeof tokens !== 'function') return tokens
+  const udsPressableState = resolvePressableState(pressableState, additionalState)
+  return tokens(udsPressableState)
+}
+
+const staticStyles = StyleSheet.create(
+  Platform.select({
+    web: {
+      notAllowed: { cursor: 'not-allowed' },
+      pointer: { cursor: 'pointer' }
+    },
+    default: {}
+  })
+)
+
+/**
+ * From an object of props, extracts any platform-appropriate press handler functions and wraps
+ * them in a function that passes in some provided args. Allows components containing a Pressable
+ * to pass in press handlers that are then called with state or values that is otherwise internal.
+ */
+export const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
+  // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
+  const pressHandlers = Object.fromEntries(
+    Object.entries(pressProps.selectHandlers(pressableProps)).map(([key, handler]) => ({
+      [key]: (...defaultArgs) => {
+        // Pass each handler data on this button and current selection
+        handler(...args, ...defaultArgs)
+      }
+    }))
+  )
+  return pressHandlers
+}

package/src/utils/propTypes.js

@@ -1,6 +1,24 @@
 import PropTypes from 'prop-types'
 import { Linking, Platform } from 'react-native'
-import { tokenKeys } from '@telus-uds/tools-theme'
+import { components as tokenKeys } from '@telus-uds/system-themes/schema'
+
+export const paddingProp = {
+  propType: PropTypes.shape({
+    paddingBottom: PropTypes.number,
+    paddingLeft: PropTypes.number,
+    paddingRight: PropTypes.number,
+    paddingTop: PropTypes.number
+  })
+}
+
+export const rectProp = {
+  propType: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  })
+}
 
 /**
  * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
@@ -29,7 +47,7 @@ const tokenValueType = PropTypes.oneOfType([tokenValue, PropTypes.objectOf(token
 const getTokenNames = (componentName) => {
   const componentTokenNames = tokenKeys[componentName]
   if (!componentTokenNames) {
-    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/tools-theme`)
+    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-themes/schema`)
   }
   return componentTokenNames
 }
@@ -59,14 +77,48 @@ export const selectTokens = (componentName, tokens) => {
  *
  * This prop is intended to be used as an 'escape hatch' for difficult or exceptional cases
  * where the main theming system doesn't apply. It is intentionally permissive about values.
+ *
+ * @param {...string} componentsNames - one or more ComponentName, which tokens keys are accepted
+ * @return {function} - a custom PropTypes validator
+ *
+ * @example
+ * Component.propTypes = {
+ *   // accepts all tokens keys defined in Component schema
+ *   tokens: getTokensPropType('Component')
+ * }
+ *
+ * Component.propTypes = {
+ *   // accepts all tokens keys defined in schemas for Component1 and Component2
+ *   tokens: getTokensPropType('Component1', 'Component2')
+ * }
  */
-export const getTokensPropType = (componentName) =>
-  PropTypes.oneOfType([
-    PropTypes.shape(
-      Object.fromEntries(getTokenNames(componentName).map((key) => [key, tokenValueType]))
-    ),
-    PropTypes.func // function that takes current appearances and returns above shape
-  ])
+export const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
+  PropTypes.checkPropTypes(
+    {
+      [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+    },
+    props,
+    propName,
+    componentName
+  )
+
+  if (typeof props[propName] !== 'function') {
+    PropTypes.checkPropTypes(
+      {
+        [propName]: PropTypes.exact(
+          Object.fromEntries(
+            componentsNames.flatMap((component) =>
+              getTokenNames(component).map((key) => [key, tokenValueType])
+            )
+          )
+        )
+      },
+      props,
+      propName,
+      componentName
+    )
+  }
+}
 
 function getPropSelector(propTypes, regexp) {
   const keys = Object.keys(propTypes)
@@ -152,7 +204,27 @@ export const a11yProps = {
         accessibilityElementsHidden: true
       }
     })
-  }
+  },
+  /**
+   * Generates an object of platform-appropriate a11y props describing an item that has an
+   * ordered position in a set. Examples of usage by accessibility tools includes screenreaders
+   * saying "Item X of Y" when this item is select.
+   *
+   * @param {number} itemsCount - the number of items in the set
+   * @param {number} index - the current item's index in the set
+   * @returns {object} - platform-applicable a11y props describing this position (if available)
+   */
+  getPositionInSet: (itemsCount, index) =>
+    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': itemsCount,
+        'aria-posinset': index + 1
+      },
+      // No equivalents exist on the native side
+      default: {}
+    })
 }
 
 // Props related to HTML <a> anchor link attributes.
@@ -199,7 +271,7 @@ export const hrefAttrsProp = {
   })
 }
 
-const pressPropTypes = {
+const pressHandlerPropTypes = {
   onPress: PropTypes.func,
   onPressIn: PropTypes.func,
   onPressOut: PropTypes.func,
@@ -210,7 +282,18 @@ const pressPropTypes = {
       onFocus: PropTypes.func,
       onBlur: PropTypes.func
     },
-    default: {}
+    default: {
+      onLongPress: PropTypes.func
+    }
+  })
+}
+
+const pressPropTypes = {
+  ...pressHandlerPropTypes,
+  disabled: PropTypes.bool,
+  ...Platform.select({
+    hitSlop: PropTypes.number,
+    pressRetentionOffset: PropTypes.oneOfType([PropTypes.number, rectProp.propType])
   })
 }
 
@@ -222,7 +305,8 @@ export const pressProps = {
   /**
    * Filters a props object, returning only the platform-relevant press props defined above
    */
-  select: getPropSelector(pressPropTypes)
+  select: getPropSelector(pressPropTypes),
+  selectHandlers: getPropSelector(pressHandlerPropTypes)
 }
 
 const linkPropTypes = {
@@ -427,12 +511,3 @@ export const componentPropType = (passedName, checkDisplayName = false) => {
 }
 
 export const copyPropTypes = PropTypes.oneOf(['en', 'fr'])
-
-export const paddingProp = {
-  propType: PropTypes.shape({
-    paddingBottom: PropTypes.number,
-    paddingLeft: PropTypes.number,
-    paddingRight: PropTypes.number,
-    paddingTop: PropTypes.number
-  })
-}

package/stories/Button/Button.stories.jsx

@@ -55,6 +55,11 @@ LongLabelButtonVariants.args = {
   children: 'This button has a label that is much longer than is considered advisable'
 }
 
+export const ShortLabelButtonVariants = VariantsTemplate.bind({})
+ShortLabelButtonVariants.args = {
+  children: 'k'
+}
+
 export const ParentTypes = (args) => (
   <EachParentType componentThemeName="Button" {...args}>
     {({ label, variant }) => (

package/stories/Checkbox/Checkbox.stories.jsx

@@ -0,0 +1,71 @@
+/* eslint-disable react/no-multi-comp */
+import React from 'react'
+
+import { Checkbox, Typography } from '../../lib'
+import { Container, EachParentType, parentTypesParams } from '../supports'
+
+export default {
+  title: 'Base/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    checked: {
+      control: { type: 'radio' },
+      options: [true, false, undefined]
+    }
+  },
+  args: {
+    label: 'Checkbox',
+    checked: undefined
+  }
+}
+
+const Template = (args) => (
+  <Container>
+    <Checkbox {...args} />
+  </Container>
+)
+
+export const Default = Template.bind({})
+Default.argTypes = {
+  checked: { table: { disable: true } }
+}
+
+export const Controlled = Template.bind({})
+Controlled.argTypes = {
+  defaultChecked: { table: { disable: true } }
+}
+Controlled.args = {
+  checked: false,
+  defaultChecked: undefined
+}
+
+export const Inactive = Template.bind({})
+Inactive.argTypes = {
+  inactive: { table: { disable: true } }
+}
+Inactive.args = {
+  inactive: true
+}
+
+export const WithFeedback = Template.bind({})
+WithFeedback.argTypes = {
+  feedback: { table: { disable: true } }
+}
+WithFeedback.args = {
+  feedback: 'Something happened'
+}
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Checkbox" {...args}>
+    {({ label, variant }) => (
+      <Container key={label}>
+        <Typography>{`${label} `}</Typography>
+        <Checkbox {...args} variant={variant} />
+      </Container>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams
+ParentTypes.args = {
+  defaultChecked: undefined
+}

package/stories/Feedback/Feedback.stories.jsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { Text } from 'react-native'
 
-import { Feedback, Typography } from '../../lib'
+import { Feedback, Typography, TextInput } from '../../lib'
 import { Container } from '../supports'
-import TextInput from '../../lib/TextInput'
 
 export default {
   title: 'Base/Feedback',
@@ -40,22 +39,22 @@ export const RenderFunctionAndChildren = () => (
 export const Variants = () => (
   <>
     <Container>
-      <Feedback variant={{ state: 'success' }} title="Success">
+      <Feedback validation="success" title="Success">
         {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
       </Feedback>
     </Container>
     <Container>
-      <Feedback variant={{ state: 'success', icon: true }} title="Success with icon">
+      <Feedback validation="success" variant={{ icon: true }} title="Success with icon">
         {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
       </Feedback>
     </Container>
     <Container>
-      <Feedback variant={{ state: 'error' }} title="Error">
+      <Feedback validation="error" title="Error">
         {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
       </Feedback>
     </Container>
     <Container>
-      <Feedback variant={{ state: 'error', icon: true }} title="Error with icon">
+      <Feedback validation="error" variant={{ icon: true }} title="Error with icon">
         {({ textStyles }) => <Text style={textStyles}>Content from function</Text>}
       </Feedback>
     </Container>

package/stories/Link/Link.stories.jsx

@@ -6,7 +6,7 @@ import { View } from 'react-native'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import * as Icons from '@telus-uds/palette-allium/build/rn/icons'
 
-import { Link, variantProp } from '../../lib'
+import { Link, Typography, variantProp } from '../../lib'
 import { Container, EachParentType, parentTypesParams, useVariants } from '../supports'
 
 export default {
@@ -62,6 +62,20 @@ IconRight.args = { icon: SampleIcon, iconPosition: 'right' }
 
 export const EveryIcon = EveryIconTemplate.bind({})
 
+export const InText = (args) => (
+  <Typography>
+    Some text containing a{' '}
+    <Link icon={SampleIcon} iconPosition="left" {...args}>
+      left icon link
+    </Link>
+    , alongside a{' '}
+    <Link icon={SampleIcon} iconPosition="right" {...args}>
+      right icon link
+    </Link>
+    , and also with a <Link {...args}>text link</Link>, all inline in text.
+  </Typography>
+)
+
 export const ParentTypes = (args) => (
   <EachParentType componentThemeName="Link" {...args}>
     {({ label, variant }) => (