@telus-uds/components-web 1.3.0 → 1.5.0

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,6 +1,16 @@
 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 Paragraph } from './Paragraph'
+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 }

package/src/utils/logger.js

@@ -0,0 +1,20 @@
+export const deprecate = (componentName, message) => {
+  if (process.env.NODE_ENV === 'production') {
+    return
+  }
+
+  console.warn(`[Allium] [Deprecate] ${componentName}: ${message}`) // eslint-disable-line no-console
+}
+
+export const warn = (componentName, message) => {
+  if (process.env.NODE_ENV === 'production') {
+    return
+  }
+
+  console.warn(`[Allium] ${componentName}: ${message}`) // eslint-disable-line no-console
+}
+
+export default {
+  deprecate,
+  warn
+}

package/src/utils/media.js

@@ -0,0 +1,40 @@
+import { viewports } from '@telus-uds/system-constants'
+
+export default function media() {
+  return {
+    query: {},
+    from(breakpoint) {
+      if (breakpoint !== viewports.xs) {
+        this.query.minWidth = breakpoint
+      }
+      return this
+    },
+    until(breakpoint) {
+      this.query.maxWidth = breakpoint
+      return this
+    },
+    and(custom) {
+      this.query.and = custom
+      return this
+    },
+    css(style) {
+      const { minWidth, maxWidth, and } = this.query
+
+      const min = minWidth ? `(min-width: ${viewports.map.get(minWidth)}px)` : undefined
+      const max = maxWidth ? `(max-width: ${viewports.map.get(maxWidth) - 1}px)` : undefined
+
+      if (typeof min !== 'undefined' || typeof max !== 'undefined' || typeof and !== 'undefined') {
+        const mediaQuery = `@media ${[min, max, and].filter((a) => a).join(' and ')}`
+        this.query = {}
+
+        return {
+          [mediaQuery]: {
+            ...(typeof style === 'function' ? style() : style)
+          }
+        }
+      }
+
+      return typeof style === 'function' ? style() : style
+    }
+  }
+}

