playbook_ui_docs 16.5.0.pre.alpha.play289915580 → 16.5.0.pre.alpha.testingplayground15744

data/app/pb_kits/playbook/pb_select/docs/_playground.overrides.json

@@ -0,0 +1,80 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["label", "name", "value", "options", "blankSelection", "includeBlank"]
+    },
+    {
+      "name": "State",
+      "props": ["disabled", "error", "required", "requiredIndicator"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["inline", "compact", "showArrow", "multiple"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Country",
+        "name": "country",
+        "value": "us",
+        "options": [
+          { "value": "us", "text": "United States" },
+          { "value": "ca", "text": "Canada" },
+          { "value": "uk", "text": "United Kingdom" },
+          { "value": "au", "text": "Australia" }
+        ]
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "label": "Department",
+        "name": "department",
+        "value": "",
+        "blankSelection": "Select a department",
+        "error": "Please choose a department.",
+        "options": [
+          { "value": "eng", "text": "Engineering" },
+          { "value": "design", "text": "Design" },
+          { "value": "sales", "text": "Sales" }
+        ]
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Role",
+        "name": "role",
+        "value": "member",
+        "disabled": true,
+        "options": [
+          { "value": "admin", "text": "Admin" },
+          { "value": "member", "text": "Member" },
+          { "value": "guest", "text": "Guest" }
+        ]
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "Priority",
+        "name": "priority",
+        "value": "medium",
+        "required": true,
+        "requiredIndicator": true,
+        "options": [
+          { "value": "low", "text": "Low" },
+          { "value": "medium", "text": "Medium" },
+          { "value": "high", "text": "High" }
+        ]
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": { "requires": "label" }
+  },
+  "hints": {}
+}

data/app/pb_kits/playbook/pb_selectable_card/docs/_playground.json

@@ -0,0 +1,145 @@
+{
+  "template": "<SelectableCard{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "checked": false,
+    "disabled": false,
+    "error": false,
+    "icon": false,
+    "multi": true,
+    "variant": "default"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text",
+        "value",
+        "name",
+        "inputId"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "checked",
+        "disabled",
+        "error",
+        "multi"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "icon",
+        "customIcon"
+      ]
+    },
+    {
+      "name": "Events",
+      "props": [
+        "onChange"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Unselected",
+      "props": {
+        "checked": false,
+        "text": "Option label",
+        "name": "selectable_card_demo",
+        "value": "opt1",
+        "variant": "default",
+        "multi": true,
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Selected",
+      "props": {
+        "checked": true,
+        "text": "Selected option",
+        "name": "selectable_card_demo",
+        "value": "opt1",
+        "variant": "default",
+        "multi": true,
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "checked": false,
+        "disabled": true,
+        "text": "Unavailable",
+        "name": "selectable_card_demo",
+        "value": "opt2",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "With check icon",
+      "props": {
+        "checked": true,
+        "icon": true,
+        "text": "With icon",
+        "name": "selectable_card_demo",
+        "value": "opt3",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Radio (single)",
+      "props": {
+        "checked": false,
+        "multi": false,
+        "text": "Plan A",
+        "name": "plan",
+        "value": "a",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Display input variant",
+      "props": {
+        "checked": false,
+        "variant": "displayInput",
+        "text": "Display style",
+        "name": "selectable_card_demo",
+        "value": "disp1",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Error state",
+      "props": {
+        "checked": false,
+        "error": true,
+        "text": "Invalid choice",
+        "name": "selectable_card_demo",
+        "value": "err1",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    }
+  ],
+  "conditionals": {
+    "customIcon": {
+      "requires": {
+        "icon": true
+      }
+    }
+  },
+  "hints": {
+    "onchange_note": {
+      "when": {},
+      "message": "onChange receives the input change event; wire it to your form state in real usage.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_selectable_card/docs/_playground.overrides.json

@@ -0,0 +1,115 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["text", "value", "name", "inputId"]
+    },
+    {
+      "name": "State",
+      "props": ["checked", "disabled", "error", "multi"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["variant", "icon", "customIcon"]
+    },
+    {
+      "name": "Events",
+      "props": ["onChange"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Unselected",
+      "props": {
+        "checked": false,
+        "text": "Option label",
+        "name": "selectable_card_demo",
+        "value": "opt1",
+        "variant": "default",
+        "multi": true,
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Selected",
+      "props": {
+        "checked": true,
+        "text": "Selected option",
+        "name": "selectable_card_demo",
+        "value": "opt1",
+        "variant": "default",
+        "multi": true,
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "checked": false,
+        "disabled": true,
+        "text": "Unavailable",
+        "name": "selectable_card_demo",
+        "value": "opt2",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "With check icon",
+      "props": {
+        "checked": true,
+        "icon": true,
+        "text": "With icon",
+        "name": "selectable_card_demo",
+        "value": "opt3",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Radio (single)",
+      "props": {
+        "checked": false,
+        "multi": false,
+        "text": "Plan A",
+        "name": "plan",
+        "value": "a",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Display input variant",
+      "props": {
+        "checked": false,
+        "variant": "displayInput",
+        "text": "Display style",
+        "name": "selectable_card_demo",
+        "value": "disp1",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Error state",
+      "props": {
+        "checked": false,
+        "error": true,
+        "text": "Invalid choice",
+        "name": "selectable_card_demo",
+        "value": "err1",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    }
+  ],
+  "conditionals": {
+    "customIcon": { "requires": { "icon": true } }
+  },
+  "hints": {
+    "onchange_note": {
+      "when": {},
+      "message": "onChange receives the input change event; wire it to your form state in real usage.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_playground.json

@@ -0,0 +1,37 @@
+{
+  "template": "<SelectableCardIcon{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "checked": false,
+    "checkmark": false,
+    "disabled": false,
+    "multi": true
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "checked",
+        "checkmark",
+        "customIcon",
+        "disabled",
+        "icon",
+        "inputId",
+        "multi",
+        "name",
+        "titleText",
+        "bodyText",
+        "value",
+        "onChange"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

data/app/pb_kits/playbook/pb_selectable_icon/docs/_playground.json

@@ -0,0 +1,113 @@
+{
+  "template": "<SelectableIcon{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "checked": false,
+    "disabled": false,
+    "inputs": "enabled",
+    "multi": true
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "icon",
+        "text",
+        "name",
+        "value",
+        "inputId"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "checked",
+        "disabled",
+        "multi",
+        "inputs"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "customIcon"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Unchecked",
+      "props": {
+        "icon": "user",
+        "text": "Assignee",
+        "name": "assignee",
+        "inputId": "assignee_1",
+        "value": "user1",
+        "checked": false,
+        "multi": true,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Checked",
+      "props": {
+        "icon": "check-circle",
+        "text": "Confirmed",
+        "name": "status",
+        "inputId": "status_1",
+        "value": "ok",
+        "checked": true,
+        "multi": true,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "icon": "bell",
+        "text": "Notifications",
+        "name": "notifications",
+        "inputId": "notifications_1",
+        "value": "off",
+        "checked": false,
+        "disabled": true,
+        "multi": true,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Radio (single)",
+      "props": {
+        "icon": "circle",
+        "text": "Option A",
+        "name": "radio_demo",
+        "inputId": "radio_a",
+        "value": "a",
+        "checked": true,
+        "multi": false,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Inputs hidden",
+      "props": {
+        "icon": "star",
+        "text": "Favorite",
+        "name": "fav",
+        "inputId": "fav_1",
+        "value": "fav",
+        "checked": false,
+        "inputs": "disabled",
+        "multi": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "required_ids": {
+      "when": {},
+      "message": "icon, text, name, and inputId identify the control for forms and accessibility.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_selectable_icon/docs/_playground.overrides.json

@@ -0,0 +1,92 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["icon", "text", "name", "value", "inputId"]
+    },
+    {
+      "name": "State",
+      "props": ["checked", "disabled", "multi", "inputs"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["customIcon"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Unchecked",
+      "props": {
+        "icon": "user",
+        "text": "Assignee",
+        "name": "assignee",
+        "inputId": "assignee_1",
+        "value": "user1",
+        "checked": false,
+        "multi": true,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Checked",
+      "props": {
+        "icon": "check-circle",
+        "text": "Confirmed",
+        "name": "status",
+        "inputId": "status_1",
+        "value": "ok",
+        "checked": true,
+        "multi": true,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "icon": "bell",
+        "text": "Notifications",
+        "name": "notifications",
+        "inputId": "notifications_1",
+        "value": "off",
+        "checked": false,
+        "disabled": true,
+        "multi": true,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Radio (single)",
+      "props": {
+        "icon": "circle",
+        "text": "Option A",
+        "name": "radio_demo",
+        "inputId": "radio_a",
+        "value": "a",
+        "checked": true,
+        "multi": false,
+        "inputs": "enabled"
+      }
+    },
+    {
+      "name": "Inputs hidden",
+      "props": {
+        "icon": "star",
+        "text": "Favorite",
+        "name": "fav",
+        "inputId": "fav_1",
+        "value": "fav",
+        "checked": false,
+        "inputs": "disabled",
+        "multi": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "required_ids": {
+      "when": {},
+      "message": "icon, text, name, and inputId identify the control for forms and accessibility.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_selectable_list/docs/_playground.json

@@ -0,0 +1,53 @@
+{
+  "template": "<SelectableList{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "enableDrag": false,
+    "variant": "checkbox"
+  },
+  "groups": [
+    {
+      "name": "State",
+      "props": [
+        "variant"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "enableDrag"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Checkbox list",
+      "props": {
+        "variant": "checkbox",
+        "enableDrag": false
+      }
+    },
+    {
+      "name": "Radio list",
+      "props": {
+        "variant": "radio",
+        "enableDrag": false
+      }
+    },
+    {
+      "name": "Checkbox + drag",
+      "props": {
+        "variant": "checkbox",
+        "enableDrag": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "items_note": {
+      "when": {},
+      "message": "Add SelectableList.Item rows as children; enableDrag defers to List for reordering.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_selectable_list/docs/_playground.overrides.json

@@ -0,0 +1,34 @@
+{
+  "groups": [
+    {
+      "name": "State",
+      "props": ["variant"]
+    },
+    {
+      "name": "Behavior",
+      "props": ["enableDrag"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Checkbox list",
+      "props": { "variant": "checkbox", "enableDrag": false }
+    },
+    {
+      "name": "Radio list",
+      "props": { "variant": "radio", "enableDrag": false }
+    },
+    {
+      "name": "Checkbox + drag",
+      "props": { "variant": "checkbox", "enableDrag": true }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "items_note": {
+      "when": {},
+      "message": "Add SelectableList.Item rows as children; enableDrag defers to List for reordering.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_playground.json

@@ -0,0 +1,25 @@
+{
+  "template": "<SkeletonLoading{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "stack": 1,
+    "color": "default"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "stack",
+        "color"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}