@telus-uds/components-web 2.44.0 → 3.0.0

package/lib-module/WaffleGrid/WaffleGrid.js

@@ -1,157 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Link, responsiveProps, selectSystemProps, useResponsiveProp, useThemeTokens, withLinkRouter, useViewport, Typography, getTokensPropType } from '@telus-uds/components-base';
-import OrderedListBase from '../OrderedList/OrderedListBase';
-import ItemBase from '../OrderedList/ItemBase';
-import Image from '../Image';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const row = (rowSize, rowBorderWidth) => ({
-  flexBasis: `calc(100% / ${rowSize})`,
-  [`:not(:nth-of-type(${rowSize}n + 1))`]: {
-    borderLeftWidth: `${rowBorderWidth}px`
-  },
-  [`:nth-of-type(n+${rowSize + 1})`]: {
-    borderTopWidth: `${rowBorderWidth}px`
-  }
-});
-const Container = /*#__PURE__*/styled(OrderedListBase).withConfig({
-  displayName: "WaffleGrid__Container",
-  componentId: "components-web__sc-ec8g0a-0"
-})({
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
-  justifyContent: 'flex-start'
-});
-const Item = /*#__PURE__*/styled(ItemBase).withConfig({
-  displayName: "WaffleGrid__Item",
-  componentId: "components-web__sc-ec8g0a-1"
-})(_ref => {
-  let {
-    rowSize,
-    itemPadding,
-    itemBorderColor,
-    rowBorderWidth
-  } = _ref;
-  return {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexGrow: 1,
-    flexShrink: 1,
-    padding: `${itemPadding}px`,
-    boxSizing: 'border-box',
-    borderStyle: 'solid',
-    borderColor: itemBorderColor,
-    borderWidth: 0,
-    '& > a': {
-      alignSelf: 'center'
-    },
-    ...row(rowSize, rowBorderWidth)
-  };
-});
-const Center = /*#__PURE__*/styled('div').withConfig({
-  displayName: "WaffleGrid__Center",
-  componentId: "components-web__sc-ec8g0a-2"
-})({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  textAlign: 'center'
-});
-
-/**
- * The WaffleGrid is used to show items in a waffle like manner with borders surrounding the element
- */
-const WaffleGrid = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    items,
-    rowSize = null,
-    LinkRouter,
-    tokens,
-    variant,
-    linkRouterProps,
-    ...rest
-  } = _ref2;
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('WaffleGrid', tokens, variant, {
-    viewport
-  });
-  const currentRowSize = useResponsiveProp(rowSize);
-  return /*#__PURE__*/_jsx(Container, {
-    ref: ref,
-    ...selectProps(rest),
-    children: items.map(child => /*#__PURE__*/_createElement(Item, {
-      ...themeTokens,
-      key: child.href,
-      rowSize: rowSize ? currentRowSize : themeTokens.rowSize
-    }, /*#__PURE__*/_jsx(Link, {
-      href: child.href,
-      LinkRouter: child.LinkRouter || LinkRouter,
-      linkRouterProps: {
-        ...linkRouterProps,
-        ...child.linkRouterProps
-      },
-      children: /*#__PURE__*/_jsxs(Center, {
-        children: [typeof child.image === 'string' ?
-        /*#__PURE__*/
-        // Assuming that string passed is the image URL
-        _jsx(Image, {
-          src: child.image,
-          alt: child.imageAltText,
-          width: 96
-        }) :
-        // Otherwise it must be an arbitrary content, which we just display by itself
-        child.image, /*#__PURE__*/_jsx(Typography, {
-          variant: {
-            weight: 'semibold'
-          },
-          children: child.text
-        })]
-      })
-    })))
-  });
-});
-WaffleGrid.displayName = 'WaffleGrid';
-WaffleGrid.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * The image and the link to display. `items` should be an array of objects with the following keys:
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    /**
-     * The src attribute for the HTML img element or custom JSX content to render instead
-     */
-    image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    /**
-     * The alt attribute for the HTML img element (note that this is ignored if a custom
-     * JSX content is used instead of an image URL)
-     */
-    imageAltText: PropTypes.string,
-    /**
-     * The text displayed under the image
-     */
-    text: PropTypes.string,
-    /**
-     * Target URL
-     */
-    href: PropTypes.string,
-    ...withLinkRouter.propTypes
-  })).isRequired,
-  /**
-   * Sets the tokens for WaffleGrid element.
-   */
-  tokens: getTokensPropType('WaffleGrid'),
-  /**
-   * Row size, optionally depending on the viewport
-   */
-  rowSize: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
-  ...withLinkRouter.propTypes
-};
-export default WaffleGrid;

