@telus-uds/components-web 1.8.0 → 1.9.0

package/lib-module/Card/CardContent.js

@@ -0,0 +1,92 @@
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CardContent__CardContentContainer",
+  componentId: "components-web__sc-1k2501q-0"
+})(_ref => {
+  let {
+    backgroundColor,
+    borderRadius,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    withFooter,
+    contentAlignItem: alignItem,
+    contentFlexGrow: flexGrow,
+    contentFlexShrink: flexShrink,
+    contentJustifyContent: justifyContent
+  } = _ref;
+  return {
+    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 = _ref2 => {
+  let {
+    children,
+    flexContent,
+    tokens,
+    variant,
+    withFooter = false,
+    ...rest
+  } = _ref2;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Card', tokens, variant, {
+    viewport
+  });
+  return /*#__PURE__*/_jsx(CardContentContainer, { ...themeTokens,
+    flexContent: flexContent,
+    withFooter: withFooter,
+    ...selectProps(rest),
+    children: children
+  });
+};
+
+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/lib-module/Card/CardFooter.js

@@ -0,0 +1,80 @@
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const CardFooterContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CardFooter__CardFooterContainer",
+  componentId: "components-web__sc-pm6vns-0"
+})(_ref => {
+  let {
+    backgroundColor,
+    borderRadius,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref;
+  return {
+    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 = _ref2 => {
+  let {
+    children,
+    padding,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Card', tokens, { ...variant,
+    background: 'alternative'
+  }, {
+    viewport
+  });
+  return /*#__PURE__*/_jsx(CardFooterContainer, { ...themeTokens,
+    ...padding,
+    ...selectProps(rest),
+    children: children
+  });
+};
+
+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/lib-module/Card/index.js

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

package/lib-module/Countdown/Countdown.js

@@ -0,0 +1,165 @@
+/* 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';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const Container = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Countdown__Container",
+  componentId: "components-web__sc-18tqcb2-0"
+})(_ref => {
+  let {
+    variant: {
+      feature,
+      inverse,
+      large
+    },
+    themeTokens,
+    gradient
+  } = _ref;
+  return { ...(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 = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    copy = 'en',
+    targetTime,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref2;
+  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 ?
+  /*#__PURE__*/
+  // StackView-based subcontainer adds a 1-step space on the each side of the divider
+  _jsx(Spacer, {
+    direction: "row",
+    space: (feature || large) && viewport !== viewports.xs ? 7 : 2
+  }) : /*#__PURE__*/_jsx(Typography, {
+    tokens: mainTextTokens,
+    children: ":"
+  });
+  const labelTokens = getLabelTokens(themeTokens);
+  const commonProps = {
+    copy,
+    labelTokens,
+    numberTokens: mainTextTokens,
+    segmentFontSize,
+    variant
+  };
+  return (
+    /*#__PURE__*/
+    // Making it focusable for accessibility purposes
+    _jsx(Container, {
+      ref: ref,
+      variant: variant,
+      ...selectProps(rest),
+      tabIndex: 0,
+      themeTokens: themeTokens,
+      gradient: semanticGradient,
+      children: /*#__PURE__*/_jsxs(StackView, {
+        direction: "row",
+        space: 1,
+        children: [/*#__PURE__*/_jsx(Segment, {
+          labelKey: "day",
+          number: days,
+          segmentWidth: String(days).length,
+          ...commonProps
+        }), divider, /*#__PURE__*/_jsx(Segment, {
+          labelKey: "hour",
+          number: hours,
+          ...commonProps,
+          ...applyTextStyles(themeTokens)
+        }), divider, /*#__PURE__*/_jsx(Segment, {
+          labelKey: "minute",
+          number: minutes,
+          ...commonProps,
+          ...applyTextStyles(themeTokens)
+        }), divider, /*#__PURE__*/_jsx(Segment, {
+          labelKey: "second",
+          number: seconds,
+          ...commonProps,
+          ...applyTextStyles(themeTokens)
+        })]
+      })
+    })
+  );
+});
+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/lib-module/Countdown/Segment.js

@@ -0,0 +1,94 @@
+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
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const pad = function (number) {
+  let segmentWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  return String(number).padStart(segmentWidth, '0');
+};
+
+const Container = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Segment__Container",
+  componentId: "components-web__sc-yrh35y-0"
+})(_ref => {
+  let {
+    segmentFontSize,
+    segmentWidth = 2,
+    variant: {
+      feature
+    }
+  } = _ref;
+  return {
+    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 = _ref2 => {
+  let {
+    copy = 'en',
+    segmentFontSize,
+    labelKey,
+    labelTokens,
+    number,
+    numberTokens,
+    segmentWidth = 2,
+    variant = {}
+  } = _ref2;
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const {
+    label,
+    large,
+    feature
+  } = variant;
+  return /*#__PURE__*/_jsx(Container, {
+    segmentFontSize: segmentFontSize,
+    segmentWidth: segmentWidth,
+    variant: variant,
+    children: /*#__PURE__*/_jsxs(StackView, {
+      direction: large || feature ? 'column' : 'row',
+      space: large || feature ? 0 : 1,
+      tokens: {
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        tokens: numberTokens,
+        children: pad(number, segmentWidth)
+      }), label && /*#__PURE__*/_jsx(Typography, {
+        tokens: labelTokens,
+        children: getCopy(number === 1 ? labelKey : `${labelKey}s`)
+      })]
+    })
+  });
+};
+
+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/lib-module/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/lib-module/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/lib-module/Countdown/index.js

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

package/lib-module/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/lib-module/Countdown/useCountdown.js

@@ -0,0 +1,32 @@
+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/lib-module/Modal/ModalContent.js

@@ -27,9 +27,15 @@ const StyledSubHeading = /*#__PURE__*/styled.div.withConfig({
   } = _ref2;
   return marginTop;
 });
