@telus-uds/components-web 1.8.0 → 1.10.0

package/src/Card/CardContent.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  getTokensPropType,
+  selectSystemProps,
+  useThemeTokens,
+  useViewport,
+  variantProp
+} from '@telus-uds/components-base'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const CardContentContainer = styled.div(
+  ({
+    backgroundColor,
+    borderRadius,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    withFooter,
+    contentAlignItem: alignItem,
+    contentFlexGrow: flexGrow,
+    contentFlexShrink: flexShrink,
+    contentJustifyContent: justifyContent
+  }) => ({
+    backgroundColor,
+    // We need to make sure to have sharp corners on the bottom
+    // if the card has a footer
+    borderBottomLeftRadius: withFooter ? 0 : borderRadius,
+    borderBottomRightRadius: withFooter ? 0 : borderRadius,
+    borderTopLeftRadius: borderRadius,
+    borderTopRightRadius: borderRadius,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItem,
+    flexGrow,
+    flexShrink,
+    justifyContent
+  })
+)
+
+/**
+ * Card content, applying the card tokens as per the theme used.
+ */
+const CardContent = ({ children, flexContent, tokens, variant, withFooter = false, ...rest }) => {
+  const viewport = useViewport()
+  const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
+
+  return (
+    <CardContentContainer
+      {...themeTokens}
+      flexContent={flexContent}
+      withFooter={withFooter}
+      {...selectProps(rest)}
+    >
+      {children}
+    </CardContentContainer>
+  )
+}
+
+CardContent.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Card section content.
+   */
+  children: PropTypes.node,
+  /**
+   * Card tokens.
+   */
+  tokens: getTokensPropType('Card'),
+  /**
+   * Card variant.
+   */
+  variant: variantProp.propType,
+  /**
+   * Whether the card has a footer.
+   */
+  withFooter: PropTypes.bool
+}
+
+export default CardContent

package/src/Card/CardFooter.jsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  getTokensPropType,
+  paddingProp,
+  selectSystemProps,
+  useThemeTokens,
+  useViewport,
+  variantProp
+} from '@telus-uds/components-base'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const CardFooterContainer = styled.div(
+  ({ backgroundColor, borderRadius, paddingBottom, paddingLeft, paddingRight, paddingTop }) => ({
+    backgroundColor,
+    borderBottomLeftRadius: borderRadius,
+    borderBottomRightRadius: borderRadius,
+    // @todo circle back to the following non-standard value to
+    // see if it can be integrated into the palette
+    boxShadow: 'inset 0px 1px 3px rgba(0, 0, 0, 0.05)',
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  })
+)
+
+/**
+ * Card footer, applying the tokens as per the theme used.
+ */
+const CardFooter = ({ children, padding, tokens, variant, ...rest }) => {
+  const viewport = useViewport()
+  const themeTokens = useThemeTokens(
+    'Card',
+    tokens,
+    { ...variant, background: 'alternative' },
+    { viewport }
+  )
+
+  return (
+    <CardFooterContainer {...themeTokens} {...padding} {...selectProps(rest)}>
+      {children}
+    </CardFooterContainer>
+  )
+}
+
+CardFooter.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Card footer content.
+   */
+  children: PropTypes.node,
+  /**
+   * Card footer padding.
+   */
+  padding: paddingProp.propType,
+  /**
+   * Card tokens.
+   */
+  tokens: getTokensPropType('Card'),
+  /**
+   * Card variant.
+   */
+  variant: variantProp.propType
+}
+
+export default CardFooter

package/src/Card/index.js

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

package/src/Countdown/Countdown.jsx

