@telus-uds/components-base 1.15.0 → 1.17.0

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/ToggleSwitch/ToggleSwitch.jsx

@@ -26,7 +26,9 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const selectButtonTokens = (tokens) =>
+// We need to drop the icon before passing it to the `ButtonBase`, because it's
+// being handled separately in this case
+const selectButtonTokens = ({ icon: _, ...tokens }) =>
   selectTokens('Button', {
     ...tokens,
     // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
@@ -215,8 +217,6 @@ ToggleSwitch.propTypes = {
 
 const staticStyles = StyleSheet.create({
   track: {
-    flexGrow: 1,
-    alignSelf: 'stretch',
     flexDirection: 'row'
   },
   switch: {

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'

package/src/utils/props/a11yProps.js

@@ -40,75 +40,68 @@ const nativeA11yPropTypes = {
   onAccessibilityTap: PropTypes.func
 }
 
-const a11yPropTypes = Platform.select({
+const a11yPropTypes = {
+  ...nativeA11yPropTypes,
   // React Native Web adds many a11y props that alias aria-* attributes
   // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
-  web: {
-    ...nativeA11yPropTypes,
-    accessibilityActiveDescendant: PropTypes.string,
-    accessibilityAtomic: PropTypes.bool,
-    accessibilityAutoComplete: PropTypes.string,
-    accessibilityBusy: PropTypes.bool,
-    accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
-    accessibilityColumnCount: PropTypes.number,
-    accessibilityColumnIndex: PropTypes.number,
-    accessibilityColumnSpan: PropTypes.number,
-    accessibilityControls: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string)
-    ]),
-    accessibilityCurrent: PropTypes.oneOf([
-      true,
-      false,
-      'page',
-      'step',
-      'location',
-      'date',
-      'time'
-    ]),
-    accessibilityDescribedBy: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string)
-    ]),
-    accessibilityDetails: PropTypes.string,
-    accessibilityDisabled: PropTypes.bool,
-    accessibilityErrorMessage: PropTypes.string,
-    accessibilityExpanded: PropTypes.bool,
-    accessibilityFlowTo: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string)
-    ]),
-    accessibilityHasPopup: PropTypes.string,
-    accessibilityHidden: PropTypes.bool,
-    accessibilityInvalid: PropTypes.bool,
-    accessibilityKeyShortcuts: PropTypes.string,
-    accessibilityLabelledBy: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string)
-    ]),
-    accessibilityLevel: PropTypes.number,
-    accessibilityModal: PropTypes.bool,
-    accessibilityMultiline: PropTypes.bool,
-    accessibilityMultiSelectable: PropTypes.bool,
-    accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
-    accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    accessibilityPlaceholder: PropTypes.string,
-    accessibilityPosInSet: PropTypes.number,
-    accessibilityPressed: PropTypes.bool,
-    accessibilityReadOnly: PropTypes.bool,
-    accessibilityRequired: PropTypes.bool,
-    accessibilityRoleDescription: PropTypes.string,
-    accessibilityRowCount: PropTypes.number,
-    accessibilityRowIndex: PropTypes.number,
-    accessibilityRowSpan: PropTypes.number,
-    accessibilitySelected: PropTypes.bool,
-    accessibilitySetSize: PropTypes.number,
-    accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
-    accessibilityValueMax: PropTypes.number,
-    accessibilityValueMin: PropTypes.number,
-    accessibilityValueNow: PropTypes.number,
-    accessibilityValueText: PropTypes.string
-  },
+  accessibilityActiveDescendant: PropTypes.string,
+  accessibilityAtomic: PropTypes.bool,
+  accessibilityAutoComplete: PropTypes.string,
+  accessibilityBusy: PropTypes.bool,
+  accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
+  accessibilityColumnCount: PropTypes.number,
+  accessibilityColumnIndex: PropTypes.number,
+  accessibilityColumnSpan: PropTypes.number,
+  accessibilityControls: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+  accessibilityDescribedBy: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  accessibilityDetails: PropTypes.string,
+  accessibilityDisabled: PropTypes.bool,
+  accessibilityErrorMessage: PropTypes.string,
+  accessibilityExpanded: PropTypes.bool,
+  accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityHasPopup: PropTypes.string,
+  accessibilityHidden: PropTypes.bool,
+  accessibilityInvalid: PropTypes.bool,
+  accessibilityKeyShortcuts: PropTypes.string,
+  accessibilityLabelledBy: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  accessibilityLevel: PropTypes.number,
+  accessibilityModal: PropTypes.bool,
+  accessibilityMultiline: PropTypes.bool,
+  accessibilityMultiSelectable: PropTypes.bool,
+  accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  accessibilityPlaceholder: PropTypes.string,
+  accessibilityPosInSet: PropTypes.number,
+  accessibilityPressed: PropTypes.bool,
+  accessibilityReadOnly: PropTypes.bool,
+  accessibilityRequired: PropTypes.bool,
+  accessibilityRoleDescription: PropTypes.string,
+  accessibilityRowCount: PropTypes.number,
+  accessibilityRowIndex: PropTypes.number,
+  accessibilityRowSpan: PropTypes.number,
+  accessibilitySelected: PropTypes.bool,
+  accessibilitySetSize: PropTypes.number,
+  accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
+  accessibilityValueMax: PropTypes.number,
+  accessibilityValueMin: PropTypes.number,
+  accessibilityValueNow: PropTypes.number,
+  accessibilityValueText: PropTypes.string
+}
+
+const a11yPropTypesByPlatform = Platform.select({
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  web: a11yPropTypes,
   // Ignore web-only props in native builds
   default: nativeA11yPropTypes
 })
@@ -214,7 +207,7 @@ export default {
    */
   select: getPropSelector(
     // Allow all React Native accessibility props
-    a11yPropTypes,
+    a11yPropTypesByPlatform,
     // Allow any `aria-*` attribute on web; ignore them on native
     Platform.OS === 'web' && /^aria-/,
     // For the props added and deprecated in React Native Web 0.18, convert them to