@telus-uds/components-base 1.16.0 → 1.17.0

package/src/QuickLinks/QuickLinks.jsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import { useThemeTokens } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
+import { getTokensPropType, variantProp } from '../utils'
+
+import List from '../List'
+import StackWrap from '../StackView/StackWrap'
+import QuickLinksCard from './QuickLinksCard'
+
+/**
+ * QuickLinks renders a list of interactive items. How it renders these items depends on theme options:
+ *  - If the theme returns `list` token as true, it renders an ordered list based on List
+ *  - If the theme returns `button` token as true and `list` as false, it renders a wrapping horizontal bar of buttons
+ *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
+ */
+const QuickLinks = forwardRef(
+  ({ tokens, variant, listTokens, cardTokens, children, tag = 'ul', ...rest }, ref) => {
+    const viewport = useViewport()
+    const { dividers, list, card, stackSpace, stackGap, stackJustify } = useThemeTokens(
+      'QuickLinks',
+      tokens,
+      variant,
+      {
+        viewport
+      }
+    )
+
+    const content = (list && (
+      <List ref={ref} tokens={listTokens} showDivider={dividers} tag={tag} {...rest}>
+        {children}
+      </List>
+    )) || (
+      <StackWrap
+        space={stackSpace}
+        gap={stackGap}
+        tokens={{ justifyContent: stackJustify }}
+        tag={tag}
+        {...rest}
+      >
+        {children}
+      </StackWrap>
+    )
+
+    return card ? <QuickLinksCard tokens={cardTokens}>{content}</QuickLinksCard> : content
+  }
+)
+
+QuickLinks.displayName = 'QuickLinks'
+
+QuickLinks.propTypes = {
+  tokens: getTokensPropType('QuickLinks'),
+  cardTokens: getTokensPropType('Card'),
+  listTokens: getTokensPropType('QuickLinksList'),
+  tag: PropTypes.string,
+  variant: variantProp.propType,
+  children: PropTypes.node
+}
+
+export default QuickLinks

package/src/QuickLinks/QuickLinksCard.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useThemeTokens } from '../ThemeProvider'
+import { getTokensPropType, variantProp } from '../utils'
+import CardBase from '../Card/CardBase'
+
+/**
+ * Private subcomponent for use within QuickLinks.
+ *
+ * Restyled Card with identical behaviour to Card, but themed according to the
+ * QuickLinksCard theme rather than the Card theme.
+ */
+const QuickLinksList = ({ tokens, variant, children }) => {
+  const themeTokens = useThemeTokens('QuickLinksCard', tokens, variant)
+
+  return <CardBase tokens={themeTokens}>{children}</CardBase>
+}
+
+QuickLinksList.propTypes = {
+  tokens: getTokensPropType('QuickLinksCard'),
+  variant: variantProp.propType,
+  children: PropTypes.node
+}
+
+export default QuickLinksList

package/src/QuickLinks/QuickLinksItem.jsx

@@ -0,0 +1,46 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import { getTokensPropType, variantProp, withLinkRouter } from '../utils'
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
+
+import PressableListItemBase from '../List/PressableListItemBase'
+import ButtonBase from '../Button/ButtonBase'
+
+/**
+ * Public component exported as QuickLinks.Item, for use as children of QuickLinks.
+ *
+ * Receives props injected by QuickLinks and renders the appropriate child component.
+ */
+const QuickLinksItem = forwardRef(({ tokens, variant, children, ...rest }, ref) => {
+  const viewport = useViewport()
+  const { list } = useThemeTokens('QuickLinks', tokens, variant, { viewport })
+
+  const themeName = list ? 'QuickLinksList' : 'QuickLinksButton'
+
+  const getTokens = useThemeTokensCallback(themeName, tokens, variant)
+
+  return list ? (
+    <PressableListItemBase ref={ref} tokens={getTokens} {...rest}>
+      {children}
+    </PressableListItemBase>
+  ) : (
+    <ButtonBase ref={ref} tokens={getTokens} {...rest}>
+      {children}
+    </ButtonBase>
+  )
+})
+
+QuickLinksItem.displayName = 'QuickLinksItem'
+
+QuickLinksItem.propTypes = {
+  ...withLinkRouter.propTypes,
+  ...PressableListItemBase.propTypes,
+  ...ButtonBase.propTypes,
+  tokens: getTokensPropType('QuickLinksList', 'QuickLinksButton'),
+  variant: variantProp.propType,
+  children: PropTypes.node
+}
+
+export default withLinkRouter(QuickLinksItem)

package/src/QuickLinks/index.js

@@ -0,0 +1,6 @@
+import QuickLinks from './QuickLinks'
+import QuickLinksItem from './QuickLinksItem'
+
+QuickLinks.Item = QuickLinksItem
+
+export default QuickLinks

package/src/Timeline/Timeline.jsx

