@telus-uds/components-web 1.8.0 → 1.10.0

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;
+}

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

@@ -0,0 +1,22 @@
+import isSvgUrl from './isSvgUrl';
+export default function getOptimizedUrl(url, dimension, size, quality, disableRetina, supportsWebp) {
+  if (!isSvgUrl(url)) {
+    let format = '';
+
+    if (supportsWebp) {
+      format = 'fm=webp';
+    } else if (url.match(/\.jpe?g$/i)) {
+      format = 'fm=jpg&fl=progressive';
+    }
+
+    let optimizedUrl = `${url}?${dimension}=${size}&q=${quality}&${format}`;
+
+    if (!disableRetina) {
+      optimizedUrl += `, ${url}?${dimension}=${size * 2}&q=${quality}&${format} 2x`;
+    }
+
+    return optimizedUrl;
+  }
+
+  return url;
+}

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

@@ -0,0 +1,32 @@
+let promise;
+/**
+ * Taken directly from Google developers guide on how to detect browser support for WebP.
+ *
+ * @see https://developers.google.com/speed/webp/faq#in_your_own_javascript
+ * @return {Promise<boolean>}
+ */
+
+export default function hasWebpSupport() {
+  // cache the result, so that this function runs only once
+  if (!promise) {
+    promise = new Promise(resolve => {
+      // basic support. other test forms exist for lossless, alpha, and animation types.
+      // check google guide if data strings are needed
+      const lossy = 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
+      const img = document.createElement('img');
+
+      img.onload = function onLoad() {
+        const result = img.width > 0 && img.height > 0;
+        resolve(result);
+      };
+
+      img.onerror = function onError() {
+        resolve(false);
+      };
+
+      img.src = `data:image/webp;base64,${lossy}`;
+    });
+  }
+
+  return promise;
+}

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

@@ -0,0 +1,4 @@
+import getOptimizedUrl from './getOptimizedUrl';
+import getFallbackUrl from './getFallbackUrl';
+import hasWebpSupport from './hasWebpSupport';
+export { getOptimizedUrl, getFallbackUrl, hasWebpSupport };

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

@@ -0,0 +1,3 @@
+export default function isSvgUrl(url) {
+  return !!url.match(/\.svg$/i);
+}

package/lib-module/QuantitySelector/QuantitySelector.js

