@telus-uds/components-web 2.43.0 → 3.0.0

package/lib-module/shared/FullBleedContent/useFullBleedContentProps.js

@@ -1,55 +0,0 @@
-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/lib-module/shared/VideoSplash/SplashButton/SplashButton.js

@@ -1,84 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { useThemeTokens } from '@telus-uds/components-base';
-import { getAriaLabel, getTimestamp } from '../helpers';
-import { jsx as _jsx } from "react/jsx-runtime";
-const ButtonContainer = /*#__PURE__*/styled.button.withConfig({
-  displayName: "SplashButton__ButtonContainer",
-  componentId: "components-web__sc-1oe22fk-0"
-})({
-  background: 'none',
-  border: 0,
-  padding: 0,
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  cursor: 'pointer'
-});
-const ButtonContent = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SplashButton__ButtonContent",
-  componentId: "components-web__sc-1oe22fk-1"
-})({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: 64,
-  height: 64,
-  background: _ref => {
-    let {
-      buttonContentBackground
-    } = _ref;
-    return buttonContentBackground ?? 'none';
-  },
-  borderRadius: '100%',
-  transition: 'background 0.2s ease-in-out',
-  [`${ButtonContainer}:hover &`]: {
-    background: _ref2 => {
-      let {
-        buttonContentChildrenBackground
-      } = _ref2;
-      return buttonContentChildrenBackground;
-    }
-  }
-});
-const SplashButton = _ref3 => {
-  let {
-    copy,
-    tokens,
-    variant,
-    videoLength
-  } = _ref3;
-  const {
-    buttonContentChildrenBackground
-  } = useThemeTokens('SplashButton', tokens, variant, {
-    hover: true
-  });
-  const {
-    playIcon: PlayIcon,
-    playIconColor,
-    ...themeTokens
-  } = useThemeTokens('SplashButton', tokens, variant);
-  const ariaLabel = getAriaLabel(getTimestamp(videoLength), copy);
-  return /*#__PURE__*/_jsx(ButtonContainer, {
-    "aria-label": ariaLabel,
-    children: /*#__PURE__*/_jsx(ButtonContent, {
-      ...themeTokens,
-      buttonContentChildrenBackground: buttonContentChildrenBackground,
-      children: /*#__PURE__*/_jsx(PlayIcon, {
-        size: 27,
-        color: playIconColor
-      })
-    })
-  });
-};
-SplashButton.propTypes = {
-  videoLength: PropTypes.number,
-  tokens: PropTypes.object,
-  variant: PropTypes.object,
-  copy: PropTypes.oneOf(['en', 'fr'])
-};
-export default SplashButton;

package/lib-module/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

