@telus-uds/components-base 4.0.0-alpha.2 → 4.0.0-beta.0

package/types/Badge.d.ts

@@ -1,10 +1,17 @@
+import type { ComponentType, ReactNode } from 'react'
+
 export interface BadgeProps {
-  text: string
-  borderColor?: string
-  textColor?: string
+  children?: ReactNode
+  variant?: BadgeVariants
+  tokens?: BadgeTokens
+  pointerEvents?: 'all' | 'none' | 'box-only' | 'box-none'
+  onLayout?: (event: any) => void
+  nativeID?: string
+  testID?: string
+  dataSet?: Record<string, any>
 }
 
-type BadgeVariants = {
+export type BadgeVariants = {
   alternative?: boolean
   inverse?: boolean
   outline?: boolean
@@ -26,3 +33,7 @@ export type BadgeTokens = {
   paddingRight?: number
   paddingTop?: number
 }
+
+declare const Badge: ComponentType<BadgeProps>
+
+export { Badge }

package/types/BaseProvider.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface ThemeMetadata {
+  themeTokensVersion: string
+  name: string
+}
+
+export interface Theme {
+  metadata: ThemeMetadata
+}
+
+export interface ThemeOptions {
+  forceAbsoluteFontSizing?: boolean
+  forceZIndex?: boolean
+  defaultViewport?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+export interface BaseProviderProps {
+  children: ReactNode
+  defaultTheme: Theme
+  themeOptions?: ThemeOptions
+}
+
+declare const BaseProvider: ComponentType<BaseProviderProps>
+
+export { BaseProvider }

package/types/Box.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode, ReactElement } from 'react'
+import type { ComponentType, ReactNode, ReactElement } from 'react'
 import { ScrollViewProps } from 'react-native'
 import { ResponsiveSpacing, SemanticTag } from './Common'
 
-type BoxVariants = {
+export type BoxVariants = {
   background?:
     | 'lightest'
     | 'lighter'
@@ -21,7 +21,7 @@ type BoxVariants = {
     | 'featureBrand'
 }
 
-type BoxTokens = {
+export type BoxTokens = {
   backgroundColor?: string
   gradient?: string
   borderWidth?: number
@@ -49,4 +49,14 @@ export interface BoxProps {
   testID?: string
   accessibilityLabel?: string
   accessible?: boolean
+  customGradient?: (...args: any[]) => ReactNode
+  backgroundImage?: any
+  pointerEvents?: 'all' | 'none' | 'box-only' | 'box-none'
+  onLayout?: (event: any) => void
+  nativeID?: string
+  dataSet?: Record<string, any>
 }
+
+declare const Box: ComponentType<BoxProps>
+
+export { Box }

package/types/Button.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentType, ReactNode } from 'react'
+import { IconProps } from './Icon'
+
+export interface ButtonProps {
+  children: ReactNode | ((state: ButtonPressableState) => ReactNode)
+  onPress?: () => void
+  inactive?: boolean
+  disabled?: boolean
+  heightFull?: boolean
+  iconPosition?: 'left' | 'right'
+  icon?: ComponentType<any>
+  iconProps?: IconProps
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  accessibilityLabel?: string
+  accessibilityRole?: string
+  accessible?: boolean
+  testID?: string
+  dataSet?: Record<string, any>
+  href?: string
+  hrefAttrs?: Record<string, string>
+}
+
+export type ButtonPressableState = {
+  hovered: boolean
+  focused: boolean
+  pressed: boolean
+  inactive: boolean
+  selected: boolean
+  textStyles: Record<string, any>
+}
+
+declare const Button: ComponentType<ButtonProps>
+
+export { Button }

package/types/Card.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface CardProps {
+  children?: ReactNode
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  onPress?: () => void
+  id?: string
+  interactiveCard?: Record<string, any>
+  backgroundImage?: any
+  testID?: string
+  dataSet?: Record<string, any>
+  accessibilityLabel?: string
+  accessibilityRole?: string
+}
+
+declare const Card: ComponentType<CardProps>
+
+export { Card }

package/types/CardGroup.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface CardGroupItem {
+  id: string
+  image?: Record<string, any>
+  dictionary?: Record<string, any>
+  [key: string]: any
+}
+
+export interface CardGroupProps {
+  copy?: 'en' | 'fr'
+  dictionary?: Record<string, any>
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  items?: CardGroupItem[]
+  children?: ReactNode
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const CardGroup: ComponentType<CardGroupProps>
+
+export { CardGroup }

package/types/Carousel.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface CarouselProps {
+  children: ReactNode
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  stepTrackerVariant?: Record<string, string | number | boolean | undefined>
+  progressBarVariant?: Record<string, string | number | boolean | undefined>
+  itemLabel?: string
+  previousNextNavigationPosition?: 'inside' | 'outside' | 'edge'
+  copy?: 'en' | 'fr'
+  testID?: string
+  dataSet?: Record<string, any>
+  accessibilityLabel?: string
+}
+
+export interface CarouselItemProps {
+  children: ReactNode
+}
+
+declare const Carousel: ComponentType<CarouselProps> & {
+  Item: ComponentType<CarouselItemProps>
+}
+
+export { Carousel }

package/types/Checkbox.d.ts

@@ -1,6 +1,7 @@
+import type { ComponentType } from 'react'
 import { StyleProp, ViewStyle, TextStyle } from 'react-native'
 
-type CheckboxTokens = {
+export type CheckboxTokens = {
   containerBackgroundColor?: string
   feedbackMarginBottom?: number
   feedbackMarginTop?: number
@@ -33,7 +34,7 @@ type CheckboxTokens = {
   descriptionFontColor?: string
 }
 
-type CheckboxProps = {
+export type CheckboxProps = {
   checked?: boolean
   defaultChecked?: boolean
   error?: boolean
@@ -50,4 +51,16 @@ type CheckboxProps = {
   style?: StyleProp<ViewStyle>
   labelStyle?: StyleProp<TextStyle>
   containerStyle?: StyleProp<ViewStyle>
+  pointerEvents?: 'all' | 'none' | 'box-only' | 'box-none'
+  onLayout?: (event: any) => void
+  nativeID?: string
+  testID?: string
+  dataSet?: Record<string, any>
+  accessibilityLabel?: string
+  accessibilityRole?: string
+  accessible?: boolean
 }
+
+declare const Checkbox: ComponentType<CheckboxProps>
+
+export { Checkbox }

package/types/CheckboxCard.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface CheckboxCardProps {
+  title?: string
+  children?: ReactNode | ((state: Record<string, any>) => ReactNode)
+  checked?: boolean
+  defaultChecked?: boolean
+  inactive?: boolean
+  id?: string
+  onChange?: (checked: boolean) => void
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+  accessibilityLabel?: string
+}
+
+declare const CheckboxCard: ComponentType<CheckboxCardProps>
+
+export { CheckboxCard }

package/types/CheckboxCardGroup.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react'
+import type { ComponentType } from 'react'
 import { Direction, ResponsiveDirection } from './Common'
 
-type CheckboxCardGroupProps = {
+export type CheckboxCardGroupProps = {
   copy?: 'en' | 'fr'
   variant?: 'fullWidth'
   legend?: string
@@ -15,9 +15,11 @@ type CheckboxCardGroupProps = {
   onChange?: (checkedIds: string[]) => void
   readOnly?: boolean
   inactive?: boolean
+  items?: any[]
+  name?: string
 }
 
-type CheckboxCardGroupTokens = {
+export type CheckboxCardGroupTokens = {
   borderBottomLeftRadius?: number
   borderBottomRightRadius?: number
   borderTopLeftRadius?: number
@@ -30,7 +32,7 @@ type CheckboxCardGroupTokens = {
   space?: number
 }
 
-type checkboxCardTokens = {
+export type CheckboxCardTokens = {
   outerBorderColer?: string
   outerBorderWidth?: number
   outerBorderGap?: number
@@ -70,3 +72,7 @@ type checkboxCardTokens = {
   checkboxSpace?: number
   contentSpace?: number
 }
+
+declare const CheckboxCardGroup: ComponentType<CheckboxCardGroupProps>
+
+export { CheckboxCardGroup }

package/types/ChevronLink.d.ts

@@ -1,7 +1,8 @@
+import type { ComponentType, ReactNode } from 'react'
 import { IconProps, IconPositionLeftRight } from './Icon'
 import { LinkAndTextButtonVariants } from './Link'
 
-type ChevronLinkTokens = {
+export type ChevronLinkTokens = {
   fontSize?: number
   color?: string
   outerBorderColor?: string
@@ -24,9 +25,10 @@ type ChevronLinkTokens = {
   iconTranslateY?: number
   alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
 }
+
 export interface ChevronLinkProps {
   testID?: string
-  children?: React.ReactNode
+  children?: ReactNode
   onPress?: () => void
   onPressIn?: () => void
   onPressOut?: () => void
@@ -38,6 +40,7 @@ export interface ChevronLinkProps {
   tokens?: ChevronLinkTokens
   direction?: IconPositionLeftRight
   variant?: LinkAndTextButtonVariants
+  dataSet?: Record<string, any>
 }
 
 export interface HrefProps {
@@ -45,3 +48,7 @@ export interface HrefProps {
   rel: string
   target: string
 }
+
+declare const ChevronLink: ComponentType<ChevronLinkProps>
+
+export { ChevronLink }

package/types/ColourToggle.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType } from 'react'
+
+export interface ColourToggleProps {
+  id?: string
+  colourHexCode?: string
+  colourName?: string
+  isSelected?: boolean
+  tokens?: Record<string, string | number | boolean | object>
+  onPress?: () => void
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const ColourToggle: ComponentType<ColourToggleProps>
+
+export { ColourToggle }

package/types/Common.d.ts

@@ -72,7 +72,7 @@ export type SemanticTag =
   | 'section'
   | 'label'
 
-type headingType = {
+export type headingType = {
   H1: 'h1'
   H2: 'h2'
   H3: 'h1'
@@ -81,7 +81,7 @@ type headingType = {
   H6: 'h2'
 }
 
-type tagType = {
+export type tagType = {
   HEADING: headingType
   BLOCKQUOTE: 'blockquote'
   CODE: 'code'
@@ -93,7 +93,7 @@ type tagType = {
   LABEL: 'label'
 }
 
-type alignType = {
+export type alignType = {
   AUTO: 'auto'
   LEFT: 'left'
   RIGHT: 'right'
@@ -104,3 +104,7 @@ type alignType = {
 export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
 
 export type FlexJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'
+
+export type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify'
+
+export type Variant = Record<string, string | number | boolean | undefined>

package/types/Divider.d.ts

@@ -1,5 +1,7 @@
+import type { ComponentType } from 'react'
 import { ResponsiveSpacing, Size } from './Common'
-type DividerVariants = {
+
+export type DividerVariants = {
   weight?: 'regular' | 'thick'
   decorative?: boolean
   inverse?: boolean
@@ -11,9 +13,19 @@ export interface DividerProps {
   space?: number | ResponsiveSpacing
   tokens?: DividerTokens
   variant?: DividerVariants
+  accessibilityLabel?: string
+  accessibilityRole?: string
+  pointerEvents?: 'all' | 'none' | 'box-only' | 'box-none'
+  onLayout?: (event: any) => void
+  nativeID?: string
+  dataSet?: Record<string, any>
 }
 
 export interface DividerTokens {
   width?: Size
   color?: string
 }
+
+declare const Divider: ComponentType<DividerProps>
+
+export { Divider }

package/types/DownloadApp.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentType, ElementType } from 'react'
+
+export interface DownloadAppProps {
+  copy?: 'en' | 'fr'
+  dictionary?: Record<string, any>
+  type?: 'android' | 'ios'
+  href?: string
+  onPress?: () => void
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  LinkRouter?: ElementType
+  linkRouterProps?: Record<string, any>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const DownloadApp: ComponentType<DownloadAppProps>
+
+export { DownloadApp }

package/types/ExpandCollapse.d.ts

@@ -1,16 +1,16 @@
-import React from 'react'
+import type { ComponentType, ReactNode, Ref } from 'react'
 
-type ExpandCollapseVariants = {
+export type ExpandCollapseVariants = {
   compact: boolean
 }
 
-type ExpandCollapseTokens = {
+export type ExpandCollapseTokens = {
   borderColor?: string
   borderWidth?: number
   borderStyle?: string
 }
 
-type ExpandCollapseControlTokens = {
+export type ExpandCollapseControlTokens = {
   backgroundColor?: string
   borderBottomLeftRadius?: number | string
   borderBottomRightRadius?: number | string
@@ -33,7 +33,7 @@ type ExpandCollapseControlTokens = {
   verticalAlign?: string
 }
 
-type ExpandFnProps = {
+export type ExpandFnProps = {
   openIds: string[]
   onToggle: (panelId: string) => void
   resetValues: () => void
@@ -43,11 +43,12 @@ type ExpandFnProps = {
 
 export type ExpandCollapseProps = {
   tokens?: ExpandCollapseTokens
-  children: (expandProps: ExpandFnProps) => React.ReactNode
+  children: (expandProps: ExpandFnProps) => ReactNode
   maxOpen?: number
   open?: string[]
   onChange?: (open: string[]) => void
   initialOpen?: string[]
+  dataSet?: Record<string, any>
 }
 
 export type ExpandCollapsePanelProps = {
@@ -57,9 +58,15 @@ export type ExpandCollapsePanelProps = {
   panelId: string
   onToggle?: (panelId: string) => void
   onPress?: (panelId: string) => void
-  children: React.ReactNode | ((expandProps: ExpandFnProps) => React.ReactNode)
-  control?: React.ReactNode
+  children: ReactNode | ((expandProps: ExpandFnProps) => ReactNode)
+  control?: ReactNode
   controlTokens?: ExpandCollapseControlTokens
-  controlRef?: React.Ref
+  controlRef?: Ref<any>
   content?: boolean
 }
+
+declare const ExpandCollapse: ComponentType<ExpandCollapseProps> & {
+  Panel: ComponentType<ExpandCollapsePanelProps>
+}
+
+export { ExpandCollapse }

package/types/ExpandCollapseMini.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface ExpandCollapseMiniProps {
+  expandTitle: string
+  collapseTitle: string
+  onPress?: () => void
+  variant?: Record<string, string | number | boolean | undefined>
+  tokens?: Record<string, string | number | boolean | object>
+  children?: ReactNode
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const ExpandCollapseMini: ComponentType<ExpandCollapseMiniProps>
+
+export { ExpandCollapseMini }

package/types/Feedback.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface FeedbackProps {
+  title?: string
+  children?: string | ReactNode | ((props: Record<string, any>) => ReactNode)
+  validation?: 'error' | 'success'
+  id?: string
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const Feedback: ComponentType<FeedbackProps>
+
+export { Feedback }

package/types/Fieldset.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface FieldsetProps {
+  children?: ReactNode
+  accessibilityRole?: string
+  inactive?: boolean
+  name?: string
+  showBorderStyle?: boolean
+  borderStyle?: Record<string, any>
+  style?: Record<string, any>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const Fieldset: ComponentType<FieldsetProps>
+
+export { Fieldset }

package/types/FileUpload.d.ts

@@ -29,10 +29,16 @@ export interface FileUploadProps {
   fileTypes?: string[]
   allowMultipleFiles?: boolean
   maxFileSize?: number
+  minFileSize?: number
   maxFilesCount?: number
   onUpload?: (files: any) => void
   onDelete?: (file: any) => void
   documentPicker?: Record<string, any>
+  dictionary?: Record<string, any>
+  accessibilityLabel?: string
+  accessibilityRole?: string
+  testID?: string
+  dataSet?: Record<string, any>
 }
 
 declare const FileUpload: ComponentType<FileUploadProps>

package/types/FlexGrid.d.ts

@@ -0,0 +1,57 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface FlexGridRowProps {
+  children: ReactNode
+  verticalAlign?: 'top' | 'middle' | 'bottom'
+  horizontalAlign?: 'left' | 'center' | 'right' | 'around' | 'between'
+  xsReverse?: boolean
+  smReverse?: boolean
+  mdReverse?: boolean
+  lgReverse?: boolean
+  xlReverse?: boolean
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+export interface FlexGridColProps {
+  children?: ReactNode
+  xs?: number
+  sm?: number
+  md?: number
+  lg?: number
+  xl?: number
+  xsOffset?: number
+  smOffset?: number
+  mdOffset?: number
+  lgOffset?: number
+  xlOffset?: number
+  xsHidden?: boolean
+  smHidden?: boolean
+  mdHidden?: boolean
+  lgHidden?: boolean
+  xlHidden?: boolean
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+export interface FlexGridProps {
+  children?: ReactNode
+  limitWidth?: boolean
+  gutter?: boolean
+  outsideGutter?: boolean
+  xsReverse?: boolean
+  smReverse?: boolean
+  mdReverse?: boolean
+  lgReverse?: boolean
+  xlReverse?: boolean
+  tokens?: Record<string, string | number | boolean | object>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const FlexGrid: ComponentType<FlexGridProps> & {
+  Row: ComponentType<FlexGridRowProps>
+  Col: ComponentType<FlexGridColProps>
+}
+
+export { FlexGrid }

package/types/Footnote.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface FootnoteProps {
+  content?: string | ReactNode
+  copy?: 'en' | 'fr' | { heading: string; close: string }
+  isOpen?: boolean
+  number?: number
+  onClose: (event: any, options?: { returnFocus?: boolean }) => void
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  dictionary?: Record<string, any>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const Footnote: ComponentType<FootnoteProps>
+
+export { Footnote }

package/types/HorizontalScroll.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface HorizontalScrollProps {
+  children?: ReactNode
+  onScrollEnd?: () => void
+  onScroll?: (event: any) => void
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const HorizontalScroll: ComponentType<HorizontalScrollProps>
+
+export { HorizontalScroll }