@@ -0,0 +1,232 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { getThemeTokens, Box, TextInput, Spacer, Feedback, InputLabel, useInputValue, useCopy, useThemeTokens, useTheme } from '@telus-uds/components-base';
+import IconButton from '../IconButton';
+import { InputField, InputWrapper, LeftButtonWrapper, RightButtonWrapper } from './styles';
+import defaultDictionary from './dictionary';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  isNaN
+} = Number;
+
+const isNumber = value => {
+  return typeof value === 'number' && !isNaN(value);
+};
+
+const QuantitySelector = _ref => {
+  let {
+    id,
+    minNumber,
+    maxNumber,
+    defaultValue,
+    label,
+    hint,
+    hintPosition,
+    tooltip,
+    onChange,
+    dictionary = defaultDictionary,
+    accessibilityLabel,
+    copy,
+    variant,
+    tokens,
+    testID
+  } = _ref;
+  const {
+    components: {
+      QuantitySelector: componentTheme
+    }
+  } = useTheme();
+  const {
+    leftIcon,
+    rightIcon,
+    padding
+  } = useThemeTokens('QuantitySelector', tokens, variant);
+  const [error, setError] = useState('');
+  const {
+    alternative
+  } = variant;
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+
+  const getValidatedNumber = numberToEvaluate => {
+    if (isNaN(numberToEvaluate)) return null;
+    if (isNumber(minNumber) && numberToEvaluate < minNumber) throw getCopy('errors').numberIsTooSmall(minNumber);
+    if (isNumber(maxNumber) && numberToEvaluate > maxNumber) throw getCopy('errors').numberIsTooBig(maxNumber);
+    return numberToEvaluate;
+  };
+
+  const initialValue = getValidatedNumber(defaultValue);
+  const {
+    currentValue: number,
+    setValue: setNumber
+  } = useInputValue({
+    value: undefined,
+    initialValue,
+    onChange
+  });
+  const isDecreaseEnabled = !isNumber(minNumber) || number > minNumber;
+  const isIncreaseEnabled = !isNumber(maxNumber) || number < maxNumber;
+  const inputValue = isNumber(number) ? number.toString() : '';
+
+  const updateNumber = (newNumber, originalInputEvent) => {
+    try {
+      const validatedNumber = getValidatedNumber(newNumber);
+      setNumber(validatedNumber, originalInputEvent);
+      setError('');
+    } catch (e) {
+      setError(e);
+    }
+  };
+
+  const inputChangeHandler = (textInputValue, event) => {
+    if (textInputValue === '') setNumber(null);
+    const numberFromTextInput = Number(textInputValue);
+
+    if (isNumber(numberFromTextInput)) {
+      updateNumber(numberFromTextInput, event);
+    } else {
+      setError(getCopy('errors').invalidCharacters);
+    }
+  };
+
+  const renderLabel = () => label ? /*#__PURE__*/_jsx(InputLabel, {
+    forId: id,
+    label: label,
+    hint: hint,
+    hintPosition: hintPosition,
+    tooltip: tooltip
+  }) : null;
+
+  const renderTextInput = () => /*#__PURE__*/_jsx(TextInput, {
+    nativeID: id,
+    value: inputValue,
+    tokens: textInputState => {
+      const {
+        inputBorderColor,
+        inputBackgroundColor
+      } = getThemeTokens(componentTheme, tokens, variant, textInputState);
+      return {
+        borderRadius: 0,
+        margin: 0,
+        padding: 0,
+        borderColor: inputBorderColor,
+        backgroundColor: inputBackgroundColor
+      };
+    },
+    onChange: inputChangeHandler // Using title as an accessibility workaround
+    // given that accessibilityLabel is not available
+    ,
+    keyboardType: "numeric",
+    accessibilityLabel: accessibilityLabel ?? getCopy('accessibility').a11yLabel,
+    accessibilityRole: "spinbutton",
+    accessibilityValueMax: maxNumber,
+    accessibilityValueMin: minNumber,
+    accessibilityValueNow: number
+  });
+
+  const getButtonTokens = isEnabled => buttonState => {
+    const disabled = !isEnabled;
+    const { ...buttonTokens
+    } = getThemeTokens(componentTheme, tokens, variant, { ...buttonState,
+      disabled
+    });
+    return { ...buttonTokens,
+      outerBorderGap: 0,
+      padding
+    };
+  };
+
+  const renderLeftButton = () => {
+    return /*#__PURE__*/_jsx(IconButton, {
+      icon: leftIcon,
+      tokens: getButtonTokens(isDecreaseEnabled),
+      onPress: event => updateNumber(number - 1, event),
+      onDoubleClick: event => updateNumber(number - 1, event),
+      accessibilityLabel: getCopy('accessibility').decreaseButton,
+      accessibilityDisabled: !isDecreaseEnabled
+    });
+  };
+
+  const renderRightButton = () => /*#__PURE__*/_jsx(IconButton, {
+    icon: rightIcon,
+    tokens: getButtonTokens(isIncreaseEnabled),
+    onPress: () => updateNumber(number + 1),
+    onDoubleClick: () => updateNumber(number + 1),
+    accessibilityLabel: getCopy('accessibility').increaseButton,
+    accessibilityDisabled: !isIncreaseEnabled
+  });
+
+  return /*#__PURE__*/_jsxs(Box, {
+    space: 2,
+    testID: testID,
+    children: [renderLabel(), /*#__PURE__*/_jsx(Spacer, {
+      space: 2
+    }), /*#__PURE__*/_jsxs(InputWrapper, {
+      children: [/*#__PURE__*/_jsx(InputField, {
+        className: `${alternative ? 'alternative' : ''}`,
+        children: renderTextInput()
+      }), /*#__PURE__*/_jsx(RightButtonWrapper, {
+        className: `${alternative ? 'alternative' : ''}`,
+        children: renderRightButton()
+      }), /*#__PURE__*/_jsx(LeftButtonWrapper, {
+        className: `${alternative ? 'alternative' : ''}`,
+        children: renderLeftButton()
+      })]
+    }), error ? /*#__PURE__*/_jsx(Box, {
+      vertical: 2,
+      children: /*#__PURE__*/_jsx(Feedback, {
+        validation: "error",
+        children: error
+      })
+    }) : null]
+  });
+}; // If a language dictionary entry is provided, it must contain every key
+
+
+const dictionaryContentShape = PropTypes.shape({
+  accessibility: PropTypes.shape({
+    a11yLabel: PropTypes.string.isRequired,
+    increaseButton: PropTypes.string.isRequired,
+    decreaseButton: PropTypes.string.isRequired
+  }).isRequired,
+  errors: PropTypes.shape({
+    numberIsTooSmall: PropTypes.func.isRequired,
+    numberIsTooBig: PropTypes.func.isRequired,
+    invalidCharacters: PropTypes.string.isRequired
+  }).isRequired
+});
+QuantitySelector.propTypes = {
+  id: PropTypes.string,
+  minNumber: PropTypes.number,
+  maxNumber: PropTypes.number,
+  onChange: PropTypes.func,
+  defaultValue: PropTypes.number,
+  label: PropTypes.string,
+  hint: PropTypes.string,
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+  tooltip: PropTypes.string,
+  accessibilityLabel: PropTypes.string,
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
+  variant: PropTypes.exact({
+    alternative: PropTypes.bool
+  }),
+  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+  testID: PropTypes.string
+};
+QuantitySelector.defaultProps = {
+  id: 'quantity-selector',
+  hintPosition: 'inline',
+  copy: 'en',
+  variant: {
+    alternative: false
+  },
+  testID: 'quantity-selector-testid'
+};
+export default QuantitySelector;

