playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

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

@@ -0,0 +1,80 @@
+{
+  "template": "<Title{{props}}>{{children}}</Title>",
+  "propTargets": {},
+  "defaults": {
+    "bold": true,
+    "size": 3,
+    "tag": "h3"
+  },
+  "children": {
+    "editable": true,
+    "default": "Section heading",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "displaySize",
+        "color",
+        "bold",
+        "variant",
+        "tag"
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
+        "text"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Page title",
+      "props": {
+        "size": 1,
+        "tag": "h1"
+      },
+      "children": "Customer insights dashboard"
+    },
+    {
+      "name": "Section",
+      "props": {
+        "size": 3,
+        "tag": "h3"
+      },
+      "children": "Recent activity"
+    },
+    {
+      "name": "Subtitle",
+      "props": {
+        "size": 4,
+        "bold": false,
+        "tag": "h4"
+      },
+      "children": "Last updated 2 hours ago"
+    },
+    {
+      "name": "Success",
+      "props": {
+        "color": "success",
+        "size": 3
+      },
+      "children": "Payment confirmed"
+    },
+    {
+      "name": "Display size",
+      "props": {
+        "displaySize": "lg",
+        "tag": "h2"
+      },
+      "children": "Hero headline"
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,44 @@
+{
+  "children": {
+    "default": "Section heading"
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": ["size", "displaySize", "color", "bold", "variant", "tag"]
+    },
+    {
+      "name": "Content",
+      "props": ["text"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Page title",
+      "props": { "size": 1, "tag": "h1" },
+      "children": "Customer insights dashboard"
+    },
+    {
+      "name": "Section",
+      "props": { "size": 3, "tag": "h3" },
+      "children": "Recent activity"
+    },
+    {
+      "name": "Subtitle",
+      "props": { "size": 4, "bold": false, "tag": "h4" },
+      "children": "Last updated 2 hours ago"
+    },
+    {
+      "name": "Success",
+      "props": { "color": "success", "size": 3 },
+      "children": "Payment confirmed"
+    },
+    {
+      "name": "Display size",
+      "props": { "displaySize": "lg", "tag": "h2" },
+      "children": "Hero headline"
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,66 @@
+{
+  "template": "<TitleCount{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left",
+    "size": "sm",
+    "count": 1428,
+    "title": "Active users"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "title",
+        "count"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "align",
+        "size"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "title": "Active users",
+        "count": 1428,
+        "align": "left",
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Large headline",
+      "props": {
+        "title": "Subscriptions",
+        "count": 2000,
+        "size": "lg",
+        "align": "left"
+      }
+    },
+    {
+      "name": "Centered",
+      "props": {
+        "title": "Completion rate",
+        "count": 15,
+        "align": "center",
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Right aligned",
+      "props": {
+        "title": "Open tickets",
+        "count": 99,
+        "align": "right",
+        "size": "sm"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,20 @@
+{
+  "defaults": {
+    "align": "left",
+    "count": 1428,
+    "title": "Active users",
+    "size": "sm"
+  },
+  "groups": [
+    { "name": "Content", "props": ["title", "count"] },
+    { "name": "Appearance", "props": ["align", "size"] }
+  ],
+  "presets": [
+    { "name": "Default", "props": { "title": "Active users", "count": 1428, "align": "left", "size": "sm" } },
+    { "name": "Large headline", "props": { "title": "Subscriptions", "count": 2000, "size": "lg", "align": "left" } },
+    { "name": "Centered", "props": { "title": "Completion rate", "count": 15, "align": "center", "size": "sm" } },
+    { "name": "Right aligned", "props": { "title": "Open tickets", "count": 99, "align": "right", "size": "sm" } }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,60 @@
+{
+  "template": "<TitleDetail{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left",
+    "title": "Revenue",
+    "detail": "$2,000 MRR · 15% vs last month"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "title",
+        "detail"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "align"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "title": "Revenue",
+        "detail": "$2,000 MRR · 15% vs last month",
+        "align": "left"
+      }
+    },
+    {
+      "name": "KPI summary",
+      "props": {
+        "title": "Pipeline",
+        "detail": "1,428 qualified leads",
+        "align": "left"
+      }
+    },
+    {
+      "name": "Centered",
+      "props": {
+        "title": "Uptime",
+        "detail": "99.95% last 30 days",
+        "align": "center"
+      }
+    },
+    {
+      "name": "Right aligned",
+      "props": {
+        "title": "Spend",
+        "detail": "Within budget",
+        "align": "right"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,19 @@
+{
+  "defaults": {
+    "align": "left",
+    "title": "Revenue",
+    "detail": "$2,000 MRR · 15% vs last month"
+  },
+  "groups": [
+    { "name": "Content", "props": ["title", "detail"] },
+    { "name": "Appearance", "props": ["align"] }
+  ],
+  "presets": [
+    { "name": "Default", "props": { "title": "Revenue", "detail": "$2,000 MRR · 15% vs last month", "align": "left" } },
+    { "name": "KPI summary", "props": { "title": "Pipeline", "detail": "1,428 qualified leads", "align": "left" } },
+    { "name": "Centered", "props": { "title": "Uptime", "detail": "99.95% last 30 days", "align": "center" } },
+    { "name": "Right aligned", "props": { "title": "Spend", "detail": "Within budget", "align": "right" } }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,68 @@
+{
+  "template": "<Toggle{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "checked": false,
+    "disabled": false,
+    "size": "sm"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "name",
+        "value"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "disabled",
+        "checked"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "name": "marketing_emails",
+        "value": "opt_in"
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "name": "dark_mode",
+        "value": "theme",
+        "checked": true
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "name": "auto_save",
+        "value": "enabled",
+        "checked": true,
+        "disabled": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "name": "notifications",
+        "value": "push",
+        "size": "md",
+        "checked": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,53 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["name", "value"]
+    },
+    {
+      "name": "State",
+      "props": ["disabled", "checked"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "name": "marketing_emails",
+        "value": "opt_in"
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "name": "dark_mode",
+        "value": "theme",
+        "checked": true
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "name": "auto_save",
+        "value": "enabled",
+        "checked": true,
+        "disabled": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "name": "notifications",
+        "value": "push",
+        "size": "md",
+        "checked": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,91 @@
+{
+  "template": "<Tooltip{{props}}>{{children}}</Tooltip>",
+  "propTargets": {},
+  "defaults": {
+    "useClickToOpen": false,
+    "interaction": false
+  },
+  "children": {
+    "editable": true,
+    "default": "Hover me",
+    "hideWhenPropSet": []
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text",
+        "icon"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "placement",
+        "useClickToOpen",
+        "interaction",
+        "delay"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "showTooltip",
+        "forceOpenTooltip"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Top",
+      "props": {
+        "placement": "top",
+        "text": "Tooltip on top"
+      },
+      "children": "Hover me"
+    },
+    {
+      "name": "Bottom",
+      "props": {
+        "placement": "bottom",
+        "text": "Tooltip on bottom"
+      },
+      "children": "Hover me"
+    },
+    {
+      "name": "Left",
+      "props": {
+        "placement": "left",
+        "text": "Tooltip on the left"
+      },
+      "children": "Hover me"
+    },
+    {
+      "name": "Right",
+      "props": {
+        "placement": "right",
+        "text": "Tooltip on the right"
+      },
+      "children": "Hover me"
+    },
+    {
+      "name": "Click to open",
+      "props": {
+        "placement": "top",
+        "useClickToOpen": true,
+        "text": "Click toggles this tooltip"
+      },
+      "children": "Click me"
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "click_to_open": {
+      "when": {
+        "useClickToOpen": true
+      },
+      "message": "When click to open is on, the tooltip toggles on click instead of hover.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+{
+  "children": {
+    "default": "Hover me",
+    "hideWhenPropSet": []
+  },
+  "groups": [
+    { "name": "Content", "props": ["text", "icon"] },
+    {
+      "name": "Behavior",
+      "props": ["placement", "useClickToOpen", "interaction", "delay"]
+    },
+    { "name": "Appearance", "props": ["showTooltip", "forceOpenTooltip"] }
+  ],
+  "presets": [
+    {
+      "name": "Top",
+      "props": { "placement": "top", "text": "Tooltip on top" },
+      "children": "Hover me"
+    },
+    {
+      "name": "Bottom",
+      "props": { "placement": "bottom", "text": "Tooltip on bottom" },
+      "children": "Hover me"
+    },
+    {
+      "name": "Left",
+      "props": { "placement": "left", "text": "Tooltip on the left" },
+      "children": "Hover me"
+    },
+    {
+      "name": "Right",
+      "props": { "placement": "right", "text": "Tooltip on the right" },
+      "children": "Hover me"
+    },
+    {
+      "name": "Click to open",
+      "props": {
+        "placement": "top",
+        "useClickToOpen": true,
+        "text": "Click toggles this tooltip"
+      },
+      "children": "Click me"
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "click_to_open": {
+      "when": { "useClickToOpen": true },
+      "message": "When click to open is on, the tooltip toggles on click instead of hover.",
+      "type": "info"
+    }
+  }
+}