From eeeb5246cbafee9a906f1923c625d43941fc7b86 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Tue, 20 Jul 2021 02:22:08 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Split=20`panel`=20into=20its=20o?= =?UTF-8?q?wn=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Aside/Readme.md | 36 +++++++++++++++++- src/components/Aside/index.js | 5 ++- src/components/Blockquote/Readme.md | 36 +++++++++++++++++- src/components/Blockquote/index.js | 5 ++- src/components/Box/Readme.md | 42 +++++++++++++++++---- src/components/Box/index.js | 5 ++- src/components/Panel/Readme.md | 57 +++++++++++++++++++++++++++++ src/components/Panel/index.js | 28 ++++++++++++++ 8 files changed, 196 insertions(+), 18 deletions(-) create mode 100644 src/components/Panel/Readme.md create mode 100644 src/components/Panel/index.js diff --git a/src/components/Aside/Readme.md b/src/components/Aside/Readme.md index d5e14cf..c1a7fd3 100644 --- a/src/components/Aside/Readme.md +++ b/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"; ``` + +Asides support the same props [Panel](#panel)s do, such as `title` and `kind`: + +```jsx +import Bluelib from "../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"; + + + + + + + + + +``` diff --git a/src/components/Aside/index.js b/src/components/Aside/index.js index aa82fff..6a1af85 100644 --- a/src/components/Aside/index.js +++ b/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 ( - + ) } diff --git a/src/components/Blockquote/Readme.md b/src/components/Blockquote/Readme.md index 4709342..41fc5c7 100644 --- a/src/components/Blockquote/Readme.md +++ b/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";
- Ciao! + This is a blockquote.
``` + +Blockquotes support the same props [Panel](#panel)s do, such as `title` and `kind`: + +```jsx +import Bluelib from "../Bluelib"; + + +
+ This blockquote has a title, even if they usually shouldn't have one. +
+ +``` + +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"; + + + +
+ See? Red! No, wait, that's blood... +
+ + +
+ He'll turn RED any second now... +
+ + +``` diff --git a/src/components/Blockquote/index.js b/src/components/Blockquote/index.js index db306e8..ca2ae99 100644 --- a/src/components/Blockquote/index.js +++ b/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 ( -
+ {children} -
+ ) } diff --git a/src/components/Box/Readme.md b/src/components/Box/Readme.md index 3ad6b23..9e4476f 100644 --- a/src/components/Box/Readme.md +++ b/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"; - Ciao! - - - This is a red box. - - - This is a blue box. + This is a box. ``` + +Boxes support the same props [Panel](#panel)s do, such as `title` and `kind`: + +```jsx +import Bluelib from "../Bluelib"; + + + + This box has a title. + + +``` + +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"; + + + + + See? Red! No, wait, that's blood... + + + + + He'll turn RED any second now... + + + +``` diff --git a/src/components/Box/index.js b/src/components/Box/index.js index 8157ff8..8a05cf5 100644 --- a/src/components/Box/index.js +++ b/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 ( -
+ {children} -
+ ) } diff --git a/src/components/Panel/Readme.md b/src/components/Panel/Readme.md new file mode 100644 index 0000000..83c82cb --- /dev/null +++ b/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"; + + + + This is a generic panel. + + +``` + +A `kind` prop can be specified to specify the base element: by default, panels use `
`s. + +```jsx +import Bluelib from "../Bluelib"; + + + + This panel uses section. + + +``` + +A `title` prop can be specified to add a title to the panel: + +```jsx +import Bluelib from "../Bluelib"; + + + + This panel has a title. + + +``` + +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"; + + + + + See? Red! No, wait, that's blood... + + + + + He'll turn RED any second now... + + + +``` diff --git a/src/components/Panel/index.js b/src/components/Panel/index.js new file mode 100644 index 0000000..dcdb1f4 --- /dev/null +++ b/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 ( + + {title ? + + {title} + + : null} + {children} + + ) +} + + +Panel.propTypes = { + kind: PropTypes.string, + title: PropTypes.string, + children: PropTypes.node, + className: PropTypes.string, +}