@telus-uds/components-web 1.2.0 → 1.4.0

package/lib-module/OrderedList/Item.js

@@ -0,0 +1,139 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { applyTextStyles, getTokensPropType, selectSystemProps, StackView, Typography, useTheme, useThemeTokens, wrapStringsInText } from '@telus-uds/components-base';
+import ItemBase from './ItemBase';
+import { htmlAttrs } from '../utils';
+import { OL_COUNTER_NAME } from './constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+
+const selectItemTextStyles = (_ref, themeOptions) => {
+  let {
+    itemFontWeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName,
+    itemColor
+  } = _ref;
+  return applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor,
+    themeOptions,
+    lineHeight: itemLineHeight
+  });
+};
+
+const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
+  displayName: "Item__StyledItemBase",
+  componentId: "components-web__sc-7jzwcq-0"
+})(_ref2 => {
+  let {
+    interItemMargin,
+    itemBulletContainerWidth,
+    itemBulletContainerAlign,
+    itemFontWeight,
+    itemFontSize,
+    itemFontName,
+    itemLineHeight,
+    themeOptions,
+    listGutter,
+    itemColor
+  } = _ref2;
+  return {
+    counterIncrement: OL_COUNTER_NAME,
+    '::before': {
+      content: `counter(${OL_COUNTER_NAME})'.'`,
+      display: 'inline-flex',
+      color: itemColor,
+      width: itemBulletContainerWidth,
+      paddingRight: listGutter,
+      textAlign: itemBulletContainerAlign,
+      ...applyTextStyles({
+        fontWeight: itemFontWeight,
+        fontSize: itemFontSize,
+        fontName: itemFontName,
+        themeOptions
+      }),
+      lineHeight: `${itemLineHeight * itemFontSize}px`
+    },
+    ':not(:last-child)': {
+      marginBottom: interItemMargin
+    }
+  };
+});
+const ItemContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Item__ItemContent",
+  componentId: "components-web__sc-7jzwcq-1"
+})({
+  flex: 1
+});
+const Item = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    children,
+    counterName,
+    title,
+    tokens,
+    variant,
+    ...rest
+  } = _ref3;
+  // We are reusing some tokens from the list component here in order to provide a unified
+  // experience
+  const themeTokens = useThemeTokens('OrderedList', tokens, variant);
+  const headingTokens = title && {
+    lineHeight: themeTokens.itemLineHeight,
+    fontSize: themeTokens.itemFontSize,
+    color: themeTokens.itemColor,
+    fontName: themeTokens.headerFontName,
+    fontWeight: themeTokens.headerFontWeight
+  };
+  const {
+    themeOptions
+  } = useTheme();
+  const itemContent = wrapStringsInText(children, {
+    style: selectItemTextStyles(themeTokens, themeOptions)
+  });
+  return /*#__PURE__*/_jsx(StyledItemBase, {
+    ref: ref,
+    themeOptions: themeOptions,
+    ...themeTokens,
+    ...selectProps(rest),
+    children: title ? /*#__PURE__*/_jsxs(StackView, {
+      tokens: {
+        flexShrink: 1
+      },
+      space: 0,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: {
+          size: 'h4'
+        },
+        tokens: headingTokens,
+        children: title
+      }), /*#__PURE__*/_jsx(ItemContent, { ...themeTokens,
+        children: itemContent
+      })]
+    }) : itemContent
+  });
+});
+Item.displayName = 'OrderedListItem';
+Item.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string,
+
+  /**
+   * Item tokens
+   */
+  tokens: getTokensPropType('List')
+};
+Item.defaultProps = {
+  title: undefined,
+  tokens: {}
+};
+export default Item;

package/lib-module/OrderedList/ItemBase.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledItem = /*#__PURE__*/styled.li.withConfig({
+  displayName: "ItemBase__StyledItem",
+  componentId: "components-web__sc-o0oiv5-0"
+})({
+  display: 'flex'
+});
+
+const Item = _ref => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledItem, { ...rest,
+    children: children
+  });
+};
+
+Item.propTypes = {
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired
+};
+export default Item;

package/lib-module/OrderedList/OrderedList.js

@@ -0,0 +1,71 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs } from '../utils';
+import OrderedListBase from './OrderedListBase';
+import Item from './Item';
+import { OL_COUNTER_NAME } from './constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledOrderedListBase = /*#__PURE__*/styled(OrderedListBase).withConfig({
+  displayName: "OrderedList__StyledOrderedListBase",
+  componentId: "components-web__sc-t5az8z-0"
+})(_ref => {
+  let {
+    start
+  } = _ref;
+  return {
+    // Using CSS counters here to have better control over the number styling
+    listStyle: 'none',
+    counterReset: `${OL_COUNTER_NAME} ${start - 1}`
+  };
+});
+/**
+ * Themed semantic ordered list.
+ */
+
+const OrderedList = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children,
+    start,
+    variant,
+    ...rest
+  } = _ref2;
+  // Pass any variants "OrderedList" receives down to the individual list items.
+  const childrenWithParentVariants = variant ? children.map(child => {
+    var _child$props;
+
+    const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+    return { ...child,
+      props: { ...child.props,
+        variant: { ...existingChildVariants,
+          ...variant
+        }
+      }
+    };
+  }) : children;
+  return /*#__PURE__*/_jsx(StyledOrderedListBase, { ...selectProps(rest),
+    ref: ref,
+    start: start,
+    children: childrenWithParentVariants
+  });
+});
+OrderedList.displayName = 'OrderedList';
+OrderedList.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * A list of ordered items wrapped in `OrderedList.Item`.
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * The position to start the list with.
+   */
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+OrderedList.defaultProps = {
+  start: 1
+};
+OrderedList.Item = Item;
+export default OrderedList;

package/lib-module/OrderedList/OrderedListBase.js

@@ -0,0 +1,48 @@
+import React, { forwardRef } 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__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    start,
+    ...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.defaultProps = {
+  start: 1
+};
+OrderedListBase.Item = ItemBase;
+export default OrderedListBase;

package/lib-module/OrderedList/constants.js

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

package/lib-module/OrderedList/index.js

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

package/lib-module/PreviewCard/AuthorDate.js

@@ -0,0 +1,53 @@
+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 = {
+  author: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired
+};
+export default AuthorDate;

package/lib-module/PreviewCard/PreviewCard.js

@@ -0,0 +1,211 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } 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 } 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
+};
+/**
+ * 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__*/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',
+                colour: 'secondary'
+              },
+              children: tag
+            }), /*#__PURE__*/_jsx(Spacer, {
+              space: 2
+            })]
+          }), /*#__PURE__*/_jsx(Typography, {
+            variant: {
+              size: 'h4',
+              colour: 'secondary'
+            },
+            children: title
+          }), Boolean(footer) && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Spacer, {
+              space: 2
+            }), typeof footer === 'string' ? /*#__PURE__*/_jsx(Typography, {
+              variant: {
+                size: 'small',
+                colour: 'secondary'
+              },
+              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,
+
+  /**
+   * 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

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