@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/Countdown/Countdown.js

@@ -0,0 +1,268 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _systemConstants = require("@telus-uds/system-constants");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _Segment = _interopRequireDefault(require("./Segment"));
+var _useCountdown = _interopRequireDefault(require("./useCountdown"));
+var _types = require("./types");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Reading these from the RN palette since they will be used to generate
+// the `Typography` tokens
+
+const DAYS = 'days';
+const HOURS = 'hours';
+const MINUTES = 'minutes';
+const SECONDS = 'seconds';
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const Container = /*#__PURE__*/_styledComponents.default.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,
+      borderColor: themeTokens.containerBorderColor,
+      borderStyle: 'solid',
+      borderWidth: `${themeTokens.containerBorderWidth}px`,
+      justifyContent: 'center',
+      paddingBottom: `${themeTokens.containerPaddingBottomTop}px`,
+      paddingLeft: `${themeTokens.containerPaddingLeftRight}px`,
+      paddingRight: `${themeTokens.containerPaddingLeftRight}px`,
+      paddingTop: `${themeTokens.containerPaddingBottomTop}px`,
+      width: 'fit-content'
+    }),
+    ...(feature && !inverse && gradient && {
+      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`
+    })
+  };
+});
+const getLabelTokens = themeTokens => ({
+  color: themeTokens.labelBorderColor,
+  fontSize: themeTokens.labelFontSize,
+  fontWeight: themeTokens.labelFontWeight,
+  lineHeight: themeTokens.labelLineHeight
+});
+const getMainTextTokens = _ref2 => {
+  let {
+    labelBorderColor,
+    textTimerFontWeight,
+    textFontSize,
+    textLineHeight,
+    textTimerFontName
+  } = _ref2;
+  return {
+    color: labelBorderColor,
+    lineHeight: textLineHeight,
+    fontWeight: textTimerFontWeight,
+    fontSize: textFontSize,
+    fontName: textTimerFontName
+  };
+};
+const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    copy = 'en',
+    targetTime,
+    tokens,
+    variant = {},
+    units = [DAYS, HOURS, MINUTES, SECONDS],
+    ...rest
+  } = _ref3;
+  const [days, hours, minutes, seconds] = (0, _useCountdown.default)(targetTime);
+  const viewport = (0, _componentsBase.useViewport)();
+  const {
+    feature,
+    large,
+    noDivider
+  } = variant;
+  const {
+    themeOptions
+  } = (0, _componentsBase.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _componentsBase.useResponsiveThemeTokens : _componentsBase.useThemeTokens;
+  const themeTokens = useTokens('Countdown', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  const segmentFontSize = themeTokens.textFontSize;
+  const semanticGradient = themeTokens.containerGradient && (0, _utils.transformGradient)(themeTokens.containerGradient);
+  const mainTextTokens = getMainTextTokens(themeTokens);
+  const labelTokens = getLabelTokens(themeTokens);
+  let labelStyles;
+  let labelMediaIds;
+  let mainTextStyles;
+  let mainTextMediaIds;
+  let containerStyles;
+  let containerMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedLabelThemeTokens,
+      transformedMainTextThemeTokens,
+      transformedContainerThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp, viewportTokens] = _ref4;
+      acc.transformedLabelThemeTokens[vp] = {
+        fontSize: viewportTokens.labelFontSize,
+        lineHeight: viewportTokens.labelLineHeight
+      };
+      acc.transformedMainTextThemeTokens[vp] = {
+        fontSize: viewportTokens.textFontSize,
+        lineHeight: viewportTokens.textLineHeight
+      };
+      acc.transformedContainerThemeTokens[vp] = {
+        containerPaddingBottomTop: viewportTokens.containerPaddingBottomTop,
+        containerPaddingLeftRight: viewportTokens.containerPaddingLeftRight
+      };
+      return acc;
+    }, {
+      transformedLabelThemeTokens: {},
+      transformedMainTextThemeTokens: {},
+      transformedContainerThemeTokens: {}
+    });
+    const labelMediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(transformedLabelThemeTokens);
+    const mainTestMediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(transformedMainTextThemeTokens);
+    const containerMediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(transformedContainerThemeTokens);
+    const {
+      ids,
+      styles
+    } = _componentsBase.StyleSheet.create({
+      label: {
+        ...themeTokens[viewport],
+        ...labelMediaQueryStyles
+      },
+      mainText: {
+        ...themeTokens[viewport],
+        ...mainTestMediaQueryStyles
+      },
+      container: {
+        ...themeTokens[viewport],
+        ...containerMediaQueryStyles
+      }
+    });
+    labelStyles = getLabelTokens(styles.label);
+    labelMediaIds = ids.label;
+    mainTextStyles = getMainTextTokens(styles.mainText);
+    mainTextMediaIds = ids.mainText;
+    containerStyles = styles.container;
+    containerMediaIds = ids.container;
+  } else {
+    labelStyles = labelTokens;
+    mainTextStyles = mainTextTokens;
+    containerStyles = themeTokens;
+  }
+  const divider = noDivider === true ?
+  /*#__PURE__*/
+  // StackView-based subcontainer adds a 1-step space on the each side of the divider
+  (0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+    direction: "row",
+    space: (feature || large) && viewport !== _systemConstants.viewports.xs ? 4 : 1
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    tokens: mainTextTokens,
+    children: ":"
+  });
+  const segmentProps = {
+    copy,
+    labelTokens: labelStyles,
+    numberTokens: mainTextStyles,
+    labelMediaIds,
+    mainTextMediaIds,
+    segmentFontSize,
+    variant
+  };
+  return (
+    /*#__PURE__*/
+    // Making it focusable for accessibility purposes
+    (0, _jsxRuntime.jsx)(Container, {
+      ref: ref,
+      variant: variant,
+      ...selectProps(rest),
+      tabIndex: 0,
+      themeTokens: containerStyles,
+      gradient: semanticGradient,
+      media: containerMediaIds,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.StackView, {
+        direction: "row",
+        space: 1,
+        children: units.map((unit, index) => {
+          let number;
+          let labelKey;
+          switch (unit) {
+            case DAYS:
+              number = days;
+              labelKey = 'day';
+              break;
+            case HOURS:
+              number = hours;
+              labelKey = 'hour';
+              break;
+            case MINUTES:
+              number = minutes;
+              labelKey = 'minute';
+              break;
+            case SECONDS:
+              number = seconds;
+              labelKey = 'second';
+              break;
+            default:
+              return null;
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.default, {
+              labelKey: labelKey,
+              number: number,
+              ...(unit === DAYS && {
+                segmentWidth: String(number).length
+              }),
+              ...segmentProps,
+              ...(0, _componentsBase.applyTextStyles)(themeTokens)
+            }), index < units.length - 1 && divider]
+          }, unit);
+        })
+      })
+    })
+  );
+});
+Countdown.displayName = 'Countdown';
+Countdown.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Countdown'),
+  /**
+   * 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.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _types.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.default.instanceOf(Date),
+  variant: _types.countdownVariantPropType,
+  /**
+   * An array of strings representing the units to display in the countdown.
+   * Possible values: `'days'`, `'hours'`, `'minutes'`, `'seconds'`
+   */
+  units: _propTypes.default.arrayOf(_propTypes.default.oneOf([DAYS, HOURS, MINUTES, SECONDS]))
+};
+var _default = exports.default = Countdown;

package/lib/cjs/Countdown/Segment.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _types = require("./types");
+var _constants = require("./constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// !TODO: put this back
+
+// Pads with zeros on the left if it's a single digit number
+const pad = function (number) {
+  let segmentWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  return String(number).padStart(segmentWidth, '0');
+};
+const Container = /*#__PURE__*/_styledComponents.default.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 && {
+      // This is required because when the numbers for Countdown change, the character widths will change and thereby effecting the container demensions.
+      width: `${segmentFontSize * _constants.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 = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    copy = 'en',
+    segmentFontSize,
+    labelKey,
+    labelTokens,
+    number,
+    numberTokens,
+    labelMediaIds,
+    mainTextMediaIds,
+    segmentWidth = 2,
+    variant = {}
+  } = _ref2;
+  const getCopy = (0, _componentsBase.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const {
+    label,
+    large,
+    feature
+  } = variant;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    segmentFontSize: segmentFontSize,
+    segmentWidth: segmentWidth,
+    variant: variant,
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      direction: large || feature ? 'column' : 'row',
+      space: large || feature ? 0 : 1,
+      tokens: {
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        tokens: numberTokens,
+        media: mainTextMediaIds,
+        children: pad(number, segmentWidth)
+      }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        tokens: labelTokens,
+        media: labelMediaIds,
+        children: getCopy(number === 1 ? labelKey : `${labelKey}s`)
+      })]
+    })
+  });
+});
+Segment.displayName = 'Segment';
+Segment.propTypes = {
+  /**
+   * Copy language identifier or a dictionary instance.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _types.dictionaryContentShape]),
+  segmentFontSize: _propTypes.default.number,
+  labelKey: _propTypes.default.oneOf(['day', 'hour', 'minute', 'second']),
+  labelTokens: _propTypes.default.object,
+  number: _propTypes.default.number,
+  numberTokens: _propTypes.default.object,
+  segmentWidth: _propTypes.default.number,
+  labelMediaIds: _propTypes.default.string,
+  mainTextMediaIds: _propTypes.default.string,
+  variant: _types.countdownVariantPropType
+};
+var _default = exports.default = Segment;

package/lib/cjs/Countdown/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.XS_FONT_SIZE = exports.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = exports.LARGE_FONT_SIZE = exports.DEFAULT_FONT_SIZE = void 0;
+const DEFAULT_FONT_SIZE = exports.DEFAULT_FONT_SIZE = 16;
+const LARGE_FONT_SIZE = exports.LARGE_FONT_SIZE = 64;
+const XS_FONT_SIZE = exports.XS_FONT_SIZE = 28;
+const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = exports.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8;

package/lib/cjs/Countdown/dictionary.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.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/cjs/Countdown/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Countdown = _interopRequireDefault(require("./Countdown"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Countdown.default;

package/lib/cjs/Countdown/types.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dictionaryContentShape = exports.default = exports.countdownVariantPropType = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const countdownVariantPropType = exports.countdownVariantPropType = _propTypes.default.shape({
+  feature: _propTypes.default.bool,
+  inverse: _propTypes.default.bool,
+  label: _propTypes.default.bool,
+  large: _propTypes.default.bool,
+  noDivider: _propTypes.default.bool
+});
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = exports.dictionaryContentShape = _propTypes.default.shape({
+  days: _propTypes.default.string.isRequired,
+  day: _propTypes.default.string.isRequired,
+  hours: _propTypes.default.string.isRequired,
+  hour: _propTypes.default.string.isRequired,
+  minutes: _propTypes.default.string.isRequired,
+  minute: _propTypes.default.string.isRequired,
+  seconds: _propTypes.default.string.isRequired,
+  second: _propTypes.default.string.isRequired
+});
+var _default = exports.default = {
+  countdownVariantPropType,
+  dictionaryContentShape
+};

package/lib/cjs/Countdown/useCountdown.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("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] = (0, _react.useState)(countdownTime - new Date().getTime());
+  (0, _react.useEffect)(() => {
+    const interval = setInterval(() => {
+      setCountdown(countdownTime - new Date().getTime());
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [countdownTime]);
+  return getTimeCounts(countdown);
+};
+var _default = exports.default = useCountdown;