@telus-uds/components-base 1.70.0 → 1.72.0

package/src/OrderedList/ItemBase.jsx

@@ -0,0 +1,31 @@
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+
+const Item = forwardRef(({ children, style, ...rest }, ref) => (
+  <View accessibilityRole="listitem" ref={ref} style={[staticStyles.container, style]} {...rest}>
+    {children}
+  </View>
+))
+
+Item.propTypes = {
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Item custom styles
+   */
+  style: PropTypes.object
+}
+
+Item.displayName = 'OrderedListItem'
+
+export default Item
+
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex'
+  }
+})

package/src/OrderedList/OrderedList.jsx

@@ -0,0 +1,61 @@
+import React, { forwardRef, useMemo } from 'react'
+import PropTypes from 'prop-types'
+
+import { getTokensPropType, htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils'
+import OrderedListBase from './OrderedListBase'
+import Item from './Item'
+
+const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+const getChildrenWithParentVariants = (variant, children, start) => {
+  if (variant)
+    return children.map((child, i) => {
+      const existingChildVariants = child.props?.variant ?? {}
+      return {
+        ...child,
+        props: {
+          ...child.props,
+          index: start + i,
+          isLastChild: i === children.length - 1,
+          variant: { ...existingChildVariants, ...variant }
+        }
+      }
+    })
+
+  return children
+}
+
+const OrderedList = forwardRef(({ children, start, variant, ...rest }, ref) => {
+  const childrenWithParentVariants = useMemo(
+    () => getChildrenWithParentVariants(variant, children, start),
+    [children, variant, start]
+  )
+
+  return (
+    <OrderedListBase ref={ref} {...selectProps(rest)}>
+      {childrenWithParentVariants}
+    </OrderedListBase>
+  )
+})
+
+OrderedList.propTypes = {
+  ...selectedSystemPropsTypes,
+  tokens: getTokensPropType('OrderedList'),
+  /**
+   * A list of ordered items wrapped in `OrderedList.Item`.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The position to start the list with.
+   */
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  variant: variantProp.propType
+}
+
+OrderedList.defaultProps = { start: 1, tokens: {}, variant: {} }
+
+OrderedList.displayName = 'OrderedList'
+
+OrderedList.Item = Item
+
+export default OrderedList

package/src/OrderedList/OrderedListBase.jsx

@@ -0,0 +1,33 @@
+/* eslint-disable react-native-a11y/has-valid-accessibility-role */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+
+import ItemBase from './ItemBase'
+
+const OrderedListBase = forwardRef(({ children, ...rest }, ref) => (
+  <View accessibilityRole="list" ref={ref} style={staticStyles.container} {...rest}>
+    {children}
+  </View>
+))
+
+OrderedListBase.propTypes = {
+  /**
+   * A list of ordered items wrapped in `OrderedListBase.Item`.
+   */
+  children: PropTypes.node.isRequired
+}
+
+OrderedListBase.displayName = 'OrderedList'
+
+OrderedListBase.Item = ItemBase
+
+export default OrderedListBase
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    margin: 0,
+    padding: 0
+  }
+})

package/src/OrderedList/index.js

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

package/src/index.js

@@ -11,6 +11,7 @@ export { default as Checkbox } from './Checkbox'
 export * from './Checkbox'
 export { default as CheckboxCard } from './CheckboxCard'
 export { default as CheckboxCardGroup } from './CheckboxCardGroup'
+export { default as ColourToggle } from './ColourToggle'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as Feedback } from './Feedback'
@@ -28,6 +29,7 @@ export { default as List, ListItem, ListBase } from './List'
 export { default as Modal } from './Modal'
 export { default as MultiSelectFilter } from './MultiSelectFilter'
 export { default as Notification } from './Notification'
+export { default as OrderedList } from './OrderedList'
 export { default as Pagination } from './Pagination'
 export { default as Progress } from './Progress'
 export { default as QuickLinks } from './QuickLinks'

package/src/utils/ssr-media-query/create-stylesheet/create-stylesheet-mobile.js

@@ -0,0 +1,41 @@
+import mediaQuery from 'css-mediaquery'
+import { Dimensions } from 'react-native'
+import { isMediaOrPseudo, isMedia } from '../utils/common'
+
+const createStyleSheet = (stylesWithQuery) => {
+  if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
+  let cleanStyles
+  const ids = {}
+  Object.keys(stylesWithQuery).forEach((key) => {
+    if (!stylesWithQuery?.[key]) return
+
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
+    cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery))
+    mediaQueriesAndPseudoClasses.forEach((str) => {
+      if (isMedia(str)) {
+        const mqStr = str.replace('@media', '')
+        const { width, height } = Dimensions.get('window')
+
+        const isMatchingMediaQuery = mediaQuery.match(mqStr, {
+          width,
+          height,
+          orientation: width > height ? 'landscape' : 'portrait',
+          'aspect-ratio': width / height
+        })
+
+        if (isMatchingMediaQuery) {
+          cleanStyles = {
+            ...cleanStyles,
+            [key]: { ...cleanStyles[key], ...stylesWithQuery[key][str] }
+          }
+        }
+      }
+
+      delete cleanStyles[key][str]
+    })
+  })
+
+  return { ids, styles: cleanStyles, fullStyles: stylesWithQuery }
+}
+
+export default createStyleSheet

