Merge pull request #41 from fossapps/6-create-component-card

chore(card): create component card

src/app/components/Card/Card.stories.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Card } from "./Card";
+
+export default {
+  component: Card,
+  title: "Card"
+};
+
+const card = {
+  description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the " +
+    "industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled ",
+  featureId: "Rohit",
+  hypothesis: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+};
+
+export const CardView = () => {
+  return <Card description={card.description} featureId={card.featureId} hypothesis={card.hypothesis}/>;
+};

src/app/components/Card/Card.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { style } from "typestyle";
 import { Color, Spacing } from "../../constants";
+import { boxShadow } from "../../constants/BoxShadow";
 import { Avatar } from "../Avatar/Avatar";
+import { ViewIcon } from "./ViewIcon";
 
 interface IProps {
   description: string;
@@ -10,27 +12,42 @@ interface IProps {
 }
 const styles = {
   body: style({
+    color: Color.BLACK,
     flexGrow: 1,
     padding: Spacing.L
   }),
   container: style({
-    border: `1px solid ${Color.GREY}`,
-    display: "flex",
-    flexDirection: "column",
-    height: 250,
+    $nest: {
+      "&:hover": {
+        boxShadow: boxShadow("L")
+      }
+    },
+
+    backgroundColor: Color.WHITE,
+    boxShadow: boxShadow("XS"),
     padding: Spacing.NONE,
+    transition: ".2s",
     width: 250
   }),
   featureId: style({
-    marginLeft: Spacing.S
+    marginLeft: Spacing.M
+  }),
+  features: style({
+    alignItems: "center",
+    display: "flex"
   }),
   footer: style({
     alignItems: "center",
-    borderTop: `1px solid ${Color.GREY}`,
+    boxShadow: boxShadow("XS"),
     display: "flex",
+    justifyContent: "space-between",
     paddingBottom: Spacing.M,
-    paddingLeft: Spacing.L,
-    paddingTop: Spacing.M
+    paddingLeft: Spacing.S,
+    paddingTop: Spacing.L
+  }),
+  viewBtn: style({
+    justifySelf: "end",
+    marginRight: Spacing.M
   })
 };
 export const Card: React.FC<IProps> = (props): JSX.Element => {
@@ -42,8 +59,11 @@ export const Card: React.FC<IProps> = (props): JSX.Element => {
         {props.hypothesis}
       </div>
       <div className={styles.footer}>
-        <Avatar label={props.featureId.split("")[0]}/>
-        <span className={styles.featureId}>{props.featureId}</span>
+        <div className={styles.features}>
+          <Avatar label={props.featureId.split("")[0]}/>
+          <span className={styles.featureId}>{props.featureId}</span>
+        </div>
+        <div className={styles.viewBtn}><ViewIcon/></div>
       </div>
     </div>
   );

src/app/components/Card/ViewIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+export const ViewIcon: React.FC = () => {
+  const style: React.CSSProperties = {
+    fill: "#000",
+    fillOpacity: 1,
+    fillRule: "nonzero",
+    stroke: "none"
+  };
+
+  return(
+    <div title={"flaticon from: (attribution) http://www.freepik.com/"}>
+      {/* eslint-disable-next-line @typescript-eslint/tslint/config */}
+      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 932.2 932.2">
+        <path d="M466.1 161.5c-205.6 0-382.8 121.2-464.2 296.1 -2.5 5.3-2.5 11.5 0 16.9 81.4 174.9 258.6 296.1 464.2 296.1s382.8-121.2 464.2-296.1c2.5-5.3 2.5-11.5 0-16.9C848.9 282.7 671.7 161.5 466.1 161.5zM466.1 676.2c-116.1 0-210.1-94.1-210.1-210.1 0-116.1 94.1-210.1 210.1-210.1 116.1 0 210.1 94.1 210.1 210.1S582.1 676.2 466.1 676.2z" style={style}/>
+        <circle cx="466.1" cy="466" r="134.5" style={style}/>
+      </svg>
+    </div>
+  );
+};

src/app/constants/BoxShadow.ts

@@ -0,0 +1,14 @@
+import { Color } from "./Color";
+
+const size = {
+  L: 8,
+  M: 6,
+  S: 4,
+  XS: 2
+};
+
+export type TBoxShadow = "XS" | "S" | "M" | "L";
+
+export const boxShadow = (type: TBoxShadow) => {
+  return `0 0 ${size[type]}px ${Color.GREY}`;
+};