From a66bc5a4201600c0effb975754a013ba22ba40d7 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sat, 12 Mar 2022 05:16:49 +0100
Subject: [PATCH] :sparkles: Add support for `Keyboard` element

---
 src/components/semantics/Keyboard.stories.jsx | 57 +++++++++++++++++++
 src/components/semantics/Keyboard.tsx         | 25 ++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 src/components/semantics/Keyboard.stories.jsx
 create mode 100644 src/components/semantics/Keyboard.tsx

diff --git a/src/components/semantics/Keyboard.stories.jsx b/src/components/semantics/Keyboard.stories.jsx
new file mode 100644
index 0000000..0da8351
--- /dev/null
+++ b/src/components/semantics/Keyboard.stories.jsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Keyboard as KeyboardComponent } from "./Keyboard"
+
+
+export default {
+    component: KeyboardComponent,
+    title: "Semantics/Keyboard",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Simple = props => (
+    <KeyboardComponent {...props}>Ctrl</KeyboardComponent>
+)
+Simple.args = {
+    builtinColor: "red",
+}
+
+
+export const Pressed = props => (
+    <KeyboardComponent {...props}>↓ Ctrl</KeyboardComponent>
+)
+Pressed.args = {
+    builtinColor: "red",
+    press: true,
+}
+
+
+export const Released = props => (
+    <KeyboardComponent {...props}>↑ Ctrl</KeyboardComponent>
+)
+Released.args = {
+    builtinColor: "red",
+    release: true,
+}
+
+
+export const Combination = props => (
+    <KeyboardComponent {...props}>
+        <KeyboardComponent>
+            Ctrl
+        </KeyboardComponent>
+        &nbsp;+&nbsp;
+        <KeyboardComponent>
+            Alt
+        </KeyboardComponent>
+        &nbsp;+&nbsp;
+        <KeyboardComponent>
+            Del
+        </KeyboardComponent>
+    </KeyboardComponent>
+)
+Combination.args = {
+    builtinColor: "red",
+}
diff --git a/src/components/semantics/Keyboard.tsx b/src/components/semantics/Keyboard.tsx
new file mode 100644
index 0000000..6b1eca4
--- /dev/null
+++ b/src/components/semantics/Keyboard.tsx
@@ -0,0 +1,25 @@
+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 KeyboardProps extends Types.BluelibHTMLProps<HTMLPreElement> {
+    press?: boolean,
+    release?: boolean,
+}
+
+
+export function Keyboard({press = false, release = false, ...props}: KeyboardProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(
+        props.bluelibClassNames, 
+        "semantic-kbd",
+        press && !release ? "semantic-kbd-press" : null,
+        release && !press ? "semantic-kbd-release" : null,
+    )
+
+    return (
+        <BaseElement kind={"kbd"} {...props}/>
+    )
+}