@telus-uds/components-base 2.0.0 → 2.0.1

package/src/ExpandCollapse/Panel.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, useState } from 'react'
-import { Animated, Platform, View } from 'react-native'
+import React from 'react'
+import { Animated, Platform, View, Text } from 'react-native'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 
@@ -11,13 +11,15 @@ import {
   selectSystemProps,
   useVerticalExpandAnimation,
   variantProp,
-  viewProps
+  viewProps,
+  useCopy
 } from '../utils'
 
+import dictionary from './dictionary'
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 // just void functions for now, since there are no style tokens for a panel or control at this point
-const selectGroupStyles = () => {}
 const selectContainerStyles = ({
   contentPaddingLeft,
   contentPaddingRight,
@@ -27,7 +29,46 @@ const selectContainerStyles = ({
   paddingLeft: contentPaddingLeft,
   paddingRight: contentPaddingRight,
   paddingTop: contentPaddingTop,
-  paddingBottom: contentPaddingBottom
+  paddingBottom: contentPaddingBottom,
+  flex: 1
+})
+const selectTextStyles = ({
+  contentPanelFontSize,
+  contentPanelFontName,
+  contentPanelFontColor,
+  contentPanelFontWeight,
+  contentPanelLineHeight
+}) => ({
+  fontSize: contentPanelFontSize,
+  fontFamily: `${contentPanelFontName}${contentPanelFontWeight}normal`,
+  lineHeight: contentPanelFontSize * contentPanelLineHeight,
+  color: contentPanelFontColor
+})
+const selectContentPanelStyles = ({
+  contentPanelBackgroundColor,
+  contentPanelPaddingTop,
+  contentPanelPaddingBottom,
+  contentPanelPaddingLeft,
+  contentPanelPaddingRight,
+  contentPanelBorderWidth,
+  contentPanelBorderColor,
+  borderRadius,
+  marginBottom
+}) => ({
+  backgroundColor: contentPanelBackgroundColor,
+  paddingTop: contentPanelPaddingTop,
+  paddingBottom: contentPanelPaddingBottom,
+  paddingLeft: contentPanelPaddingLeft,
+  paddingRight: contentPanelPaddingRight,
+  borderWidth: contentPanelBorderWidth,
+  borderColor: contentPanelBorderColor,
+  borderStyle: 'solid',
+  borderRadius,
+  marginBottom
+})
+
+const selectControlPanelStyles = ({ contentPanelBackgroundColor }) => ({
+  backgroundColor: contentPanelBackgroundColor
 })
 
 /**
@@ -40,7 +81,7 @@ const selectContainerStyles = ({
  * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
  * by the chosen accessibility props for a particular accessibility tools).
  */
-const ExpandCollapsePanel = forwardRef(
+const ExpandCollapsePanel = React.forwardRef(
   (
     {
       openIds = [],
@@ -53,12 +94,15 @@ const ExpandCollapsePanel = forwardRef(
       tokens,
       variant,
       controlRef,
+      content,
+      copy = 'en',
       ...rest
     },
     ref
   ) => {
-    const [containerHeight, setContainerHeight] = useState(null)
+    const [containerHeight, setContainerHeight] = React.useState(null)
     const isExpanded = openIds.includes(panelId)
+    const getCopy = useCopy({ dictionary, copy })
 
     const selectedProps = selectProps({
       ...rest,
@@ -92,20 +136,67 @@ const ExpandCollapsePanel = forwardRef(
 
     const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps
 
-    return (
-      <View ref={ref} style={selectGroupStyles(themeTokens)}>
-        <ExpandCollapseControl
-          {...selectedProps}
-          isExpanded={isExpanded}
-          tokens={controlTokens}
-          onPress={handleControlPress}
-          ref={controlRef}
-        >
-          {control}
-        </ExpandCollapseControl>
+    const panelAccessibilityLabel = `${panelId} ${getCopy('panel')}`
+    const subPanelAccessibilityLabel = `${panelId} ${getCopy('subPanel')}`
+
+    return content ? (
+      <View
+        style={selectContentPanelStyles(themeTokens)}
+        accessibilityLabel={panelAccessibilityLabel}
+      >
+        {typeof children === 'string' ? (
+          <Text
+            style={selectTextStyles(themeTokens)}
+            accessibilityLabel={subPanelAccessibilityLabel}
+          >
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </View>
+    ) : (
+      <View ref={ref} style={themeTokens} accessibilityLabel={panelAccessibilityLabel}>
+        <View style={selectControlPanelStyles(themeTokens)}>
+          <ExpandCollapseControl
+            {...selectedProps}
+            isExpanded={isExpanded}
+            tokens={controlTokens}
+            variant={variant}
+            onPress={handleControlPress}
+            ref={controlRef}
+          >
+            {control}
+          </ExpandCollapseControl>
+        </View>
+        {isExpanded && (
+          <View
+            style={{
+              borderTopColor: themeTokens.expandDividerColor,
+              borderTopWidth: themeTokens.expandDividerWidth,
+              marginLeft: themeTokens.contentPaddingLeft,
+              marginRight: themeTokens.contentPaddingRight
+            }}
+          />
+        )}
         <Animated.View ref={animatedRef} style={animatedStyles} {...focusabilityProps}>
-          <View onLayout={onContainerLayout}>
-            <View style={selectContainerStyles(themeTokens)}>{children}</View>
+          <View
+            onLayout={onContainerLayout}
+            style={{
+              ...Platform.select({
+                default: {
+                  flex: 1
+                },
+                web: {}
+              })
+            }}
+          >
+            <View
+              style={selectContainerStyles(themeTokens)}
+              accessibilityLabel={subPanelAccessibilityLabel}
+            >
+              {children}
+            </View>
           </View>
         </Animated.View>
       </View>
@@ -130,7 +221,7 @@ ExpandCollapsePanel.propTypes = {
    * Function to call on pressing the panel's control, which should open or close the panel.
    * If Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent.
    */
-  onToggle: PropTypes.func.isRequired,
+  onToggle: PropTypes.func,
   /**
    * Optional function to call on pressing the panel's control, in addition to opening or closing the panel.
    */
@@ -141,9 +232,9 @@ ExpandCollapsePanel.propTypes = {
    */
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   /**
-   * The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed.
+   * The content inside the control element that opens and closes the ExpandCollapse when pressed.
    */
-  control: ExpandCollapseControl.propTypes.children.isRequired,
+  control: ExpandCollapseControl.propTypes.children,
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
@@ -151,7 +242,11 @@ ExpandCollapsePanel.propTypes = {
   /**
    * An optional ref to be attached to the control
    */
-  controlRef: ABBPropTypes.ref()
+  controlRef: ABBPropTypes.ref(),
+  /**
+   * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
+   */
+  content: PropTypes.bool
 }
 
 export default ExpandCollapsePanel

package/src/ExpandCollapse/dictionary.js

@@ -0,0 +1,10 @@
+export default {
+  en: {
+    panel: 'Panel',
+    subPanel: 'SubPanel'
+  },
+  fr: {
+    panel: 'Panneau',
+    subPanel: 'Sous-Panneau'
+  }
+}

package/src/Feedback/Feedback.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -55,7 +55,7 @@ const selectIconContainerStyles = ({ iconGap }) => ({
  * ### Accessibility
  * All accessibility props set on this component will be applied to the outer container.
  */
-const Feedback = forwardRef(
+const Feedback = React.forwardRef(
   ({ title, children, id, validation, tokens, variant, ...rest }, ref) => {
     const themeTokens = useThemeTokens('Feedback', tokens, {
       ...variant,
@@ -125,7 +125,6 @@ export default Feedback
 const staticStyles = StyleSheet.create({
   title: {
     display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center'
+    flexDirection: 'row'
   }
 })

package/src/Fieldset/Fieldset.jsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet } from 'react-native'
 
 import Feedback from '../Feedback'
-import { spacingProps } from '../utils'
+import { getTokensPropType, spacingProps, variantProp } from '../utils'
+import { useThemeTokens } from '../ThemeProvider'
 import FieldsetContainer from './FieldsetContainer'
 import { getStackedContent } from '../StackView'
 import InputLabel from '../InputLabel'
@@ -15,7 +15,7 @@ import useInputSupports from '../InputSupports/useInputSupports'
  *
  * Follows the same theming and most of the same props as InputSupports.
  */
-const Fieldset = forwardRef(
+const Fieldset = React.forwardRef(
   (
     {
       copy = 'en',
@@ -32,10 +32,20 @@ const Fieldset = forwardRef(
       inactive,
       accessibilityRole,
       name: fieldsetName,
-      children
+      children,
+      variant = {},
+      tokens = {},
+      ...rest
     },
     ref
   ) => {
+    /* Fieldset tokenization:
+    - error variant can only be activated by passing showErrorBorder and also having validaton as 'error'
+     */
+    const themeTokens = useThemeTokens('Fieldset', tokens, {
+      error: validation === 'error' && showErrorBorder,
+      ...variant
+    })
     // Skips `inputId` because a fieldset' legend describes multiple inputs
     const { hintId, feedbackId, a11yProps } = useInputSupports({
       feedback,
@@ -63,6 +73,34 @@ const Fieldset = forwardRef(
       />
     )
 
+    const borderStyles = ({
+      outlineWidth,
+      outlineColor,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      paddingBottom,
+      paddingRight,
+      paddingTop,
+      paddingLeft,
+      outlineOffset
+    }) => ({
+      outlineWidth,
+      outlineColor,
+      borderTopLeftRadius: borderTopLeftRadius * 0.1,
+      borderTopRightRadius: borderTopRightRadius * 0.1,
+      borderBottomLeftRadius: borderBottomLeftRadius * 0.1,
+      borderBottomRightRadius: borderBottomRightRadius * 0.1,
+      paddingBottom,
+      paddingRight,
+      paddingTop,
+      paddingLeft,
+      outlineOffset,
+      borderWidth: 0,
+      outlineStyle: validation === 'error' && showErrorBorder ? 'solid' : 'none'
+    })
+
     // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
     // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
     // fieldset as much as possible, but also allow different spacing within content and between
@@ -73,41 +111,27 @@ const Fieldset = forwardRef(
         ? [legendContent, feedbackContent, childContent]
         : [legendContent, childContent, feedbackContent]
     const stackedContent = getStackedContent(orderedContent, { space, preserveFragments: true })
-    const borderStyle =
-      (validation === 'error' && showErrorBorder && staticStyles.errorBorder) ||
-      staticStyles.noBorder
-
     return (
       <FieldsetContainer
         ref={ref}
         inactive={inactive}
         accessibilityRole={accessibilityRole}
         name={fieldsetName}
-        borderStyle={borderStyle}
+        borderStyle={borderStyles(themeTokens)}
         showBorderStyle={showErrorBorder}
+        {...rest}
       >
         {stackedContent}
       </FieldsetContainer>
     )
   }
 )
-const staticStyles = StyleSheet.create({
-  errorBorder: {
-    border: true,
-    borderWidth: 1,
-    borderColor: 'red',
-    borderRadius: 10,
-    padding: 8
-  },
-  noBorder: {
-    padding: 9,
-    border: 'unset'
-  }
-})
 
 Fieldset.displayName = 'Fieldset'
 
 Fieldset.propTypes = {
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Fieldset'),
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   /**
    * Whether the English or French copy will be used (e.g. for accessibility labels).

package/src/Fieldset/FieldsetContainer.jsx

@@ -1,12 +1,16 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import cssReset from './cssReset'
 
+import { selectSystemProps, a11yProps, htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs])
+
 /**
  * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
  */
-const FieldsetContainer = forwardRef(
+const FieldsetContainer = React.forwardRef(
   (
     {
       children,
@@ -14,20 +18,22 @@ const FieldsetContainer = forwardRef(
       accessibilityRole,
       name: fieldsetName,
       showBorderStyle = false,
-      borderStyle
+      borderStyle,
+      style,
+      ...rest
     },
     ref
   ) => {
     // If needs border for error design or reset the component style
-    const styleContainer = showBorderStyle ? borderStyle : cssReset
-
+    const styleContainer = showBorderStyle && borderStyle ? borderStyle : cssReset
     return (
       <fieldset
         ref={ref}
         disabled={inactive}
-        style={styleContainer}
+        style={{ ...styleContainer, ...style }}
         role={accessibilityRole}
         name={fieldsetName}
+        {...selectProps(rest)}
       >
         {children}
       </fieldset>
@@ -37,12 +43,14 @@ const FieldsetContainer = forwardRef(
 FieldsetContainer.displayName = 'FieldsetContainer'
 
 FieldsetContainer.propTypes = {
+  ...selectedSystemPropTypes,
   accessibilityRole: PropTypes.string,
   children: PropTypes.node,
   inactive: PropTypes.bool,
   name: PropTypes.string,
   showBorderStyle: PropTypes.bool,
-  borderStyle: PropTypes.object
+  borderStyle: PropTypes.object,
+  style: PropTypes.object
 }
 
 export default FieldsetContainer

package/src/Fieldset/FieldsetContainer.native.jsx

@@ -1,19 +1,27 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
+import { selectSystemProps, a11yProps, viewProps } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 // 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>
-))
+const FieldsetContainer = React.forwardRef(
+  ({ children, accessibilityRole, style, ...rest }, ref) => (
+    <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)} style={style}>
+      {children}
+    </View>
+  )
+)
 FieldsetContainer.displayName = 'FieldsetContainer'
 
 FieldsetContainer.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node,
-  accessibilityRole: PropTypes.string
+  accessibilityRole: PropTypes.string,
+  style: PropTypes.object
 }
 
 export default FieldsetContainer

package/src/Fieldset/Legend.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import cssReset from './cssReset'
@@ -7,7 +7,7 @@ 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) => (
+const Legend = React.forwardRef(({ children }, ref) => (
   <legend ref={ref} style={cssReset}>
     {children}
   </legend>

package/src/Fieldset/Legend.native.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -6,7 +6,7 @@ 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) => (
+const Legend = React.forwardRef(({ children }, ref) => (
   <View ref={ref} style={staticStyles.stretch}>
     {children}
   </View>