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} +
+ + ); +};