package/lib-module/WaffleGrid/index.js

@@ -1,2 +0,0 @@
-import WaffleGrid from './WaffleGrid';
-export default WaffleGrid;

package/lib-module/WebVideo/WebVideo.js

@@ -1,191 +0,0 @@
-import { selectSystemProps } from '@telus-uds/components-base';
-import PropTypes from 'prop-types';
-import React from 'react';
-import YouTube from 'react-youtube';
-import styled from 'styled-components';
-import VideoSplash from '../shared/VideoSplash/VideoSplash';
-import { htmlAttrs } from '../utils';
-import { triggerInProgressVideoIntervals, YoutubePlayerState } from './utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledPlayerContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "WebVideo__StyledPlayerContainer",
-  componentId: "components-web__sc-327a6k-0"
-})({
-  width: '100%',
-  minWidth: 288,
-  outline: 'none'
-});
-const StyledYoutubePlayer = /*#__PURE__*/styled(YouTube).withConfig({
-  displayName: "WebVideo__StyledYoutubePlayer",
-  componentId: "components-web__sc-327a6k-1"
-})({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0
-});
-const aspectRatios = {
-  '16:9': {
-    paddingTop: '56.25%'
-  },
-  '4:3': {
-    paddingTop: '75%'
-  },
-  '1:1': {
-    paddingTop: '100%'
-  }
-};
-const AspectLimiter = /*#__PURE__*/styled.div.withConfig({
-  displayName: "WebVideo__AspectLimiter",
-  componentId: "components-web__sc-327a6k-2"
-})(props => ({
-  ...aspectRatios[props.aspectRatio],
-  position: 'relative'
-}));
-const WebVideo = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    videoId,
-    aspectRatio = '16:9',
-    posterSrc,
-    defaultVolume = 1,
-    beginMuted = false,
-    videoLength,
-    copy,
-    onPlay = () => {},
-    onPause = () => {},
-    onEnd = () => {},
-    onProgress = () => {},
-    onStart = () => {},
-    ...rest
-  } = _ref;
-  const [started, setStarted] = React.useState(false);
-  const videoStateData = React.useRef({
-    requestAnimationIds: [],
-    state: YoutubePlayerState.UNSTARTED
-  });
-  const playerRef = React.useRef(null);
-  const onPlayCallback = event => {
-    onPlay(event, videoStateData.current.state === YoutubePlayerState.PAUSED);
-    videoStateData.current.state = YoutubePlayerState.PLAYING;
-    if (onProgress) {
-      videoStateData.current.requestAnimationIds = triggerInProgressVideoIntervals(onProgress, playerRef, event);
-    }
-  };
-  const initializeYoutubePlayer = event => {
-    onStart();
-    playerRef.current = event.target;
-    if (beginMuted) {
-      event.target.mute();
-    }
-    event.target.setVolume(defaultVolume);
-    event.target.playVideo(); // This plays the video after passing the splash screen on mobile.
-  };
-
-  const onEndVideoCallback = event => {
-    onEnd(event);
-    videoStateData.current.requestAnimationIds.forEach(id => cancelAnimationFrame(id));
-    videoStateData.current.requestAnimationIds = [];
-    videoStateData.current.state = YoutubePlayerState.ENDED;
-    if (onProgress) {
-      onProgress(event, 100);
-    }
-  };
-  const onPauseVideoCallback = event => {
-    videoStateData.current.requestAnimationIds.forEach(id => cancelAnimationFrame(id));
-    onPause(event);
-    videoStateData.current.state = YoutubePlayerState.PAUSED;
-    videoStateData.current.requestAnimationIds = [];
-  };
-  return /*#__PURE__*/_jsx(StyledPlayerContainer, {
-    ref: ref,
-    "data-testid": "web-video-container",
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsx(AspectLimiter, {
-      aspectRatio: aspectRatio,
-      children: started ? /*#__PURE__*/_jsx(StyledYoutubePlayer, {
-        videoId: videoId,
-        opts: {
-          width: '100%',
-          height: '100%',
-          playerVars: {
-            autoplay: 1,
-            modestbranding: 1,
-            playsinline: 1,
-            rel: 0
-          }
-        },
-        onReady: initializeYoutubePlayer,
-        onPlay: onPlayCallback,
-        onPause: onPauseVideoCallback,
-        onEnd: onEndVideoCallback
-      }) : /*#__PURE__*/_jsx(VideoSplash, {
-        poster: posterSrc || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
-        videoLength: videoLength,
-        copy: copy,
-        onClick: () => {
-          setStarted(true);
-        }
-      })
-    })
-  });
-});
-WebVideo.displayName = 'WebVideo';
-export const VideoProps = {
-  ...selectedSystemPropTypes,
-  /**
-   * The video's ID, typically available via the video's URL.
-   */
-  videoId: PropTypes.string.isRequired,
-  /**
-   * The aspect ratio of the player.
-   */
-  aspectRatio: PropTypes.oneOf(['16:9', '4:3', '1:1']),
-  /**
-   * A path of the image that will be displayed on the video's splash screen. If this is undefined, it will pull an image from the defined web video if available.
-   */
-  posterSrc: PropTypes.string,
-  /**
-   * The video's default volume, defined from 1 to 100. Please use the `beginMuted` prop to have the video start silenced.
-   */
-  defaultVolume: PropTypes.number,
-  /**
-   * Defines if the video should start muted.
-   */
-  beginMuted: PropTypes.bool,
-  /**
-   * The video's length, which will be displayed on the splash screen. This is defined in seconds.
-   */
-  videoLength: PropTypes.number.isRequired,
-  /**
-   * The splash screen UI's language as an ISO language code. It currently supports English and French.
-   */
-  copy: PropTypes.oneOf(['en', 'fr']),
-  /**
-   * A function to be run when the play button is pressed on the video splash screen and the video is ready to play.
-   */
-  onStart: PropTypes.func,
-  /**
-   * A function to be run when the video is played.
-   */
-  onPlay: PropTypes.func,
-  /**
-   * A function to be run when the video is paused.
-   */
-  onPause: PropTypes.func,
-  /**
-   * A function to be run when the video ends.
-   */
-  onEnd: PropTypes.func,
-  /**
-   * A function to be run when the video resumes.
-   */
-  onResume: PropTypes.func,
-  /**
-   * A function to be run when the video progresses. This function will be run at 10%, 25%, 50%, 75% and 100%.
-   */
-  onProgress: PropTypes.func
-};
-WebVideo.propTypes = VideoProps;
-export default WebVideo;

