@telus-uds/components-web 1.2.0 → 1.4.0

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

package/src/Ribbon/Ribbon.jsx

@@ -1,7 +1,6 @@
 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'
 

package/src/Span/Span.jsx

@@ -0,0 +1,66 @@
+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 StyledSpan = styled.span`${({ flex }) => (flex ? 'display: inline-flex' : '')}};`
+
+/**
+ * Text as an HTML ```<span>``` element.
+ *
+ * Span may be used in cases where an inline span or direct access to HTML attributes is required.
+ * In most cases, `Typography` should be used for text, or Paragraph for body text.
+ */
+const Span = ({ children, variant, tokens, testID, flex, ...rest }) => {
+  const style = useTypographyTheme(variant, tokens)
+  return (
+    <StyledSpan data-testid={testID} flex={flex} style={style} {...selectProps(rest)}>
+      {children}
+    </StyledSpan>
+  )
+}
+
+Span.propTypes = {
+  ...selectedSystemPropTypes,
+  children: PropTypes.node.isRequired,
+  testID: PropTypes.string,
+  /**
+   * Sets display to inline-flex so that children are laid out using the flex model.
+   * Use this if the span contains children that expect to be inside a flex container.
+   */
+  flex: PropTypes.bool,
+  /**
+   * Span takes the same tokens overrides as Typography
+   */
+  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+  /**
+   * Span can take any of Typography's theme variants
+   */
+  variant: PropTypes.exact({
+    bold: PropTypes.bool,
+    colour: PropTypes.oneOf(['secondary', 'tertiary']),
+    compact: PropTypes.bool,
+    inverse: PropTypes.bool,
+    size: PropTypes.oneOf([
+      'micro',
+      'small',
+      'large',
+      'eyebrow',
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'h5',
+      'h6',
+      'display1',
+      'display2'
+    ]),
+    weight: PropTypes.oneOf(['semibold', 'bold'])
+  })
+}
+
+export default Span

package/src/Span/index.js

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

package/src/index.js

@@ -1,5 +1,15 @@
 export { default as Badge } from './Badge'
+export { default as OrderedList } from './OrderedList'
+export { default as PreviewCard } from './PreviewCard'
+export { default as ResponsiveImage } from './ResponsiveImage'
 export { default as Ribbon } from './Ribbon'
+export { default as DatePicker } from './DatePicker'
+export { default as Span } from './Span'
+export { default as ExpandCollapseMini } from './ExpandCollapseMini'
+export { default as Callout } from './Callout'
+export { default as PriceLockup } from './PriceLockup'
+export { default as Footnote } from './Footnote'
 export { transformGradient } from './utils'
+export { default as Breadcrumbs } from './Breadcrumbs'
 
 export * from './baseExports'

package/src/shared/FullBleedContent/FullBleedContent.jsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+import ResponsiveImage from '../../ResponsiveImage'
+
+const selectFullBleedContentProps = ({
+  alt,
+  height,
+  loading,
+  src,
+  width,
+  fallbackSrc = src,
+  lgSrc = src,
+  mdSrc = src,
+  smSrc = src,
+  xlSrc = src,
+  xsSrc = src
+}) => ({
+  alt,
+  height,
+  loading,
+  src,
+  width,
+  fallbackSrc,
+  lgSrc,
+  mdSrc,
+  smSrc,
+  xlSrc,
+  xsSrc
+})
+
+const FullBleedContentContainer = styled.div(
+  ({
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius
+  }) => ({
+    overflow: 'hidden',
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius
+  })
+)
+
+/**
+ * Full bleed content component can accept either a single source,
+ * a number of sources corresponding to the `ResponsiveImage` component API,
+ * or a custom component.
+ */
+const FullBleedContent = ({ borderRadius, content, ...rest }) => (
+  <FullBleedContentContainer {...borderRadius}>
+    {content ?? <ResponsiveImage {...selectFullBleedContentProps(rest)} />}
+  </FullBleedContentContainer>
+)
+
+FullBleedContent.propTypes = {
+  /**
+   * Content border radius matching the edge values on the parent card.
+   */
+  borderRadius: PropTypes.shape({
+    borderBottomLeftRadius: PropTypes.number,
+    borderBottomRightRadius: PropTypes.number,
+    borderTopLeftRadius: PropTypes.number,
+    borderTopRightRadius: PropTypes.number
+  }),
+  /**
+   * Custom JSX to be used for rendering the content (defaults to `ResponsiveImage` receiving other props).
+   */
+  content: PropTypes.node,
+  /**
+   * Image source.
+   */
+  src: PropTypes.string,
+  /**
+   * Also accept props for `ResponsiveImage`...
+   */
+  ...ResponsiveImage.propTypes,
+  /**
+   * ...but make the required ones optional.
+   */
+  alt: PropTypes.string,
+  xsSrc: PropTypes.string,
+  smSrc: PropTypes.string,
+  fallbackSrc: PropTypes.string
+}
+
+export default FullBleedContent

