@telus-uds/components-web 2.0.0 → 2.1.0

package/types/ReactNative.d.ts

@@ -0,0 +1,256 @@
+// These types are copied out of react-native because web projects don't have that dependency.
+export type AccessibilityActionName =
+  /**
+   * Generated when a screen reader user double taps the component.
+   */
+  | 'activate'
+  /**
+   * Generated when a screen reader user increments an adjustable component.
+   */
+  | 'increment'
+  /**
+   * Generated when a screen reader user decrements an adjustable component.
+   */
+  | 'decrement'
+  /**
+   * Generated when a TalkBack user places accessibility focus on the component and double taps and holds one finger on the screen.
+   * @platform android
+   */
+  | 'longpress'
+  /**
+   * Generated when a VoiceOver user places focus on or inside the component and double taps with two fingers.
+   * @platform ios
+   * */
+  | 'magicTap'
+  /**
+   * Generated when a VoiceOver user places focus on or inside the component and performs a two finger scrub gesture (left, right, left).
+   * @platform ios
+   * */
+  | 'escape'
+
+export type AccessibilityActionInfo = Readonly<{
+  name: AccessibilityActionName | string
+  label?: string | undefined
+}>
+
+export type AccessibilityRole =
+  | 'none'
+  | 'button'
+  | 'togglebutton'
+  | 'link'
+  | 'search'
+  | 'image'
+  | 'keyboardkey'
+  | 'text'
+  | 'adjustable'
+  | 'imagebutton'
+  | 'header'
+  | 'summary'
+  | 'alert'
+  | 'checkbox'
+  | 'combobox'
+  | 'menu'
+  | 'menubar'
+  | 'menuitem'
+  | 'progressbar'
+  | 'radio'
+  | 'radiogroup'
+  | 'scrollbar'
+  | 'spinbutton'
+  | 'switch'
+  | 'tab'
+  | 'tabbar'
+  | 'tablist'
+  | 'timer'
+  | 'list'
+  | 'toolbar'
+
+export interface AccessibilityState {
+  /**
+   * When true, informs accessible tools if the element is disabled
+   */
+  disabled?: boolean | undefined
+  /**
+   * When true, informs accessible tools if the element is selected
+   */
+  selected?: boolean | undefined
+  /**
+   * For items like Checkboxes and Toggle switches, reports their state to accessible tools
+   */
+  checked?: boolean | 'mixed' | undefined
+  /**
+   *  When present, informs accessible tools if the element is busy
+   */
+  busy?: boolean | undefined
+  /**
+   *  When present, informs accessible tools the element is expanded or collapsed
+   */
+  expanded?: boolean | undefined
+}
+
+export interface AccessibilityValue {
+  /**
+   * The minimum value of this component's range. (should be an integer)
+   */
+  min?: number | undefined
+
+  /**
+   * The maximum value of this component's range. (should be an integer)
+   */
+  max?: number | undefined
+
+  /**
+   * The current value of this component's range. (should be an integer)
+   */
+  now?: number | undefined
+
+  /**
+   * A textual description of this component's value. (will override minimum, current, and maximum if set)
+   */
+  text?: string | undefined
+}
+
+export interface AccessibilityPropsAndroid {
+  /**
+   * Indicates to accessibility services whether the user should be notified when this view changes.
+   * Works for Android API >= 19 only.
+   * See http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion for references.
+   * @platform android
+   */
+  accessibilityLiveRegion?: 'none' | 'polite' | 'assertive' | undefined
+
+  /**
+   * Controls how view is important for accessibility which is if it fires accessibility events
+   * and if it is reported to accessibility services that query the screen.
+   * Works for Android only. See http://developer.android.com/reference/android/R.attr.html#importantForAccessibility for references.
+   *
+   * Possible values:
+   *      'auto' - The system determines whether the view is important for accessibility - default (recommended).
+   *      'yes' - The view is important for accessibility.
+   *      'no' - The view is not important for accessibility.
+   *      'no-hide-descendants' - The view is not important for accessibility, nor are any of its descendant views.
+   */
+  importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants' | undefined
+}
+
+type NodeHandle = number
+
+export interface TargetedEvent {
+  target: number
+}
+
+interface TextLayoutLine {
+  ascender: number
+  capHeight: number
+  descender: number
+  height: number
+  text: string
+  width: number
+  x: number
+  xHeight: number
+  y: number
+}
+
+export interface TextLayoutEventData extends TargetedEvent {
+  lines: TextLayoutLine[]
+}
+
+// Similar to React.SyntheticEvent except for nativeEvent
+export interface NativeSyntheticEvent<T>
+  extends React.BaseSyntheticEvent<T, NodeHandle, NodeHandle> {}
+
+export type AccessibilityActionEvent = NativeSyntheticEvent<
+  Readonly<{
+    actionName: string
+  }>
+>
+
+export interface LayoutRectangle {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+// @see TextProps.onLayout
+export type LayoutChangeEvent = NativeSyntheticEvent<{ layout: LayoutRectangle }>
+
+export interface AccessibilityPropsIOS {
+  /**
+   * A Boolean value indicating whether the accessibility elements contained within this accessibility element
+   * are hidden to the screen reader.
+   * @platform ios
+   */
+  accessibilityElementsHidden?: boolean | undefined
+
+  /**
+   * A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
+   * @platform ios
+   */
+  accessibilityViewIsModal?: boolean | undefined
+
+  /**
+   * When accessibile is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers).
+   * @platform ios
+   */
+  onAccessibilityEscape?: (() => void) | undefined
+
+  /**
+   * When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gesture.
+   * @platform ios
+   */
+  onAccessibilityTap?: (() => void) | undefined
+
+  /**
+   * When accessible is true, the system will invoke this function when the user performs the magic tap gesture.
+   * @platform ios
+   */
+  onMagicTap?: (() => void) | undefined
+
+  /**
+   * https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios
+   * @platform ios
+   */
+  accessibilityIgnoresInvertColors?: boolean | undefined
+}
+export interface AccessibilityProps extends AccessibilityPropsAndroid, AccessibilityPropsIOS {
+  /**
+   * When true, indicates that the view is an accessibility element.
+   * By default, all the touchable elements are accessible.
+   */
+  accessible?: boolean | undefined
+
+  /**
+   * Provides an array of custom actions available for accessibility.
+   */
+  accessibilityActions?: ReadonlyArray<AccessibilityActionInfo> | undefined
+
+  /**
+   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+   */
+  accessibilityLabel?: string | undefined
+
+  /**
+   * Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.
+   */
+  accessibilityRole?: AccessibilityRole | undefined
+  /**
+   * Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on.
+   */
+  accessibilityState?: AccessibilityState | undefined
+  /**
+   * An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.
+   */
+  accessibilityHint?: string | undefined
+  /**
+   * Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars,
+   * it contains range information (minimum, current, and maximum).
+   */
+  accessibilityValue?: AccessibilityValue | undefined
+
+  /**
+   * When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom action.
+   */
+  onAccessibilityAction?: ((event: AccessibilityActionEvent) => void) | undefined
+}

package/types/Tooltip.d.ts

@@ -0,0 +1,17 @@
+import { ComponentType, ReactNode } from 'react'
+import type { A11yProps, CopyLang, PressableState, Tokens, Variant, ViewProps } from './common'
+
+type TooltipPosition = 'auto' | 'above' | 'right' | 'below' | 'left'
+
+export interface TooltipProps extends A11yProps, ViewProps {
+  children?: ReactNode | ((state: PressableState) => React.ReactNode)
+  content?: ReactNode
+  copy?: CopyLang
+  position?: TooltipPosition
+  tokens?: Tokens
+  variant?: Variant
+}
+
+declare const Tooltip: ComponentType<TooltipProps>
+
+export default Tooltip

package/types/TooltipButton.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType } from 'react'
+import type { A11yProps, PressableState, Tokens, Variant, ViewProps } from './common'
+
+export interface TooltipButtonProps extends A11yProps, ViewProps {
+  pressableState?: Partial<PressableState>
+  tokens?: Tokens
+  variant?: Variant
+}
+
+declare const TooltipButton: ComponentType<TooltipButtonProps>
+
+export default TooltipButton

