@telus-uds/components-web 1.1.0 → 1.3.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/Ribbon/Ribbon.js

@@ -0,0 +1,191 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base'; // import palette from '@telus-uds/palette-allium/build/web/palette'
+
+import styled 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 RibbonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Ribbon__RibbonWrapper",
+  componentId: "components-web__sc-186270k-0"
+})(["width:fit-content;position:", ";z-index:1;left:", ";top:", ";"], _ref => {
+  let {
+    left,
+    top
+  } = _ref;
+  return left ?? top ? 'absolute' : 'relative';
+}, _ref2 => {
+  let {
+    left
+  } = _ref2;
+  return left && `${left}px`;
+}, _ref3 => {
+  let {
+    top
+  } = _ref3;
+  return top && `${top}px`;
+});
+const RibbonContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Ribbon__RibbonContainer",
+  componentId: "components-web__sc-186270k-1"
+})(["display:flex;justify-content:center;background:", ";padding:", ";border-radius:", ";width:fit-content;box-shadow:", ";"], _ref4 => {
+  let {
+    backgroundColor
+  } = _ref4;
+  return backgroundColor;
+}, _ref5 => {
+  let {
+    padding
+  } = _ref5;
+  return `${padding}`;
+}, _ref6 => {
+  let {
+    borderRadius
+  } = _ref6;
+  return borderRadius;
+}, _ref7 => {
+  let {
+    boxShadow,
+    shouldWrap
+  } = _ref7;
+  return shouldWrap && boxShadow;
+});
+const RibbonCurve = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Ribbon__RibbonCurve",
+  componentId: "components-web__sc-186270k-2"
+})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref8 => {
+  let {
+    curveBackgroundColor
+  } = _ref8;
+  return curveBackgroundColor;
+}, _ref9 => {
+  let {
+    curveWidth
+  } = _ref9;
+  return curveWidth;
+}, _ref10 => {
+  let {
+    curveHeight
+  } = _ref10;
+  return curveHeight;
+}, _ref11 => {
+  let {
+    curveMarginTop
+  } = _ref11;
+  return curveMarginTop;
+}, _ref12 => {
+  let {
+    curveAfterRadius
+  } = _ref12;
+  return curveAfterRadius;
+}, _ref13 => {
+  let {
+    curveAfterHeight
+  } = _ref13;
+  return curveAfterHeight;
+}, _ref14 => {
+  let {
+    curveAfterBackgroundColor
+  } = _ref14;
+  return curveAfterBackgroundColor;
+}, _ref15 => {
+  let {
+    curveAfterWidth
+  } = _ref15;
+  return curveAfterWidth;
+});
+
+const Ribbon = _ref16 => {
+  let {
+    children,
+    tokens,
+    wrap: shouldWrap = false,
+    left,
+    top,
+    variant = {},
+    ...rest
+  } = _ref16;
+  const {
+    backgroundColor,
+    borderRadius,
+    boxShadowPaddingBottom,
+    boxShadowPaddingLeft,
+    boxShadowPaddingRight,
+    boxShadowPaddingTop,
+    boxShadowColor,
+    curveAfterBackgroundColor,
+    curveAfterHeight,
+    curveAfterWidth,
+    curveBackgroundColor,
+    curveHeight,
+    curveAfterRadius,
+    curveWidth,
+    curveMarginTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    gradient
+  } = useThemeTokens('Ribbon', tokens, variant);
+  const {
+    purpose
+  } = variant;
+  const {
+    type: gradientType,
+    angle: gradientAngle,
+    stops: gradientColors
+  } = gradient;
+  const isOfferPurpose = purpose === 'offer';
+  const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`;
+  const background = isOfferPurpose ? gradientBackground : backgroundColor;
+  return /*#__PURE__*/_jsxs(RibbonWrapper, {
+    left: left,
+    top: top,
+    "data-testid": "ribbon-wrapper",
+    ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx(RibbonContainer, {
+      shouldWrap: shouldWrap,
+      backgroundColor: background,
+      padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+      borderRadius: `${borderRadius}px`,
+      boxShadow: `${boxShadowPaddingTop}px ${boxShadowPaddingRight}px ${boxShadowPaddingBottom}px ${boxShadowPaddingLeft}px ${boxShadowColor}`,
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: {
+          size: 'micro',
+          bold: true,
+          inverse: true
+        },
+        children: children
+      })
+    }), shouldWrap && /*#__PURE__*/_jsx(RibbonCurve, {
+      "data-testid": "ribbon-curve",
+      backgroundColor: backgroundColor,
+      curveMarginTop: `${curveMarginTop}px`,
+      curveWidth: `${curveWidth}px`,
+      curveHeight: `${curveHeight}px`,
+      curveBackgroundColor: curveBackgroundColor,
+      curveAfterRadius: `${curveAfterRadius}px`,
+      curveAfterWidth: `${curveAfterWidth}px`,
+      curveAfterHeight: `${curveAfterHeight}px`,
+      curveAfterBackgroundColor: curveAfterBackgroundColor
+    })]
+  });
+};
+
+Ribbon.propTypes = { ...selectedSystemPropTypes,
+  children: PropTypes.node,
+
+  /** show/hide the ribbon fold
+   * @deprecated please don't rely on `wrap` to turn off the wrapping (use `Badge` instead) as it will be removed in the future
+   */
+  wrap: PropTypes.bool,
+
+  /** sets the left offset (triggers absolute positioning) */
+  left: PropTypes.number,
+
+  /** sets the top offset (triggers absolute positioning) */
+  top: PropTypes.number
+};
+export default Ribbon;

package/lib-module/Ribbon/index.js

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

package/lib-module/index.js

@@ -1,3 +1,5 @@
 export { default as Badge } from './Badge';
+export { default as OrderedList } from './OrderedList';
+export { default as Ribbon } from './Ribbon';
 export { transformGradient } from './utils';
 export * from './baseExports';

package/package.json

@@ -4,13 +4,14 @@
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "1.31.0",
+    "@telus-uds/components-base": "1.33.0",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.15.0",
+    "@telus-uds/system-theme-tokens": "^2.17.0",
     "prop-types": "^15.7.2"
   },
   "description": "UDS mult-brand web components",
   "devDependencies": {
+    "@telus-uds/palette-allium": "^2.12.3",
     "@telus-uds/browserslist-config": "^1.0.4",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^13.3.0",
@@ -53,5 +54,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.1.0"
+  "version": "1.3.0"
 }

package/src/OrderedList/Item.jsx

@@ -0,0 +1,121 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const selectItemTextStyles = (
+  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName, itemColor },
+  themeOptions
+) =>
+  applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor,
+    themeOptions,
+    lineHeight: itemLineHeight
+  })
+
+const StyledItemBase = styled(ItemBase)(
+  ({
+    interItemMargin,
+    itemBulletContainerWidth,
+    itemBulletContainerAlign,
+    itemFontWeight,
+    itemFontSize,
+    itemFontName,
+    itemLineHeight,
+    themeOptions,
+    listGutter,
+    itemColor
+  }) => ({
+    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 = styled.div({
+  flex: 1
+})
+
+const Item = forwardRef(({ children, counterName, title, tokens, variant, ...rest }, ref) => {
+  // 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 (
+    <StyledItemBase ref={ref} themeOptions={themeOptions} {...themeTokens} {...selectProps(rest)}>
+      {title ? (
+        <StackView tokens={{ flexShrink: 1 }} space={0}>
+          <Typography variant={{ size: 'h4' }} tokens={headingTokens}>
+            {title}
+          </Typography>
+          <ItemContent {...themeTokens}>{itemContent}</ItemContent>
+        </StackView>
+      ) : (
+        itemContent
+      )}
+    </StyledItemBase>
+  )
+})
+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/src/OrderedList/ItemBase.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+const StyledItem = styled.li({
+  display: 'flex'
+})
+
+const Item = ({ children, ...rest }) => <StyledItem {...rest}>{children}</StyledItem>
+
+Item.propTypes = {
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired
+}
+
+export default Item