@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,264 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactHelmetAsync = require("react-helmet-async");
+var _lodash = require("lodash");
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _Item = _interopRequireDefault(require("./Item/Item"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const StyledList = /*#__PURE__*/_styledComponents.default.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.default.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.default.Children.map((0, _componentsBase.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.default.useState(false);
+  const [itemsToBeRendered, setItemsToBeRendered] = _react.default.useState([]);
+  const viewport = (0, _componentsBase.useViewport)();
+  const newItems = _react.default.useMemo(() => {
+    if (viewport === 'xs' && activeRoutes.length >= MAX_ITEMS_ON_XS_VIEWPORT) {
+      return [...activeRoutes.slice(0, 2), {
+        path: '#',
+        breadcrumbName: '...',
+        onPress: event => {
+          event.preventDefault();
+          setItemsToBeRendered(activeRoutes);
+        },
+        isExpander: true
+      }, activeRoutes[activeRoutes.length - 1]];
+    }
+    return activeRoutes;
+  }, [viewport, activeRoutes]);
+  _react.default.useEffect(() => {
+    if (optionsHidden) {
+      if (viewport !== 'xs' && !(0, _lodash.isEqual)(itemsToBeRendered, activeRoutes)) {
+        setItemsToBeRendered(activeRoutes);
+      }
+      return;
+    }
+    if (viewport === 'xs' && activeRoutes.length >= MAX_ITEMS_ON_XS_VIEWPORT) {
+      if (!(0, _lodash.isEqual)(itemsToBeRendered, newItems)) {
+        setItemsToBeRendered(newItems);
+        setOptionsHidden(true);
+      }
+    } else if (!(0, _lodash.isEqual)(itemsToBeRendered, activeRoutes)) {
+      setItemsToBeRendered(activeRoutes);
+    }
+  }, [viewport, activeRoutes, optionsHidden, itemsToBeRendered, newItems]);
+  const items = getItems(itemsToBeRendered, params, !children);
+  const themeTokens = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
+  const metadata = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmetAsync.HelmetProvider, {
+    context: helmetContext,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmetAsync.Helmet, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+        type: "application/ld+json",
+        children: `
+            {
+            "@context": "http://schema.org",
+            "@type": "BreadcrumbList",
+            "itemListElement": ${JSON.stringify(getStructuredData(items, baseUrl))}
+            }
+          `
+      })
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
+    "aria-label": "Breadcrumb",
+    ref: ref,
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
+      iconContainerSize: themeTokens.iconContainerSize,
+      children: items.map(_ref4 => {
+        let {
+          href,
+          current,
+          breadcrumbName,
+          LinkRouter: ItemLinkRouter = LinkRouter,
+          linkRouterProps: itemLinkRouterProps,
+          onPress,
+          ...itemRest
+        } = _ref4;
+        return /*#__PURE__*/(0, _react.createElement)(_Item.default, {
+          ...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: (0, _componentsBase.getTokensPropType)('Breadcrumbs'),
+  ..._componentsBase.withLinkRouter.propTypes,
+  /**
+   * Base URL used to build structured data.
+   */
+  baseUrl: _propTypes.default.string,
+  /**
+   * A list of Items to be used as an alternative to the `routes` prop.
+   */
+  children: (0, _componentsBase.componentPropType)('Item'),
+  /**
+   * React Router params.
+   */
+  params: _propTypes.default.object,
+  /**
+   * An array of routes to be displayed as breadcrumbs.
+   */
+  routes: _propTypes.default.arrayOf(_propTypes.default.shape({
+    path: _propTypes.default.string,
+    breadcrumbName: _propTypes.default.string
+  })),
+  /**
+   * Variant to render.
+   */
+  variant: _propTypes.default.shape({
+    inverse: _propTypes.default.bool,
+    light: _propTypes.default.bool
+  })
+};
+Breadcrumbs.Item = _Item.default;
+var _default = exports.default = Breadcrumbs;

package/lib/cjs/Breadcrumbs/Item/Item.js

@@ -0,0 +1,180 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const StyledItemContainer = /*#__PURE__*/_styledComponents.default.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__*/_styledComponents.default.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 (0, _componentsBase.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.default.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
+  } = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
+  const linkOptions = {
+    ..._componentsBase.clickProps.toPressProps(selectProps(rest)),
+    href
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemContainer, {
+    listItemPadding: listItemPadding,
+    lineHeight: lineHeight,
+    fontSize: fontSize,
+    iconContainerSize: iconContainerSize,
+    children: current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      tokens: {
+        color: currentColor,
+        fontSize,
+        fontWeight,
+        lineHeight
+      },
+      variant: variant,
+      children: children
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
+        ...linkOptions,
+        ref: ref,
+        tokens: {
+          color,
+          blockFontSize: fontSize,
+          blockLineHeight: lineHeight
+        },
+        LinkRouter: LinkRouter,
+        linkRouterProps: linkRouterProps,
+        variant: variant,
+        onPress: onPress,
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
+        iconPadding: iconPadding,
+        fontName: fontName,
+        fontWeight: fontWeight,
+        iconContainerSize: iconContainerSize,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronRightIcon, {
+          size: iconSize,
+          color: iconColor
+        })
+      })]
+    })
+  });
+});
+Item.displayName = 'Item';
+Item.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Breadcrumb text
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * @ignore
+   *
+   * Indicates whether or not the Item should be as current/active
+   */
+  current: _propTypes.default.bool,
+  /**
+   * Target URL. This will be converted to `to` if the `LinkRouter`
+   * prop is provided to the `Item` or parent `Breadcrumbs` element.
+   */
+  href: _propTypes.default.string.isRequired,
+  /**
+   * Variant to render.
+   */
+  variant: _propTypes.default.shape({
+    inverse: _propTypes.default.bool
+  }),
+  /**
+   * Function to be called when the Item is clicked.
+   */
+  onPress: _propTypes.default.func
+};
+var _default = exports.default = Item;

package/lib/cjs/Breadcrumbs/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Breadcrumbs.default;
+  }
+});
+var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/Callout/Callout.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.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__*/_styledComponents.default.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.default.forwardRef((_ref2, ref) => {
+  let {
+    icon,
+    children,
+    verticalAlign,
+    textAlignToFlex,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref2;
+  const {
+    background,
+    gap,
+    borderRadius,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    color
+  } = (0, _componentsBase.useThemeTokens)('Callout', tokens, variant);
+  const {
+    rounded = false,
+    size = 'medium'
+  } = variant;
+  return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+      tokens: {
+        color
+      },
+      icon: icon,
+      variant: {
+        rank: 'primary',
+        size
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        size,
+        compact: size === 'small'
+      },
+      tokens: {
+        color
+      },
+      children: children
+    })]
+  });
+});
+Callout.displayName = 'Callout';
+Callout.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Callout'),
+  /**
+   * Icon to display on the left side of the Callout
+   */
+  icon: _propTypes.default.elementType,
+  /**
+   * Children nodes that can be added
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * To change the horizontal alignment of the Callout's text
+   */
+  textAlignToFlex: _propTypes.default.oneOf(['center', 'left']),
+  /**
+   * To change the vertical alignment of the Callout's icon
+   */
+  verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom'])
+};
+var _default = exports.default = Callout;

package/lib/cjs/Callout/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Callout = _interopRequireDefault(require("./Callout"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Callout.default;