@telus-uds/components-web 2.12.0 → 2.14.0

package/lib/QuantitySelector/QuantitySelector.js

@@ -11,12 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _componentsBase = require("@telus-uds/components-base");
 
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-
 var _styles = require("./styles");
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
+var _SideButton = _interopRequireDefault(require("./SideButton"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -39,6 +39,7 @@ const QuantitySelector = _ref => {
     minNumber,
     maxNumber,
     defaultValue,
+    value,
     label,
     hint,
     hintPosition,
@@ -52,19 +53,9 @@ const QuantitySelector = _ref => {
     testID
   } = _ref;
   const {
-    components: {
-      QuantitySelector: componentTheme
-    }
-  } = (0, _componentsBase.useTheme)();
-  const {
-    leftIcon,
-    rightIcon,
-    padding
-  } = (0, _componentsBase.useThemeTokens)('QuantitySelector', tokens, variant);
-  const [error, setError] = (0, _react.useState)('');
-  const {
-    alternative
+    disabled
   } = variant;
+  const [error, setError] = (0, _react.useState)('');
   const getCopy = (0, _componentsBase.useCopy)({
     dictionary,
     copy
@@ -77,17 +68,16 @@ const QuantitySelector = _ref => {
     return numberToEvaluate;
   };
 
-  const initialValue = getValidatedNumber(defaultValue);
   const {
     currentValue: number,
     setValue: setNumber
   } = (0, _componentsBase.useInputValue)({
-    value: undefined,
-    initialValue,
+    value: getValidatedNumber(value),
+    initialValue: getValidatedNumber(defaultValue),
     onChange
   });
-  const isDecreaseEnabled = !isNumber(minNumber) || number > minNumber;
-  const isIncreaseEnabled = !isNumber(maxNumber) || number < maxNumber;
+  const isDecreaseEnabled = !disabled && !isNumber(minNumber) || number > minNumber;
+  const isIncreaseEnabled = !disabled && !isNumber(maxNumber) || number < maxNumber;
   const inputValue = isNumber(number) ? number.toString() : '';
 
   const updateNumber = (newNumber, originalInputEvent) => {
@@ -119,20 +109,31 @@ const QuantitySelector = _ref => {
     tooltip: tooltip
   }) : null;
 
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelector', tokens, variant);
+
   const renderTextInput = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
     nativeID: id,
     value: inputValue,
+    defaultValue: defaultValue,
     tokens: textInputState => {
       const {
+        inputWidth,
+        inputBorderWidth,
         inputBorderColor,
-        inputBackgroundColor
-      } = (0, _componentsBase.getThemeTokens)(componentTheme, tokens, variant, textInputState);
-      return {
-        borderRadius: 0,
-        margin: 0,
-        padding: 0,
+        textColor,
+        inputBackgroundColor,
+        ...rest
+      } = getTokens({ ...textInputState
+      });
+      return { ...rest,
+        order: 1,
+        borderWidth: inputBorderWidth,
+        backgroundColor: inputBackgroundColor,
+        color: textColor,
+        width: inputWidth,
         borderColor: inputBorderColor,
-        backgroundColor: inputBackgroundColor
+        borderRadius: 0,
+        outerBorderWidth: 0
       };
     },
     onChange: inputChangeHandler // Using title as an accessibility workaround
@@ -146,38 +147,6 @@ const QuantitySelector = _ref => {
     accessibilityValueNow: number
   });
 
-  const getButtonTokens = isEnabled => buttonState => {
-    const disabled = !isEnabled;
-    const { ...buttonTokens
-    } = (0, _componentsBase.getThemeTokens)(componentTheme, tokens, variant, { ...buttonState,
-      disabled
-    });
-    return { ...buttonTokens,
-      outerBorderGap: 0,
-      padding
-    };
-  };
-
-  const renderLeftButton = () => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-      icon: leftIcon,
-      tokens: getButtonTokens(isDecreaseEnabled),
-      onPress: event => updateNumber(number - 1, event),
-      onDoubleClick: event => updateNumber(number - 1, event),
-      accessibilityLabel: getCopy('accessibility').decreaseButton,
-      accessibilityDisabled: !isDecreaseEnabled
-    });
-  };
-
-  const renderRightButton = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-    icon: rightIcon,
-    tokens: getButtonTokens(isIncreaseEnabled),
-    onPress: () => updateNumber(number + 1),
-    onDoubleClick: () => updateNumber(number + 1),
-    accessibilityLabel: getCopy('accessibility').increaseButton,
-    accessibilityDisabled: !isIncreaseEnabled
-  });
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
     space: 2,
     testID: testID,
