@telus-uds/components-web 1.8.0 → 1.10.0

package/src/OptimizeImage/OptimizeImage.jsx

@@ -0,0 +1,131 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const OptimizeImage = ({
+  contentfulAssetUrl,
+  alt,
+  quality = 80,
+  xs = 320,
+  sm = 576,
+  md = 768,
+  lg = 992,
+  xl = 1200,
+  sizeByHeight = false,
+  disableRetina = false,
+  ...rest
+}) => {
+  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 <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/src/OptimizeImage/index.js

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

package/src/OptimizeImage/utils/getFallbackUrl.js

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

package/src/OptimizeImage/utils/getOptimizedUrl.js

@@ -0,0 +1,30 @@
+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/src/OptimizeImage/utils/hasWebpSupport.js

@@ -0,0 +1,33 @@
+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/src/OptimizeImage/utils/index.js

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

package/src/OptimizeImage/utils/isSvgUrl.js

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

package/src/QuantitySelector/QuantitySelector.jsx

@@ -0,0 +1,245 @@
+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'
+
+const { isNaN } = Number
+
+const isNumber = (value) => {
+  return typeof value === 'number' && !isNaN(value)
+}
+
+const QuantitySelector = ({
+  id,
+  minNumber,
+  maxNumber,
+  defaultValue,
+  label,
+  hint,
+  hintPosition,
+  tooltip,
+  onChange,
+  dictionary = defaultDictionary,
+  accessibilityLabel,
+  copy,
+  variant,
+  tokens,
+  testID
+}) => {
+  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 ? (
+      <InputLabel
+        forId={id}
+        label={label}
+        hint={hint}
+        hintPosition={hintPosition}
+        tooltip={tooltip}
+      />
+    ) : null
+
+  const renderTextInput = () => (
+    <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 (
+      <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 = () => (
+    <IconButton
+      icon={rightIcon}
+      tokens={getButtonTokens(isIncreaseEnabled)}
+      onPress={() => updateNumber(number + 1)}
+      onDoubleClick={() => updateNumber(number + 1)}
+      accessibilityLabel={getCopy('accessibility').increaseButton}
+      accessibilityDisabled={!isIncreaseEnabled}
+    />
+  )
+
+  return (
+    <Box space={2} testID={testID}>
+      {renderLabel()}
+      <Spacer space={2} />
+      <InputWrapper>
+        <InputField className={`${alternative ? 'alternative' : ''}`}>
+          {renderTextInput()}
+        </InputField>
+        <RightButtonWrapper className={`${alternative ? 'alternative' : ''}`}>
+          {renderRightButton()}
+        </RightButtonWrapper>
+        <LeftButtonWrapper className={`${alternative ? 'alternative' : ''}`}>
+          {renderLeftButton()}
+        </LeftButtonWrapper>
+      </InputWrapper>
+      {error ? (
+        <Box vertical={2}>
+          <Feedback validation="error">{error}</Feedback>
+        </Box>
+      ) : null}
+    </Box>
+  )
+}
+
+// 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/src/QuantitySelector/dictionary.js

@@ -0,0 +1,27 @@
+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/src/QuantitySelector/index.js

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

package/src/QuantitySelector/styles.js

@@ -0,0 +1,83 @@
+import styled from 'styled-components'
+
+export const InputField = styled.div`
+  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 = styled.div`
+  &.alternative {
+    div[role='button'] {
+      height: 42px;
+      > div {
+        height: 40px;
+        > div {
+          padding: 12px 16px;
+        }
+      }
+    }
+  }
+`
+
+export const LeftButtonWrapper = styled(ButtonWrapper)`
+  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 = styled(ButtonWrapper)`
+  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 = styled.div`
+  textalign: start;
+  display: flex;
+  flexdirection: row;
+  flexwrap: nowrap;
+  justifycontent: center;
+`