@telus-uds/components-web 1.9.0 → 1.11.0

package/lib-module/VideoPicker/VideoPicker.js

@@ -0,0 +1,151 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { selectSystemProps, StackView, useThemeTokens, useViewport } from '@telus-uds/components-base';
+import styled, { css } from 'styled-components';
+import { VideoPropType } from './videoPropType';
+import VideoPickerThumbnail from './VideoPickerThumbnail';
+import VideoPickerPlayer from './VideoPickerPlayer';
+import VideoSlider from './VideoSlider';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+
+const framedContainerStyles = _ref => {
+  let {
+    framedContainerBackgroundColor,
+    framedContainerBorderWidth,
+    framedContainerBorderColor,
+    framedContainerBorderRadius,
+    framedMaxHeight
+  } = _ref;
+  return css(["background-color:", ";border:", "px solid ", ";border-radius:", "px;& > div{max-height:", "px;}"], framedContainerBackgroundColor, framedContainerBorderWidth, framedContainerBorderColor, framedContainerBorderRadius, framedMaxHeight);
+};
+
+const VideoPickerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPicker__VideoPickerContainer",
+  componentId: "components-web__sc-x6lxp0-0"
+})(["", ""], _ref2 => {
+  let {
+    isFramed,
+    ...tokens
+  } = _ref2;
+  return isFramed && framedContainerStyles(tokens);
+});
+
+const framedPlayerContainerStyles = _ref3 => {
+  let {
+    framedMaxHeight,
+    framedContainerPadding
+  } = _ref3;
+  return css(["width:66.67%;padding:", "px;max-height:", "px;flex-shrink:0;box-sizing:border-box;"], framedContainerPadding, framedMaxHeight);
+};
+
+const VideoPlayerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPicker__VideoPlayerContainer",
+  componentId: "components-web__sc-x6lxp0-1"
+})(["", " overflow:auto;"], _ref4 => {
+  let {
+    isFramed,
+    ...tokens
+  } = _ref4;
+  return isFramed && framedPlayerContainerStyles(tokens);
+});
+const framedVideoListContainerStyle = /*#__PURE__*/css(["max-height:", "px;overflow:auto;flex-direction:column;"], _ref5 => {
+  let {
+    framedMaxHeight
+  } = _ref5;
+  return framedMaxHeight;
+});
+const VideoListContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPicker__VideoListContainer",
+  componentId: "components-web__sc-x6lxp0-2"
+})(["display:flex;justify-content:flex-start;position:relative;flex-grow:1;flex-direction:column;", ""], props => props.isFramed && framedVideoListContainerStyle);
+
+const VideoPicker = _ref6 => {
+  var _videoList$;
+
+  let {
+    videoList = [],
+    selectedVideo = (_videoList$ = videoList[0]) === null || _videoList$ === void 0 ? void 0 : _videoList$.videoId,
+    frame,
+    ...rest
+  } = _ref6;
+  const viewport = useViewport();
+  const {
+    stackViewDividerColor,
+    ...themeTokens
+  } = useThemeTokens('VideoPicker');
+  const [currentVideoId, setCurrentVideoId] = useState(selectedVideo);
+  const videoPlayerRef = useRef(null);
+  const currentVideo = videoList.find(video => video.videoId === currentVideoId);
+  useEffect(() => {
+    // Update current video if parent changes which video id it passes down
+    setCurrentVideoId(selectedVideo);
+  }, [selectedVideo]); // `frame` variant should only work on larger screens
+
+  const isFramed = frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport);
+  const hasSlider = !frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport);
+  const listElements = videoList.map((video, index) => /*#__PURE__*/_jsx(VideoPickerThumbnail, {
+    video: video,
+    videoPlayerRef: videoPlayerRef,
+    selectedVideoId: currentVideoId,
+    onSelectVideo: current => setCurrentVideoId(current.videoId),
+    layout: !hasSlider ? 'horizontal' : 'vertical',
+    index: index,
+    isFramed: isFramed
+  }, video.videoId));
+  return /*#__PURE__*/_jsx(VideoPickerContainer, {
+    isFramed: isFramed,
+    ...selectProps(rest),
+    ...themeTokens,
+    children: /*#__PURE__*/_jsxs(StackView, {
+      divider: isFramed ? {
+        tokens: {
+          color: stackViewDividerColor
+        }
+      } : {
+        variant: {
+          decorative: true
+        }
+      },
+      space: isFramed ? 0 : 4 // everything has internal padding in `frame` variant
+      ,
+      direction: isFramed ? 'row' : 'column',
+      children: [/*#__PURE__*/_jsx(VideoPlayerContainer, { ...themeTokens,
+        isFramed: isFramed,
+        children: /*#__PURE__*/_jsx(VideoPickerPlayer, {
+          video: currentVideo,
+          videoPlayerRef: videoPlayerRef
+        })
+      }), hasSlider ? /*#__PURE__*/_jsx(VideoSlider, {
+        children: listElements
+      }) : /*#__PURE__*/_jsx(VideoListContainer, {
+        viewport: viewport,
+        "data-testid": "video-list-container",
+        isFramed: isFramed,
+        children: listElements
+      })]
+    })
+  });
+};
+
+VideoPicker.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Id of the currently selected video (defaults to the first video if not set).
+   */
+  selectedVideo: PropTypes.string,
+
+  /**
+   * An array of Video objects.
+   */
+  videoList: PropTypes.arrayOf(VideoPropType),
+
+  /**
+   * Use to display the picker in a container and the playlist as a sidebar (only available for breakpoints LG and larger)
+   */
+  frame: PropTypes.bool
+};
+export default VideoPicker;

