@telus-uds/components-web 2.44.0 → 3.0.0

package/lib-module/StoryCard/StoryCard.js

@@ -1,212 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Box, Divider, PressableCardBase, selectSystemProps, Spacer, StackView, StackWrap, Typography, hrefAttrsProp, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useThemeTokens, useThemeTokensCallback, getTokensPropType } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
-
-// Passes React Native-oriented system props through UDS PressableCardBase
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-
-// Stop changes to the card's inner border width causing the size and
-// apparent position of the full bleed image to change.
-const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
-  displayName: "StoryCard__FullBleedOffsetOuter",
-  componentId: "components-web__sc-yhvivu-0"
-})(_ref => {
-  let {
-    borderOffset
-  } = _ref;
-  return {
-    overflow: 'hidden',
-    marginTop: borderOffset * 2
-  };
-});
-const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
-  displayName: "StoryCard__FullBleedOffsetInner",
-  componentId: "components-web__sc-yhvivu-1"
-})(_ref2 => {
-  let {
-    borderOffset
-  } = _ref2;
-  return {
-    position: 'relative',
-    margin: 0 - borderOffset
-  };
-});
-
-/**
- * Showcase and guide users to another page, offering a description of that page's story.
- * Whole card is interactive, width expands based on column or container.
- *
- * - Use `tag` to show category of content
- * - Use `date` to show when the story was published
- * - Use `title` to show title of the story
- * - Use `description` to show description of the story
- * - Use `href` to set the target URL
- * - Use `fullBleedContent` to set the thumbnail image
- */
-const StoryCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    tag,
-    date,
-    title,
-    description,
-    fullBleedImage,
-    fullBleedContent = fullBleedImage,
-    onPress,
-    href,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref3;
-  const {
-    fullBleedContentPosition,
-    contentStackDirection,
-    fullBleedContentProps
-  } = useFullBleedContentProps({
-    ...fullBleedContent,
-    position: 'bottom'
-  });
-  const generalTokens = useThemeTokens('StoryCard', tokens, variant);
-  const getTokens = useThemeTokensCallback('StoryCard', tokens, variant);
-  const getPressableCardTokens = cardState => getTokens(cardState);
-  const {
-    hrefAttrs,
-    rest: unusedRest
-  } = hrefAttrsProp.bundle(rest);
-  return /*#__PURE__*/_jsx(PressableCardBase, {
-    ref: ref,
-    onPress: onPress,
-    href: href,
-    hrefAttrs: hrefAttrs,
-    tokens: getPressableCardTokens,
-    ...selectProps(unusedRest),
-    children: cardState => {
-      const {
-        borderRadius,
-        borderWidth
-      } = getPressableCardTokens(cardState);
-
-      // Stop content jumping around as border size changes
-      const borderOffset = borderWidth - generalTokens.borderWidth;
-      const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius + borderOffset, fullBleedContentPosition);
-      return /*#__PURE__*/_jsxs(StackView, {
-        direction: contentStackDirection,
-        tokens: {
-          justifyContent: 'space-between',
-          flexGrow: 1
-        },
-        children: [/*#__PURE__*/_jsxs(Box, {
-          horizontal: {
-            xs: 4,
-            lg: 5,
-            options: {
-              subtract: borderOffset
-            }
-          },
-          vertical: {
-            xs: 5,
-            lg: 7,
-            options: {
-              subtract: borderOffset
-            }
-          },
-          children: [/*#__PURE__*/_jsxs(StackWrap, {
-            space: 1,
-            tokens: {
-              justifyContent: 'space-between',
-              alignItems: 'baseline'
-            },
-            children: [Boolean(tag) && /*#__PURE__*/_jsx(Typography, {
-              variant: {
-                size: 'eyebrow'
-              },
-              children: tag
-            }), Boolean(date) &&
-            /*#__PURE__*/
-            // TODO: get user locale and apply date formatting: "MMM DD, YYYY" for `en` and "YYYY-MM-DD" for `fr`
-            // Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
-            _jsx(Typography, {
-              variant: {
-                size: 'small'
-              },
-              children: date
-            })]
-          }), /*#__PURE__*/_jsx(Spacer, {
-            space: 2
-          }), /*#__PURE__*/_jsx(Divider, {
-            variant: {
-              decorative: true
-            }
-          }), /*#__PURE__*/_jsx(Spacer, {
-            space: 3
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: {
-              size: 'h3'
-            },
-            children: title
-          }), /*#__PURE__*/_jsx(Spacer, {
-            space: 2
-          }), /*#__PURE__*/_jsx(Typography, {
-            children: description
-          })]
-        }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/_jsx(FullBleedOffsetOuter, {
-          borderOffset: borderOffset,
-          children: /*#__PURE__*/_jsx(FullBleedOffsetInner, {
-            borderOffset: borderOffset,
-            children: /*#__PURE__*/_jsx(FullBleedContent, {
-              borderRadius: fullBleedBorderRadius,
-              ...fullBleedContentProps
-            })
-          })
-        })]
-      });
-    }
-  });
-});
-StoryCard.displayName = 'StoryCard';
-StoryCard.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('StoryCard'),
-  /**
-   * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
-   * a `StoryCard` with `href` prop set (the volume and progress sliders can be clicked but are not draggable).
-   * Please use `onPress` prop instead `href` to organize navigation in cases like this.
-   *
-   * @see https://github.com/telus/allium-design-system/issues/6
-   */
-  href: PropTypes.string,
-  /**
-   * Optional function to be called on press e.g. for within-page navigation.
-   */
-  onPress: PropTypes.func,
-  /**
-   * Text stating the category of the content.
-   */
-  tag: PropTypes.string,
-  /**
-   * Text stating the date a story was published.
-   */
-  date: PropTypes.string.isRequired,
-  /**
-   * Text stating the title or headline of the story.
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   * Text giving a short description of the story. One paragraph of plain text.
-   */
-  description: PropTypes.string.isRequired,
-  /**
-   * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
-   *
-   * @deprecated
-   */
-  fullBleedImage: PropTypes.exact(FullBleedContent.propTypes || {}),
-  /**
-   * Full bleed image to be placed on the card.
-   */
-  fullBleedContent: PropTypes.exact(FullBleedContent.propTypes || {})
-};
-export default withLinkRouter(StoryCard);

