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

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 }

package/types/HorizontalScrollButton.d.ts

@@ -1,4 +1,6 @@
-export interface HorizontalScrollButtonTokens {
+import type { ComponentType } from 'react'
+
+export type HorizontalScrollButtonTokens = {
   backgroundColor?: string
   borderColor?: string
   borderRadius?: number | string
@@ -14,3 +16,17 @@ export interface HorizontalScrollButtonTokens {
   padding?: number | string
   shadow?: string
 }
+
+export interface HorizontalScrollButtonProps {
+  direction: 'previous' | 'next'
+  onPress: () => void
+  icon?: ComponentType<any>
+  offset?: number
+  copy?: 'en' | 'fr'
+  variant?: Record<string, string | number | boolean | undefined>
+  tokens?: HorizontalScrollButtonTokens
+}
+
+declare const HorizontalScrollButton: ComponentType<HorizontalScrollButtonProps>
+
+export { HorizontalScrollButton }

package/types/Icon.d.ts

@@ -1,8 +1,15 @@
+import type { ComponentType } from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+
 export interface IconProps {
   scalesWithText?: boolean
   variant?: IconVariant
   tokens?: IconTokens
-  icon: React.ReactNode
+  icon: ComponentType<any>
+  accessibilityLabel?: string
+  style?: StyleProp<ViewStyle>
+  testID?: string
+  dataSet?: Record<string, any>
 }
 
 export interface IconTokens {
@@ -18,4 +25,8 @@ export type IconVariant = {
   size?: 'micro' | 'small' | 'large' | 'extraLarge'
 }
 
-export type IconPositionLeftRight = 'left' | 'right'
+export type IconPositionLeftRight = 'left' | 'right' | 'inline'
+
+declare const Icon: ComponentType<IconProps>
+
+export { Icon }

package/types/IconButton.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentType, ElementType } from 'react'
+
+export interface IconButtonProps {
+  icon?: ElementType
+  href?: string
+  hrefAttrs?: Record<string, string>
+  onPress?: () => void
+  inactive?: boolean
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+  accessibilityLabel?: string
+  accessibilityRole?: string
+}
+
+declare const IconButton: ComponentType<IconButtonProps>
+
+export { IconButton }

package/types/InputLabel.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface InputLabelProps {
+  children?: ReactNode
+  forId?: string
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const InputLabel: ComponentType<InputLabelProps>
+
+export { InputLabel }

package/types/InputSupports.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface InputSupportsProps {
+  children?: ReactNode | ((props: Record<string, any>) => ReactNode)
+  copy?: 'en' | 'fr'
+  label?: string
+  hint?: string
+  hintPosition?: 'inline' | 'below'
+  validation?: 'error' | 'success'
+  feedback?: string
+  tooltip?: string | Record<string, any>
+  tokens?: Record<string, string | number | boolean | object>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const InputSupports: ComponentType<InputSupportsProps>
+
+export { InputSupports }

package/types/Link.d.ts

@@ -1,17 +1,29 @@
+import type { ComponentType, ReactNode } from 'react'
 import { IconPositionLeftRight, IconProps } from './Icon'
 
 export interface LinkProps {
-  href: string
-  onPress: () => void
+  href?: string
+  onPress?: () => void
   tokens?: LinkTokens
   accessibilityRole?: string
   accessibilityLabel?: string
   variant?: LinkAndTextButtonVariants
   iconProps?: IconProps
-  icon?: React.ReactNode
+  icon?: ComponentType<any>
   iconPosition?: IconPositionLeftRight
   testID?: string
-  children?: React.ReactNode
+  children?: ReactNode
+  hrefAttrs?: HrefAttrs
+  pointerEvents?: 'all' | 'none' | 'box-only' | 'box-none'
+  onLayout?: (event: any) => void
+  nativeID?: string
+  dataSet?: Record<string, any>
+}
+
+export interface HrefAttrs {
+  download?: string
+  rel?: string
+  target?: string
 }
 
 export enum LinkSize {
@@ -45,3 +57,7 @@ export type LinkTokens = {
   iconTranslateY?: number
   alignSelf?: string
 }
+
+declare const Link: ComponentType<LinkProps>
+
+export { Link }

package/types/List.d.ts

@@ -1,12 +1,12 @@
-import { TextAlign } from '@telus-uds/components-web/types/common'
-import { ReactElement, ReactNode } from 'react'
+import type { ComponentType, ReactElement, ReactNode } from 'react'
+import { TextAlign } from './Common'
 
-type ListVariants = {
+export type ListVariants = {
   size?: 'small' | 'medium' | 'large'
   compact?: boolean
 }
 
-type ListTokens = {
+export type ListTokens = {
   interItemMargin?: number
   interItemMarginWithDivider?: number
   dividerColor?: string
@@ -35,6 +35,7 @@ export interface ListItemProps {
   icon?: ReactNode | string
   iconColor?: string
   iconSize?: number
+  iconVerticalAlign?: 'top' | 'center' | 'bottom'
   title?: string
   testID?: string
 }
@@ -46,3 +47,9 @@ export interface ListItemTokens {
   itemLineHeight?: number
   itemFontName?: string
 }
+
+declare const List: ComponentType<ListProps> & {
+  Item: ComponentType<ListItemProps>
+}
+
+export { List }

package/types/Listbox.d.ts

@@ -1,4 +1,6 @@
-type ListboxTokens = {
+import type { ComponentType, ElementType } from 'react'
+
+export type ListboxTokens = {
   groupBorderRadius?: number | string
   groupBorderWidth?: number | string
   groupFontSize?: number
@@ -65,7 +67,7 @@ type ListboxTokens = {
   secondLevelParentIcon?: string
 }
 
-type ListboxItems = {
+export type ListboxItems = {
   label: string
   href: string
   tokens?: ListboxTokens
@@ -75,10 +77,18 @@ export interface ListboxProps {
   items: ListboxItems[]
   firstItemRef?: object
   parentRef?: object
-  LinkRouter?: React.ElementType
+  LinkRouter?: ElementType
   linkRouterProps?: object
   tokens?: ListboxTokens
   variant?: { secondLevel?: boolean }
   selectedId?: string
   onClose?: () => void
+  copy?: 'en' | 'fr'
+  dictionary?: Record<string, any>
+  testID?: string
+  itemRouterProps?: object
 }
+
+declare const Listbox: ComponentType<ListboxProps>
+
+export { Listbox }

package/types/Modal.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface ModalProps {
+  children?: ReactNode
+  copy?: 'en' | 'fr'
+  isOpen?: boolean
+  onClose?: () => void
+  maxWidth?: boolean
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  closeButton?: ReactNode | null
+  heading?: string
+  headingLevel?: 'h3' | 'h4'
+  subHeading?: string
+  subHeadingSize?: 'small' | 'medium' | 'large'
+  bodyText?: string
+  confirmButtonText?: string
+  testID?: string
+  dataSet?: Record<string, any>
+  accessibilityLabel?: string
+}
+
+declare const Modal: ComponentType<ModalProps>
+
+export { Modal }

package/types/MultiSelectFilter.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface MultiSelectFilterItem {
+  id?: string
+  label: string
+  [key: string]: any
+}
+
+export interface MultiSelectFilterProps {
+  label: string
+  subtitle?: string | ReactNode
+  id?: string
+  variant?: Record<string, string | number | boolean | undefined>
+  tokens?: Record<string, string | number | boolean | object>
+  items?: MultiSelectFilterItem[]
+  onChange?: (selectedIds: string[]) => void
+  selectedIds?: string[]
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const MultiSelectFilter: ComponentType<MultiSelectFilterProps>
+
+export { MultiSelectFilter }

package/types/Notification.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface NotificationProps {
+  children?: string | ReactNode | ((props: Record<string, any>) => ReactNode)
+  dismissible?: boolean
+  copy?: 'en' | 'fr' | { dismiss: string }
+  onDismiss?: () => void
+  contentMinWidth?: Record<string, 'max' | 'full'>
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+  accessibilityLabel?: string
+  accessibilityRole?: string
+}
+
+declare const Notification: ComponentType<NotificationProps>
+
+export { Notification }

package/types/OrderedList.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface OrderedListItemProps {
+  children?: ReactNode
+}
+
+export interface OrderedListProps {
+  children: ReactNode
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const OrderedList: ComponentType<OrderedListProps> & {
+  Item: ComponentType<OrderedListItemProps>
+}
+
+export { OrderedList }

package/types/Pagination.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentType, ElementType, ReactNode } from 'react'
+
+export interface PaginationPageButtonProps {
+  children?: ReactNode
+}
+
+export interface PaginationProps {
+  children?: ReactNode
+  copy?: 'en' | 'fr'
+  variant?: Record<string, string | number | boolean | undefined>
+  tokens?: Record<string, string | number | boolean | object>
+  sideButtonVariant?: Record<string, string | number | boolean | undefined>
+  sideButtonTokens?: Record<string, string | number | boolean | object>
+  numberOfPagesBeforeEllipsis?: number
+  LinkRouter?: ElementType
+  linkRouterProps?: Record<string, any>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const Pagination: ComponentType<PaginationProps> & {
+  PageButton: ComponentType<PaginationPageButtonProps>
+}
+
+export { Pagination }

package/types/Portal.d.ts

@@ -1,5 +1,9 @@
-import { ReactNode } from 'react'
+import type { ComponentType, ReactNode } from 'react'
 
 export interface PortalProps {
   children: ReactNode
 }
+
+declare const Portal: ComponentType<PortalProps>
+
+export { Portal }

package/types/PriceLockup.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface PriceLockupProps {
+  size?: 'small' | 'medium'
+  currencySymbol?: string
+  topText?: string
+  price: string
+  rateText?: string
+  bottomText?: string
+  signDirection?: 'left' | 'right'
+  footnoteLinks?: Array<number | string>
+  strikeThrough?: boolean
+  a11yText?: string
+  onClickFootnote?: (index: number) => void
+  copy?: 'en' | 'fr'
+  dictionary?: Record<string, any>
+  ratePosition?: 'right' | 'bottom'
+  linkPosition?: string
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  children?: ReactNode
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const PriceLockup: ComponentType<PriceLockupProps>
+
+export { PriceLockup }

package/types/ProductCard.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentType } from 'react'
+
+export interface ProductCardImage {
+  src?: string | ReactNode
+  alt?: string
+}
+
+export interface ProductCardProps {
+  image?: ProductCardImage
+  copy?: 'en' | 'fr'
+  dictionary?: Record<string, any>
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const ProductCard: ComponentType<ProductCardProps>
+
+export { ProductCard }