@@ -1,223 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Typography, useThemeTokens } from '@telus-uds/components-base';
-import { getAriaLabel, getTimestamp } from '../helpers';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const ButtonContainer = /*#__PURE__*/styled.button.withConfig({
-  displayName: "SplashButtonWithDetails__ButtonContainer",
-  componentId: "components-web__sc-1edwy9o-0"
-})({
-  background: 'none',
-  border: 0,
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  padding: 0,
-  cursor: 'pointer'
-});
-const ButtonContent = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SplashButtonWithDetails__ButtonContent",
-  componentId: "components-web__sc-1edwy9o-1"
-})({
-  background: _ref => {
-    let {
-      buttonBackground
-    } = _ref;
-    return buttonBackground;
-  },
-  border: _ref2 => {
-    let {
-      buttonBorderColor
-    } = _ref2;
-    return `1px solid ${buttonBorderColor}`;
-  },
-  borderRadius: _ref3 => {
-    let {
-      buttonRadius
-    } = _ref3;
-    return `${buttonRadius}px`;
-  },
-  position: 'absolute',
-  left: _ref4 => {
-    let {
-      buttonLeftPosition
-    } = _ref4;
-    return `${buttonLeftPosition}px`;
-  },
-  bottom: _ref5 => {
-    let {
-      buttonBottomPosition
-    } = _ref5;
-    return `${buttonBottomPosition}px`;
-  },
-  boxSizing: 'border-box',
-  display: 'flex',
-  alignItems: 'center',
-  minHeight: _ref6 => {
-    let {
-      buttonMinHeight
-    } = _ref6;
-    return `${buttonMinHeight}px`;
-  },
-  paddingRight: _ref7 => {
-    let {
-      buttonPaddingLeft
-    } = _ref7;
-    return `${buttonPaddingLeft}px`;
-  },
-  paddingLeft: _ref8 => {
-    let {
-      buttonPaddingRight
-    } = _ref8;
-    return `${buttonPaddingRight}px`;
-  },
-  transition: 'background 0.2s ease-in-out',
-  [`${ButtonContainer}:hover &`]: {
-    background: _ref9 => {
-      let {
-        buttonContentChildrenBackground
-      } = _ref9;
-      return buttonContentChildrenBackground;
-    }
-  }
-});
-const PlayIconContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SplashButtonWithDetails__PlayIconContainer",
-  componentId: "components-web__sc-1edwy9o-2"
-})({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: 32,
-  height: 32,
-  background: _ref10 => {
-    let {
-      playIconContainerBackground
-    } = _ref10;
-    return playIconContainerBackground ?? 'none';
-  },
-  borderRadius: '100%',
-  transition: 'background 0.2s ease-in-out'
-});
-const DetailsContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SplashButtonWithDetails__DetailsContainer",
-  componentId: "components-web__sc-1edwy9o-3"
-})({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  paddingLeft: _ref11 => {
-    let {
-      detailsContainerPadding
-    } = _ref11;
-    return `${detailsContainerPadding}px`;
-  }
-});
-const selectPlayIconContainerTokens = _ref12 => {
-  let {
-    playIconContainerBackground
-  } = _ref12;
-  return {
-    playIconContainerBackground
-  };
-};
-const selectDetailsContainerTokens = _ref13 => {
-  let {
-    detailsContainerPadding
-  } = _ref13;
-  return {
-    detailsContainerPadding
-  };
-};
-const selectButtonContentTokens = _ref14 => {
-  let {
-    buttonBackground,
-    buttonBorderColor,
-    buttonRadius,
-    buttonLeftPosition,
-    buttonBottomPosition,
-    buttonMinHeight,
-    buttonPaddingLeft,
-    buttonPaddingRight
-  } = _ref14;
-  return {
-    buttonBackground,
-    buttonBorderColor,
-    buttonRadius,
-    buttonLeftPosition,
-    buttonBottomPosition,
-    buttonMinHeight,
-    buttonPaddingLeft,
-    buttonPaddingRight
-  };
-};
-const getLabelTokens = _ref15 => {
-  let {
-    labelFontName: fontName,
-    labelFontWeight: fontWeight
-  } = _ref15;
-  return {
-    fontName,
-    fontWeight
-  };
-};
-const SplashButtonWithDetails = _ref16 => {
-  let {
-    label,
-    tokens,
-    variant,
-    copy,
-    videoLength
-  } = _ref16;
-  const {
-    buttonContentChildrenBackground
-  } = useThemeTokens('SplashButtonWithDetails', tokens, variant, {
-    hover: true
-  });
-  const {
-    playIcon: PlayIcon,
-    playIconColor,
-    ...themeTokens
-  } = useThemeTokens('SplashButtonWithDetails', tokens, variant);
-  const mappedVideoLength = getTimestamp(videoLength, copy);
-  const ariaLabel = getAriaLabel(mappedVideoLength, copy);
-  return /*#__PURE__*/_jsx(ButtonContainer, {
-    "aria-label": ariaLabel,
-    children: /*#__PURE__*/_jsxs(ButtonContent, {
-      ...selectButtonContentTokens(themeTokens),
-      buttonContentChildrenBackground: buttonContentChildrenBackground,
-      children: [/*#__PURE__*/_jsx(PlayIconContainer, {
-        ...selectPlayIconContainerTokens(themeTokens),
-        children: /*#__PURE__*/_jsx(PlayIcon, {
-          size: 13,
-          color: playIconColor
-        })
-      }), /*#__PURE__*/_jsxs(DetailsContainer, {
-        ...selectDetailsContainerTokens(themeTokens),
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: {
-            bold: true
-          },
-          tokens: getLabelTokens(themeTokens),
-          children: label
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: {
-            colour: 'secondary' /* TODO: this is not the same color as in designs */,
-            size: 'micro'
-          },
-          children: mappedVideoLength.timestamp
-        })]
-      })]
-    })
-  });
-};
-SplashButtonWithDetails.propTypes = {
-  label: PropTypes.string,
-  tokens: PropTypes.object,
-  variant: PropTypes.object,
-  videoLength: PropTypes.number,
-  copy: PropTypes.oneOf(['en', 'fr'])
-};
-export default SplashButtonWithDetails;

