From 0b8edc1d4326d56b9657f28c7ab24f6bfa983373 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 19 Aug 2021 04:08:32 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20`DescriptionList`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lists/DescriptionList.stories.jsx         | 41 ++++++++++++++++
 src/components/lists/DescriptionList.tsx      | 47 +++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 src/components/lists/DescriptionList.stories.jsx
 create mode 100644 src/components/lists/DescriptionList.tsx

diff --git a/src/components/lists/DescriptionList.stories.jsx b/src/components/lists/DescriptionList.stories.jsx
new file mode 100644
index 0000000..89981a0
--- /dev/null
+++ b/src/components/lists/DescriptionList.stories.jsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { DescriptionList } from "./DescriptionList"
+
+
+export default {
+    component: DescriptionList,
+    title: "Lists/DescriptionList",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <DescriptionList {...props}>
+        <DescriptionList.Key>
+            LOL
+        </DescriptionList.Key>
+        <DescriptionList.Value>
+            Laughing out loud
+        </DescriptionList.Value>
+        <DescriptionList.Key>
+            KEK
+        </DescriptionList.Key>
+        <DescriptionList.Value>
+            Equivalent to lol, but said by a member of the Horde
+        </DescriptionList.Value>
+        <DescriptionList.Key>
+            LUL
+        </DescriptionList.Key>
+        <DescriptionList.Value>
+            Equivalent to lol, used by twitch.tv users to send an emoticon with the face of TotalBiscuit
+        </DescriptionList.Value>
+    </DescriptionList>
+)
+Default.args = {}
diff --git a/src/components/lists/DescriptionList.tsx b/src/components/lists/DescriptionList.tsx
new file mode 100644
index 0000000..a8e4cb9
--- /dev/null
+++ b/src/components/lists/DescriptionList.tsx
@@ -0,0 +1,47 @@
+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 DescriptionListProps {
+    [props: string]: any,
+}
+
+
+export function DescriptionList({...props}: DescriptionListProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "list-description")
+
+    return (
+        <BaseElement kind={"dl"} {...props}/>
+    )
+}
+
+
+interface DescriptionListKeyProps {
+    [props: string]: any,
+}
+
+
+DescriptionList.Key = function({...props}: DescriptionListKeyProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "list-description-key")
+
+    return (
+        <BaseElement kind={"dt"} {...props}/>
+    )
+}
+
+
+interface DescriptionListValueProps {
+    [props: string]: any,
+}
+
+
+DescriptionList.Value = function({...props}: DescriptionListValueProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "list-description-value")
+
+    return (
+        <BaseElement kind={"dd"} {...props}/>
+    )
+}