From ff638eb0105a22780d5084da58da83c98dc6d324 Mon Sep 17 00:00:00 2001
From: innovaker <66737976+innovaker@users.noreply.github.com>
Date: Fri, 6 Nov 2020 19:42:54 +0000
Subject: docs(codes): Add (key) codes documentation

Create codes documentation for standardized keys.

Closes #218.  Fixes #308.  Ref #21.
---
 docs/src/components/codes/TableRow.jsx | 70 ++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 docs/src/components/codes/TableRow.jsx

(limited to 'docs/src/components/codes/TableRow.jsx')

diff --git a/docs/src/components/codes/TableRow.jsx b/docs/src/components/codes/TableRow.jsx
new file mode 100644
index 0000000..a560911
--- /dev/null
+++ b/docs/src/components/codes/TableRow.jsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import Name from "./Name";
+import Description from "./Description";
+import Context from "./Context";
+import LinkIcon from "./LinkIcon";
+import OsSupport from "./OsSupport";
+import operatingSystems from "@site/src/data/operating-systems";
+
+export default function TableRow({
+  names,
+  description,
+  context = "",
+  clarify = false,
+  documentation,
+  os,
+  footnotes,
+  tableFootnotes,
+}) {
+  return (
+    <tr>
+      <td className="names">
+        {names.map((name) => (
+          <Name key={name} name={name}>
+            {name}
+          </Name>
+        ))}
+      </td>
+      <td className="description">
+        <Description description={description} />
+        {clarify && context ? <Context>{context}</Context> : undefined}
+      </td>
+      <td className="documentation" title="Documentation">
+        <a href={documentation} target="_blank" rel="noreferrer">
+          <LinkIcon />
+        </a>
+      </td>
+      {operatingSystems.map(({ key, className, title }) => (
+        <td key={key} className={`os ${className}`} title={title}>
+          <OsSupport
+            value={os[key]}
+            footnotes={tableFootnotes.filter(
+              ({ id }) =>
+                (Array.isArray(footnotes[key]) &&
+                  footnotes[key].includes(id)) ||
+                footnotes[key] == id
+            )}
+          />
+        </td>
+      ))}
+    </tr>
+  );
+}
+
+TableRow.propTypes = {
+  names: PropTypes.array.isRequired,
+  description: PropTypes.string.isRequired,
+  context: PropTypes.string.isRequired,
+  clarify: PropTypes.bool,
+  documentation: PropTypes.string.isRequired,
+  os: PropTypes.object.isRequired,
+  footnotes: PropTypes.object.isRequired,
+  tableFootnotes: PropTypes.array.isRequired,
+};
-- 
cgit v1.2.3