package/lib-module/shared/VideoSplash/VideoSplash.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { selectSystemProps, useViewport } from '@telus-uds/components-base';
-import { viewports } from '@telus-uds/system-constants';
-import SplashButton from './SplashButton/SplashButton';
-import SplashButtonWithDetails from './SplashButtonWithDetails/SplashButtonWithDetails';
-import videoText from '../../Video/videoText';
-import { htmlAttrs } from '../../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const SplashBackground = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoSplash__SplashBackground",
-  componentId: "components-web__sc-1ejxt6-0"
-})(_ref => {
-  let {
-    videoPoster
-  } = _ref;
-  return {
-    backgroundImage: `url(${videoPoster})`,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    position: 'absolute',
-    top: 0,
-    width: '100%',
-    height: '100%',
-    // fixes vertical alignment on IE 11
-    cursor: 'pointer'
-  };
-});
-const VideoSplash = _ref2 => {
-  let {
-    poster,
-    videoLength,
-    simpleMode,
-    copy = 'en',
-    onClick,
-    ...rest
-  } = _ref2;
-  const viewport = useViewport();
-  const showDetails = !simpleMode && viewport !== viewports.xs;
-  const label = videoText[copy].watch;
-  return /*#__PURE__*/_jsx(SplashBackground, {
-    ...selectProps(rest),
-    onClick: onClick,
-    videoPoster: poster,
-    children: showDetails ? /*#__PURE__*/_jsx(SplashButtonWithDetails, {
-      videoLength: videoLength,
-      copy: copy,
-      label: label
-    }) : /*#__PURE__*/_jsx(SplashButton, {
-      videoLength: videoLength,
-      copy: copy
-    })
-  });
-};
-VideoSplash.propTypes = {
-  ...selectedSystemPropTypes,
-  onClick: PropTypes.func,
-  poster: PropTypes.string,
-  videoLength: PropTypes.number.isRequired,
-  simpleMode: PropTypes.bool,
-  copy: PropTypes.oneOf(['en', 'fr'])
-};
-export default VideoSplash;

package/lib-module/shared/VideoSplash/helpers.js

@@ -1,23 +0,0 @@
-import videoText from '../../Video/videoText';
-export const getTimestamp = (videoLength, copy) => {
-  const minutes = Math.floor(videoLength / 60);
-  const seconds = Math.ceil(videoLength % 60);
-  const minutesText = minutes > 0 ? `${minutes}min ` : '';
-  const secondsText = `${seconds}${copy === 'fr' ? 's' : 'sec'}`;
-  const timestamp = `${minutesText}${secondsText}`;
-  return {
-    minutes,
-    seconds,
-    timestamp
-  };
-};
-export const getAriaLabel = (timestamp, copy) => {
-  const {
-    minutes,
-    seconds
-  } = timestamp;
-  const text = videoText[copy];
-  const minutesText = `${minutes} ${minutes !== 1 ? text.minutes : text.minute}`;
-  const secondsText = `${seconds} ${seconds !== 1 ? text.seconds : text.second}`;
-  return text.ariaLabel.replace('{minutes}', minutesText).replace('{seconds}', secondsText);
-};

package/lib-module/utils/index.js

