@telus-uds/components-web 1.4.0 → 1.6.0

package/lib-module/Toast/Toast.js

@@ -0,0 +1,117 @@
+var _withLinkRouter$propT, _withLinkRouter$propT2;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter } from '@telus-uds/components-base';
+import styled, { keyframes, css } from 'styled-components';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+
+const transform = property => (from, to) => keyframes(["from{", ":", ";}to{", ":", ";}"], property, from, property, to);
+
+const slideDown = property => function (from, to) {
+  let end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : to;
+  return keyframes(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
+};
+
+const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter));
+
+const ToastContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Toast__ToastContainer",
+  componentId: "components-web__sc-p78jdh-0"
+})(["display:flex;justify-content:center;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+  let {
+    containerBackgroundColor
+  } = _ref;
+  return containerBackgroundColor;
+}, _ref2 => {
+  let {
+    containerGap
+  } = _ref2;
+  return containerGap;
+}, animation);
+
+const Toast = _ref3 => {
+  let {
+    toast,
+    copy,
+    headline,
+    link,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref3;
+  const {
+    containerBackgroundColor,
+    containerGap,
+    animationHeightBefore,
+    animationHeightAfter,
+    animationPaddingBottomBefore,
+    animationPaddingBottomAfter,
+    animationPaddingTopBefore,
+    animationPaddingTopAfter,
+    animationBackgroundColorBefore,
+    animationBackgroundColorAfter,
+    animationColorBefore,
+    animationColorAfter,
+    animationFillColorBefore,
+    animationFillColorAfter
+  } = useThemeTokens('Toast', tokens, variant);
+
+  if (!toast) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsxs(ToastContainer, {
+    containerBackgroundColor: containerBackgroundColor,
+    containerGap: containerGap,
+    animationHeightBefore: animationHeightBefore,
+    animationHeightAfter: animationHeightAfter,
+    animationPaddingBottomBefore: animationPaddingBottomBefore,
+    animationPaddingBottomAfter: animationPaddingBottomAfter,
+    animationPaddingTopBefore: animationPaddingTopBefore,
+    animationPaddingTopAfter: animationPaddingTopAfter,
+    animationBackgroundColorBefore: animationBackgroundColorBefore,
+    animationBackgroundColorAfter: animationBackgroundColorAfter,
+    animationColorBefore: animationColorBefore,
+    animationColorAfter: animationColorAfter,
+    animationFillColorBefore: animationFillColorBefore,
+    animationFillColorAfter: animationFillColorAfter,
+    ...selectProps(rest),
+    children: [headline && /*#__PURE__*/_jsx(Typography, {
+      variant: {
+        bold: true,
+        inverse: true
+      },
+      children: headline
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: {
+        inverse: true
+      },
+      children: copy
+    }), link && /*#__PURE__*/_jsx(ChevronLink, {
+      variant: {
+        inverse: true
+      },
+      href: link.href,
+      LinkRouter: link.LinkRouter,
+      linkRouterProps: link.linkRouterProps,
+      children: link.text
+    })]
+  });
+};
+
+Toast.propTypes = { ...selectedSystemPropTypes,
+  toast: PropTypes.bool,
+  copy: PropTypes.string.isRequired,
+  headline: PropTypes.string,
+  link: PropTypes.shape({
+    href: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+    LinkRouter: (_withLinkRouter$propT = withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
+    linkRouterProps: (_withLinkRouter$propT2 = withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps
+  })
+};
+export default Toast;

package/lib-module/Toast/index.js

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

package/lib-module/WaffleGrid/WaffleGrid.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Link, responsiveProps, selectSystemProps, useResponsiveProp, useThemeTokens, withLinkRouter } from '@telus-uds/components-base';
+import OrderedListBase from '../OrderedList/OrderedListBase';
+import ItemBase from '../OrderedList/ItemBase';
+import Image from '../Image';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const DEFAULT_ROW_SIZE = {
+  sm: 2,
+  lg: 3,
+  xl: 6
+};
+
+const row = (rowSize, rowBorderSize) => ({
+  flexBasis: `calc(100% / ${rowSize})`,
+  [`:not(:nth-of-type(${rowSize}n + 1))`]: {
+    borderLeftWidth: `${rowBorderSize}px`
+  },
+  [`:nth-of-type(n+${rowSize + 1})`]: {
+    borderTopWidth: `${rowBorderSize}px`
+  }
+});
+
+const Container = /*#__PURE__*/styled(OrderedListBase).withConfig({
+  displayName: "WaffleGrid__Container",
+  componentId: "components-web__sc-ec8g0a-0"
+})({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  justifyContent: 'flex-start'
+});
+const Item = /*#__PURE__*/styled(ItemBase).withConfig({
+  displayName: "WaffleGrid__Item",
+  componentId: "components-web__sc-ec8g0a-1"
+})(_ref => {
+  let {
+    rowSize,
+    itemPadding,
+    itemBorderColor,
+    rowBorderWidth
+  } = _ref;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 0,
+    flexShrink: 0,
+    padding: `${itemPadding}px`,
+    boxSizing: 'border-box',
+    borderStyle: 'solid',
+    borderColor: itemBorderColor,
+    borderWidth: 0,
+    '& > a': {
+      alignSelf: 'center'
+    },
+    ...row(rowSize, rowBorderWidth)
+  };
+});
+const Center = /*#__PURE__*/styled('div').withConfig({
+  displayName: "WaffleGrid__Center",
+  componentId: "components-web__sc-ec8g0a-2"
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center'
+});
+/**
+ * The WaffleGrid is used to show items in a waffle like manner with borders surrounding the element
+ */
+
+const WaffleGrid = _ref2 => {
+  let {
+    items,
+    rowSize = DEFAULT_ROW_SIZE,
+    LinkRouter,
+    tokens,
+    variant,
+    linkRouterProps,
+    ...rest
+  } = _ref2;
+  const themeTokens = useThemeTokens('WaffleGrid', tokens, variant);
+  const currentRowSize = useResponsiveProp(rowSize);
+  return /*#__PURE__*/_jsx(Container, { ...selectProps(rest),
+    children: items.map(child => /*#__PURE__*/_createElement(Item, { ...themeTokens,
+      key: child.href,
+      rowSize: currentRowSize
+    }, /*#__PURE__*/_jsx(Link, {
+      href: child.href,
+      variant: {
+        alternative: true
+      },
+      LinkRouter: child.LinkRouter || LinkRouter,
+      linkRouterProps: { ...linkRouterProps,
+        ...child.linkRouterProps
+      },
+      children: /*#__PURE__*/_jsxs(Center, {
+        children: [typeof child.image === 'string' ?
+        /*#__PURE__*/
+        // Assuming that string passed is the image URL
+        _jsx(Image, {
+          src: child.image,
+          alt: child.imageAltText,
+          width: 64,
+          height: 64
+        }) : // Otherwise it must be an arbitrary content, which we just display by itself
+        child.image, /*#__PURE__*/_jsx("span", {
+          children: child.text
+        })]
+      })
+    })))
+  });
+};
+
+WaffleGrid.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The image and the link to display. `items` should be an array of objects with the following keys:
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    /**
+     * The src attribute for the HTML img element or custom JSX content to render instead
+     */
+    image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+    /**
+     * The alt attribute for the HTML img element (note that this is ignored if a custom
+     * JSX content is used instead of an image URL)
+     */
+    imageAltText: PropTypes.string,
+
+    /**
+     * The text displayed under the image
+     */
+    text: PropTypes.string,
+
+    /**
+     * Target URL
+     */
+    href: PropTypes.string,
+    ...withLinkRouter.propTypes
+  })).isRequired,
+
+  /**
+   * Row size, optionally depending on the viewport
+   */
+  rowSize: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
+  ...withLinkRouter.propTypes
+};
+export default WaffleGrid;

