@jxsuite/ui 0.0.0 → 0.2.0

package/stylebook/jx-button.json

@@ -3,15 +3,30 @@
   "$id": "StylebookButton",
   "tagName": "main",
   "$elements": [
-    { "$ref": "../components/jx-icon.json" },
-    { "$ref": "../components/jx-button.json" }
+    {
+      "$ref": "../components/jx-icon.json"
+    },
+    {
+      "$ref": "../components/jx-spinner.json"
+    },
+    {
+      "$ref": "../components/jx-button.json"
+    }
   ],
   "state": {
     "variants": ["accent", "primary", "secondary", "negative"],
     "clicks": 0,
     "count": {
       "$prototype": "Function",
-      "body": [{ "operator": "+=", "target": { "$ref": "#/state/clicks" }, "value": 1 }]
+      "body": [
+        {
+          "operator": "+=",
+          "target": {
+            "$ref": "#/state/clicks"
+          },
+          "value": 1
+        }
+      ]
     }
   },
   "style": {
@@ -26,7 +41,10 @@
       "fontWeight": "600",
       "margin": "0 0 var(--jx-space-5)"
     },
-    "& > p": { "color": "var(--jx-fg-dim)", "margin": "0 0 var(--jx-space-5)" },
+    "& > p": {
+      "color": "var(--jx-fg-dim)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
     "& [role=\"group\"]": {
       "display": "flex",
       "alignItems": "center",
@@ -40,62 +58,147 @@
     }
   },
   "children": [
-    { "tagName": "h1", "textContent": "jx-button" },
+    {
+      "tagName": "h1",
+      "textContent": "jx-button"
+    },
     {
       "tagName": "p",
       "textContent": "Every variant in every state. The accent is spent once per surface; secondary is the default. Clicked ${state.clicks} times."
     },
     {
       "$prototype": "Array",
-      "items": { "$ref": "#/state/variants" },
-      "key": { "$ref": "$map/item" },
+      "items": {
+        "$ref": "#/state/variants"
+      },
+      "key": {
+        "$ref": "$map/item"
+      },
       "map": {
         "tagName": "div",
-        "attributes": { "role": "group", "aria-label": "${$map.item} buttons" },
+        "attributes": {
+          "role": "group",
+          "aria-label": "${$map.item} buttons"
+        },
         "children": [
-          { "tagName": "span", "textContent": "${$map.item}" },
+          {
+            "tagName": "span",
+            "textContent": "${$map.item}"
+          },
           {
             "tagName": "jx-button",
-            "$props": { "variant": { "$ref": "$map/item" } },
-            "onclick": { "$ref": "#/state/count" },
-            "children": [{ "tagName": "span", "textContent": "Label" }]
+            "$props": {
+              "variant": {
+                "$ref": "$map/item"
+              }
+            },
+            "onclick": {
+              "$ref": "#/state/count"
+            },
+            "children": [
+              {
+                "tagName": "span",
+                "textContent": "Label"
+              }
+            ]
           },
           {
             "tagName": "jx-button",
-            "$props": { "variant": { "$ref": "$map/item" } },
+            "$props": {
+              "variant": {
+                "$ref": "$map/item"
+              }
+            },
             "children": [
               {
                 "tagName": "jx-icon",
-                "attributes": { "slot": "icon" },
-                "$props": { "name": "plus" }
+                "attributes": {
+                  "slot": "icon"
+                },
+                "$props": {
+                  "name": "plus"
+                }
               },
-              { "tagName": "span", "textContent": "With icon" }
+              {
+                "tagName": "span",
+                "textContent": "With icon"
+              }
             ]
           },
           {
             "tagName": "jx-button",
-            "$props": { "variant": { "$ref": "$map/item" }, "quiet": true },
-            "children": [{ "tagName": "span", "textContent": "Quiet" }]
+            "$props": {
+              "variant": {
+                "$ref": "$map/item"
+              },
+              "quiet": true
+            },
+            "children": [
+              {
+                "tagName": "span",
+                "textContent": "Quiet"
+              }
+            ]
           },
           {
             "tagName": "jx-button",
-            "$props": { "variant": { "$ref": "$map/item" }, "disabled": true },
-            "children": [{ "tagName": "span", "textContent": "Disabled" }]
+            "$props": {
+              "variant": {
+                "$ref": "$map/item"
+              },
+              "disabled": true
+            },
+            "children": [
+              {
+                "tagName": "span",
+                "textContent": "Disabled"
+              }
+            ]
           },
           {
             "tagName": "jx-button",
-            "$props": { "variant": { "$ref": "$map/item" }, "loading": true },
-            "children": [{ "tagName": "span", "textContent": "Loading" }]
+            "$props": {
+              "variant": {
+                "$ref": "$map/item"
+              },
+              "loading": true
+            },
+            "children": [
+              {
+                "tagName": "span",
+                "textContent": "Loading"
+              }
+            ]
           },
           {
             "tagName": "jx-button",
-            "$props": { "variant": { "$ref": "$map/item" }, "size": "sm" },
-            "children": [{ "tagName": "span", "textContent": "Small" }]
+            "$props": {
+              "variant": {
+                "$ref": "$map/item"
+              },
+              "size": "sm"
+            },
+            "children": [
+              {
+                "tagName": "span",
+                "textContent": "Small"
+              }
+            ]
           },
           {
             "tagName": "jx-button",
-            "$props": { "variant": { "$ref": "$map/item" }, "size": "lg" },
-            "children": [{ "tagName": "span", "textContent": "Large" }]
+            "$props": {
+              "variant": {
+                "$ref": "$map/item"
+              },
+              "size": "lg"
+            },
+            "children": [
+              {
+                "tagName": "span",
+                "textContent": "Large"
+              }
+            ]
           }
         ]
       }

package/stylebook/jx-checkbox.json

@@ -0,0 +1,245 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookCheckbox",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-field.json"
+    },
+    {
+      "$ref": "../components/jx-checkbox.json"
+    }
+  ],
+  "state": {
+    "included": true
+  },
+  "style": {
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "background": "var(--jx-bg)",
+    "padding": "var(--jx-space-6)",
+    "minHeight": "100vh",
+    "& > h1": {
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > h2": {
+      "fontSize": "var(--jx-text-md)",
+      "fontWeight": "600",
+      "color": "var(--jx-fg-dim)",
+      "margin": "var(--jx-space-6) 0 var(--jx-space-3)"
+    },
+    "& > p": {
+      "color": "var(--jx-fg-dim)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& [role=\"group\"]": {
+      "display": "flex",
+      "alignItems": "flex-start",
+      "flexWrap": "wrap",
+      "gap": "var(--jx-space-4)",
+      "margin": "0 0 var(--jx-space-4)"
+    },
+    "& [role=\"group\"] > span": {
+      "color": "var(--jx-fg-muted)",
+      "fontSize": "var(--jx-text-sm)"
+    },
+    "& code": {
+      "fontFamily": "var(--jx-font-mono)",
+      "color": "var(--jx-tag)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-checkbox"
+    },
+    {
+      "tagName": "p",
+      "textContent": "A native checkbox inside the label that names it. Ticked, clear and mixed are properties of the control, so a host write still moves the box after the reader has touched it."
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Bound state"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Bound state"
+      },
+      "children": [
+        {
+          "tagName": "jx-checkbox",
+          "$props": {
+            "checked": {
+              "$ref": "#/state/included"
+            }
+          },
+          "textContent": "Include in the build",
+          "onchange": {
+            "$prototype": "Function",
+            "body": [
+              {
+                "operator": "=",
+                "target": {
+                  "$ref": "#/state/included"
+                },
+                "value": {
+                  "$ref": "event#/target/checked"
+                }
+              }
+            ]
+          }
+        },
+        {
+          "tagName": "span",
+          "textContent": "${state.included ? 'included' : 'left out'}"
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "In a field row"
+    },
+    {
+      "tagName": "p",
+      "textContent": "The row is jx-field. It mints the id its label carries and hands it to the box as labelledby, so nothing here writes an id."
+    },
+    {
+      "tagName": "jx-field",
+      "$props": {
+        "label": "Visible",
+        "description": "A hidden layer is still exported."
+      },
+      "attributes": {
+        "data-prop": "visible"
+      },
+      "children": [
+        {
+          "tagName": "jx-checkbox",
+          "$props": {
+            "checked": true
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "States"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "States"
+      },
+      "children": [
+        {
+          "tagName": "jx-checkbox",
+          "textContent": "Clear"
+        },
+        {
+          "tagName": "jx-checkbox",
+          "$props": {
+            "checked": true
+          },
+          "textContent": "Ticked"
+        },
+        {
+          "tagName": "jx-checkbox",
+          "$props": {
+            "indeterminate": true
+          },
+          "textContent": "Mixed"
+        },
+        {
+          "tagName": "jx-checkbox",
+          "$props": {
+            "disabled": true
+          },
+          "textContent": "Disabled"
+        },
+        {
+          "tagName": "jx-checkbox",
+          "$props": {
+            "checked": true,
+            "disabled": true
+          },
+          "textContent": "Ticked and disabled"
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Sizes"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Sizes"
+      },
+      "children": [
+        {
+          "tagName": "jx-checkbox",
+          "$props": {
+            "size": "sm",
+            "checked": true
+          },
+          "textContent": "Small"
+        },
+        {
+          "tagName": "jx-checkbox",
+          "$props": {
+            "checked": true
+          },
+          "textContent": "Medium"
+        },
+        {
+          "tagName": "jx-checkbox",
+          "$props": {
+            "size": "lg",
+            "checked": true
+          },
+          "textContent": "Large"
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Slotted markup, and a bare box"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Slotted markup"
+      },
+      "children": [
+        {
+          "tagName": "jx-checkbox",
+          "children": [
+            "Register ",
+            {
+              "tagName": "code",
+              "textContent": "<my-element>"
+            }
+          ]
+        },
+        {
+          "tagName": "jx-checkbox",
+          "$props": {
+            "label": "Select every row"
+          }
+        },
+        {
+          "tagName": "span",
+          "textContent": "The bare box has no slotted text, so its label collapses and its name is the label prop."
+        }
+      ]
+    }
+  ]
+}