playbook_ui_docs 16.6.0 → 16.7.0.pre.rc.0

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

@@ -0,0 +1,51 @@
+{
+  "groups": [
+    { "name": "Content", "props": ["title", "value"] },
+    { "name": "Behavior", "props": ["steps", "active"] },
+    { "name": "Appearance", "props": ["fullWidthPill"] }
+  ],
+  "presets": [
+    {
+      "name": "Step 1 of 4",
+      "props": { "steps": 4, "active": 1, "title": "Checkout", "value": "Shipping" }
+    },
+    {
+      "name": "Step 2 of 4",
+      "props": { "steps": 4, "active": 2, "title": "Checkout", "value": "Payment" }
+    },
+    {
+      "name": "Mid flow (5 steps)",
+      "props": { "steps": 5, "active": 3, "title": "Onboarding", "value": "Step 3 of 5" }
+    },
+    {
+      "name": "Complete",
+      "props": {
+        "steps": 4,
+        "active": 4,
+        "title": "Checkout",
+        "value": "Review"
+      }
+    },
+    {
+      "name": "Not started",
+      "props": {
+        "steps": 4,
+        "active": 0,
+        "title": "Progress",
+        "value": "No steps completed yet"
+      }
+    },
+    {
+      "name": "Full-width pills",
+      "props": {
+        "steps": 3,
+        "active": 2,
+        "fullWidthPill": true,
+        "title": "Wide layout",
+        "value": "Pills stretch to fill the row"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,87 @@
+{
+  "template": "<ProgressSimple{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left",
+    "muted": false,
+    "variant": "default"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "percent",
+        "value",
+        "max"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "align"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "muted"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "0%",
+      "props": {
+        "percent": "0"
+      }
+    },
+    {
+      "name": "25%",
+      "props": {
+        "percent": "25"
+      }
+    },
+    {
+      "name": "50%",
+      "props": {
+        "percent": "50"
+      }
+    },
+    {
+      "name": "75%",
+      "props": {
+        "percent": "75"
+      }
+    },
+    {
+      "name": "100%",
+      "props": {
+        "percent": "100"
+      }
+    },
+    {
+      "name": "Positive 75%",
+      "props": {
+        "percent": "75",
+        "variant": "positive"
+      }
+    },
+    {
+      "name": "Warning 50%",
+      "props": {
+        "percent": "50",
+        "variant": "warning"
+      }
+    },
+    {
+      "name": "Centered",
+      "props": {
+        "percent": "60",
+        "align": "center"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,28 @@
+{
+  "groups": [
+    { "name": "Content", "props": ["percent", "value", "max"] },
+    { "name": "Behavior", "props": ["align"] },
+    { "name": "Appearance", "props": ["variant", "muted"] }
+  ],
+  "presets": [
+    { "name": "0%", "props": { "percent": "0" } },
+    { "name": "25%", "props": { "percent": "25" } },
+    { "name": "50%", "props": { "percent": "50" } },
+    { "name": "75%", "props": { "percent": "75" } },
+    { "name": "100%", "props": { "percent": "100" } },
+    {
+      "name": "Positive 75%",
+      "props": { "percent": "75", "variant": "positive" }
+    },
+    {
+      "name": "Warning 50%",
+      "props": { "percent": "50", "variant": "warning" }
+    },
+    {
+      "name": "Centered",
+      "props": { "percent": "60", "align": "center" }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,31 @@
+{
+  "template": "<ProgressStep{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "orientation": "horizontal",
+    "icon": false,
+    "showIcon": false,
+    "variant": "default",
+    "color": "primary"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "orientation",
+        "icon",
+        "showIcon",
+        "variant",
+        "color"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,83 @@
+{
+  "template": "<Radio{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "alignment": "",
+    "checked": false,
+    "customChildren": false,
+    "disabled": false,
+    "error": false,
+    "name": "radio_name",
+    "value": "radio_text",
+    "text": "Radio Text"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "name",
+        "value",
+        "text"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "disabled",
+        "error",
+        "checked"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "alignment",
+        "customChildren"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Standard shipping",
+        "name": "shipping_method",
+        "value": "standard",
+        "text": "Standard shipping"
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "label": "Express shipping",
+        "name": "shipping_method",
+        "value": "express",
+        "text": "Express shipping",
+        "error": true
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Overnight shipping",
+        "name": "shipping_method",
+        "value": "overnight",
+        "text": "Overnight shipping",
+        "disabled": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "Standard shipping",
+        "name": "shipping_method",
+        "value": "standard",
+        "text": "Standard shipping",
+        "checked": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,59 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["label", "name", "value", "text"]
+    },
+    {
+      "name": "State",
+      "props": ["disabled", "error", "checked"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["alignment", "customChildren"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Standard shipping",
+        "name": "shipping_method",
+        "value": "standard",
+        "text": "Standard shipping"
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "label": "Express shipping",
+        "name": "shipping_method",
+        "value": "express",
+        "text": "Express shipping",
+        "error": true
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Overnight shipping",
+        "name": "shipping_method",
+        "value": "overnight",
+        "text": "Overnight shipping",
+        "disabled": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "Standard shipping",
+        "name": "shipping_method",
+        "value": "standard",
+        "text": "Standard shipping",
+        "checked": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,41 @@
+{
+  "template": "<RichTextEditor{{props}} />",
+  "propTargets": {},
+  "defaults": {},
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "advancedEditor",
+        "advancedEditorToolbar",
+        "toolbarBottom",
+        "focus",
+        "inputOptions",
+        "inline",
+        "label",
+        "extensions",
+        "name",
+        "onChange",
+        "placeholder",
+        "inputHeight",
+        "inputMinHeight",
+        "requiredIndicator",
+        "simple",
+        "sticky",
+        "template",
+        "value",
+        "maxWidth",
+        "TrixEditor",
+        "trixInstance"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,128 @@
+{
+  "template": "<SectionSeparator{{props}}>{{children}}</SectionSeparator>",
+  "propTargets": {},
+  "defaults": {
+    "color": "default",
+    "lineStyle": "solid",
+    "orientation": "horizontal",
+    "variant": "card"
+  },
+  "groups": [
+    {
+      "name": "Orientation & variant",
+      "props": [
+        "orientation",
+        "variant"
+      ]
+    },
+    {
+      "name": "Line",
+      "props": [
+        "lineStyle",
+        "color"
+      ]
+    },
+    {
+      "name": "Label",
+      "props": [
+        "text"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Horizontal line",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "color": "default",
+        "variant": "card"
+      }
+    },
+    {
+      "name": "Vertical rule",
+      "props": {
+        "orientation": "vertical",
+        "lineStyle": "solid",
+        "color": "default",
+        "variant": "card",
+        "height": "120px"
+      }
+    },
+    {
+      "name": "With label",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "text": "Section",
+        "variant": "card"
+      },
+      "children": ""
+    },
+    {
+      "name": "Primary accent",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "color": "primary",
+        "variant": "card"
+      }
+    },
+    {
+      "name": "Dashed",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "dashed",
+        "color": "default",
+        "variant": "card"
+      }
+    },
+    {
+      "name": "Dashed vertical",
+      "props": {
+        "orientation": "vertical",
+        "lineStyle": "dashed",
+        "color": "default",
+        "variant": "card",
+        "height": "120px"
+      }
+    },
+    {
+      "name": "On background",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "variant": "background",
+        "color": "default"
+      }
+    },
+    {
+      "name": "Primary on background",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "variant": "background",
+        "color": "primary",
+        "text": "Divider"
+      },
+      "children": ""
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "vertical_height": {
+      "when": {
+        "orientation": "vertical"
+      },
+      "message": "Vertical separators often need a height (global prop) so the line is visible.",
+      "type": "info"
+    }
+  },
+  "children": {
+    "default": "",
+    "editable": true,
+    "hideWhenPropSet": [
+      "text"
+    ]
+  }
+}

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

@@ -0,0 +1,109 @@
+{
+  "template": "<SectionSeparator{{props}}>{{children}}</SectionSeparator>",
+  "children": {
+    "default": "",
+    "editable": true,
+    "hideWhenPropSet": ["text"]
+  },
+  "groups": [
+    {
+      "name": "Orientation & variant",
+      "props": ["orientation", "variant"]
+    },
+    {
+      "name": "Line",
+      "props": ["lineStyle", "color"]
+    },
+    {
+      "name": "Label",
+      "props": ["text"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Horizontal line",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "color": "default",
+        "variant": "card"
+      }
+    },
+    {
+      "name": "Vertical rule",
+      "props": {
+        "orientation": "vertical",
+        "lineStyle": "solid",
+        "color": "default",
+        "variant": "card",
+        "height": "120px"
+      }
+    },
+    {
+      "name": "With label",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "text": "Section",
+        "variant": "card"
+      },
+      "children": ""
+    },
+    {
+      "name": "Primary accent",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "color": "primary",
+        "variant": "card"
+      }
+    },
+    {
+      "name": "Dashed",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "dashed",
+        "color": "default",
+        "variant": "card"
+      }
+    },
+    {
+      "name": "Dashed vertical",
+      "props": {
+        "orientation": "vertical",
+        "lineStyle": "dashed",
+        "color": "default",
+        "variant": "card",
+        "height": "120px"
+      }
+    },
+    {
+      "name": "On background",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "variant": "background",
+        "color": "default"
+      }
+    },
+    {
+      "name": "Primary on background",
+      "props": {
+        "orientation": "horizontal",
+        "lineStyle": "solid",
+        "variant": "background",
+        "color": "primary",
+        "text": "Divider"
+      },
+      "children": ""
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "vertical_height": {
+      "when": { "orientation": "vertical" },
+      "message": "Vertical separators often need a height (global prop) so the line is visible.",
+      "type": "info"
+    }
+  }
+}