@telus-uds/components-web 1.2.0 → 1.4.0

package/lib/utils/index.js

@@ -9,15 +9,47 @@ Object.defineProperty(exports, "htmlAttrs", {
     return _htmlAttrs.default;
   }
 });
+Object.defineProperty(exports, "media", {
+  enumerable: true,
+  get: function () {
+    return _media.default;
+  }
+});
+Object.defineProperty(exports, "renderStructuredContent", {
+  enumerable: true,
+  get: function () {
+    return _renderStructuredContent.default;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {
     return _transforms.transformGradient;
   }
 });
+Object.defineProperty(exports, "useTypographyTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTypographyTheme.default;
+  }
+});
+Object.defineProperty(exports, "warn", {
+  enumerable: true,
+  get: function () {
+    return _logger.warn;
+  }
+});
 
 var _transforms = require("./transforms");
 
+var _useTypographyTheme = _interopRequireDefault(require("./useTypographyTheme"));
+
 var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
 
+var _logger = require("./logger");
+
+var _media = _interopRequireDefault(require("./media"));
+
+var _renderStructuredContent = _interopRequireDefault(require("./renderStructuredContent"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/logger.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.warn = exports.deprecate = exports.default = void 0;
+
+const deprecate = (componentName, message) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  console.warn(`[Allium] [Deprecate] ${componentName}: ${message}`); // eslint-disable-line no-console
+};
+
+exports.deprecate = deprecate;
+
+const warn = (componentName, message) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  console.warn(`[Allium] ${componentName}: ${message}`); // eslint-disable-line no-console
+};
+
+exports.warn = warn;
+var _default = {
+  deprecate,
+  warn
+};
+exports.default = _default;

package/lib/utils/media.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = media;
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+function media() {
+  return {
+    query: {},
+
+    from(breakpoint) {
+      if (breakpoint !== _systemConstants.viewports.xs) {
+        this.query.minWidth = breakpoint;
+      }
+
+      return this;
+    },
+
+    until(breakpoint) {
+      this.query.maxWidth = breakpoint;
+      return this;
+    },
+
+    and(custom) {
+      this.query.and = custom;
+      return this;
+    },
+
+    css(style) {
+      const {
+        minWidth,
+        maxWidth,
+        and
+      } = this.query;
+      const min = minWidth ? `(min-width: ${_systemConstants.viewports.map.get(minWidth)}px)` : undefined;
+      const max = maxWidth ? `(max-width: ${_systemConstants.viewports.map.get(maxWidth) - 1}px)` : undefined;
+
+      if (typeof min !== 'undefined' || typeof max !== 'undefined' || typeof and !== 'undefined') {
+        const mediaQuery = `@media ${[min, max, and].filter(a => a).join(' and ')}`;
+        this.query = {};
+        return {
+          [mediaQuery]: { ...(typeof style === 'function' ? style() : style)
+          }
+        };
+      }
+
+      return typeof style === 'function' ? style() : style;
+    }
+
+  };
+}

