@telus-uds/components-base 3.23.0 → 3.25.0

package/types/Shortcuts.d.ts

@@ -0,0 +1,136 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { IconVariant } from './Icon'
+
+export interface ShortcutsProps {
+  /**
+   * ShortcutsItem components to render as shortcuts.
+   */
+  children: ReactNode
+  /**
+   * Shortcuts variant options.
+   */
+  variant?: ShortcutsVariant
+  /**
+   * Custom tokens for styling the Shortcuts container.
+   */
+  tokens?: ShortcutsTokens
+  /**
+   * Hide labels for all shortcuts items globally.
+   * Can be overridden by individual ShortcutsItem hideLabel prop.
+   */
+  hideLabels?: boolean
+  /**
+   * Icon variant to apply to all shortcuts items.
+   * Can be overridden by individual ShortcutsItem iconVariant prop.
+   */
+  iconVariant?: IconVariant
+}
+
+export type ShortcutsVariant = {
+  /**
+   * Width distribution of shortcuts items.
+   * - 'equal': All items have equal width (default)
+   * - 'dynamic': Items size based on content
+   */
+  width?: 'equal' | 'dynamic'
+}
+
+export interface ShortcutsTokens {
+  mainContainerGap?: number
+  mainContainerPaddingHorizontal?: number
+  mainContainerPaddingVertical?: number
+  itemContainerMinHeight?: number
+  itemContainerPaddingHorizontal?: number
+  itemContainerPaddingVertical?: number
+  itemContainerBackgroundColor?: string
+  itemContainerBorderRadius?: number
+  labelFontColor?: string
+  labelFontSize?: number
+  labelFontWeight?: number
+  labelLineHeight?: number
+  labelMarginTop?: number
+}
+
+export interface ShortcutsItemProps {
+  /**
+   * Label text for the shortcut item.
+   */
+  label: string
+  /**
+   * Icon component to display.
+   */
+  icon?: ComponentType<any>
+  /**
+   * Image to display instead of icon.
+   */
+  image?: ShortcutsItemImage
+  /**
+   * URL to navigate to when pressed.
+   */
+  href?: string
+  /**
+   * Function to call when the item is pressed.
+   */
+  onPress?: () => void
+  /**
+   * Hide the label for this specific item.
+   * Overrides parent Shortcuts hideLabels prop.
+   */
+  hideLabel?: boolean
+  /**
+   * Icon variant for this specific item.
+   * Overrides parent Shortcuts iconVariant prop.
+   */
+  iconVariant?: IconVariant
+  /**
+   * Custom tokens for styling this item.
+   */
+  tokens?: ShortcutsItemTokens
+  /**
+   * Variant options for this item.
+   */
+  variant?: ShortcutsItemVariant
+  /**
+   * Callback function that receives the pressable state.
+   * Can be used to dynamically set iconVariant based on press state.
+   */
+  onPressableStateChange?: (state: PressableState) => IconVariant | void
+}
+
+export type ShortcutsItemImage = {
+  src: string
+  alt: string
+}
+
+export type ShortcutsItemVariant = {
+  /**
+   * Whether the item is in a pressed state.
+   */
+  pressed?: boolean
+}
+
+export interface ShortcutsItemTokens {
+  containerMinHeight?: number
+  containerPaddingHorizontal?: number
+  containerPaddingVertical?: number
+  containerBackgroundColor?: string
+  containerBorderRadius?: number
+  labelFontColor?: string
+  labelFontSize?: number
+  labelFontWeight?: number
+  labelLineHeight?: number
+  labelMarginTop?: number
+  iconSize?: number
+}
+
+export type PressableState = {
+  pressed: boolean
+  hovered?: boolean
+  focused?: boolean
+}
+
+declare const Shortcuts: ComponentType<ShortcutsProps>
+declare const ShortcutsItem: ComponentType<ShortcutsItemProps>
+
+export { Shortcuts, ShortcutsItem }
+export default Shortcuts

package/types/Status.d.ts

@@ -0,0 +1,42 @@
+import type { Variant } from '../../components-web/types/common'
+import { ComponentType, ReactNode } from 'react'
+
+import { IconProps } from './Icon'
+
+export type StatusTokensProps = {
+  backgroundColor: string
+  backgroundGradient: string
+  borderColor: string
+  borderRadius: number | string
+  borderWidth: number | string
+  fontName: string
+  fontSize: number | string
+  fontWeight: number | string
+  icon: IconProps
+  iconColor: string
+  iconGradient: string
+  marginLeft: string | number
+  paddingBottom: string | number
+  paddingLeft: string | number
+  paddingRight: string | number
+  paddingTop: string | number
+  textColor: string
+  textLineHeight: string | number
+  iconSize: number | string
+  iconPaddingTop: number | string
+}
+
+export interface StatusProps {
+  children: ReactNode
+  variant?: Variant
+  tokens?: Partial<StatusTokensProps>
+  customGradient?: (
+    gradient: { colors: string[]; start: { x: number; y: number }; end: { x: number; y: number } },
+    styles: Record<string, unknown>,
+    content: ReactNode
+  ) => ReactNode
+}
+
+declare const Status: ComponentType<StatusProps>
+
+export default Status

package/types/index.d.ts

@@ -51,6 +51,18 @@ export { SearchTokens, SearchProps } from './Search'
 export { default as Select } from './Select'
 export { SelectTokens, SelectProps, SelectItemProps, SelectGroupProps } from './Select'
 
+export { default as Shortcuts, ShortcutsItem } from './Shortcuts'
+export {
+  ShortcutsProps,
+  ShortcutsTokens,
+  ShortcutsVariant,
+  ShortcutsItemProps,
+  ShortcutsItemTokens,
+  ShortcutsItemVariant,
+  ShortcutsItemImage,
+  PressableState
+} from './Shortcuts'
+
 export { default as Spacer } from './Spacer'
 export { SpacerProps } from './Spacer'
 
@@ -78,4 +90,7 @@ export { PortalProps } from './Portal'
 export { default as Listbox } from './Listbox'
 export { ListboxProps, ListboxTokens } from './Listbox'
 
+export { default as Status } from './Status'
+export { StatusProps, StatusTokensProps } from './Status'
+
 export * from './Common'