playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

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

@@ -0,0 +1,81 @@
+{
+  "template": "<ButtonToolbar{{props}}>\n  {{children}}\n</ButtonToolbar>",
+  "propTargets": {},
+  "defaults": {
+    "orientation": "horizontal",
+    "variant": "primary"
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": [
+        "orientation"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant"
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
+        "text"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "orientation": "horizontal",
+        "variant": "primary"
+      },
+      "children": "<Button text=\"Create\" />\n<Button text=\"Edit\" />\n<Button text=\"Delete\" />"
+    },
+    {
+      "name": "Vertical",
+      "props": {
+        "orientation": "vertical",
+        "variant": "primary"
+      },
+      "children": "<Button text=\"Create\" />\n<Button text=\"Edit\" />\n<Button text=\"Copy\" />\n<Button text=\"Cut\" />"
+    },
+    {
+      "name": "Secondary",
+      "props": {
+        "orientation": "horizontal",
+        "variant": "secondary"
+      },
+      "children": "<Button text=\"Save\" variant=\"secondary\" />\n<Button text=\"Cancel\" variant=\"secondary\" />"
+    },
+    {
+      "name": "Icon Buttons",
+      "props": {
+        "orientation": "vertical",
+        "variant": "secondary"
+      },
+      "children": "<Button icon=\"bold\" variant=\"secondary\" />\n<Button icon=\"italic\" variant=\"secondary\" />\n<Button icon=\"underline\" variant=\"secondary\" />"
+    }
+  ],
+  "conditionals": {
+    "text": {
+      "hides": "children"
+    }
+  },
+  "hints": {
+    "container_usage": {
+      "when": {},
+      "message": "ButtonToolbar is a container for Button components. Add Button children to create grouped actions.",
+      "type": "info"
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<Button text=\"Create\" />\n<Button text=\"Edit\" />\n<Button text=\"Delete\" />",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  }
+}

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

