🔧 Split panel into its own component

src/components/Aside/Readme.md

@@ -1,11 +1,43 @@
-A **panel** having no border and having smaller text than normal.
+An Aside [Panel](#panel), using the `panel-aside` Bluelib class.
 
 ```jsx
 import Bluelib from "../Bluelib";
 
 <Bluelib>
     <Aside>
-        Ciao!
+        This is an aside.
     </Aside>
 </Bluelib>
 ```
+
+Asides support the same props [Panel](#panel)s do, such as `title` and `kind`:
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Aside title={"Hello world!"}>
+        This aside has a title, even if they usually shouldn't have one.
+    </Aside>
+</Bluelib>
+```
+
+As with [Panel](#panel)s, Asides can be wrapped in [Color](#color) elements to paint them a different color:
+
+```jsx
+import Bluelib from "../Bluelib";
+import Color from "../Color";
+
+<Bluelib>
+    <Color builtin={"red"}>
+        <Aside>
+            See? Red! No, wait, that's blood...
+        </Aside>
+    </Color>
+    <Color custom={"#123456"}>
+        <Aside>
+            He'll turn RED any second now...
+        </Aside>
+    </Color>
+</Bluelib>
+```

src/components/Aside/index.js

@@ -1,13 +1,14 @@
 import React from "react"
 import useBluelibClassNames from "../../hooks/useBluelibClassNames"
 import PropTypes from "prop-types"
+import Panel from "../Panel"
 
 
 export default function Aside({children, className, ...props}) {
     return (
-        <aside className={useBluelibClassNames(["panel", "panel-box", "panel-aside"], className)} {...props}>
+        <Panel kind={"aside"} className={useBluelibClassNames( ["panel-box", "panel-aside"], className)} {...props}>
             {children}
-        </aside>
+        </Panel>
     )
 }
 

src/components/Blockquote/Readme.md

@@ -1,11 +1,43 @@
-A **panel** having a border only on the left side.
+A Blockquote [Panel](#panel), using the `panel-blockquote` Bluelib class.
 
 ```jsx
 import Bluelib from "../Bluelib";
 
 <Bluelib>
     <Blockquote>
-        Ciao!
+        This is a blockquote.
     </Blockquote>
 </Bluelib>
 ```
+
+Blockquotes support the same props [Panel](#panel)s do, such as `title` and `kind`:
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Blockquote title={"Hello world!"}>
+        This blockquote has a title, even if they usually shouldn't have one.
+    </Blockquote>
+</Bluelib>
+```
+
+As with [Panel](#panel)s, Blockquotes can be wrapped in [Color](#color) elements to paint them a different color:
+
+```jsx
+import Bluelib from "../Bluelib";
+import Color from "../Color";
+
+<Bluelib>
+    <Color builtin={"red"}>
+        <Blockquote>
+            See? Red! No, wait, that's blood...
+        </Blockquote>
+    </Color>
+    <Color custom={"#123456"}>
+        <Blockquote>
+            He'll turn RED any second now...
+        </Blockquote>
+    </Color>
+</Bluelib>
+```

src/components/Blockquote/index.js

@@ -1,13 +1,14 @@
 import React from "react"
 import useBluelibClassNames from "../../hooks/useBluelibClassNames"
 import PropTypes from "prop-types"
+import Panel from "../Panel"
 
 
 export default function Blockquote({children, className, ...props}) {
     return (
-        <blockquote className={useBluelibClassNames("panel panel-box panel-blockquote", className)} {...props}>
+        <Panel kind={"blockquote"} className={useBluelibClassNames(["panel-box", "panel-blockquote"], className)} {...props}>
             {children}
-        </blockquote>
+        </Panel>
     )
 }
 

src/components/Box/Readme.md

@@ -1,17 +1,43 @@
-The default **panel**, with rounded borders on all sides.
+A Box [Panel](#panel), using the `panel-box` Bluelib class.
 
 ```jsx
 import Bluelib from "../Bluelib";
 
 <Bluelib>
     <Box>
-        Ciao!
-    </Box>
-    <Box color={"#ff7d7d"}>
-        This is a red box.
-    </Box>
-    <Box color={"rgb(125, 125, 255)"}>
-        This is a blue box.
+        This is a box.
     </Box>
 </Bluelib>
 ```
+
+Boxes support the same props [Panel](#panel)s do, such as `title` and `kind`:
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Box title={"Hello world!"}>
+        This box has a title.
+    </Box>
+</Bluelib>
+```
+
+As with [Panel](#panel)s, Boxes can be wrapped in [Color](#color) elements to paint them a different color:
+
+```jsx
+import Bluelib from "../Bluelib";
+import Color from "../Color";
+
+<Bluelib>
+    <Color builtin={"red"}>
+        <Box>
+            See? Red! No, wait, that's blood...
+        </Box>
+    </Color>
+    <Color custom={"#123456"}>
+        <Box>
+            He'll turn RED any second now...
+        </Box>
+    </Color>
+</Bluelib>
+```

src/components/Box/index.js

@@ -1,13 +1,14 @@
 import React from "react"
 import useBluelibClassNames from "../../hooks/useBluelibClassNames"
 import PropTypes from "prop-types"
+import Panel from "../Panel"
 
 
 export default function Box({children, className, ...props}) {
     return (
-        <section className={useBluelibClassNames("panel panel-box", className)} {...props}>
+        <Panel kind={"section"} className={useBluelibClassNames("panel-box", className)} {...props}>
             {children}
-        </section>
+        </Panel>
     )
 }
 

src/components/Panel/Readme.md

@@ -0,0 +1,57 @@
+A Bluelib panel, using the `panel` class.
+
+It doesn't do anything by itself: [Box](#box)es, [Blockquote](#blockquote)s and [Aside](#aside)s are based on panels.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Panel>
+        This is a generic panel.
+    </Panel>
+</Bluelib>
+```
+
+A `kind` prop can be specified to specify the base element: by default, panels use `<div>`s.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Panel kind={"section"}>
+        This panel uses section.
+    </Panel>
+</Bluelib>
+```
+
+A `title` prop can be specified to add a title to the panel:
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Panel title={"Hello world!"}>
+        This panel has a title.
+    </Panel>
+</Bluelib>
+```
+
+Panels (like most other elements) can be wrapped in [Color](#color) elements to change their color:
+
+```jsx
+import Bluelib from "../Bluelib";
+import Color from "../Color";
+
+<Bluelib>
+    <Color builtin={"red"}>
+        <Panel>
+            See? Red! No, wait, that's blood...
+        </Panel>
+    </Color>
+    <Color custom={"#123456"}>
+        <Panel>
+            He'll turn RED any second now...
+        </Panel>
+    </Color>
+</Bluelib>
+```

src/components/Panel/index.js

@@ -0,0 +1,28 @@
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import PropTypes from "prop-types"
+import Title from "../Title"
+
+
+export default function Panel({kind = "div", children, className, title, ...props}) {
+    const Kind = kind;
+
+    return (
+        <Kind className={useBluelibClassNames("panel", className)} {...props}>
+            {title ?
+                <Title size={"l"}>
+                    {title}
+                </Title>
+            : null}
+            {children}
+        </Kind>
+    )
+}
+
+
+Panel.propTypes = {
+    kind: PropTypes.string,
+    title: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+}