✨ Add panels

src/components/BaseElement.stories.jsx

@@ -12,8 +12,8 @@ export default {
     argTypes: {
         customColor: {
             control: {type: "color"},
-        }
-    }
+        },
+    },
 }
 
 

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 = {}

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

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 = {}

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

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 = {}

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

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 = {}

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

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>