package/types/Typography.d.ts

@@ -0,0 +1,27 @@
+import { ComponentType, ReactNode } from 'react'
+import type {
+  A11yProps,
+  SkeletonProps,
+  TextAlign,
+  TextProps,
+  Tokens,
+  Variant,
+  ViewProps
+} from './common'
+
+type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+export interface TypographyProps extends A11yProps, TextProps, ViewProps {
+  tokens?: Tokens
+  variant?: Variant
+  heading?: HeadingTag | true
+  tag?: 'blockquote' | 'code' | 'del' | 'em' | 'ins' | 'li' | 'strong' | 'label' | HeadingTag
+  block?: boolean
+  align?: TextAlign
+  children?: ReactNode
+  skeleton?: SkeletonProps
+}
+
+declare const Typography: ComponentType<TypographyProps>
+
+export default Typography

package/types/WebVideo.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType } from 'react'
+import type { HTMLAttrs } from './common'
+
+export interface WebVideoProps extends HTMLAttrs {
+  videoId: string
+  posterSrc: string
+  aspectRatio?: '16:9' | '4:3' | '1:1'
+  defaultVolume?: number
+  beginMuted?: boolean
+  videoLength: number
+  copy: 'en' | 'fr'
+  onStart: () => void
+}
+
+declare const WebVideo: ComponentType<WebVideoProps>
+
+export default WebVideo

package/types/common.d.ts

@@ -1,4 +1,22 @@
 import type { AriaRole, AriaAttributes } from 'react'
