Merge pull request #375 from dcos-labs/mp/feat/DCOS-56472-card-paddin…

…g-prop

DCOS-56472: Add paddingSize prop to Card

packages/card/components/Card.tsx

@@ -2,25 +2,34 @@ import * as React from "react";
 import { style } from "../style";
 import { cx } from "emotion";
 import { preserveAspectRatio, padding } from "../../shared/styles/styleUtils";
+import { SpaceSize } from "../../shared/styles/styleUtils/modifiers/modifierUtils";
 
 export interface CardProps {
   /**
    * `[width, height]` Keeps the card's width and height at a specific proportion. e.g.: 2:1 would be [2, 1]
    */
   aspectRatio?: [number, number];
+  /**
+   * The padding between the border and the content. Can be set for all viewport sizes, or configured to have different values at different viewport width breakpoints
+   */
+  paddingSize?: SpaceSize;
   children?: React.ReactNode | string;
 }
 
 class Card extends React.PureComponent<CardProps, {}> {
+  public static defaultProps: Partial<CardProps> = {
+    paddingSize: "m"
+  };
+
   public render() {
-    const { children, aspectRatio } = this.props;
+    const { children, aspectRatio, paddingSize } = this.props;
     const aspectRatioStyle = aspectRatio
       ? preserveAspectRatio(aspectRatio[0], aspectRatio[1])
       : null;
 
     return (
       <div className={cx(style, aspectRatioStyle)}>
-        <div className={padding("all")}>{children}</div>
+        <div className={padding("all", paddingSize)}>{children}</div>
       </div>
     );
   }

packages/card/stories/Card.stories.tsx

@@ -1,17 +1,46 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { withReadme } from "storybook-readme";
+import { withKnobs, select } from "@storybook/addon-knobs";
 import { Card } from "../index";
+import { SpaceSize } from "../../shared/styles/styleUtils/modifiers/modifierUtils";
 
 const readme = require("../README.md");
 
 storiesOf("Card", module)
   .addDecorator(withReadme([readme]))
+  .addDecorator(withKnobs)
   .add("default", () => <Card>default</Card>)
-  .add("2:1 aspect ratio", () => {
+  .add("paddingSize", () => {
+    const sizes = {
+      s: "s",
+      m: "m",
+      l: "l",
+      xl: "xl"
+    };
+    const size = select("paddingSize", sizes, "m");
+
     return (
-      <div style={{ maxWidth: "400px" }}>
-        <Card aspectRatio={[2, 1]}>I stay at a 2:1 aspect ratio</Card>
-      </div>
+      <Card paddingSize={size as SpaceSize}>
+        Use the Knobs panel to change the padding
+      </Card>
     );
-  });
+  })
+  .add("responsive paddingSize", () => (
+    <Card
+      paddingSize={{
+        default: "s",
+        small: "m",
+        medium: "l",
+        large: "xl",
+        jumbo: "xxl"
+      }}
+    >
+      Resize the viewport to see the padding change
+    </Card>
+  ))
+  .add("2:1 aspect ratio", () => (
+    <div style={{ maxWidth: "400px" }}>
+      <Card aspectRatio={[2, 1]}>I stay at a 2:1 aspect ratio</Card>
+    </div>
+  ));

packages/card/tests/Card.test.tsx

@@ -8,6 +8,11 @@ describe("Card", () => {
   it("default", () => {
     expect(toJSON(render(<Card>Example Content</Card>))).toMatchSnapshot();
   });
+  it("with paddingSize set", () => {
+    expect(
+      toJSON(render(<Card paddingSize="l">Example Content</Card>))
+    ).toMatchSnapshot();
+  });
   it("with aspectRatio set", () => {
     expect(
       toJSON(render(<Card aspectRatio={[2, 1]}>Example Content</Card>))

packages/card/tests/__snapshots__/Card.test.tsx.snap

@@ -23,3 +23,15 @@ exports[`Card with aspectRatio set 1`] = `
   </div>
 </div>
 `;
+
+exports[`Card with paddingSize set 1`] = `
+<div
+  class="css-1rmvfmi"
+>
+  <div
+    class="css-jl90x"
+  >
+    Example Content
+  </div>
+</div>
+`;