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

---
 src/components/BaseElement.stories.jsx        |  4 ++--
 src/components/panels/Box.stories.jsx         | 24 +++++++++++++++++++
 src/components/panels/Box.tsx                 | 19 +++++++++++++++
 src/components/panels/Dialog.stories.jsx      | 24 +++++++++++++++++++
 src/components/panels/Dialog.tsx              | 19 +++++++++++++++
 src/components/panels/Panel.stories.jsx       | 24 +++++++++++++++++++
 src/components/panels/Panel.tsx               | 19 +++++++++++++++
 src/components/panels/Parenthesis.stories.jsx | 24 +++++++++++++++++++
 src/components/panels/Parenthesis.tsx         | 19 +++++++++++++++
 src/utils/Decorators.jsx                      |  2 +-
 10 files changed, 175 insertions(+), 3 deletions(-)
 create mode 100644 src/components/panels/Box.stories.jsx
 create mode 100644 src/components/panels/Box.tsx
 create mode 100644 src/components/panels/Dialog.stories.jsx
 create mode 100644 src/components/panels/Dialog.tsx
 create mode 100644 src/components/panels/Panel.stories.jsx
 create mode 100644 src/components/panels/Panel.tsx
 create mode 100644 src/components/panels/Parenthesis.stories.jsx
 create mode 100644 src/components/panels/Parenthesis.tsx

diff --git a/src/components/BaseElement.stories.jsx b/src/components/BaseElement.stories.jsx
index 397a200..d1c64e2 100644
--- a/src/components/BaseElement.stories.jsx
+++ b/src/components/BaseElement.stories.jsx
@@ -12,8 +12,8 @@ export default {
     argTypes: {
         customColor: {
             control: {type: "color"},
-        }
-    }
+        },
+    },
 }
 
 
diff --git a/src/components/panels/Box.stories.jsx b/src/components/panels/Box.stories.jsx
new file mode 100644
index 0000000..d7c030d
--- /dev/null
+++ b/src/components/panels/Box.stories.jsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Box } from "./Box"
+
+
+export default {
+    component: Box,
+    title: "Panels/Box",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Box {...props}>
+        This is a Box.
+    </Box>
+)
+Default.args = {}
diff --git a/src/components/panels/Box.tsx b/src/components/panels/Box.tsx
new file mode 100644
index 0000000..58ad875
--- /dev/null
+++ b/src/components/panels/Box.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {Panel} from "./Panel";
+import mergeClassNames from "classnames"
+
+
+interface BoxProps {
+    [props: string]: any,
+}
+
+
+export function Box({...props}: BoxProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-box")
+
+    return (
+        <Panel {...props}/>
+    )
+}
diff --git a/src/components/panels/Dialog.stories.jsx b/src/components/panels/Dialog.stories.jsx
new file mode 100644
index 0000000..0fab4b9
--- /dev/null
+++ b/src/components/panels/Dialog.stories.jsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Dialog } from "./Dialog"
+
+
+export default {
+    component: Dialog,
+    title: "Panels/Dialog",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Dialog {...props}>
+        This is a Dialog.
+    </Dialog>
+)
+Default.args = {}
diff --git a/src/components/panels/Dialog.tsx b/src/components/panels/Dialog.tsx
new file mode 100644
index 0000000..ceb02a0
--- /dev/null
+++ b/src/components/panels/Dialog.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {Panel} from "./Panel";
+import mergeClassNames from "classnames"
+
+
+interface DialogProps {
+    [props: string]: any,
+}
+
+
+export function Dialog({...props}: DialogProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-dialog")
+
+    return (
+        <Panel {...props}/>
+    )
+}
diff --git a/src/components/panels/Panel.stories.jsx b/src/components/panels/Panel.stories.jsx
new file mode 100644
index 0000000..471a40a
--- /dev/null
+++ b/src/components/panels/Panel.stories.jsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Panel } from "./Panel"
+
+
+export default {
+    component: Panel,
+    title: "Panels/Panel",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Panel {...props}>
+        This is a Panel.
+    </Panel>
+)
+Default.args = {}
diff --git a/src/components/panels/Panel.tsx b/src/components/panels/Panel.tsx
new file mode 100644
index 0000000..cdd54b8
--- /dev/null
+++ b/src/components/panels/Panel.tsx
@@ -0,0 +1,19 @@
+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 PanelProps {
+    [props: string]: any,
+}
+
+
+export function Panel({...props}: PanelProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel")
+
+    return (
+        <BaseElement kind={"section"} {...props}/>
+    )
+}
diff --git a/src/components/panels/Parenthesis.stories.jsx b/src/components/panels/Parenthesis.stories.jsx
new file mode 100644
index 0000000..3daa7c8
--- /dev/null
+++ b/src/components/panels/Parenthesis.stories.jsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Parenthesis } from "./Parenthesis"
+
+
+export default {
+    component: Parenthesis,
+    title: "Panels/Parenthesis",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Parenthesis {...props}>
+        This is a Parenthesis.
+    </Parenthesis>
+)
+Default.args = {}
diff --git a/src/components/panels/Parenthesis.tsx b/src/components/panels/Parenthesis.tsx
new file mode 100644
index 0000000..5f716e2
--- /dev/null
+++ b/src/components/panels/Parenthesis.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {Panel} from "./Panel";
+import mergeClassNames from "classnames"
+
+
+interface ParenthesisProps {
+    [props: string]: any,
+}
+
+
+export function Parenthesis({...props}: ParenthesisProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-parenthesis")
+
+    return (
+        <Panel {...props}/>
+    )
+}
diff --git a/src/utils/Decorators.jsx b/src/utils/Decorators.jsx
index 0753585..21d7cd1 100644
--- a/src/utils/Decorators.jsx
+++ b/src/utils/Decorators.jsx
@@ -1,6 +1,6 @@
 import { Bluelib as BluelibComponent } from "../components/Bluelib"
 
 
-export const Bluelib = Story => <BluelibComponent theme={"paper"}><Story/></BluelibComponent>
+export const Bluelib = Story => <BluelibComponent theme={"paper"} style={{backgroundColor: "transparent"}}><Story/></BluelibComponent>
 
 export const Fill = Story => <div style={{height: "100vh"}}><Story/></div>