feat:(Typography) add text-align prop and support span variant <FE-6204 & FE-6220>

cypress/components/typography/typography.cy.tsx

@@ -21,6 +21,7 @@ const VARIANT_TYPES = [
   "segment-subheader",
   "segment-subheader-alt",
   "p",
+  "span",
   "small",
   "big",
   "sup",
@@ -74,6 +75,7 @@ const getSize = (variant: VariantTypes) => {
       return "13px";
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -106,6 +108,7 @@ const getLineHeight = (variant: VariantTypes) => {
     case "h5":
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -132,6 +135,7 @@ const getWeight = (variant: VariantTypes) => {
     case "h4":
     case "h5":
     case "p":
+    case "span":
     case "small":
     case "big":
     case "sub":
@@ -244,6 +248,24 @@ context("Tests for Typography component", () => {
       }
     );
 
+    it.each(VARIANT_TYPES as TypographyProps["variant"][])(
+      "should check text-align for %s variant prop for Typography component when set",
+      (variant) => {
+        CypressMountWithProviders(
+          <Typography variant={variant}>{testCypress}</Typography>
+        );
+
+        const variantElem = getAs(String(variant));
+        const textDecorationLine = getDecoration(String(variant));
+
+        cy.get(variantElem).should(
+          "have.css",
+          "text-decoration-line",
+          textDecorationLine
+        );
+      }
+    );
+
     it.each(["ol", "ul"])(
       "should check as prop set to %s for List component",
       (as) => {
@@ -278,6 +300,18 @@ context("Tests for Typography component", () => {
       }
     );
 
+    it.each([["left"], ["center"], ["right"], ["justify"]])(
+      "should adjust the text alignment when textAlign prop is set to %s",
+      (textAlignment) => {
+        CypressMountWithProviders(
+          <Typography variant="h1" textAlign={textAlignment}>
+            {testCypress}
+          </Typography>
+        );
+        cy.get("h1").and("have.css", "text-align", textAlignment);
+      }
+    );
+
     it("should display as visually hidden when screenReaderOnly prop is enabled", () => {
       CypressMountWithProviders(
         <Typography variant="h1" screenReaderOnly>

src/components/typography/typography.component.tsx

@@ -19,6 +19,7 @@ const VARIANT_TYPES = [
   "segment-subheader",
   "segment-subheader-alt",
   "p",
+  "span",
   "small",
   "big",
   "sup",
@@ -57,6 +58,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 */
@@ -90,6 +93,7 @@ export const Typography = ({
   listStyleType,
   whiteSpace,
   wordWrap,
+  textAlign,
   textOverflow,
   truncate,
   color = "blackOpacity90",
@@ -115,6 +119,7 @@ export const Typography = ({
       listStyleType={listStyleType}
       whiteSpace={whiteSpace}
       wordWrap={wordWrap}
+      textAlign={textAlign}
       textOverflow={textOverflow}
       truncate={truncate}
       color={color}

src/components/typography/typography.spec.tsx

@@ -387,6 +387,24 @@ describe("Typography", () => {
         { variant: "em" }
       );
     });
+    it("applies span styling", () => {
+      assert(
+        {
+          fontSize: "14px",
+          as: "span",
+          lineHeight: "21px",
+          fontWeight: "400",
+          textTransform: "none",
+          textDecoration: "none",
+          verticalAlign: undefined,
+          color: "rgba(0,0,0,0.90)",
+          display: undefined,
+          padding: "0",
+          margin: "0",
+        },
+        { variant: "span" }
+      );
+    });
   });
 
   describe("overrides", () => {
@@ -569,6 +587,24 @@ describe("Typography", () => {
       }
     );
 
+    it.each(["left", "right", "center", "justify", "initial", "inherit"])(
+      "applies text-align of %s",
+      (prop) => {
+        const wrapper = mount(
+          <ThemeProvider theme={mintTheme}>
+            <Typography textAlign={prop}>FooBar</Typography>
+          </ThemeProvider>
+        );
+
+        assertStyleMatch(
+          {
+            textAlign: prop,
+          },
+          wrapper.find(Typography)
+        );
+      }
+    );
+
     it.each(["clip", "ellipsis", "string", "initial", "inherit"])(
       "applies text-overflow of %s",
       (prop) => {

src/components/typography/typography.stories.tsx

@@ -60,6 +60,10 @@ export const VariantsStory: ComponentStory<typeof Fragment> = () => (
       The big variant uses larger font-face to draw attention but content has
       the same importance as standard text.
     </Typography>
+    <Typography variant="span">
+      The span variant, which is an inline element, can be used just as you
+      would normally expect.
+    </Typography>
     <Typography variant="p">
       The 1<Typography variant="sup">st</Typography>, 2
       <Typography variant="sup">nd</Typography> are examples of superscript.

src/components/typography/typography.style.ts

@@ -45,6 +45,7 @@ const getSize = (variant?: VariantTypes) => {
       return "13px";
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -77,6 +78,7 @@ const getLineHeight = (variant?: VariantTypes) => {
     case "h5":
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -103,6 +105,7 @@ const getWeight = (variant?: VariantTypes) => {
     case "h4":
     case "h5":
     case "p":
+    case "span":
     case "small":
     case "big":
     case "sub":
@@ -159,6 +162,7 @@ const StyledTypography = styled.span.attrs(
     listStyleType,
     whiteSpace,
     wordWrap,
+    textAlign,
     textOverflow,
     truncate,
     screenReaderOnly,
@@ -173,6 +177,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`