playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

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

@@ -0,0 +1,87 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["label", "icon"]
+    },
+    {
+      "name": "Rating",
+      "props": ["rating", "denominator", "variant", "onClick"]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "layoutOption",
+        "colorOption",
+        "backgroundType",
+        "size",
+        "fixedWidth"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Empty",
+      "props": { "rating": 0, "denominator": 5, "variant": "display" }
+    },
+    {
+      "name": "Half / partial",
+      "props": { "rating": 2.5, "denominator": 5, "variant": "display" }
+    },
+    {
+      "name": "Full score",
+      "props": { "rating": 5, "denominator": 5, "variant": "display" }
+    },
+    {
+      "name": "Out of 10",
+      "props": { "rating": 8, "denominator": 10, "variant": "display" }
+    },
+    {
+      "name": "Number layout",
+      "props": {
+        "rating": 4.2,
+        "denominator": 5,
+        "layoutOption": "number",
+        "variant": "display",
+        "size": "md"
+      }
+    },
+    {
+      "name": "One star highlight",
+      "props": {
+        "rating": 1,
+        "denominator": 5,
+        "layoutOption": "onestar",
+        "variant": "display"
+      }
+    },
+    {
+      "name": "Primary color",
+      "props": {
+        "rating": 4,
+        "denominator": 5,
+        "colorOption": "primary",
+        "variant": "display"
+      }
+    },
+    {
+      "name": "Interactive",
+      "props": {
+        "rating": 0,
+        "denominator": 5,
+        "variant": "interactive",
+        "onClick": "(n) => {}"
+      }
+    }
+  ],
+  "conditionals": {
+    "onClick": { "requires": { "variant": "interactive" } }
+  },
+  "hints": {
+    "interactive_click": {
+      "when": { "variant": "interactive" },
+      "message": "Interactive mode calls onClick with the star index; rating is controlled by your handler.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,71 @@
+{
+  "template": "<StatChange{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "change": "increase",
+    "value": "15"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "value",
+        "icon"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "change"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Increase",
+      "props": {
+        "change": "increase",
+        "value": "15"
+      }
+    },
+    {
+      "name": "Decrease",
+      "props": {
+        "change": "decrease",
+        "value": "8"
+      }
+    },
+    {
+      "name": "Neutral",
+      "props": {
+        "change": "neutral",
+        "value": "0"
+      }
+    },
+    {
+      "name": "Custom icon",
+      "props": {
+        "change": "increase",
+        "value": "12",
+        "icon": "chart-line"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "value_required": {
+      "when": {
+        "value": null
+      },
+      "message": "Nothing renders until value is set—the component appends \"%\" after the value (do not include \"%\" in the value).",
+      "type": "info"
+    },
+    "custom_icon": {
+      "when": {
+        "icon": true
+      },
+      "message": "Increase and decrease use arrow icons by default; set icon to override the arrow.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+{
+  "defaults": {
+    "change": "increase",
+    "value": "15"
+  },
+  "groups": [
+    { "name": "Content", "props": ["value", "icon"] },
+    { "name": "Appearance", "props": ["change"] }
+  ],
+  "presets": [
+    { "name": "Increase", "props": { "change": "increase", "value": "15" } },
+    { "name": "Decrease", "props": { "change": "decrease", "value": "8" } },
+    { "name": "Neutral", "props": { "change": "neutral", "value": "0" } },
+    { "name": "Custom icon", "props": { "change": "increase", "value": "12", "icon": "chart-line" } }
+  ],
+  "conditionals": {},
+  "hints": {
+    "value_required": {
+      "when": { "value": null },
+      "message": "Nothing renders until value is set—the component appends \"%\" after the value (do not include \"%\" in the value).",
+      "type": "info"
+    },
+    "custom_icon": {
+      "when": { "icon": true },
+      "message": "Increase and decrease use arrow icons by default; set icon to override the arrow.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+{
+  "template": "<StatValue{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "value": 1428,
+    "unit": "hrs"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "value",
+        "unit"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "value": 1428,
+        "unit": "hrs"
+      }
+    },
+    {
+      "name": "Value only",
+      "props": {
+        "value": 1428
+      }
+    },
+    {
+      "name": "Formatted string",
+      "props": {
+        "value": "2,000",
+        "unit": "views"
+      }
+    },
+    {
+      "name": "Zero state",
+      "props": {
+        "value": 0,
+        "unit": "tasks"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "unit_hint": {
+      "when": {
+        "unit": true
+      },
+      "message": "When a unit is set, it renders smaller than the value, with a space between.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+{
+  "defaults": {
+    "value": 1428,
+    "unit": "hrs"
+  },
+  "groups": [
+    { "name": "Content", "props": ["value", "unit"] }
+  ],
+  "presets": [
+    { "name": "Default", "props": { "value": 1428, "unit": "hrs" } },
+    { "name": "Value only", "props": { "value": 1428 } },
+    { "name": "Formatted string", "props": { "value": "2,000", "unit": "views" } },
+    { "name": "Zero state", "props": { "value": 0, "unit": "tasks" } }
+  ],
+  "conditionals": {},
+  "hints": {
+    "unit_hint": {
+      "when": { "unit": true },
+      "message": "When a unit is set, it renders smaller than the value, with a space between.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+{
+  "template": "<Table{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "collapse": "sm",
+    "container": true,
+    "dataTable": false,
+    "disableHover": false,
+    "headerStyle": "default",
+    "responsive": "collapse",
+    "singleLine": false,
+    "size": "md",
+    "sticky": false,
+    "striped": false,
+    "tag": "table",
+    "variant": "default",
+    "verticalBorder": false
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "cardProps",
+        "collapse",
+        "container",
+        "dark",
+        "dataTable",
+        "disableHover",
+        "filterProps",
+        "filterContent",
+        "headerStyle",
+        "outerPadding",
+        "pagination",
+        "responsive",
+        "singleLine",
+        "size",
+        "sticky",
+        "stickyLeftColumn",
+        "stickyRightColumn",
+        "striped",
+        "tag",
+        "title",
+        "titleProps",
+        "variant",
+        "verticalBorder"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,90 @@
+{
+  "template": "<TextInput{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "disabled": false,
+    "emojiMask": false,
+    "inline": false,
+    "required": false,
+    "requiredIndicator": false,
+    "type": "text"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "name",
+        "placeholder",
+        "value"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "disabled",
+        "error",
+        "required",
+        "requiredIndicator"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "inline",
+        "type",
+        "mask",
+        "emojiMask",
+        "autoComplete"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Email",
+        "name": "email",
+        "placeholder": "you@example.com",
+        "value": ""
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "label": "Email",
+        "name": "email",
+        "placeholder": "you@example.com",
+        "value": "not-an-email",
+        "error": "Please enter a valid email address."
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "First Name",
+        "name": "first_name",
+        "placeholder": "Jane",
+        "value": "",
+        "disabled": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "Email",
+        "name": "email",
+        "placeholder": "you@example.com",
+        "value": "",
+        "required": true,
+        "requiredIndicator": true
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "label"
+    }
+  },
+  "hints": {}
+}

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

@@ -0,0 +1,62 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["label", "name", "placeholder", "value"]
+    },
+    {
+      "name": "State",
+      "props": ["disabled", "error", "required", "requiredIndicator"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["inline", "type", "mask", "emojiMask", "autoComplete"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Email",
+        "name": "email",
+        "placeholder": "you@example.com",
+        "value": ""
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "label": "Email",
+        "name": "email",
+        "placeholder": "you@example.com",
+        "value": "not-an-email",
+        "error": "Please enter a valid email address."
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "First Name",
+        "name": "first_name",
+        "placeholder": "Jane",
+        "value": "",
+        "disabled": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "Email",
+        "name": "email",
+        "placeholder": "you@example.com",
+        "value": "",
+        "required": true,
+        "requiredIndicator": true
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": { "requires": "label" }
+  },
+  "hints": {}
+}

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

@@ -0,0 +1,89 @@
+{
+  "template": "<Textarea{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "disabled": false,
+    "emojiMask": false,
+    "inline": false,
+    "requiredIndicator": false,
+    "rows": 4,
+    "resize": "none"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "name",
+        "placeholder",
+        "value"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "disabled",
+        "error",
+        "required",
+        "requiredIndicator"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "inline",
+        "resize",
+        "rows",
+        "emojiMask"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Description",
+        "name": "description",
+        "placeholder": "Tell us more about your project…",
+        "value": ""
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "label": "Description",
+        "name": "description",
+        "placeholder": "Minimum 50 characters",
+        "value": "Hi",
+        "error": "Description must be at least 50 characters."
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Notes",
+        "name": "notes",
+        "placeholder": "Internal notes",
+        "value": "Scheduled for next sprint.",
+        "disabled": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "Description",
+        "name": "description",
+        "placeholder": "This field is required",
+        "value": "",
+        "required": true,
+        "requiredIndicator": true
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "label"
+    }
+  },
+  "hints": {}
+}

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

@@ -0,0 +1,62 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["label", "name", "placeholder", "value"]
+    },
+    {
+      "name": "State",
+      "props": ["disabled", "error", "required", "requiredIndicator"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["inline", "resize", "rows", "emojiMask"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Description",
+        "name": "description",
+        "placeholder": "Tell us more about your project…",
+        "value": ""
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "label": "Description",
+        "name": "description",
+        "placeholder": "Minimum 50 characters",
+        "value": "Hi",
+        "error": "Description must be at least 50 characters."
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Notes",
+        "name": "notes",
+        "placeholder": "Internal notes",
+        "value": "Scheduled for next sprint.",
+        "disabled": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "Description",
+        "name": "description",
+        "placeholder": "This field is required",
+        "value": "",
+        "required": true,
+        "requiredIndicator": true
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": { "requires": "label" }
+  },
+  "hints": {}
+}