@telus-uds/components-web 1.7.0 → 1.9.0

package/lib-module/Card/Card.js

@@ -0,0 +1,158 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, variantProp, a11yProps, viewProps } from '@telus-uds/components-base';
+import CardContent from './CardContent';
+import CardFooter from './CardFooter';
+import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent'; // Passes React Native-oriented system props through UDS Card
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ * A basic card component, unstyled by default.
+ *
+ * ## Component API
+ *
+ * ### With Footer
+ *
+ * Pass any component or simply a string in the `footer` prop in order to render
+ * a card with a footer (which uses the `alternative` background).
+ *
+ * ### With Full Bleed Content
+ *
+ * Use `fullBleedContent` prop to add a full bleed style image, video or other content to the
+ * card. This prop accepts an object with the following properties:
+ * - `alt`: alt tag for an image,
+ * - `src`: default image source,
+ * - `position`: `none`, `bottom`, `left`, `right` or `top`, depending on where you would like your full bleed image to be placed,
+ * - all the props from the `ResponsiveImage` component in case you want that full bleed image to be responsive,
+ * - `content`: pass a custom JSX to be used for rendering of the full bleed content (defaults to `ResponsiveImage`
+ *   receiving the other props).
+ *
+ * Note that `position` can be responsive, i.e. different for different viewports. A full bleed content with position
+ * {xs: 'none', md: 'left'} for example, will have a full bleed content to the left of card content when viewed on desktops
+ * viewports, and no content when viewed on mobile viewports.
+ *
+ * ## Accessibility
+ * `Card` component accepts all the standard accessibility props.
+ */
+
+const Card = /*#__PURE__*/forwardRef(function () {
+  let {
+    children,
+    footer,
+    footerPadding,
+    fullBleedImage,
+    fullBleedContent = fullBleedImage,
+    tokens,
+    variant,
+    ...rest
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    fullBleedContent: {
+      position: null
+    }
+  };
+  let ref = arguments.length > 1 ? arguments[1] : undefined;
+  const {
+    contentStackAlign,
+    contentStackDirection,
+    fullBleedContentPosition,
+    fullBleedContentProps
+  } = useFullBleedContentProps(fullBleedContent); // If the card has rounded corners and a full bleed image, we need to apply
+  // those corners on the image as well, but partially
+
+  const {
+    borderRadius
+  } = useThemeTokens('Card', tokens, variant);
+  const hasFooter = Boolean(footer);
+  const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter); // Make multiple cards in a row have equal heights with even space between content items
+
+  const columnFlex = {
+    flexGrow: 1,
+    flexShrink: 1,
+    justifyContent: 'space-between'
+  };
+  return /*#__PURE__*/_jsx(CardBase, {
+    ref: ref,
+    variant: { ...variant,
+      padding: 'custom'
+    },
+    tokens: tokens,
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsxs(StackView, {
+      space: 0,
+      tokens: columnFlex,
+      children: [/*#__PURE__*/_jsxs(StackView, {
+        direction: contentStackDirection,
+        tokens: { ...columnFlex,
+          alignItems: contentStackAlign
+        },
+        space: 0,
+        children: [/*#__PURE__*/_jsx(CardContent, {
+          tokens: tokens,
+          variant: variant,
+          withFooter: hasFooter,
+          children: children
+        }), fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(FullBleedContent, {
+          borderRadius: fullBleedBorderRadius,
+          ...fullBleedContentProps
+        })]
+      }), footer && /*#__PURE__*/_jsx(CardFooter, {
+        padding: footerPadding,
+        tokens: tokens,
+        variant: variant,
+        children: footer
+      })]
+    })
+  });
+});
+const positionValues = ['none', 'bottom', 'left', 'right', 'top'];
+const alignValues = ['start', 'end', 'center', 'stretch'];
+const PositionedFullBleedContentPropType = PropTypes.shape({
+  position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(positionValues)).isRequired,
+  align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(alignValues)),
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+  ...FullBleedContent.propTypes
+});
+Card.displayName = 'Card';
+Card.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Card content.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Card footer.
+   */
+  footer: PropTypes.node,
+
+  /**
+   * Custom card footer padding.
+   */
+  footerPadding: paddingProp.propType,
+
+  /**
+   * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
+   *
+   * @deprecated
+   */
+  fullBleedImage: PositionedFullBleedContentPropType,
+
+  /**
+   * Full bleed content to be placed on the card.
+   */
+  fullBleedContent: PositionedFullBleedContentPropType,
+
+  /**
+   * Card tokens.
+   */
+  tokens: getTokensPropType('Card'),
+
+  /**
+   * Card variant.
+   */
+  variant: variantProp.propType
+};
+export default Card;

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;