✨ Add images

Featuring https://unsplash.com/photos/RLlcbkemwnw

src/components/images/Image.stories.jsx

@@ -0,0 +1,35 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Image } from "./Image"
+import PineappleWithSunglasses from "./elena-cordery-RLlcbkemwnw-unsplash.jpg"
+
+
+export default {
+    component: Image,
+    title: "Images/Image",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const NoLimit = props => (
+    <Image {...props}/>
+)
+NoLimit.args = {
+    src: PineappleWithSunglasses,
+    limit: "no",
+}
+
+
+export const HalfLimit = NoLimit.bind({})
+HalfLimit.args = {
+    ...NoLimit.args,
+    limit: "half",
+}
+
+
+export const QuarterLimit = NoLimit.bind({})
+QuarterLimit.args = {
+    ...NoLimit.args,
+    limit: "quarter",
+}

src/components/images/Image.tsx

@@ -0,0 +1,34 @@
+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 ImageProps {
+    src: string,
+    limit?: "no" | "half" | "quarter",
+
+    [props: string]: any,
+}
+
+
+const LIMIT_CLASSES = {
+    no: "",
+    half: "image-limit-half",
+    quarter: "image-limit-quarter",
+}
+
+
+export function Image({limit, ...props}: ImageProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "image")
+
+    if(limit) {
+        props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, LIMIT_CLASSES[limit])
+    }
+
+    // TODO: Capture the src and make the image clickable
+    return (
+        <BaseElement kind={"img"} {...props}/>
+    )
+}

src/utils/Decorators.jsx

@@ -1,6 +1,9 @@
 import { Bluelib as BluelibComponent } from "../components/Bluelib"
+import { Box as BoxComponent } from "../components/panels/Box"
 
 
 export const Bluelib = Story => <BluelibComponent theme={"paper"} style={{backgroundColor: "transparent"}}><Story/></BluelibComponent>
 
 export const Fill = Story => <div style={{height: "100vh"}}><Story/></div>
+
+export const Box = Story => <BoxComponent><Story/></BoxComponent>