@telus-uds/components-web 1.6.1 → 1.8.0

package/lib-module/Spinner/SpinnerContent.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { ActivityIndicator, StackView, Typography, selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs } from '../utils';
+import { BACKDROP_Z_INDEX, LARGE } from './constants';
+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: "SpinnerContent__Container",
+  componentId: "components-web__sc-1c8bd8e-0"
+})(_ref => {
+  let {
+    overlay
+  } = _ref;
+  return {
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    ...(overlay && {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      zIndex: BACKDROP_Z_INDEX
+    })
+  };
+});
+
+const SpinnerContent = _ref2 => {
+  let {
+    label,
+    overlay = false,
+    sizeVariant,
+    size,
+    thickness,
+    isStatic,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Container, {
+    overlay: overlay,
+    children: /*#__PURE__*/_jsxs(StackView, {
+      space: 3,
+      tokens: {
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+        label: label,
+        tokens: {
+          size,
+          thickness
+        },
+        isStatic: isStatic,
+        ...selectProps(rest)
+      }), sizeVariant === LARGE && /*#__PURE__*/_jsx(Typography, {
+        children: label
+      })]
+    })
+  });
+};
+
+SpinnerContent.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Communicates a message to assistive technology while visible. This same message will appear underneath the spinner when its `size` is `large`.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Whether the container has to have an overlay styling.
+   */
+  overlay: PropTypes.bool,
+
+  /**
+   * Size (width and height) of the spinner.
+   */
+  size: PropTypes.number,
+
+  /**
+   * The size of the spinner
+   */
+  sizeVariant: PropTypes.oneOf(['large', 'small']),
+
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: PropTypes.bool
+};
+export default SpinnerContent;

package/lib-module/Spinner/constants.js

@@ -0,0 +1,4 @@
+export const BACKDROP_OPACITY = 0.06;
+export const BACKDROP_Z_INDEX = 1400;
+export const LARGE = 'large';
+export const SMALL = 'small';

package/lib-module/Spinner/index.js

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

package/lib-module/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-A11yText, ActivityIndicator, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, Card, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, IconButton, InputLabel, InputSupports, Link, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography,
+A11yText, ActivityIndicator, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, Card, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.

package/lib-module/index.js

@@ -11,10 +11,14 @@ export { default as ExpandCollapseMini } from './ExpandCollapseMini';
 export { default as Callout } from './Callout';
 export { default as PriceLockup } from './PriceLockup';
 export { default as Footnote } from './Footnote';
+export { default as IconButton } from './IconButton';
 export { transformGradient } from './utils';
 export { default as Breadcrumbs } from './Breadcrumbs';
+export { default as BlockQuote } from './BlockQuote';
 export { default as Toast } from './Toast';
 export { default as Table } from './Table';
 export { default as Image } from './Image';
 export { default as WaffleGrid } from './WaffleGrid';
+export { default as Spinner } from './Spinner';
+export { default as Listbox } from './Listbox';
 export * from './baseExports';

package/lib-module/utils/useOverlaidPosition.js

