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

package/src/Icon/Icon.jsx

@@ -5,13 +5,19 @@ import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, scaleWithText, variantProp } from '../utils'
 
-const Icon = ({ IconSvg, variant, label, titleId, tokens, scalesWithText = false }) => {
+const Icon = ({
+  icon: IconComponent,
+  accessibilityLabel,
+  variant,
+  tokens,
+  scalesWithText = false
+}) => {
   const themeTokens = useThemeTokens('Icon', tokens, variant)
 
   const size = scalesWithText ? scaleWithText(themeTokens.size) : themeTokens.size
 
   const iconContent = (
-    <IconSvg title={label} titleId={titleId} size={size} color={themeTokens.color} />
+    <IconComponent title={accessibilityLabel} size={size} color={themeTokens.color} />
   )
 
   return Platform.OS === 'web' ? (
@@ -37,41 +43,26 @@ const Icon = ({ IconSvg, variant, label, titleId, tokens, scalesWithText = false
   )
 }
 
-// Auto-generated SVG icon components wrap Icon and pass through these props:
 export const iconComponentPropTypes = {
   variant: variantProp.propType,
   tokens: getTokensPropType('Icon'),
   /**
    * Descriptive label used in web SVG title tag for accessibility
    */
-  label: PropTypes.string,
+  accessibilityLabel: PropTypes.string,
   /**
-   * On web, this unique id is applied to <SVG> title and aria-labelledby attr
+   * controls whether the icon size should be proportionate to any accessibility-related font scaling.
    */
-  titleId: PropTypes.string
-}
-
-// Auto-generated SVG icon components contain an inner SVG component taking these props:
-export const iconSvgPropTypes = {
-  title: iconComponentPropTypes.label,
-  titleId: iconComponentPropTypes.titleId,
-  /**
-   * The size of the SVG icon after resolving tokens
-   */
-  size: PropTypes.number,
-  /**
-   * The color of the SVG icon after resolving tokens
-   */
-  color: PropTypes.string
+  scalesWithText: PropTypes.bool
 }
 
 Icon.propTypes = {
   ...iconComponentPropTypes,
   /**
-   * Function component containing this icon's SVG or native equivalent.
-   * UDS's SVGR config turns static SVG files into components that pass this to <Icon>.
+   * A valid UDS icon component imported from a UDS palette
+   * (e.g.) `import { MyIcon } from @telus-uds/palette-<brand>/build/web/icons`
    */
-  IconSvg: PropTypes.func.isRequired
+  icon: PropTypes.elementType.isRequired
 }
 
 export default Icon

package/src/Icon/IconText.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, View } from 'react-native'
 
-import { iconComponentPropTypes } from './Icon'
+import Icon, { iconComponentPropTypes } from './Icon'
 import { getStackedContent } from '../StackView'
 import { spacingProps } from '../utils'
 
@@ -15,7 +15,7 @@ import { spacingProps } from '../utils'
  *  - within a container with `flexDirection: 'row'`
  */
 const IconText = ({ space, iconPosition = 'left', icon: IconComponent, iconProps, children }) => {
-  const iconContent = IconComponent && <IconComponent scalesWithText {...iconProps} />
+  const iconContent = IconComponent && <Icon icon={IconComponent} scalesWithText {...iconProps} />
 
   // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
   // See abandoned issue https://github.com/facebook/react-native/issues/6529

package/src/Icon/index.js

@@ -1,5 +1,5 @@
-import Icon, { iconComponentPropTypes, iconSvgPropTypes } from './Icon'
+import Icon, { iconComponentPropTypes } from './Icon'
 import IconText from './IconText'
 
 export default Icon
-export { iconComponentPropTypes, iconSvgPropTypes, IconText }
+export { iconComponentPropTypes, IconText }

package/src/InputLabel/InputLabel.jsx

@@ -57,7 +57,11 @@ function InputLabel({
           {hint}
         </Text>
       )}
-      {hasTooltip && <Tooltip content={tooltip} />}
+      {hasTooltip && (
+        <View style={staticStyles.tooltipAlign}>
+          <Tooltip content={tooltip} />
+        </View>
+      )}
       {hint && !isHintInline && (
         <Text style={[selectHintStyles(themeTokens), staticStyles.hintBelow]} nativeID={hintId}>
           {hint}
@@ -84,7 +88,7 @@ const staticStyles = StyleSheet.create({
   container: {
     display: 'flex',
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'baseline'
   },
   containerWithHintBelow: {
     flexWrap: 'wrap'
@@ -95,5 +99,8 @@ const staticStyles = StyleSheet.create({
   hintBelow: {
     flexBasis: '100%',
     flexShrink: 0
+  },
+  tooltipAlign: {
+    alignSelf: 'center'
   }
 })

package/src/InputSupports/InputSupports.jsx

@@ -5,9 +5,7 @@ import InputLabel from '../InputLabel'
 import Feedback from '../Feedback'
 import StackView from '../StackView'
 import { useThemeTokens } from '../ThemeProvider'
-import useUniqueId from '../utils/useUniqueId'
-
-const joinDefined = (array) => array.filter((item) => item !== undefined).join(' ')
+import useInputSupports from './useInputSupports'
 
 function InputSupports({
   children,
@@ -20,21 +18,12 @@ function InputSupports({
 }) {
   const { space } = useThemeTokens('InputSupports')
 
-  const hasValidationError = validation === 'error'
-
-  const inputId = useUniqueId('input')
-  const hintId = useUniqueId('input-hint')
-  const feedbackId = useUniqueId('input-feedback')
-
-  const a11yProps = {
-    accessibilityLabel: label,
-    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]), // native only -> replaced with describedBy on web
-    accessibilityDescribedBy: joinDefined([
-      !hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
-      hint && hintId
-    ]), // introduced in RNW 0.15.0
-    accessibilityInvalid: hasValidationError // introduced in RNW 0.15.0
-  }
+  const { inputId, hintId, feedbackId, a11yProps } = useInputSupports({
+    feedback,
+    hint,
+    label,
+    validation
+  })
 
   return (
     <StackView space={space}>

package/src/InputSupports/useInputSupports.js

@@ -0,0 +1,30 @@
+import useUniqueId from '../utils/useUniqueId'
+
+const joinDefined = (array) => array.filter((item) => item !== undefined).join(' ')
+
+const useInputSupports = ({ label, feedback, validation, hint }) => {
+  const hasValidationError = validation === 'error'
+
+  const inputId = useUniqueId('input')
+  const hintId = useUniqueId('input-hint')
+  const feedbackId = useUniqueId('input-feedback')
+
+  const a11yProps = {
+    accessibilityLabel: label,
+    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]), // native only -> replaced with describedBy on web
+    accessibilityDescribedBy: joinDefined([
+      !hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
+      hint && hintId
+    ]),
+    accessibilityInvalid: hasValidationError
+  }
+
+  return {
+    inputId,
+    hintId,
+    feedbackId,
+    a11yProps
+  }
+}
+
+export default useInputSupports

package/src/Link/LinkBase.jsx

@@ -11,27 +11,28 @@ import {
 import { resolvePressableTokens } from '../utils/pressability'
 
 import InlinePressable from './InlinePressable'
-import { applyTextStyles } from '../ThemeProvider'
+import { applyTextStyles, applyOuterBorder } from '../ThemeProvider'
 import { IconText, iconComponentPropTypes } from '../Icon'
 
 const selectOuterBorderStyles = ({
   outerBorderColor,
   outerBorderWidth,
   outerBorderGap,
-  outerBorderRadius,
+  borderRadius,
   outerBorderOutline
 }) =>
   // A view wrapper with a border on native messes up inline text alignment
   // so for now make focus styles strictly web-only
   Platform.OS === 'web'
     ? {
-        margin: -1 * (outerBorderGap + outerBorderWidth) || 0,
-        padding: outerBorderGap,
         // Allow theme to define outline, or, turn off outline and use border if rounded corners required
         outline: outerBorderOutline,
-        borderWidth: outerBorderWidth,
-        borderColor: outerBorderColor,
-        borderRadius: outerBorderRadius,
+        ...applyOuterBorder({
+          outerBorderColor,
+          outerBorderWidth,
+          outerBorderGap,
+          borderRadius
+        }),
         // Stops focus ring stretching horizontally if parent has display: block
         // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
         display: 'inline-flex'
@@ -104,11 +105,12 @@ const LinkBase = ({
     accessibilityRole,
     href,
     onPress: linkProps.handleHref({ href, onPress }),
-    ...hrefAttrsProp.spread(hrefAttrs),
+    hrefAttrs,
     ...rest
   })
 
-  const resolveTokens = (pressState) => resolvePressableTokens(tokens, pressState, { iconPosition })
+  const resolveLinkTokens = (pressState) =>
+    resolvePressableTokens(tokens, pressState, { iconPosition })
 
   // On web, this makes focus rings wrap only the link, not the entire block
   const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft
@@ -117,14 +119,14 @@ const LinkBase = ({
     <InlinePressable
       {...linkPropSet}
       style={(linkState) => {
-        const themeTokens = resolveTokens(linkState)
+        const themeTokens = resolveLinkTokens(linkState)
         const outerBorderStyles = selectOuterBorderStyles(themeTokens)
         const hasIcon = Boolean(icon || themeTokens.icon)
         return [outerBorderStyles, blockLeftStyle, hasIcon && staticStyles.rowContainer]
       }}
     >
       {(linkState) => {
-        const themeTokens = resolveTokens(linkState)
+        const themeTokens = resolveLinkTokens(linkState)
         const textStyles = selectTextStyles(themeTokens)
         const iconTokens = selectIconTokens(themeTokens)
 
@@ -170,7 +172,7 @@ LinkBase.propTypes = {
   iconPosition: PropTypes.oneOf(['left', 'right']),
   /**
    * On Web if href is passed, React Native Web maps this object's props to
-   * `rel`, `target` and (>= RNW 0.15.0) `download` attrs.
+   * `rel`, `target` and `download` attrs.
    */
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
 }

package/src/Modal/Modal.jsx

@@ -0,0 +1,185 @@
+import React from 'react'
+import {
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  Modal as NativeModal,
+  Platform
+} from 'react-native'
+
+import PropTypes from 'prop-types'
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
+import { getTokensPropType, useCopy, copyPropTypes, variantProp } from '../utils'
+import { useViewport } from '../ViewportProvider'
+import ButtonBase from '../Button/ButtonBase'
+import dictionary from './dictionary'
+
+const selectContainerStyles = ({
+  containerPaddingLeft,
+  containerPaddingRight,
+  containerPaddingTop,
+  containerPaddingBottom,
+  maxWidth,
+  height
+}) => ({
+  height,
+  maxWidth,
+  paddingLeft: containerPaddingLeft,
+  paddingRight: containerPaddingRight,
+  paddingTop: containerPaddingTop,
+  paddingBottom: containerPaddingBottom
+})
+
+const selectModalStyles = ({
+  backgroundColor,
+  borderRadius,
+  height,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom,
+  shadow
+}) => ({
+  backgroundColor,
+  borderRadius,
+  height,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom,
+  ...applyShadowToken(shadow)
+})
+
+const selectBackdropStyles = ({ backdropColor, backdropOpacity }) => ({
+  backgroundColor: backdropColor,
+  opacity: backdropOpacity
+})
+
+const selectCloseButtonContainerStyles = ({ paddingRight, paddingTop }) => ({
+  paddingRight,
+  paddingTop
+})
+
+const selectCloseIconProps = ({ closeIconSize, closeIconColor }) => ({
+  size: closeIconSize,
+  color: closeIconColor
+})
+
+/**
+ * A modal window is a secondary window that opens on top of the main one.
+ * Users have to interact with it before they can carry out their task and return to the main window.
+ * Use to reveal additional information to a user after they have performed an explicit interaction.
+ * They are a strongly discouraged pattern; it's preferred to have all relevant information within a page,
+ * and irrelevant information either linked externally or omitted.
+ *
+ * - Must only appear after a customer interaction, not on page load or any other circumstance
+ * - Open a modal based on explicit customer action e.g. clicking on a button/link/form field
+ * - Only one modal should be "current" at any time
+ * - Read [WebAIM's documentation](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) to create accessible modals
+ * - Don’t use modals to reinforce or repeat information already available in the parent page or view
+ * - Don’t use modals consecutively
+ */
+const Modal = ({ children, isOpen, onClose, maxWidth, tokens, variant, copy }) => {
+  const viewport = useViewport()
+  const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
+
+  const { closeIcon: CloseIconComponent } = themeTokens
+
+  const getCopy = useCopy({ dictionary, copy })
+  const closeLabel = getCopy('closeButton')
+
+  const handleClose = () => {
+    if (typeof onClose === 'function') onClose()
+  }
+
+  const handleKeyUp = (event) => {
+    if (event.key === 'Escape') onClose()
+  }
+
+  if (!isOpen) {
+    return null
+  }
+
+  // TODO: replace the close button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
+  return (
+    <NativeModal transparent>
+      <View style={[staticStyles.positioningContainer]}>
+        <View
+          style={[staticStyles.sizingContainer, selectContainerStyles(themeTokens)]}
+          pointerEvents="box-none" // don't capture backdrop press events
+        >
+          <View style={[staticStyles.modal, selectModalStyles(themeTokens)]} onKeyUp={handleKeyUp}>
+            <View
+              style={[
+                staticStyles.closeButtonContainer,
+                selectCloseButtonContainerStyles(themeTokens)
+              ]}
+            >
+              <ButtonBase
+                onPress={handleClose}
+                accessibilityRole="button"
+                accessibilityLabel={closeLabel}
+              >
+                {
+                  // TODO: add close button interactive states after IconButton is done
+                  () => <CloseIconComponent {...selectCloseIconProps(themeTokens)} />
+                }
+              </ButtonBase>
+            </View>
+            {children}
+          </View>
+        </View>
+        {/* when a modal becomes open its first focusable element is being automatically focused */}
+        {/* and we prefer the close button over backdrop */}
+        <TouchableWithoutFeedback onPress={handleClose}>
+          <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
+        </TouchableWithoutFeedback>
+      </View>
+    </NativeModal>
+  )
+}
+
+Modal.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  copy: copyPropTypes,
+  isOpen: PropTypes.bool,
+  onClose: PropTypes.func,
+  maxWidth: PropTypes.bool,
+  tokens: getTokensPropType('Modal'),
+  variant: variantProp.propType
+}
+
+export default Modal
+
+const staticStyles = StyleSheet.create({
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+    ...Platform.select({
+      web: {
+        cursor: 'pointer'
+      }
+    })
+  },
+  positioningContainer: {
+    flexBasis: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  sizingContainer: {
+    maxHeight: '100%', // so that the container can expand up to the full viewport height
+    width: '100%' // ensure that the modal actually expands to the set maxWidth
+  },
+  modal: {
+    maxHeight: '100%' // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
+  },
+  closeButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0
+  }
+})

package/src/Modal/dictionary.js

@@ -0,0 +1,9 @@
+export default {
+  en: {
+    // English text from TDS Community `Modal`
+    closeButton: 'Close'
+  },
+  fr: {
+    closeButton: 'Fermer'
+  }
+}

package/src/Modal/index.js

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

package/src/Notification/Notification.jsx

@@ -0,0 +1,149 @@
+import React, { 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 = ({ children, system, dismissible, copy = 'en', tokens, variant }) => {
+  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 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.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
+  system: PropTypes.bool,
+  dismissible: PropTypes.bool,
+  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