@telus-uds/components-web 1.2.0 → 1.4.0

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>