From 977b7d3e770f67ad709b52d52f9a0bd25b4bea85 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 17 Aug 2021 18:11:13 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20chapters?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chapters/Chapter.stories.jsx | 61 +++++++++++++++++++++
 src/components/chapters/Chapter.tsx         | 33 +++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 src/components/chapters/Chapter.stories.jsx
 create mode 100644 src/components/chapters/Chapter.tsx

diff --git a/src/components/chapters/Chapter.stories.jsx b/src/components/chapters/Chapter.stories.jsx
new file mode 100644
index 0000000..efd194d
--- /dev/null
+++ b/src/components/chapters/Chapter.stories.jsx
@@ -0,0 +1,61 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Chapter } from "./Chapter"
+import { Box } from "../panels/Box"
+
+
+export default {
+    component: Chapter,
+    title: "Chapters/Chapter",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Chapter {...props}>
+        <Box>First</Box>
+        <Box>Second</Box>
+        <Box>Third</Box>
+    </Chapter>
+)
+Default.args = {}
+
+
+export const AutoWrap = props => (
+    <Chapter {...props}>
+        <Box>First</Box>
+        <Box>Second</Box>
+        <Box>Third</Box>
+        <Box>Fourth</Box>
+        <Box>Fifth</Box>
+        <Box>Sixth</Box>
+        <Box>Seventh</Box>
+        <Box>Eighth</Box>
+        <Box>Ninth</Box>
+        <Box>Tenth</Box>
+        <Box>Eleventh</Box>
+        <Box>Twelfth</Box>
+        <Box>Thirtheenth</Box>
+        <Box>Fourtheenth</Box>
+        <Box>Fiftheenth</Box>
+    </Chapter>
+)
+AutoWrap.args = {}
+
+
+export const ForceWrap = props => (
+    <Chapter {...props}>
+        <Box>First</Box>
+        <Box>Second</Box>
+        <Chapter.ForceWrap/>
+        <Box>Third</Box>
+        <Box>Fourth</Box>
+    </Chapter>
+)
+ForceWrap.args = {}
\ No newline at end of file
diff --git a/src/components/chapters/Chapter.tsx b/src/components/chapters/Chapter.tsx
new file mode 100644
index 0000000..9abba97
--- /dev/null
+++ b/src/components/chapters/Chapter.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+interface ChapterProps {
+    [props: string]: any,
+}
+
+
+export function Chapter({...props}: ChapterProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "chapter")
+
+    return (
+        <BaseElement kind={"section"} {...props}/>
+    )
+}
+
+
+interface ChapterForceWrapProps {
+    [props: string]: any,
+}
+
+
+Chapter.ForceWrap = function({...props}: ChapterForceWrapProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "chapter-forcewrap")
+
+    return (
+        <BaseElement kind={"div"} {...props}/>
+    )
+}
\ No newline at end of file