From d852144189abb44fc4cd807c7547e7fbf08a3c8e Mon Sep 17 00:00:00 2001
From: beevk <beevk.singh@gmail.com>
Date: Sun, 26 Jul 2020 21:33:41 +0700
Subject: [PATCH] feat: added a heading component for add new feature modal

---
 .../components/Heading/Heading.stories.tsx    | 23 +++++++++++++++++++
 src/app/components/Heading/Heading.tsx        | 23 +++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/app/components/Heading/Heading.stories.tsx
 create mode 100644 src/app/components/Heading/Heading.tsx

diff --git a/src/app/components/Heading/Heading.stories.tsx b/src/app/components/Heading/Heading.stories.tsx
new file mode 100644
index 0000000..7e58fa7
--- /dev/null
+++ b/src/app/components/Heading/Heading.stories.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { style } from "typestyle";
+
+import { Color } from "../../constants";
+import { Heading } from "./Heading";
+
+const h4Style = style({
+  alignItems: "center",
+  color: Color.GREY
+});
+
+export default {
+  component: Heading,
+  title: "Heading"
+};
+
+// Card component should be called here instead of h1 / h2,
+export const myHeading = () => (
+  <Heading>
+    <h1>Create New Feature</h1>
+    <h2 className={h4Style}>You can create runs later.</h2>
+  </Heading>
+);
diff --git a/src/app/components/Heading/Heading.tsx b/src/app/components/Heading/Heading.tsx
new file mode 100644
index 0000000..0cdd46e
--- /dev/null
+++ b/src/app/components/Heading/Heading.tsx
@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from "react";
+import { style } from "typestyle";
+
+import { Spacing } from "../../constants";
+
+interface IProps {
+  children: JSX.Element[] | JSX.Element;
+}
+
+
+const headingStyle = style({
+  padding: Spacing.S
+});
+
+export const Heading: FunctionComponent<IProps> = (prop) => {
+  const { children } = prop;
+  return (
+    <div className={headingStyle}>
+      {children}
+    </div>
+
+  );
+};