Add responsive textAlign prop to Container and align='inherit' to Text

src/components/Container.js

@@ -6,16 +6,19 @@ import {
   responsiveMarginType,
   responsivePaddingType,
   responsiveWidthType,
-  responsiveHeightType
+  responsiveHeightType,
+  responsivePropType
 } from "../hooks/useResponsiveProp";
 import useResponsivePropsCSS from "../hooks/useResponsivePropsCSS";
 import {
   responsiveMargin,
   responsivePadding,
   responsiveWidth,
   responsiveHeight,
+  responsiveTextAlign,
   mergeResponsiveCSS
 } from "../utils/css";
+import { ALIGNS as TEXT_ALIGNS } from "./Text";
 import tokens from "../themes/tokens";
 
 export const BACKGROUNDS = [
@@ -40,7 +43,8 @@ function Container(_props) {
     margin: responsiveMargin,
     padding: responsivePadding,
     width: responsiveWidth,
-    height: responsiveHeight
+    height: responsiveHeight,
+    textAlign: responsiveTextAlign
   });
   const responsiveCSS = hasBreakpointWidth
     ? mergeResponsiveCSS(
@@ -103,6 +107,7 @@ Container.propTypes = {
   ...responsivePaddingType,
   ...responsiveWidthType,
   ...responsiveHeightType,
+  ...responsivePropType("textAlign", PropTypes.oneOf(TEXT_ALIGNS)),
   hasBreakpointWidth: PropTypes.bool,
   children: PropTypes.node
 };

src/components/Container.test.js

@@ -53,6 +53,17 @@ describe("Container", () => {
     `);
   });
 
+  it("with textAlign", () => {
+    const { getByText } = render(
+      <Container textAlign="right">Hello World</Container>
+    );
+    const node = getByText("Hello World");
+
+    expect(node).toHaveStyle(`
+      text-align: right;
+    `);
+  });
+
   it("with background color", () => {
     const { getByText } = render(
       <Container bg="secondary.lightBlue.t30">Hello World</Container>

src/components/Text.js

@@ -33,7 +33,7 @@ export const COLORS = [
   "conditional.positive.text",
   "conditional.negative.text"
 ];
-export const ALIGNS = ["left", "center", "right"];
+export const ALIGNS = ["inherit", "left", "center", "right"];
 export const WEIGHTS = ["regular", "bold"];
 
 export const allowedColors = [
@@ -80,7 +80,7 @@ export const DEFAULT_PROPS = {
   intent: "body1",
   weight: "regular",
   color: "black",
-  align: "left",
+  align: "inherit",
   wrap: true
 };
 

src/components/Text.test.js

@@ -17,7 +17,7 @@ describe("Text", () => {
       line-height: 24px;
       letter-spacing: 0px;
       color: #000000;
-      text-align: left;
+      text-align: inherit;
       margin: 0;
     `);
   });

src/utils/css.js

@@ -1,5 +1,6 @@
 import tokens from "../themes/tokens";
 import { hasOwnProperty } from "./core";
+import { ALIGNS as TEXT_ALIGNS } from "../components/Text";
 
 export function getSpaceValue(space) {
   if (typeof space === "number") {
@@ -49,6 +50,14 @@ export function getSizeValue(size) {
   return tokens.sizes[size] || null;
 }
 
+function getTextAlignValue(textAlign) {
+  if (TEXT_ALIGNS.includes(textAlign)) {
+    return textAlign;
+  }
+
+  return null;
+}
+
 const SPAN_REGEX = /^(\d+)(-(\d+))?$/;
 
 export function getGridLines(span, { allAllowed = false } = {}) {
@@ -206,3 +215,11 @@ export const responsiveHeight = {
     return height === null ? {} : { height };
   }
 };
+
+export const responsiveTextAlign = {
+  getCSS: value => {
+    const textAlign = getTextAlignValue(value);
+
+    return textAlign === null ? {} : { textAlign };
+  }
+};

src/utils/css.test.js

@@ -5,7 +5,8 @@ import {
   responsiveMargin,
   responsivePadding,
   responsiveWidth,
-  responsiveHeight
+  responsiveHeight,
+  responsiveTextAlign
 } from "./css";
 
 describe("getMinMediaQueries", () => {
@@ -156,3 +157,24 @@ describe("responsiveHeight", () => {
     expect(responsiveHeight.getCSS("")).toStrictEqual({});
   });
 });
+
+describe("responsiveTextAlign", () => {
+  it("valid textAlign", () => {
+    expect(responsiveTextAlign.getCSS("inherit")).toStrictEqual({
+      textAlign: "inherit"
+    });
+    expect(responsiveTextAlign.getCSS("left")).toStrictEqual({
+      textAlign: "left"
+    });
+    expect(responsiveTextAlign.getCSS("center")).toStrictEqual({
+      textAlign: "center"
+    });
+    expect(responsiveTextAlign.getCSS("right")).toStrictEqual({
+      textAlign: "right"
+    });
+  });
+
+  it("invalid textAlign", () => {
+    expect(responsiveTextAlign.getCSS("bottom")).toStrictEqual({});
+  });
+});

website/src/pages/components/container/index.js

@@ -46,12 +46,13 @@ function ContainerPage() {
           <Link href="https://google.com" newTab={true}>Google</Link>{" "}
           <Link href="https://facebook.com" newTab={true}>Facebook</Link>
         </Text>
-        <Text>Here are some buttons:<br />
-          <Button isFullWidth={false}>Submit</Button>{" "}
-          <Button variant="secondary" isFullWidth={false}>Cancel</Button>
+        <Text>
+          Here are some buttons:<br />
+          <Button isFullWidth={false}>Submit</Button>
+          <Button variant="secondary" isFullWidth={false} margin="0 0 0 2">Cancel</Button>
         </Text>
-        <Text>Here is a nested container with margin and padding:</Text>
-        <Container bg="primary.blue.t100" margin="4" padding="6">
+        <Text>Here is a nested container:</Text>
+        <Container bg="primary.blue.t100" margin="2" padding="6" textAlign-md="center">
           <Text>Text color is white here. Magic!</Text>
         </Container>
       </Grid>