@telus-uds/components-web 1.3.0 → 1.5.0

package/src/Footnote/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    a11yLabel: 'Read legal footnote',
+    close: 'close',
+    heading: 'Terms and conditions'
+  },
+  fr: {
+    a11yLabel: 'Lire la note de bas de page légale',
+    close: 'fermer',
+    heading: 'Modalités et conditions'
+  }
+}

package/src/Footnote/index.js

@@ -0,0 +1,6 @@
+import Footnote from './Footnote'
+import FootnoteLink from './FootnoteLink'
+
+Footnote.Link = FootnoteLink
+
+export default Footnote

package/src/Paragraph/Paragraph.jsx

@@ -0,0 +1,79 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const StyledParagraph = styled.p`
+  ${({ align }) => (align ? `text-align: ${align};` : '')}
+  ${({ linesBetween }) => `
+    margin-block-start: ${linesBetween}em;
+    margin-block-end: ${linesBetween}em;
+  `}
+  &:first-child {
+    margin-block-start: 0em;
+  }
+  &:last-child {
+    margin-block-end: 0em;
+  }
+`
+
+/**
+* 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 = ({ children, variant, tokens, testID, align, linesBetween = 1, ...rest }) => {
+  const style = useTypographyTheme(variant, tokens)
+  return (
+    <StyledParagraph
+      linesBetween={linesBetween}
+      data-testid={testID}
+      align={align}
+      style={style}
+      {...selectProps(rest)}
+    >
+      {children}
+    </StyledParagraph>
+  )
+}
+
+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/src/Paragraph/index.js

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

package/src/PreviewCard/AuthorDate.jsx

@@ -0,0 +1,31 @@
+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
+ */
+const AuthorDate = ({ author, date }) => {
+  const { separatorColor: color } = useThemeTokens('PreviewCard', {}, {})
+  return (
+    <StackWrap space={2}>
+      <Typography variant={{ size: 'small', colour: 'secondary' }}>{author}</Typography>
+      <Typography variant={{ size: 'small' }} tokens={{ color }}>
+        ·
+      </Typography>
+      <Typography variant={{ size: 'small', colour: 'secondary' }}>{date}</Typography>
+    </StackWrap>
+  )
+}
+
+AuthorDate.propTypes = {
+  author: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired
+}
+
+export default AuthorDate

package/src/PreviewCard/PreviewCard.jsx

