carbon-react 121.1.0 → 122.0.0

package/esm/components/button/button.component.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { IconType } from "../icon";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipPositions } from "../tooltip/tooltip.config";
 export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
 export declare type SizeOptions = "small" | "medium" | "large";
 export declare type ButtonIconPosition = "before" | "after";
-export interface ButtonProps extends SpaceProps {
+export interface ButtonProps extends SpaceProps, TagProps {
     /**
      * Prop to specify the aria-label attribute of the component
      * Defaults to the iconType, when the component has only an icon

package/esm/components/button/button.component.js

@@ -176,6 +176,9 @@ Button.propTypes = {
   "aria-label": PropTypes.string,
   "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "destructive": PropTypes.bool,
   "disabled": PropTypes.bool,
   "forwardRef": PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
@@ -523,6 +526,9 @@ ButtonWithForwardRef.propTypes = {
   "aria-label": PropTypes.string,
   "buttonType": PropTypes.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
   "destructive": PropTypes.bool,
   "disabled": PropTypes.bool,
   "forwardRef": PropTypes.oneOfType([PropTypes.func, PropTypes.shape({

package/esm/components/heading/heading.style.d.ts

@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/pod/pod.component.d.ts

@@ -25,7 +25,7 @@ export interface PodProps extends MarginProps {
     /** A component to render as a Pod footer */
     footer?: string | React.ReactNode;
     /** Supplies an edit action to the pod */
-    onEdit?: string | Record<string, unknown> | ((ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void);
+    onEdit?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /** Supplies a delete action to the pod */
     onDelete?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /** Supplies an undo action to the pod in soft delete state. */

package/esm/components/pod/pod.component.js

@@ -1,13 +1,10 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useState, useMemo } from "react";
 import PropTypes from "prop-types";
-import Logger from "../../__internal__/utils/logger";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { StyledBlock, StyledContent, StyledEditAction, StyledActionsContainer, StyledDeleteButton, StyledUndoButton, StyledFooter, StyledPod, StyledHeader, StyledSubtitle, StyledTitle } from "./pod.style";
 import Icon from "../icon";
 import Event from "../../__internal__/utils/helpers/events";
-let deprecationOnEditStringWarnTriggered = false;
-let deprecationOnEditObjectWarnTriggered = false;
 const Pod = /*#__PURE__*/React.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
@@ -31,14 +28,6 @@ const Pod = /*#__PURE__*/React.forwardRef(({
   variant = "primary",
   ...rest
 }, ref) => {
-  if (!deprecationOnEditStringWarnTriggered && typeof onEdit === "string") {
-    deprecationOnEditStringWarnTriggered = true;
-    Logger.deprecate("Support for passing strings to the `onEdit` prop of the `Pod` component is now deprecated. Please only pass event handlers to `onEdit`.");
-  }
-  if (!deprecationOnEditObjectWarnTriggered && typeof onEdit === "object") {
-    deprecationOnEditObjectWarnTriggered = true;
-    Logger.deprecate("Support for passing objects to the `onEdit` prop of the `Pod` component is now deprecated. Please only pass event handlers to `onEdit`.");
-  }
   const [isEditFocused, setEditFocused] = useState(false);
   const [isEditHovered, setEditHovered] = useState(false);
   const [isDeleteFocused, setDeleteFocused] = useState(false);
@@ -58,10 +47,8 @@ const Pod = /*#__PURE__*/React.forwardRef(({
     onMouseLeave: () => setEditHovered(false),
     onFocus: () => setEditFocused(true),
     onBlur: () => setEditFocused(false),
-    ...(typeof onEdit === "function" && {
-      onClick: processPodAction(onEdit),
-      onKeyDown: processPodAction(onEdit)
-    })
+    onClick: onEdit && processPodAction(onEdit),
+    onKeyDown: onEdit && processPodAction(onEdit)
   };
   return /*#__PURE__*/React.createElement(StyledPod, _extends({
     alignTitle: alignTitle,
@@ -131,9 +118,7 @@ const Pod = /*#__PURE__*/React.forwardRef(({
     noBorder: !border,
     size: size,
     variant: variant
-  }, typeof onEdit === "string" ? {
-    href: onEdit
-  } : onEdit), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement(Icon, {
     type: "edit"
   })), !softDelete && onDelete && /*#__PURE__*/React.createElement(StyledDeleteButton, {
     "aria-label": l.actions.delete(),
@@ -320,7 +305,7 @@ Pod.propTypes = {
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
   "onDelete": PropTypes.func,
-  "onEdit": PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),
+  "onEdit": PropTypes.func,
   "onUndo": PropTypes.func,
   "size": PropTypes.oneOf(["extra-large", "extra-small", "large", "medium", "small"]),
   "softDelete": PropTypes.bool,

package/esm/components/pod/pod.style.d.ts

@@ -32,7 +32,7 @@ interface CommonPodButtonProps extends Pick<PodProps, "internalEditButton"> {
 interface StyledEditActionProps extends CommonPodButtonProps {
     displayOnlyOnHover?: boolean;
 }
-declare const StyledEditAction: import("styled-components").StyledComponent<"a", any, StyledEditActionProps, never>;
+declare const StyledEditAction: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, StyledEditActionProps, never>;
 declare const StyledDeleteButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, CommonPodButtonProps, never>;
 declare const StyledUndoButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, CommonPodButtonProps, never>;
 interface StyledHeaderProps extends Pick<PodProps, "alignTitle" | "internalEditButton"> {

package/esm/components/pod/pod.style.js

@@ -152,7 +152,7 @@ const actionButtonBackgrounds = {
   transparent: "var(--colorsActionMajorTransparent)",
   tile: "var(--colorsActionMajorYang100)"
 };
-const StyledEditAction = styled.a`
+const StyledEditAction = styled(IconButton)`
   && {
     ${({
   displayOnlyOnHover,

package/esm/components/typography/typography.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export declare type VariantTypes = typeof VARIANT_TYPES[number];
 export interface TypographyProps extends SpaceProps, TagProps {
     /** Override the variant component */
@@ -30,6 +30,8 @@ export interface TypographyProps extends SpaceProps, TagProps {
     whiteSpace?: string;
     /** Override the word-wrap */
     wordWrap?: string;
+    /** Override the text-align */
+    textAlign?: string;
     /** Override the text-overflow */
     textOverflow?: string;
     /** Apply truncation */
@@ -49,7 +51,7 @@ export interface TypographyProps extends SpaceProps, TagProps {
     screenReaderOnly?: boolean;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/esm/components/typography/typography.component.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../style/utils";
 import StyledTypography from "./typography.style";
-const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export const Typography = ({
   "data-component": dataComponent,
   variant = "p",
@@ -19,6 +19,7 @@ export const Typography = ({
   listStyleType,
   whiteSpace,
   wordWrap,
+  textAlign,
   textOverflow,
   truncate,
   color = "blackOpacity90",
@@ -43,6 +44,7 @@ export const Typography = ({
     listStyleType: listStyleType,
     whiteSpace: whiteSpace,
     wordWrap: wordWrap,
+    textAlign: textAlign,
     textOverflow: textOverflow,
     truncate: truncate,
     color: color,

package/esm/components/typography/typography.style.js

@@ -42,6 +42,7 @@ const getSize = variant => {
       return "13px";
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -73,6 +74,7 @@ const getLineHeight = variant => {
     case "h5":
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -98,6 +100,7 @@ const getWeight = variant => {
     case "h4":
     case "h5":
     case "p":
+    case "span":
     case "small":
     case "big":
     case "sub":
@@ -149,6 +152,7 @@ const StyledTypography = styled.span.attrs(({
   listStyleType,
   whiteSpace,
   wordWrap,
+  textAlign,
   textOverflow,
   truncate,
   screenReaderOnly
@@ -163,6 +167,7 @@ const StyledTypography = styled.span.attrs(({
     padding: 0;
     white-space: ${truncate ? "nowrap" : whiteSpace};
     word-wrap: ${wordWrap};
+    text-align: ${textAlign};
     text-overflow: ${truncate ? "ellipsis" : textOverflow};
     ${truncate && css`
       overflow: hidden;

package/lib/components/button/button.component.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { IconType } from "../icon";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { TooltipPositions } from "../tooltip/tooltip.config";
 export declare type ButtonTypes = "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground";
 export declare type SizeOptions = "small" | "medium" | "large";
 export declare type ButtonIconPosition = "before" | "after";
-export interface ButtonProps extends SpaceProps {
+export interface ButtonProps extends SpaceProps, TagProps {
     /**
      * Prop to specify the aria-label attribute of the component
      * Defaults to the iconType, when the component has only an icon

package/lib/components/button/button.component.js

@@ -185,6 +185,9 @@ Button.propTypes = {
   "aria-label": _propTypes.default.string,
   "buttonType": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
   "destructive": _propTypes.default.bool,
   "disabled": _propTypes.default.bool,
   "forwardRef": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
@@ -533,6 +536,9 @@ ButtonWithForwardRef.propTypes = {
   "aria-label": _propTypes.default.string,
   "buttonType": _propTypes.default.oneOf(["darkBackground", "dashed", "primary", "secondary", "tertiary"]),
   "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
   "destructive": _propTypes.default.bool,
   "disabled": _propTypes.default.bool,
   "forwardRef": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({

package/lib/components/heading/heading.style.d.ts

@@ -12,7 +12,7 @@ declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };
 declare const StyledHeadingTitle: import("styled-components").StyledComponent<{
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
     displayName: string;
 }, any, StyledHeadingTitleProps, never>;
 declare const StyledHeadingPills: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/pod/pod.component.d.ts

@@ -25,7 +25,7 @@ export interface PodProps extends MarginProps {
     /** A component to render as a Pod footer */
     footer?: string | React.ReactNode;
     /** Supplies an edit action to the pod */
-    onEdit?: string | Record<string, unknown> | ((ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void);
+    onEdit?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /** Supplies a delete action to the pod */
     onDelete?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /** Supplies an undo action to the pod in soft delete state. */

package/lib/components/pod/pod.component.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _pod = require("./pod.style");
 var _icon = _interopRequireDefault(require("../icon"));
@@ -15,8 +14,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-let deprecationOnEditStringWarnTriggered = false;
-let deprecationOnEditObjectWarnTriggered = false;
 const Pod = /*#__PURE__*/_react.default.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
@@ -40,14 +37,6 @@ const Pod = /*#__PURE__*/_react.default.forwardRef(({
   variant = "primary",
   ...rest
 }, ref) => {
-  if (!deprecationOnEditStringWarnTriggered && typeof onEdit === "string") {
-    deprecationOnEditStringWarnTriggered = true;
-    _logger.default.deprecate("Support for passing strings to the `onEdit` prop of the `Pod` component is now deprecated. Please only pass event handlers to `onEdit`.");
-  }
-  if (!deprecationOnEditObjectWarnTriggered && typeof onEdit === "object") {
-    deprecationOnEditObjectWarnTriggered = true;
-    _logger.default.deprecate("Support for passing objects to the `onEdit` prop of the `Pod` component is now deprecated. Please only pass event handlers to `onEdit`.");
-  }
   const [isEditFocused, setEditFocused] = (0, _react.useState)(false);
   const [isEditHovered, setEditHovered] = (0, _react.useState)(false);
   const [isDeleteFocused, setDeleteFocused] = (0, _react.useState)(false);
@@ -67,10 +56,8 @@ const Pod = /*#__PURE__*/_react.default.forwardRef(({
     onMouseLeave: () => setEditHovered(false),
     onFocus: () => setEditFocused(true),
     onBlur: () => setEditFocused(false),
-    ...(typeof onEdit === "function" && {
-      onClick: processPodAction(onEdit),
-      onKeyDown: processPodAction(onEdit)
-    })
+    onClick: onEdit && processPodAction(onEdit),
+    onKeyDown: onEdit && processPodAction(onEdit)
   };
   return /*#__PURE__*/_react.default.createElement(_pod.StyledPod, _extends({
     alignTitle: alignTitle,
@@ -140,9 +127,7 @@ const Pod = /*#__PURE__*/_react.default.forwardRef(({
     noBorder: !border,
     size: size,
     variant: variant
-  }, typeof onEdit === "string" ? {
-    href: onEdit
-  } : onEdit), /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }), /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "edit"
   })), !softDelete && onDelete && /*#__PURE__*/_react.default.createElement(_pod.StyledDeleteButton, {
     "aria-label": l.actions.delete(),
@@ -329,7 +314,7 @@ Pod.propTypes = {
     "valueOf": _propTypes.default.func.isRequired
   }), _propTypes.default.string]),
   "onDelete": _propTypes.default.func,
-  "onEdit": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.string]),
+  "onEdit": _propTypes.default.func,
   "onUndo": _propTypes.default.func,
   "size": _propTypes.default.oneOf(["extra-large", "extra-small", "large", "medium", "small"]),
   "softDelete": _propTypes.default.bool,

package/lib/components/pod/pod.style.d.ts

@@ -32,7 +32,7 @@ interface CommonPodButtonProps extends Pick<PodProps, "internalEditButton"> {
 interface StyledEditActionProps extends CommonPodButtonProps {
     displayOnlyOnHover?: boolean;
 }
-declare const StyledEditAction: import("styled-components").StyledComponent<"a", any, StyledEditActionProps, never>;
+declare const StyledEditAction: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, StyledEditActionProps, never>;
 declare const StyledDeleteButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, CommonPodButtonProps, never>;
 declare const StyledUndoButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, CommonPodButtonProps, never>;
 interface StyledHeaderProps extends Pick<PodProps, "alignTitle" | "internalEditButton"> {

package/lib/components/pod/pod.style.js

@@ -166,7 +166,7 @@ const actionButtonBackgrounds = {
   transparent: "var(--colorsActionMajorTransparent)",
   tile: "var(--colorsActionMajorYang100)"
 };
-const StyledEditAction = _styledComponents.default.a`
+const StyledEditAction = (0, _styledComponents.default)(_iconButton.default)`
   && {
     ${({
   displayOnlyOnHover,

package/lib/components/typography/typography.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 export declare type VariantTypes = typeof VARIANT_TYPES[number];
 export interface TypographyProps extends SpaceProps, TagProps {
     /** Override the variant component */
@@ -30,6 +30,8 @@ export interface TypographyProps extends SpaceProps, TagProps {
     whiteSpace?: string;
     /** Override the word-wrap */
     wordWrap?: string;
+    /** Override the text-align */
+    textAlign?: string;
     /** Override the text-overflow */
     textOverflow?: string;
     /** Apply truncation */
@@ -49,7 +51,7 @@ export interface TypographyProps extends SpaceProps, TagProps {
     screenReaderOnly?: boolean;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/lib/components/typography/typography.component.js

@@ -11,7 +11,7 @@ var _utils = require("../../style/utils");
 var _typography = _interopRequireDefault(require("./typography.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
+const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
 const Typography = ({
   "data-component": dataComponent,
   variant = "p",
@@ -26,6 +26,7 @@ const Typography = ({
   listStyleType,
   whiteSpace,
   wordWrap,
+  textAlign,
   textOverflow,
   truncate,
   color = "blackOpacity90",
@@ -50,6 +51,7 @@ const Typography = ({
     listStyleType: listStyleType,
     whiteSpace: whiteSpace,
     wordWrap: wordWrap,
+    textAlign: textAlign,
     textOverflow: textOverflow,
     truncate: truncate,
     color: color,

package/lib/components/typography/typography.style.js

@@ -51,6 +51,7 @@ const getSize = variant => {
       return "13px";
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -82,6 +83,7 @@ const getLineHeight = variant => {
     case "h5":
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -107,6 +109,7 @@ const getWeight = variant => {
     case "h4":
     case "h5":
     case "p":
+    case "span":
     case "small":
     case "big":
     case "sub":
@@ -158,6 +161,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
   listStyleType,
   whiteSpace,
   wordWrap,
+  textAlign,
   textOverflow,
   truncate,
   screenReaderOnly
@@ -172,6 +176,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
     padding: 0;
     white-space: ${truncate ? "nowrap" : whiteSpace};
     word-wrap: ${wordWrap};
+    text-align: ${textAlign};
     text-overflow: ${truncate ? "ellipsis" : textOverflow};
     ${truncate && (0, _styledComponents.css)`
       overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "121.1.0",
+  "version": "122.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",