@telus-uds/components-base 1.70.0 → 1.72.0

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

package/types/index.d.ts

@@ -0,0 +1,62 @@
+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 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 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 * from './Common'

package/lib/utils/ssr-media-query/create-stylesheet.js

@@ -1,76 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _cssMediaquery = _interopRequireDefault(require("css-mediaquery"));
-var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _inject = require("./utils/inject");
-var _createDeclarationBlock = _interopRequireDefault(require("./utils/create-declaration-block"));
-var _hash = _interopRequireDefault(require("./hash"));
-var _common = require("./utils/common");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const createStyleSheet = stylesWithQuery => {
-  if (!stylesWithQuery) return {
-    ids: {},
-    styles: {},
-    fullStyles: {}
-  };
-  let cleanStyles;
-  let ids = {};
-  Object.keys(stylesWithQuery).forEach(key => {
-    if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
-    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(_common.isMediaOrPseudo);
-    if (_Platform.default.OS === 'web') {
-      cleanStyles = (0, _common.deepClone)(stylesWithQuery);
-      mediaQueriesAndPseudoClasses.forEach(query => {
-        var _ids;
-        const css = (0, _createDeclarationBlock.default)(stylesWithQuery[key][query]);
-        const stringHash = `rnmq-${(0, _hash.default)(`${key}${query}${css}`)}`;
-        const rule = (0, _common.createCssRule)(query, stringHash, css);
-        (0, _inject.addCss)(`${stringHash}`, rule);
-        delete cleanStyles[key][query];
-        ids = {
-          ...ids,
-          [key]: `${(_ids = ids) !== null && _ids !== void 0 && _ids[key] ? `${ids[key]} ` : ''}${stringHash}`
-        };
-      });
-    } else {
-      cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
-      mediaQueriesAndPseudoClasses.forEach(str => {
-        if ((0, _common.isMedia)(str)) {
-          const mqStr = str.replace('@media', '');
-          const {
-            width,
-            height
-          } = _Dimensions.default.get('window');
-          const isMatchingMediaQuery = _cssMediaquery.default.match(mqStr, {
-            width,
-            height,
-            orientation: width > height ? 'landscape' : 'portrait',
-            'aspect-ratio': width / height
-          });
-          if (isMatchingMediaQuery) {
-            cleanStyles = {
-              ...cleanStyles,
-              [key]: {
-                ...cleanStyles[key],
-                ...stylesWithQuery[key][str]
-              }
-            };
-          }
-        }
-        delete cleanStyles[key][str];
-      });
-    }
-  });
-  return {
-    ids,
-    styles: cleanStyles,
-    fullStyles: stylesWithQuery
-  };
-};
-var _default = createStyleSheet;
-exports.default = _default;

package/lib-module/utils/ssr-media-query/create-stylesheet.js

@@ -1,68 +0,0 @@
-import mediaQuery from 'css-mediaquery';
-import Dimensions from "react-native-web/dist/exports/Dimensions";
-import Platform from "react-native-web/dist/exports/Platform";
-import { addCss } from './utils/inject';
-import createDeclarationBlock from './utils/create-declaration-block';
-import hash from './hash';
-import { isMediaOrPseudo, isMedia, deepClone, createCssRule } from './utils/common';
-const createStyleSheet = stylesWithQuery => {
-  if (!stylesWithQuery) return {
-    ids: {},
-    styles: {},
-    fullStyles: {}
-  };
-  let cleanStyles;
-  let ids = {};
-  Object.keys(stylesWithQuery).forEach(key => {
-    if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
-    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
-    if (Platform.OS === 'web') {
-      cleanStyles = deepClone(stylesWithQuery);
-      mediaQueriesAndPseudoClasses.forEach(query => {
-        var _ids;
-        const css = createDeclarationBlock(stylesWithQuery[key][query]);
-        const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`;
-        const rule = createCssRule(query, stringHash, css);
-        addCss(`${stringHash}`, rule);
-        delete cleanStyles[key][query];
-        ids = {
-          ...ids,
-          [key]: `${(_ids = ids) !== null && _ids !== void 0 && _ids[key] ? `${ids[key]} ` : ''}${stringHash}`
-        };
-      });
-    } else {
-      cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
-      mediaQueriesAndPseudoClasses.forEach(str => {
-        if (isMedia(str)) {
-          const mqStr = str.replace('@media', '');
-          const {
-            width,
-            height
-          } = Dimensions.get('window');
-          const isMatchingMediaQuery = mediaQuery.match(mqStr, {
-            width,
-            height,
-            orientation: width > height ? 'landscape' : 'portrait',
-            'aspect-ratio': width / height
-          });
-          if (isMatchingMediaQuery) {
-            cleanStyles = {
-              ...cleanStyles,
-              [key]: {
-                ...cleanStyles[key],
-                ...stylesWithQuery[key][str]
-              }
-            };
-          }
-        }
-        delete cleanStyles[key][str];
-      });
-    }
-  });
-  return {
-    ids,
-    styles: cleanStyles,
-    fullStyles: stylesWithQuery
-  };
-};
-export default createStyleSheet;

package/src/utils/ssr-media-query/create-stylesheet.js

@@ -1,61 +0,0 @@
-import mediaQuery from 'css-mediaquery'
-import { Dimensions, Platform } from 'react-native'
-import { addCss } from './utils/inject'
-import createDeclarationBlock from './utils/create-declaration-block'
-import hash from './hash'
-import { isMediaOrPseudo, isMedia, deepClone, createCssRule } from './utils/common'
-
-const createStyleSheet = (stylesWithQuery) => {
-  if (!stylesWithQuery) return { ids: {}, styles: {}, fullStyles: {} }
-  let cleanStyles
-  let ids = {}
-  Object.keys(stylesWithQuery).forEach((key) => {
-    if (!stylesWithQuery?.[key]) return
-
-    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
-    if (Platform.OS === 'web') {
-      cleanStyles = deepClone(stylesWithQuery)
-      mediaQueriesAndPseudoClasses.forEach((query) => {
-        const css = createDeclarationBlock(stylesWithQuery[key][query])
-        const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`
-        const rule = createCssRule(query, stringHash, css)
-
-        addCss(`${stringHash}`, rule)
-        delete cleanStyles[key][query]
-
-        ids = {
-          ...ids,
-          [key]: `${ids?.[key] ? `${ids[key]} ` : ''}${stringHash}`
-        }
-      })
-    } else {
-      cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery))
-      mediaQueriesAndPseudoClasses.forEach((str) => {
-        if (isMedia(str)) {
-          const mqStr = str.replace('@media', '')
-          const { width, height } = Dimensions.get('window')
-
-          const isMatchingMediaQuery = mediaQuery.match(mqStr, {
-            width,
-            height,
-            orientation: width > height ? 'landscape' : 'portrait',
-            'aspect-ratio': width / height
-          })
-
-          if (isMatchingMediaQuery) {
-            cleanStyles = {
-              ...cleanStyles,
-              [key]: { ...cleanStyles[key], ...stylesWithQuery[key][str] }
-            }
-          }
-        }
-
-        delete cleanStyles[key][str]
-      })
-    }
-  })
-
-  return { ids, styles: cleanStyles, fullStyles: stylesWithQuery }
-}
-
-export default createStyleSheet