@telus-uds/components-web 1.3.0 → 1.5.0

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';

package/lib-module/Callout/Callout.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Icon, selectSystemProps, Typography, useThemeTokens } 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 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 = '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
+  } = useThemeTokens('Callout', tokens, variant);
+  const {
+    rounded = false,
+    size = 'medium'
+  } = variant;
+  return /*#__PURE__*/_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__*/_jsx(Icon, {
+      icon: icon,
+      variant: {
+        rank: 'primary',
+        size
+      }
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: {
+        size,
+        compact: size === 'small'
+      },
+      tokens: {
+        color
+      },
+      children: children
+    })]
+  });
+};
+
+Callout.propTypes = { ...selectedSystemPropTypes,
+  icon: PropTypes.elementType,
+  children: PropTypes.node.isRequired,
+  verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom'])
+};
+export default Callout;

package/lib-module/Callout/index.js

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

package/lib-module/DatePicker/CalendarContainer.js

@@ -0,0 +1,208 @@
+import styled from 'styled-components';
+import defaultReactDatesCss from './reactDatesCss';
+const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CalendarContainer",
+  componentId: "components-web__sc-qdc1tg-0"
+})(_ref => {
+  let {
+    daySize,
+    validation,
+    remainingTokens,
+    calendarMonthFontTokens,
+    dayPickerNavigationButtonTokens,
+    defaultFontTokens
+  } = _ref;
+  return `
+  ${defaultReactDatesCss}
+  > div {
+    z-index: 3;
+  }
+  .SingleDatePicker,
+  .SingleDatePickerInput {
+    display: block;
+  }
+  .SingleDatePicker_picker {
+    box-shadow: none;
+    border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
+    border-radius: ${remainingTokens.singleDatePickerRadius};
+    padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${remainingTokens.singleDatePickerLeftRight}px;
+    z-index: 3;
+  }
+  .DateInput {
+    width: 100%;
+    border: 2px solid ${remainingTokens.dateInputBorderColor};
+    border-radius: ${remainingTokens.dateInputBorderRadius};
+    ${validation === 'error' && `input { border-color: ${remainingTokens.invalidInputMixin}; }`};
+    ${validation === 'success' && `input { border-color: ${remainingTokens.validInputMixin}; }`};
+  }
+  .DateInput:hover {
+    border: 2px solid ${remainingTokens.dateInputHoverBorderColor};
+  }
+  .DateInput:focus {
+    border: 2px solid ${remainingTokens.dateInputFocusBorderColor};
+  }
+  .SingleDatePickerInput__withBorder {
+    border: 0 !important;
+  }
+  .DateInput_input {
+    box-sizing: border-box;
+    padding: 1rem;
+    border: 1px solid ${remainingTokens.dateInputInsideBorderColor};
+    border-radius: 4px;
+    min-height: 3.25rem;
+    color: ${remainingTokens.dateInputInsideColor};
+    font-weight: 400;
+    font-size: 1rem;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
+  }
+  .DateInput_fang {
+    transform: translateY(2px);
+    z-index: 4;
+    left: ${(daySize * 8.5 - 20) / 2}px;
+  }
+  .DateInput_fangStroke {
+    stroke: ${remainingTokens.dateInputStrokeColor};
+  }
+  .CalendarMonth_caption {
+    color: ${remainingTokens.calendarMonthCaptionColor};
+    font-family: ${calendarMonthFontTokens.fontFamily};
+    font-size: ${remainingTokens.calendarMonthCaptionFontSize};
+    font-weight: ${calendarMonthFontTokens.fontWeight};
+    line-height: ${remainingTokens.calendarMonthCaptionLineHeight};
+    padding-bottom: ${remainingTokens.calendarMonthCaptionPaddingBottom}px;
+  }
+  .DayPicker__withBorder {
+    box-shadow: none;
+  }
+  .DayPickerNavigation_button {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    border: 1px solid ${remainingTokens.dayPickerNavigationButtonBorderColor};
+    background-color: ${remainingTokens.dayPickerNavigationButtonBackgroundColor};
+    border-radius: 50%;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+    max-height: ${remainingTokens.dayPickerNavigationButtonMaxHeight}px;
+    max-width: ${remainingTokens.dayPickerNavigationButtonMaxWidth}px;
+    position: absolute;
+    top: 18px;
+    line-height: 0.78;
+    padding: ${remainingTokens.dayPickerNavigationButtonPadding}px;
+    cursor: pointer;
+    user-select: none;
+    &:nth-child(1) {
+      left: ${remainingTokens.dayPickerNavigationButtonChildLeft}px;
+    }
+    &:nth-child(2) {
+      right: ${remainingTokens.dayPickerNavigationButtonChildRight}px;
+      i {
+        font-family: 'TELUS Core Icons';
+        display: inline-block;
+        font-weight: normal;
+        font-style: normal;
+        speak: none;
+        text-decoration: inherit;
+        text-transform: none;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        line-height: 1;
+        vertical-align: middle;
+        &:before {
+          content: '\\F107';
+          display: inline-block;
+        }
+      }
+    }
+    & svg {
+      fill: ${remainingTokens.dayPickerNavigationButtonChildSvgFill};
+    }
+  }
+  .DayPickerNavigation_button__default:focus,
+  .DayPickerNavigation_button__default:hover {
+    border: 1px solid ${remainingTokens.dayPickerNavigationButtonDefaultHoverBorderColor};
+  }
+  .DayPickerNavigation_svg__horizontal {
+    fill: ${remainingTokens.dayPickerNavigationSVGHorizontalFill};
+  }
+  .DayPicker_weekHeader {
+    color: ${remainingTokens.dayPickerWeekHeaderColor};
+    font-family: ${dayPickerNavigationButtonTokens.fontFamily};
+    font-weight: ${dayPickerNavigationButtonTokens.fontWeight};
+    font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
+    line-height: ${remainingTokens.dayPickerWeekHeaderLineHeight};
+    & small {
+      font-size: ${remainingTokens.dayPickerWeekHeaderSmall};
+    }
+    & li {
+      max-width: ${daySize}px !important;
+    }
+  }
+  .CalendarDay__default {
+    padding: 0px;
+    position: relative;
+    background-clip: padding-box;
+    border: ${remainingTokens.calendarDayDefaultBorder} solid ${remainingTokens.calendarDayDefaultBorderColor};
+    vertical-align: middle;
+    font-family: ${defaultFontTokens.fontFamily};
+    font-weight: ${defaultFontTokens.fontWeight}
+    font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
+    font-size: ${remainingTokens.calendarDayDefaultFontSize};
+    line-height: ${daySize - 3}px !important;
+    color: ${remainingTokens.calendarDayDefaultColor};
+    text-decoration: none;
+    transition: all 0.3s;
+    &:before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: ${remainingTokens.calendarDayDefaultBeforeHeight}px;
+      width: ${remainingTokens.calendarDayDefaultBeforeWidth}px;
+      border-radius: 50%;
+      background: transparent;
+      transition: all 0.3s;
+      z-index: -1;
+    }
+  }
+  .CalendarDay__default:hover,
+  .CalendarDay__selected,
+  .CalendarDay__selected:active,
+  .CalendarDay__selected:hover {
+    background: none;
+    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
+    color: ${remainingTokens.calendarDaySelectedHoverColor};
+    text-decoration: none;
+    z-index: 0;
+    &:before {
+      background: ${remainingTokens.calendarDaySelectedHoverBeforeBackground};
+    }
+  }
+  .CalendarDay__default.CalendarDay__selected,
+  .CalendarDay__default.CalendarDay__selected:active
+    .CalendarDay__default.CalendarDay__selected:hover {
+    color: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverColor};
+    text-decoration: none;
+    &:before {
+      background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBackground};
+    }
+  }
+  .CalendarDay__blocked_out_of_range,
+  .CalendarDay__blocked_out_of_range:active,
+  .CalendarDay__blocked_out_of_range:hover,
+  .CalendarDay__blocked_calendar,
+  .CalendarDay__blocked_calendar:active,
+  .CalendarDay__blocked_calendar:hover {
+    font-weight: 300;
+    background: ${remainingTokens.calendarDayBlockedCalendarHoverBackground};
+    background-clip: padding-box;
+    color: ${remainingTokens.calendarDayBlockedCalendarHoverColor};
+    text-decoration: none;
+    &:before {
+      content: none;
+    }
+  }
+`;
+});
+export default CalendarContainer;