@telus-uds/components-web 1.12.0 → 2.1.0

package/package.json

@@ -5,21 +5,21 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.41.0",
-    "@telus-uds/system-constants": "^1.2.0",
+    "@telus-uds/components-base": "1.43.0",
+    "@telus-uds/system-constants": "^1.2.1",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.26.0",
+    "@telus-uds/system-theme-tokens": "^2.26.1",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0"
   },
   "description": "UDS mult-brand web components",
   "devDependencies": {
-    "@telus-uds/browserslist-config": "^1.0.4",
+    "@telus-uds/browserslist-config": "^1.0.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^13.3.0",
     "@types/react": "^18.0.0",
@@ -32,7 +32,7 @@
     "webpack": "5.x"
   },
   "homepage": "https://github.com/telus/universal-design-system#readme",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "main": "lib/index.js",
   "module": "lib-module/index.js",
   "name": "@telus-uds/components-web",
@@ -47,10 +47,11 @@
     "url": "git+https://github.com/telus/universal-design-system.git"
   },
   "scripts": {
-    "build": "npm run build:code",
+    "build": "npm run build:code && npm run build:docs",
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
     "build:code": "npm run build:main && npm run build:module",
+    "build:docs": "babel-node --plugins=@telus-uds/babel-plugin-react-docgen generate-component-docs.js",
     "format": "prettier --write .",
     "lint": "telus-standard",
     "lint:fix": "telus-standard --fix",
@@ -61,5 +62,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.12.0"
+  "version": "2.1.0"
 }

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -74,10 +74,13 @@ const getItems = (items, params, concatenatePaths) => {
       const isLast = i === filteredItems.length - 1
       const breadcrumbName = getBreadcrumbName(item, params)
       const href = getPath(item.path, params, concatenatePaths, paths)
+      const { LinkRouter, linkRouterProps } = item
       return {
         breadcrumbName,
         href,
         current: isLast,
+        LinkRouter,
+        linkRouterProps,
         ...omitProps(selectProps(item))
       }
     })
@@ -103,7 +106,6 @@ const Breadcrumbs = ({
   linkRouterProps,
   params = {},
   tokens,
-  reactRouterLinkComponent,
   routes,
   variant,
   LinkRouter,
@@ -157,25 +159,25 @@ const Breadcrumbs = ({
             href,
             current,
             breadcrumbName,
-            reactRouterLinkComponent: linkComponent = reactRouterLinkComponent,
             LinkRouter: ItemLinkRouter = LinkRouter,
             linkRouterProps: itemLinkRouterProps,
             ...itemRest
-          }) => (
-            <Item
-              {...itemRest}
-              current={current}
-              href={href}
-              tokens={tokens}
-              key={href}
-              linkRouterProps={{ ...linkRouterProps, itemLinkRouterProps }}
-              reactRouterLinkComponent={linkComponent}
-              variant={{ ...variant, size: 'micro' }}
-              LinkRouter={ItemLinkRouter}
-            >
-              {breadcrumbName}
-            </Item>
-          )
+          }) => {
+            return (
+              <Item
+                {...itemRest}
+                current={current}
+                href={href}
+                tokens={tokens}
+                key={href}
+                linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
+                variant={{ ...variant, size: 'micro' }}
+                LinkRouter={ItemLinkRouter}
+              >
+                {breadcrumbName}
+              </Item>
+            )
+          }
         )}
       </StyledList>
       {metadata}