package/lib-module/VideoPicker/VideoPickerPlayer.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { StackView, Typography } from '@telus-uds/components-base';
+import WebVideo from '../WebVideo/WebVideo';
+import { VideoPropType, RefPropType } from './videoPropType';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const VideoPickerPlayer = _ref => {
+  let {
+    video = {},
+    videoPlayerRef
+  } = _ref;
+  return /*#__PURE__*/_jsxs(StackView, {
+    space: 3,
+    tokens: {
+      flexShrink: 1
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: videoPlayerRef,
+      children: video.videoId && /*#__PURE__*/_jsx(WebVideo, { ...video
+      })
+    }), /*#__PURE__*/_jsxs(StackView, {
+      space: 2,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: {
+          size: 'h2',
+          colour: 'secondary'
+        },
+        children: video.title
+      }), /*#__PURE__*/_jsx(Typography, {
+        children: video.description
+      })]
+    })]
+  });
+};
+
+VideoPickerPlayer.propTypes = {
+  video: VideoPropType,
+  videoPlayerRef: RefPropType
+};
+export default VideoPickerPlayer;

package/lib-module/VideoPicker/VideoPickerThumbnail.js

@@ -0,0 +1,180 @@
+import React from 'react';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import styled from 'styled-components';
+import { StackView, Typography, useViewport, horizontalScrollUtils, useThemeTokens } from '@telus-uds/components-base';
+import { getTimestamp } from '../shared/VideoSplash/helpers';
+import { VideoPropType, RefPropType } from './videoPropType';
+import VideoSplash from '../shared/VideoSplash/VideoSplash';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  getItemPositionLayoutHandler,
+  itemPositionsPropType
+} = horizontalScrollUtils; // Use a React Native (web) outer container so it can take an onLayout callback, to
+// access position in VideoSlider's UDS HorizontalScroll and update its itemPositions
+
+const createReactNativeStyles = _ref => {
+  let {
+    pressablePaddingBottom,
+    pressablePaddingVertical,
+    pressablePaddingHorizontal,
+    pressableBorderTopWidth,
+    pressableBorderTopColor
+  } = _ref;
+  return StyleSheet.create({
+    container: {
+      cursor: 'pointer'
+    },
+    horizontal: {
+      paddingBottom: pressablePaddingBottom
+    },
+    framed: {
+      paddingVertical: pressablePaddingVertical,
+      paddingHorizontal: pressablePaddingHorizontal
+    },
+    framedLine: {
+      borderTopWidth: pressableBorderTopWidth,
+      borderTopColor: pressableBorderTopColor
+    }
+  });
+};
+
+const VideoThumbnail = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPickerThumbnail__VideoThumbnail",
+  componentId: "components-web__sc-1glxurq-0"
+})(["position:relative;width:", ";flex-shrink:0;* button{display:none;}&::before{content:'';display:block;padding-bottom:56.25%;}&::after{content:'';border:", "px solid;border-color:", ";border-radius:", "px;position:absolute;top:0;left:0;right:0;bottom:0;}& > div{border-radius:", "px;}"], props => props.layout === 'vertical' ? '100%' : '144px', _ref2 => {
+  let {
+    borderWidth
+  } = _ref2;
+  return borderWidth;
+}, _ref3 => {
+  let {
+    isPlaying,
+    borderColor
+  } = _ref3;
+  return isPlaying ? borderColor : 'transparent';
+}, _ref4 => {
+  let {
+    borderRadius
+  } = _ref4;
+  return borderRadius;
+}, _ref5 => {
+  let {
+    borderRadius
+  } = _ref5;
+  return borderRadius;
+});
+const ThumbnailTitleContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPickerThumbnail__ThumbnailTitleContainer",
+  componentId: "components-web__sc-1glxurq-1"
+})(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
+
+const VideoPickerThumbnail = _ref6 => {
+  let {
+    videoPlayerRef,
+    selectedVideoId,
+    video,
+    onSelectVideo,
+    layout = 'vertical',
+    isFramed,
+    itemPositions,
+    index,
+    width = '100%'
+  } = _ref6;
+  const viewport = useViewport();
+  const {
+    titleColor,
+    subTitleColor,
+    ...themeTokens
+  } = useThemeTokens('VideoPickerThumbnail');
+  const rnStyles = createReactNativeStyles(themeTokens);
+  const {
+    timestamp
+  } = getTimestamp(video.videoLength, video.copy);
+  const isPlaying = selectedVideoId === video.videoId;
+
+  const renderThumbnailImage = () => /*#__PURE__*/_jsx(VideoThumbnail, { ...themeTokens,
+    isPlaying: isPlaying,
+    layout: layout,
+    children: /*#__PURE__*/_jsx(VideoSplash, {
+      simpleMode: true,
+      poster: video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`,
+      videoLength: video.videoLength,
+      copy: video.copy
+    })
+  });
+
+  const renderThumbnailInfo = () => /*#__PURE__*/_jsxs(StackView, {
+    space: 2,
+    tokens: {
+      flexShrink: 1
+    },
+    children: [/*#__PURE__*/_jsx(ThumbnailTitleContainer, {
+      viewport: viewport,
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: {
+          bold: true
+        },
+        tokens: {
+          color: isPlaying ? titleColor : 'none'
+        },
+        children: video.title
+      })
+    }), viewport !== viewports.xs && /*#__PURE__*/_jsx(Typography, {
+      variant: {
+        size: 'micro'
+      },
+      tokens: {
+        color: subTitleColor
+      },
+      children: timestamp
+    })]
+  });
+
+  const handleLayout = itemPositions !== undefined ? getItemPositionLayoutHandler(itemPositions.positions, index) : undefined;
+
+  const onKeyPress = event => {
+    if (['Space', 'Enter'].includes(event.key)) {
+      var _videoPlayerRef$curre;
+
+      onSelectVideo(video);
+      const splashButton = (_videoPlayerRef$curre = videoPlayerRef.current) === null || _videoPlayerRef$curre === void 0 ? void 0 : _videoPlayerRef$curre.querySelector('button');
+      if (splashButton) splashButton.focus();
+    }
+  };
+
+  return /*#__PURE__*/_jsx(Pressable, {
+    onLayout: handleLayout,
+    onPress: () => onSelectVideo(video),
+    testID: `thumbnail-container-${video.videoId}`,
+    onKeyPress: onKeyPress,
+    accessibilityRole: "radio",
+    accessibilityState: {
+      checked: isPlaying
+    },
+    style: [rnStyles.container, layout === 'horizontal' && rnStyles.horizontal, isFramed && rnStyles.framed, isFramed && index > 0 && rnStyles.framedLine, {
+      width
+    }],
+    children: /*#__PURE__*/_jsxs(StackView, {
+      space: layout === 'vertical' ? 2 : 3,
+      direction: layout === 'vertical' ? 'column' : 'row',
+      children: [renderThumbnailImage(), renderThumbnailInfo()]
+    })
+  }, video.videoId);
+};
+
+VideoPickerThumbnail.propTypes = {
+  selectedVideoId: PropTypes.string,
+  onSelectVideo: PropTypes.func,
+  video: VideoPropType,
+  videoPlayerRef: RefPropType,
+  layout: PropTypes.oneOf(['vertical', 'horizontal']),
+  isFramed: PropTypes.bool,
+  itemPositions: itemPositionsPropType,
+  index: PropTypes.number,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+export default VideoPickerThumbnail;

package/lib-module/VideoPicker/VideoSlider.js

@@ -0,0 +1,83 @@
+import React, { cloneElement, useState } from 'react';
+import { HorizontalScroll, HorizontalScrollButton, horizontalScrollUtils, StackView, useThemeTokens, useViewport } from '@telus-uds/components-base';
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  useItemPositions
+} = horizontalScrollUtils;
+
+const VideoSlider = _ref => {
+  let {
+    children
+  } = _ref;
+  const viewport = useViewport();
+  const [itemPositions] = useItemPositions();
+  const [containerWidth, setContainerWidth] = useState(null);
+  const {
+    previousIcon: PreviousIcon,
+    nextIcon: NextIcon
+  } = useThemeTokens('VideoPickerSlider');
+
+  const onLayout = _ref2 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
+      }
+    } = _ref2;
+    setContainerWidth(width);
+  };
+
+  const itemsGap = 24; // '4' on spacing scale
+
+  const itemsCount = viewport === 'lg' || viewport === 'xl' ? 4 : 3;
+  const itemGapPortioned = (itemsCount - 1) * itemsGap / itemsCount;
+  const itemWidth = containerWidth === null ? // For first render, we don't know container width, so avoid flicker with static % width
+  `calc(${Math.round(100 / itemsCount)}% - ${Math.round(itemGapPortioned)}px)` : // After first render, can't use % widths because parent is > 100% width horizontal scroll area
+  Math.max(containerWidth / itemsCount - itemGapPortioned, 0 // Prevent negative width breaking layout on very narrow containers
+  );
+
+  const content = /*#__PURE__*/_jsx(StackView, {
+    space: 4,
+    direction: "row",
+    accessibilityRole: "radiogroup",
+    tokens: {
+      flexGrow: 1
+    },
+    children: React.Children.map(children, (child, index) => /*#__PURE__*/cloneElement(child, {
+      index,
+      itemPositions,
+      width: itemWidth
+    }))
+  });
+
+  const overflow = containerWidth === null && {
+    overflow: 'hidden'
+  };
+  const horizontalScrollTokens = {
+    nextIcon: NextIcon,
+    previousIcon: PreviousIcon,
+    gutter: 0,
+    borderBottomWidth: 0,
+    borderBottomColor: 'transparent',
+    buttonClearance: 0
+  };
+  return /*#__PURE__*/_jsx(View, {
+    onLayout: onLayout,
+    style: overflow,
+    children: containerWidth === null ? // Use a 100% width non-scrollable parent until containerWidth is known, to avoid flicker
+    content : /*#__PURE__*/_jsx(HorizontalScroll, {
+      ScrollButton: HorizontalScrollButton,
+      itemPositions: itemPositions,
+      tokens: horizontalScrollTokens,
+      children: content
+    })
+  });
+};
+
+VideoSlider.propTypes = {
+  children: PropTypes.node
+};
+export default VideoSlider;

package/lib-module/VideoPicker/index.js

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

package/lib-module/VideoPicker/videoPropType.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+import { VideoProps } from '../WebVideo/WebVideo';
+export const VideoPropType = PropTypes.shape({ ...VideoProps,
+  title: PropTypes.string,
+  description: PropTypes.string
+});
+export const RefPropType = PropTypes.shape({
+  current: PropTypes.object
+});

package/lib-module/index.js

@@ -27,8 +27,12 @@ export { default as WebVideo } from './WebVideo';
 export { default as WaffleGrid } from './WaffleGrid';
 export { default as Spinner } from './Spinner';
 export { default as Listbox } from './Listbox';
+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 TermsAndConditions } from './TermsAndConditions';
+export { default as NavigationBar } from './NavigationBar';
+export { default as Progress } from './Progress';
 export * from './baseExports';

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.38.0",
+    "@telus-uds/components-base": "1.40.0",
     "@telus-uds/system-constants": "^1.2.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.23.0",
+    "@telus-uds/system-theme-tokens": "^2.25.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0"
@@ -61,5 +61,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.9.0"
+  "version": "1.11.0"
 }

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -22,7 +22,8 @@ const StyledList = styled.ol({
   listStyle: 'none',
   listStylePosition: 'inside',
   margin: 0,
-  padding: 0
+  padding: 0,
+  alignItems: 'baseline'
 })
 
 const omitProps = ({
@@ -149,7 +150,7 @@ const Breadcrumbs = ({
   )
 
   return (
-    <nav {...selectProps(rest)}>
+    <nav aria-label="Breadcrumb" {...selectProps(rest)}>
       <StyledList>
         {items.map(
           ({
@@ -169,7 +170,7 @@ const Breadcrumbs = ({
               key={href}
               linkRouterProps={{ ...linkRouterProps, itemLinkRouterProps }}
               reactRouterLinkComponent={linkComponent}
-              variant={variant}
+              variant={{ ...variant, size: 'micro' }}
               LinkRouter={ItemLinkRouter}
             >
               {breadcrumbName}

package/src/Breadcrumbs/Item/Item.jsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import {
   Link,
   Typography,
+  applyTextStyles,
   clickProps,
   selectSystemProps,
   useThemeTokens,
@@ -22,7 +23,8 @@ const IconContainer = styled.span({
   display: 'inline-flex',
   alignItems: 'center',
   paddingLeft: ({ iconPadding }) => `${iconPadding}px`,
-  paddingRight: ({ iconPadding }) => `${iconPadding}px`
+  paddingRight: ({ iconPadding }) => `${iconPadding}px`,
+  fontFamily: ({ fontName, fontWeight }) => applyTextStyles({ fontName, fontWeight }).fontFamily
 })
 
 const Item = forwardRef(
@@ -41,6 +43,10 @@ const Item = forwardRef(
     const {
       iconColor,
       icon: ChevronRightIcon,
+      currentColor,
+      color,
+      iconSize,
+      fontSize,
       ...themeTokens
     } = useThemeTokens('Breadcrumbs', tokens, variant)
 
@@ -55,12 +61,15 @@ const Item = forwardRef(
     return (
       <StyledItemContainer {...themeTokens}>
         {current ? (
-          <Typography variant={{ ...variant, secondary: true }}>{children}</Typography>
+          <Typography tokens={{ color: currentColor, fontSize }} variant={{ ...variant }}>
+            {children}
+          </Typography>
         ) : (
           <>
             {ReactRouterLink ? (
               <ReactRouterLink
                 {...linkOptions}
+                tokens={{ color, blockFontSize: fontSize }}
                 // TODO refactor
                 // eslint-disable-next-line react/no-unstable-nested-components
                 component={(props) => {
@@ -71,12 +80,17 @@ const Item = forwardRef(
                 {children}
               </ReactRouterLink>
             ) : (
-              <Link {...linkOptions} ref={ref} variant={variant}>
+              <Link
+                {...linkOptions}
+                tokens={{ color, blockFontSize: fontSize }}
+                ref={ref}
+                variant={variant}
+              >
                 {children}
               </Link>
             )}
             <IconContainer {...themeTokens}>
-              <ChevronRightIcon size={16} color={iconColor} />
+              <ChevronRightIcon size={iconSize} color={iconColor} />
             </IconContainer>
           </>
         )}

package/src/Callout/Callout.jsx

@@ -7,6 +7,20 @@ import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
+const getAlignment = (rounded, textAlignToFlex) => {
+  if (textAlignToFlex) {
+    switch (textAlignToFlex) {
+      case 'left':
+        return 'flex-star'
+      case 'center':
+        return 'center'
+      default:
+        return 'flex-start'
+    }
+  }
+  return rounded ? 'center' : ' flex-start'
+}
+
 const verticalAlignToFlex = (verticalAlign) => {
   switch (verticalAlign) {
     case 'top':
@@ -21,18 +35,26 @@ const verticalAlignToFlex = (verticalAlign) => {
 }
 
 const CalloutContainer = styled.div(
-  ({ rounded, verticalAlign = 'top', background, gap, borderRadius, padding }) => ({
+  ({ rounded, verticalAlign, textAlignToFlex, background, gap, borderRadius, padding }) => ({
     background,
     display: 'flex',
     gap,
     borderRadius,
     padding,
-    justifyContent: `${rounded ? 'center' : 'flex-start'}`,
+    justifyContent: getAlignment(rounded, textAlignToFlex),
     alignItems: verticalAlignToFlex(verticalAlign)
   })
 )
 
-const Callout = ({ icon, children, verticalAlign = 'top', tokens, variant = {}, ...rest }) => {
+const Callout = ({
+  icon,
+  children,
+  verticalAlign,
+  textAlignToFlex,
+  tokens,
+  variant = {},
+  ...rest
+}) => {
   const {
     background,
     gap,
@@ -52,6 +74,7 @@ const Callout = ({ icon, children, verticalAlign = 'top', tokens, variant = {},
       rounded={rounded}
       data-testid="callout-container"
       verticalAlign={verticalAlign}
+      textAlignToFlex={textAlignToFlex}
       background={background}
       gap={gap}
       borderRadius={borderRadius}
@@ -70,6 +93,7 @@ Callout.propTypes = {
   ...selectedSystemPropTypes,
   icon: PropTypes.elementType,
   children: PropTypes.node.isRequired,
+  textAlignToFlex: PropTypes.oneOf(['center', 'left']),
   verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom'])
 }