+import type {
+  AccessibilityProps,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  TextLayoutEventData
+} from './ReactNative'
+
+export interface A11yProps extends AccessibilityProps {}
+
+export interface InputSupportsProps {
+  copy?: CopyLang
+  label?: string
+  hint?: string
+  hintPosition?: 'inline' | 'below'
+  feedback?: string
+  tooltip?: string
+  validation?: 'error' | 'success'
+}
 
 export interface HTMLAttrs extends AriaAttributes {
   dataSet?: Record<string, any>
@@ -11,4 +29,148 @@ export interface HTMLAttrs extends AriaAttributes {
   title?: string
 }
 
+export interface TextInputHandlerProps {
+  // TODO: Typing RN synthetic event for web is going to be tricky...
+  // Come back to this and fix later.
+  onChange?: (text: string, event: any) => void
+  onChangeText?: (text: string) => void
+  onClear?: (event: any) => void
+  onSubmit?: (event: any) => void
+  onSubmitEditing?: (event: any) => void
+  onContentSizeChange?: ((w: number, h: number) => void) | undefined
+  onEndEditing?: (event: any) => void
+  onScroll?: (event: any) => void
+  onSelectionChange?: (event: any) => void
+  onKeyPress?: (event: any) => void
+  onKeyUp?: (event: any) => void
+  onKeyDown?: (event: any) => void
+}
+
+export interface CrossPlatformTextInputProps {
+  // Text props
+  maxFontSizeMultiplier?: number
+  nativeId?: string
+  onLayout?: (event: LayoutChangeEvent) => void
+  // Input value props
+  value?: string
+  initialValue?: string
+  readOnly?: boolean
+  inactive?: boolean
+  // Text input props
+  autoComplete?: string
+  autoCorrect?: boolean | 'on' | 'off'
+  autoFocus?: boolean
+  blurOnSubmit?: boolean
+  clearTextOnFocus?: boolean
+  editable?: boolean
+  keyboardType?: string
+  maxLength?: number
+  multiline?: boolean
+  numberOfLines?: number
+  placeholder?: string
+  placeholderTextColor?: string
+  returnKeyType?: string
+  secureTextEntry?: boolean
+  selectTextOnFocus?: boolean
+  spellCheck?: boolean
+}
+
+export interface NativeTextInputProps {
+  caretHidden?: boolean
+  clearButtonMode?: string
+  contextMenuHidden?: boolean
+  dataDetectorTypes?: string
+  disableFullscreenUI?: boolean
+  enablesReturnKeyAutomatically?: boolean
+  importantForAutofill?: string
+  inlineImageLeft?: string
+  keyboardAppearance?: string
+  returnKeyLabel?: string
+  rejectResponderTermination?: boolean
+  scrollEnabled?: boolean
+  selection?: any
+  selectionColor?: string
+  showSoftInputOnFocus?: boolean
+  textAlign?: string
+  textContentType?: string
+  passwordRules?: string
+  textBreakStrategy?: string
+  underlineColorAndroid?: string
+}
+
+export interface WebTextInputProps {
+  disabled?: boolean
+  dir?: 'auto' | 'ltr' | 'rtl'
+  lang?: string
+  pattern?: string
+}
+
+export interface TextInputProps
+  extends CrossPlatformTextInputProps,
+    NativeTextInputProps,
+    WebTextInputProps {}
+
+export interface ViewProps {
+  pointerEvents?: 'all' | 'none' | 'box-only' | 'box-none'
+  onLayout?: (event: LayoutChangeEvent) => void
+  nativeID?: string
+  testID?: string
+  dataSet?: Record<string, any>
+}
+
+export interface CrossPlatformTextProps {
+  numberOfLines?: number
+  selectable?: boolean
+}
+
+export interface NativeTextProps {
+  ellipsizeMode?: string
+  maxFontSizeMultiplier?: number
+  minimumFontScale?: number
+  onTextLayout?: (event: NativeSyntheticEvent<TextLayoutEventData>) => void
+  suppressHighlighting?: boolean
+  textBreakStrategy?: string
+}
+
+export interface WebTextProps {
+  dir?: 'auto' | 'ltr' | 'rtl'
+  lang?: string
+}
+
+export interface TextProps extends CrossPlatformTextProps, NativeTextProps, WebTextProps {}
+
+export type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify'
+
+export type Tokens = Record<string, any>
+
+export type CopyLang = 'en' | 'fr'
+
 export type Variant = Record<string, string | number | boolean>
+
+export interface PressableState {
+  pressed: boolean
+  hover: boolean
+  focus: boolean
+}
+
+// TODO: Make this more specific:
+// https://telus.github.io/universal-design-system/components/allium/skeleton/#props
+export type SkeletonProps = Record<string, any>
+
+export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+export type LayoutTag =
+  | HeadingTag
+  | 'article'
+  | 'aside'
+  | 'blockquote'
+  | 'footer'
+  | 'figure'
+  | 'form'
+  | 'header'
+  | 'ul'
+  | 'li'
+  | 'main'
+  | 'nav'
+  | 'section'
+  | 'label'