package/src/utils/ssr-media-query/create-stylesheet/index.android.js

@@ -0,0 +1,3 @@
+import createStyleSheet from './create-stylesheet-mobile'
+
+export default createStyleSheet

package/src/utils/ssr-media-query/create-stylesheet/index.ios.js

@@ -0,0 +1,3 @@
+import createStyleSheet from './create-stylesheet-mobile'
+
+export default createStyleSheet

package/src/utils/ssr-media-query/create-stylesheet/index.js

@@ -0,0 +1,33 @@
+import { addCss } from '../utils/inject'
+import createDeclarationBlock from '../utils/create-declaration-block'
+import hash from '../hash'
+import { isMediaOrPseudo, deepClone, createCssRule } from '../utils/common'
+
+const createStyleSheet = (stylesWithQuery) => {
+  if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
+  let cleanStyles
+  let ids = {}
+  Object.keys(stylesWithQuery).forEach((key) => {
+    if (!stylesWithQuery?.[key]) return
+
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
+    cleanStyles = deepClone(stylesWithQuery)
+    mediaQueriesAndPseudoClasses.forEach((query) => {
+      const css = createDeclarationBlock(stylesWithQuery[key][query])
+      const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`
+      const rule = createCssRule(query, stringHash, css)
+
+      addCss(`${stringHash}`, rule)
+      delete cleanStyles[key][query]
+
+      ids = {
+        ...ids,
+        [key]: `${ids?.[key] ? `${ids[key]} ` : ''}${stringHash}`
+      }
+    })
+  })
+
+  return { ids, styles: cleanStyles, fullStyles: stylesWithQuery }
+}
+
+export default createStyleSheet

package/src/utils/ssr-media-query/utils/inject.js

@@ -2,7 +2,17 @@ import React from 'react'
 import { Platform } from 'react-native'
 
 const rules = {}
+let styleSheet
 
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  styleSheet = (() => {
+    const style = document.createElement('style')
+    style.id = 'RNMQCSS'
+    style.appendChild(document.createTextNode(''))
+    document.head.appendChild(style)
+    return style.sheet
+  })()
+}
 export const hasCss = (id, text) => {
   return !!rules[id] && !!rules[id].text?.includes?.(text)
 }
@@ -11,6 +21,9 @@ export const addCss = (id, text) => {
   if (!hasCss(id, text)) {
     rules[id] = rules?.[id] || {}
     rules[id].text = (rules[id]?.text || '') + text
+    if (styleSheet) {
+      styleSheet.insertRule(text, Object.keys(rules).length - 1)
+    }
   }
 }
 

package/types/Badge.d.ts

@@ -0,0 +1,28 @@
+export interface BadgeProps {
+  text: string
+  borderColor?: string
+  textColor?: string
+}
+
+type BadgeVariants = {
+  alternative?: boolean
+  inverse?: boolean
+  outline?: boolean
+  purpose?: 'offer' | 'editorial'
+}
+
+export type BadgeTokens = {
+  backgroundColor?: string
+  borderColor?: string
+  borderRadius?: number
+  borderWidth?: number
+  color?: string
+  fontName?: string
+  fontSize?: number
+  fontWeight?: number
+  gradient?: string
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingRight?: number
+  paddingTop?: number
+}

package/types/Box.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode, ReactElement } from 'react'
+import { ScrollViewProps } from 'react-native'
+import { ResponsiveSpacing, SemanticTag } from './Common'
+
+type BoxVariants = {
+  background?:
+    | 'lightest'
+    | 'lighter'
+    | 'light'
+    | 'dark'
+    | 'darker'
+    | 'darkest'
+    | 'critical'
+    | 'danger'
+    | 'warning'
+    | 'positive'
+    | 'black'
+    | 'featurePrimary'
+    | 'featureSecondary'
+    | 'featureNeutral'
+    | 'featureBrand'
+}
+
+type BoxTokens = {
+  backgroundColor?: string
+  gradient?: string
+  borderWidth?: number
+  borderColor?: string
+  borderTopLeftRadius?: number
+  borderTopRightRadius?: number
+  borderBottomLeftRadius?: number
+  borderBottomRightRadius?: number
+}
+
+export interface BoxProps {
+  children: ReactNode | ReactElement
+  horizontal?: ResponsiveSpacing | number
+  vertical?: ResponsiveSpacing | number
+  top?: ResponsiveSpacing | number
+  bottom?: ResponsiveSpacing | number
+  left?: ResponsiveSpacing | number
+  right?: ResponsiveSpacing | number
+  variant?: BoxVariants
+  tokens?: BoxTokens
+  space?: ResponsiveSpacing | number
+  flex?: number
+  scroll?: boolean | ScrollViewProps
+  tag?: SemanticTag
+  testID?: string
+  accessibilityLabel?: string
+  accessible?: boolean
+}

package/types/ChevronLink.d.ts

@@ -0,0 +1,47 @@
+import { IconProps, IconPositionLeftRight } from './Icon'
+import { LinkAndTextButtonVariants } from './Link'
+
+type ChevronLinkTokens = {
+  fontSize?: number
+  color?: string
+  outerBorderColor?: string
+  leftIcon?: IconProps
+  rightIcon?: IconProps
+  iconDisplace?: number
+  iconSize?: number
+  iconSpace?: number
+  textLine?: string
+  textLineStyle?: string
+  outerBorderWidth?: number
+  outerBorderOutline?: string
+  borderRadius?: number
+  blockFontName?: string
+  blockFontWeight?: number
+  blockFontSize?: number
+  blockLineHeight?: number
+  icon?: IconProps
+  iconTranslateX?: number
+  iconTranslateY?: number
+  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
+}
+export interface ChevronLinkProps {
+  testID?: string
+  children?: React.ReactNode
+  onPress?: () => void
+  onPressIn?: () => void
+  onPressOut?: () => void
+  disabled?: boolean
+  href?: string
+  hrefAttrs?: HrefProps
+  accessibilityRole?: string
+  accessibilityLabel?: string
+  tokens?: ChevronLinkTokens
+  direction?: IconPositionLeftRight
+  variant?: LinkAndTextButtonVariants
+}
+
+export interface HrefProps {
+  download: string
+  rel: string
+  target: string
+}

package/types/Common.d.ts

@@ -0,0 +1,106 @@
+import React from 'react'
+
+export type TextTransform = {
+  CAPITALIZE: 'capitalize'
+  LOWERCASE: 'lowercase'
+  UPPERCASE: 'uppercase'
+  NONE: 'none'
+}
+
+export type LetterSpacing = {
+  NORMAL: 'normal'
+  LENGTH: number
+}
+
+export type CopyType = {
+  EN: 'en'
+  FR: 'fr'
+}
+
+export type Size = {
+  margin?: number
+  padding?: number
+  height?: number | string
+  width?: number | string
+}
+
+export type Position = 'auto' | 'above' | 'below' | 'right' | 'left'
+
+export type DisplaySize = {
+  LARGE: 'large'
+  MEDIUM: 'medium'
+  SMALL: 'small'
+  MICRO: 'micro'
+}
+
+export enum Sizes {
+  xs = 'xs',
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl'
+}
+
+export type ResponsiveSpacing = {
+  [key in Sizes]?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11
+}
+
+export type Direction = 'column' | 'row' | 'column-reverse' | 'row-reverse'
+
+export type ResponsiveDirection = {
+  [key in Sizes]?: Direction
+}
+
+export type SemanticTag =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'article'
+  | 'aside'
+  | 'blockquote'
+  | 'footer'
+  | 'figure'
+  | 'form'
+  | 'header'
+  | 'ul'
+  | 'li'
+  | 'main'
+  | 'nav'
+  | 'section'
+  | 'label'
+
+type headingType = {
+  H1: 'h1'
+  H2: 'h2'
+  H3: 'h1'
+  H4: 'h2'
+  H5: 'h1'
+  H6: 'h2'
+}
+
+type tagType = {
+  HEADING: headingType
+  BLOCKQUOTE: 'blockquote'
+  CODE: 'code'
+  DEL: 'del'
+  EM: 'em'
+  INS: 'ins'
+  LI: 'li'
+  STRONG: 'strong'
+  LABEL: 'label'
+}
+
+type alignType = {
+  AUTO: 'auto'
+  LEFT: 'left'
+  RIGHT: 'right'
+  CENTER: 'center'
+  JUSTIFY: 'justify'
+}
+
+export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
+
+export type FlexJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'

package/types/Divider.d.ts

@@ -0,0 +1,19 @@
+import { ResponsiveSpacing, Size } from './Common'
+type DividerVariants = {
+  weight?: 'regular' | 'thick'
+  decorative?: boolean
+  inverse?: boolean
+}
+
+export interface DividerProps {
+  testID?: string
+  vertical?: boolean
+  space?: number | ResponsiveSpacing
+  tokens?: DividerTokens
+  variant?: DividerVariants
+}
+
+export interface DividerTokens {
+  width?: Size
+  color?: string
+}

package/types/ExpandCollapse.d.ts

@@ -0,0 +1,65 @@
+import React, { ReactPropTypes } from 'react'
+
+type ExpandCollapseVariants = {
+  compact: boolean
+}
+
+type ExpandCollapseTokens = {
+  borderColor?: string
+  borderWidth?: number
+  borderStyle?: string
+}
+
+type ExpandCollapseControlTokens = {
+  backgroundColor?: string
+  borderBottomLeftRadius?: number | string
+  borderBottomRightRadius?: number | string
+  borderColor?: string
+  borderTopLeftRadius?: number | string
+  borderTopRightRadius?: number | string
+  borderWidth?: number | string
+  icon?: string
+  iconColor?: string
+  iconGap?: number | string
+  iconPaddingTop?: number | string
+  iconPosition?: string
+  iconSize?: number
+  justifyContent?: string
+  paddingBottom?: number | string
+  paddingLeft?: number | string
+  paddingRight?: number | string
+  paddingTop?: number | string
+  textLine?: string
+  verticalAlign?: string
+}
+
+type ExpandFnProps = {
+  openIds: string[]
+  onToggle: (panelId: string) => void
+  resetValues: () => void
+  setValues: (ids: string[]) => void
+  unsetValues: (ids: string[]) => void
+}
+
+export type ExpandCollapseProps = {
+  tokens?: ExpandCollapseTokens
+  children: (expandProps: ExpandFnProps) => React.ReactNode
+  maxOpen?: number
+  open?: string[]
+  onChange?: (open: string[]) => void
+  initialOpen?: string[]
+}
+
+export type ExpandCollapsePanelProps = {
+  variant?: ExpandCollapseVariants
+  tokens?: ExpandCollapseTokens
+  openIds?: string[]
+  panelId: string
+  onToggle?: (panelId: string) => void
+  onPress?: (panelId: string) => void
+  children: React.ReactNode | ((expandProps: ExpandFnProps) => React.ReactNode)
+  control?: React.ReactNode
+  controlTokens?: ExpandCollapseControlTokens
+  controlRef?: React.Ref
+  content?: boolean
+}

package/types/HorizontalScrollButton.d.ts

@@ -0,0 +1,16 @@
+export interface HorizontalScrollButtonTokens {
+  backgroundColor?: string
+  borderColor?: string
+  borderRadius?: number | string
+  borderWidth?: number | string
+  iconColor?: string
+  iconScale?: number | string
+  iconSize?: number | string
+  iconTranslateX?: number
+  iconTranslateY?: number
+  outerBorderColor?: string
+  outerBorderGap?: number | string
+  outerBorderWidth?: number | string
+  padding?: number | string
+  shadow?: string
+}

package/types/Icon.d.ts

@@ -0,0 +1,21 @@
+export interface IconProps {
+  scalesWithText?: boolean
+  variant?: IconVariant
+  tokens?: IconTokens
+  icon: React.ReactNode
+}
+
+export interface IconTokens {
+  size?: number | string
+  color?: string
+  scale?: number
+  translateX?: number
+  translateY?: number
+}
+
+export type IconVariant = {
+  color?: 'default' | 'brand' | 'subtle' | 'success' | 'warning' | 'danger' | 'inverse'
+  size?: 'micro' | 'small' | 'large' | 'extraLarge'
+}
+
+export type IconPositionLeftRight = 'left' | 'right'

package/types/Link.d.ts

@@ -0,0 +1,48 @@
+import { IconPositionLeftRight, IconProps } from './Icon'
+
+export interface LinkProps {
+  href: string
+  onPress: () => void
+  tokens?: LinkTokens
+  accessibilityRole?: string
+  accessibilityLabel?: string
+  variant?: LinkAndTextButtonVariants
+  iconProps?: IconProps
+  icon?: React.ReactNode
+  iconPosition?: IconPositionLeftRight
+  testID?: string
+  children?: React.ReactNode
+}
+
+export enum LinkSize {
+  micro = 'micro',
+  small = 'small',
+  large = 'large'
+}
+
+export type LinkAndTextButtonVariants = {
+  size?: 'large' | 'small' | 'micro'
+  alternative?: boolean
+  inverse?: boolean
+}
+
+export type LinkTokens = {
+  color?: string
+  textLine?: string
+  textLineStyle?: string
+  outerBorderColor?: string
+  outerBorderWidth?: number
+  outerBorderGap?: number | string
+  outerBorderOutline?: string
+  borderRadius?: number
+  blockFontName?: string
+  blockFontWeight?: number
+  blockFontSize?: number
+  blockLineHeight?: number
+  icon?: string
+  iconSize?: number
+  iconSpace?: number
+  iconTranslateX?: number
+  iconTranslateY?: number
+  alignSelf?: string
+}