@telus-uds/components-web 2.43.0 → 3.0.0

package/lib-module/Breadcrumbs/Breadcrumbs.js

@@ -1,250 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { isEqual } from 'lodash';
-import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter, getTokensPropType, useThemeTokens, useViewport } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
-import Item from './Item/Item';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledList = /*#__PURE__*/styled.ol.withConfig({
-  displayName: "Breadcrumbs__StyledList",
-  componentId: "components-web__sc-gwwxrc-0"
-})({
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
-  listStyle: 'none',
-  listStylePosition: 'inside',
-  margin: 0,
-  padding: 0,
-  alignItems: 'baseline'
-});
-const omitProps = _ref => {
-  let {
-    current,
-    path,
-    breadcrumbName,
-    indexRoute,
-    childRoutes,
-    component,
-    ...props
-  } = _ref;
-  return props;
-};
-const getBreadcrumbName = (item, params) => {
-  if (!item.breadcrumbName) {
-    return null;
-  }
-  let {
-    breadcrumbName
-  } = item;
-  Object.keys(params).forEach(key => {
-    breadcrumbName = breadcrumbName.replace(`:${key}`, params[key]);
-  });
-  return breadcrumbName;
-};
-const getPath = (path, params, concatenatePaths, paths) => {
-  let p = path;
-  if (concatenatePaths) {
-    p = p.replace(/^\//, '');
-    Object.keys(params).forEach(key => {
-      p = p.replace(`:${key}`, params[key]);
-    });
-    if (p) {
-      paths.push(p);
-    }
-    return `/${paths.join('/')}`;
-  }
-  return p;
-};
-const getItems = (items, params, concatenatePaths) => {
-  const paths = [];
-  return items.filter(item => item.path).map((item, i, filteredItems) => {
-    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: item.isExpander ? '#' : href,
-      current: isLast,
-      LinkRouter,
-      linkRouterProps,
-      onPress: item.onPress,
-      ...omitProps(selectProps(item))
-    };
-  });
-};
-const getStructuredData = (items, baseUrl) => {
-  return items.map((item, index) => ({
-    '@type': 'ListItem',
-    position: index + 1,
-    item: {
-      '@id': `${baseUrl || ''}${item.href}`,
-      name: item.breadcrumbName
-    }
-  }));
-};
-const MAX_ITEMS_ON_XS_VIEWPORT = 4;
-
-/**
- * Display a hierarchy of links, commonly used for navigation.
- */
-const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    baseUrl,
-    children,
-    linkRouterProps,
-    params = {},
-    tokens,
-    routes,
-    variant,
-    LinkRouter,
-    ...rest
-  } = _ref2;
-  // React Helmet can cause a memory leak in SSR if not properly configured.
-  // Only run it in SSR if theme options tells us to.
-  /* const {
-  themeOptions: { enableHelmetSSR }
-  } = useTheme() */
-  // const isHydrating = useHydrationContext()
-  // const isSSR = typeof window === 'undefined' || isHydrating
-  // const hasMetadata = isSSR ? enableHelmetSSR : true
-  const helmetContext = {};
-  const activeRoutes = children ? React.Children.map(unpackFragment(children), _ref3 => {
-    let {
-      props: {
-        href,
-        children: breadcrumbName,
-        ...itemRest
-      },
-      ref: routeRef
-    } = _ref3;
-    return {
-      path: href,
-      breadcrumbName,
-      routeRef,
-      ...itemRest
-    };
-  }) : routes.filter(route => route.path && route.breadcrumbName);
-  const [optionsHidden, setOptionsHidden] = React.useState(false);
-  const [itemsToBeRendered, setItemsToBeRendered] = React.useState([]);
-  const viewport = useViewport();
-  React.useEffect(() => {
-    if (optionsHidden) {
-      if (viewport !== 'xs' && !isEqual(itemsToBeRendered, activeRoutes)) {
-        setItemsToBeRendered(activeRoutes);
-      }
-      return;
-    }
-    if (viewport === 'xs' && activeRoutes.length >= MAX_ITEMS_ON_XS_VIEWPORT) {
-      const newItems = [...activeRoutes.slice(0, 2), {
-        path: '#',
-        breadcrumbName: '...',
-        onPress: event => {
-          event.preventDefault();
-          setItemsToBeRendered(activeRoutes);
-        },
-        isExpander: true
-      }, activeRoutes[activeRoutes.length - 1]];
-      setItemsToBeRendered(newItems);
-      setOptionsHidden(true);
-    } else if (!isEqual(itemsToBeRendered, activeRoutes)) {
-      setItemsToBeRendered(activeRoutes);
-    }
-  }, [viewport, activeRoutes, optionsHidden, itemsToBeRendered]);
-  const items = getItems(itemsToBeRendered, params, !children);
-  const themeTokens = useThemeTokens('Breadcrumbs', tokens, variant);
-  const metadata = /*#__PURE__*/_jsx(HelmetProvider, {
-    context: helmetContext,
-    children: /*#__PURE__*/_jsx(Helmet, {
-      children: /*#__PURE__*/_jsx("script", {
-        type: "application/ld+json",
-        children: `
-            {
-            "@context": "http://schema.org",
-            "@type": "BreadcrumbList",
-            "itemListElement": ${JSON.stringify(getStructuredData(items, baseUrl))}
-            }
-          `
-      })
-    })
-  });
-  return /*#__PURE__*/_jsxs("nav", {
-    "aria-label": "Breadcrumb",
-    ref: ref,
-    ...selectProps(rest),
-    children: [/*#__PURE__*/_jsx(StyledList, {
-      iconContainerSize: themeTokens.iconContainerSize,
-      children: items.map(_ref4 => {
-        let {
-          href,
-          current,
-          breadcrumbName,
-          LinkRouter: ItemLinkRouter = LinkRouter,
-          linkRouterProps: itemLinkRouterProps,
-          onPress,
-          ...itemRest
-        } = _ref4;
-        return /*#__PURE__*/_createElement(Item, {
-          ...itemRest,
-          current: current,
-          href: href,
-          tokens: tokens,
-          key: href,
-          linkRouterProps: {
-            ...linkRouterProps,
-            ...itemLinkRouterProps
-          },
-          variant: {
-            ...variant,
-            size: 'micro'
-          },
-          LinkRouter: ItemLinkRouter,
-          onPress: onPress
-        }, breadcrumbName);
-      })
-    }), metadata]
-  });
-});
-Breadcrumbs.displayName = 'Breadcrumbs';
-Breadcrumbs.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Breadcrumbs'),
-  ...withLinkRouter.propTypes,
-  /**
-   * Base URL used to build structured data.
-   */
-  baseUrl: PropTypes.string,
-  /**
-   * A list of Items to be used as an alternative to the `routes` prop.
-   */
-  children: componentPropType('Item'),
-  /**
-   * React Router params.
-   */
-  params: PropTypes.object,
-  /**
-   * An array of routes to be displayed as breadcrumbs.
-   */
-  routes: PropTypes.arrayOf(PropTypes.shape({
-    path: PropTypes.string,
-    breadcrumbName: PropTypes.string
-  })),
-  /**
-   * Variant to render.
-   */
-  variant: PropTypes.shape({
-    inverse: PropTypes.bool,
-    light: PropTypes.bool
-  })
-};
-Breadcrumbs.Item = Item;
-export default Breadcrumbs;