package/lib/utils/renderStructuredContent.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+/**
+ * Takes a string content and marks up all the links in it by wrapping them
+ * in `Link` component.
+ */
+const generateLinks = content => {
+  const linkRegex = /<\s*a([^>]*)>(.*?)<\s*\/\s*a>/g;
+  const attributeRegex = /(\w+)\s*=\s*((["'])(.*?)\3|(?=\s|\/>))/g;
+  const parts = content.split(linkRegex);
+
+  if (parts.length === 1) {
+    return parts;
+  } // Start with first anchor text, attributes will be in the previous part
+
+
+  for (let i = 2; i < parts.length; i += 3) {
+    const o = {}; // Get attributes from previous part
+
+    const attributes = parts[i - 1].trim(); // Create object from attributes
+
+    const matchedAttributes = attributes.match(attributeRegex);
+
+    if (matchedAttributes) {
+      matchedAttributes.forEach(attribute => {
+        const split = attribute.split('=');
+        o[split[0]] = split[1].substr(1, split[1].length - 2);
+      });
+    } // Remove anchor attributes from parts
+
+
+    parts[i - 1] = undefined; // Replace anchor text with Link in parts
+
+    parts[i] = /*#__PURE__*/(0, _react.createElement)(_componentsBase.Link, { ...o,
+      key: i
+    }, parts[i]);
+  }
+
+  return parts;
+};
+/**
+ * Takes an array of strings and in each element replaces the breaks with `<br>` tags.
+ */
+
+
+const generateBreaks = parts => {
+  const breakRegex = /<br\s?\/*>/g;
+  const partsWithBreaks = parts;
+
+  for (let i = 0; i < partsWithBreaks.length; i += 1) {
+    if (typeof partsWithBreaks[i] === 'string' && partsWithBreaks[i].search(breakRegex) !== -1) {
+      const toSplit = partsWithBreaks[i].split(breakRegex);
+
+      for (let x = 1; x < toSplit.length; x += 2) {
+        toSplit.splice(x, 0, /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}, `break-${i}-${x}`));
+      }
+
+      partsWithBreaks[i] = toSplit;
+    }
+  }
+
+  return partsWithBreaks;
+};
+
+const renderStructuredContent = content => {
+  if (typeof content !== 'string') {
+    return content;
+  }
+
+  return generateBreaks(generateLinks(content));
+};
+
+var _default = renderStructuredContent;
+exports.default = _default;

package/lib/utils/useTypographyTheme.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _componentsBase = require("@telus-uds/components-base");
+
+const useTypographyTheme = (variant, tokens) => {
+  const viewport = (0, _componentsBase.useViewport)();
+  const themeTokens = (0, _componentsBase.useThemeTokens)('Typography', tokens, variant, {
+    viewport
+  });
+  const {
+    themeOptions
+  } = (0, _componentsBase.useTheme)();
+  const {
+    fontSize,
+    lineHeight,
+    ...rnStyles
+  } = (0, _componentsBase.applyTextStyles)({ ...themeTokens,
+    themeOptions
+  });
+  return { ...rnStyles,
+    fontSize: `${fontSize}px`,
+    lineHeight: `${lineHeight}px`
+  };
+};
+
+var _default = useTypographyTheme;
+exports.default = _default;

package/lib-module/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,228 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter } 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
+});
+
+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.Children.map(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__*/_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", { ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx(StyledList, {
+      children: items.map(_ref4 => {
+        let {
+          href,
+          current,
+          breadcrumbName,
+          reactRouterLinkComponent: linkComponent = reactRouterLinkComponent,
+          LinkRouter: ItemLinkRouter = LinkRouter,
+          linkRouterProps: itemLinkRouterProps,
+          ...itemRest
+        } = _ref4;
+        return /*#__PURE__*/_createElement(Item, { ...itemRest,
+          current: current,
+          href: href,
+          tokens: tokens,
+          key: href,
+          linkRouterProps: { ...linkRouterProps,
+            itemLinkRouterProps
+          },
+          reactRouterLinkComponent: linkComponent,
+          variant: variant,
+          LinkRouter: ItemLinkRouter
+        }, breadcrumbName);
+      })
+    }), metadata]
+  });
+};
+
+Breadcrumbs.propTypes = { ...selectedSystemPropTypes,
+  ...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,
+
+  /**
+   * 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.
+   */
+  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

@@ -0,0 +1,141 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Link, Typography, clickProps, selectSystemProps, useThemeTokens, withLinkRouter } 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: 'flex',
+  paddingLeft: _ref => {
+    let {
+      listItemPadding
+    } = _ref;
+    return `${listItemPadding}px`;
+  }
+});
+const IconContainer = /*#__PURE__*/styled.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__*/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
+  } = useThemeTokens('Breadcrumbs', tokens, variant);
+  const linkOptions = clickProps.toPressProps(selectProps(rest));
+
+  if (ReactRouterLink) {
+    linkOptions.to = href;
+  } else {
+    linkOptions.href = href;
+  }
+
+  return /*#__PURE__*/_jsx(StyledItemContainer, { ...themeTokens,
+    children: current ? /*#__PURE__*/_jsx(Typography, {
+      variant: { ...variant,
+        secondary: true
+      },
+      children: children
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [ReactRouterLink ? /*#__PURE__*/_jsx(ReactRouterLink, { ...linkOptions,
+        // TODO refactor
+        // eslint-disable-next-line react/no-unstable-nested-components
+        component: props => {
+          return /*#__PURE__*/_jsx(Link, { ...props,
+            variant: variant
+          });
+        },
+        ref: ref,
+        children: children
+      }) : /*#__PURE__*/_jsx(Link, { ...linkOptions,
+        ref: ref,
+        variant: variant,
+        children: children
+      }), /*#__PURE__*/_jsx(IconContainer, { ...themeTokens,
+        children: /*#__PURE__*/_jsx(ChevronRightIcon, {
+          size: 16,
+          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 `reactRouterLinkComponent`
+   * 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.
+   */
+  variant: PropTypes.shape({
+    inverse: PropTypes.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
+  }
+};
+export default withLinkRouter(Item);

package/lib-module/Breadcrumbs/index.js

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