@telus-uds/components-base 1.71.0 → 1.73.0

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
+}

package/types/List.d.ts

@@ -0,0 +1,48 @@
+import { TextAlign } from '@telus-uds/components-web/types/common'
+import { ReactElement, ReactNode } from 'react'
+
+type ListVariants = {
+  size?: 'small' | 'medium' | 'large'
+  compact?: boolean
+}
+
+type ListTokens = {
+  interItemMargin?: number
+  interItemMarginWithDivider?: number
+  dividerColor?: string
+  dividerSize?: number
+  itemBulletContainerWidth?: number
+  itemBulletContainerAlign?: TextAlign
+  itemBulletWidth?: number
+  itemBulletHeight?: number
+  itemBulletColor?: string
+  itemIconSize?: number
+  itemIconColor?: string
+  listGutter?: number
+}
+
+export interface ListProps {
+  tokens?: ListTokens
+  variant?: ListVariants
+  children: ReactNode | ReactElement
+  showDivider?: boolean
+  testID?: string
+}
+
+export interface ListItemProps {
+  tokens?: ListItemTokens
+  children: ReactNode | ReactElement
+  icon?: ReactNode | string
+  iconColor?: string
+  iconSize?: number
+  title?: string
+  testID?: string
+}
+
+export interface ListItemTokens {
+  iconMarginTop?: number
+  itemFontWeight?: number
+  itemFontSize?: number
+  itemLineHeight?: number
+  itemFontName?: string
+}

package/types/Search.d.ts

@@ -0,0 +1,38 @@
+import { CopyType, Size } from './Common'
+
+export type SearchTokens = {
+  backgroundColor?: string
+  color?: string
+  borderWidth?: number
+  borderColor?: string
+  borderRadius?: number
+  paddingTop?: Size
+  paddingBottom?: Size
+  paddingLeft?: Size
+  paddingRight?: Size
+  outerBackgroundColor?: string
+  outerBorderWidth?: number
+  outerBorderColor?: string
+  outerBorderRadius?: number
+  fontName?: string
+  fontWeight?: number
+  fontSize?: Size
+  lineHeight?: number
+  placeholderColor?: string
+  buttonsGap?: Size
+  clearButtonIcon?: React.ReactNode
+  submitButtonIcon?: React.ReactNode
+}
+
+export interface SearchProps {
+  testID?: string
+  copy?: CopyType
+  initialValue?: string
+  placeholder?: string
+  inactive?: boolean
+  onChange?: (value: string) => void
+  onSubmit?: (value: string) => void
+  onClear?: () => void
+  onFocus?: () => void
+  tokens?: SearchTokens
+}

package/types/Select.d.ts

@@ -0,0 +1,57 @@
+import React from 'react'
+import { IconProps } from './Icon'
+
+export type SelectTokens = {
+  backgroundColor?: string
+  color?: string
+  borderWidth?: number | string
+  borderColor?: string
+  borderRadius?: number | string
+  paddingTop?: number | string
+  paddingBottom?: number | string
+  paddingLeft?: number | string
+  paddingRight?: number | string
+  height?: number | string
+  outerBackgroundColor?: string
+  outerBorderWidth?: number | string
+  outerBorderColor?: string
+  fontSize?: number
+  fontName?: string
+  fontWeight?: number
+  icon?: IconProps
+  iconSize?: number | string
+  iconColor?: string
+  validationIcon?: IconProps
+  validationIconSize?: number | string
+  validationIconColor?: string
+  feedbackBackgroundColor?: string
+}
+
+export interface SelectProps {
+  children: string | React.ReactNode
+  label: string
+  initialValue?: string
+  feedback?: string
+  validation?: string
+  value?: string
+  onChange?: () => void
+  nativeID?: string
+  hint?: string
+  hintPosition?: string
+  tooltip?: string
+  inactive?: boolean
+  readOnly?: boolean
+  placeholder?: string
+  tokens?: SelectTokens
+  testID?: string
+}
+
+export interface SelectItemProps {
+  children: string | React.ReactNode
+  value: string
+}
+
+export interface SelectGroupProps {
+  children: string | React.ReactNode
+  label: string
+}

package/types/Spacer.d.ts

@@ -0,0 +1,5 @@
+export interface SpacerProps {
+  space?: number
+  direction?: 'column' | 'row'
+  testID?: string
+}

package/types/StackView.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react'
+import {
+  Direction,
+  FlexAlign,
+  FlexJustify,
+  ResponsiveSpacing,
+  ResponsiveDirection,
+  SemanticTag
+} from './Common'
+import { DividerProps } from './Divider'
+
+type StackViewTokens = {
+  alignItems?: FlexAlign
+  justifyContent?: FlexJustify
+  flexGrow?: number
+  flexShrink?: number
+  width?: number
+}
+
+export interface StackViewProps {
+  space?: ResponsiveSpacing | number
+  direction?: Direction | ResponsiveDirection
+  tokens?: StackViewTokens
+  divider?: boolean | DividerProps
+  tag?: SemanticTag
+  children: ReactNode
+  testID?: string
+}

package/types/Tabs.d.ts

