From 9f96e01bc367b5521e11d83a0ce73915e31d0dd4 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sat, 12 Mar 2022 05:06:02 +0100
Subject: [PATCH] :sparkles: Add support for `Figure` and `Caption`

---
 src/components/images/Caption.tsx        | 17 ++++++++
 src/components/images/Figure.stories.jsx | 50 ++++++++++++++++++++++++
 src/components/images/Figure.tsx         | 20 ++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 src/components/images/Caption.tsx
 create mode 100644 src/components/images/Figure.stories.jsx
 create mode 100644 src/components/images/Figure.tsx

diff --git a/src/components/images/Caption.tsx b/src/components/images/Caption.tsx
new file mode 100644
index 0000000..f91b696
--- /dev/null
+++ b/src/components/images/Caption.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 CaptionProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Caption({...props}: CaptionProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "figure-caption")
+    
+    return (
+        <BaseElement kind={"figcaption"} {...props}/>
+    )
+}
diff --git a/src/components/images/Figure.stories.jsx b/src/components/images/Figure.stories.jsx
new file mode 100644
index 0000000..a352b83
--- /dev/null
+++ b/src/components/images/Figure.stories.jsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Figure as FigureComponent } from "./Figure"
+import { Image as ImageComponent } from "./Image"
+import PineappleWithSunglasses from "./elena-cordery-RLlcbkemwnw-unsplash.jpg"
+
+
+export default {
+    component: FigureComponent,
+    subcomponents: {Image: ImageComponent, },
+    title: "Images/Figure",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Figure = props => (
+    <FigureComponent {...props}>
+        <ImageComponent src={PineappleWithSunglasses} limit="quarter"/>
+    </FigureComponent>
+)
+Figure.args = {
+
+}
+
+
+export const TopCaption = props => (
+    <FigureComponent {...props}>
+        <FigureComponent.Caption>
+            A pineapple with sunglasses.
+        </FigureComponent.Caption>
+        <ImageComponent src={PineappleWithSunglasses} limit="quarter"/>
+    </FigureComponent>
+)
+TopCaption.args = {
+
+}
+
+
+export const BottomCaption = props => (
+    <FigureComponent {...props}>
+        <ImageComponent src={PineappleWithSunglasses} limit="quarter"/>
+        <FigureComponent.Caption>
+            A pineapple with sunglasses.
+        </FigureComponent.Caption>
+    </FigureComponent>
+)
+BottomCaption.args = {
+
+}
diff --git a/src/components/images/Figure.tsx b/src/components/images/Figure.tsx
new file mode 100644
index 0000000..89432f9
--- /dev/null
+++ b/src/components/images/Figure.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import { Caption } from "./Caption"
+import mergeClassNames from "classnames"
+
+
+export interface FigureProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Figure({...props}: FigureProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "figure")
+    
+    return (
+        <BaseElement kind={"figure"} {...props}/>
+    )
+}
+
+Figure.Caption = Caption