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

package/src/List/List.jsx

@@ -0,0 +1,48 @@
+import React, { cloneElement, forwardRef, Children } from 'react'
+import { View, Platform } from 'react-native'
+import PropTypes from 'prop-types'
+import { getTokensPropType, variantProp, componentPropType } from '../utils'
+import { a11yProps } from '../utils/propTypes'
+import ListItem from './ListItem'
+
+/**
+ * A Unordered List component has a child a ListItem that
+ * allows icon, dividers and customized typography
+ */
+const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, ref) => {
+  const accessibilityRole = Platform.select({ web: 'list', default: 'none' })
+  const a11y = a11yProps.select(rest)
+  const items = Children.map(children, (child, index) => {
+    if (child.type.name === ListItem.name) {
+      return cloneElement(child, {
+        showDivider,
+        isLastItem: index + 1 === Children.count(children),
+        tokens,
+        variant
+      })
+    }
+    return child
+  })
+
+  return (
+    <View ref={ref} accessibilityRole={accessibilityRole} {...a11y}>
+      {items}
+    </View>
+  )
+})
+List.displayName = 'List'
+
+List.Item = ListItem
+
+List.propTypes = {
+  ...a11yProps.types,
+  tokens: getTokensPropType('List'),
+  variant: variantProp.propType,
+  children: componentPropType('ListItem'),
+  /**
+   * In case it is not the last item allow display divider
+   */
+  showDivider: PropTypes.bool
+}
+
+export default List

package/src/List/ListItem.jsx

@@ -0,0 +1,182 @@
+import React, { forwardRef } from 'react'
+import { View, Platform, Text, StyleSheet } from 'react-native'
+import PropTypes from 'prop-types'
+import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
+import { getTokensPropType, variantProp } from '../utils'
+
+const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor }) => ({
+  width: itemBulletWidth,
+  height: itemBulletHeight,
+  borderRadius: itemBulletHeight / 2,
+  backgroundColor: itemBulletColor
+})
+
+const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
+  width: itemBulletContainerWidth,
+  alignItems: itemBulletContainerAlign,
+  justifyContent: itemBulletContainerAlign
+})
+
+const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
+  size: itemIconSize,
+  color: itemIconColor
+})
+
+const selectSideItemContainerStyles = ({ listGutter }) => ({
+  marginRight: listGutter
+})
+
+const selectItemStyles = ({ itemFontWeight, itemFontSize, itemLineHeight, itemFontName }) =>
+  applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    lineHeight: itemLineHeight,
+    fontName: itemFontName
+  })
+
+const selectItemBlockStyles = ({ interItemMargin }) => ({
+  marginBottom: interItemMargin
+})
+
+const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDivider }) => ({
+  borderBottomWidth: dividerSize,
+  borderColor: dividerColor,
+  marginBottom: interItemMarginWithDivider,
+  paddingBottom: interItemMarginWithDivider
+})
+
+/**
+ * ListItem is responsible for rendering icon or a bullet as side item
+ */
+const ListItem = forwardRef(
+  ({ tokens, variant, icon, iconColor, iconSize, showDivider, children, isLastItem }, ref) => {
+    const themeTokens = useThemeTokens('List', tokens, variant)
+
+    const itemStyles = selectItemStyles(themeTokens)
+    const itemBlockStyles = selectItemBlockStyles(themeTokens)
+    const dividerStyles = selectDividerStyles(themeTokens)
+    const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
+    const itemBulletStyles = selectBulletStyles(themeTokens)
+    const iconTokens = selectItemIconTokens(themeTokens)
+    const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
+    const accessibilityRole = Platform.select({ web: 'listitem', default: 'item' })
+
+    const areChildrenStrings = () => {
+      if (Array.isArray(children)) {
+        return children.every((child) => typeof child === 'string')
+      }
+
+      return typeof children === 'string'
+    }
+
+    const renderItem = () => {
+      if (areChildrenStrings()) {
+        return <Text style={itemStyles}>{children}</Text>
+      }
+
+      return <View style={staticStyles.wrap}>{children}</View>
+    }
+
+    /**
+     * Function responsible returning styling, in case the item is the last shouldn't
+     * add extra margin on the bottom, if "showDivider" is true it should add a divider
+     * and custom margin and padding, otherwise just adds a margin to the bottom
+     */
+    const getContainerStyle = () => {
+      if (isLastItem) {
+        return undefined
+      }
+
+      if (showDivider) {
+        return dividerStyles
+      }
+
+      return itemBlockStyles
+    }
+
+    /**
+     * Renders item bullet or Icon in case it's defined
+     * in case children are string the icon is centered otherwise
+     * it will align itself at start of the container
+     */
+    const renderMarker = () => {
+      const IconComponent = icon || <></>
+
+      if (icon) {
+        return (
+          <View
+            style={[
+              sideItemContainerStyles,
+              areChildrenStrings() ? staticStyles.centeredIcons : undefined
+            ]}
+          >
+            <IconComponent
+              size={iconSize || iconTokens.size}
+              color={iconColor || iconTokens.color}
+            />
+          </View>
+        )
+      }
+
+      return (
+        <View style={[sideItemContainerStyles, itemBulletContainerStyles]}>
+          <View style={itemBulletStyles} testID="unordered-item-bullet" />
+        </View>
+      )
+    }
+
+    return (
+      <View
+        ref={ref}
+        style={[staticStyles.itemContainer, getContainerStyle()]}
+        accessibilityRole={accessibilityRole}
+      >
+        {renderMarker()}
+        {renderItem()}
+      </View>
+    )
+  }
+)
+ListItem.displayName = 'ListItem'
+
+const staticStyles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row'
+  },
+  centeredIcons: {
+    justifyContent: 'center'
+  },
+  wrap: {
+    flex: 1
+  }
+})
+
+ListItem.propTypes = {
+  tokens: getTokensPropType('List'),
+  variant: variantProp.propType,
+  children: PropTypes.node.isRequired,
+  /**
+   * Renders side item icon
+   */
+  icon: PropTypes.func,
+  /**
+   * Will set display icon color
+   */
+  iconColor: PropTypes.string,
+  /**
+   * Allow the user define the icon size if not defined the theme's file
+   */
+  iconSize: PropTypes.number,
+  /**
+   * @ignore
+   * Defined by parent if it's last item on the list
+   */
+  isLastItem: PropTypes.bool,
+  /**
+   * @ignore
+   * In case it is not the last item allow display divider
+   */
+  showDivider: PropTypes.bool
+}
+
+export default ListItem

package/src/List/index.js

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

package/src/Modal/Modal.jsx

@@ -0,0 +1,190 @@
+import React, { forwardRef } 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 = forwardRef(({ children, isOpen, onClose, maxWidth, tokens, variant, copy }, ref) => {
+  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
+            ref={ref}
+            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.displayName = 'Modal'
+
+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,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