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

package/src/Notification/Notification.jsx

@@ -0,0 +1,164 @@
+import React, { forwardRef, useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+import PropTypes from 'prop-types'
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { getTokensPropType, selectTokens, variantProp } from '../utils'
+import ButtonBase from '../Button/ButtonBase'
+import useCopy from '../utils/useCopy'
+import dictionary from './dictionary'
+
+const selectContainerStyles = (tokens) => ({ ...tokens })
+
+const selectTextStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
+
+const selectIconProps = ({ iconSize, iconColor }) => ({
+  size: iconSize,
+  color: iconColor
+})
+
+const selectIconContainerStyles = ({ iconGap }) => ({
+  paddingRight: iconGap
+})
+
+const selectDismissIconProps = ({ dismissIconSize, dismissIconColor }) => ({
+  size: dismissIconSize,
+  color: dismissIconColor
+})
+
+const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
+  paddingLeft: dismissButtonGap
+})
+
+/**
+ * A banner that highlights important messages:
+ * - Status message to show there is an error or outage of services
+ * - Confirmation message in response to user action
+ * - Account information letting the user know they have almost used all their data
+ *
+ * ## Usage criteria
+ * - Use simple text content only, such as bold test or links. Don’t use other complex components or paragraphs
+ * - Show notifications before the content that the message is related to, otherwise show at the top of the main content
+ * - Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
+ * - When showing multiple notifications, show them in order of importance from top to bottom
+ * - Use variants to visually show the type of message contained within the Notification.
+ * - The icon and colour will indicate meaning and importance
+ *
+ * ### Variants
+ * - Use `variant.style` to set the visual style of the notification
+ * - Use `dismissible` prop to enable dismissible functionality
+ * - Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
+ *
+ * ### When to use the system prop?
+ * - Use `system` to show system-based messages coming from the application
+ * - Don’t use `system` when the message is in response to user action
+ *
+ * ## Variants
+ *
+ * #### Success
+ * Use the success variant to provide feedback of a successful operation. The message will include an icon to indicate meaning and importance.
+ *
+ * #### Warning
+ * Use the warning variant to provide feedback of a warning; users would still be able to proceed forward.
+ * The message will include an icon to indicate meaning and importance.
+ *
+ * #### Error
+ * Use the error variant to provide feedback of a failed operation. The message will include an icon to indicate meaning and importance.
+ *
+ * #### Dismissible
+ * Dismissible notifications should only be used for default or success notifications where there is no action needed from the user.
+ * If the information is passive then it should be dismissible as indicated by an interactive close button on the far right.
+ * If the notification requires an action then make the option(s) clear with a `ChevronLink` or `Link`.
+ *
+ * Use the `dismissible` prop to allow users to dismiss the Notification at any time. Once dismissed, the Notification is removed from the DOM.
+ *
+ * Please note:
+ *
+ * - Default and Success variants are dismissible
+ * - Error and Warning variants are not dismissible
+ *
+ * #### System message
+ * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
+ * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
+ */
+const Notification = forwardRef(
+  ({ children, system, dismissible, copy = 'en', tokens, variant }, ref) => {
+    const [isDismissed, setIsDismissed] = useState(false)
+    const themeTokens = useThemeTokens('Notification', tokens, variant, { system })
+    const getCopy = useCopy({ dictionary, copy })
+
+    if (isDismissed) {
+      return null
+    }
+
+    const textStyles = selectTextStyles(themeTokens)
+
+    const content =
+      typeof children === 'string' ? <Text style={textStyles}>{children}</Text> : children
+
+    const { icon: IconComponent, dismissIcon: DismissIconComponent } = themeTokens
+
+    const onDismissPress = () => setIsDismissed(true)
+
+    // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
+    return (
+      <View ref={ref} style={[staticStyles.container, selectContainerStyles(themeTokens)]}>
+        {IconComponent && (
+          <View style={selectIconContainerStyles(themeTokens)}>
+            <IconComponent {...selectIconProps(themeTokens)} />
+          </View>
+        )}
+        <View style={staticStyles.contentContainer}>
+          {content && typeof content === 'function' ? content({ textStyles, variant }) : content}
+        </View>
+        {dismissible && DismissIconComponent && (
+          <View style={selectDismissButtonContainerStyles(themeTokens)}>
+            <ButtonBase
+              onPress={onDismissPress}
+              accessibilityRole="button"
+              accessibilityLabel={getCopy('dismiss')}
+            >
+              {() => <DismissIconComponent {...selectDismissIconProps(themeTokens)} />}
+            </ButtonBase>
+          </View>
+        )}
+      </View>
+    )
+  }
+)
+Notification.displayName = 'Notification'
+
+Notification.propTypes = {
+  /**
+   * Content of the `Notification`.
+   */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
+  /**
+   * Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
+   */
+  system: PropTypes.bool,
+  /**
+   * Use the `dismissible` prop to allow users to dismiss the Notification at any time.
+   */
+  dismissible: PropTypes.bool,
+  /**
+   * Select english or french copy for the accessible label of the dismiss button.
+   */
+  copy: PropTypes.oneOfType([
+    PropTypes.oneOf(['en', 'fr']),
+    PropTypes.shape({ dismiss: PropTypes.string })
+  ]),
+  tokens: getTokensPropType('Notification'),
+  variant: variantProp.propType
+}
+
+export default Notification
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row'
+  },
+  contentContainer: {
+    flex: 1
+  }
+})

