@telus-uds/components-web 1.2.0 → 1.4.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/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

package/src/OrderedList/OrderedList.jsx

@@ -0,0 +1,61 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const StyledOrderedListBase = styled(OrderedListBase)(({ start }) => ({
+  // 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 = forwardRef(({ children, start, variant, ...rest }, ref) => {
+  // Pass any variants "OrderedList" receives down to the individual list items.
+  const childrenWithParentVariants = variant
+    ? children.map((child) => {
+        const existingChildVariants = child.props?.variant ?? {}
+        return {
+          ...child,
+          props: {
+            ...child.props,
+            variant: {
+              ...existingChildVariants,
+              ...variant
+            }
+          }
+        }
+      })
+    : children
+  return (
+    <StyledOrderedListBase {...selectProps(rest)} ref={ref} start={start}>
+      {childrenWithParentVariants}
+    </StyledOrderedListBase>
+  )
+})
+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/src/OrderedList/OrderedListBase.jsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import ItemBase from './ItemBase'
+
+const StyledList = styled.ol({
+  display: 'flex',
+  flexDirection: 'column',
+  listStylePosition: 'inside',
+  margin: 0,
+  padding: 0
+})
+
+/**
+ * Semantic ordered list.
+ */
+const OrderedListBase = forwardRef(({ children, start, ...rest }, ref) => (
+  <StyledList {...rest} ref={ref} start={start}>
+    {children}
+  </StyledList>
+))
+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/src/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/src/OrderedList/index.js

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

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