@telus-uds/components-web 2.12.0 → 2.13.0

package/lib-module/VideoPicker/VideoPickerThumbnail.js

@@ -4,7 +4,7 @@ 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 { StackView, Typography, useViewport, horizontalScrollUtils, useThemeTokensCallback } from '@telus-uds/components-base';
 import { getTimestamp } from '../shared/VideoSplash/helpers';
 import { VideoPropType, RefPropType } from './videoPropType';
 import VideoSplash from '../shared/VideoSplash/VideoSplash';
@@ -42,37 +42,45 @@ const createReactNativeStyles = _ref => {
   });
 };
 
-const VideoThumbnail = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoPickerThumbnail__VideoThumbnail",
+const ImageContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPickerThumbnail__ImageContainer",
   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 => {
+})(["padding:", ";border:", ";border-radius:", "px;"], props => `${props.outerBorderGap}px`, props => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`, _ref2 => {
   let {
-    borderWidth
+    outerBorderRadius
   } = _ref2;
-  return borderWidth;
-}, _ref3 => {
+  return outerBorderRadius;
+});
+const VideoThumbnail = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPickerThumbnail__VideoThumbnail",
+  componentId: "components-web__sc-1glxurq-1"
+})(["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', _ref3 => {
   let {
-    isPlaying,
-    borderColor
+    borderWidth
   } = _ref3;
-  return isPlaying ? borderColor : 'transparent';
+  return borderWidth;
 }, _ref4 => {
   let {
-    borderRadius
+    borderColor
   } = _ref4;
-  return borderRadius;
+  return borderColor;
 }, _ref5 => {
   let {
     borderRadius
   } = _ref5;
   return borderRadius;
+}, _ref6 => {
+  let {
+    borderRadius
+  } = _ref6;
+  return borderRadius;
 });
 const ThumbnailTitleContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "VideoPickerThumbnail__ThumbnailTitleContainer",
-  componentId: "components-web__sc-1glxurq-1"
+  componentId: "components-web__sc-1glxurq-2"
 })(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
 
-const VideoPickerThumbnail = _ref6 => {
+const VideoPickerThumbnail = _ref7 => {
   let {
     videoPlayerRef,
     selectedVideoId,
@@ -83,56 +91,59 @@ const VideoPickerThumbnail = _ref6 => {
     itemPositions,
     index,
     width = '100%'
-  } = _ref6;
+  } = _ref7;
   const viewport = useViewport();
-  const {
-    titleColor,
-    subTitleColor,
-    ...themeTokens
-  } = useThemeTokens('VideoPickerThumbnail');
-  const rnStyles = createReactNativeStyles(themeTokens);
+  const getTokens = useThemeTokensCallback('VideoPickerThumbnail', {}, {});
   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 renderThumbnailImage = themeTokens => {
+    return /*#__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, {
+  const renderThumbnailInfo = _ref8 => {
+    let {
+      titleColor,
+      subTitleColor
+    } = _ref8;
+    return /*#__PURE__*/_jsxs(StackView, {
+      space: 2,
+      tokens: {
+        flexShrink: 1
+      },
+      children: [/*#__PURE__*/_jsx(ThumbnailTitleContainer, {
+        viewport: viewport,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            bold: true
+          },
+          tokens: {
+            color: titleColor
+          },
+          children: video.title
+        })
+      }), viewport !== viewports.xs && /*#__PURE__*/_jsx(Typography, {
         variant: {
-          bold: true
+          size: 'micro'
         },
         tokens: {
-          color: isPlaying ? titleColor : 'none'
+          color: subTitleColor
         },
-        children: video.title
-      })
-    }), viewport !== viewports.xs && /*#__PURE__*/_jsx(Typography, {
-      variant: {
-        size: 'micro'
-      },
-      tokens: {
-        color: subTitleColor
-      },
-      children: timestamp
-    })]
-  });
+        children: timestamp
+      })]
+    });
+  };
 
   const handleLayout = itemPositions !== undefined ? getItemPositionLayoutHandler(itemPositions.positions, index) : undefined;
 
@@ -155,14 +166,45 @@ const VideoPickerThumbnail = _ref6 => {
     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()]
-    })
+    style: _ref9 => {
+      let {
+        hovered: hover,
+        focused: focus,
+        pressed
+      } = _ref9;
+      const themeTokens = getTokens({
+        hover,
+        focus,
+        pressed,
+        selected: isPlaying
+      });
+      const rnStyles = createReactNativeStyles(themeTokens);
+      return [rnStyles.container, layout === 'horizontal' && rnStyles.horizontal, isFramed && rnStyles.framed, isFramed && index > 0 && rnStyles.framedLine, {
+        width
+      }, {
+        outline: 'none'
+      }];
+    },
+    children: _ref10 => {
+      let {
+        hovered: hover,
+        focused: focus,
+        pressed
+      } = _ref10;
+      const themeTokens = getTokens({
+        hover,
+        focus,
+        pressed,
+        selected: isPlaying
+      });
+      return /*#__PURE__*/_jsxs(StackView, {
+        space: layout === 'vertical' ? 2 : 3,
+        direction: layout === 'vertical' ? 'column' : 'row',
+        children: [/*#__PURE__*/_jsx(ImageContainer, { ...themeTokens,
+          children: renderThumbnailImage(themeTokens)
+        }), renderThumbnailInfo(themeTokens)]
+      });
+    }
   }, video.videoId);
 };
 

package/lib-module/VideoPicker/VideoSlider.js

@@ -30,7 +30,7 @@ const VideoSlider = _ref => {
     setContainerWidth(width);
   };
 
-  const itemsGap = 24; // '4' on spacing scale
+  const itemsGap = 32; // '5' on spacing scale
 
   const itemsCount = viewport === 'lg' || viewport === 'xl' ? 4 : 3;
   const itemGapPortioned = (itemsCount - 1) * itemsGap / itemsCount;
@@ -40,7 +40,7 @@ const VideoSlider = _ref => {
   );
 
   const content = /*#__PURE__*/_jsx(StackView, {
-    space: 4,
+    space: 5,
     direction: "row",
     accessibilityRole: "radiogroup",
     tokens: {

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.53.0",
+    "@telus-uds/components-base": "1.54.0",
     "@telus-uds/system-constants": "^1.2.1",
     "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.36.0",
+    "@telus-uds/system-theme-tokens": "^2.37.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.12.0"
+  "version": "2.13.0"
 }

package/src/Autocomplete/Loading.jsx

@@ -1,15 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Box, StackView, Typography } from '@telus-uds/components-base'
+import { Box, StackView } from '@telus-uds/components-base'
 import Spinner from '../Spinner'
 
 const Loading = ({ label }) => (
   <Box space={3}>
     <StackView direction="row" space={2} tokens={{ alignItems: 'center' }}>
-      <Spinner inline={true} show={true} size="small" />
-      <Typography variant={{ size: 'small' }} accessibilityLiveRegion="polite">
-        {label}
-      </Typography>
+      <Spinner inline={true} show={true} label={label} labelPosition="right" />
     </StackView>
   </Box>
 )

package/src/Autocomplete/dictionary.js

@@ -1,12 +1,12 @@
 export default {
   en: {
     hasResults: 'Some results are available',
-    loading: 'Loading suggestions...',
+    loading: 'Searching...',
     noResults: 'No results found'
   },
   fr: {
     hasResults: 'Quelques suggestions sont disponible',
-    loading: 'Chargement en cours...',
+    loading: 'Recherche...',
     noResults: 'Aucun résultat trouvé'
   }
 }

package/src/DatePicker/DatePicker.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React, { forwardRef, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import momentPropTypes from 'react-moment-proptypes'
@@ -43,6 +43,7 @@ const getResponsiveCircleSize = (inline = false, viewport = 'md') => {
 
   return responsiveCircleSize
 }
+
 const MonthCenterContainer = styled.div({
   display: 'flex',
   justifyContent: 'center'
@@ -104,6 +105,12 @@ const DatePicker = forwardRef(
     const [isFocused, setIsFocused] = useState(false)
     const [isClickedInside, setIsClickedInside] = useState(false)
     const getCopy = useCopy({ dictionary, copy })
+    useEffect(() => {
+      if (!moment(date).isSame(inputDate)) {
+        setInputDate(date)
+        setInputText(date instanceof moment ? date.format(dateFormat) : '')
+      }
+    }, [date, inputDate])
     const onFocusChange = ({ focused }) => {
       if (!isClickedInside) {
         setIsFocused(focused)

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
-import { Icon, Spacer, useResponsiveProp, useThemeTokens } from '@telus-uds/components-base'
+import { Icon, useResponsiveProp, useThemeTokens } from '@telus-uds/components-base'
 import NavigationItem from './NavigationItem'
 import Listbox from '../Listbox'
 import useOverlaidPosition from '../utils/useOverlaidPosition'
@@ -61,12 +61,11 @@ const NavigationSubMenu = ({
       >
         {({ textStyles }) => [
           children,
-          <Spacer key={`${id}_spacer`} space={1} direction="row" />,
           <Icon
             key={`${id}_icon`}
             icon={icoMenu}
-            variant={{ size: 'small' }}
-            tokens={{ color: textStyles[0]?.color, size: textStyles[0]?.fontSize }}
+            variant={{ size: 'micro' }}
+            tokens={{ color: textStyles[0]?.color }}
           />
         ]}
       </NavigationItem>

package/src/Spinner/Spinner.jsx

@@ -64,6 +64,7 @@ const Spinner = ({
   fullScreen = false,
   inline = false,
   label,
+  labelPosition,
   show = false,
   isStatic = false,
   tokens,
@@ -97,6 +98,7 @@ const Spinner = ({
           >
             <SpinnerContent
               label={label}
+              labelPosition={labelPosition}
               overlay={true}
               size={size}
               thickness={thickness}
@@ -115,6 +117,7 @@ const Spinner = ({
       <SpinnerContainer inline={inline} aria-live="assertive" {...selectProps(rest)}>
         <SpinnerContent
           label={label}
+          labelPosition={labelPosition}
           overlay={true}
           size={size}
           thickness={thickness}
@@ -141,6 +144,7 @@ const Spinner = ({
     <SpinnerContainer {...selectProps(rest)}>
       <SpinnerContent
         label={label}
+        labelPosition={labelPosition}
         size={size}
         thickness={thickness}
         sizeVariant={sizeVariant}
@@ -183,7 +187,11 @@ Spinner.propTypes = {
   /**
    * If true, it should render a static spinner
    */
-  isStatic: PropTypes.bool
+  isStatic: PropTypes.bool,
+  /**
+   * Determine where the label of the spinner should be placed, left, right, bottom or top.
+   */
+  labelPosition: PropTypes.string
 }
 
 export default Spinner

package/src/Spinner/SpinnerContent.jsx

@@ -27,6 +27,7 @@ const Container = styled.div(({ overlay }) => ({
 
 const SpinnerContent = ({
   label,
+  labelPosition,
   overlay = false,
   sizeVariant,
   size,
@@ -34,9 +35,20 @@ const SpinnerContent = ({
   isStatic,
   ...rest
 }) => {
+  const labelMapping = {
+    top: 'column-reverse',
+    bottom: 'column',
+    left: 'row-reverse',
+    right: 'row'
+  }
+
   return (
     <Container overlay={overlay}>
-      <StackView space={3} tokens={{ alignItems: 'center' }}>
+      <StackView
+        space={3}
+        tokens={{ alignItems: 'center' }}
+        direction={labelMapping[labelPosition]}
+      >
         <ActivityIndicator
           label={label}
           tokens={{ size, thickness }}

package/src/Table/Cell.jsx

@@ -1,19 +1,28 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
-import { Typography, useThemeTokens } from '@telus-uds/components-base'
+import { Typography, useThemeTokens, applyShadowToken } from '@telus-uds/components-base'
 import { useTableContext } from './Table'
 
-const stickyStyles = css`
+const HEADER_TYPE = {
+  HEADING: 'heading',
+  SUBHEADING: 'subHeading',
+  ROWHEADING: 'rowHeading'
+}
+
+const stickyStyles = ({ cellStickyShadow, stickyBackgroundColor, type }) => css`
   position: sticky;
   left: 0; // needed for sticky to work
   z-index: 2;
   clip-path: inset(0 -8px 0 0); // use clip path to cut off the shadow rendered below
-
+  // Override default cell background with stickyBackgroundColor with an exception to subheading and heading
+  ${type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING
+    ? `background-color: ${stickyBackgroundColor};`
+    : undefined}
   &::before {
     // use a pseudo element for the sticky shadow, since we already use shadows for inner cells border
     content: '';
-    box-shadow: ${({ cellStickyShadow }) => cellStickyShadow};
+    box-shadow: ${cellStickyShadow};
     position: absolute;
     top: 0;
     left: 0;
@@ -25,55 +34,43 @@ const stickyStyles = css`
 const sharedStyles = css`
   ${({
     isSticky,
-    cellBoxShadowColor,
     align,
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingBottom,
     cellPaddingLeft,
-    cellMinWidth
+    cellMinWidth,
+    cellBackground,
+    cellStickyShadow,
+    stickyBackgroundColor,
+    type
   }) => css`
-    ${isSticky ? stickyStyles : undefined};
-    box-shadow: inset 0 -1px 0 ${cellBoxShadowColor};
     text-align: ${align};
     min-width: ${cellMinWidth}px;
     padding: ${cellPaddingTop}px ${cellPaddingRight}px ${cellPaddingBottom}px ${cellPaddingLeft}px;
+    background-color: ${cellBackground};
+    ${isSticky && stickyStyles({ type, cellStickyShadow, stickyBackgroundColor })};
   `}
 `
-const StyledHeading = styled.th`
-  ${sharedStyles};
-  ${({ cellHeadingBackground, cellHeadingBoxShadowColor }) => `
-  background-color: ${cellHeadingBackground};
-  box-shadow: inset 0 1px 0 ${cellHeadingBoxShadowColor}, inset 0 -1px 0 ${cellHeadingBoxShadowColor};`}
-`
-
-const StyledSubHeading = styled.th`
-  ${sharedStyles};
-  background-color: ${({ cellSubheadingBackground }) => cellSubheadingBackground};
-`
-
-const StyledCell = styled.td`
-  ${sharedStyles};
-  background-color: ${({ cellBackground }) => cellBackground};
-`
-
-const StyledRowHeading = styled.th`
+const createStyledCell = (htmlElement) => styled[htmlElement]`
   ${sharedStyles};
-  background-color: ${({ cellRowHeadingBackground }) => cellRowHeadingBackground};
+  box-shadow: ${({ cellBoxShadowColor, type }) => {
+    return type === HEADER_TYPE.HEADING
+      ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}`
+      : `inset 0 1px 0 ${cellBoxShadowColor}`
+  }};
 `
+const StyledHeaderCell = createStyledCell('th')
+const StyledDataCell = createStyledCell('td')
 
-const Cell = ({ children, type = 'default', isFirstInRow, align = 'left', tokens: cellTokens }) => {
-  const { text, isScrollable: isTableScrollable, variant, tokens: tableTokens } = useTableContext()
+const Cell = ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type }) => {
+  const { text, isScrollable: isTableScrollable, tokens: tableTokens, spacing } = useTableContext()
   const themeTokens = { ...tableTokens, ...cellTokens }
 
   const {
     cellMinWidth,
-    cellHeadingBackground,
-    cellHeadingBoxShadowColor,
     cellBoxShadowColor,
-    cellSubheadingBackground,
     cellBackground,
-    cellRowHeadingBackground,
     cellStickyShadow,
     cellPaddingTop,
     cellPaddingRight,
@@ -81,84 +78,67 @@ const Cell = ({ children, type = 'default', isFirstInRow, align = 'left', tokens
     cellPaddingBottom,
     fontName,
     fontWeight,
-    fontSize
-  } = useThemeTokens('Table', themeTokens, variant)
+    fontSize,
+    lineHeight,
+    stickyBackgroundColor
+  } = useThemeTokens('Table', themeTokens, { spacing, type, text })
 
   const sharedProps = {
     align,
     isSticky: isTableScrollable && isFirstInRow,
+    cellBackground,
     cellMinWidth,
-    cellStickyShadow,
+    cellStickyShadow: applyShadowToken(cellStickyShadow).boxShadow,
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingLeft,
     cellPaddingBottom,
+    stickyBackgroundColor,
     cellBoxShadowColor
   }
-
   const typographyTokens = {
     fontName,
     fontWeight,
-    fontSize
+    fontSize,
+    lineHeight
   }
 
   switch (type) {
-    case 'heading':
+    case HEADER_TYPE.HEADING:
       return (
-        <StyledHeading
-          scope="col"
-          cellHeadingBackground={cellHeadingBackground}
-          cellHeadingBoxShadowColor={cellHeadingBoxShadowColor}
-          {...sharedProps}
-        >
-          <Typography tokens={typographyTokens} variant={{ size: 'h4' }}>
-            {children}
-          </Typography>
-        </StyledHeading>
+        <StyledHeaderCell scope="col" {...sharedProps} type={type}>
+          <Typography tokens={typographyTokens}>{children}</Typography>
+        </StyledHeaderCell>
       )
-    case 'subHeading':
+
+    case HEADER_TYPE.SUBHEADING:
       return (
-        <StyledSubHeading
-          scope="col"
-          cellSubheadingBackground={cellSubheadingBackground}
-          {...sharedProps}
-        >
-          <Typography tokens={typographyTokens} variant={{ size: 'h5' }}>
-            {children}
-          </Typography>
-        </StyledSubHeading>
+        <StyledHeaderCell scope="col" {...sharedProps} type={type}>
+          <Typography tokens={typographyTokens}>{children}</Typography>
+        </StyledHeaderCell>
       )
-    case 'rowHeading':
+
+    case HEADER_TYPE.ROWHEADING:
       return (
-        <StyledRowHeading
-          scope="row"
-          cellRowHeadingBackground={cellRowHeadingBackground}
-          {...sharedProps}
-        >
-          <Typography tokens={typographyTokens} variant={{ size: text === 'small' ? 'h5' : 'h4' }}>
-            {children}
-          </Typography>
-        </StyledRowHeading>
+        <StyledHeaderCell scope="row" {...sharedProps} type={type}>
+          <Typography tokens={typographyTokens}>{children}</Typography>
+        </StyledHeaderCell>
       )
 
     default:
       return (
-        <StyledCell cellBackground={cellBackground} {...sharedProps}>
-          <Typography tokens={{ fontSize }} variant={{ size: text }}>
-            {children}
-          </Typography>
-        </StyledCell>
+        <StyledDataCell {...sharedProps}>
+          <Typography tokens={typographyTokens}>{children}</Typography>
+        </StyledDataCell>
       )
   }
 }
 
 Cell.propTypes = {
+  type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
   tokens: PropTypes.object,
   children: PropTypes.node,
-  /**
-   * Defines the visual styles of a cell, and whether it should be a `td` or `th` element
-   */
-  type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
+
   /**
    * @ignore
    * Used internally for making the first column sticky

package/src/Table/Header.jsx

@@ -5,7 +5,12 @@ import Row from './Row'
 const Header = ({ children }) => {
   return (
     <thead>
-      <Row>{React.Children.map(children, (child) => cloneElement(child, { type: 'heading' }))}</Row>
+      <Row>
+        {React.Children.map(children, (child) =>
+          // TO DO: pass type as a variant instead of prop
+          cloneElement(child, { type: 'heading' })
+        )}
+      </Row>
     </thead>
   )
 }

package/src/Table/SubHeading.jsx

@@ -5,7 +5,10 @@ import Row from './Row'
 const Header = ({ children }) => {
   return (
     <Row>
-      {React.Children.map(children, (child) => cloneElement(child, { type: 'subHeading' }))}
+      {React.Children.map(children, (child) =>
+        // TO DO: pass type as a variant instead of prop
+        cloneElement(child, { type: 'subHeading' })
+      )}
     </Row>
   )
 }