✨ Add support for Figure and Caption

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

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

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