@@ -0,0 +1,144 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import {
+  Spacer,
+  StackView,
+  Typography,
+  selectSystemProps,
+  useViewport,
+  useThemeTokens,
+  applyTextStyles
+} from '@telus-uds/components-base'
+import { viewports } from '@telus-uds/system-constants'
+import styled from 'styled-components'
+// Reading these from the RN palette since they will be used to generate
+// the `Typography` tokens
+import { htmlAttrs, transformGradient } from '../utils'
+import Segment from './Segment'
+import useCountdown from './useCountdown'
+import { countdownVariantPropType, dictionaryContentShape } from './types'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const Container = styled.div(({ variant: { feature, inverse, large }, themeTokens, gradient }) => ({
+  ...(large || (feature && { display: 'flex', flex: 0 })),
+  ...(feature && {
+    borderRadius: themeTokens.containerBorderRadius,
+    justifyContent: 'center',
+    paddingBottom: `${themeTokens.containerPaddingBottomTop}px`,
+    paddingLeft: `${themeTokens.containerPaddingLeftRight}px`,
+    paddingRight: `${themeTokens.containerPaddingLeftRight}px`,
+    paddingTop: `${themeTokens.containerPaddingBottomTop}px`,
+    width: 'fit-content'
+  }),
+  ...(feature &&
+    !inverse && {
+      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`,
+      border: `${themeTokens.containerInverseBorder}px solid transparent`
+    }),
+  ...(feature &&
+    inverse && {
+      border: `${themeTokens.containerInverseBorder}px solid ${themeTokens.inverseBorderColor}`
+    })
+}))
+
+const getLabelTokens = (themeTokens) => ({
+  color: themeTokens.labelBorderColor,
+  fontWeight: themeTokens.textTimerFontWeight,
+  fontSize: `${themeTokens.labelFontSize}`,
+  lineHeight: `${themeTokens.labelLineHeight}`
+})
+
+const getMainTextTokens = (themeTokens) => ({
+  color: themeTokens.labelBorderColor,
+  fontWeight: themeTokens.textTimerFontWeight,
+  fontSize: themeTokens.textFontSize,
+  lineHeight: themeTokens.textLineHeight
+})
+
+const Countdown = forwardRef(({ copy = 'en', targetTime, tokens, variant = {}, ...rest }, ref) => {
+  const [days, hours, minutes, seconds] = useCountdown(targetTime)
+  const viewport = useViewport()
+  const { feature, large, label, noDivider } = variant
+  if (noDivider && !label) {
+    throw new Error('`noDivider` variant can only be used with `label` enabled!')
+  }
+  const themeTokens = useThemeTokens('Countdown', tokens, variant, { viewport })
+  const segmentFontSize = themeTokens.textFontSize
+  const semanticGradient =
+    themeTokens.containerGradient && transformGradient(themeTokens.containerGradient)
+
+  const mainTextTokens = getMainTextTokens(themeTokens)
+
+  const divider =
+    noDivider === true ? (
+      // StackView-based subcontainer adds a 1-step space on the each side of the divider
+      <Spacer direction="row" space={(feature || large) && viewport !== viewports.xs ? 7 : 2} />
+    ) : (
+      <Typography tokens={mainTextTokens}>:</Typography>
+    )
+  const labelTokens = getLabelTokens(themeTokens)
+  const commonProps = {
+    copy,
+    labelTokens,
+    numberTokens: mainTextTokens,
+    segmentFontSize,
+    variant
+  }
+
+  return (
+    // Making it focusable for accessibility purposes
+    <Container
+      ref={ref}
+      variant={variant}
+      {...selectProps(rest)}
+      tabIndex={0}
+      themeTokens={themeTokens}
+      gradient={semanticGradient}
+    >
+      <StackView direction="row" space={1}>
+        <Segment labelKey="day" number={days} segmentWidth={String(days).length} {...commonProps} />
+        {divider}
+        <Segment
+          labelKey="hour"
+          number={hours}
+          {...commonProps}
+          {...applyTextStyles(themeTokens)}
+        />
+        {divider}
+        <Segment
+          labelKey="minute"
+          number={minutes}
+          {...commonProps}
+          {...applyTextStyles(themeTokens)}
+        />
+        {divider}
+        <Segment
+          labelKey="second"
+          number={seconds}
+          {...commonProps}
+          {...applyTextStyles(themeTokens)}
+        />
+      </StackView>
+    </Container>
+  )
+})
+Countdown.displayName = 'Countdown'
+
+Countdown.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Copy language identifier (`'en'` or `'fr'`) or a dictionary instance (an object with
+   * the following keys: days, day, hours, hour, minutes, minute, seconds, second)
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
+  /**
+   * An instance of JavaScript `Date` object or a string parseable via `Date.parse()`
+   * representing a point in the future to count down to.
+   */
+  targetTime: PropTypes.instanceOf(Date),
+  variant: countdownVariantPropType
+}
+
+export default Countdown

package/src/Countdown/Segment.jsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StackView, Typography, useCopy } from '@telus-uds/components-base'
+import styled from 'styled-components'
+import dictionary from './dictionary'
+import { countdownVariantPropType, dictionaryContentShape } from './types'
+import { SEGMENT_WIDTH_TO_FONT_SIZE_RATIO } from './constants'
+
+// Pads with zeros on the left if it's a single digit number
+const pad = (number, segmentWidth = 2) => String(number).padStart(segmentWidth, '0')
+
+const Container = styled.div(({ segmentFontSize, segmentWidth = 2, variant: { feature } }) => ({
+  justifyContent: 'space-evenly',
+  display: 'inline-flex',
+  ...(feature && {
+    width: `${segmentFontSize * SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * segmentWidth}px`,
+    display: 'flex'
+  })
+}))
+
+// A segment of the countdown string: we need to make sure it
+// keeps its width constant to prevent the whole component from
+// being automatically resized while using variable size fonts
+const Segment = ({
+  copy = 'en',
+  segmentFontSize,
+  labelKey,
+  labelTokens,
+  number,
+  numberTokens,
+  segmentWidth = 2,
+  variant = {}
+}) => {
+  const getCopy = useCopy({ dictionary, copy })
+  const { label, large, feature } = variant
+
+  return (
+    <Container segmentFontSize={segmentFontSize} segmentWidth={segmentWidth} variant={variant}>
+      <StackView
+        direction={large || feature ? 'column' : 'row'}
+        space={large || feature ? 0 : 1}
+        tokens={{ alignItems: 'center' }}
+      >
+        <Typography tokens={numberTokens}>{pad(number, segmentWidth)}</Typography>
+        {label && (
+          <Typography tokens={labelTokens}>
+            {getCopy(number === 1 ? labelKey : `${labelKey}s`)}
+          </Typography>
+        )}
+      </StackView>
+    </Container>
+  )
+}
+
+Segment.propTypes = {
+  /**
+   * Copy language identifier or a dictionary instance.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
+  segmentFontSize: PropTypes.number,
+  labelKey: PropTypes.oneOf(['day', 'hour', 'minute', 'second']),
+  labelTokens: PropTypes.object,
+  number: PropTypes.number,
+  numberTokens: PropTypes.object,
+  segmentWidth: PropTypes.number,
+  variant: countdownVariantPropType
+}
+
+export default Segment

package/src/Countdown/constants.js

@@ -0,0 +1,4 @@
+export const DEFAULT_FONT_SIZE = 16
+export const LARGE_FONT_SIZE = 64
+export const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8
+export const XS_FONT_SIZE = 28

package/src/Countdown/dictionary.js

@@ -0,0 +1,22 @@
+export default {
+  en: {
+    days: 'Days',
+    day: 'Day',
+    hours: 'Hours',
+    hour: 'Hour',
+    minutes: 'Minutes',
+    minute: 'Minute',
+    seconds: 'Seconds',
+    second: 'Second'
+  },
+  fr: {
+    days: 'Jours',
+    day: 'Jour',
+    hours: 'Heures',
+    hour: 'Heure',
+    minutes: 'Minutes',
+    minute: 'Minute',
+    seconds: 'Secondes',
+    second: 'Seconde'
+  }
+}

package/src/Countdown/index.js

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

package/src/Countdown/types.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types'
+
+export const countdownVariantPropType = PropTypes.shape({
+  feature: PropTypes.bool,
+  inverse: PropTypes.bool,
+  label: PropTypes.bool,
+  large: PropTypes.bool,
+  noDivider: PropTypes.bool
+})
+
+// If a language dictionary entry is provided, it must contain every key
+export const dictionaryContentShape = PropTypes.shape({
+  days: PropTypes.string.isRequired,
+  day: PropTypes.string.isRequired,
+  hours: PropTypes.string.isRequired,
+  hour: PropTypes.string.isRequired,
+  minutes: PropTypes.string.isRequired,
+  minute: PropTypes.string.isRequired,
+  seconds: PropTypes.string.isRequired,
+  second: PropTypes.string.isRequired
+})
+
+export default { countdownVariantPropType, dictionaryContentShape }

package/src/Countdown/useCountdown.js

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react'
+
+const getTimeCounts = (countdown) => {
+  if (countdown <= 0) {
+    return [0, 0, 0, 0]
+  }
+  const days = Math.floor(countdown / (1000 * 60 * 60 * 24))
+  const hours = Math.floor((countdown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+  const minutes = Math.floor((countdown % (1000 * 60 * 60)) / (1000 * 60))
+  const seconds = Math.floor((countdown % (1000 * 60)) / 1000)
+
+  return [days, hours, minutes, seconds]
+}
+
+const useCountdown = (targetTime) => {
+  const countdownTime = new Date(targetTime).getTime()
+  if (!countdownTime) {
+    throw new Error('Invalid target time is provided!')
+  }
+
+  const [countdown, setCountdown] = useState(countdownTime - new Date().getTime())
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCountdown(countdownTime - new Date().getTime())
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [countdownTime])
+
+  return getTimeCounts(countdown)
+}
+
+export default useCountdown

package/src/Footnote/Footnote.jsx

@@ -15,7 +15,7 @@ import {
 import Close from '../../__fixtures__/icons/Close'
 import OrderedListBase from '../OrderedList/OrderedListBase'
 import { htmlAttrs, media, renderStructuredContent } from '../utils'
-import dictionary from './dictionary'
+import defaultDictionary from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
@@ -154,6 +154,10 @@ const ContentContainer = styled.div(
   })
 )
 
+const StyledCustomContentContainer = styled.div(({ color }) => ({
+  color,
+  fontFamily: 'HelveticaNow400normal'
+}))
 const usePrevious = (value) => {
   const ref = useRef()
   useEffect(() => {
@@ -184,7 +188,17 @@ const usePrevious = (value) => {
  * - When `Footnote` is closed, focus must return to the initiating element
  */
 const Footnote = (props) => {
-  const { copy, number, content, onClose, isOpen, tokens, variant = {}, ...rest } = props
+  const {
+    copy,
+    number,
+    content,
+    onClose,
+    isOpen,
+    tokens,
+    variant = {},
+    dictionary = defaultDictionary,
+    ...rest
+  } = props
   const {
     footnoteBackground,
     footnoteBorderTopSizeMd,
@@ -216,7 +230,7 @@ const Footnote = (props) => {
   const footnoteRef = useRef(null)
   const headerRef = useRef(null)
   const bodyRef = useRef(null)
-  const listRef = useRef(null)
+  const contentRef = useRef(null)
   const headingRef = useRef(null)
   const [data, setData] = useState({ content: null, number: null })
   const [headerHeight, setHeaderHeight] = useState('auto')
@@ -265,7 +279,7 @@ const Footnote = (props) => {
   )
 
   const saveCurrentHeight = () => {
-    const oldHeight = listRef.current.offsetHeight
+    const oldHeight = contentRef.current.offsetHeight
     setBodyHeight(oldHeight)
   }
 
@@ -287,14 +301,14 @@ const Footnote = (props) => {
     event.persist()
     if (event.propertyName === 'opacity' && !isTextVisible) {
       setData({ content, number })
-      if (bodyHeight !== listRef.current.offsetHeight) {
+      if (bodyHeight !== contentRef.current.offsetHeight) {
         // Set new height
-        setBodyHeight(listRef.current.offsetHeight)
+        setBodyHeight(contentRef.current.offsetHeight)
       } else {
         setIsTextVisible(true)
       }
     } else {
-      setBodyHeight(listRef.current.offsetHeight)
+      setBodyHeight(contentRef.current.offsetHeight)
     }
 
     if (event.propertyName === 'height' && !isTextVisible) {
@@ -359,6 +373,41 @@ const Footnote = (props) => {
   // Reset footnote on close
   useEffect(resetFootnote, [isOpen])
 
+  const getFootnoteBodyContent = useCallback(() => {
+    if (!data.number || !data.content) {
+      return null
+    }
+    if (React.isValidElement(data.content)) {
+      return (
+        <StyledCustomContentContainer ref={contentRef}>{data.content}</StyledCustomContentContainer>
+      )
+    }
+    return (
+      <List start={data.number} ref={contentRef} listPaddingLeft={listPaddingLeft}>
+        <ListItem
+          listItemMarkerFontSize={listItemMarkerFontSize}
+          listItemMarkerLineHeight={listItemMarkerLineHeight}
+          listItemColor={listItemColor}
+          listItemFontSize={listItemFontSize}
+          listItemLineHeight={listItemLineHeight}
+          listItemPaddingLeft={listItemPaddingLeft}
+        >
+          <Typography>{renderStructuredContent(data.content)}</Typography>
+        </ListItem>
+      </List>
+    )
+  }, [
+    data.content,
+    data.number,
+    listItemColor,
+    listItemFontSize,
+    listItemLineHeight,
+    listItemMarkerFontSize,
+    listItemMarkerLineHeight,
+    listItemPaddingLeft,
+    listPaddingLeft
+  ])
+
   return (
     <Portal>
       <div {...selectProps(rest)}>
@@ -402,20 +451,7 @@ const Footnote = (props) => {
               footnoteBodyBackground={footnoteBodyBackground}
               footnoteBodyPadding={`${footnoteBodyPaddingTop}px ${footnoteBodyPaddingRight}px ${footnoteBodyPaddingBottom}px ${footnoteBodyPaddingLeft}px`}
             >
-              {data.number && data.content && (
-                <List start={data.number} ref={listRef} listPaddingLeft={listPaddingLeft}>
-                  <ListItem
-                    listItemMarkerFontSize={listItemMarkerFontSize}
-                    listItemMarkerLineHeight={listItemMarkerLineHeight}
-                    listItemColor={listItemColor}
-                    listItemFontSize={listItemFontSize}
-                    listItemLineHeight={listItemLineHeight}
-                    listItemPaddingLeft={listItemPaddingLeft}
-                  >
-                    <Typography>{renderStructuredContent(data.content)}</Typography>
-                  </ListItem>
-                </List>
-              )}
+              {getFootnoteBodyContent()}
             </StyledFootnoteBody>
           </ContentContainer>
         </StyledFootnote>
@@ -429,12 +465,19 @@ const copyShape = PropTypes.shape({
   heading: PropTypes.string.isRequired
 })
 
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  a11yLabel: PropTypes.string.isRequired,
+  close: PropTypes.string.isRequired,
+  heading: PropTypes.string.isRequired
+})
+
 Footnote.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * The content.
    */
-  content: PropTypes.string,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    * To provide your own, pass a JSON object with the keys `heading` and `close`.
@@ -455,7 +498,14 @@ Footnote.propTypes = {
    * @param {Object} options Custom options
    * @param {boolean} options.returnFocus Should the `Footnote` return focus on close
    */
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
 }
 
 Footnote.defaultProps = {

package/src/Modal/ModalContent.jsx

@@ -28,6 +28,10 @@ const StyledSubHeading = styled.div`
   margin-top: ${({ marginTop }) => marginTop}px;
 `
 
+const StyledTextButtonContainer = styled.div({
+  display: 'flex'
+})
+
 const StyledFooter = styled.footer(
   ({
     hasBorder,
@@ -131,13 +135,13 @@ const ModalContent = ({
               {confirmButtonText}
             </Button>
           )}
-          <div>
-            {hasCancelButton && (
+          {hasCancelButton ? (
+            <StyledTextButtonContainer>
               <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
                 {cancelButtonText}
               </CancelButton>
-            )}
-          </div>
+            </StyledTextButtonContainer>
+          ) : null}
         </StyledFooter>
       )}
     </StyledModalContent>