From a169255d2226400c980b75194e8913ce835558dd Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sat, 12 Mar 2022 04:54:57 +0100
Subject: [PATCH] :sparkles: Add support for `Preformatted` and improve `Code`

---
 src/components/semantics/Code.stories.jsx     | 19 +++++++++++++++++--
 .../semantics/Preformatted.stories.jsx        | 17 +++++++++++++++++
 src/components/semantics/Preformatted.tsx     | 17 +++++++++++++++++
 3 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 src/components/semantics/Preformatted.stories.jsx
 create mode 100644 src/components/semantics/Preformatted.tsx

diff --git a/src/components/semantics/Code.stories.jsx b/src/components/semantics/Code.stories.jsx
index 6c527f4..ad7f4c0 100644
--- a/src/components/semantics/Code.stories.jsx
+++ b/src/components/semantics/Code.stories.jsx
@@ -2,6 +2,7 @@ import * as React from "react"
 import * as ReactDOM from "react-dom"
 import * as Decorators from "../../utils/Decorators"
 import { Code as CodeComponent } from "./Code"
+import { Preformatted } from "./Preformatted"
 
 
 export default {
@@ -11,7 +12,21 @@ export default {
 }
 
 
-export const Code = props => (
+export const CodeInline = props => (
     <CodeComponent {...props}>"Hello world!"</CodeComponent>
 )
-Code.args = {}
+CodeInline.args = {}
+
+
+const botsbuildbots = 
+`(defun botsbuildbots () (
+    (botsbuildbots)
+))`
+
+
+export const CodeBlock = props => (
+    <Preformatted>
+        <CodeComponent {...props}>{botsbuildbots}</CodeComponent>
+    </Preformatted>
+)
+CodeBlock.args = {}
diff --git a/src/components/semantics/Preformatted.stories.jsx b/src/components/semantics/Preformatted.stories.jsx
new file mode 100644
index 0000000..bea3874
--- /dev/null
+++ b/src/components/semantics/Preformatted.stories.jsx
@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Preformatted as PreformattedComponent } from "./Preformatted"
+
+
+export default {
+    component: PreformattedComponent,
+    title: "Semantics/Preformatted",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Preformatted = props => (
+    <PreformattedComponent {...props}>{`Look at me!\nI can start new lines and have indentation!`}</PreformattedComponent>
+)
+Preformatted.args = {}
diff --git a/src/components/semantics/Preformatted.tsx b/src/components/semantics/Preformatted.tsx
new file mode 100644
index 0000000..d69553b
--- /dev/null
+++ b/src/components/semantics/Preformatted.tsx
@@ -0,0 +1,17 @@
+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 PreformattedProps extends Types.BluelibHTMLProps<HTMLPreElement> {}
+
+
+export function Preformatted({...props}: PreformattedProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-pre")
+
+    return (
+        <BaseElement kind={"pre"} {...props}/>
+    )
+}