@telus-uds/components-web 1.3.0 → 1.5.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'

package/src/Callout/Callout.jsx

@@ -0,0 +1,76 @@
+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'
+
+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 = styled.div(
+  ({ rounded, verticalAlign = 'top', background, gap, borderRadius, padding }) => ({
+    background,
+    display: 'flex',
+    gap,
+    borderRadius,
+    padding,
+    justifyContent: `${rounded ? 'center' : 'flex-start'}`,
+    alignItems: verticalAlignToFlex(verticalAlign)
+  })
+)
+
+const Callout = ({ icon, children, verticalAlign = 'top', tokens, variant = {}, ...rest }) => {
+  const {
+    background,
+    gap,
+    borderRadius,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    color
+  } = useThemeTokens('Callout', tokens, variant)
+
+  const { rounded = false, size = 'medium' } = variant
+
+  return (
+    <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)}
+    >
+      {icon && <Icon icon={icon} variant={{ rank: 'primary', size }} />}
+      <Typography variant={{ size, compact: size === 'small' }} tokens={{ color }}>
+        {children}
+      </Typography>
+    </CalloutContainer>
+  )
+}
+
+Callout.propTypes = {
+  ...selectedSystemPropTypes,
+  icon: PropTypes.elementType,
+  children: PropTypes.node.isRequired,
+  verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom'])
+}
+
+export default Callout

package/src/Callout/index.js

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

package/src/DatePicker/CalendarContainer.jsx

@@ -0,0 +1,210 @@
+import styled from 'styled-components'
+import defaultReactDatesCss from './reactDatesCss'
+
+const CalendarContainer = styled.div(
+  ({
+    daySize,
+    validation,
+    remainingTokens,
+    calendarMonthFontTokens,
+    dayPickerNavigationButtonTokens,
+    defaultFontTokens
+  }) => `
+  ${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