package/src/Notification/dictionary.js

@@ -0,0 +1,8 @@
+export default {
+  en: {
+    dismiss: 'Close'
+  },
+  fr: {
+    dismiss: 'Fermer'
+  }
+}

package/src/Notification/index.js

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

package/src/Pagination/PageButton.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import ButtonBase from '../Button/ButtonBase'
@@ -8,7 +8,6 @@ import {
   copyPropTypes,
   getTokensPropType,
   hrefAttrsProp,
-  linkProps,
   selectTokens,
   variantProp
 } from '../utils'
@@ -16,51 +15,59 @@ import {
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
-function PageButton({ label, onPress, href, isActive, copy, variant, tokens, ...props }) {
-  const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant)
+const PageButton = forwardRef(
+  ({ label, onPress, href, isActive, copy, variant, tokens, ...props }, ref) => {
+    const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant)
 
-  const getCopy = useCopy({ dictionary, copy })
+    const getCopy = useCopy({ dictionary, copy })
 
-  const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
+    const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
 
-  const activeProps = isActive
-    ? {
-        selected: true,
-        ...a11yProps.nonFocusableProps,
-        // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
-        // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
-        key: 'active-item'
-      }
-    : {}
+    const activeProps = isActive
+      ? {
+          selected: true,
+          ...a11yProps.nonFocusableProps,
+          // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
+          // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
+          key: 'active-item'
+        }
+      : {}
 
-  const accessibilityRole = href !== undefined ? 'link' : 'button'
-  const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : ''
-  const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`
+    const accessibilityRole = href !== undefined ? 'link' : 'button'
+    const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : ''
+    const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`
 
-  const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-  const buttonProps = {
-    accessibilityRole,
-    accessibilityLabel,
-    onPress,
-    href,
-    hrefAttrs,
-    ...rest
-  }
+    const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
+    const buttonProps = {
+      accessibilityRole,
+      accessibilityLabel,
+      onPress,
+      href,
+      hrefAttrs,
+      ...rest
+    }
 
-  return (
-    <ButtonBase {...buttonProps} tokens={getButtonTokens} {...activeProps}>
-      {label}
-    </ButtonBase>
-  )
-}
+    return (
+      <ButtonBase ref={ref} {...buttonProps} tokens={getButtonTokens} {...activeProps}>
+        {label}
+      </ButtonBase>
+    )
+  }
+)
+PageButton.displayName = 'PageButton'
 
 PageButton.propTypes = {
+  // Spreading any props into a secondary component accessed like Pagination.PageButton
+  // crashes a Docusaurus props table, but only in production, not in development
+  onPress: PropTypes.func,
+  href: PropTypes.string,
+  // If the above is fixed, the above can be replaced with this which includes full a11y etc:
+  // ...linkProps.types,
   label: PropTypes.string,
   isActive: PropTypes.bool,
   copy: copyPropTypes,
   variant: variantProp.propType,
-  tokens: getTokensPropType('PaginationPageButton'),
-  ...linkProps.types
+  tokens: getTokensPropType('PaginationPageButton')
 }
 
 export default PageButton

package/src/Pagination/Pagination.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { View, Text, StyleSheet } from 'react-native'
 
 import { componentPropType, copyPropTypes, getTokensPropType, variantProp } from '../utils'
@@ -19,99 +19,95 @@ const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight })
     lineHeight
   })
 