package/lib-module/QuantitySelector/dictionary.js

@@ -0,0 +1,26 @@
+export default {
+  en: {
+    accessibility: {
+      a11yLabel: 'Quantity Selector control',
+      increaseButton: 'Increase quantity button',
+      decreaseButton: 'Decrease quantity button'
+    },
+    errors: {
+      numberIsTooSmall: minNumber => `Number must be equal or greater than ${minNumber}`,
+      numberIsTooBig: maxNumber => `Number must be equal or less than ${maxNumber}`,
+      invalidCharacters: 'This control does not allow alphabetical or symbol characters. Try using numbers only'
+    }
+  },
+  fr: {
+    accessibility: {
+      a11yLabel: 'Contrôleur de sélection de nombre',
+      increaseButton: `Bouton d'augmentation de quantité`,
+      decreaseButton: `Bouton de diminution de quantité`
+    },
+    errors: {
+      numberIsTooSmall: minNumber => `Le nombre doit être plus grand ou égal que ${minNumber}`,
+      numberIsTooBig: maxNumber => `Le nombre doit être plus petit ou égal que ${maxNumber}`,
+      invalidCharacters: `Ce champ ne supporte pas les caractères alphabétiques ni les symboles. Essayez d'utiliser des chiffres uniquement`
+    }
+  }
+};

package/lib-module/QuantitySelector/index.js

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

package/lib-module/QuantitySelector/styles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export const InputField = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__InputField",
+  componentId: "components-web__sc-1lrz1xk-0"
+})(["order:2;min-width:3.5rem;max-width:5 rem;height:28px;padding:0;width:64px;text-align:center;z-index:10;input{text-align:center;}&.alternative{input{height:40px;}}"]);
+const ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__ButtonWrapper",
+  componentId: "components-web__sc-1lrz1xk-1"
+})(["&.alternative{div[role='button']{height:42px;> div{height:40px;> div{padding:12px 16px;}}}}"]);
+export const LeftButtonWrapper = /*#__PURE__*/styled(ButtonWrapper).withConfig({
+  displayName: "styles__LeftButtonWrapper",
+  componentId: "components-web__sc-1lrz1xk-2"
+})(["order:0;div[role='button']{border-radius:4px 0px 0px 4px !important;> div{border-right:none;border-radius:4px 0px 0px 4px !important;}}&.alternative{div[role='button']{border-radius:36px 0px 0px 36px !important;> div{border-radius:24px 0px 0px 24px !important;}}}"]);
+export const RightButtonWrapper = /*#__PURE__*/styled(ButtonWrapper).withConfig({
+  displayName: "styles__RightButtonWrapper",
+  componentId: "components-web__sc-1lrz1xk-3"
+})(["order:3;div[role='button']{border-radius:0px 4px 4px 0px !important;> div{border-left:none;border-radius:0px 4px 4px 0px !important;}}&.alternative{div[role='button']{border-radius:0px 36px 36px 0px !important;> div{border-radius:0px 36px 36px 0px !important;}}}"]);
+export const InputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__InputWrapper",
+  componentId: "components-web__sc-1lrz1xk-4"
+})(["textalign:start;display:flex;flexdirection:row;flexwrap:nowrap;justifycontent:center;"]);