@telus-uds/components-web 1.2.0 → 1.4.0

package/lib-module/shared/FullBleedContent/getFullBleedBorderRadius.js

@@ -0,0 +1,65 @@
+/**
+ * Gets the border radius values for an item of content that goes right up to
+ * the edges of its container, to the top, bottom, left or right of other content.
+ *
+ * Gives the full bleed item the same border radius as the container on the corners
+ * that are flush with the corners of the container.
+ *
+ * @param {number} borderRadius
+ * @param {'top'|'bottom'|'left'|'right'} position
+ * @param {boolean} hasFooter
+ * @returns
+ */
+const getFullBleedBorderRadius = function (borderRadius, position) {
+  let hasFooter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  const innerBorderRadius = {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0
+  };
+
+  if (position && position !== 'none') {
+    if (borderRadius) {
+      // Depending on the position of the image, we need to round some
+      // corners, but not the others
+      switch (position) {
+        case 'bottom':
+          if (!hasFooter) {
+            innerBorderRadius.borderBottomLeftRadius = borderRadius;
+            innerBorderRadius.borderBottomRightRadius = borderRadius;
+          }
+
+          break;
+
+        case 'left':
+          if (!hasFooter) {
+            innerBorderRadius.borderBottomLeftRadius = borderRadius;
+          }
+
+          innerBorderRadius.borderTopLeftRadius = borderRadius;
+          break;
+
+        case 'right':
+          if (!hasFooter) {
+            innerBorderRadius.borderBottomRightRadius = borderRadius;
+          }
+
+          innerBorderRadius.borderTopRightRadius = borderRadius;
+          break;
+
+        case 'top':
+          innerBorderRadius.borderTopLeftRadius = borderRadius;
+          innerBorderRadius.borderTopRightRadius = borderRadius;
+          break;
+
+        default:
+          break;
+      }
+    }
+  }
+
+  return innerBorderRadius;
+};
+
+export default getFullBleedBorderRadius;

package/lib-module/shared/FullBleedContent/index.js

@@ -0,0 +1,4 @@
+import FullBleedContent from './FullBleedContent';
+export default FullBleedContent;
+export { default as getFullBleedBorderRadius } from './getFullBleedBorderRadius';
+export { default as useFullBleedContentProps } from './useFullBleedContentProps';

package/lib-module/shared/FullBleedContent/useFullBleedContentProps.js

@@ -0,0 +1,65 @@
+import { useResponsiveProp } from '@telus-uds/components-base';
+
+const getContentStackDirection = fullBleedContentPosition => {
+  switch (fullBleedContentPosition) {
+    case 'left':
+      return 'row-reverse';
+
+    case 'right':
+      return 'row';
+
+    case 'top':
+      return 'column-reverse';
+
+    default:
+      return 'column';
+  }
+};
+
+const getContentStackAlign = fullBleedContentAlign => {
+  switch (fullBleedContentAlign) {
+    case 'center':
+      return 'center';
+
+    case 'end':
+    case 'flex-end':
+      return 'flex-end';
+
+    case 'start':
+    case 'flex-start':
+      return 'flex-start';
+
+    default:
+      return 'stretch';
+  }
+};
+/**
+ * Resolves a set of `FullBleedContent` props into the variables a container needs to
+ * correctly position a `FullBleedContent` component for the current viewport.
+ *
+ * @param {object} [fullBleedContent] - a set of valid proptypes for FullBleedContent
+ * @returns
+ */
+
+
+const useFullBleedContentProps = fullBleedContent => {
+  const {
+    align: fullBleedContentAlignProp,
+    position: fullBleedContentPositionProp,
+    ...fullBleedContentProps
+  } = fullBleedContent ?? {
+    position: 'none'
+  };
+  const fullBleedContentPosition = useResponsiveProp(fullBleedContentPositionProp, 'none');
+  const contentStackDirection = getContentStackDirection(fullBleedContentPosition);
+  const fullBleedContentAlign = useResponsiveProp(fullBleedContentAlignProp, 'stretch');
+  const contentStackAlign = getContentStackAlign(fullBleedContentAlign);
+  return {
+    contentStackAlign,
+    contentStackDirection,
+    fullBleedContentPosition,
+    fullBleedContentProps
+  };
+};
+
+export default useFullBleedContentProps;

package/lib-module/utils/index.js

@@ -1,3 +1,7 @@
 import { transformGradient } from './transforms';
+import useTypographyTheme from './useTypographyTheme';
 import htmlAttrs from './htmlAttrs';
-export { htmlAttrs, transformGradient };
+import { warn } from './logger';
+import media from './media';
+import renderStructuredContent from './renderStructuredContent';
+export { htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent };

package/lib-module/utils/logger.js

@@ -0,0 +1,18 @@
+export const deprecate = (componentName, message) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  console.warn(`[Allium] [Deprecate] ${componentName}: ${message}`); // eslint-disable-line no-console
+};
+export const warn = (componentName, message) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  console.warn(`[Allium] ${componentName}: ${message}`); // eslint-disable-line no-console
+};
+export default {
+  deprecate,
+  warn
+};

package/lib-module/utils/media.js