@@ -1,10 +0,0 @@
-import { htmlAttrs } from '@telus-uds/components-base';
-import { warn, deprecate } from './logger';
-import { transformGradient } from './transforms';
-import useTypographyTheme from './useTypographyTheme';
-import media from './media';
-import ssrStyles from './ssr';
-import isElementFocusable from './isElementFocusable';
-import renderStructuredContent from './renderStructuredContent';
-import useOverlaidPosition from './useOverlaidPosition';
-export { deprecate, htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition };

package/lib-module/utils/isElementFocusable.js

@@ -1,8 +0,0 @@
-/**
- * Returns focusable elements inside of the Footnote
- */
-const isElementFocusable = element => {
-  const focusableElements = `a[href], button, textarea, input, select, form, label, audio, video, source, track, canvas, rect, polygon, iframe[data-src], [tabindex]:not([tabindex="-1"]), [contenteditable]`;
-  return element.matches(focusableElements) && !element.hasAttribute('disabled') && !element.matches('[tabindex="-1"]');
-};
-export default isElementFocusable;

package/lib-module/utils/logger.js

@@ -1,18 +0,0 @@
-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/lib-module/utils/media.js

@@ -1,39 +0,0 @@
-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/lib-module/utils/renderStructuredContent.js

@@ -1,66 +0,0 @@
-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.
- */
-import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-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] = /*#__PURE__*/_createElement(Link, {
-      ...o,
-      key: i
-    }, parts[i]);
-  }
-  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, /*#__PURE__*/_jsx("br", {}, `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/lib-module/utils/ssr.js

@@ -1,37 +0,0 @@
-import { ServerStyleSheet } from 'styled-components';
-import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base';
-/**
- * Returns object with `renderApp` and `getStyles` functions.
- * Weave these into your app's server-side render process:
- *
- * - Call `renderApp` first to do the actual server-side render
- * - After the render is complete, call `getStyles`
- * - Include the style tags returned by `getStyles` in the SSR <head>
- *
- * This wraps ssrStyles from @telus-uds/components-base and adds Styled Components support.
- *
- * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
- * @param {object} [options] -
- *  - `styleGetters`: optional array of additional style getter functions to call after render
- *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
- * @param {boolean} [options.styleGetters]
- * @param {(ReactElement) => ReactElement} [options.collectStyles]
- */
-const ssrStyles = function () {
-  let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Allium app';
-  let {
-    styleGetters = [],
-    collectStyles = renderedApp => renderedApp
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const sheet = new ServerStyleSheet();
-  const getStyledComponentsStyles = () => {
-    const styles = sheet.getStyleElement();
-    sheet.seal();
-    return styles;
-  };
-  return baseSsrStyles(appName, {
-    styleGetters: [getStyledComponentsStyles, ...styleGetters],
-    collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))
-  });
-};
-export default ssrStyles;

package/lib-module/utils/theming/get-theme-from-server.js

@@ -1,16 +0,0 @@
-const cachedTheme = {};
-const theme = process.env.UDS_THEME;
-async function importTheme(componentName) {
-  try {
-    cachedTheme[componentName] = await import(`@telus-uds/theme-${theme}/build/rn/${componentName}.js`);
-  } catch (_) {
-    throw new Error(`An error occurred while trying to import theme-${process.env.UDS_THEME}. Please check that the theme has been installed in your app or that you are not importing a server component inside a client component.`);
-  }
-}
-export default async function getTheme(componentName) {
-  if (cachedTheme[componentName]) {
-    return cachedTheme[componentName];
-  }
-  await importTheme(componentName);
-  return cachedTheme[componentName];
-}

package/lib-module/utils/theming/with-client-theme.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
-import { jsx as _jsx } from "react/jsx-runtime";
-const withClientTheme = Component => {
-  const UdsStyledComponent = _ref => {
-    let {
-      tokens: tokenOverrides,
-      variant,
-      ...props
-    } = _ref;
-    const theme = useThemeTokens(Component.displayName, tokenOverrides, variant);
-    return /*#__PURE__*/_jsx(Component, {
-      theme: theme,
-      ...props
-    });
-  };
-  UdsStyledComponent.propTypes = {
-    tokens: getTokensPropType(Component.displayName),
-    variant: PropTypes.string
-  };
-  return UdsStyledComponent;
-};
-export default withClientTheme;