@telus-uds/components-base 0.0.2-prerelease.9 → 1.1.0

package/src/FlexGrid/Col/Col.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { forwardRef, useContext } from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 import { viewports } from '@telus-uds/system-constants'
@@ -8,166 +8,173 @@ import { useViewport } from '../../ViewportProvider'
 import applyInheritance from '../helpers'
 import { responsiveProps } from '../../utils'
 
-const Col = ({
-  horizontalAlign,
-  children,
-  xs,
-  sm,
-  md,
-  lg,
-  xl,
-  xsOffset,
-  smOffset,
-  mdOffset,
-  lgOffset,
-  xlOffset,
-  ...viewProps
-}) => {
-  const gutter = useContext(GutterContext)
-  const viewPort = useViewport()
+const Col = forwardRef(
+  (
+    {
+      horizontalAlign,
+      children,
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      xsOffset,
+      smOffset,
+      mdOffset,
+      lgOffset,
+      xlOffset,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const gutter = useContext(GutterContext)
+    const viewPort = useViewport()
 
-  const hiddenLevels = applyInheritance([xs, sm, md, lg, xl])
+    const hiddenLevels = applyInheritance([xs, sm, md, lg, xl])
 
-  const getHorizontalAlignLevel = () => {
-    if (typeof horizontalAlign === 'object') {
-      return applyInheritance([
-        horizontalAlign.xs,
-        horizontalAlign.sm,
-        horizontalAlign.md,
-        horizontalAlign.lg,
-        horizontalAlign.xl
-      ])
+    const getHorizontalAlignLevel = () => {
+      if (typeof horizontalAlign === 'object') {
+        return applyInheritance([
+          horizontalAlign.xs,
+          horizontalAlign.sm,
+          horizontalAlign.md,
+          horizontalAlign.lg,
+          horizontalAlign.xl
+        ])
+      }
+      if (typeof horizontalAlign === 'string') {
+        return [horizontalAlign, horizontalAlign, horizontalAlign, horizontalAlign, horizontalAlign]
+      }
+      return ['inherit', 'inherit', 'inherit', 'inherit', 'inherit']
     }
-    if (typeof horizontalAlign === 'string') {
-      return [horizontalAlign, horizontalAlign, horizontalAlign, horizontalAlign, horizontalAlign]
+    const horizontalAlignLevel = getHorizontalAlignLevel()
+
+    const toPercent = (num) => {
+      return `${(num / 12) * 100}%`
     }
-    return ['inherit', 'inherit', 'inherit', 'inherit', 'inherit']
-  }
-  const horizontalAlignLevel = getHorizontalAlignLevel()
 
-  const toPercent = (num) => {
-    return `${(num / 12) * 100}%`
-  }
+    const calculateWidth = (value) => {
+      if (typeof value === 'undefined') {
+        return {}
+      }
 
-  const calculateWidth = (value) => {
-    if (typeof value === 'undefined') {
-      return {}
-    }
+      if (typeof value === 'number') {
+        const percent = toPercent(value)
 
-    if (typeof value === 'number') {
-      const percent = toPercent(value)
+        return {
+          maxWidth: percent,
+          flexBasis: percent
+        }
+      }
 
       return {
-        maxWidth: percent,
-        flexBasis: percent
+        flexGrow: 1,
+        flexBasis: 0,
+        maxWidth: '100%'
       }
     }
 
-    return {
-      flexGrow: 1,
-      flexBasis: 0,
-      maxWidth: '100%'
-    }
-  }
-
-  const calculateOffset = (value) => {
-    if (typeof value === 'number') {
-      const percent = toPercent(value)
+    const calculateOffset = (value) => {
+      if (typeof value === 'number') {
+        const percent = toPercent(value)
 
-      return { marginLeft: percent }
+        return { marginLeft: percent }
+      }
+      return {}
     }
-    return {}
-  }
 
-  const sizeStyles = (sizes) => {
-    const currViewport = Object.keys(sizes).find((key) => key.startsWith(viewPort))
-    const currSize = sizes[currViewport]
-    return {
-      ...calculateWidth(currSize)
+    const sizeStyles = (sizes) => {
+      const currViewport = Object.keys(sizes).find((key) => key.startsWith(viewPort))
+      const currSize = sizes[currViewport]
+      return {
+        ...calculateWidth(currSize)
+      }
     }
-  }
 
-  const offsetStyles = (offsets) => {
-    const currViewport = Object.keys(offsets).find((key) => key.startsWith(viewPort))
-    const currOffset = offsets[currViewport]
-    return {
-      ...calculateOffset(currOffset)
+    const offsetStyles = (offsets) => {
+      const currViewport = Object.keys(offsets).find((key) => key.startsWith(viewPort))
+      const currOffset = offsets[currViewport]
+      return {
+        ...calculateOffset(currOffset)
+      }
     }
-  }
 
-  const gutterPadding = {
-    paddingLeft: gutter ? 16 : 0,
-    paddingRight: gutter ? 16 : 0
-  }
+    const gutterPadding = {
+      paddingLeft: gutter ? 16 : 0,
+      paddingRight: gutter ? 16 : 0
+    }
 
-  let hidingStyles = {}
+    let hidingStyles = {}
 
-  const shown = Platform.OS === 'web' ? 'block' : 'flex'
+    const shown = Platform.OS === 'web' ? 'block' : 'flex'
 
-  if (viewPort === viewports.xs) {
-    hidingStyles = {
-      display: hiddenLevels[0] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[0]
+    if (viewPort === viewports.xs) {
+      hidingStyles = {
+        display: hiddenLevels[0] === 0 ? 'none' : shown,
+        textAlign: horizontalAlignLevel[0]
+      }
     }
-  }
-  if (viewPort === viewports.sm) {
-    hidingStyles = {
-      display: hiddenLevels[1] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[1]
+    if (viewPort === viewports.sm) {
+      hidingStyles = {
+        display: hiddenLevels[1] === 0 ? 'none' : shown,
+        textAlign: horizontalAlignLevel[1]
+      }
     }
-  }
-  if (viewPort === viewports.md) {
-    hidingStyles = {
-      display: hiddenLevels[2] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[2]
+    if (viewPort === viewports.md) {
+      hidingStyles = {
+        display: hiddenLevels[2] === 0 ? 'none' : shown,
+        textAlign: horizontalAlignLevel[2]
+      }
     }
-  }
-  if (viewPort === viewports.lg) {
-    hidingStyles = {
-      display: hiddenLevels[3] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[3]
+    if (viewPort === viewports.lg) {
+      hidingStyles = {
+        display: hiddenLevels[3] === 0 ? 'none' : shown,
+        textAlign: horizontalAlignLevel[3]
+      }
     }
-  }
-  if (viewPort === viewports.xl) {
-    hidingStyles = {
-      display: hiddenLevels[4] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[4]
+    if (viewPort === viewports.xl) {
+      hidingStyles = {
+        display: hiddenLevels[4] === 0 ? 'none' : shown,
+        textAlign: horizontalAlignLevel[4]
+      }
     }
-  }
 
-  const sizesArray = [xs, sm, md, lg, xl]
-  const offSetsArray = [xsOffset, smOffset, mdOffset, lgOffset, xlOffset]
-  const sizesWithIheritance = applyInheritance(sizesArray)
-  const offsetsWithIheritance = applyInheritance(offSetsArray)
-  const sizes = {
-    xs: sizesWithIheritance[0],
-    sm: sizesWithIheritance[1],
-    md: sizesWithIheritance[2],
-    lg: sizesWithIheritance[3],
-    xl: sizesWithIheritance[4]
-  }
-  const offsets = {
-    xs: offsetsWithIheritance[0],
-    sm: offsetsWithIheritance[1],
-    md: offsetsWithIheritance[2],
-    lg: offsetsWithIheritance[3],
-    xl: offsetsWithIheritance[4]
+    const sizesArray = [xs, sm, md, lg, xl]
+    const offSetsArray = [xsOffset, smOffset, mdOffset, lgOffset, xlOffset]
+    const sizesWithIheritance = applyInheritance(sizesArray)
+    const offsetsWithIheritance = applyInheritance(offSetsArray)
+    const sizes = {
+      xs: sizesWithIheritance[0],
+      sm: sizesWithIheritance[1],
+      md: sizesWithIheritance[2],
+      lg: sizesWithIheritance[3],
+      xl: sizesWithIheritance[4]
+    }
+    const offsets = {
+      xs: offsetsWithIheritance[0],
+      sm: offsetsWithIheritance[1],
+      md: offsetsWithIheritance[2],
+      lg: offsetsWithIheritance[3],
+      xl: offsetsWithIheritance[4]
+    }
+    return (
+      <View
+        ref={ref}
+        {...viewProps}
+        style={[
+          styles.col,
+          gutterPadding,
+          offsetStyles(offsets),
+          sizeStyles(sizes),
+          { ...hidingStyles }
+        ]}
+      >
+        {children}
+      </View>
+    )
   }
-  return (
-    <View
-      {...viewProps}
-      style={[
-        styles.col,
-        gutterPadding,
-        offsetStyles(offsets),
-        sizeStyles(sizes),
-        { ...hidingStyles }
-      ]}
-    >
-      {children}
-    </View>
-  )
-}
+)
+Col.displayName = 'Col'
 
 const styles = StyleSheet.create({
   col: {

package/src/FlexGrid/FlexGrid.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
 import { viewports } from '@telus-uds/system-constants'
@@ -8,62 +8,81 @@ import Col from './Col'
 import { useViewport } from '../ViewportProvider'
 import GutterContext from './providers/GutterContext'
 import applyInheritance from './helpers'
+import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags } from '../utils'
 
 /**
  * A mobile-first flexbox grid.
  */
 
-const FlexGrid = ({
-  limitWidth = true,
-  gutter = true,
-  outsideGutter = true,
-  xsReverse,
-  smReverse,
-  mdReverse,
-  lgReverse,
-  xlReverse,
-  children,
-  ...rest
-}) => {
-  const viewPort = useViewport()
-  const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
-  const marginVertical = 0
-  const marginHorizontal = outsideGutter ? 'auto' : -16
-  const width = outsideGutter ? '100%' : 'auto'
-  let flexDirection
-  let maxWidth
-  if (viewPort === viewports.xs) {
-    // no maxWidth for xs
-    flexDirection = reverseLevel[0] ? 'column-reverse' : 'column'
-  }
-  if (viewPort === viewports.sm) {
-    maxWidth = limitWidth && viewports.map.get(viewports.sm)
-    flexDirection = reverseLevel[1] ? 'column-reverse' : 'column'
-  }
-  if (viewPort === viewports.md) {
-    maxWidth = limitWidth && viewports.map.get(viewports.md)
-    flexDirection = reverseLevel[2] ? 'column-reverse' : 'column'
-  }
-  if (viewPort === viewports.lg) {
-    maxWidth = limitWidth && viewports.map.get(viewports.lg)
-    flexDirection = reverseLevel[3] ? 'column-reverse' : 'column'
-  }
-  if (viewPort === viewports.xl) {
-    maxWidth = limitWidth && viewports.map.get(viewports.xl)
-    flexDirection = reverseLevel[4] ? 'column-reverse' : 'column'
-  }
+const FlexGrid = forwardRef(
+  (
+    {
+      limitWidth = true,
+      gutter = true,
+      outsideGutter = true,
+      xsReverse,
+      smReverse,
+      mdReverse,
+      lgReverse,
+      xlReverse,
+      tag,
+      accessibilityRole,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewPort = useViewport()
+    const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
+    const marginVertical = 0
+    const marginHorizontal = outsideGutter ? 'auto' : -16
+    const width = outsideGutter ? '100%' : 'auto'
+    let flexDirection
+    let maxWidth
+    if (viewPort === viewports.xs) {
+      // no maxWidth for xs
+      flexDirection = reverseLevel[0] ? 'column-reverse' : 'column'
+    }
+    if (viewPort === viewports.sm) {
+      maxWidth = limitWidth && viewports.map.get(viewports.sm)
+      flexDirection = reverseLevel[1] ? 'column-reverse' : 'column'
+    }
+    if (viewPort === viewports.md) {
+      maxWidth = limitWidth && viewports.map.get(viewports.md)
+      flexDirection = reverseLevel[2] ? 'column-reverse' : 'column'
+    }
+    if (viewPort === viewports.lg) {
+      maxWidth = limitWidth && viewports.map.get(viewports.lg)
+      flexDirection = reverseLevel[3] ? 'column-reverse' : 'column'
+    }
+    if (viewPort === viewports.xl) {
+      maxWidth = limitWidth && viewports.map.get(viewports.xl)
+      flexDirection = reverseLevel[4] ? 'column-reverse' : 'column'
+    }
 
-  return (
-    <GutterContext.Provider value={gutter}>
-      <View
-        {...rest}
-        style={[styles.grid, { marginHorizontal, marginVertical, width, flexDirection, maxWidth }]}
-      >
-        {children}
-      </View>
-    </GutterContext.Provider>
-  )
-}
+    const props = {
+      ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+      ...a11yProps.select(rest),
+      ...viewProps.select(rest)
+    }
+
+    return (
+      <GutterContext.Provider value={gutter}>
+        <View
+          ref={ref}
+          {...props}
+          style={[
+            styles.grid,
+            { marginHorizontal, marginVertical, width, flexDirection, maxWidth }
+          ]}
+        >
+          {children}
+        </View>
+      </GutterContext.Provider>
+    )
+  }
+)
+FlexGrid.displayName = 'FlexGrid'
 
 const styles = StyleSheet.create({
   grid: {
@@ -72,6 +91,8 @@ const styles = StyleSheet.create({
 })
 
 FlexGrid.propTypes = {
+  ...a11yProps.propTypes,
+  ...viewProps.types,
   /**
    * Whether or not to give the grid a fixed width. This also centres the grid horizontally.
    */
@@ -104,6 +125,13 @@ FlexGrid.propTypes = {
    * Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
   xlReverse: PropTypes.bool,
+  /**
+   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: PropTypes.oneOf(layoutTags),
   /**
    * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
    */

package/src/FlexGrid/Row/Row.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
 import { viewports } from '@telus-uds/system-constants'
@@ -52,56 +52,63 @@ const distributeStyles = (distribute) => {
   }
 }
 
-const Row = ({
-  horizontalAlign,
-  verticalAlign,
-  distribute,
-  xsReverse,
-  smReverse,
-  mdReverse,
-  lgReverse,
-  xlReverse,
-  children,
-  ...rest
-}) => {
-  const viewPort = useViewport()
-  const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
+const Row = forwardRef(
+  (
+    {
+      horizontalAlign,
+      verticalAlign,
+      distribute,
+      xsReverse,
+      smReverse,
+      mdReverse,
+      lgReverse,
+      xlReverse,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewPort = useViewport()
+    const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
 
-  let flexDirection = ''
+    let flexDirection = ''
 
-  if (viewPort === viewports.xs) {
-    flexDirection = reverseLevel[0] ? 'row-reverse' : 'row'
-  }
-  if (viewPort === viewports.sm) {
-    flexDirection = reverseLevel[1] ? 'row-reverse' : 'row'
-  }
-  if (viewPort === viewports.md) {
-    flexDirection = reverseLevel[2] ? 'row-reverse' : 'row'
-  }
-  if (viewPort === viewports.lg) {
-    flexDirection = reverseLevel[3] ? 'row-reverse' : 'row'
-  }
-  if (viewPort === viewports.xl) {
-    flexDirection = reverseLevel[4] ? 'row-reverse' : 'row'
-  }
+    if (viewPort === viewports.xs) {
+      flexDirection = reverseLevel[0] ? 'row-reverse' : 'row'
+    }
+    if (viewPort === viewports.sm) {
+      flexDirection = reverseLevel[1] ? 'row-reverse' : 'row'
+    }
+    if (viewPort === viewports.md) {
+      flexDirection = reverseLevel[2] ? 'row-reverse' : 'row'
+    }
+    if (viewPort === viewports.lg) {
+      flexDirection = reverseLevel[3] ? 'row-reverse' : 'row'
+    }
+    if (viewPort === viewports.xl) {
+      flexDirection = reverseLevel[4] ? 'row-reverse' : 'row'
+    }
 
-  return (
-    <View
-      {...rest}
-      style={[
-        styles.row,
-        {
-          flexDirection,
-          ...horizontalAlignStyles(horizontalAlign),
-          ...verticalAlignStyles(verticalAlign),
-          ...distributeStyles(distribute)
-        }
-      ]}
-    >
-      {children}
-    </View>
-  )
-}
+    return (
+      <View
+        ref={ref}
+        {...rest}
+        style={[
+          styles.row,
+          {
+            flexDirection,
+            ...horizontalAlignStyles(horizontalAlign),
+            ...verticalAlignStyles(verticalAlign),
+            ...distributeStyles(distribute)
+          }
+        ]}
+      >
+        {children}
+      </View>
+    )
+  }
+)
+Row.displayName = 'Row'
 
 const styles = StyleSheet.create({
   row: {