@telus-uds/components-web 2.43.0 → 3.0.0

package/lib-module/OrderedList/OrderedListBase.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import ItemBase from './ItemBase';
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledList = /*#__PURE__*/styled.ol.withConfig({
-  displayName: "OrderedListBase__StyledList",
-  componentId: "components-web__sc-4m9lgj-0"
-})({
-  display: 'flex',
-  flexDirection: 'column',
-  listStylePosition: 'inside',
-  margin: 0,
-  padding: 0
-});
-
-/**
- * Semantic ordered list.
- */
-const OrderedListBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    start = 1,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(StyledList, {
-    ...rest,
-    ref: ref,
-    start: start,
-    children: children
-  });
-});
-OrderedListBase.displayName = 'OrderedList';
-OrderedListBase.propTypes = {
-  /**
-   * A list of ordered items wrapped in `OrderedListBase.Item`.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * The position to start the list with.
-   */
-  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-OrderedListBase.Item = ItemBase;
-export default OrderedListBase;

package/lib-module/OrderedList/constants.js

@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export const OL_COUNTER_NAME = 'allium-ordered-list-counter';

package/lib-module/OrderedList/index.js

@@ -1,4 +0,0 @@
-import OrderedList from './OrderedList';
-import Item from './Item';
-OrderedList.Item = Item;
-export default OrderedList;

package/lib-module/Paragraph/Paragraph.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, useTypographyTheme } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
-  displayName: "Paragraph__StyledParagraph",
-  componentId: "components-web__sc-1bg9r8p-0"
-})(["", " ", " &:first-child{margin-block-start:0em;}&:last-child{margin-block-end:0em;}"], _ref => {
-  let {
-    align
-  } = _ref;
-  return align ? `text-align: ${align};` : '';
-}, _ref2 => {
-  let {
-    linesBetween
-  } = _ref2;
-  return `
-    margin-block-start: ${linesBetween}em;
-    margin-block-end: ${linesBetween}em;
-  `;
-});
-
-/**
-* Block text as an HTML ```<p>``` element.
-	*
-	* ##Usage criteria
-	*
-	* - All body text should be contained in a **Paragraph**, regardless of length.
-	* - If the Paragraph is on a dark background, variant **{ invert: true }** must be used to maintain sufficient colour
-	contrast.
-	* - All Allium Typography variants other than header size variants are supported.
-	*/
-const Paragraph = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    children,
-    variant,
-    tokens,
-    testID,
-    align,
-    linesBetween = 1,
-    ...rest
-  } = _ref3;
-  const style = useTypographyTheme(variant, tokens);
-  return /*#__PURE__*/_jsx(StyledParagraph, {
-    ref: ref,
-    linesBetween: linesBetween,
-    "data-testid": testID,
-    align: align,
-    style: style,
-    ...selectProps(rest),
-    children: children
-  });
-});
-Paragraph.displayName = 'Paragraph';
-Paragraph.propTypes = {
-  ...selectedSystemPropTypes,
-  children: PropTypes.node.isRequired,
-  /**
-   * Adds a `data-testid` attribute to the element for testing purposes
-   */
-  testID: PropTypes.string,
-  /**
-   * Sets the alignment style for the paragraph. Same options as Typography's `align` prop.
-   * 'justify' should be avoided as it usually reduces ease of reading.
-   */
-  align: PropTypes.oneOf(['auto', 'left', 'right', 'center', 'justify']),
-  /**
-   * How much space between consecutive paragraphs, or between a paragraph and its siblings, in CSS
-   * `em` units: 1 gives space equal to one line of paragraph text, 0.5 would be half a line, etc.
-   * @default 1
-   */
-  linesBetween: PropTypes.number,
-  /**
-   * Paragraph takes the same tokens overrides as Typography
-   */
-  tokens: getTokensPropType('Typography'),
-  /**
-   * Paragraph takes any of Typography's theme variants except for header sizes
-   */
-  variant: PropTypes.exact({
-    bold: PropTypes.bool,
-    colour: PropTypes.oneOf(['secondary', 'tertiary']),
-    inverse: PropTypes.bool,
-    size: PropTypes.oneOf(['micro', 'small', 'large'])
-  })
-};
-export default Paragraph;

package/lib-module/Paragraph/index.js

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

package/lib-module/PreviewCard/AuthorDate.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { StackWrap, Typography, useThemeTokens } from '@telus-uds/components-base';
-
-/**
- * A footer for PreviewCard that composes author and date in a standard way
- *
- * @TODO
- * Add same locale-based date formatting as StoryCard when ready.
- * Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const AuthorDate = _ref => {
-  let {
-    author,
-    date
-  } = _ref;
-  const {
-    separatorColor: color
-  } = useThemeTokens('PreviewCard', {}, {});
-  return /*#__PURE__*/_jsxs(StackWrap, {
-    space: 2,
-    children: [/*#__PURE__*/_jsx(Typography, {
-      variant: {
-        size: 'small',
-        colour: 'secondary'
-      },
-      children: author
-    }), /*#__PURE__*/_jsx(Typography, {
-      variant: {
-        size: 'small'
-      },
-      tokens: {
-        color
-      },
-      children: "\xB7"
-    }), /*#__PURE__*/_jsx(Typography, {
-      variant: {
-        size: 'small',
-        colour: 'secondary'
-      },
-      children: date
-    })]
-  });
-};
-AuthorDate.propTypes = {
-  /**
-   * Name of the author
-   */
-  author: PropTypes.string.isRequired,
-  /**
-   * Date of the post
-   */
-  date: PropTypes.string.isRequired
-};
-export default AuthorDate;