-function Pagination({
-  children,
-  copy = 'en',
-  variant,
-  tokens,
-  sideButtonVariant,
-  sideButtonTokens
-}) {
-  const viewport = useViewport()
-  const { truncateAbove, gap, ...themeTokens } = useThemeTokens('Pagination', tokens, variant, {
-    viewport
-  })
-
-  const items = React.Children.toArray(children)
-
-  const {
-    isItemActive,
-    getItemProps,
-    showPrevious,
-    showNext,
-    nextItemProps,
-    previousItemProps,
-    shouldRenderButton,
-    shouldRenderEllipsis
-  } = usePagination({
-    items,
-    truncateAbove
-  })
-
-  const ellipsisTextStyles = selectTextStyles(themeTokens)
-
-  if (items.length === 0) {
-    return null
-  }
-
-  // TODO: replace with a spacing component when https://github.com/telus/universal-design-system/pull/531 is implemented
-  // concatenate all items to easily wrap them in identical spacing components
-  const buttons = [
-    showPrevious && (
-      <SideButton
-        {...previousItemProps}
-        direction="previous"
-        copy={copy}
-        variant={sideButtonVariant}
-        tokens={sideButtonTokens}
-      />
-    ),
-    ...items.map((child, itemIndex) => {
-      const buttonLabel = `${itemIndex + 1}`
-      const itemProps = getItemProps(itemIndex)
-
-      if (shouldRenderButton(itemIndex)) {
-        return (
-          <PageButton
-            {...itemProps}
-            label={buttonLabel}
-            copy={copy}
-            isActive={isItemActive(itemIndex)}
-          />
-        )
-      }
-
-      if (shouldRenderEllipsis(itemIndex)) {
-        return <Text style={ellipsisTextStyles}>...</Text>
-      }
-
+const Pagination = forwardRef(
+  ({ children, copy = 'en', variant, tokens, sideButtonVariant, sideButtonTokens }, ref) => {
+    const viewport = useViewport()
+    const { truncateAbove, gap, ...themeTokens } = useThemeTokens('Pagination', tokens, variant, {
+      viewport
+    })
+
+    const items = React.Children.toArray(children)
+
+    const {
+      isItemActive,
+      getItemProps,
+      showPrevious,
+      showNext,
+      nextItemProps,
+      previousItemProps,
+      shouldRenderButton,
+      shouldRenderEllipsis
+    } = usePagination({
+      items,
+      truncateAbove
+    })
+
+    const ellipsisTextStyles = selectTextStyles(themeTokens)
+
+    if (items.length === 0) {
       return null
-    }),
-    showNext && (
-      <SideButton
-        {...nextItemProps}
-        direction="next"
-        copy={copy}
-        variant={sideButtonVariant}
-        tokens={sideButtonTokens}
-      />
+    }
+
+    // TODO: replace with a spacing component when https://github.com/telus/universal-design-system/pull/531 is implemented
+    // concatenate all items to easily wrap them in identical spacing components
+    const buttons = [
+      showPrevious && (
+        <SideButton
+          {...previousItemProps}
+          direction="previous"
+          copy={copy}
+          variant={sideButtonVariant}
+          tokens={sideButtonTokens}
+        />
+      ),
+      ...items.map((child, itemIndex) => {
+        const buttonLabel = `${itemIndex + 1}`
+        const itemProps = getItemProps(itemIndex)
+
+        if (shouldRenderButton(itemIndex)) {
+          return (
+            <PageButton
+              {...itemProps}
+              label={buttonLabel}
+              copy={copy}
+              isActive={isItemActive(itemIndex)}
+            />
+          )
+        }
+
+        if (shouldRenderEllipsis(itemIndex)) {
+          return <Text style={ellipsisTextStyles}>...</Text>
+        }
+
+        return null
+      }),
+      showNext && (
+        <SideButton
+          {...nextItemProps}
+          direction="next"
+          copy={copy}
+          variant={sideButtonVariant}
+          tokens={sideButtonTokens}
+        />
+      )
+    ]
+
+    return (
+      <View style={staticStyles.container} ref={ref}>
+        {buttons
+          // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
+          .map((element, index) => [element, `page-${index + 1}`])
+          .filter(([element]) => element !== null)
+          .map(([element, key]) => (
+            <Box right={gap} key={key}>
+              {element}
+            </Box>
+          ))}
+      </View>
     )
-  ]
-
-  return (
-    <View style={staticStyles.container}>
-      {buttons
-        // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
-        .map((element, index) => [element, `page-${index + 1}`])
-        .filter(([element]) => element !== null)
-        .map(([element, key]) => (
-          <Box right={gap} key={key}>
-            {element}
-          </Box>
-        ))}
-    </View>
-  )
-}
+  }
+)
+PageButton.displayName = 'PageButton'
 
 Pagination.PageButton = PageButton
 

package/src/Pagination/SideButton.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Text } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -25,53 +25,56 @@ const directionToSide = {
   next: 'right'
 }
 