@@ -0,0 +1,46 @@
+import { Size } from './Common'
+import { IconProps } from './Icon'
+import { TypographyVariants, TypographyTokens } from './Typography'
+import { HorizontalScrollButtonTokens } from './HorizontalScrollButton'
+
+type TabsItem = {
+  label: string
+  href: string
+  id: string
+}
+
+type TabsVariant = {
+  equalWidth?: string
+  inverse?: boolean
+}
+
+export interface TabsProps {
+  items: Array<TabsItem>
+  value?: string
+  initialValue?: string
+  onChange?: () => void
+  itemTokens?: TabsItem
+  scrollButtonTokens?: HorizontalScrollButtonTokens
+  variant?: TabsVariant
+}
+
+export type TabsTokens = {
+  nextIcon?: IconProps
+  previousIcon?: IconProps
+  space?: number
+  buttonClearance?: Size
+  gutter?: Size
+  borderBottomColor?: string
+  borderBottomWidth?: number
+}
+
+export interface TabSelectorProps {
+  items: TabsItem[]
+  initialValue?: string
+  value?: string
+  onChange?: (value: string) => void
+  labelVariant?: TypographyVariants
+  labelTokens?: TypographyTokens
+  testID?: string
+  selectedTestID?: string
+}

package/types/TextButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react'
+import { LinkTokens, LinkAndTextButtonVariants } from './Link'
+
+export interface TextButtonProps {
+  onPress: () => void
+  accessibilityLabel: string
+  children: string | React.ReactNode
+  variant?: LinkAndTextButtonVariants
+  tokens?: LinkTokens
+  testID?: string
+}

package/types/ToggleSwitch.d.ts

@@ -0,0 +1,54 @@
+import { CopyType } from './Common'
+
+type ToggleSwitchTokens = {
+  borderColor?: string
+  borderWidth?: number
+  borderRadius?: number
+  outerBorderColor?: string
+  outerBorderWidth?: number
+  outerBorderGap?: number
+  outerBackgroundColor?: string
+  backgroundColor?: string
+  opacity?: number
+  paddingLeft?: number
+  paddingRight?: number
+  paddingTop?: number
+  paddingBottom?: number
+  shadow?: string
+  alignSelf?: string
+  space?: number
+  icon?: React.ReactNode
+  trackHeight?: number
+  outerBorderGapButton?: number
+  width?: number
+  trackBorderWidth?: number
+  trackBorderColor?: string
+  trackBorderRadius?: number
+  iconSize?: number
+  iconColor?: string
+  labelColor?: string
+  labelFontName?: string
+  labelFontWeight?: number
+  labelLineHeight?: number
+  labelMarginLeft?: number
+  switchSize?: number
+  switchColor?: string
+  switchBorderColor?: string
+  switchBorderWidth?: number
+  switchBorderRadius?: number
+  switchShadow?: string
+}
+
+export interface ToggleSwitchProps {
+  label?: string
+  initialValue?: boolean
+  value?: boolean
+  onChange?: (value: boolean) => void
+  accessibilityLabel?: string
+  tooltip?: string
+  inactive?: boolean
+  copy?: CopyType
+  id?: string
+  testID?: string
+  tokens?: ToggleSwitchTokens
+}

package/types/ToolTip.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react'
+import { CopyType, Position } from './Common'
+
+type TooltipTokens = {
+  backgroundColor?: string
+  paddingTop?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingRight?: number
+  borderRadius?: number
+  shadow?: string
+  color?: string
+  fontSize?: number
+  lineHeight?: number
+  fontName?: string
+  fontWeight?: number
+  arrowWidth?: number
+  arrowBorderRadius?: number
+  arrowOffset?: number
+}
+
+type TooltipVariants = {
+  inverse?: boolean
+}
+
+export interface TooltipProps {
+  children?: ReactNode
+  content: string | ReactNode
+  copy?: CopyType
+  position?: Position
+  inline?: boolean
+  onPress?: () => void
+  nativeID?: string
+  tokens?: TooltipTokens
+  variant?: TooltipVariants
+  accessibilityRole?: string
+  accessibilityLabel?: string
+  accessible?: boolean
+  testID?: string
+}

package/types/Typography.d.ts

@@ -0,0 +1,39 @@
+import { LetterSpacing, TextTransform } from './Common'
+
+export interface TypographyProps {
+  tag?: tagType | string
+  block?: boolean
+  align?: alignType | string
+  strikeThrough?: boolean
+  tokens?: TypographyTokens
+  variant?: TypographyVariants
+  heading?: headingType | string
+  accessible?: boolean
+  accessibilityLabel?: string
+  children?: React.ReactNode
+}
+
+export type TypographyVariants = {
+  color?: string
+  secondColor?: string
+  animationDuration?: number
+  size?: number | string
+  radius?: number
+  baseWidth?: number
+  characters?: number
+  spaceBetweenLines?: number
+  squareRadius?: number
+  inverse?: boolean
+}
+
+export type TypographyTokens = {
+  fontName?: string
+  superScriptFontSize?: number
+  fontWeight?: number
+  fontSize?: number
+  color?: string
+  lineHeight?: number
+  textTransform?: TextTransform
+  fontScaleCap?: number
+  letterSpacing?: LetterSpacing
+}