package/lib-module/WaffleGrid/index.js

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

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, Modal, 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, 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,
 /*
  * 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

@@ -1,9 +1,11 @@
 export { default as Badge } from './Badge';
+export { default as Modal } from './Modal';
 export { default as OrderedList } from './OrderedList';
 export { default as PreviewCard } from './PreviewCard';
 export { default as ResponsiveImage } from './ResponsiveImage';
 export { default as Ribbon } from './Ribbon';
 export { default as DatePicker } from './DatePicker';
+export { default as Paragraph } from './Paragraph';
 export { default as Span } from './Span';
 export { default as ExpandCollapseMini } from './ExpandCollapseMini';
 export { default as Callout } from './Callout';
@@ -11,4 +13,8 @@ export { default as PriceLockup } from './PriceLockup';
 export { default as Footnote } from './Footnote';
 export { transformGradient } from './utils';
 export { default as Breadcrumbs } from './Breadcrumbs';
+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 * from './baseExports';

package/package.json

@@ -5,13 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.34.0",
+    "@telus-uds/components-base": "1.34.2",
     "@telus-uds/system-constants": "^1.2.0",
     "react-dates": "^21.8.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.18.0",
+    "@telus-uds/system-theme-tokens": "^2.19.0",
     "prop-types": "^15.7.2",
     "lodash.omit": "^4.5.0",
+    "lodash.throttle": "^4.1.1",
     "react-helmet-async": "^1.3.0"
   },
   "description": "UDS mult-brand web components",
@@ -58,5 +59,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.4.0"
+  "version": "1.6.0"
 }

package/src/Image/Image.jsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { selectSystemProps, useThemeTokens } from '@telus-uds/components-base'
+import { htmlAttrs, warn } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const StyledImage = styled.img({
+  height: 'auto',
+  maxWidth: '100%'
+})
+const StyledRoundedImage = styled(StyledImage)`
+  border-radius: ${({ borderRadius }) => borderRadius}px;
+`
+const StyledCircularImage = styled(StyledImage)({
+  borderRadius: '50%'
+})
+
+const Image = ({
+  src,
+  width,
+  height,
+  alt,
+  rounded,
+  loading = 'eager',
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const { borderRadius } = useThemeTokens('Image', tokens, variant)
+  const isCircle = rounded === 'circle'
+  const isCorners = rounded === 'corners'
+  const isSquare = width === height
+
+  if (isCircle && !isSquare) {
+    warn(
+      'Image',
+      'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.'
+    )
+  }
+
+  let ImageComponent
+  if (isCircle) {
+    ImageComponent = StyledCircularImage
+  } else if (isCorners) {
+    ImageComponent = StyledRoundedImage
+  } else {
+    ImageComponent = StyledImage
+  }
+
+  return (
+    <ImageComponent
+      {...selectProps(rest)}
+      borderRadius={borderRadius}
+      src={src}
+      width={width}
+      height={height}
+      alt={alt}
+      loading={loading}
+    />
+  )
+}
+
+Image.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The src attribute for the HTML img element.
+   */
+  src: PropTypes.string.isRequired,
+  /**
+   * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
+   */
+  alt: PropTypes.string.isRequired,
+  /**
+   * The image's width.
+   */
+  width: PropTypes.number.isRequired,
+  /**
+   * The image's height.
+   */
+  height: PropTypes.number.isRequired,
+  /**
+   * Loading strategy.
+   * @default 'eager'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+   */
+  loading: PropTypes.oneOf(['eager', 'lazy']),
+  /**
+   * Make image render as a circle or with rounded corners.
+   */
+  rounded: PropTypes.oneOf(['circle', 'corners'])
+}
+
+export default Image