package/src/shared/FullBleedContent/getFullBleedBorderRadius.js

@@ -0,0 +1,55 @@
+/**
+ * Gets the border radius values for an item of content that goes right up to
+ * the edges of its container, to the top, bottom, left or right of other content.
+ *
+ * Gives the full bleed item the same border radius as the container on the corners
+ * that are flush with the corners of the container.
+ *
+ * @param {number} borderRadius
+ * @param {'top'|'bottom'|'left'|'right'} position
+ * @param {boolean} hasFooter
+ * @returns
+ */
+const getFullBleedBorderRadius = (borderRadius, position, hasFooter = false) => {
+  const innerBorderRadius = {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0
+  }
+  if (position && position !== 'none') {
+    if (borderRadius) {
+      // Depending on the position of the image, we need to round some
+      // corners, but not the others
+      switch (position) {
+        case 'bottom':
+          if (!hasFooter) {
+            innerBorderRadius.borderBottomLeftRadius = borderRadius
+            innerBorderRadius.borderBottomRightRadius = borderRadius
+          }
+          break
+        case 'left':
+          if (!hasFooter) {
+            innerBorderRadius.borderBottomLeftRadius = borderRadius
+          }
+          innerBorderRadius.borderTopLeftRadius = borderRadius
+          break
+        case 'right':
+          if (!hasFooter) {
+            innerBorderRadius.borderBottomRightRadius = borderRadius
+          }
+          innerBorderRadius.borderTopRightRadius = borderRadius
+          break
+        case 'top':
+          innerBorderRadius.borderTopLeftRadius = borderRadius
+          innerBorderRadius.borderTopRightRadius = borderRadius
+          break
+        default:
+          break
+      }
+    }
+  }
+  return innerBorderRadius
+}
+
+export default getFullBleedBorderRadius

package/src/shared/FullBleedContent/index.js

@@ -0,0 +1,6 @@
+import FullBleedContent from './FullBleedContent'
+
+export default FullBleedContent
+
+export { default as getFullBleedBorderRadius } from './getFullBleedBorderRadius'
+export { default as useFullBleedContentProps } from './useFullBleedContentProps'

package/src/shared/FullBleedContent/useFullBleedContentProps.js

@@ -0,0 +1,63 @@
+import { useResponsiveProp } from '@telus-uds/components-base'
+
+const getContentStackDirection = (fullBleedContentPosition) => {
+  switch (fullBleedContentPosition) {
+    case 'left':
+      return 'row-reverse'
+    case 'right':
+      return 'row'
+    case 'top':
+      return 'column-reverse'
+    default:
+      return 'column'
+  }
+}
+
+const getContentStackAlign = (fullBleedContentAlign) => {
+  switch (fullBleedContentAlign) {
+    case 'center':
+      return 'center'
+
+    case 'end':
+    case 'flex-end':
+      return 'flex-end'
+
+    case 'start':
+    case 'flex-start':
+      return 'flex-start'
+
+    default:
+      return 'stretch'
+  }
+}
+
+/**
+ * Resolves a set of `FullBleedContent` props into the variables a container needs to
+ * correctly position a `FullBleedContent` component for the current viewport.
+ *
+ * @param {object} [fullBleedContent] - a set of valid proptypes for FullBleedContent
+ * @returns
+ */
+const useFullBleedContentProps = (fullBleedContent) => {
+  const {
+    align: fullBleedContentAlignProp,
+    position: fullBleedContentPositionProp,
+    ...fullBleedContentProps
+  } = fullBleedContent ?? {
+    position: 'none'
+  }
+  const fullBleedContentPosition = useResponsiveProp(fullBleedContentPositionProp, 'none')
+  const contentStackDirection = getContentStackDirection(fullBleedContentPosition)
+
+  const fullBleedContentAlign = useResponsiveProp(fullBleedContentAlignProp, 'stretch')
+  const contentStackAlign = getContentStackAlign(fullBleedContentAlign)
+
+  return {
+    contentStackAlign,
+    contentStackDirection,
+    fullBleedContentPosition,
+    fullBleedContentProps
+  }
+}
+
+export default useFullBleedContentProps

package/src/utils/index.js

@@ -1,4 +1,8 @@
 import { transformGradient } from './transforms'
+import useTypographyTheme from './useTypographyTheme'
 import htmlAttrs from './htmlAttrs'
+import { warn } from './logger'
+import media from './media'
+import renderStructuredContent from './renderStructuredContent'
 
-export { htmlAttrs, transformGradient }
+export { htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent }