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

package/src/Fieldset/FieldsetContainer.jsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import cssReset from './cssReset'
+
+/**
+ * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
+ */
+const FieldsetContainer = forwardRef(
+  ({ children, inactive, accessibilityRole, name: fieldsetName }, ref) => (
+    <fieldset
+      ref={ref}
+      disabled={inactive}
+      style={cssReset}
+      role={accessibilityRole}
+      name={fieldsetName}
+    >
+      {children}
+    </fieldset>
+  )
+)
+FieldsetContainer.displayName = 'FieldsetContainer'
+
+FieldsetContainer.propTypes = {
+  accessibilityRole: PropTypes.string,
+  children: PropTypes.node,
+  inactive: PropTypes.bool,
+  name: PropTypes.string
+}
+
+export default FieldsetContainer

package/src/Fieldset/FieldsetContainer.native.jsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+// No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
+// If a11y testing finds any additional handling is needed at the container level, add it here.
+const FieldsetContainer = forwardRef(({ children, accessibilityRole }, ref) => (
+  <View ref={ref} accessibilityRole={accessibilityRole}>
+    {children}
+  </View>
+))
+FieldsetContainer.displayName = 'FieldsetContainer'
+
+FieldsetContainer.propTypes = {
+  children: PropTypes.node,
+  accessibilityRole: PropTypes.string
+}
+
+export default FieldsetContainer

package/src/Fieldset/Legend.jsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import cssReset from './cssReset'
+
+/**
+ * On Web, wraps children in HTML `<legend>` tag.
+ * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
+ */
+const Legend = forwardRef(({ children }, ref) => (
+  <legend ref={ref} style={cssReset}>
+    {children}
+  </legend>
+))
+Legend.displayName = 'Legend'
+
+Legend.propTypes = {
+  children: PropTypes.node
+}
+
+export default Legend

package/src/Fieldset/Legend.native.jsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react'
+import { View, StyleSheet } from 'react-native'
+import PropTypes from 'prop-types'
+
+/**
+ * On Web, wraps children in HTML `<legend>` tag.
+ * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
+ */
+const Legend = forwardRef(({ children }, ref) => (
+  <View ref={ref} style={staticStyles.stretch}>
+    {children}
+  </View>
+))
+Legend.displayName = 'Legend'
+
+Legend.propTypes = {
+  children: PropTypes.node
+}
+
+const staticStyles = StyleSheet.create({
+  stretch: {
+    width: '100%',
+    flexGrow: 1
+  }
+})
+
+export default Legend

package/src/Fieldset/cssReset.js

@@ -0,0 +1,14 @@
+// React Native Web has no built-in `fieldset` or `legend` support.
+// This reset makes them consistent with other RNW views.
+// Can't use RN stylesheets because it's not an RN element (RNW's createElement tooling is unstable).
+// Using CSS `all` doesn't work well as an inline style.
+// https://github.com/necolas/react-native-web/issues/1385
+export default {
+  margin: 'unset',
+  padding: 'unset',
+  float: 'unset',
+  border: 'unset',
+  width: 'unset',
+  display: 'flex',
+  flexDirection: 'column'
+}

package/src/Fieldset/index.js

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

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.propTypes,
   /**
    * 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.
    */