package/lib-module/Breadcrumbs/Item/Item.js

@@ -1,175 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Link, Typography, applyTextStyles, clickProps, selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
-import { htmlAttrs } from '../../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
-  displayName: "Item__StyledItemContainer",
-  componentId: "components-web__sc-1rfdaul-0"
-})({
-  display: 'inline-block',
-  paddingLeft: _ref => {
-    let {
-      listItemPadding
-    } = _ref;
-    return `${listItemPadding}px`;
-  },
-  lineHeight: _ref2 => {
-    let {
-      lineHeight,
-      fontSize
-    } = _ref2;
-    return `${Math.ceil(lineHeight * fontSize)}px`;
-  },
-  marginBottom: '8px'
-});
-const IconContainer = /*#__PURE__*/styled.span.withConfig({
-  displayName: "Item__IconContainer",
-  componentId: "components-web__sc-1rfdaul-1"
-})({
-  display: 'inline-block',
-  paddingLeft: _ref3 => {
-    let {
-      iconPadding
-    } = _ref3;
-    return `${iconPadding}px`;
-  },
-  paddingRight: _ref4 => {
-    let {
-      iconPadding
-    } = _ref4;
-    return `${iconPadding}px`;
-  },
-  fontFamily: _ref5 => {
-    let {
-      fontName,
-      fontWeight
-    } = _ref5;
-    return applyTextStyles({
-      fontName,
-      fontWeight
-    }).fontFamily;
-  },
-  height: _ref6 => {
-    let {
-      iconContainerSize
-    } = _ref6;
-    return `${iconContainerSize}px`;
-  },
-  width: _ref7 => {
-    let {
-      iconContainerSize,
-      iconPadding
-    } = _ref7;
-    return `${iconContainerSize + iconPadding * 2}px`;
-  },
-  verticalAlign: 'bottom'
-});
-const Item = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
-  let {
-    href,
-    children,
-    current = false,
-    tokens,
-    variant = {
-      light: true
-    },
-    // `light` variant (shared with the `Link` component) is default by design
-    LinkRouter,
-    linkRouterProps,
-    onPress,
-    ...rest
-  } = _ref8;
-  const {
-    iconColor,
-    icon: ChevronRightIcon,
-    currentColor,
-    color,
-    iconSize,
-    fontSize,
-    fontWeight,
-    fontName,
-    lineHeight,
-    listItemPadding,
-    iconContainerSize,
-    iconPadding
-  } = useThemeTokens('Breadcrumbs', tokens, variant);
-  const linkOptions = {
-    ...clickProps.toPressProps(selectProps(rest)),
-    href
-  };
-  return /*#__PURE__*/_jsx(StyledItemContainer, {
-    listItemPadding: listItemPadding,
-    lineHeight: lineHeight,
-    fontSize: fontSize,
-    iconContainerSize: iconContainerSize,
-    children: current ? /*#__PURE__*/_jsx(Typography, {
-      tokens: {
-        color: currentColor,
-        fontSize,
-        fontWeight,
-        lineHeight
-      },
-      variant: variant,
-      children: children
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Link, {
-        ...linkOptions,
-        ref: ref,
-        tokens: {
-          color,
-          blockFontSize: fontSize,
-          blockLineHeight: lineHeight
-        },
-        LinkRouter: LinkRouter,
-        linkRouterProps: linkRouterProps,
-        variant: variant,
-        onPress: onPress,
-        children: children
-      }), /*#__PURE__*/_jsx(IconContainer, {
-        iconPadding: iconPadding,
-        fontName: fontName,
-        fontWeight: fontWeight,
-        iconContainerSize: iconContainerSize,
-        children: /*#__PURE__*/_jsx(ChevronRightIcon, {
-          size: iconSize,
-          color: iconColor
-        })
-      })]
-    })
-  });
-});
-Item.displayName = 'Item';
-Item.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Breadcrumb text
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * @ignore
-   *
-   * Indicates whether or not the Item should be as current/active
-   */
-  current: PropTypes.bool,
-  /**
-   * 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,
-  /**
-   * Variant to render.
-   */
-  variant: PropTypes.shape({
-    inverse: PropTypes.bool
-  }),
-  /**
-   * Function to be called when the Item is clicked.
-   */
-  onPress: PropTypes.func
-};
-export default Item;