@@ -185,14 +154,39 @@ const QuantitySelector = _ref => {
       space: 2
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputWrapper, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputField, {
-        className: `${alternative ? 'alternative' : ''}`,
         children: renderTextInput()
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RightButtonWrapper, {
-        className: `${alternative ? 'alternative' : ''}`,
-        children: renderRightButton()
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LeftButtonWrapper, {
-        className: `${alternative ? 'alternative' : ''}`,
-        children: renderLeftButton()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          order: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+          isEnabled: isDecreaseEnabled,
+          onPress: () => updateNumber(number - 1),
+          onDoubleClick: () => updateNumber(number - 1),
+          tokens: tokens,
+          variant: {
+            decrease: true,
+            ...variant
+          },
+          accessibilityLabel: getCopy('accessibility').decreaseButton,
+          accessibilityDisabled: !isDecreaseEnabled
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          order: 2
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+          isEnabled: isIncreaseEnabled,
+          onPress: () => updateNumber(number + 1),
+          onDoubleClick: () => updateNumber(number + 1),
+          accessibilityLabel: getCopy('accessibility').increaseButton,
+          accessibilityDisabled: !isIncreaseEnabled,
+          tokens: tokens,
+          variant: {
+            increase: true,
+            ...variant
+          }
+        })
       })]
     }), error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
       vertical: 2,
@@ -244,6 +238,12 @@ QuantitySelector.propTypes = {
    */
   defaultValue: _propTypes.default.number,
 
+  /**
+   * If the input's state is to be controlled by a parent component, use this prop
+   * together with the `onChange` to pass down and update the lifted state.
+   */
+  value: _propTypes.default.number,
+
   /**
    * The label of the input field
    */
@@ -282,7 +282,8 @@ QuantitySelector.propTypes = {
    */
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr'])]),
   variant: _propTypes.default.exact({
-    alternative: _propTypes.default.bool
+    alternative: _propTypes.default.bool,
+    disabled: _propTypes.default.bool
   }),
   tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
 

package/lib/QuantitySelector/SideButton.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SideButton = _ref => {
+  let {
+    isEnabled,
+    onPress,
+    onDoubleClick,
+    accessibilityLabel,
+    accessibilityDisabled,
+    tokens,
+    variant
+  } = _ref;
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelectorSideButton', tokens, variant);
+
+  const getButtonTokens = _ref2 => {
+    let {
+      buttonState,
+      disabled
+    } = _ref2;
+    const {
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      ...rest
+    } = getTokens({ ...buttonState,
+      disabled
+    });
+    return { ...rest,
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outerBorderRadius: borderRadius,
+      outerBorderTopLeftRadius: borderTopLeftRadius,
+      outerBorderTopRightRadius: borderTopRightRadius,
+      outerBorderBottomLeftRadius: borderBottomLeftRadius,
+      outerBorderBottomRightRadius: borderBottomRightRadius,
+      outerBorderGap: 0,
+      outerBorderWidth: 0
+    };
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+    tokens: buttonState => getButtonTokens({
+      disabled: !isEnabled,
+      buttonState
+    }),
+    onPress: onPress,
+    onDoubleClick: onDoubleClick,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityDisabled: accessibilityDisabled
+  });
+};
+
+SideButton.displayName = 'QuantitySelectorSideButton';
+SideButton.defaultProps = {
+  isEnabled: true,
+  onPress: () => {},
+  onDoubleClick: () => {},
+  accessibilityLabel: '',
+  accessibilityDisabled: false,
+  tokens: {},
+  variant: {}
+};
+SideButton.propTypes = {
+  isEnabled: _propTypes.default.bool,
+  onPress: _propTypes.default.func,
+  onDoubleClick: _propTypes.default.func,
+  accessibilityLabel: _propTypes.default.string,
+  accessibilityDisabled: _propTypes.default.bool,
+  tokens: _propTypes.default.object,
+  variant: _propTypes.default.object
+};
+var _default = SideButton;
+exports.default = _default;

package/lib/QuantitySelector/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RightButtonWrapper = exports.LeftButtonWrapper = exports.InputWrapper = exports.InputField = void 0;
+exports.InputWrapper = exports.InputField = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -12,29 +12,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const InputField = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "styles__InputField",
   componentId: "components-web__sc-1lrz1xk-0"
-})(["order:2;min-width:3.5rem;max-width:5 rem;height:28px;padding:0;width:64px;text-align:center;z-index:10;input{text-align:center;}&.alternative{input{height:40px;}}"]);
+})(["order:1;text-align:center;z-index:10;input{text-align:center;}"]);
 
 exports.InputField = InputField;
 
