Merge pull request #48 from zapify-ui/boxRefactor

Box refactor

.gitignore

@@ -3,4 +3,4 @@ lib
 node_modules
 *.log
 .cache
-src/components/**/*.css
+src/components/**/*.css

src/components/Box/__snapshots__/box.test.js.snap

@@ -13,10 +13,5 @@ exports[`box default test case 1`] = `
       },
     }
   }
->
-  This is: 
-  Primary
-   with textColor: 
-  white
-</div>
+/>
 `;

src/components/Box/index.js

@@ -10,9 +10,8 @@ import "./Box.css";
 
 function Box(props) {
   const { color, textColor } = props;
-
-  const boxPadding = `${props.p}em`,
-    boxMargin = `${props.m}em`;
+  const boxPadding = `${props.p}em`;
+  const boxMargin = `${props.m}em`;
 
   const _styles = {
     padding: `${boxPadding}`,
@@ -21,11 +20,7 @@ function Box(props) {
     textColor: { textColor }
   };
 
-  return (
-    <div className={color} style={_styles}>
-      This is: {color} with textColor: {textColor}
-    </div>
-  );
+  return <div className={color} style={_styles} />;
 }
 
 Box.defaultProps = {

src/components/Typography/Typography.scss

@@ -2,5 +2,4 @@
 
 .typography {
   font-family: $zapFont, sans-serif;
-  color: silver;
 }

src/components/Typography/__snapshots__/Typography.test.js.snap

@@ -3,6 +3,11 @@
 exports[`Container tests 1`] = `
 <h5
   className="typography"
+  style={
+    Object {
+      "color": "#fff",
+    }
+  }
 >
   Zapify Ui Text
 </h5>

src/components/Typography/index.js

@@ -3,29 +3,56 @@ import PropTypes from "prop-types";
 import "./Typography.css";
 
 function Typography(props) {
-  const { variant, children } = props;
+  const { variant, children, color } = props;
+  const _styles = { color };
   switch (variant) {
     case "h1":
-      return <h1 className="typography">{children}</h1>;
+      return (
+        <h1 className="typography" style={_styles}>
+          {children}
+        </h1>
+      );
     case "h2":
-      return <h2 className="typography">{children}</h2>;
+      return (
+        <h2 className="typography" style={_styles}>
+          {children}
+        </h2>
+      );
     case "h3":
-      return <h3 className="typography">{children}</h3>;
+      return (
+        <h3 className="typography" style={_styles}>
+          {children}
+        </h3>
+      );
     case "h4":
-      return <h4 className="typography">{children}</h4>;
+      return (
+        <h4 className="typography" style={_styles}>
+          {children}
+        </h4>
+      );
     case "h5":
-      return <h5 className="typography">{children}</h5>;
+      return (
+        <h5 className="typography" style={_styles}>
+          {children}
+        </h5>
+      );
     default:
-      return <p className="typography">{children}</p>;
+      return (
+        <p className="typography" style={_styles}>
+          {children}
+        </p>
+      );
   }
 }
 Typography.propTypes = {
   variant: PropTypes.string,
-  children: PropTypes.string
+  children: PropTypes.string,
+  color: PropTypes.string
 };
 
 Typography.defaultProps = {
   variant: "h5",
-  children: "Zapify Ui Text"
+  children: "Zapify Ui Text",
+  color: "#fff"
 };
 export default Typography;

src/stories/box.stories.js

@@ -1,18 +1,58 @@
 /* eslint-disable import/no-extraneous-dependencies */
 
 import React from "react";
-import { storiesOf } from "@storybook/react";
+import { storiesOf, addDecorator } from "@storybook/react";
+import { withInfo } from "@storybook/addon-info";
 import Box from "../components/Box";
+import Typography from "../components/Typography";
 
 storiesOf("Box", module)
-  .add("color padding and margin", () => (
+  .addDecorator(withInfo)
+  .addWithJSX("color primary Text Color black", () => (
     <div>
+      <center>
+        <Typography>color primary Text Color black</Typography>
+      </center>{" "}
       <Box color="Primary" textColor="black" p={2} m={2.5} />
+    </div>
+  ))
+  .addWithJSX("Color Secondary Text color White", () => (
+    <div>
+      <center>
+        <Typography>Color Secondary Text color White</Typography>
+      </center>{" "}
       <Box color="Secondary" textColor="white" p={2} m={2.5} />
+    </div>
+  ))
+  .addWithJSX("Color Dark Text color white", () => (
+    <div>
+      <center>
+        <Typography>Color Dark Text color white</Typography>
+      </center>{" "}
       <Box color="dark" textColor="white" p={2} m={2.5} />
+    </div>
+  ))
+  .addWithJSX("Color DarkPrimary with textColor White", () => (
+    <div>
+      <center>
+        <Typography>Color DarkPrimary with textColor White</Typography>
+      </center>{" "}
       <Box color="darkPrimary" textColor="white" p={2} m={2.5} />
+    </div>
+  ))
+  .addWithJSX("Color DarkSecondary with textColor White", () => (
+    <div>
+      <center>
+        <Typography>Color DarkSecondary with textColor White</Typography>
+      </center>{" "}
       <Box color="darkSecondary" textColor="white" p={2} m={2.5} />
-      <Box color="disabled" textColor="black" p={2} m={2.5} />
     </div>
   ))
-  .add("User Customisation", () => <div />);
+  .addWithJSX("Color Disabled with textColor Black", () => (
+    <div>
+      <center>
+        <Typography>Color Disabled with textColor Black</Typography>
+      </center>{" "}
+      <Box color="disabled" textColor="black" p={2} m={2.5} />
+    </div>
+  ));

src/stories/typography.stories.js

@@ -7,9 +7,10 @@ import Typography from "../components/Typography";
 
 storiesOf("Typography", module)
   .addDecorator(withInfo)
-  .addWithJSX("with default Props", () => <Typography />)
-  .addWithJSX("with h1", () => <Typography variant="h1">Hello</Typography>)
-  .addWithJSX("with h2", () => <Typography variant="h2">Hello</Typography>)
-  .addWithJSX("with h3", () => <Typography variant="h3">Hello</Typography>)
-  .addWithJSX("with h4", () => <Typography variant="h4">Hello</Typography>)
-  .addWithJSX("with h5", () => <Typography variant="h5">Hello</Typography>);
+  .addWithJSX("with default Props", () => <Typography>With Default Props</Typography>)
+  .addWithJSX("with h1", () => <Typography variant="h1">with h1</Typography>)
+  .addWithJSX("with h2", () => <Typography variant="h2">with h2</Typography>)
+  .addWithJSX("with h3", () => <Typography variant="h3">with h3</Typography>)
+  .addWithJSX("with h4", () => <Typography variant="h4">with h4</Typography>)
+  .addWithJSX("with h5", () => <Typography variant="h5">with h5</Typography>)
+  .addWithJSX("with custom color", () => <Typography variant="h2" color="red">with h2 and custom color prop</Typography>);