@@ -0,0 +1,46 @@
+import { viewports } from '@telus-uds/system-constants';
+export default function media() {
+  return {
+    query: {},
+
+    from(breakpoint) {
+      if (breakpoint !== 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: ${viewports.map.get(minWidth)}px)` : undefined;
+      const max = maxWidth ? `(max-width: ${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-module/utils/renderStructuredContent.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Link } from '@telus-uds/components-base';
+/**
+ * Takes a string content and marks up all the links in it by wrapping them
+ * in `Link` component.
+ */
+
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+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__*/_createElement(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__*/_jsx("br", {}, `break-${i}-${x}`));
+      }
+
+      partsWithBreaks[i] = toSplit;
+    }
+  }
+
+  return partsWithBreaks;
+};
+
+const renderStructuredContent = content => {
+  if (typeof content !== 'string') {
+    return content;
+  }
+
+  return generateBreaks(generateLinks(content));
+};
+
+export default renderStructuredContent;

package/lib-module/utils/useTypographyTheme.js

@@ -0,0 +1,24 @@
+import { applyTextStyles, useTheme, useThemeTokens, useViewport } from '@telus-uds/components-base';
+
+const useTypographyTheme = (variant, tokens) => {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Typography', tokens, variant, {
+    viewport
+  });
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    fontSize,
+    lineHeight,
+    ...rnStyles
+  } = applyTextStyles({ ...themeTokens,
+    themeOptions
+  });
+  return { ...rnStyles,
+    fontSize: `${fontSize}px`,
+    lineHeight: `${lineHeight}px`
+  };
+};
+
+export default useTypographyTheme;

package/package.json

@@ -4,10 +4,15 @@
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "1.32.0",
+    "@gorhom/portal": "^1.0.14",
+    "@telus-uds/components-base": "1.34.0",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.16.0",
-    "prop-types": "^15.7.2"
+    "react-dates": "^21.8.0",
+    "react-moment-proptypes": "^1.8.1",
+    "@telus-uds/system-theme-tokens": "^2.18.0",
+    "prop-types": "^15.7.2",
+    "lodash.omit": "^4.5.0",
+    "react-helmet-async": "^1.3.0"
   },
   "description": "UDS mult-brand web components",
   "devDependencies": {
@@ -53,5 +58,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.2.0"
+  "version": "1.4.0"
 }

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -0,0 +1,222 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const StyledList = styled.ol({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  listStyle: 'none',
+  listStylePosition: 'inside',
+  margin: 0,
+  padding: 0
+})
+
+const omitProps = ({
+  current,
+  path,
+  breadcrumbName,
+  indexRoute,
+  childRoutes,
+  component,
+  ...props
+}) => 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 = ({
+  baseUrl,
+  children,
+  linkRouterProps,
+  params = {},
+  tokens,
+  reactRouterLinkComponent,
+  routes,
+  variant,
+  LinkRouter,
+  ...rest
+}) => {
+  // 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),
+        ({ props: { href, children: breadcrumbName, ...itemRest }, ref }) => ({
+          path: href,
+          breadcrumbName,
+          ref,
+          ...itemRest
+        })
+      )
+    : routes.filter((route) => route.path && route.breadcrumbName)
+
+  const items = getItems(activeRoutes, params, !children)
+
+  const metadata = (
+    <HelmetProvider context={helmetContext}>
+      <Helmet>
+        <script type="application/ld+json">
+          {`
+            {
+            "@context": "http://schema.org",
+            "@type": "BreadcrumbList",
+            "itemListElement": ${JSON.stringify(getStructuredData(items, baseUrl))}
+            }
+          `}
+        </script>
+      </Helmet>
+    </HelmetProvider>
+  )
+
+  return (
+    <nav {...selectProps(rest)}>
+      <StyledList>
+        {items.map(
+          ({
+            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}
+              LinkRouter={ItemLinkRouter}
+            >
+              {breadcrumbName}
+            </Item>
+          )
+        )}
+      </StyledList>
+      {metadata}
+    </nav>
+  )
+}
+
+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/src/Breadcrumbs/Item/Item.jsx

@@ -0,0 +1,127 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const StyledItemContainer = styled.li({
+  display: 'flex',
+  paddingLeft: ({ listItemPadding }) => `${listItemPadding}px`
+})
+
+const IconContainer = styled.span({
+  display: 'inline-flex',
+  alignItems: 'center',
+  paddingLeft: ({ iconPadding }) => `${iconPadding}px`,
+  paddingRight: ({ iconPadding }) => `${iconPadding}px`
+})
+
+const Item = forwardRef(
+  (
+    {
+      href,
+      reactRouterLinkComponent: ReactRouterLink,
+      children,
+      current = false,
+      tokens,
+      variant = { light: true }, // `light` variant (shared with the `Link` component) is default by design
+      ...rest
+    },
+    ref
+  ) => {
+    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 (
+      <StyledItemContainer {...themeTokens}>
+        {current ? (
+          <Typography variant={{ ...variant, secondary: true }}>{children}</Typography>
+        ) : (
+          <>
+            {ReactRouterLink ? (
+              <ReactRouterLink
+                {...linkOptions}
+                // TODO refactor
+                // eslint-disable-next-line react/no-unstable-nested-components
+                component={(props) => {
+                  return <Link {...props} variant={variant} />
+                }}
+                ref={ref}
+              >
+                {children}
+              </ReactRouterLink>
+            ) : (
+              <Link {...linkOptions} ref={ref} variant={variant}>
+                {children}
+              </Link>
+            )}
+            <IconContainer {...themeTokens}>
+              <ChevronRightIcon size={16} color={iconColor} />
+            </IconContainer>
+          </>
+        )}
+      </StyledItemContainer>
+    )
+  }
+)
+
+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/src/Breadcrumbs/index.js

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