package/lib-module/StoryCard/index.js

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

package/lib-module/Table/Body.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Body = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx("tbody", {
-    ref: ref,
-    children: children
-  });
-});
-Body.displayName = 'Body';
-Body.propTypes = {
-  children: PropTypes.node
-};
-export default Body;

package/lib-module/Table/Cell.js

@@ -1,176 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import { Typography, useThemeTokens, applyShadowToken } from '@telus-uds/components-base';
-import { useTableContext } from './Table';
-import { jsx as _jsx } from "react/jsx-runtime";
-const HEADER_TYPE = {
-  HEADING: 'heading',
-  SUBHEADING: 'subHeading',
-  ROWHEADING: 'rowHeading'
-};
-const stickyStyles = _ref => {
-  let {
-    cellStickyShadow,
-    stickyBackgroundColor,
-    type
-  } = _ref;
-  return css(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);", " &::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined, cellStickyShadow);
-};
-const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
-  let {
-    isSticky,
-    align,
-    cellPaddingTop,
-    cellPaddingRight,
-    cellPaddingBottom,
-    cellPaddingLeft,
-    cellMinWidth,
-    cellBackground,
-    cellStickyShadow,
-    stickyBackgroundColor,
-    type
-  } = _ref2;
-  return css(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
-    type,
-    cellStickyShadow,
-    stickyBackgroundColor
-  }));
-});
-const createStyledCell = htmlElement => styled[htmlElement].withConfig({
-  displayName: "Cell__createStyledCell",
-  componentId: "components-web__sc-ltgfic-0"
-})(["", ";box-shadow:", ";", ""], sharedStyles, _ref3 => {
-  let {
-    cellBoxShadowColor,
-    type
-  } = _ref3;
-  return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
-}, _ref4 => {
-  let {
-    display
-  } = _ref4;
-  return display && `*:not(:empty) {
-    display: ${display};
-  }`;
-});
-const StyledHeaderCell = createStyledCell('th');
-const StyledDataCell = createStyledCell('td');
-const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
-  let {
-    children,
-    isFirstInRow,
-    align = 'left',
-    tokens: cellTokens,
-    type = 'default'
-  } = _ref5;
-  const {
-    text,
-    isScrollable: isTableScrollable,
-    tokens: tableTokens,
-    spacing
-  } = useTableContext();
-  const themeTokens = {
-    ...tableTokens,
-    ...cellTokens
-  };
-  const {
-    cellMinWidth,
-    cellBoxShadowColor,
-    cellBackground,
-    cellStickyShadow,
-    cellPaddingTop,
-    cellPaddingRight,
-    cellPaddingLeft,
-    cellPaddingBottom,
-    fontName,
-    fontWeight,
-    fontSize,
-    lineHeight,
-    stickyBackgroundColor,
-    fontColor,
-    display
-  } = useThemeTokens('Table', themeTokens, {
-    spacing,
-    type,
-    text
-  });
-  const sharedProps = {
-    align,
-    isSticky: isTableScrollable && isFirstInRow,
-    cellBackground,
-    cellMinWidth,
-    cellStickyShadow: applyShadowToken(cellStickyShadow).boxShadow,
-    cellPaddingTop,
-    cellPaddingRight,
-    cellPaddingLeft,
-    cellPaddingBottom,
-    stickyBackgroundColor,
-    cellBoxShadowColor,
-    display,
-    ref
-  };
-  const typographyTokens = {
-    fontName,
-    fontWeight,
-    fontSize,
-    lineHeight,
-    color: fontColor
-  };
-  switch (type) {
-    case HEADER_TYPE.HEADING:
-      return /*#__PURE__*/_jsx(StyledHeaderCell, {
-        scope: "col",
-        ...sharedProps,
-        type: type,
-        children: /*#__PURE__*/_jsx(Typography, {
-          tokens: typographyTokens,
-          children: children
-        })
-      });
-    case HEADER_TYPE.SUBHEADING:
-      return /*#__PURE__*/_jsx(StyledHeaderCell, {
-        scope: "col",
-        ...sharedProps,
-        type: type,
-        children: /*#__PURE__*/_jsx(Typography, {
-          tokens: typographyTokens,
-          children: children
-        })
-      });
-    case HEADER_TYPE.ROWHEADING:
-      return /*#__PURE__*/_jsx(StyledHeaderCell, {
-        scope: "row",
-        ...sharedProps,
-        type: type,
-        children: /*#__PURE__*/_jsx(Typography, {
-          tokens: typographyTokens,
-          children: children
-        })
-      });
-    default:
-      return /*#__PURE__*/_jsx(StyledDataCell, {
-        ...sharedProps,
-        children: /*#__PURE__*/_jsx(Typography, {
-          tokens: typographyTokens,
-          children: children
-        })
-      });
-  }
-});
-Cell.displayName = 'Cell';
-Cell.propTypes = {
-  type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
-  tokens: PropTypes.object,
-  children: PropTypes.node,
-  /**
-   * @ignore
-   * Used internally for making the first column sticky
-   */
-  isFirstInRow: PropTypes.bool,
-  /**
-   * Defines the text alignment within the cell
-   */
-  align: PropTypes.oneOf(['left', 'center', 'right'])
-};
-export default Cell;

