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

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 }

package/types/ProductCardGroup.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from 'react'
+
+export interface ProductCardGroupCardItem {
+  id: string
+  image?: Record<string, any>
+  dictionary?: Record<string, any>
+  [key: string]: any
+}
+
+export interface ProductCardGroupProps {
+  maxSelection?: number
+  productCards: ProductCardGroupCardItem[]
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const ProductCardGroup: ComponentType<ProductCardGroupProps>
+
+export { ProductCardGroup }

package/types/Progress.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface ProgressBarProps {
+  value?: number
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+}
+
+export interface ProgressProps {
+  children: ReactNode
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const Progress: ComponentType<ProgressProps> & {
+  Bar: ComponentType<ProgressBarProps>
+}
+
+export { Progress }

package/types/QuickLinks.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface QuickLinksItemProps {
+  children?: ReactNode
+  href?: string
+  onPress?: () => void
+  icon?: ComponentType<any>
+  tokens?: Record<string, string | number | boolean | object>
+  testID?: string
+}
+
+export interface QuickLinksProps {
+  children?: ReactNode
+  tokens?: Record<string, string | number | boolean | object>
+  cardTokens?: Record<string, string | number | boolean | object>
+  listTokens?: Record<string, string | number | boolean | object>
+  tag?: string
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const QuickLinks: ComponentType<QuickLinksProps> & {
+  Item: ComponentType<QuickLinksItemProps>
+}
+
+export { QuickLinks }

package/types/QuickLinksFeature.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType, ReactNode, ElementType } from 'react'
+
+export interface QuickLinksFeatureItemProps {
+  children: ReactNode
+  imageAccessibilityLabel: string
+  imageSource: string | ReactNode
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  href?: string
+  onPress?: () => void
+  LinkRouter?: ElementType
+  linkRouterProps?: Record<string, any>
+}
+
+export interface QuickLinksFeatureProps {
+  children?: ReactNode
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const QuickLinksFeature: ComponentType<QuickLinksFeatureProps> & {
+  Item: ComponentType<QuickLinksFeatureItemProps>
+}
+
+export { QuickLinksFeature }

package/types/Radio.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface RadioProps {
+  checked?: boolean
+  defaultChecked?: boolean
+  description?: string
+  id?: string
+  inactive?: boolean
+  label?: string | ReactNode
+  name?: string
+  onChange?: (value: any) => void
+  value?: any
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+  accessibilityLabel?: string
+}
+
+declare const Radio: ComponentType<RadioProps>
+
+export { Radio }

package/types/RadioCard.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface RadioCardProps {
+  title?: string
+  children?: ReactNode | ((state: Record<string, any>) => ReactNode)
+  checked?: boolean
+  defaultChecked?: boolean
+  description?: string
+  id?: string
+  inactive?: boolean
+  onChange?: (value: any) => 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 RadioCard: ComponentType<RadioCardProps>
+
+export { RadioCard }

package/types/Responsive.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export type ViewportKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export interface ResponsiveProps {
+  min?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  max?: 'sm' | 'md' | 'lg' | 'xl'
+  inheritedStyles?: string[]
+  children: ReactNode
+}
+
+declare const Responsive: ComponentType<ResponsiveProps>
+
+export { Responsive }

package/types/Scroll.d.ts

@@ -0,0 +1,66 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { SemanticTag } from './Common'
+
+export interface ScrollDictionary {
+  accessibilityLabel: string
+  instructionText: string
+  progressBarLabel: string
+}
+
+export interface ScrollProps {
+  /**
+   * Scroll items to display. Should be `ScrollItem` components.
+   */
+  children: ReactNode
+  /**
+   * Theme tokens for customizing the Scroll appearance.
+   */
+  tokens?: ScrollTokens
+  /**
+   * Variant for the Scroll component.
+   */
+  variant?: ScrollVariant
+  /**
+   * Select English or French copy for accessible labels.
+   */
+  copy?: 'en' | 'fr'
+  /**
+   * Override the default dictionary by passing the complete dictionary object for `en` and `fr`.
+   */
+  dictionary?: {
+    en: ScrollDictionary
+    fr: ScrollDictionary
+  }
+  /**
+   * Accessibility label for the scrollable region.
+   */
+  accessibilityLabel?: string
+}
+
+export type ScrollVariant = {}
+
+export interface ScrollTokens {
+  itemGap?: number
+  progressBarColor?: string
+  progressBarHeight?: number
+  progressHitAreaHeight?: number
+  progressSpacing?: number
+  progressTrackColor?: string
+  progressTrackHeight?: number
+}
+
+export interface ScrollItemProps {
+  /**
+   * Content of the scroll item.
+   */
+  children: ReactNode
+  /**
+   * Sets the HTML tag of the outer container. Defaults to `'li'`.
+   */
+  tag?: SemanticTag
+}
+
+declare const Scroll: ComponentType<ScrollProps>
+declare const ScrollItem: ComponentType<ScrollItemProps>
+
+export { Scroll, ScrollItem }

package/types/Search.d.ts

@@ -1,3 +1,4 @@
+import type { ComponentType } from 'react'
 import { CopyType, Size } from './Common'
 
 export type SearchTokens = {
@@ -20,8 +21,8 @@ export type SearchTokens = {
   lineHeight?: number
   placeholderColor?: string
   buttonsGap?: Size
-  clearButtonIcon?: React.ReactNode
-  submitButtonIcon?: React.ReactNode
+  clearButtonIcon?: any
+  submitButtonIcon?: any
 }
 
 export interface SearchProps {
@@ -35,4 +36,16 @@ export interface SearchProps {
   onClear?: () => void
   onFocus?: () => void
   tokens?: SearchTokens
+  nativeSubmitBtnID?: string
+  searchIconPosition?: 'left' | 'right'
+  pointerEvents?: 'all' | 'none' | 'box-only' | 'box-none'
+  onLayout?: (event: any) => void
+  nativeID?: string
+  dataSet?: Record<string, any>
+  accessibilityLabel?: string
+  accessibilityRole?: string
 }
+
+declare const Search: ComponentType<SearchProps>
+
+export { Search }

package/types/Select.d.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import type { ComponentType, ReactNode } from 'react'
 import { IconProps } from './Icon'
 
 export type SelectTokens = {
@@ -28,7 +28,7 @@ export type SelectTokens = {
 }
 
 export interface SelectProps {
-  children: string | React.ReactNode
+  children: string | ReactNode
   label: string
   initialValue?: string
   feedback?: string
@@ -44,14 +44,22 @@ export interface SelectProps {
   placeholder?: string
   tokens?: SelectTokens
   testID?: string
+  dataSet?: Record<string, any>
 }
 
 export interface SelectItemProps {
-  children: string | React.ReactNode
+  children: string | ReactNode
   value: string
 }
 
 export interface SelectGroupProps {
-  children: string | React.ReactNode
+  children: string | ReactNode
   label: string
 }
+
+declare const Select: ComponentType<SelectProps> & {
+  Item: ComponentType<SelectItemProps>
+  Group: ComponentType<SelectGroupProps>
+}
+
+export { Select }

package/types/SideNav.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface SideNavItemProps {
+  children?: ReactNode
+  label?: string
+  href?: string
+  onPress?: () => void
+  id?: string
+  tokens?: Record<string, string | number | boolean | object>
+}
+
+export interface SideNavItemsGroupProps {
+  children?: ReactNode
+  label: string
+  groupId?: string
+  onToggle?: () => void
+  openGroups?: Array<string | number>
+  isActive?: boolean
+  variant?: Record<string, string | number | boolean | undefined>
+  tokens?: Record<string, string | number | boolean | object>
+}
+
+export interface SideNavProps {
+  children?: ReactNode
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  openGroups?: Array<string | number>
+  onToggle?: (groupId: string) => void
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const SideNav: ComponentType<SideNavProps> & {
+  ItemsGroup: ComponentType<SideNavItemsGroupProps>
+  Item: ComponentType<SideNavItemProps>
+}
+
+export { SideNav }

package/types/Skeleton.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType } from 'react'
+
+export interface SkeletonProps {
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  sizeIndex?: number | Record<string, number>
+  sizePixels?: number | Record<string, number>
+  characters?: number
+  lines?: number
+  shape?: 'line' | 'circle' | 'square'
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const Skeleton: ComponentType<SkeletonProps>
+
+export { Skeleton }

package/types/SkipLink.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface SkipLinkProps {
+  children?: ReactNode
+  href?: string
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const SkipLink: ComponentType<SkipLinkProps>
+
+export { SkipLink }

package/types/Spacer.d.ts

@@ -1,5 +1,12 @@
+import type { ComponentType } from 'react'
+
 export interface SpacerProps {
-  space?: number
+  space?: number | Record<string, number>
   direction?: 'column' | 'row'
   testID?: string
+  dataSet?: Record<string, any>
 }
+
+declare const Spacer: ComponentType<SpacerProps>
+
+export { Spacer }

package/types/StackView.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ComponentType, ReactNode } from 'react'
 import {
   Direction,
   FlexAlign,
@@ -9,7 +9,7 @@ import {
 } from './Common'
 import { DividerProps } from './Divider'
 
-type StackViewTokens = {
+export type StackViewTokens = {
   alignItems?: FlexAlign
   justifyContent?: FlexJustify
   flexGrow?: number
@@ -25,4 +25,10 @@ export interface StackViewProps {
   tag?: SemanticTag
   children: ReactNode
   testID?: string
+  dataSet?: Record<string, any>
+  accessibilityRole?: string
 }
+
+declare const StackView: ComponentType<StackViewProps>
+
+export { StackView }

package/types/Status.d.ts

@@ -1,6 +1,5 @@
-import type { Variant } from '../../components-web/types/common'
-import { ComponentType, ReactNode } from 'react'
-
+import type { ComponentType, ReactNode } from 'react'
+import { Variant } from './Common'
 import { IconProps } from './Icon'
 
 export type StatusTokensProps = {

package/types/StepTracker.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType } from 'react'
+
+export interface StepTrackerProps {
+  current?: number
+  copy?: 'en' | 'fr' | Record<string, any>
+  dictionary?: Record<string, any>
+  steps?: string[]
+  tokens?: Record<string, string | number | boolean | object>
+  variant?: Record<string, string | number | boolean | undefined>
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const StepTracker: ComponentType<StepTrackerProps>
+
+export { StepTracker }

package/types/TabBar.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface TabBarItem {
+  id: string
+  icon?: ReactNode
+  iconActive?: ReactNode
+  label: string
+  href?: string
+  tokens?: Record<string, string | number | boolean | object>
+}
+
+export interface TabBarProps {
+  items: TabBarItem[]
+  initiallySelectedItem?: number
+  onChange?: (id: string) => void
+  variant?: Record<string, string | number | boolean | undefined>
+  tokens?: Record<string, string | number | boolean | object>
+  accessibilityLabel?: string
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+declare const TabBar: ComponentType<TabBarProps>
+
+export { TabBar }

package/types/Tabs.d.ts

@@ -1,15 +1,18 @@
+import type { ComponentType, ElementType } from 'react'
 import { Size } from './Common'
 import { IconProps } from './Icon'
 import { TypographyVariants, TypographyTokens } from './Typography'
 import { HorizontalScrollButtonTokens } from './HorizontalScrollButton'
 
-type TabsItem = {
+export type TabsItem = {
   label: string
   href: string
   id: string
+  linkRouter?: ElementType
+  linkRouterProps?: Record<string, any>
 }
 
-type TabsVariant = {
+export type TabsVariant = {
   equalWidth?: string
   inverse?: boolean
 }
@@ -19,9 +22,11 @@ export interface TabsProps {
   value?: string
   initialValue?: string
   onChange?: () => void
-  itemTokens?: TabsItem
+  itemTokens?: Partial<TabsTokens>
   scrollButtonTokens?: HorizontalScrollButtonTokens
   variant?: TabsVariant
+  LinkRouter?: ElementType
+  linkRouterProps?: Record<string, any>
 }
 
 export type TabsTokens = {
@@ -44,3 +49,7 @@ export interface TabSelectorProps {
   testID?: string
   selectedTestID?: string
 }
+
+declare const Tabs: ComponentType<TabsProps>
+
+export { Tabs }