@@ -0,0 +1,54 @@
+{
+  "template": "<ButtonToolbar{{props}}>\n  {{children}}\n</ButtonToolbar>",
+  "children": {
+    "editable": true,
+    "default": "<Button text=\"Create\" />\n<Button text=\"Edit\" />\n<Button text=\"Delete\" />",
+    "hideWhenPropSet": ["text"]
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": ["orientation"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["variant"]
+    },
+    {
+      "name": "Content",
+      "props": ["text"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": { "orientation": "horizontal", "variant": "primary" },
+      "children": "<Button text=\"Create\" />\n<Button text=\"Edit\" />\n<Button text=\"Delete\" />"
+    },
+    {
+      "name": "Vertical",
+      "props": { "orientation": "vertical", "variant": "primary" },
+      "children": "<Button text=\"Create\" />\n<Button text=\"Edit\" />\n<Button text=\"Copy\" />\n<Button text=\"Cut\" />"
+    },
+    {
+      "name": "Secondary",
+      "props": { "orientation": "horizontal", "variant": "secondary" },
+      "children": "<Button text=\"Save\" variant=\"secondary\" />\n<Button text=\"Cancel\" variant=\"secondary\" />"
+    },
+    {
+      "name": "Icon Buttons",
+      "props": { "orientation": "vertical", "variant": "secondary" },
+      "children": "<Button icon=\"bold\" variant=\"secondary\" />\n<Button icon=\"italic\" variant=\"secondary\" />\n<Button icon=\"underline\" variant=\"secondary\" />"
+    }
+  ],
+  "conditionals": {
+    "text": { "hides": "children" }
+  },
+  "hints": {
+    "container_usage": {
+      "when": {},
+      "message": "ButtonToolbar is a container for Button components. Add Button children to create grouped actions.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+{
+  "template": "<Caption{{props}}>{{children}}</Caption>",
+  "propTargets": {},
+  "defaults": {
+    "size": "md",
+    "tag": "div"
+  },
+  "children": {
+    "editable": true,
+    "default": "Figure 1 · Quarterly revenue by region",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "color",
+        "variant",
+        "tag"
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
+        "text"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "size": "md"
+      },
+      "children": "Figure 1 · Quarterly revenue by region"
+    },
+    {
+      "name": "Small",
+      "props": {
+        "size": "xs",
+        "color": "light"
+      },
+      "children": "Posted 3 days ago · 4 min read"
+    },
+    {
+      "name": "Success note",
+      "props": {
+        "color": "success"
+      },
+      "children": "You did it!"
+    },
+    {
+      "name": "Text only",
+      "props": {
+        "text": "I am a self-contained caption"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,39 @@
+{
+  "children": {
+    "default": "Figure 1 · Quarterly revenue by region",
+    "hideWhenPropSet": ["text"]
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": ["size", "color", "variant", "tag"]
+    },
+    {
+      "name": "Content",
+      "props": ["text"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": { "size": "md" },
+      "children": "Figure 1 · Quarterly revenue by region"
+    },
+    {
+      "name": "Small",
+      "props": { "size": "xs", "color": "light" },
+      "children": "Posted 3 days ago · 4 min read"
+    },
+    {
+      "name": "Success note",
+      "props": { "color": "success" },
+      "children": "You did it!"
+    },
+    {
+      "name": "Text only",
+      "props": { "text": "I am a self-contained caption" }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,157 @@
+{
+  "template": "<Card{{props}}>{{children}}</Card>",
+  "propTargets": {
+    "headerColor": "Card.Header.props",
+    "headerColorStriped": "Card.Header.props"
+  },
+  "defaults": {
+    "background": "none",
+    "borderNone": false,
+    "draggableItem": false,
+    "dragHandle": true,
+    "selected": false,
+    "tag": "div",
+    "headerColor": "category_1",
+    "headerColorStriped": false
+  },
+  "children": {
+    "editable": true,
+    "default": "Card content"
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": [
+        "background",
+        "borderNone",
+        "selected"
+      ]
+    },
+    {
+      "name": "Layout",
+      "props": [
+        "tag"
+      ]
+    },
+    {
+      "name": "Card.Header",
+      "props": [
+        "headerColor",
+        "headerColorStriped"
+      ]
+    },
+    {
+      "name": "Draggable",
+      "props": [
+        "draggableItem",
+        "dragHandle",
+        "dragId",
+        "length"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "Card content"
+    },
+    {
+      "name": "No borders",
+      "props": {
+        "borderNone": true
+      },
+      "children": "No borders"
+    },
+    {
+      "name": "Rounded & spacious",
+      "props": {
+        "background": "light",
+        "padding": "lg",
+        "borderRadius": "lg"
+      },
+      "children": "Extra padding and large radius"
+    },
+    {
+      "name": "Dark surface",
+      "props": {
+        "background": "dark",
+        "padding": "md"
+      },
+      "children": "<Body dark text=\"Dark background\" />"
+    },
+    {
+      "name": "Selected",
+      "props": {
+        "background": "white",
+        "selected": true,
+        "padding": "md"
+      },
+      "children": "Selected state"
+    },
+    {
+      "name": "Highlight",
+      "props": {
+        "highlight": {
+          "position": "side",
+          "color": "primary"
+        }
+      },
+      "children": "Highlighted card"
+    }
+  ],
+  "conditionals": {
+    "dragId": {
+      "requires": "draggableItem"
+    },
+    "dragHandle": {
+      "requires": "draggableItem"
+    },
+    "length": {
+      "requires": "draggableItem"
+    }
+  },
+  "hints": {
+    "draggable_mode": {
+      "when": {
+        "draggableItem": true
+      },
+      "message": "When draggableItem is on, set dragId to match the Draggable container.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "simple",
+    "modes": {
+      "simple": {
+        "label": "Simple",
+        "template": "<Card{{props}}>\n  {{children}}\n</Card>",
+        "children": "Card content"
+      },
+      "header_body": {
+        "label": "Header + Body",
+        "template": "<Card{{props}}>\n  <Card.Header{{Card.Header.props}}>Header title</Card.Header>\n  <Card.Body>{{children}}</Card.Body>\n</Card>",
+        "children": "Body content here",
+        "props": {
+          "padding": "none"
+        },
+        "propTargets": {
+          "headerColor": "Card.Header.props",
+          "headerColorStriped": "Card.Header.props"
+        }
+      },
+      "full": {
+        "label": "Header + Body + Footer",
+        "template": "<Card{{props}}>\n  <Card.Header{{Card.Header.props}}>Header title</Card.Header>\n  <Card.Body>{{children}}</Card.Body>\n  <Flex padding=\"sm\" justify=\"end\">\n    <Button text=\"Action\" />\n  </Flex>\n</Card>",
+        "children": "Body content here",
+        "props": {
+          "padding": "none"
+        },
+        "propTargets": {
+          "headerColor": "Card.Header.props",
+          "headerColorStriped": "Card.Header.props"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,119 @@
+{
+  "structureModes": {
+    "default": "simple",
+    "modes": {
+      "simple": {
+        "label": "Simple",
+        "template": "<Card{{props}}>\n  {{children}}\n</Card>",
+        "children": "Card content"
+      },
+      "header_body": {
+        "label": "Header + Body",
+        "template": "<Card{{props}}>\n  <Card.Header{{Card.Header.props}}>Header title</Card.Header>\n  <Card.Body>{{children}}</Card.Body>\n</Card>",
+        "children": "Body content here",
+        "props": { "padding": "none" },
+        "propTargets": {
+          "headerColor": "Card.Header.props",
+          "headerColorStriped": "Card.Header.props"
+        }
+      },
+      "full": {
+        "label": "Header + Body + Footer",
+        "template": "<Card{{props}}>\n  <Card.Header{{Card.Header.props}}>Header title</Card.Header>\n  <Card.Body>{{children}}</Card.Body>\n  <Flex padding=\"sm\" justify=\"end\">\n    <Button text=\"Action\" />\n  </Flex>\n</Card>",
+        "children": "Body content here",
+        "props": { "padding": "none" },
+        "propTargets": {
+          "headerColor": "Card.Header.props",
+          "headerColorStriped": "Card.Header.props"
+        }
+      }
+    }
+  },
+  "propTargets": {
+    "headerColor": "Card.Header.props",
+    "headerColorStriped": "Card.Header.props"
+  },
+  "children": {
+    "default": "Card content"
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": ["background", "borderNone", "selected"]
+    },
+    {
+      "name": "Layout",
+      "props": ["tag"]
+    },
+    {
+      "name": "Card.Header",
+      "props": ["headerColor", "headerColorStriped"]
+    },
+    {
+      "name": "Draggable",
+      "props": ["draggableItem", "dragHandle", "dragId", "length"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "Card content"
+    },
+    {
+      "name": "No borders",
+      "props": {
+        "borderNone": true
+      },
+      "children": "No borders"
+    },
+    {
+      "name": "Rounded & spacious",
+      "props": {
+        "background": "light",
+        "padding": "lg",
+        "borderRadius": "lg"
+      },
+      "children": "Extra padding and large radius"
+    },
+    {
+      "name": "Dark surface",
+      "props": {
+        "background": "dark",
+        "padding": "md"
+      },
+      "children": "<Body dark text=\"Dark background\" />"
+    },
+    {
+      "name": "Selected",
+      "props": {
+        "background": "white",
+        "selected": true,
+        "padding": "md"
+      },
+      "children": "Selected state"
+    },
+    {
+      "name": "Highlight",
+      "props": {
+        "highlight": {
+          "position": "side",
+          "color": "primary"
+        }
+      },
+      "children": "Highlighted card"
+    }
+  ],
+  "conditionals": {
+    "dragId": { "requires": "draggableItem" },
+    "dragHandle": { "requires": "draggableItem" },
+    "length": { "requires": "draggableItem" }
+  },
+  "hints": {
+    "draggable_mode": {
+      "when": { "draggableItem": true },
+      "message": "When draggableItem is on, set dragId to match the Draggable container.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+{
+  "template": "<Checkbox{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "checked": false,
+    "disabled": false,
+    "error": false,
+    "requiredIndicator": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text",
+        "name",
+        "value"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "disabled",
+        "error",
+        "checked",
+        "indeterminate",
+        "requiredIndicator"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "tabIndex"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "text": "Subscribe to product updates",
+        "name": "subscribe",
+        "value": "yes"
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "text": "I agree to the Terms of Service",
+        "name": "terms",
+        "value": "accepted",
+        "error": true
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "text": "Enable email notifications",
+        "name": "email_notifications",
+        "value": "on",
+        "checked": true,
+        "disabled": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "text": "I agree to the Terms of Service",
+        "name": "terms",
+        "value": "accepted",
+        "requiredIndicator": true
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "text"
+    }
+  },
+  "hints": {}
+}

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

@@ -0,0 +1,58 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["text", "name", "value"]
+    },
+    {
+      "name": "State",
+      "props": ["disabled", "error", "checked", "indeterminate", "requiredIndicator"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["tabIndex"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "text": "Subscribe to product updates",
+        "name": "subscribe",
+        "value": "yes"
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "text": "I agree to the Terms of Service",
+        "name": "terms",
+        "value": "accepted",
+        "error": true
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "text": "Enable email notifications",
+        "name": "email_notifications",
+        "value": "on",
+        "checked": true,
+        "disabled": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "text": "I agree to the Terms of Service",
+        "name": "terms",
+        "value": "accepted",
+        "requiredIndicator": true
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": { "requires": "text" }
+  },
+  "hints": {}
+}