package/lib-module/Table/Header.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Row from './Row';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx("thead", {
-    ref: ref,
-    children: /*#__PURE__*/_jsx(Row, {
-      children: React.Children.map(children, child =>
-      /*#__PURE__*/
-      // TO DO: pass type as a variant instead of prop
-      React.cloneElement(child, {
-        type: 'heading'
-      }))
-    })
-  });
-});
-Header.displayName = 'Header';
-Header.propTypes = {
-  children: PropTypes.node
-};
-export default Header;

package/lib-module/Table/Row.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Row = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx("tr", {
-    ref: ref,
-    children: React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
-      isFirstInRow: index === 0
-    }))
-  });
-});
-Row.displayName = 'Row';
-Row.propTypes = {
-  children: PropTypes.node
-};
-export default Row;

package/lib-module/Table/SubHeading.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Row from './Row';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx(Row, {
-    ref: ref,
-    children: React.Children.map(children, child =>
-    /*#__PURE__*/
-    // TO DO: pass type as a variant instead of prop
-    React.cloneElement(child, {
-      type: 'subHeading'
-    }))
-  });
-});
-Header.displayName = 'Header';
-Header.propTypes = {
-  children: PropTypes.node
-};
-export default Header;

package/lib-module/Table/Table.js

@@ -1,114 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { selectSystemProps, useSafeLayoutEffect, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-import throttle from 'lodash.throttle';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Table__StyledContainer",
-  componentId: "components-web__sc-10d9q3m-0"
-})(["overflow:auto;padding-bottom:", ";"], props => props.isScrollable ? `${props.tablePaddingBottom}px` : 0);
-const StyledTable = /*#__PURE__*/styled.table.withConfig({
-  displayName: "Table__StyledTable",
-  componentId: "components-web__sc-10d9q3m-1"
-})(["margin:0;padding:0;width:", ";border:", ";"], _ref => {
-  let {
-    fullWidth,
-    tableWidth
-  } = _ref;
-  return fullWidth ? '100%' : `${tableWidth}px`;
-}, props => `${props.borderWidth}px solid ${props.borderColor}`);
-const TableContext = /*#__PURE__*/React.createContext({});
-export const useTableContext = () => React.useContext(TableContext);
-
-/**
- * Use `Table` to display tabular data.
- *
- * - Takes an optional `spacing` variant (compact)
- * - Available in 2 text styles (medium, small)
- * - When `Table` exceeds viewport, the first column becomes sticky, enabling horizontal scrolling
- * - Right-align prices and numbers that display decimal points
- *
- * ### Building up a `Table`
- * - Use `Table.Header` and `Table.Body` as direct children of `Table`
- * - Use `Table.SubHeading` to render an intermediate data heading row
- * - Use `Table.Row` and `Table.Cell` to build up the tabular data
- * - Use `Cell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
- */
-const Table = _ref2 => {
-  let {
-    children,
-    spacing = 'default',
-    fullWidth = true,
-    text = 'medium',
-    tokens,
-    variant,
-    ...rest
-  } = _ref2;
-  const {
-    tablePaddingBottom,
-    borderColor,
-    borderWidth
-  } = useThemeTokens('Table', tokens, variant);
-  const containerRef = React.useRef();
-  const tableRef = React.useRef();
-  const [containerWidth, setContainerWidth] = React.useState(0);
-  const [tableWidth, setTableWidth] = React.useState(0);
-  useSafeLayoutEffect(() => {
-    const updateDimensions = () => {
-      var _containerRef$current, _tableRef$current;
-      const containerClientWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientWidth;
-      const responsiveTableWidth = fullWidth ? containerClientWidth : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.clientWidth;
-      setContainerWidth(containerClientWidth);
-      setTableWidth(responsiveTableWidth);
-    };
-    const throttledUpdateDimensions = throttle(updateDimensions, 100, {
-      leading: false
-    });
-    updateDimensions();
-
-    // a pretty naive way of repeating the measurement after the fonts are loaded
-    window.addEventListener('load', updateDimensions);
-    window.addEventListener('resize', throttledUpdateDimensions);
-    return () => {
-      window.removeEventListener('load', updateDimensions);
-      window.removeEventListener('resize', throttledUpdateDimensions);
-    };
-  }, []);
-  const isScrollable = tableWidth > containerWidth;
-  return /*#__PURE__*/_jsx(StyledContainer, {
-    ref: containerRef,
-    isScrollable: isScrollable,
-    tablePaddingBottom: tablePaddingBottom,
-    children: /*#__PURE__*/_jsx(TableContext.Provider, {
-      value: {
-        text,
-        isScrollable,
-        tokens,
-        spacing
-      },
-      children: /*#__PURE__*/_jsx(StyledTable, {
-        borderColor: borderColor,
-        borderWidth: borderWidth,
-        tableWidth: tableWidth,
-        cellSpacing: 0,
-        ref: tableRef,
-        fullWidth: fullWidth,
-        ...selectProps(rest),
-        children: children
-      })
-    })
-  });
-};
-Table.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Table'),
-  children: PropTypes.node,
-  /**
-   * Sets text style
-   */
-  text: PropTypes.oneOf(['medium', 'small'])
-};
-export default Table;

package/lib-module/Table/index.js

@@ -1,12 +0,0 @@
-import Table from './Table';
-import Header from './Header';
-import Body from './Body';
-import Row from './Row';
-import SubHeading from './SubHeading';
-import Cell from './Cell';
-Table.Header = Header;
-Table.Body = Body;
-Table.Row = Row;
-Table.SubHeading = SubHeading;
-Table.Cell = Cell;
-export default Table;