package/src/utils/renderStructuredContent.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { Link } from '@telus-uds/components-base'
+
+/**
+ * Takes a string content and marks up all the links in it by wrapping them
+ * in `Link` component.
+ */
+const generateLinks = (content) => {
+  const linkRegex = /<\s*a([^>]*)>(.*?)<\s*\/\s*a>/g
+  const attributeRegex = /(\w+)\s*=\s*((["'])(.*?)\3|(?=\s|\/>))/g
+
+  const parts = content.split(linkRegex)
+  if (parts.length === 1) {
+    return parts
+  }
+
+  // Start with first anchor text, attributes will be in the previous part
+  for (let i = 2; i < parts.length; i += 3) {
+    const o = {}
+    // Get attributes from previous part
+    const attributes = parts[i - 1].trim()
+
+    // Create object from attributes
+    const matchedAttributes = attributes.match(attributeRegex)
+    if (matchedAttributes) {
+      matchedAttributes.forEach((attribute) => {
+        const split = attribute.split('=')
+        o[split[0]] = split[1].substr(1, split[1].length - 2)
+      })
+    }
+    // Remove anchor attributes from parts
+    parts[i - 1] = undefined
+    // Replace anchor text with Link in parts
+    parts[i] = (
+      <Link {...o} key={i}>
+        {parts[i]}
+      </Link>
+    )
+  }
+
+  return parts
+}
+
+/**
+ * Takes an array of strings and in each element replaces the breaks with `<br>` tags.
+ */
+const generateBreaks = (parts) => {
+  const breakRegex = /<br\s?\/*>/g
+
+  const partsWithBreaks = parts
+
+  for (let i = 0; i < partsWithBreaks.length; i += 1) {
+    if (typeof partsWithBreaks[i] === 'string' && partsWithBreaks[i].search(breakRegex) !== -1) {
+      const toSplit = partsWithBreaks[i].split(breakRegex)
+      for (let x = 1; x < toSplit.length; x += 2) {
+        toSplit.splice(x, 0, <br key={`break-${i}-${x}`} />)
+      }
+      partsWithBreaks[i] = toSplit
+    }
+  }
+
+  return partsWithBreaks
+}
+
+const renderStructuredContent = (content) => {
+  if (typeof content !== 'string') {
+    return content
+  }
+
+  return generateBreaks(generateLinks(content))
+}
+
+export default renderStructuredContent

package/src/utils/useTypographyTheme.js

@@ -0,0 +1,14 @@
+import { applyTextStyles, useTheme, useThemeTokens, useViewport } from '@telus-uds/components-base'
+
+const useTypographyTheme = (variant, tokens) => {
+  const viewport = useViewport()
+  const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
+  const { themeOptions } = useTheme()
+  const { fontSize, lineHeight, ...rnStyles } = applyTextStyles({
+    ...themeTokens,
+    themeOptions
+  })
+  return { ...rnStyles, fontSize: `${fontSize}px`, lineHeight: `${lineHeight}px` }
+}
+
+export default useTypographyTheme

package/types/Callout.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentType, ElementType, ReactNode } from 'react'
+import type { HTMLAttrs, Variant } from './common'
+
+export interface CalloutProps extends HTMLAttrs {
+  children: ReactNode
+  variant?: Variant
+  icon?: ElementType
+  verticalAlign?: 'top' | 'middle' | 'bottom'
+}
+
+declare const Callout: ComponentType<CalloutProps>
+
+export default Callout

package/types/DatePicker.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from 'react'
+import type { HTMLAttrs } from './common'
+
+export interface DatePickerProps extends HTMLAttrs {
+  id: string
+  copy?: 'en' | 'fr'
+  date?: any
+  feedback?: string
+  onDateChange?: (date: any) => void
+  isDayDisabled?: (date: any) => boolean
+  label?: string
+  inline?: boolean
+  hint?: string
+  hintPosition?: 'inline' | 'below'
+  tooltip?: string
+  validation?: 'error' | 'success'
+}
+
+declare const DatePicker: ComponentType<DatePickerProps>
+
+export default DatePicker

package/types/Footnote.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { HTMLAttrs, Variant } from './common'
+
+type copyShape = {
+  close: string
+  heading: string
+}
+
+export interface FootnoteProps extends HTMLAttrs {
+  children: ReactNode
+  variant?: Variant
+  copy?: 'en' | 'fr' | copyShape
+  content?: string
+  isOpen?: boolean
+  number?: number
+  onClose: boolean
+}
+
+declare const Footnote: ComponentType<FootnoteProps>
+
+export default Footnote

package/types/FootnoteLink.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { HTMLAttrs, Variant } from './common'
+
+type copyShape = {
+  close: string
+  heading: string
+}
+
+export interface FootnoteLinkProps extends HTMLAttrs {
+  children: ReactNode
+  number: number | string | [number] | [string]
+  variant?: Variant
+  copy?: 'en' | 'fr' | copyShape
+  fontSize?: number | string
+  onClick: MouseEvent
+}
+
+declare const FootnoteLink: ComponentType<FootnoteLinkProps>
+
+export default FootnoteLink

package/types/PriceLockup.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { HTMLAttrs, Variant } from './common'
+
+export interface PriceLockupProps extends HTMLAttrs {
+  children: ReactNode
+  variant?: Variant
+  size?: 'small' | 'medium' | 'large'
+  signDirection?: 'left' | 'right'
+  footnoteLinks?: [number] | [string]
+  topText?: string
+  price: number
+  currencySymbol?: string
+  rateText?: string
+  bottomText?: string
+  onClickFootnote?: MouseEvent
+  strikeThrough?: boolean
+  a11yText?: string
+}
+
+declare const PriceLockup: ComponentType<PriceLockupProps>
+
+export default PriceLockup

package/types/common.d.ts

@@ -0,0 +1,14 @@
+import type { AriaRole, AriaAttributes } from 'react'
+
+export interface HTMLAttrs extends AriaAttributes {
+  dataSet?: Record<string, any>
+  id?: string
+  loading?: 'eager' | 'lazy'
+  role?: AriaRole
+  src?: string
+  tabIndex?: string | number
+  testID?: string
+  title?: string
+}
+
+export type Variant = Record<string, string | number | boolean>