package/lib-module/PreviewCard/PreviewCard.js

@@ -1,209 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import omit from 'lodash.omit';
-import { Box, getThemeTokens, hrefAttrsProp, PressableCardBase, selectSystemProps, Spacer, StackView, Typography, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useTheme, getTokensPropType } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
-import AuthorDate from './AuthorDate';
-
-// Passes React Native-oriented system props through UDS PressableCardBase
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } 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: "PreviewCard__FullBleedOffsetOuter",
-  componentId: "components-web__sc-1yfz4de-0"
-})(_ref => {
-  let {
-    borderOffset
-  } = _ref;
-  return {
-    overflow: 'hidden',
-    marginTop: borderOffset * 2
-  };
-});
-const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PreviewCard__FullBleedOffsetInner",
-  componentId: "components-web__sc-1yfz4de-1"
-})(_ref2 => {
-  let {
-    borderOffset
-  } = _ref2;
-  return {
-    position: 'relative',
-    margin: 0 - borderOffset
-  };
-});
-const defaultTokens = {
-  minWidth: 0,
-  shadow: null,
-  contentAlignItems: 'stretch',
-  contentJustifyContent: 'flex-start',
-  contentFlexGrow: 0,
-  contentFlexShrink: 0
-};
-
-/**
- * Showcase and guide users to another page, with a preview containing title and a footer.
- * Whole card is interactive, width expands based on column or container.
- *
- * - Use `tag` to show category of content
- * - Use `title` to show title of the story
- * - Use `footer` to show text such as the author / date
- * - Use `href` to set the target URL
- * - Use `fullBleedContent` to set the thumbnail image
- */
-const PreviewCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    tag,
-    title,
-    footer,
-    fullBleedImage,
-    fullBleedContent = fullBleedImage,
-    onPress,
-    href,
-    ...rest
-  } = _ref3;
-  const {
-    fullBleedContentPosition,
-    contentStackDirection,
-    fullBleedContentProps
-  } = useFullBleedContentProps({
-    ...fullBleedContent,
-    position: 'bottom'
-  });
-  const {
-    components: {
-      PreviewCard: theme
-    }
-  } = useTheme();
-  const getPressableCardTokens = cardState => ({
-    ...omit(getThemeTokens(theme, {}, {}, cardState), 'separatorColor'),
-    ...defaultTokens
-  });
-  const {
-    hrefAttrs,
-    rest: unusedRest
-  } = hrefAttrsProp.bundle(rest);
-  return /*#__PURE__*/_jsx(PressableCardBase, {
-    onPress: onPress,
-    href: href,
-    hrefAttrs: hrefAttrs,
-    tokens: getPressableCardTokens,
-    ref: ref,
-    ...selectProps(unusedRest),
-    children: cardState => {
-      const {
-        borderRadius,
-        borderWidth
-      } = getPressableCardTokens(cardState);
-      // Stop content jumping around as border size changes
-      const borderOffset = borderWidth - theme.tokens.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: [Boolean(tag) && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: {
-                size: 'eyebrow'
-              },
-              children: tag
-            }), /*#__PURE__*/_jsx(Spacer, {
-              space: 2
-            })]
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: {
-              size: 'h4'
-            },
-            children: title
-          }), Boolean(footer) && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Spacer, {
-              space: 2
-            }), typeof footer === 'string' ? /*#__PURE__*/_jsx(Typography, {
-              variant: {
-                size: 'small'
-              },
-              children: footer
-            }) : footer]
-          })]
-        }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/_jsx(FullBleedOffsetOuter, {
-          borderOffset: borderOffset,
-          children: /*#__PURE__*/_jsx(FullBleedOffsetInner, {
-            borderOffset: borderOffset,
-            children: /*#__PURE__*/_jsx(FullBleedContent, {
-              borderRadius: fullBleedBorderRadius,
-              ...fullBleedContentProps
-            })
-          })
-        })]
-      });
-    }
-  });
-});
-PreviewCard.displayName = 'PreviewCard';
-
-// Provide standard author/date footer as a preset with the export
-PreviewCard.AuthorDate = AuthorDate;
-PreviewCard.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('PreviewCard'),
-  /**
-   * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
-   * a `PreviewCard` 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,
-  /**
-   * Section containing additional information, such as author and date.
-   * Use `<PreviewCard.AuthorDate author={...} date={...} />` here for author and date.
-   */
-  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  /**
-   * Text stating the title or headline of the story.
-   */
-  title: 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 content to be placed on the card.
-   */
-  fullBleedContent: PropTypes.exact(FullBleedContent.propTypes || {})
-};
-export default withLinkRouter(PreviewCard);

package/lib-module/PreviewCard/index.js

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