@@ -198,11 +200,6 @@ Breadcrumbs.propTypes = {
    * React Router params.
    */
   params: PropTypes.object,
-  /**
-   * React Router Link component.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * An array of routes to be displayed as breadcrumbs.
    */

package/src/Breadcrumbs/Item/Item.jsx

@@ -7,8 +7,7 @@ import {
   applyTextStyles,
   clickProps,
   selectSystemProps,
-  useThemeTokens,
-  withLinkRouter
+  useThemeTokens
 } from '@telus-uds/components-base'
 import { htmlAttrs } from '../../utils'
 
@@ -31,11 +30,12 @@ const Item = forwardRef(
   (
     {
       href,
-      reactRouterLinkComponent: ReactRouterLink,
       children,
       current = false,
       tokens,
       variant = { light: true }, // `light` variant (shared with the `Link` component) is default by design
+      LinkRouter,
+      linkRouterProps,
       ...rest
     },
     ref
@@ -50,13 +50,7 @@ const Item = forwardRef(
       ...themeTokens
     } = useThemeTokens('Breadcrumbs', tokens, variant)
 
-    const linkOptions = clickProps.toPressProps(selectProps(rest))
-
-    if (ReactRouterLink) {
-      linkOptions.to = href
-    } else {
-      linkOptions.href = href
-    }
+    const linkOptions = { ...clickProps.toPressProps(selectProps(rest)), href }
 
     return (
       <StyledItemContainer {...themeTokens}>
@@ -66,29 +60,16 @@ const Item = forwardRef(
           </Typography>
         ) : (
           <>
-            {ReactRouterLink ? (
-              <ReactRouterLink
-                {...linkOptions}
-                tokens={{ color, blockFontSize: fontSize }}
-                // TODO refactor
-                // eslint-disable-next-line react/no-unstable-nested-components
-                component={(props) => {
-                  return <Link {...props} variant={variant} />
-                }}
-                ref={ref}
-              >
-                {children}
-              </ReactRouterLink>
-            ) : (
-              <Link
-                {...linkOptions}
-                tokens={{ color, blockFontSize: fontSize }}
-                ref={ref}
-                variant={variant}
-              >
-                {children}
-              </Link>
-            )}
+            <Link
+              {...linkOptions}
+              ref={ref}
+              tokens={{ color, blockFontSize: fontSize }}
+              LinkRouter={LinkRouter}
+              linkRouterProps={linkRouterProps}
+              variant={variant}
+            >
+              {children}
+            </Link>
             <IconContainer {...themeTokens}>
               <ChevronRightIcon size={iconSize} color={iconColor} />
             </IconContainer>
@@ -114,16 +95,10 @@ Item.propTypes = {
    */
   current: PropTypes.bool,
   /**
-   * Target URL. This will be converted to `to` if the `reactRouterLinkComponent`
+   * Target URL. This will be converted to `to` if the `LinkRouter`
    * prop is provided to the `Item` or parent `Breadcrumbs` element.
    */
   href: PropTypes.string.isRequired,
-  /**
-   * React Router Link component. This will be passed down from the parent
-   * `<Breadcrumbs>` if the parent has a `reactRouterLinkComponent` provided.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Variant to render.
    */
@@ -134,8 +109,7 @@ Item.propTypes = {
 // - probably related https://github.com/yannickcr/eslint-plugin-react/issues/2760
 Item.defaultProps = {
   current: false,
-  reactRouterLinkComponent: undefined,
   variant: { light: true }
 }
 
-export default withLinkRouter(Item)
+export default Item

package/src/Footnote/Footnote.jsx

@@ -32,7 +32,6 @@ const StyledFootnote = styled.div(
     width: '100vw',
     backgroundColor: footnoteBackground,
     display: 'block',
-    boxShadow: '0 0 16px 0 rgba(0, 0, 0, 0.1)',
     transform: 'translateY(100%)',
     transition: 'transform 500ms ease-out',
     '@media() (prefers-reduced-motion: reduce)': {
@@ -63,13 +62,23 @@ const StyledFootnoteHeader = styled.div({
   width: '100%'
 })
 
-const StyledHeader = styled.div(({ headerMargin }) => ({
-  alignItems: 'center',
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  margin: headerMargin
-}))
+const StyledHeader = styled.div(
+  ({
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom
+  }) => ({
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingTop: footnoteHeaderPaddingTop,
+    paddingBottom: footnoteHeaderPaddingBottom,
+    paddingRight: footnoteHeaderPaddingRight,
+    paddingLeft: footnoteHeaderPaddingLeft
+  })
+)
 
 const StyledFootnoteBody = styled.div(
   {
@@ -134,6 +143,7 @@ const CloseButton = styled.button(
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
+    backgroundColor: 'white',
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -208,6 +218,14 @@ const Footnote = (props) => {
     footnoteBodyPaddingRight,
     footnoteBodyPaddingTop,
     footnoteBodyPaddingBottom,
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom,
+    headerLineHeight,
+    headerFontSize,
+    headerFontName,
+    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -423,10 +441,23 @@ const Footnote = (props) => {
         >
           <ContentContainer maxWidth={maxWidth}>
             <StyledFootnoteHeader ref={headerRef}>
-              <StyledHeader ref={headingRef} headerMargin={headerMargin}>
-                <Typography block heading tabIndex={-1} variant={{ size: 'h4' }}>
+              <StyledHeader
+                ref={headingRef}
+                footnoteHeaderPaddingLeft={footnoteHeaderPaddingLeft}
+                footnoteHeaderPaddingRight={footnoteHeaderPaddingRight}
+                footnoteHeaderPaddingTop={footnoteHeaderPaddingTop}
+                footnoteHeaderPaddingBottom={footnoteHeaderPaddingBottom}
+                headerMargin={headerMargin}
+              >
+                <h2
+                  style={{
+                    fontSize: `${headerFontSize}px`,
+                    lineHeight: `${headerLineHeight}px`,
+                    fontFamily: `${headerFontName}${headerFontWeight}normal`
+                  }}
+                >
                   {getCopy('heading')}
-                </Typography>
+                </h2>
                 <CloseButton
                   closeButtonBorder={`${closeButtonBorderSize}px solid ${closeButtonBorderColor}`}
                   closeButtonWidth={`${closeButtonWidth}px`}

package/src/index.js

@@ -38,4 +38,6 @@ export { default as NavigationBar } from './NavigationBar'
 export { default as Progress } from './Progress'
 export { default as SkeletonProvider } from './SkeletonProvider'
 
+export { ssrStyles } from './utils'
+
 export * from './baseExports'

package/src/utils/index.js

@@ -1,17 +1,20 @@
+import { warn, deprecate } from './logger'
 import { transformGradient } from './transforms'
 import useTypographyTheme from './useTypographyTheme'
 import htmlAttrs from './htmlAttrs'
-import { warn } from './logger'
 import media from './media'
+import ssrStyles from './ssr'
 import renderStructuredContent from './renderStructuredContent'
 import useOverlaidPosition from './useOverlaidPosition'
 
 export {
+  deprecate,
   htmlAttrs,
   transformGradient,
   useTypographyTheme,
   warn,
   media,
   renderStructuredContent,
+  ssrStyles,
   useOverlaidPosition
 }

package/src/utils/ssr.js

@@ -0,0 +1,37 @@
+import { ServerStyleSheet } from 'styled-components'
+import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base'
+/**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * This wraps ssrStyles from @telus-uds/components-base and adds Styled Components support.
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+const ssrStyles = (
+  appName = 'Allium app',
+  { styleGetters = [], collectStyles = (renderedApp) => renderedApp } = {}
+) => {
+  const sheet = new ServerStyleSheet()
+  const getStyledComponentsStyles = () => {
+    const styles = sheet.getStyleElement()
+    sheet.seal()
+    return styles
+  }
+
+  return baseSsrStyles(appName, {
+    styleGetters: [getStyledComponentsStyles, ...styleGetters],
+    collectStyles: (renderedApp) => collectStyles(sheet.collectStyles(renderedApp))
+  })
+}
+
+export default ssrStyles

package/types/BlockQuote.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType, ElementType, ReactNode } from 'react'
+import type { HTMLAttrs } from './common'
+
+export interface BlockQuoteProps extends HTMLAttrs {
+  children: ReactNode
+  link?: string
+  linkHref?: string
+  additionalInfo?: string
+  textStyle?: 'large' | 'heading'
+  LinkRouter?: ElementType
+  linkRouterProps?: Record<string, any>
+}
+
+declare const BlockQuote: ComponentType<BlockQuoteProps>
+
+export default BlockQuote

package/types/Box.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react'
+import type { A11yProps, LayoutTag, Tokens, Variant, ViewProps } from './common'
+import { ComponentTypeWithForwardRef } from './ComponentTypeWithForwardRef'
+
+export interface SpacingObjectProps {
+  xs?: number
+  sm?: number
+  md?: number
+  lg?: number
+  xl?: number
+  space?: number
+  options?: {
+    variant?: Variant
+    size?: number
+  }
+}
+
+export interface BoxProps extends A11yProps, ViewProps {
+  variant?: Variant
+  tokens?: Tokens
+  space?: number | SpacingObjectProps
+  vertical?: number | SpacingObjectProps
+  horizontal?: number | SpacingObjectProps
+  bottom?: number | SpacingObjectProps
+  left?: number | SpacingObjectProps
+  right?: number | SpacingObjectProps
+  top?: number | SpacingObjectProps
+  flex?: number
+  scroll?: boolean | Record<string, any>
+  tag?: LayoutTag
+  testID?: string
+  dataSet?: Record<string, any>
+  children: ReactNode
+}
+
+declare const Box: ComponentTypeWithForwardRef<BoxProps, any>
+
+export default Box

package/types/BreadcrumbItem.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentType, ReactNode } from 'react'
+
+interface BreadcrumbItemProps {
+  href: string
+  children: ReactNode
+  current?: boolean
+}
+
+declare const BreadcrumbItem: ComponentType<BreadcrumbItemProps>
+
+export default BreadcrumbItem

package/types/Breadcrumbs.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { HTMLAttrs } from './common'
+import BreadcrumbItem from './BreadcrumbItem'
+
+export interface BreadcrumbRouteProps {
+  path?: string
+  breadcrumbName?: string
+}
+
+export interface BreadcrumbsProps extends HTMLAttrs {
+  routes?: BreadcrumbRouteProps[]
+  baseUrl?: string
+  params?: Record<string, any>
+  children?: ReactNode
+}
+
+declare const Breadcrumbs: ComponentType<BreadcrumbsProps> & {
+  Item: typeof BreadcrumbItem
+}
+
+export default Breadcrumbs

package/types/ComponentTypeWithForwardRef.d.ts

@@ -0,0 +1,5 @@
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react'
+
+// declare const ComponentTypeWithForwardRef: ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
+export interface ComponentTypeWithForwardRef<P, T>
+  extends ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> {}

package/types/MultiSelectFilter.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType } from 'react'
+
+interface MultiSelectFilterItem {
+  label: string
+  id?: string
+}
+
+export interface MultiSelectFilterProps {
+  label: string
+  subtitle?: string
+  id?: string
+  variant?: string
+  tokens?: []
+  items: MultiSelectFilterItem[]
+  values?: string[]
+  initialValues?: string[]
+  maxValues?: number
+  onChange?: (e: string[]) => void
+  copy?: 'en' | 'fr'
+  readOnly?: string
+  inactive?: string
+  rowLimit?: number
+}
+
+declare const MultiSelectFilter: ComponentType<MultiSelectFilterProps>
+
+export default MultiSelectFilter

package/types/QuantitySelector.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentType } from 'react'
+import type { HTMLAttrs, InputSupportsProps, Tokens } from './common'
+
+export interface QuantitySelectorProps
+  extends HTMLAttrs,
+    Omit<InputSupportsProps, 'feedback' | 'validation'> {
+  minNumber?: number
+  maxNumber?: number
+  onChange?: (value: number, event: any) => void
+  defaultValue?: number
+  accessibilityLabel?: string
+  variant?: {
+    alternative: boolean
+  }
+  tokens?: Tokens
+}
+
+declare const QuantitySelector: ComponentType<QuantitySelectorProps>
+
+export default QuantitySelector