Add shadowSize=none to ShadowContainer and flexGrow to Container (#115)

src/components/Container.js

@@ -51,6 +51,7 @@ const BOX_SHADOWS = ["header"];
 
 const DEFAULT_PROPS = {
   bg: "transparent",
+  flexGrow: false,
   hasBorder: false,
   hasBreakpointWidth: false,
   hide: false,
@@ -95,6 +96,11 @@ function Container(_props) {
         }),
       };
     },
+    flexGrow: ({ flexGrow }) => {
+      return {
+        flexGrow: flexGrow ? 1 : 0,
+      };
+    },
     hasBreakpointWidth: ({ hasBreakpointWidth, margin }, theme, bp) => {
       if (hasBreakpointWidth !== true) {
         if (margin) {
@@ -165,6 +171,7 @@ Container.propTypes = {
   ...responsiveWidthType,
   ...responsiveHeightType,
   ...responsivePropType("bg", PropTypes.oneOf(BACKGROUNDS)),
+  ...responsivePropType("flexGrow", PropTypes.bool),
   ...responsivePropType("hasBorder", PropTypes.bool),
   ...responsivePropType("textStyle", PropTypes.oneOf(Text.TEXT_STYLES)),
   ...responsivePropType("textAlign", PropTypes.oneOf(Text.ALIGNS)),

src/components/Container.test.js

@@ -13,6 +13,7 @@ describe("Container", () => {
     expect(node.tagName).toBe("DIV");
     expect(node).toHaveStyle({
       backgroundColor: "transparent",
+      flexGrow: 0,
     });
   });
 
@@ -100,6 +101,14 @@ describe("Container", () => {
     });
   });
 
+  it("with flexGrow", () => {
+    render(<Container flexGrow>Hello World</Container>);
+
+    expect(screen.getByText("Hello World")).toHaveStyle({
+      flexGrow: 1,
+    });
+  });
+
   it("with hasBorder", () => {
     render(<Container hasBorder>Hello World</Container>);
 

src/components/ShadowContainer.js

@@ -102,7 +102,7 @@ function getColors(backgroundVariant, shadowColor) {
   };
 }
 
-const SHADOW_SIZES = ["tiny", "small", "medium", "large"];
+const SHADOW_SIZES = ["none", "tiny", "small", "medium", "large"];
 const SHADOW_DIRECTIONS = ["left", "right"];
 const SHADOW_COLORS = ["grey", "blue", "pink", "purple"];
 const SHADOW_CONTRASTS = ["low", "medium", "high"];
@@ -156,6 +156,10 @@ function ShadowContainer(props) {
     margin: responsiveMargin,
     padding: responsivePadding,
     shadowSize: ({ shadowSize }) => {
+      if (shadowSize === "none") {
+        return {};
+      }
+
       const contentMinSize = sizesMap[shadowSize].minSize;
 
       return {
@@ -169,10 +173,17 @@ function ShadowContainer(props) {
     DEFAULT_PROPS,
     {
       shadowSize: ({ shadowSize }) => {
+        const display = shadowSize === "none" ? "none" : "block";
+
+        if (shadowSize === "none") {
+          return { display };
+        }
+
         const shadowOffset = sizesMap[shadowSize].offset;
         const shadowBorderWidth = sizesMap[shadowSize].borderWidth;
 
         return {
+          display,
           top: shadowOffset - contentBorderWidth,
           left:
             (shadowDirection === "left" ? -shadowOffset : shadowOffset) -
@@ -189,6 +200,13 @@ function ShadowContainer(props) {
     <BackgroundProvider value={contentBackgroundColor}>
       <div
         css={{
+          /* 
+            We set { display: "flex", flexDirection: "column" } in order to allow `children`
+            to be full height.
+            See: https://stackoverflow.com/q/8468066/247243
+          */
+          display: "flex",
+          flexDirection: "column",
           boxSizing: "border-box",
           ...contentResponsiveCSS,
           backgroundColor: theme.getColor(contentBackgroundColor),
@@ -200,7 +218,6 @@ function ShadowContainer(props) {
           "::before": {
             transform: "translateZ(-1px)", // See: https://stackoverflow.com/a/51432213/247243
             boxSizing: "border-box",
-            display: "block",
             content: '""',
             position: "absolute",
             width: shadowSizePx,