@@ -0,0 +1,201 @@
+/* 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
+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 = styled.div(({ borderOffset }) => ({
+  overflow: 'hidden',
+  marginTop: borderOffset * 2
+}))
+const FullBleedOffsetInner = styled.div(({ borderOffset }) => ({
+  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 = forwardRef(
+  (
+    {
+      tag,
+      title,
+      footer,
+      fullBleedImage,
+      fullBleedContent = fullBleedImage,
+      onPress,
+      href,
+      ...rest
+    },
+    ref
+  ) => {
+    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 (
+      <PressableCardBase
+        onPress={onPress}
+        href={href}
+        hrefAttrs={hrefAttrs}
+        tokens={getPressableCardTokens}
+        ref={ref}
+        {...selectProps(unusedRest)}
+      >
+        {(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 (
+            <StackView
+              direction={contentStackDirection}
+              tokens={{ justifyContent: 'space-between', flexGrow: 1 }}
+            >
+              <Box
+                horizontal={{ xs: 4, lg: 5, options: { subtract: borderOffset } }}
+                vertical={{ xs: 5, lg: 7, options: { subtract: borderOffset } }}
+              >
+                {Boolean(tag) && (
+                  <>
+                    <Typography variant={{ size: 'eyebrow', colour: 'secondary' }}>
+                      {tag}
+                    </Typography>
+                    <Spacer space={2} />
+                  </>
+                )}
+                <Typography variant={{ size: 'h4', colour: 'secondary' }}>{title}</Typography>
+                {Boolean(footer) && (
+                  <>
+                    <Spacer space={2} />
+                    {typeof footer === 'string' ? (
+                      <Typography variant={{ size: 'small', colour: 'secondary' }}>
+                        {footer}
+                      </Typography>
+                    ) : (
+                      footer
+                    )}
+                  </>
+                )}
+              </Box>
+              {Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && (
+                <FullBleedOffsetOuter borderOffset={borderOffset}>
+                  <FullBleedOffsetInner borderOffset={borderOffset}>
+                    <FullBleedContent
+                      borderRadius={fullBleedBorderRadius}
+                      {...fullBleedContentProps}
+                    />
+                  </FullBleedOffsetInner>
+                </FullBleedOffsetOuter>
+              )}
+            </StackView>
+          )
+        }}
+      </PressableCardBase>
+    )
+  }
+)
+
+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/src/PreviewCard/index.js

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

package/src/PriceLockup/PriceLockup.jsx

@@ -0,0 +1,210 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const PriceLockupContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+`
+
+const PriceContainer = styled.div`
+  display: flex;
+  margin-bottom: ${({ priceMarginBottom }) => priceMarginBottom};
+`
+
+const FootnoteContainer = styled.div`
+  display: flex;
+  margin-top: ${({ footnoteMarginTop }) => footnoteMarginTop};
+  gap: ${({ footnoteGap }) => footnoteGap};
+`
+
+const BottomTextContainer = styled.div`
+  margin-top: ${({ bottomTextMarginTop }) => bottomTextMarginTop};
+`
+
+const BottomLinksContainer = styled.div`
+  align-self: center;
+  margin-left: ${({ bottomLinksMarginLeft }) => bottomLinksMarginLeft};
+`
+
+const TopTextContainer = styled.div`
+  margin-bottom: ${({ topTextMarginBottom }) => topTextMarginBottom};
+`
+
+const RateTextContainer = styled.div`
+  align-self: flex-end;
+`
+
+const StrikeThroughContainer = styled.div`
+  display: flex;
+  position: relative;
+  align-items: center;
+  ::before {
+    content: '';
+    width: 100%;
+    height: ${({ strikeThroughHeight }) => strikeThroughHeight};
+    background: ${({ strikeThroughBackground }) => strikeThroughBackground};
+    position: absolute;
+  }
+`
+
+const PriceLockup = ({
+  size = 'medium',
+  signDirection = 'left',
+  footnoteLinks = [],
+  topText,
+  price,
+  currencySymbol = '$',
+  rateText,
+  bottomText,
+  onClickFootnote,
+  strikeThrough,
+  a11yText,
+  tokens: priceLockupTokens,
+  variant = {},
+  ...rest
+}) => {
+  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) => (
+    <Typography tokens={{ ...tokens, color }}>{value}</Typography>
+  )
+
+  const renderCurrencySymbol = () =>
+    renderTypography(`${currencySymbol}`, typographyTokens.dollarSign[size])
+
+  const renderFootnoteLinks = () =>
+    footnoteLinks && footnoteLinks.length > 0 ? (
+      <FootnoteLink number={footnoteLinks} onClick={onClickFootnote} />
+    ) : null
+
+  const renderAmount = () => {
+    const amountComponent = renderTypography(amount, typographyTokens.amount[size])
+    if (strikeThrough) {
+      return (
+        <>
+          <A11yText text={a11yText} />
+          <StrikeThroughContainer
+            strikeThroughHeight={`${strikeThroughHeight}px`}
+            strikeThroughBackground={strikeThroughBackground}
+          >
+            {amountComponent}
+          </StrikeThroughContainer>
+        </>
+      )
+    }
+
+    return amountComponent
+  }
+
+  const renderPrice = () => (
+    <>
+      <PriceContainer priceMarginBottom={`${priceMarginBottom}px`}>
+        {signDirection === 'left' && renderCurrencySymbol()}
+        {renderAmount()}
+        {cents && renderTypography(`${separator}${cents}`, typographyTokens.cents[size])}
+        {signDirection === 'right' && <>&nbsp;{renderCurrencySymbol()}</>}
+        {rateText && (
+          <RateTextContainer>
+            {renderTypography(rateText, typographyTokens.rate[size])}
+          </RateTextContainer>
+        )}
+        {!bottomText && footnoteLinks.length <= 3 && (
+          <BottomLinksContainer bottomLinksMarginLeft={`${bottomLinksMarginLeft}px`}>
+            {renderFootnoteLinks()}
+          </BottomLinksContainer>
+        )}
+      </PriceContainer>
+      {!bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()}
+    </>
+  )
+
+  const renderFootnoteContent = () => (
+    <>
+      <FootnoteContainer
+        footnoteMarginTop={`${footnoteMarginTop}px`}
+        footnoteGap={`${footnoteGap}px`}
+      >
+        <BottomTextContainer bottomTextMarginTop={`${bottomTextMarginTop}px`}>
+          {renderTypography(bottomText, typographyTokens.bottomText[size])}
+        </BottomTextContainer>
+        {footnoteLinks.length <= 3 && renderFootnoteLinks()}
+      </FootnoteContainer>
+      {footnoteLinks.length > 3 && renderFootnoteLinks()}
+    </>
+  )
+
+  if (strikeThrough && !a11yText) {
+    warn('PriceLockup', 'a11yText must be provided with strikethrough pricing')
+  }
+
+  return (
+    <PriceLockupContainer {...selectProps(rest)}>
+      {topText && (
+        <TopTextContainer topTextMarginBottom={`${topTextMarginBottom}px`}>
+          {renderTypography(topText, typographyTokens.topText[size])}
+        </TopTextContainer>
+      )}
+      {renderPrice()}
+      {bottomText && (
+        <Divider testID="price-lockup-divider" role="separator" tokens={{ color: dividerColor }} />
+      )}
+      {bottomText && renderFootnoteContent()}
+    </PriceLockupContainer>
+  )
+}
+
+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/src/PriceLockup/index.js

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

package/src/PriceLockup/tokens.js

@@ -0,0 +1,58 @@
+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

package/src/ResponsiveImage/ResponsiveImage.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { selectSystemProps } from '@telus-uds/components-base'
+import { viewports } from '@telus-uds/system-constants'
+import { htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const staticStyles = {
+  image: { display: 'block', width: '100%' }
+}
+
+/**
+ * Provide different image sources for different screen sizes.
+ */
+const ResponsiveImage = ({
+  xsSrc,
+  smSrc,
+  mdSrc,
+  lgSrc,
+  xlSrc,
+  fallbackSrc,
+  alt,
+  loading = 'eager',
+  ...rest
+}) => {
+  return (
+    <picture {...selectProps(rest)}>
+      <source srcSet={xlSrc} media={`(min-width: ${viewports.map.get(viewports.xl)}px)`} />
+      <source srcSet={lgSrc} media={`(min-width: ${viewports.map.get(viewports.lg)}px)`} />
+      <source srcSet={mdSrc} media={`(min-width: ${viewports.map.get(viewports.md)}px)`} />
+      <source srcSet={smSrc} media={`(min-width: ${viewports.map.get(viewports.sm)}px)`} />
+      <source srcSet={xsSrc} media={`(max-width: ${viewports.map.get(viewports.sm) - 1}px)`} />
+      <img src={fallbackSrc} alt={alt} style={staticStyles.image} loading={loading} />
+    </picture>
+  )
+}
+
+ResponsiveImage.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The src attribute used for screen widths up to 575px
+   */
+  xsSrc: PropTypes.string.isRequired,
+  /**
+   * The src attribute used for screen widths greater than 576px
+   */
+  smSrc: PropTypes.string.isRequired,
+  /**
+   * The src attribute used for screen widths greater than 768px
+   */
+  mdSrc: PropTypes.string,
+  /**
+   * The src attribute used for screen widths greater than 992px
+   */
+  lgSrc: PropTypes.string,
+  /**
+   * The src attribute used for screen widths greater than 1200px
+   */
+  xlSrc: PropTypes.string,
+  /**
+   * The src attribute used for browsers that don't support responsive images (InternetExplorer)
+   */
+  fallbackSrc: PropTypes.string.isRequired,
+  /**
+   * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
+   */
+  alt: PropTypes.string.isRequired,
+  /**
+   * Loading strategy.
+   * @default 'eager'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+   */
+  loading: PropTypes.oneOf(['eager', 'lazy'])
+}
+
+export default ResponsiveImage

package/src/ResponsiveImage/index.js

@@ -0,0 +1,3 @@
+import ResponsiveImage from './ResponsiveImage'
+
+export default ResponsiveImage