feat(typography): add text-align prop

Sage · Oct 17, 2023 · d7af436 · d7af436
1 parent 88a2a81
commit d7af436
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 0 deletions.
diff --git a/cypress/components/typography/typography.cy.tsx b/cypress/components/typography/typography.cy.tsx
@@ -248,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) => {
@@ -282,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>

diff --git a/src/components/typography/typography.component.tsx b/src/components/typography/typography.component.tsx
@@ -58,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 */
@@ -91,6 +93,7 @@ export const Typography = ({
   listStyleType,
   whiteSpace,
   wordWrap,
+  textAlign,
   textOverflow,
   truncate,
   color = "blackOpacity90",
@@ -116,6 +119,7 @@ export const Typography = ({
       listStyleType={listStyleType}
       whiteSpace={whiteSpace}
       wordWrap={wordWrap}
+      textAlign={textAlign}
       textOverflow={textOverflow}
       truncate={truncate}
       color={color}

diff --git a/src/components/typography/typography.spec.tsx b/src/components/typography/typography.spec.tsx
@@ -587,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) => {

diff --git a/src/components/typography/typography.style.ts b/src/components/typography/typography.style.ts
@@ -162,6 +162,7 @@ const StyledTypography = styled.span.attrs(
     listStyleType,
     whiteSpace,
     wordWrap,
+    textAlign,
     textOverflow,
     truncate,
     screenReaderOnly,
@@ -176,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`