package/lib-module/Breadcrumbs/index.js

@@ -1 +0,0 @@
-export { default } from './Breadcrumbs';

package/lib-module/Callout/Callout.js

@@ -1,135 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Icon, selectSystemProps, Typography, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const getAlignment = (rounded, textAlignToFlex) => {
-  if (textAlignToFlex) {
-    switch (textAlignToFlex) {
-      case 'left':
-        return 'flex-star';
-      case 'center':
-        return 'center';
-      default:
-        return 'flex-start';
-    }
-  }
-  return rounded ? 'center' : ' flex-start';
-};
-const verticalAlignToFlex = verticalAlign => {
-  switch (verticalAlign) {
-    case 'top':
-      return 'flex-start';
-    case 'middle':
-      return 'center';
-    case 'bottom':
-      return 'flex-end';
-    default:
-      return 'top';
-  }
-};
-const CalloutContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Callout__CalloutContainer",
-  componentId: "components-web__sc-1a7ptx-0"
-})(_ref => {
-  let {
-    rounded,
-    verticalAlign,
-    textAlignToFlex,
-    background,
-    gap,
-    borderRadius,
-    padding
-  } = _ref;
-  return {
-    background,
-    display: 'flex',
-    gap,
-    borderRadius,
-    padding,
-    justifyContent: getAlignment(rounded, textAlignToFlex),
-    alignItems: verticalAlignToFlex(verticalAlign)
-  };
-});
-const Callout = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    icon,
-    children,
-    verticalAlign,
-    textAlignToFlex,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref2;
-  const {
-    background,
-    gap,
-    borderRadius,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    color
-  } = useThemeTokens('Callout', tokens, variant);
-  const {
-    rounded = false,
-    size = 'medium'
-  } = variant;
-  return /*#__PURE__*/_jsxs(CalloutContainer, {
-    size: size,
-    rounded: rounded,
-    "data-testid": "callout-container",
-    verticalAlign: verticalAlign,
-    textAlignToFlex: textAlignToFlex,
-    background: background,
-    gap: gap,
-    borderRadius: borderRadius,
-    padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
-    ref: ref,
-    ...selectProps(rest),
-    children: [icon && /*#__PURE__*/_jsx(Icon, {
-      tokens: {
-        color
-      },
-      icon: icon,
-      variant: {
-        rank: 'primary',
-        size
-      }
-    }), /*#__PURE__*/_jsx(Typography, {
-      variant: {
-        size,
-        compact: size === 'small'
-      },
-      tokens: {
-        color
-      },
-      children: children
-    })]
-  });
-});
-Callout.displayName = 'Callout';
-Callout.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Callout'),
-  /**
-   * Icon to display on the left side of the Callout
-   */
-  icon: PropTypes.elementType,
-  /**
-   * Children nodes that can be added
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * To change the horizontal alignment of the Callout's text
-   */
-  textAlignToFlex: PropTypes.oneOf(['center', 'left']),
-  /**
-   * To change the vertical alignment of the Callout's icon
-   */
-  verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom'])
-};
-export default Callout;

package/lib-module/Callout/index.js

@@ -1,2 +0,0 @@
-import Callout from './Callout';
-export default Callout;