From 4cb5cd803e71bf1c8fbf5f894daa2c99457a2ea0 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 24 Aug 2021 04:30:48 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20`Heading`=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Heading.stories.jsx | 50 +++++++++++++++++++++++
 src/components/common/Heading.tsx         | 29 +++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 src/components/common/Heading.stories.jsx
 create mode 100644 src/components/common/Heading.tsx

diff --git a/src/components/common/Heading.stories.jsx b/src/components/common/Heading.stories.jsx
new file mode 100644
index 0000000..827ff46
--- /dev/null
+++ b/src/components/common/Heading.stories.jsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Heading as HeadingComponent } from "./Heading"
+
+
+export default {
+    component: HeadingComponent,
+    title: "Common/Heading",
+    decorators: [Decorators.Bluelib],
+}
+
+
+const HeadingTemplate = props => (
+    <HeadingComponent {...props}>
+        The United Cantons capitulate!
+    </HeadingComponent>
+)
+
+
+export const HeadingLevel1 = HeadingTemplate.bind({})
+HeadingLevel1.args = {
+    level: 1,
+}
+
+export const HeadingLevel2 = HeadingTemplate.bind({})
+HeadingLevel2.args = {
+    level: 2,
+}
+
+export const HeadingLevel3 = HeadingTemplate.bind({})
+HeadingLevel3.args = {
+    level: 3,
+}
+
+export const HeadingLevel4 = HeadingTemplate.bind({})
+HeadingLevel4.args = {
+    level: 4,
+}
+
+export const HeadingLevel5 = HeadingTemplate.bind({})
+HeadingLevel5.args = {
+    level: 5,
+}
+
+export const HeadingLevel6 = HeadingTemplate.bind({})
+HeadingLevel6.args = {
+    level: 6,
+}
+
diff --git a/src/components/common/Heading.tsx b/src/components/common/Heading.tsx
new file mode 100644
index 0000000..9f9b697
--- /dev/null
+++ b/src/components/common/Heading.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+export interface HeadingProps extends Types.BluelibHTMLProps<HTMLHeadingElement> {
+    level: 1 | 2 | 3 | 4 | 5 | 6,
+}
+
+
+const HEADING_KINDS_BY_LEVEL = {
+    1: "h1",
+    2: "h2",
+    3: "h3",
+    4: "h4",
+    5: "h5",
+    6: "h6",
+}
+
+
+export function Heading({level, ...props}: HeadingProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "heading")
+
+    return (
+        <BaseElement kind={HEADING_KINDS_BY_LEVEL[level]} {...props}/>
+    )
+}