✨ Add DescriptionList

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

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