package/src/Image/index.js

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

package/src/Modal/Modal.jsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { Modal as BaseModal } from '@telus-uds/components-base'
+import PropTypes from 'prop-types'
+import ModalContent from './ModalContent'
+
+const Modal = ({
+  isOpen,
+  onClose,
+  maxWidth,
+  onCancel = onClose,
+  onConfirm,
+  heading,
+  headingLevel,
+  subHeading,
+  subHeadingSize,
+  bodyText,
+  tokens,
+  variant = {},
+  confirmButtonText,
+  confirmButtonVariant,
+  cancelButtonText,
+  cancelButtonType,
+  ...nonContentProps
+}) => {
+  return (
+    <BaseModal isOpen={isOpen} onClose={onClose} maxWidth={maxWidth} {...nonContentProps}>
+      <ModalContent
+        tokens={tokens}
+        variant={variant}
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        heading={heading}
+        headingLevel={headingLevel}
+        subHeading={subHeading}
+        subHeadingSize={subHeadingSize}
+        bodyText={bodyText}
+        confirmButtonText={confirmButtonText}
+        confirmButtonVariant={confirmButtonVariant}
+        cancelButtonText={cancelButtonText}
+        cancelButtonType={cancelButtonType}
+      />
+    </BaseModal>
+  )
+}
+
+Modal.propTypes = {
+  tokens: PropTypes.object,
+  variant: PropTypes.object,
+  /**
+   * If true, the modal overlay covers the page and the modal content is shown
+   */
+  isOpen: PropTypes.bool,
+  /**
+   * Function called on pressing the Modal close "x" button
+   */
+  onClose: PropTypes.func,
+  /**
+   * If true, Modal is rendered with the 'maxWidth' appearance applied.
+   * Use this for wider content, such as content with long headers.
+   */
+  maxWidth: PropTypes.bool,
+  /**
+   * Heading text shown prominently with heading semantic tags.
+   */
+  heading: PropTypes.string,
+  /**
+   * Stylistic size and semantic level of the modal heading
+   */
+  headingLevel: PropTypes.oneOf(['h3', 'h4']),
+  /**
+   * Short content rendered below the heading. If there is long body content that is scrollable,
+   * the subHeading sits above the scrollable area.
+   */
+  subHeading: PropTypes.string,
+  /**
+   * Short content rendered below the heading. If there is long body content that is scrollable,
+   * the subHeading sits above the scrollable area.
+   */
+  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * If the modal requires longer text, include it here. This text will become scrollable if it
+   * is too long for the allowed height of the modal.
+   */
+  bodyText: PropTypes.string,
+  /**
+   * Text for the button controlling the primary action of the modal.
+   */
+  confirmButtonText: PropTypes.string,
+  /**
+   * Button variant object to be passed through to Button to choose its visual style.
+   */
+  confirmButtonVariant: PropTypes.object,
+  /**
+   * Action on pressing the confirm button.
+   */
+  onConfirm: PropTypes.func,
+  /**
+   * Text for the optional cancel button provided if the user does not want to do the confirm action.
+   */
+  cancelButtonText: PropTypes.string,
+  /**
+   * Component to use for the cancel button (default: `TextButton`). Should accept similar props to `TextButton`.
+   */
+  cancelButtonType: PropTypes.elementType,
+  /**
+   * Action to perform on pressing the cancel button. Defaults to `onClose` action if undefined.
+   */
+  onCancel: PropTypes.func
+}
+
+export default Modal