package/lib-module/WebVideo/index.js

@@ -1,2 +0,0 @@
-import WebVideo from './WebVideo';
-export default WebVideo;

package/lib-module/WebVideo/utils/index.js

@@ -1,50 +0,0 @@
-/**
- * Fires analytics events for inProgress analytics
- * @param {current progress} progress
- * @param {callback to run on defined milestones} onProgress
- * @param {YouTube Video Event} event
- */
-const fireVideoProgressEvents = (progress, onProgress, event) => {
-  const validProgressValues = [10, 25, 50, 75];
-  if (validProgressValues.includes(progress)) {
-    onProgress(event, progress);
-  }
-};
-export const YoutubePlayerState = {
-  UNSTARTED: -1,
-  ENDED: 0,
-  PLAYING: 1,
-  PAUSED: 2,
-  BUFFERING: 3,
-  CUED: 5
-};
-const PERCENTAGE_MULTIPLIER = 100;
-/**
- * Run an interval to check the progress of the video and fire events at 10%, 25%, 50% and 75%
- * @param {callback to run on defined milestones} onProgress
- * @param {player reference} playerRef
- * @param {YouTube video event} event
- */
-export const triggerInProgressVideoIntervals = (onProgress, playerRef, event) => {
-  const duration = playerRef.current.getDuration();
-  let lastProgress = null;
-  const requestAnimationFrameIds = [];
-  const frame = () => {
-    const currentTime = playerRef.current.getCurrentTime();
-    const progress = Math.round(currentTime / duration * PERCENTAGE_MULTIPLIER);
-    if (progress !== lastProgress) {
-      fireVideoProgressEvents(progress, onProgress, event);
-      lastProgress = progress;
-    }
-    if (currentTime < duration) {
-      requestAnimationFrameIds.push(requestAnimationFrame(frame));
-    }
-  };
-
-  // Cancel any previous animation frames
-  requestAnimationFrameIds.forEach(id => cancelAnimationFrame(id));
-
-  // Start a new animation frame
-  requestAnimationFrameIds.push(requestAnimationFrame(frame));
-  return requestAnimationFrameIds;
-};

package/lib-module/baseExports.js