-function SideButton({ direction = 'previous', onPress, href, copy, variant, tokens, ...props }) {
-  const viewport = useViewport()
-  const buttonVariant = { direction, viewport, ...variant }
-  const getTokens = useThemeTokensCallback('PaginationSideButton', tokens, buttonVariant)
+const SideButton = forwardRef(
+  ({ direction = 'previous', onPress, href, copy, variant, tokens, ...props }, ref) => {
+    const viewport = useViewport()
+    const buttonVariant = { direction, viewport, ...variant }
+    const getTokens = useThemeTokensCallback('PaginationSideButton', tokens, buttonVariant)
 
-  const getCopy = useCopy({ dictionary, copy })
+    const getCopy = useCopy({ dictionary, copy })
 
-  const { icon } = getTokens(tokens, buttonVariant)
+    const { icon } = getTokens(tokens, buttonVariant)
 
-  const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
-  const getIconTokens = (buttonState) => selectIconTokens(getTokens(buttonState), direction)
+    const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
+    const getIconTokens = (buttonState) => selectIconTokens(getTokens(buttonState), direction)
 
-  const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')
-  const showLabel = viewport !== 'sm' && viewport !== 'xs'
+    const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')
+    const showLabel = viewport !== 'sm' && viewport !== 'xs'
 
-  const accessibilityLabel =
-    direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel')
-  const accessibilityRole = href !== undefined ? 'link' : 'button'
+    const accessibilityLabel =
+      direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel')
+    const accessibilityRole = href !== undefined ? 'link' : 'button'
 
-  const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-  const buttonProps = {
-    accessibilityRole,
-    accessibilityLabel,
-    onPress,
-    href,
-    hrefAttrs,
-    ...rest
-  }
+    const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
+    const buttonProps = {
+      accessibilityRole,
+      accessibilityLabel,
+      onPress,
+      href,
+      hrefAttrs,
+      ...rest
+    }
 
-  return (
-    <ButtonBase {...buttonProps} tokens={getButtonTokens}>
-      {({ textStyles, ...buttonState }) => {
-        const iconProps = { tokens: getIconTokens(buttonState) }
-        return (
-          <IconText
-            icon={icon}
-            space={1}
-            iconPosition={directionToSide[direction]}
-            iconProps={iconProps}
-          >
-            {showLabel && <Text style={textStyles}>{label}</Text>}
-          </IconText>
-        )
-      }}
-    </ButtonBase>
-  )
-}
+    return (
+      <ButtonBase ref={ref} {...buttonProps} tokens={getButtonTokens}>
+        {({ textStyles, ...buttonState }) => {
+          const iconProps = { tokens: getIconTokens(buttonState) }
+          return (
+            <IconText
+              icon={icon}
+              space={1}
+              iconPosition={directionToSide[direction]}
+              iconProps={iconProps}
+            >
+              {showLabel && <Text style={textStyles}>{label}</Text>}
+            </IconText>
+          )
+        }}
+      </ButtonBase>
+    )
+  }
+)
+SideButton.displayName = 'SideButton'
 
 SideButton.propTypes = {
   direction: PropTypes.oneOf(['previous', 'next']),

package/src/Progress/Progress.jsx

@@ -0,0 +1,78 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import { a11yProps } from '../utils/propTypes'
+import { useThemeTokens } from '../ThemeProvider'
+import { getTokensPropType, variantProp } from '../utils'
+
+const selectProgressStyles = ({
+  backgroundColor,
+  borderWidth,
+  borderColor,
+  borderRadius,
+  height
+}) => ({
+  backgroundColor,
+  borderWidth,
+  borderColor,
+  borderRadius,
+  height
+})
+
+/**
+ * The `Progress` is a container for displaying one or several `ProgressBar`s.
+ *
+ * ## Props
+ *
+ * - Use `children` prop to pass one or multiple `ProgressBar`s. Note that in case of stacked progress bars
+ *   each next will be displayed on top of the previous one.
+ *
+ * ## Tokens
+ *
+ * - Use the following tokens to customize the appearance:
+ *   - `backgroundColor` for the background color of the progress container,
+ *   - `borderColor` to control the color of the border,
+ *   - `borderRadius` for the rounded corners,
+ *   - `borderWidth` to change the border width.
+ *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *
+ * ## Variants
+ *
+ * - Use the `size` variant to control the height of your progress bars:  passing `'mini'` will make your
+ *   progress bar container narrower.
+ *
+ * ## Usability and A11y guidelines
+ *
+ * `Progress` component accepts the standard accessibility properties, however it's more important to make sure
+ * its children (instances of `ProgressBar`) receive the accessibility properties specific to the `progressbar`
+ * role.
+ *
+ */
+const Progress = forwardRef(({ children, tokens, variant, ...rest }, ref) => {
+  const themeTokens = useThemeTokens('Progress', tokens, variant)
+
+  return (
+    <View ref={ref} style={selectProgressStyles(themeTokens)} {...a11yProps.select(rest)}>
+      {children}
+    </View>
+  )
+})
+Progress.displayName = 'Progress'
+
+Progress.propTypes = {
+  /**
+   * Use the `children` prop to supply one or several `ProgressBar`s.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Progress tokens.
+   */
+  tokens: getTokensPropType('Progress'),
+  /**
+   * Progress variant.
+   */
+  variant: variantProp.propType
+}
+
+export default Progress