@telus-uds/components-web 1.3.0 → 1.5.0

package/lib-module/Paragraph/Paragraph.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { 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 = _ref3 => {
+  let {
+    children,
+    variant,
+    tokens,
+    testID,
+    align,
+    linesBetween = 1,
+    ...rest
+  } = _ref3;
+  const style = useTypographyTheme(variant, tokens);
+  return /*#__PURE__*/_jsx(StyledParagraph, {
+    linesBetween: linesBetween,
+    "data-testid": testID,
+    align: align,
+    style: style,
+    ...selectProps(rest),
+    children: children
+  });
+};
+
+Paragraph.propTypes = { ...selectedSystemPropTypes,
+  children: PropTypes.node.isRequired,
+  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: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+
+  /**
+   * 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

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

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;

package/lib-module/PriceLockup/PriceLockup.js

@@ -0,0 +1,213 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import FootnoteLink from '../Footnote/FootnoteLink';
+import typographyTokens from './tokens';
+import { htmlAttrs, warn } from '../utils';
+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([htmlAttrs]);
+const PriceLockupContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__PriceLockupContainer",
+  componentId: "components-web__sc-1x6duay-0"
+})(["display:flex;flex-direction:column;width:fit-content;"]);
+const PriceContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__PriceContainer",
+  componentId: "components-web__sc-1x6duay-1"
+})(["display:flex;margin-bottom:", ";"], _ref => {
+  let {
+    priceMarginBottom
+  } = _ref;
+  return priceMarginBottom;
+});
+const FootnoteContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__FootnoteContainer",
+  componentId: "components-web__sc-1x6duay-2"
+})(["display:flex;margin-top:", ";gap:", ";"], _ref2 => {
+  let {
+    footnoteMarginTop
+  } = _ref2;
+  return footnoteMarginTop;
+}, _ref3 => {
+  let {
+    footnoteGap
+  } = _ref3;
+  return footnoteGap;
+});
+const BottomTextContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__BottomTextContainer",
+  componentId: "components-web__sc-1x6duay-3"
+})(["margin-top:", ";"], _ref4 => {
+  let {
+    bottomTextMarginTop
+  } = _ref4;
+  return bottomTextMarginTop;
+});
+const BottomLinksContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__BottomLinksContainer",
+  componentId: "components-web__sc-1x6duay-4"
+})(["align-self:center;margin-left:", ";"], _ref5 => {
+  let {
+    bottomLinksMarginLeft
+  } = _ref5;
+  return bottomLinksMarginLeft;
+});
+const TopTextContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__TopTextContainer",
+  componentId: "components-web__sc-1x6duay-5"
+})(["margin-bottom:", ";"], _ref6 => {
+  let {
+    topTextMarginBottom
+  } = _ref6;
+  return topTextMarginBottom;
+});
+const RateTextContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__RateTextContainer",
+  componentId: "components-web__sc-1x6duay-6"
+})(["align-self:flex-end;"]);
+const StrikeThroughContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__StrikeThroughContainer",
+  componentId: "components-web__sc-1x6duay-7"
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;height:", ";background:", ";position:absolute;}"], _ref7 => {
+  let {
+    strikeThroughHeight
+  } = _ref7;
+  return strikeThroughHeight;
+}, _ref8 => {
+  let {
+    strikeThroughBackground
+  } = _ref8;
+  return strikeThroughBackground;
+});
+
+const PriceLockup = _ref9 => {
+  let {
+    size = 'medium',
+    signDirection = 'left',
+    footnoteLinks = [],
+    topText,
+    price,
+    currencySymbol = '$',
+    rateText,
+    bottomText,
+    onClickFootnote,
+    strikeThrough,
+    a11yText,
+    tokens: priceLockupTokens,
+    variant = {},
+    ...rest
+  } = _ref9;
+  const {
+    footnoteMarginTop,
+    footnoteGap,
+    bottomTextMarginTop,
+    priceMarginBottom,
+    bottomLinksMarginLeft,
+    topTextMarginBottom,
+    strikeThroughHeight,
+    strikeThroughBackground,
+    fontColor,
+    dividerColor
+  } = useThemeTokens('PriceLockup', priceLockupTokens, variant);
+  const priceString = String(price);
+  const lastDotPosition = priceString.lastIndexOf('.');
+  const lastCommaPosition = priceString.lastIndexOf(',');
+  const [separator, separatorPosition] = lastDotPosition > lastCommaPosition ? ['.', lastDotPosition] : [',', lastCommaPosition]; // If the separator is at the fourth character from the end of the string or more, it's most probably
+  // a part of the amount, and the cents are not included in the price string
+
+  const hasCents = separatorPosition !== -1 && separatorPosition >= priceString.length - 3;
+  const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString;
+  const cents = hasCents ? priceString.substring(separatorPosition + 1) : null;
+  const color = strikeThrough ? strikeThroughBackground : fontColor;
+
+  const renderTypography = (value, tokens) => /*#__PURE__*/_jsx(Typography, {
+    tokens: { ...tokens,
+      color
+    },
+    children: value
+  });
+
+  const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign[size]);
+
+  const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
+    number: footnoteLinks,
+    onClick: onClickFootnote
+  }) : null;
+
+  const renderAmount = () => {
+    const amountComponent = renderTypography(amount, typographyTokens.amount[size]);
+
+    if (strikeThrough) {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(A11yText, {
+          text: a11yText
+        }), /*#__PURE__*/_jsx(StrikeThroughContainer, {
+          strikeThroughHeight: `${strikeThroughHeight}px`,
+          strikeThroughBackground: strikeThroughBackground,
+          children: amountComponent
+        })]
+      });
+    }
+
+    return amountComponent;
+  };
+
+  const renderPrice = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(PriceContainer, {
+      priceMarginBottom: `${priceMarginBottom}px`,
+      children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, typographyTokens.cents[size]), signDirection === 'right' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["\xA0", renderCurrencySymbol()]
+      }), rateText && /*#__PURE__*/_jsx(RateTextContainer, {
+        children: renderTypography(rateText, typographyTokens.rate[size])
+      }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/_jsx(BottomLinksContainer, {
+        bottomLinksMarginLeft: `${bottomLinksMarginLeft}px`,
+        children: renderFootnoteLinks()
+      })]
+    }), !bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()]
+  });
+
+  const renderFootnoteContent = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(FootnoteContainer, {
+      footnoteMarginTop: `${footnoteMarginTop}px`,
+      footnoteGap: `${footnoteGap}px`,
+      children: [/*#__PURE__*/_jsx(BottomTextContainer, {
+        bottomTextMarginTop: `${bottomTextMarginTop}px`,
+        children: renderTypography(bottomText, typographyTokens.bottomText[size])
+      }), footnoteLinks.length <= 3 && renderFootnoteLinks()]
+    }), footnoteLinks.length > 3 && renderFootnoteLinks()]
+  });
+
+  if (strikeThrough && !a11yText) {
+    warn('PriceLockup', 'a11yText must be provided with strikethrough pricing');
+  }
+
+  return /*#__PURE__*/_jsxs(PriceLockupContainer, { ...selectProps(rest),
+    children: [topText && /*#__PURE__*/_jsx(TopTextContainer, {
+      topTextMarginBottom: `${topTextMarginBottom}px`,
+      children: renderTypography(topText, typographyTokens.topText[size])
+    }), renderPrice(), bottomText && /*#__PURE__*/_jsx(Divider, {
+      testID: "price-lockup-divider",
+      role: "separator",
+      tokens: {
+        color: dividerColor
+      }
+    }), bottomText && renderFootnoteContent()]
+  });
+};
+
+PriceLockup.propTypes = { ...selectedSystemPropTypes,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  currencySymbol: PropTypes.string,
+  topText: PropTypes.string,
+  price: PropTypes.string.isRequired,
+  rateText: PropTypes.string,
+  bottomText: PropTypes.string,
+  signDirection: PropTypes.oneOf(['right', 'left']),
+  footnoteLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  onClickFootnote: PropTypes.func,
+  strikeThrough: PropTypes.bool,
+  a11yText: PropTypes.string
+};
+export default PriceLockup;