+const StyledTextButtonContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ModalContent__StyledTextButtonContainer",
+  componentId: "components-web__sc-k40cwb-3"
+})({
+  display: 'flex'
+});
 const StyledFooter = /*#__PURE__*/styled.footer.withConfig({
   displayName: "ModalContent__StyledFooter",
-  componentId: "components-web__sc-k40cwb-3"
+  componentId: "components-web__sc-k40cwb-4"
 })(_ref3 => {
   let {
     hasBorder,
@@ -143,15 +149,15 @@ const ModalContent = _ref4 => {
         },
         onPress: onConfirm,
         children: confirmButtonText
-      }), /*#__PURE__*/_jsx("div", {
-        children: hasCancelButton && /*#__PURE__*/_jsx(CancelButton, {
+      }), hasCancelButton ? /*#__PURE__*/_jsx(StyledTextButtonContainer, {
+        children: /*#__PURE__*/_jsx(CancelButton, {
           tokens: {
             color: cancelButtonColor
           },
           onPress: onCancel,
           children: cancelButtonText
         })
-      })]
+      }) : null]
     })]
   });
 };

package/lib-module/OptimizeImage/OptimizeImage.js

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { selectSystemProps } from '@telus-uds/components-base';
+import ResponsiveImage from '../ResponsiveImage';
+import { hasWebpSupport, getOptimizedUrl, getFallbackUrl } from './utils';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+
+const OptimizeImage = _ref => {
+  let {
+    contentfulAssetUrl,
+    alt,
+    quality = 80,
+    xs = 320,
+    sm = 576,
+    md = 768,
+    lg = 992,
+    xl = 1200,
+    sizeByHeight = false,
+    disableRetina = false,
+    ...rest
+  } = _ref;
+  const [imgUrls, setImgUrls] = useState(); // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
+
+  const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w';
+  useEffect(() => {
+    // Currently not all browsers support webP
+    hasWebpSupport().then(supportsWebp => {
+      setImgUrls({
+        xsSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xs, quality, disableRetina, supportsWebp),
+        smSrc: getOptimizedUrl(contentfulAssetUrl, dimension, sm, quality, disableRetina, supportsWebp),
+        mdSrc: getOptimizedUrl(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
+        lgSrc: getOptimizedUrl(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
+        xlSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
+        fallbackSrc: getFallbackUrl(contentfulAssetUrl, xl, quality)
+      });
+    });
+  }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs]);
+  if (!imgUrls) return null;
+  return /*#__PURE__*/_jsx(ResponsiveImage, { ...imgUrls,
+    alt: alt,
+    ...selectProps(rest)
+  });
+};
+
+OptimizeImage.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The source to load the image. Only contentful image urls are supported. See https://www.contentful.com/developers/docs/references/images-api/ for details.
+   */
+  contentfulAssetUrl: PropTypes.string.isRequired,
+
+  /**
+   * Alternative text to display if image cannot be loaded or a screen reader is used.
+   */
+  alt: PropTypes.string.isRequired,
+
+  /**
+   * Customize quality as a percentage between 1 and 100.
+   */
+  quality: PropTypes.number,
+
+  /**
+   * Customize width for xs screen size in px, this may affect the quality of the image.
+   */
+  xs: PropTypes.number,
+
+  /**
+   * Customize width for sm screen size in px, this may affect the quality of the image.
+   */
+  sm: PropTypes.number,
+
+  /**
+   * Customize width for md screen size in px, this may affect the quality of the image.
+   */
+  md: PropTypes.number,
+
+  /**
+   * Customize width for lg screen size in px, this may affect the quality of the image.
+   */
+  lg: PropTypes.number,
+
+  /**
+   * Customize width for xl screen size in px, this may affect the quality of the image.
+   */
+  xl: PropTypes.number,
+
+  /**
+   * Switches size dimension to height, default is false
+   */
+  sizeByHeight: PropTypes.bool,
+
+  /**
+   * Turns off retina display functionality
+   */
+  disableRetina: PropTypes.bool,
+
+  /**
+   * Loading strategy.
+   * @default 'eager'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+   */
+  loading: PropTypes.oneOf(['eager', 'lazy'])
+};
+export default OptimizeImage;

package/lib-module/OptimizeImage/index.js

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

package/lib-module/OptimizeImage/utils/getFallbackUrl.js

@@ -0,0 +1,8 @@
+import isSvgUrl from './isSvgUrl';
+export default function getFallbackUrl(url, width, quality) {
+  if (!isSvgUrl(url)) {
+    return `${url}?w=${width}&q=${quality}`;
+  }
+
+  return url;
+}