@@ -1,19 +0,0 @@
-/**
- * The following are re-exported unchanged from components-base.
- */
-export {
-/**
- * Most base components should be re-exported as-is.
- */
-ActionCard, A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, CardGroup, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, DownloadApp, ExpandCollapse, Feedback, FlexGrid, FileUpload, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Status, Tabs, TabBar, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
-/*
- * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
- * Re-export only those utilities with a stable API and known use cases within apps / pages.
- */
-// Enable access to the viewports system for app-specific responsive layouts and features
-useResponsiveProp, useViewport,
-// TODO reenable ViewportContext once published from base  // enable localised viewport overrides e.g. in tests, narrow columns, etc
-useCarousel, useSetTheme } from '@telus-uds/components-base';
-
-// TODO: Added `WebPortal` alias for backwards compatibility with `Portal` from `@telus-uds/components-base`. Remove in next major version.
-export { Portal as WebPortal } from '@telus-uds/components-base';

package/lib-module/index.js

@@ -1,40 +0,0 @@
-'use client';
-
-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 Countdown } from './Countdown';
-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 { default as QuantitySelector } from './QuantitySelector';
-export { default as IconButton } from './IconButton';
-export { default as Image, DefaultImage } from './Image';
-export { transformGradient } from './utils';
-export { default as Breadcrumbs } from './Breadcrumbs';
-export { default as BlockQuote } from './BlockQuote';
-export { default as OptimizeImage } from './OptimizeImage';
-export { default as Testimonial } from './Testimonial';
-export { default as Toast } from './Toast';
-export { default as Table } from './Table';
-export { default as WebVideo } from './WebVideo';
-export { default as WaffleGrid } from './WaffleGrid';
-export { default as Spinner } from './Spinner';
-export { default as VideoPicker } from './VideoPicker';
-export { default as Video } from './Video';
-export { default as StoryCard } from './StoryCard';
-export { default as Disclaimer } from './Disclaimer';
-export { default as Card } from './Card';
-export { default as List } from './List';
-export { default as TermsAndConditions } from './TermsAndConditions';
-export { default as NavigationBar } from './NavigationBar';
-export { default as Progress } from './Progress';
-export { default as SkeletonProvider } from './SkeletonProvider';
-export { ssrStyles } from './utils';
-export * from './baseExports';

package/lib-module/server.js

@@ -1,5 +0,0 @@
-import ServerThemedImage from './Image/server';
-
-// Export themed components
-/* eslint-disable import/prefer-default-export */
-export { ServerThemedImage as Image };

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-const ConditionalWrapper = _ref => {
-  let {
-    children,
-    condition,
-    WrapperComponent,
-    wrapperProps
-  } = _ref;
-  return condition ? /*#__PURE__*/_jsx(WrapperComponent, {
-    ...wrapperProps,
-    children: children
-  }) : children;
-};
-ConditionalWrapper.propTypes = {
-  children: PropTypes.node,
-  condition: PropTypes.bool,
-  WrapperComponent: PropTypes.elementType,
-  wrapperProps: PropTypes.object
-};
-export default ConditionalWrapper;

package/lib-module/shared/ConditionalWrapper/index.js

@@ -1,2 +0,0 @@
-import ConditionalWrapper from './ConditionalWrapper';
-export default ConditionalWrapper;

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

@@ -1,101 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import ResponsiveImage from '../../ResponsiveImage';
-import { jsx as _jsx } from "react/jsx-runtime";
-const selectFullBleedContentProps = _ref => {
-  let {
-    alt,
-    height,
-    loading,
-    src,
-    width,
-    fallbackSrc = src,
-    lgSrc = src,
-    mdSrc = src,
-    smSrc = src,
-    xlSrc = src,
-    xsSrc = src
-  } = _ref;
-  return {
-    alt,
-    height,
-    loading,
-    src,
-    width,
-    fallbackSrc,
-    lgSrc,
-    mdSrc,
-    smSrc,
-    xlSrc,
-    xsSrc
-  };
-};
-const FullBleedContentContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "FullBleedContent__FullBleedContentContainer",
-  componentId: "components-web__sc-1130ea5-0"
-})(_ref2 => {
-  let {
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderTopLeftRadius,
-    borderTopRightRadius
-  } = _ref2;
-  return {
-    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 = _ref3 => {
-  let {
-    borderRadius,
-    content,
-    ...rest
-  } = _ref3;
-  return /*#__PURE__*/_jsx(FullBleedContentContainer, {
-    ...borderRadius,
-    children: content ?? /*#__PURE__*/_jsx(ResponsiveImage, {
-      ...selectFullBleedContentProps(rest)
-    })
-  });
-};
-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/lib-module/shared/FullBleedContent/getFullBleedBorderRadius.js

@@ -1,55 +0,0 @@
-/**
- * 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 = function (borderRadius, position) {
-  let hasFooter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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/lib-module/shared/FullBleedContent/index.js

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