package/lib-module/PriceLockup/index.js

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

package/lib-module/PriceLockup/tokens.js

@@ -0,0 +1,120 @@
+import palette from '@telus-uds/palette-allium/build/rn/palette';
+const {
+  fontSize: {
+    size14,
+    size16,
+    size20,
+    size28,
+    size36,
+    size40,
+    size64
+  },
+  lineHeight: {
+    ratio1to1,
+    ratio10to7,
+    ratio3to2,
+    ratio8to5,
+    ratio5to4,
+    ratio6to5,
+    ratio9to8,
+    ratio4to3,
+    ratio8to7
+  },
+  letterSpacing: {
+    condensed
+  }
+} = palette;
+const typographyTokens = {
+  topText: {
+    small: {
+      fontSize: size14,
+      lineHeight: ratio10to7
+    },
+    medium: {
+      fontSize: size16,
+      lineHeight: ratio3to2
+    },
+    large: {
+      fontSize: size20,
+      lineHeight: ratio8to5
+    }
+  },
+  dollarSign: {
+    small: {
+      fontSize: size16,
+      lineHeight: ratio5to4
+    },
+    medium: {
+      fontSize: size20,
+      lineHeight: ratio6to5
+    },
+    large: {
+      fontSize: size36,
+      lineHeight: ratio9to8
+    }
+  },
+  // TODO - fontWeight should have its own const on palette
+  amount: {
+    small: {
+      fontSize: size28,
+      lineHeight: ratio1to1,
+      letterSpacing: condensed,
+      fontWeight: '300'
+    },
+    medium: {
+      fontSize: size40,
+      lineHeight: ratio1to1,
+      letterSpacing: condensed,
+      fontWeight: '300'
+    },
+    large: {
+      fontSize: size64,
+      lineHeight: ratio1to1,
+      letterSpacing: condensed,
+      fontWeight: '300'
+    }
+  },
+  cents: {
+    small: {
+      fontSize: size16,
+      lineHeight: ratio4to3
+    },
+    medium: {
+      fontSize: size20,
+      lineHeight: ratio6to5
+    },
+    large: {
+      fontSize: size36,
+      lineHeight: ratio9to8
+    }
+  },
+  rate: {
+    small: {
+      fontSize: size14,
+      lineHeight: ratio8to7
+    },
+    medium: {
+      fontSize: size16,
+      lineHeight: ratio5to4
+    },
+    large: {
+      fontSize: size20,
+      lineHeight: ratio8to5
+    }
+  },
+  bottomText: {
+    small: {
+      fontSize: size14,
+      lineHeight: ratio10to7
+    },
+    medium: {
+      fontSize: size16,
+      lineHeight: ratio3to2
+    },
+    large: {
+      fontSize: size20,
+      lineHeight: ratio8to5
+    }
+  }
+};
+export default typographyTokens;