@telus-uds/components-base 2.0.0 → 2.0.1

package/types/ExpandCollapse.d.ts

@@ -0,0 +1,65 @@
+import React 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/FileUpload.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentType } from 'react'
+
+export interface FileUploadTokens {
+  buttonBackgroundColor?: string
+  buttonBorderColor?: string
+  buttonBorderRadius?: number
+  buttonBorderWidth?: string
+  buttonTextColor?: string
+  buttonHeight?: string
+  buttonMinWidth?: string
+  buttonWidth?: string
+  notificationBackgroundColor?: string
+  notificationBorderColor?: string
+  notificationBorderRadius?: number
+  notificationTextColor?: string
+  notificationDismissButtonGap?: string
+  notificationDismissIcon?: string
+  notificationDismissIconColor?: string
+  notificationIcon?: string
+  notificationIconColor?: string
+  notificationIconGap?: string
+  notificationIconSize?: number
+}
+
+export interface FileUploadProps {
+  tokens?: FileUploadTokens
+  variant?: Record<string, any>
+  copy?: 'en' | 'fr'
+  fileTypes?: string[]
+  allowMultipleFiles?: boolean
+  maxFileSize?: number
+  maxFilesCount?: number
+  onUpload?: (files: any) => void
+  onDelete?: (file: any) => void
+  documentPicker?: Record<string, any>
+}
+
+declare const FileUpload: ComponentType<FileUploadProps>
+
+export default FileUpload

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/Portal.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react'
+
+export interface PortalProps {
+  children: ReactNode
+}

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,40 @@
+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
+  lineRadius?: number
+  inverse?: boolean
+}
+
+export type TypographyTokens = {
+  fontName?: string
+  superScriptFontSize?: number
+  fontWeight?: number
+  fontSize?: number
+  color?: string
+  lineHeight?: number
+  textTransform?: TextTransform
+  fontScaleCap?: number
+  letterSpacing?: LetterSpacing
+}

package/types/index.d.ts

@@ -0,0 +1,78 @@
+export { default as Badge } from './Badge'
+export type { BadgeProps, BadgeVariants, BadgeTokens } from './Badge'
+
+export { default as Box } from './Box'
+export type { BoxVariants, BoxTokens, BoxProps } from './Box'
+
+export { default as ChevronLink } from './ChevronLink'
+export { ChevronLinkTokens, ChevronLinkProps, HrefProps } from './ChevronLink'
+
+export { default as Checkbox } from './Checkbox'
+export { CheckboxProps, CheckboxTokens } from './Checkbox'
+
+export { default as CheckboxCardGroup } from './CheckboxCardGroup'
+export {
+  CheckboxCardGroupProps,
+  CheckboxCardGroupTokens,
+  checkboxCardTokens
+} from './CheckboxCardGroup'
+
+export { default as Divider } from './Divider'
+export { DividerVariants, DividerProps, DividerTokens } from './Divider'
+
+export { default as ExpandCollapse } from './ExpandCollapse'
+export {
+  ExpandCollapseVariants,
+  ExpandCollapseTokens,
+  ExpandCollapseControlTokens,
+  ExpandFnProps,
+  ExpandCollapseProps,
+  ExpandCollapsePanelProps
+} from './ExpandCollapse'
+
+export { default as FileUpload } from './FileUpload'
+export { FileUploadTokens, FileUploadProps } from './FileUpload'
+
+export { default as HorizontalScrollButton } from './HorizontalScrollButton'
+export { HorizontalScrollButtonTokens } from './HorizontalScrollButton'
+
+export { default as Icon } from './Icon'
+export { IconProps, IconTokens, IconVariant, IconPositionLeftRight } from './Icon'
+
+export { default as Link } from './Link'
+export { LinkProps, LinkSize, LinkAndTextButtonVariants, LinkTokens } from './Link'
+
+export { default as List } from './List'
+export { ListVariants, ListTokens, ListProps, ListItemProps, ListItemTokens } from './List'
+
+export { default as Search } from './Search'
+export { SearchTokens, SearchProps } from './Search'
+
+export { default as Select } from './Select'
+export { SelectTokens, SelectProps, SelectItemProps, SelectGroupProps } from './Select'
+
+export { default as Spacer } from './Spacer'
+export { SpacerProps } from './Spacer'
+
+export { default as StackView } from './StackView'
+export { StackViewTokens, StackViewProps } from './StackView'
+
+export { default as Tabs } from './Tabs'
+export { TabsProps, TabsTokens, TabSelectorProps, TabsVariant, TabsItem } from './Tabs'
+
+export { default as TextButton } from './TextButton'
+export { TextButtonProps } from './TextButton'
+
+export { default as ToggleSwitch } from './ToggleSwitch'
+export { ToggleSwitchTokens, ToggleSwitchProps } from './ToggleSwitch'
+
+export { default as Tooltip } from './ToolTip'
+export { TooltipTokens, TooltipVariants, TooltipProps } from './ToolTip'
+
+export { default as Typography } from './Typography'
+export { TypographyProps, TypographyVariants, TypographyTokens } from './Typography'
+
+export { default as Portal } from './Portal'
+export { PortalProps } from './Portal'
+
+export * from './Common'

package/.eslintrc.js

@@ -1,9 +0,0 @@
-module.exports = {
-  rules: {
-    // Default props in React are deprecated outside of class-based components. Globally we use an
-    // option that skips this rule for functional components, but it doesn't play nicely with forwardRef.
-    // Since we don't intend to ever have class-based components within UDS components-base,
-    // but we do use forwardRef, best to turn off the rule completely for this package.
-    'react/require-default-props': 'off'
-  }
-}