@@ -0,0 +1,235 @@
+import { useCallback, useEffect, useRef, useState } from 'react'; // TODO: add react-native as a peer dep and support native apps too.
+// That requires some fiddling with Allium repo storybook config, babel, etc,
+// unless ADS gets merged back into UDS monorepo.
+
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+
+const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
+  const offset = Math.max(0, initialOffset);
+  const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
+  const tooWideBy = Math.max(0, otherEdgeOverflow - offset);
+  const adjusted = {
+    offset: Math.max(0, offset - otherEdgeOverflow)
+  };
+  if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
+  return adjusted;
+};
+
+const getPosition = _ref => {
+  let {
+    edge,
+    fromEdge,
+    sourceSize
+  } = _ref;
+
+  switch (edge) {
+    case 'near':
+      return fromEdge;
+
+    case 'mid':
+      return fromEdge + sourceSize / 2;
+
+    case 'far':
+      return fromEdge + sourceSize;
+
+    default:
+      return 0;
+  }
+};
+
+const getEdgeType = (align, alignSide) => {
+  const alignTo = align[alignSide];
+  const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
+  return edge;
+};
+/**
+ * Based on UDS's private getTooltipPosition but generalised.
+ *
+ * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
+ * to the source (button) and we have a limited set of positions, an easy and consistent way
+ * of positioning it is to check all of the possible positions and pick one that will be rendered
+ * within the window bounds. This way we can also rely on the tooltip being actually rendered
+ * before it is shown, which makes it account for the width being limiting in styles, custom font
+ * rendering, etc.
+ */
+
+
+function getOverlaidPosition(_ref2) {
+  let {
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets = {},
+    align
+  } = _ref2;
+  // Web-only: this will be difficult to mimic on native because there's no global scroll position.
+  // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
+  // that can be passed to the appropriate ScrollView?
+  const {
+    scrollX = 0,
+    scrollY = 0
+  } = typeof window === 'object' ? window : {}; // Will have top, bottom, left and/or right offsets depending on `align`
+
+  const positioning = {};
+  if (align.top) positioning.top = getPosition({
+    edge: getEdgeType(align, 'top'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
+    sourceSize: sourceLayout.height
+  });
+  if (align.middle) positioning.top = getPosition({
+    edge: getEdgeType(align, 'middle'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
+    sourceSize: sourceLayout.height
+  });
+  if (align.bottom) positioning.bottom = getPosition({
+    edge: getEdgeType(align, 'bottom'),
+    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
+    sourceSize: sourceLayout.height
+  });
+  if (align.left) positioning.left = getPosition({
+    edge: getEdgeType(align, 'left'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
+    sourceSize: sourceLayout.width
+  });
+  if (align.center) positioning.left = getPosition({
+    edge: getEdgeType(align, 'center'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
+    sourceSize: sourceLayout.width
+  });
+  if (align.right) positioning.right = getPosition({
+    edge: getEdgeType(align, 'right'),
+    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
+    sourceSize: sourceLayout.width
+  });
+
+  if (!(align.left && align.right)) {
+    // Check if the position and/or width need adjusting to fit on the screen
+    const side = align.right ? 'right' : 'left';
+    const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
+    if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
+
+    if (typeof adjusted.offset === 'number') {
+      positioning[side] = adjusted.offset;
+    }
+  }
+
+  return positioning;
+}
+/**
+ * Positions an element in a modal or portal so that it appears tooltip-like below the
+ * target element.
+ *
+ * @TODO - add support for positioning other than 'below' like UDS's tooltip (this is not
+ * a small task because UDS's tooltip logic only really works for short text - it might be
+ * better to use a third-party library).
+ */
+
+
+const useOverlaidPosition = _ref3 => {
+  let {
+    isShown = false,
+    offsets,
+    // By default, align the overlaid target's `top` to the bottom of the source, and center horizontally.
+    align = {
+      center: 'center',
+      top: 'bottom'
+    }
+  } = _ref3;
+  // Element in main document flow that the targetRef element is positioned around
+  const sourceRef = useRef(null);
+  const [sourceLayout, setSourceLayout] = useState(null); // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+
+  const targetRef = useRef(null);
+  const [targetDimensions, setTargetDimensions] = useState(null);
+  const [windowDimensions, setWindowDimensions] = useState(null);
+  const onTargetLayout = useCallback(_ref4 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref4;
+    // NOTE: UDS's Tooltip logic injects some additional width to allow for antialiasing etc of text,
+    // avoiding adding unnecessary line breaks to text that is slightly wider than it thinks it is.
+    // That is probably something specific to text tooltips that doesn't belong in a generic hook.
+    setTargetDimensions(previousDimensions => {
+      // Re-render on first non-zero width / height: avoid infinite loops on changes, or mispositioning
+      // if user scrolls while a slidedown animation is changing the height and recalculating position.
+      if (!previousDimensions && width && height) {
+        return {
+          width,
+          height
+        };
+      }
+
+      return previousDimensions;
+    });
+  }, []);
+  const readyToShow = Boolean(isShown && sourceRef.current);
+  useEffect(() => {
+    const handleDimensionsChange = _ref5 => {
+      var _sourceRef$current;
+
+      let {
+        window
+      } = _ref5;
+      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current.measureInWindow((x, y, width, height) => {
+        // Could add a debouncer here if there's too many rerenders during gradual resizes
+        setWindowDimensions(window);
+        setSourceLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    };
+
+    let subscription;
+
+    const unsubscribe = () => {
+      var _subscription;
+
+      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
+        // React Native >=0.65.0
+        subscription.remove();
+      } else if (typeof Dimensions.removeEventListener === 'function') {
+        // React Native <0.65.0
+        Dimensions.removeEventListener('change', handleDimensionsChange);
+      }
+
+      setSourceLayout(null);
+      setTargetDimensions(null);
+    };
+
+    if (readyToShow) {
+      subscription = Dimensions.addEventListener('change', handleDimensionsChange);
+      handleDimensionsChange({
+        window: Dimensions.get('window')
+      });
+    } else {
+      unsubscribe();
+    }
+
+    return unsubscribe;
+  }, [readyToShow]);
+  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
+  const overlaidPosition = isReady ? getOverlaidPosition({
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets,
+    align
+  }) : {};
+  return {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  };
+};
+
+export default useOverlaidPosition;

package/package.json

@@ -5,11 +5,11 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.35.0",
+    "@telus-uds/components-base": "1.37.0",
     "@telus-uds/system-constants": "^1.2.0",
     "react-dates": "^21.8.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.20.0",
+    "@telus-uds/system-theme-tokens": "^2.22.0",
     "prop-types": "^15.7.2",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
@@ -59,5 +59,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.6.1"
+  "version": "1.8.0"
 }

package/src/BlockQuote/BlockQuote.jsx

@@ -0,0 +1,130 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  Link,
+  selectSystemProps,
+  StackView,
+  Typography,
+  useThemeTokens,
+  withLinkRouter
+} from '@telus-uds/components-base'
+import styled from 'styled-components'
+import { htmlAttrs, transformGradient } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const BlockQuoteContainer = styled.blockquote`
+  margin: 0;
+  position: relative;
+  padding-left: ${({ paddingLeft }) => `${paddingLeft}px`};
+  padding-right: ${({ paddingRight }) => `${paddingRight}px`};
+  padding-bottom: ${({ paddingBottom }) => `${paddingBottom}px`};
+  padding-top: ${({ paddingTop }) => `${paddingTop}px`};
+  &::before {
+    content: '';
+    left: 0;
+    top: 0;
+    position: absolute;
+    height: 100%;
+    width: ${({ width }) => `${width}px`};
+    background: ${({ backgroundGradient }) =>
+      backgroundGradient && transformGradient(backgroundGradient)};
+  }
+`
+
+const QuoteContainer = styled.div`
+  margin-bottom: ${({ marginBottom }) => `${marginBottom}px`};
+`
+
+const BlockQuote = ({
+  children,
+  link,
+  additionalInfo,
+  linkHref,
+  textStyle = 'large',
+  LinkRouter,
+  linkRouterProps,
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const {
+    color,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    marginBottom,
+    width,
+    backgroundGradient
+  } = useThemeTokens('BlockQuote', tokens, variant)
+
+  const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle
+  const renderLink = () => {
+    if (linkHref) {
+      return (
+        <Link
+          href={linkHref}
+          tokens={{ blockFontWeight: '500', color }}
+          variant={{ alternative: true }}
+          LinkRouter={LinkRouter}
+          linkRouterProps={linkRouterProps}
+        >
+          {link}
+        </Link>
+      )
+    }
+
+    return <Typography tokens={{ color, fontWeight: '500' }}>{link}</Typography>
+  }
+
+  const renderQuote = () => {
+    const quote = (
+      <Typography tokens={{ color, fontWeight: '400' }} variant={{ size: mappedTextSize }}>
+        {children}
+      </Typography>
+    )
+
+    if (additionalInfo || link) {
+      return <QuoteContainer marginBottom={marginBottom}>{quote}</QuoteContainer>
+    }
+
+    return quote
+  }
+
+  return (
+    <BlockQuoteContainer
+      {...selectProps(rest)}
+      paddingTop={paddingTop}
+      paddingBottom={paddingBottom}
+      paddingLeft={paddingLeft}
+      paddingRight={paddingRight}
+      width={width}
+      backgroundGradient={backgroundGradient}
+    >
+      {renderQuote()}
+      {(additionalInfo || link) && (
+        <StackView space={0}>
+          {link && renderLink()}
+          {additionalInfo && (
+            <Typography tokens={{ color }} variant={{ size: 'small' }}>
+              {additionalInfo}
+            </Typography>
+          )}
+        </StackView>
+      )}
+    </BlockQuoteContainer>
+  )
+}
+
+BlockQuote.propTypes = {
+  ...selectedSystemPropTypes,
+  ...withLinkRouter.propTypes,
+  children: PropTypes.node.isRequired,
+  link: PropTypes.string,
+  linkHref: PropTypes.string,
+  additionalInfo: PropTypes.string,
+  textStyle: PropTypes.oneOf(['large', 'heading'])
+}
+
+export default BlockQuote

package/src/BlockQuote/index.js

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

package/src/IconButton/IconButton.jsx

@@ -0,0 +1,46 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { IconButton as IconButtonBase, useThemeTokens } from '@telus-uds/components-base'
+
+const IconButton = forwardRef(({ icon, action, tokens, variant = {}, ...iconButtonProps }, ref) => {
+  const variantWithAction = action && !variant.action ? { ...variant, action } : variant
+  const { icon: themeIcon } = useThemeTokens('IconButton', tokens, variantWithAction)
+
+  return (
+    // If we want the arrow icons to have directional animation instead of scale, we can pass
+    // either appropriate iconTransateX/Y here, or define and pass variants like { direction: 'left' }
+    // which have theme rules that set `iconTranslateX` tokens in the theme rules and unset `iconScale`.
+    <IconButtonBase
+      ref={ref}
+      {...iconButtonProps}
+      tokens={tokens}
+      variant={variant}
+      icon={icon ?? themeIcon}
+    />
+  )
+})
+
+const multiBrandIconNames = [
+  'add',
+  'subtract',
+  'close',
+  'play',
+  'moveUp',
+  'moveDown',
+  'moveLeft',
+  'moveRight',
+  'expand'
+]
+
+IconButton.displayName = 'IconButton'
+const propsWithoutIcon = ({ icon, ...props }) => props
+IconButton.propTypes = {
+  ...propsWithoutIcon(IconButtonBase.propTypes),
+  // eslint-disable-next-line react/require-default-props
+  action: PropTypes.oneOf(multiBrandIconNames),
+  icon: PropTypes.func
+}
+
+IconButton.defaultProps = { icon: null }
+
+export default IconButton

package/src/IconButton/index.js

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

package/src/Listbox/GroupControl.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+import { Icon, Spacer, useThemeTokens } from '@telus-uds/components-base'
+
+const StyledControlWrapper = styled.div(({ focus, tokens }) => ({
+  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+  fontSize: tokens.groupFontSize,
+  color: tokens.groupColor,
+  textDecoration: tokens.itemTextDecoration,
+  backgroundColor: tokens.groupBackgroundColor,
+  outline: tokens.itemOutline,
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-between',
+  ...(focus
+    ? {
+        border: `${tokens.groupBorderWidth} solid ${tokens.groupBorderColor}`,
+        borderRadius: tokens.groupBorderRadius,
+        paddingLeft: `calc(${tokens.groupPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
+        paddingRight: `calc(${tokens.groupPaddingRight}px - ${tokens.groupBorderWidth}px)`,
+        paddingTop: `calc(${tokens.groupPaddingTop}px - ${tokens.groupBorderWidth}px)`,
+        paddingBottom: `calc(${tokens.groupPaddingBottom}px - ${tokens.groupBorderWidth}px)`
+      }
+    : {
+        paddingLeft: tokens.groupPaddingLeft,
+        paddingRight: tokens.groupPaddingRight,
+        paddingTop: tokens.groupPaddingTop,
+        paddingBottom: tokens.groupPaddingBottom
+      })
+}))
+
+const GroupControl = ({ expanded, pressed, hover, focus, current, label }) => {
+  const tokens = useThemeTokens(
+    'ListBox',
+    {},
+    {},
+    {
+      expanded,
+      pressed,
+      hover,
+      current,
+      focus
+    }
+  )
+
+  return (
+    <StyledControlWrapper {...{ focus, tokens }}>
+      {label}
+      <Spacer space={1} direction="row" />
+      <Icon icon={tokens.groupIcon} variant={{ size: 'micro' }} />
+    </StyledControlWrapper>
+  )
+}
+
+GroupControl.propTypes = {
+  expanded: PropTypes.bool,
+  pressed: PropTypes.bool,
+  hover: PropTypes.bool,
+  focus: PropTypes.bool,
+  current: PropTypes.bool,
+  label: PropTypes.string
+}
+
+export default GroupControl