playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

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

@@ -0,0 +1,89 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["url", "alt"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size", "rounded", "transition"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Sample photo",
+      "props": {
+        "url": "https://unsplash.it/500/400",
+        "alt": "Sample image"
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "url": "https://unsplash.it/500/400",
+        "alt": "Small",
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Medium",
+      "props": {
+        "url": "https://unsplash.it/500/400",
+        "alt": "Medium",
+        "size": "md"
+      }
+    },
+    {
+      "name": "Large",
+      "props": {
+        "url": "https://unsplash.it/500/400",
+        "alt": "Large",
+        "size": "lg"
+      }
+    },
+    {
+      "name": "Rounded",
+      "props": {
+        "url": "https://unsplash.it/500/400",
+        "alt": "Rounded",
+        "rounded": true,
+        "size": "md"
+      }
+    },
+    {
+      "name": "Blur transition",
+      "props": {
+        "url": "https://unsplash.it/500/400",
+        "alt": "Blur",
+        "transition": "blur",
+        "size": "md"
+      }
+    },
+    {
+      "name": "Scale transition",
+      "props": {
+        "url": "https://unsplash.it/500/400",
+        "alt": "Scale",
+        "transition": "scale",
+        "size": "md"
+      }
+    },
+    {
+      "name": "Fade transition",
+      "props": {
+        "url": "https://unsplash.it/500/400",
+        "alt": "Fade",
+        "transition": "fade",
+        "size": "md"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "lazyload": {
+      "when": { "url": "https://unsplash.it/500/400" },
+      "message": "The kit uses lazyload classes; url is applied as src and data-src.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+{
+  "template": "<LabelPill{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "variant": "neutral"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "label",
+        "pillValue",
+        "variant"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,126 @@
+{
+  "template": "<LabelValue{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "active": false,
+    "variant": "default",
+    "label": "Revenue",
+    "value": "1428"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "value"
+      ]
+    },
+    {
+      "name": "Details & appearance",
+      "props": [
+        "variant",
+        "icon",
+        "description",
+        "title",
+        "active",
+        "date"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Label + value",
+      "props": {
+        "label": "Revenue",
+        "value": "1428",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Amount + unit",
+      "props": {
+        "label": "Balance",
+        "value": "$2,000.00",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Percent",
+      "props": {
+        "label": "Growth",
+        "value": "15%",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Details row",
+      "props": {
+        "variant": "details",
+        "label": "Activity",
+        "icon": "dumbbell",
+        "description": "Q1 campaign",
+        "title": "Review budget",
+        "active": true
+      }
+    },
+    {
+      "name": "Details (inactive)",
+      "props": {
+        "variant": "details",
+        "label": "Snapshot",
+        "icon": "clipboard",
+        "description": "Draft",
+        "title": "FY report",
+        "active": false
+      }
+    }
+  ],
+  "conditionals": {
+    "icon": {
+      "requires": {
+        "variant": "details"
+      }
+    },
+    "description": {
+      "requires": {
+        "variant": "details"
+      }
+    },
+    "title": {
+      "requires": {
+        "variant": "details"
+      }
+    },
+    "date": {
+      "requires": {
+        "variant": "details"
+      }
+    },
+    "active": {
+      "requires": {
+        "variant": "details"
+      }
+    },
+    "value": {
+      "requires": {
+        "variant": "default"
+      }
+    }
+  },
+  "hints": {
+    "details_variant": {
+      "when": {
+        "variant": "details"
+      },
+      "message": "Details variant shows icon, description, and title/date in a row; the default variant shows label + body value only.",
+      "type": "info"
+    },
+    "active_links": {
+      "when": {
+        "active": true
+      },
+      "message": "When active is true, the title and date use the link title variant.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+{
+  "defaults": {
+    "label": "Revenue",
+    "value": "1428",
+    "variant": "default"
+  },
+  "groups": [
+    { "name": "Content", "props": ["label", "value"] },
+    { "name": "Details & appearance", "props": ["variant", "icon", "description", "title", "active", "date"] }
+  ],
+  "presets": [
+    { "name": "Label + value", "props": { "label": "Revenue", "value": "1428", "variant": "default" } },
+    { "name": "Amount + unit", "props": { "label": "Balance", "value": "$2,000.00", "variant": "default" } },
+    { "name": "Percent", "props": { "label": "Growth", "value": "15%", "variant": "default" } },
+    { "name": "Details row", "props": {
+      "variant": "details",
+      "label": "Activity",
+      "icon": "dumbbell",
+      "description": "Q1 campaign",
+      "title": "Review budget",
+      "active": true
+    } },
+    { "name": "Details (inactive)", "props": {
+      "variant": "details",
+      "label": "Snapshot",
+      "icon": "clipboard",
+      "description": "Draft",
+      "title": "FY report",
+      "active": false
+    } }
+  ],
+  "conditionals": {
+    "icon": { "requires": { "variant": "details" } },
+    "description": { "requires": { "variant": "details" } },
+    "title": { "requires": { "variant": "details" } },
+    "date": { "requires": { "variant": "details" } },
+    "active": { "requires": { "variant": "details" } },
+    "value": { "requires": { "variant": "default" } }
+  },
+  "hints": {
+    "details_variant": {
+      "when": { "variant": "details" },
+      "message": "Details variant shows icon, description, and title/date in a row; the default variant shows label + body value only.",
+      "type": "info"
+    },
+    "active_links": {
+      "when": { "active": true },
+      "message": "When active is true, the title and date use the link title variant.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+{
+  "template": "<Layout{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "collapse": "xs",
+    "full": false,
+    "responsive": false,
+    "size": {
+      "react": "sm",
+      "rails": "md"
+    },
+    "variant": "light",
+    "transparent": false,
+    "layout": "sidebar"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "collapse",
+        "dark",
+        "full",
+        "position",
+        "responsive",
+        "size",
+        "variant",
+        "transparent",
+        "layout"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,26 @@
+{
+  "template": "<Legend{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "color": "data_1"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "color",
+        "dark",
+        "prefixText",
+        "text"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,130 @@
+{
+  "template": "<Link{{props}}>{{children}}</Link>",
+  "propTargets": {},
+  "defaults": {
+    "color": "default",
+    "disabled": false,
+    "tag": "a",
+    "underline": false
+  },
+  "children": {
+    "editable": true,
+    "default": "Link text",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text",
+        "icon",
+        "iconRight"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "href",
+        "target",
+        "tabIndex"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "color",
+        "underline",
+        "disabled",
+        "tag"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "Link text"
+    },
+    {
+      "name": "Muted underline",
+      "props": {
+        "color": "muted",
+        "underline": true
+      },
+      "children": "Secondary link"
+    },
+    {
+      "name": "Body color",
+      "props": {
+        "color": "body"
+      },
+      "children": "Inline body link"
+    },
+    {
+      "name": "Destructive",
+      "props": {
+        "color": "destructive"
+      },
+      "children": "Delete account"
+    },
+    {
+      "name": "With icon",
+      "props": {
+        "color": "default",
+        "icon": "arrow-up-right-from-square"
+      },
+      "children": "Continue"
+    },
+    {
+      "name": "Icon both sides",
+      "props": {
+        "icon": "plus",
+        "iconRight": "chevron-right"
+      },
+      "children": "Open document"
+    },
+    {
+      "name": "As heading tag",
+      "props": {
+        "tag": "span"
+      },
+      "children": "Styled as link"
+    },
+    {
+      "name": "With href",
+      "props": {
+        "href": "/dashboard",
+        "color": "default"
+      },
+      "children": "Go to dashboard"
+    },
+    {
+      "name": "External new tab",
+      "props": {
+        "href": "https://example.com",
+        "target": "_blank",
+        "icon": "arrow-up-right-from-square"
+      },
+      "children": "Example.com"
+    }
+  ],
+  "conditionals": {
+    "target": {
+      "requires": "href"
+    },
+    "iconRight": {
+      "requires": "icon"
+    }
+  },
+  "hints": {
+    "target_needs_href": {
+      "when": {
+        "target": true
+      },
+      "message": "The target attribute only applies when href is set.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+{
+  "children": {
+    "default": "Link text"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["text", "icon", "iconRight"]
+    },
+    {
+      "name": "Behavior",
+      "props": ["href", "target", "tabIndex"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["color", "underline", "disabled", "tag"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "Link text"
+    },
+    {
+      "name": "Muted underline",
+      "props": { "color": "muted", "underline": true },
+      "children": "Secondary link"
+    },
+    {
+      "name": "Body color",
+      "props": { "color": "body" },
+      "children": "Inline body link"
+    },
+    {
+      "name": "Destructive",
+      "props": { "color": "destructive" },
+      "children": "Delete account"
+    },
+    {
+      "name": "With icon",
+      "props": { "color": "default", "icon": "arrow-up-right-from-square" },
+      "children": "Continue"
+    },
+    {
+      "name": "Icon both sides",
+      "props": { "icon": "plus", "iconRight": "chevron-right" },
+      "children": "Open document"
+    },
+    {
+      "name": "As heading tag",
+      "props": { "tag": "span" },
+      "children": "Styled as link"
+    },
+    {
+      "name": "With href",
+      "props": { "href": "/dashboard", "color": "default" },
+      "children": "Go to dashboard"
+    },
+    {
+      "name": "External new tab",
+      "props": {
+        "href": "https://example.com",
+        "target": "_blank",
+        "icon": "arrow-up-right-from-square"
+      },
+      "children": "Example.com"
+    }
+  ],
+  "conditionals": {
+    "target": { "requires": "href" },
+    "iconRight": { "requires": "icon" }
+  },
+  "hints": {
+    "target_needs_href": {
+      "when": { "target": true },
+      "message": "The target attribute only applies when href is set.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+{
+  "template": "<List{{props}}>{{children}}</List>",
+  "propTargets": {},
+  "defaults": {
+    "borderless": false,
+    "enableDrag": false,
+    "layout": "",
+    "ordered": false,
+    "xpadding": false
+  },
+  "children": {
+    "editable": true,
+    "default": "List content",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "borderless",
+        "dark",
+        "enableDrag",
+        "layout",
+        "ordered",
+        "role",
+        "tabIndex",
+        "text",
+        "size",
+        "variant",
+        "xpadding"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "List content"
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,66 @@
+{
+  "template": "<LoadingInline{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left",
+    "text": "Loading",
+    "variant": "dotted"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "align"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Align left",
+      "props": {
+        "align": "left"
+      }
+    },
+    {
+      "name": "Align center",
+      "props": {
+        "align": "center"
+      }
+    },
+    {
+      "name": "Align right",
+      "props": {
+        "align": "right"
+      }
+    },
+    {
+      "name": "Solid spinner",
+      "props": {
+        "align": "center",
+        "variant": "solid",
+        "text": " Loading"
+      }
+    },
+    {
+      "name": "Custom label",
+      "props": {
+        "align": "left",
+        "text": " Saving changes…"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}