@telus-uds/components-web 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Tue, 04 Apr 2023 14:45:59 GMT and should not be manually modified.
+This log was last generated on Thu, 13 Apr 2023 05:51:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.4.0
+
+Thu, 13 Apr 2023 05:51:59 GMT
+
+### Minor changes
+
+- Calendar Day picker multibrand initiative (akshay.pandey1@telus.com)
+- new expand collapse mini component (mauricio.batresmontejo@telus.com)
+- Adding Span component (srikanthkhari@gmail.com)
+- added Breadcrumbs component (kyle.king2@telus.com)
+- Added Callout (wlsdud194@hotmail.com)
+- Added PriceLockup, Footnote, and FootnoteLink (wlsdud194@hotmail.com)
+- Update snapshots for Ribbon (wlsdud194@hotmail.com)
+- feat: move 'PreviewCard' & 'ResponsiveImage' to 'components-web' package from 'ds-allium' (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.34.0
+- Bump @telus-uds/system-theme-tokens to v2.18.0
+
+### Patches
+
+- removing a dev dep (srikanthkhari@gmail.com)
+
+## 1.3.0
+
+Tue, 04 Apr 2023 20:00:31 GMT
+
+### Minor changes
+
+- feat: move 'OrderedList' into components-web & pass variants to children(list items) (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.33.0
+- Bump @telus-uds/system-theme-tokens to v2.17.0
+- Bump @telus-uds/palette-allium to v2.12.3
+
 ## 1.2.0
 
-Tue, 04 Apr 2023 14:45:59 GMT
+Tue, 04 Apr 2023 14:52:45 GMT
 
 ### Minor changes
 

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,247 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactHelmetAsync = require("react-helmet-async");
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _utils = require("../utils");
+
+var _Item = _interopRequireDefault(require("./Item/Item"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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
+});
+
+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);
+    return {
+      breadcrumbName,
+      href,
+      current: isLast,
+      ...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
+    }
+  }));
+};
+/**
+ * Display a hierarchy of links, commonly used for navigation.
+ */
+
+
+const Breadcrumbs = _ref2 => {
+  let {
+    baseUrl,
+    children,
+    linkRouterProps,
+    params = {},
+    tokens,
+    reactRouterLinkComponent,
+    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
+    } = _ref3;
+    return {
+      path: href,
+      breadcrumbName,
+      ref,
+      ...itemRest
+    };
+  }) : routes.filter(route => route.path && route.breadcrumbName);
+  const items = getItems(activeRoutes, params, !children);
+  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", { ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
+      children: items.map(_ref4 => {
+        let {
+          href,
+          current,
+          breadcrumbName,
+          reactRouterLinkComponent: linkComponent = reactRouterLinkComponent,
+          LinkRouter: ItemLinkRouter = LinkRouter,
+          linkRouterProps: itemLinkRouterProps,
+          ...itemRest
+        } = _ref4;
+        return /*#__PURE__*/(0, _react.createElement)(_Item.default, { ...itemRest,
+          current: current,
+          href: href,
+          tokens: tokens,
+          key: href,
+          linkRouterProps: { ...linkRouterProps,
+            itemLinkRouterProps
+          },
+          reactRouterLinkComponent: linkComponent,
+          variant: variant,
+          LinkRouter: ItemLinkRouter
+        }, breadcrumbName);
+      })
+    }), metadata]
+  });
+};
+
+Breadcrumbs.propTypes = { ...selectedSystemPropTypes,
+  ..._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,
+
+  /**
+   * React Router Link component.
+   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
+   */
+  reactRouterLinkComponent: _propTypes.default.oneOfType([_propTypes.default.func, _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 = Breadcrumbs;
+exports.default = _default;

package/lib/Breadcrumbs/Item/Item.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _utils = require("../../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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: 'flex',
+  paddingLeft: _ref => {
+    let {
+      listItemPadding
+    } = _ref;
+    return `${listItemPadding}px`;
+  }
+});
+
+const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
+  displayName: "Item__IconContainer",
+  componentId: "components-web__sc-1rfdaul-1"
+})({
+  display: 'inline-flex',
+  alignItems: 'center',
+  paddingLeft: _ref2 => {
+    let {
+      iconPadding
+    } = _ref2;
+    return `${iconPadding}px`;
+  },
+  paddingRight: _ref3 => {
+    let {
+      iconPadding
+    } = _ref3;
+    return `${iconPadding}px`;
+  }
+});
+
+const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+  let {
+    href,
+    reactRouterLinkComponent: ReactRouterLink,
+    children,
+    current = false,
+    tokens,
+    variant = {
+      light: true
+    },
+    // `light` variant (shared with the `Link` component) is default by design
+    ...rest
+  } = _ref4;
+  const {
+    iconColor,
+    icon: ChevronRightIcon,
+    ...themeTokens
+  } = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
+
+  const linkOptions = _componentsBase.clickProps.toPressProps(selectProps(rest));
+
+  if (ReactRouterLink) {
+    linkOptions.to = href;
+  } else {
+    linkOptions.href = href;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemContainer, { ...themeTokens,
+    children: current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: { ...variant,
+        secondary: true
+      },
+      children: children
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [ReactRouterLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactRouterLink, { ...linkOptions,
+        // TODO refactor
+        // eslint-disable-next-line react/no-unstable-nested-components
+        component: props => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, { ...props,
+            variant: variant
+          });
+        },
+        ref: ref,
+        children: children
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, { ...linkOptions,
+        ref: ref,
+        variant: variant,
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, { ...themeTokens,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronRightIcon, {
+          size: 16,
+          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 `reactRouterLinkComponent`
+   * prop is provided to the `Item` or parent `Breadcrumbs` element.
+   */
+  href: _propTypes.default.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.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+
+  /**
+   * Variant to render.
+   */
+  variant: _propTypes.default.shape({
+    inverse: _propTypes.default.bool
+  })
+}; // Since react/require-default-props eslint rule doesn't pick up default arguments as default props when combined with `forwardRef`
+// - probably related https://github.com/yannickcr/eslint-plugin-react/issues/2760
+
+Item.defaultProps = {
+  current: false,
+  reactRouterLinkComponent: undefined,
+  variant: {
+    light: true
+  }
+};
+
+var _default = (0, _componentsBase.withLinkRouter)(Item);
+
+exports.default = _default;

package/lib/Breadcrumbs/index.js

@@ -0,0 +1,15 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Callout/Callout.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+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 = 'top',
+    background,
+    gap,
+    borderRadius,
+    padding
+  } = _ref;
+  return {
+    background,
+    display: 'flex',
+    gap,
+    borderRadius,
+    padding,
+    justifyContent: `${rounded ? 'center' : 'flex-start'}`,
+    alignItems: verticalAlignToFlex(verticalAlign)
+  };
+});
+
+const Callout = _ref2 => {
+  let {
+    icon,
+    children,
+    verticalAlign = 'top',
+    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,
+    background: background,
+    gap: gap,
+    borderRadius: borderRadius,
+    padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+    ...selectProps(rest),
+    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+      icon: icon,
+      variant: {
+        rank: 'primary',
+        size
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        size,
+        compact: size === 'small'
+      },
+      tokens: {
+        color
+      },
+      children: children
+    })]
+  });
+};
+
+Callout.propTypes = { ...selectedSystemPropTypes,
+  icon: _propTypes.default.elementType,
+  children: _propTypes.default.node.isRequired,
+  verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom'])
+};
+var _default = Callout;
+exports.default = _default;

package/lib/Callout/index.js

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