@telus-uds/components-web 1.7.0 → 1.9.0

package/src/Listbox/ListboxOverlay.jsx

@@ -0,0 +1,71 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react'
+import { Card, Portal, useThemeTokens } from '@telus-uds/components-base'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native-web'
+
+const staticStyles = StyleSheet.create({
+  positioner: {
+    flex: 1, // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
+  },
+  hidden: {
+    // Use opacity not visibility to hide the dropdown during positioning
+    // so on web, children may be focused from the first render
+    opacity: 0
+  }
+})
+
+const paddingVertical = 0
+const paddingHorizontal = 0
+
+const DropdownOverlay = forwardRef(
+  ({ children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout }, ref) => {
+    const systemTokens = useThemeTokens('ListBox', {}, {})
+
+    return (
+      <Portal>
+        <View
+          ref={ref}
+          onLayout={onLayout}
+          style={[
+            overlaidPosition,
+            { maxWidth, minWidth },
+            staticStyles.positioner,
+            !isReady && staticStyles.hidden
+          ]}
+        >
+          <Card
+            tokens={{
+              shadow: systemTokens.shadow,
+              paddingBottom: paddingVertical,
+              paddingTop: paddingVertical,
+              paddingLeft: paddingHorizontal,
+              paddingRight: paddingHorizontal
+            }}
+          >
+            {children}
+          </Card>
+        </View>
+      </Portal>
+    )
+  }
+)
+
+DropdownOverlay.displayName = 'DropdownOverlay'
+
+DropdownOverlay.propTypes = {
+  children: PropTypes.node.isRequired,
+  isReady: PropTypes.bool,
+  overlaidPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    width: PropTypes.number
+  }),
+  maxWidth: PropTypes.number,
+  minWidth: PropTypes.number,
+  onLayout: PropTypes.func
+}
+
+export default DropdownOverlay

package/src/Listbox/PressableItem.jsx

@@ -0,0 +1,121 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { selectSystemProps, useThemeTokens } from '@telus-uds/components-base'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const getItemStyles = ({ tokens }) => ({
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.itemFontSize,
+  paddingTop: tokens.itemPaddingTop,
+  paddingBottom: tokens.itemPaddingBottom,
+  paddingLeft: tokens.itemPaddingLeft,
+  paddingRight: tokens.itemPaddingRight,
+  borderWidth: tokens.itemBorderWidth,
+  width: '100%',
+  backgroundColor: tokens.itemBackgroundColor,
+  color: tokens.groupColor,
+  display: tokens.itemDisplay,
+  outline: tokens.itemOutline,
+  textDecoration: tokens.itemTextDecoration
+})
+
+const StyledLink = styled.a(({ isChild, tokens }) => ({
+  ...getItemStyles({ isChild, tokens }),
+  borderLeft: isChild
+    ? `${tokens.itemBorderWidth}px solid ${tokens.itemBorderBackgroundColor}`
+    : 'none',
+  cursor: 'pointer',
+
+  [`&:hover, &:focus, &:active`]: {
+    color: tokens.itemColor
+  },
+
+  '&:hover': {
+    backgroundColor: tokens.groupBackgroundColor
+  },
+
+  // Highlighting for pressable items that are not links per se
+  // TODO: find a better way to display and style a pressable link
+  '&:hover > div, &:hover > div > span': {
+    color: `${tokens.itemColor} !important`
+  },
+
+  '&:focus': {
+    border: `${tokens.groupBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
+    borderLeft: isChild && `${tokens.itemBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
+    borderRadius: !isChild && tokens.groupBorderRadius,
+    paddingLeft: !isChild && `calc(${tokens.itemPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
+    paddingRight: `calc(${tokens.itemPaddingRight}px - ${tokens.groupBorderWidth}px)`,
+    paddingTop: `calc(${tokens.itemPaddingTop}px - ${tokens.groupBorderWidth}px)`,
+    paddingBottom: `calc(${tokens.itemPaddingBottom}px - ${tokens.groupBorderWidth}px)`,
+    backgroundColor: tokens.groupBackgroundColor
+  },
+
+  '&:active': {
+    backgroundColor: tokens.itemBorderBackgroundColor
+  }
+}))
+
+const PressableItem = forwardRef(
+  (
+    {
+      children,
+      href,
+      isChild = false,
+      onBlur,
+      onPress,
+      tabIndex = 0,
+      nextItemRef,
+      prevItemRef,
+      tokens,
+      variant = {},
+      ...rest
+    },
+    ref
+  ) => {
+    const handleKeyPress = (event) => {
+      if (['Enter', ' '].includes(event?.key)) {
+        onPress?.(event)
+      } else if (event?.key === 'ArrowDown' && nextItemRef?.current) {
+        nextItemRef.current.focus()
+      } else if (event?.key === 'ArrowUp' && prevItemRef?.current) {
+        prevItemRef.current.focus()
+      }
+    }
+    const systemTokens = useThemeTokens('ListBox', tokens, variant, { isChild, hover: true })
+
+    return (
+      <StyledLink
+        isChild={isChild}
+        tokens={systemTokens}
+        onBlur={onBlur}
+        onClick={onPress}
+        onKeyPress={handleKeyPress}
+        ref={ref}
+        tabIndex={tabIndex}
+        {...(href && { href })}
+        {...(onPress && { onClick: onPress })}
+        {...selectProps(rest)}
+      >
+        {children}
+      </StyledLink>
+    )
+  }
+)
+PressableItem.displayName = 'PressableItem'
+PressableItem.propTypes = {
+  ...selectedSystemPropTypes,
+  href: PropTypes.string,
+  isChild: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  onBlur: PropTypes.func,
+  onPress: PropTypes.func,
+  nextItemRef: PropTypes.object,
+  prevItemRef: PropTypes.object
+}
+
+export default PressableItem

package/src/Listbox/index.js

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

package/src/Modal/ModalContent.jsx

@@ -28,6 +28,10 @@ const StyledSubHeading = styled.div`
   margin-top: ${({ marginTop }) => marginTop}px;
 `
 
+const StyledTextButtonContainer = styled.div({
+  display: 'flex'
+})
+
 const StyledFooter = styled.footer(
   ({
     hasBorder,
@@ -131,13 +135,13 @@ const ModalContent = ({
               {confirmButtonText}
             </Button>
           )}
-          <div>
-            {hasCancelButton && (
+          {hasCancelButton ? (
+            <StyledTextButtonContainer>
               <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
                 {cancelButtonText}
               </CancelButton>
-            )}
-          </div>
+            </StyledTextButtonContainer>
+          ) : null}
         </StyledFooter>
       )}
     </StyledModalContent>

package/src/NavigationBar/resolveItemSelection.js

@@ -0,0 +1,11 @@
+const resolveItemSelection = ({ id, label, items }, selectedId) => {
+  const itemId = id ?? label
+
+  // Treat item as selected if it or any nested child matches the selected id
+  const selected = Boolean(
+    selectedId === itemId || items?.some((item) => resolveItemSelection(item, selectedId).selected)
+  )
+  return { itemId, selected }
+}
+
+export default resolveItemSelection

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