@@ -0,0 +1,148 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+import { View } from 'react-native'
+
+import { useThemeTokens } from '../ThemeProvider'
+import {
+  getTokensPropType,
+  variantProp,
+  a11yProps,
+  viewProps,
+  selectSystemProps,
+  getA11yPropsFromHtmlTag,
+  layoutTags
+} from '../utils'
+import { useViewport } from '../ViewportProvider'
+
+const selectDotStyles = ({ dotWidth, timelineColor, dotBorderWidth, dotColor }) => ({
+  width: dotWidth,
+  height: dotWidth,
+  borderRadius: dotWidth / 2,
+  backgroundColor: dotColor,
+  borderWidth: dotBorderWidth,
+  borderColor: timelineColor
+})
+
+const selectConnectorStyles = ({ timelineColor, connectorHeight, connectorWidth }) => ({
+  width: connectorWidth,
+  height: connectorHeight,
+  backgroundColor: timelineColor
+})
+
+const selectTimelineContainerStyle = ({ timelineContainerDirection }) => ({
+  flexDirection: timelineContainerDirection
+})
+
+const selectLineItemStyles = ({
+  lineItemAlign,
+  lineItemDirection,
+  lineItemMarginBottom,
+  lineItemMarginRight
+}) => ({
+  alignItems: lineItemAlign,
+  flexDirection: lineItemDirection,
+  marginBottom: lineItemMarginBottom,
+  marginRight: lineItemMarginRight,
+  overflow: 'hidden'
+})
+
+const selectLineItemContainer = ({ lineItemContainerDirection, lineContainerFlexSize }) => ({
+  flexDirection: lineItemContainerDirection,
+  flex: lineContainerFlexSize
+})
+
+const selectItemContentStyles = (
+  { itemContentFlexSize, itemContentMarginBottom, itemContentMarginRight },
+  isLastChild
+) => {
+  return {
+    flex: itemContentFlexSize,
+    marginBottom: !isLastChild && itemContentMarginBottom,
+    marginRight: !isLastChild && itemContentMarginRight
+  }
+}
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+/**
+ * Timeline is a component that displays either a horizontal or vertical list of the
+ * children components passed by props
+ *
+ * ## Component API
+ *
+ * - `horizontal` In order to display the Component list horizontally
+ *
+ *
+ * ## A11y guidelines
+ * Timeline link supports all the common a11y props.
+ */
+const Timeline = forwardRef(
+  (
+    { tokens, variant = {}, children, accessibilityLabel, tag = 'ul', childrenTag = 'li', ...rest },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('Timeline', tokens, variant, { viewport })
+
+    const containerProps = {
+      ...selectProps(rest),
+      ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole || 'list'),
+      accessibilityLabel
+    }
+
+    return (
+      <View {...containerProps} ref={ref} style={selectTimelineContainerStyle(themeTokens)}>
+        {children.map((child, index) => {
+          const childrenProps = {
+            ...getA11yPropsFromHtmlTag(childrenTag, child?.props?.accessibilityRole || 'listitem')
+          }
+
+          return (
+            <View
+              style={selectLineItemContainer(themeTokens)}
+              // eslint-disable-next-line react/no-array-index-key
+              key={`timeline-${index}-${child.displayName}`}
+              {...childrenProps}
+            >
+              <View style={selectLineItemStyles(themeTokens)}>
+                <View style={selectDotStyles(themeTokens)} />
+                <View style={selectConnectorStyles(themeTokens)} />
+              </View>
+              <View style={selectItemContentStyles(themeTokens, index + 1 === children.length)}>
+                {child}
+              </View>
+            </View>
+          )
+        })}
+      </View>
+    )
+  }
+)
+
+Timeline.displayName = 'Timeline'
+
+Timeline.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Timeline'),
+  variant: variantProp.propType,
+  /**
+   * A list of components that will be rendered either horizontally or vertically
+   */
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  /**
+   * A required accessibility label that needs to be passed to be used on List
+   * which is applied as normal for a React Native accessibilityLabel prop.
+   */
+  accessibilityLabel: PropTypes.string.isRequired,
+  /**
+   * Sets the HTML tag of the outer container and the children. By default `'li'` for the children
+   * and `'ul'` for the container
+   *
+   * If either `tag` or `childrenTag` is overridden, the other should be too, to avoid producing invalid HTML.
+   *
+   */
+  tag: PropTypes.oneOf(layoutTags),
+  childrenTag: PropTypes.oneOf(layoutTags)
+}
+
+export default Timeline

package/src/Timeline/index.js

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

package/src/index.js

@@ -24,6 +24,7 @@ export { default as Modal } from './Modal'
 export { default as Notification } from './Notification'
 export { default as Pagination } from './Pagination'
 export { default as Progress } from './Progress'
+export { default as QuickLinks } from './QuickLinks'
 export { default as Radio } from './Radio'
 export * from './Radio'
 export { default as RadioCard } from './RadioCard'
@@ -40,6 +41,7 @@ export { default as StepTracker } from './StepTracker'
 export { default as Tabs } from './Tabs'
 export { default as Tags } from './Tags'
 export * from './TextInput'
+export { default as Timeline } from './Timeline'
 export * from './ToggleSwitch'
 export { default as Tooltip } from './Tooltip'
 export { default as TooltipButton } from './TooltipButton'
@@ -60,3 +62,4 @@ export {
 } from './ThemeProvider'
 
 export * from './utils'
+export { Portal } from '@gorhom/portal'