-const ButtonWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
-  displayName: "styles__ButtonWrapper",
-  componentId: "components-web__sc-1lrz1xk-1"
-})(["&.alternative{div[role='button']{height:42px;> div{height:40px;> div{padding:12px 16px;}}}}"]);
-
-const LeftButtonWrapper = /*#__PURE__*/(0, _styledComponents.default)(ButtonWrapper).withConfig({
-  displayName: "styles__LeftButtonWrapper",
-  componentId: "components-web__sc-1lrz1xk-2"
-})(["order:0;div[role='button']{border-radius:4px 0px 0px 4px !important;> div{border-right:none;border-radius:4px 0px 0px 4px !important;}}&.alternative{div[role='button']{border-radius:36px 0px 0px 36px !important;> div{border-radius:24px 0px 0px 24px !important;}}}"]);
-exports.LeftButtonWrapper = LeftButtonWrapper;
-const RightButtonWrapper = /*#__PURE__*/(0, _styledComponents.default)(ButtonWrapper).withConfig({
-  displayName: "styles__RightButtonWrapper",
-  componentId: "components-web__sc-1lrz1xk-3"
-})(["order:3;div[role='button']{border-radius:0px 4px 4px 0px !important;> div{border-left:none;border-radius:0px 4px 4px 0px !important;}}&.alternative{div[role='button']{border-radius:0px 36px 36px 0px !important;> div{border-radius:0px 36px 36px 0px !important;}}}"]);
-exports.RightButtonWrapper = RightButtonWrapper;
-
 const InputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "styles__InputWrapper",
-  componentId: "components-web__sc-1lrz1xk-4"
-})(["textalign:start;display:flex;flexdirection:row;flexwrap:nowrap;justifycontent:center;"]);
+  componentId: "components-web__sc-1lrz1xk-1"
+})(["text-align:start;display:flex;flex-direction:row;flex-wrap:nowrap;"]);
 
 exports.InputWrapper = InputWrapper;

package/lib/Spinner/Spinner.js

