[react] feat: Added docs for components/KeyVal

packages/react/components/KeyVal/index.mjs

@@ -2,6 +2,19 @@ import React, { useState, useContext } from 'react'
 import { copyToClipboard } from '@freesewing/utils'
 import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
 
+/**
+ * A component to display key/value pairs
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {boolean} [props.small = false] - Set this to render a small version
+ * @param {string} [props.color = primary] - The DaisyUI color to apply
+ * @param {boolean} [props.href = false] - Set this to make this a link
+ * @param {string} props.k - The key to display (key is a reserved react prop, so we use k)
+ * @param {boolean} [props.onClick = false] - Set this to make this a button
+ * @param {string} props.val - The value to display
+ * @returns {JSX.Element}
+ */
 export const KeyVal = ({
   k,
   val,
@@ -25,6 +38,7 @@ export const KeyVal = ({
   if (color === 'secondary') colorClasses2 = secondaryClasses2
   else if (color === 'neutral') colorClasses2 = neutralClasses2
   else if (color === 'accent') colorClasses2 = accentClasses2
+  else if (color === 'info') colorClasses2 = infoClasses2
   else if (color === 'warning') colorClasses2 = warningClasses2
   else if (color === 'success') colorClasses2 = successClasses2
   else if (color === 'error') colorClasses2 = errorClasses2

packages/react/mkdocs.sh

@@ -16,3 +16,4 @@ jsdoc -c jsdoc.json components/Highlight/* > ../../sites/dev/prebuild/jsdoc/reac
 jsdoc -c jsdoc.json components/Icon/* > ../../sites/dev/prebuild/jsdoc/react/components/icon.json
 jsdoc -c jsdoc.json components/Input/* > ../../sites/dev/prebuild/jsdoc/react/components/input.json
 jsdoc -c jsdoc.json components/Json/* > ../../sites/dev/prebuild/jsdoc/react/components/json.json
+jsdoc -c jsdoc.json components/KeyVal/* > ../../sites/dev/prebuild/jsdoc/react/components/keyval.json

sites/dev/docs/reference/packages/react/components/keyval/_examples.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { KeyVal } from '@freesewing/react/components/KeyVal'
+
+const colors = ['primary', 'secondary', 'accent', 'neutral', 'success', 'warning', 'error', 'info']
+
+export const KeyValExample = () => (
+  <>
+    <b>Default</b>
+    <br />
+    <KeyVal k="key" val="value" />
+    <br />
+    <b>Colors</b>
+    <div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-1">
+      {colors.map(c => <KeyVal key={c} k="color" val={c} color={c}/>)}
+    </div>
+    <b>Small</b>
+    <div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-1">
+      {colors.map(c => <KeyVal key={c} k="color" val={c} color={c} small/>)}
+    </div>
+  </>
+)

sites/dev/docs/reference/packages/react/components/keyval/readme.mdx

@@ -1,7 +1,21 @@
 ---
 title: KeyVal
 ---
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.keyval.mjs'
+import { KeyValExample } from './_examples.js'
+
+
+<DocusaurusDoc>
+
+The __KeyVal component family provides the following components:
+
+- [KeyVal](#keyval)
+
+## KeyVal
+<ComponentDocs docs={jsdoc.jsdocKeyVal} example={KeyValExample} />
+
+</DocusaurusDoc>
+
 
-:::note
-This page is yet to be created
-:::