From d852144189abb44fc4cd807c7547e7fbf08a3c8e Mon Sep 17 00:00:00 2001 From: beevk 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 = () => ( + +

Create New Feature

+

You can create runs later.

+
+); 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 = (prop) => { + const { children } = prop; + return ( +
+ {children} +
+ + ); +};