@@ -109,6 +109,7 @@ const Spinner = _ref3 => {
     fullScreen = false,
     inline = false,
     label,
+    labelPosition,
     show = false,
     isStatic = false,
     tokens,
@@ -141,6 +142,7 @@ const Spinner = _ref3 => {
           ...selectProps(rest),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
             label: label,
+            labelPosition: labelPosition,
             overlay: true,
             size: size,
             thickness: thickness,
@@ -160,6 +162,7 @@ const Spinner = _ref3 => {
       ...selectProps(rest),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
         label: label,
+        labelPosition: labelPosition,
         overlay: true,
         size: size,
         thickness: thickness,
@@ -185,6 +188,7 @@ const Spinner = _ref3 => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpinnerContainer, { ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
       label: label,
+      labelPosition: labelPosition,
       size: size,
       thickness: thickness,
       sizeVariant: sizeVariant,
@@ -232,7 +236,12 @@ Spinner.propTypes = { ...selectedSystemPropTypes,
   /**
    * If true, it should render a static spinner
    */
-  isStatic: _propTypes.default.bool
+  isStatic: _propTypes.default.bool,
+
+  /**
+   * Determine where the label of the spinner should be placed, left, right, bottom or top.
+   */
+  labelPosition: _propTypes.default.string
 };
 var _default = Spinner;
 exports.default = _default;

package/lib/Spinner/SpinnerContent.js

@@ -47,6 +47,7 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const SpinnerContent = _ref2 => {
   let {
     label,
+    labelPosition,
     overlay = false,
     sizeVariant,
     size,
@@ -54,6 +55,12 @@ const SpinnerContent = _ref2 => {
     isStatic,
     ...rest
   } = _ref2;
+  const labelMapping = {
+    top: 'column-reverse',
+    bottom: 'column',
+    left: 'row-reverse',
+    right: 'row'
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     overlay: overlay,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
@@ -61,6 +68,7 @@ const SpinnerContent = _ref2 => {
       tokens: {
         alignItems: 'center'
       },
+      direction: labelMapping[labelPosition],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ActivityIndicator, {
         label: label,
         tokens: {

package/lib/Table/Cell.js

@@ -23,94 +23,77 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const stickyStyles = /*#__PURE__*/(0, _styledComponents.css)(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);&::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], _ref => {
+const HEADER_TYPE = {
+  HEADING: 'heading',
+  SUBHEADING: 'subHeading',
+  ROWHEADING: 'rowHeading'
+};
+
+const stickyStyles = _ref => {
   let {
-    cellStickyShadow
+    cellStickyShadow,
+    stickyBackgroundColor,
+    type
   } = _ref;
-  return cellStickyShadow;
-});
+  return (0, _styledComponents.css)(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);", " &::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined, cellStickyShadow);
+};
+
 const sharedStyles = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _ref2 => {
   let {
     isSticky,
-    cellBoxShadowColor,
     align,
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingBottom,
     cellPaddingLeft,
-    cellMinWidth
+    cellMinWidth,
+    cellBackground,
+    cellStickyShadow,
+    stickyBackgroundColor,
+    type
   } = _ref2;
-  return (0, _styledComponents.css)(["", ";box-shadow:inset 0 -1px 0 ", ";text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;"], isSticky ? stickyStyles : undefined, cellBoxShadowColor, align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft);
+  return (0, _styledComponents.css)(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
+    type,
+    cellStickyShadow,
+    stickyBackgroundColor
+  }));
 });
 
-const StyledHeading = /*#__PURE__*/_styledComponents.default.th.withConfig({
-  displayName: "Cell__StyledHeading",
+const createStyledCell = htmlElement => _styledComponents.default[htmlElement].withConfig({
+  displayName: "Cell__createStyledCell",
   componentId: "components-web__sc-ltgfic-0"
-})(["", ";", ""], sharedStyles, _ref3 => {
+})(["", ";box-shadow:", ";"], sharedStyles, _ref3 => {
   let {
-    cellHeadingBackground,
-    cellHeadingBoxShadowColor
+    cellBoxShadowColor,
+    type
   } = _ref3;
-  return `
-  background-color: ${cellHeadingBackground};
-  box-shadow: inset 0 1px 0 ${cellHeadingBoxShadowColor}, inset 0 -1px 0 ${cellHeadingBoxShadowColor};`;
+  return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
 });
 
-const StyledSubHeading = /*#__PURE__*/_styledComponents.default.th.withConfig({
-  displayName: "Cell__StyledSubHeading",
-  componentId: "components-web__sc-ltgfic-1"
-})(["", ";background-color:", ";"], sharedStyles, _ref4 => {
-  let {
-    cellSubheadingBackground
-  } = _ref4;
-  return cellSubheadingBackground;
-});
+const StyledHeaderCell = createStyledCell('th');
+const StyledDataCell = createStyledCell('td');
 
-const StyledCell = /*#__PURE__*/_styledComponents.default.td.withConfig({
-  displayName: "Cell__StyledCell",
-  componentId: "components-web__sc-ltgfic-2"
-})(["", ";background-color:", ";"], sharedStyles, _ref5 => {
-  let {
-    cellBackground
-  } = _ref5;
-  return cellBackground;
-});
-
-const StyledRowHeading = /*#__PURE__*/_styledComponents.default.th.withConfig({
-  displayName: "Cell__StyledRowHeading",
-  componentId: "components-web__sc-ltgfic-3"
-})(["", ";background-color:", ";"], sharedStyles, _ref6 => {
-  let {
-    cellRowHeadingBackground
-  } = _ref6;
-  return cellRowHeadingBackground;
-});
-
-const Cell = _ref7 => {
+const Cell = _ref4 => {
   let {
     children,
-    type = 'default',
     isFirstInRow,
     align = 'left',
-    tokens: cellTokens
-  } = _ref7;
+    tokens: cellTokens,
+    type
+  } = _ref4;
   const {
     text,
     isScrollable: isTableScrollable,
-    variant,
-    tokens: tableTokens
+    tokens: tableTokens,
+    spacing
   } = (0, _Table.useTableContext)();
   const themeTokens = { ...tableTokens,
     ...cellTokens
   };
   const {
     cellMinWidth,
-    cellHeadingBackground,
-    cellHeadingBoxShadowColor,
     cellBoxShadowColor,
-    cellSubheadingBackground,
     cellBackground,
-    cellRowHeadingBackground,
     cellStickyShadow,
     cellPaddingTop,
     cellPaddingRight,
@@ -118,80 +101,72 @@ const Cell = _ref7 => {
     cellPaddingBottom,
     fontName,
     fontWeight,
-    fontSize
-  } = (0, _componentsBase.useThemeTokens)('Table', themeTokens, variant);
+    fontSize,
+    lineHeight,
+    stickyBackgroundColor
+  } = (0, _componentsBase.useThemeTokens)('Table', themeTokens, {
+    spacing,
+    type,
+    text
+  });
   const sharedProps = {
     align,
     isSticky: isTableScrollable && isFirstInRow,
+    cellBackground,
     cellMinWidth,
-    cellStickyShadow,
+    cellStickyShadow: (0, _componentsBase.applyShadowToken)(cellStickyShadow).boxShadow,
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingLeft,
     cellPaddingBottom,
+    stickyBackgroundColor,
     cellBoxShadowColor
   };
   const typographyTokens = {
     fontName,
     fontWeight,
-    fontSize
+    fontSize,
+    lineHeight
   };
 
   switch (type) {
-    case 'heading':
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeading, {
+    case HEADER_TYPE.HEADING:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
         scope: "col",
-        cellHeadingBackground: cellHeadingBackground,
-        cellHeadingBoxShadowColor: cellHeadingBoxShadowColor,
         ...sharedProps,
+        type: type,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           tokens: typographyTokens,
-          variant: {
-            size: 'h4'
-          },
           children: children
         })
       });
 
-    case 'subHeading':
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSubHeading, {
+    case HEADER_TYPE.SUBHEADING:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
         scope: "col",
-        cellSubheadingBackground: cellSubheadingBackground,
         ...sharedProps,
+        type: type,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           tokens: typographyTokens,
-          variant: {
-            size: 'h5'
-          },
           children: children
         })
       });
 
-    case 'rowHeading':
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledRowHeading, {
+    case HEADER_TYPE.ROWHEADING:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
         scope: "row",
-        cellRowHeadingBackground: cellRowHeadingBackground,
         ...sharedProps,
+        type: type,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           tokens: typographyTokens,
-          variant: {
-            size: text === 'small' ? 'h5' : 'h4'
-          },
           children: children
         })
       });
 
     default:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCell, {
-        cellBackground: cellBackground,
-        ...sharedProps,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDataCell, { ...sharedProps,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-          tokens: {
-            fontSize
-          },
-          variant: {
-            size: text
-          },
+          tokens: typographyTokens,
           children: children
         })
       });
@@ -199,14 +174,10 @@ const Cell = _ref7 => {
 };
 
 Cell.propTypes = {
+  type: _propTypes.default.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
   tokens: _propTypes.default.object,
   children: _propTypes.default.node,
 
-  /**
-   * Defines the visual styles of a cell, and whether it should be a `td` or `th` element
-   */
-  type: _propTypes.default.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
-
   /**
    * @ignore
    * Used internally for making the first column sticky

package/lib/Table/Header.js

@@ -25,7 +25,10 @@ const Header = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
-      children: _react.default.Children.map(children, child => /*#__PURE__*/(0, _react.cloneElement)(child, {
+      children: _react.default.Children.map(children, child =>
+      /*#__PURE__*/
+      // TO DO: pass type as a variant instead of prop
+      (0, _react.cloneElement)(child, {
         type: 'heading'
       }))
     })