playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

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

@@ -0,0 +1,112 @@
+{
+  "template": "<Badge{{props}}>{{children}}</Badge>",
+  "propTargets": {},
+  "defaults": {
+    "rounded": false,
+    "variant": "neutral"
+  },
+  "children": {
+    "editable": true,
+    "default": "Badge content",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "rounded",
+        "removeIcon"
+      ]
+    },
+    {
+      "name": "Other",
+      "props": [
+        "tabIndex"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Primary",
+      "props": {
+        "variant": "primary",
+        "text": "Primary"
+      },
+      "children": ""
+    },
+    {
+      "name": "Success",
+      "props": {
+        "variant": "success",
+        "text": "Success"
+      },
+      "children": ""
+    },
+    {
+      "name": "Warning",
+      "props": {
+        "variant": "warning",
+        "text": "Warning"
+      },
+      "children": ""
+    },
+    {
+      "name": "Error",
+      "props": {
+        "variant": "error",
+        "text": "Error"
+      },
+      "children": ""
+    },
+    {
+      "name": "Notification",
+      "props": {
+        "variant": "notification",
+        "text": "3"
+      },
+      "children": ""
+    },
+    {
+      "name": "Rounded primary",
+      "props": {
+        "variant": "primary",
+        "rounded": true,
+        "text": "New"
+      },
+      "children": ""
+    },
+    {
+      "name": "Dismissible",
+      "props": {
+        "variant": "neutral",
+        "removeIcon": true,
+        "text": "Removable",
+        "removeOnClick": "() => console.log('dismissed')"
+      },
+      "children": ""
+    }
+  ],
+  "conditionals": {
+    "removeOnClick": {
+      "requires": "removeIcon"
+    }
+  },
+  "hints": {
+    "dismissible": {
+      "when": {
+        "removeIcon": true
+      },
+      "message": "Wire removeOnClick in app code to handle dismissal; the playground only shows the icon.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["text"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["variant", "rounded", "removeIcon"]
+    },
+    {
+      "name": "Other",
+      "props": ["tabIndex"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Primary",
+      "props": { "variant": "primary", "text": "Primary" },
+      "children": ""
+    },
+    {
+      "name": "Success",
+      "props": { "variant": "success", "text": "Success" },
+      "children": ""
+    },
+    {
+      "name": "Warning",
+      "props": { "variant": "warning", "text": "Warning" },
+      "children": ""
+    },
+    {
+      "name": "Error",
+      "props": { "variant": "error", "text": "Error" },
+      "children": ""
+    },
+    {
+      "name": "Notification",
+      "props": { "variant": "notification", "text": "3" },
+      "children": ""
+    },
+    {
+      "name": "Rounded primary",
+      "props": { "variant": "primary", "rounded": true, "text": "New" },
+      "children": ""
+    },
+    {
+      "name": "Dismissible",
+      "props": { "variant": "neutral", "removeIcon": true, "text": "Removable", "removeOnClick": "() => console.log('dismissed')" },
+      "children": ""
+    }
+  ],
+  "conditionals": {
+    "removeOnClick": { "requires": "removeIcon" }
+  },
+  "hints": {
+    "dismissible": {
+      "when": { "removeIcon": true },
+      "message": "Wire removeOnClick in app code to handle dismissal; the playground only shows the icon.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+{
+  "template": "<Body{{props}}>{{children}}</Body>",
+  "propTargets": {},
+  "defaults": {
+    "color": "default",
+    "highlighting": false,
+    "status": "neutral",
+    "tag": "div"
+  },
+  "children": {
+    "editable": true,
+    "default": "Use body text for paragraphs, supporting copy, and readable blocks of content on the page.",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": [
+        "color",
+        "variant",
+        "status",
+        "tag"
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
+        "text",
+        "highlighting",
+        "highlightedText"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Paragraph",
+      "props": {},
+      "children": "This is standard body copy in a paragraph element, ideal for articles, forms, and long-form content."
+    },
+    {
+      "name": "Success",
+      "props": {
+        "color": "success"
+      },
+      "children": "Your changes were saved successfully."
+    },
+    {
+      "name": "Error",
+      "props": {
+        "color": "error"
+      },
+      "children": "We could not process your request. Check the fields below and try again."
+    },
+    {
+      "name": "Link style",
+      "props": {},
+      "children": "<a href=\"#\">This text is using the anchor tag</a>"
+    }
+  ],
+  "conditionals": {
+    "highlightedText": {
+      "requires": {
+        "highlighting": true
+      }
+    }
+  },
+  "hints": {
+    "highlighting_info": {
+      "when": {
+        "highlighting": true
+      },
+      "message": "Set text and highlightedText to show highlighted substrings inside the body content.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+{
+  "children": {
+    "default": "Use body text for paragraphs, supporting copy, and readable blocks of content on the page."
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": ["color", "variant", "status", "tag"]
+    },
+    {
+      "name": "Content",
+      "props": ["text", "highlighting", "highlightedText"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Paragraph",
+      "props": {},
+      "children": "This is standard body copy in a paragraph element, ideal for articles, forms, and long-form content."
+    },
+    {
+      "name": "Success",
+      "props": { "color": "success" },
+      "children": "Your changes were saved successfully."
+    },
+    {
+      "name": "Error",
+      "props": { "color": "error" },
+      "children": "We could not process your request. Check the fields below and try again."
+    },
+    {
+      "name": "Link style",
+      "props": {},
+      "children": "<a href=\"#\">This text is using the anchor tag</a>"
+    }
+  ],
+  "conditionals": {
+    "highlightedText": { "requires": { "highlighting": true } }
+  },
+  "hints": {
+    "highlighting_info": {
+      "when": { "highlighting": true },
+      "message": "Set text and highlightedText to show highlighted substrings inside the body content.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+{
+  "template": "<BreadCrumbs{{props}}>{{children}}</BreadCrumbs>",
+  "propTargets": {},
+  "defaults": {},
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "<BreadCrumbItem href=\"/\">Home</BreadCrumbItem><BreadCrumbItem component=\"span\">Settings</BreadCrumbItem>"
+    },
+    {
+      "name": "Three levels",
+      "props": {},
+      "children": "<BreadCrumbItem href=\"/app\">App</BreadCrumbItem><BreadCrumbItem href=\"/app/users\">Users</BreadCrumbItem><BreadCrumbItem component=\"span\">Edit</BreadCrumbItem>"
+    },
+    {
+      "name": "Links only",
+      "props": {},
+      "children": "<BreadCrumbItem href=\"/docs\">Docs</BreadCrumbItem><BreadCrumbItem href=\"/docs/guides\">Guides</BreadCrumbItem><BreadCrumbItem href=\"/docs/guides/start\">Getting started</BreadCrumbItem>"
+    },
+    {
+      "name": "With text prop",
+      "props": {
+        "text": "Breadcrumb"
+      },
+      "children": ""
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "breadcrumb_structure": {
+      "when": {
+        "text": null
+      },
+      "message": "Compose the trail with BreadCrumbItem children; use component=\"span\" for the current page when it has no URL.",
+      "type": "info"
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<BreadCrumbItem href=\"/products\">Products</BreadCrumbItem><BreadCrumbItem component=\"span\">Details</BreadCrumbItem>",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  }
+}

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

@@ -0,0 +1,44 @@
+{
+  "template": "<BreadCrumbs{{props}}>{{children}}</BreadCrumbs>",
+  "children": {
+    "editable": true,
+    "default": "<BreadCrumbItem href=\"/products\">Products</BreadCrumbItem><BreadCrumbItem component=\"span\">Details</BreadCrumbItem>",
+    "hideWhenPropSet": ["text"]
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["text"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {},
+      "children": "<BreadCrumbItem href=\"/\">Home</BreadCrumbItem><BreadCrumbItem component=\"span\">Settings</BreadCrumbItem>"
+    },
+    {
+      "name": "Three levels",
+      "props": {},
+      "children": "<BreadCrumbItem href=\"/app\">App</BreadCrumbItem><BreadCrumbItem href=\"/app/users\">Users</BreadCrumbItem><BreadCrumbItem component=\"span\">Edit</BreadCrumbItem>"
+    },
+    {
+      "name": "Links only",
+      "props": {},
+      "children": "<BreadCrumbItem href=\"/docs\">Docs</BreadCrumbItem><BreadCrumbItem href=\"/docs/guides\">Guides</BreadCrumbItem><BreadCrumbItem href=\"/docs/guides/start\">Getting started</BreadCrumbItem>"
+    },
+    {
+      "name": "With text prop",
+      "props": { "text": "Breadcrumb" },
+      "children": ""
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "breadcrumb_structure": {
+      "when": { "text": null },
+      "message": "Compose the trail with BreadCrumbItem children; use component=\"span\" for the current page when it has no URL.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_button/docs/{_button_loading.html.erb → _button_loading_rails.html.erb}

@@ -1,7 +1,7 @@
 <%= pb_rails("caption", props: { margin_y: "md", text: "Button variants with loading" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, text: "Loading", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, text: "Loading", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, text: "Loading", margin_right: "lg" }) %>
 <%= pb_rails("caption", props: { margin_y: "md", text: "Button sizes with loading" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", text: "Loading", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", text: "Loading", margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading_rails.md

@@ -0,0 +1,3 @@
+Used when a button will take a little while to load. The spinner lets the user know that the button has worked and it is in the process of loading. 
+
+**NOTE**: In Rails, both the button text and loading spinner are rendered at the same time, and visibility is toggled between them. Even though the text prop is not required, providing it ensures the button maintains its correct shape during loading.

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

@@ -0,0 +1,164 @@
+{
+  "template": "<Button{{props}}>{{children}}</Button>",
+  "propTargets": {},
+  "defaults": {
+    "disabled": false,
+    "fullWidth": false,
+    "highlight": false,
+    "iconRight": false,
+    "loading": false,
+    "newWindow": false,
+    "type": "inline",
+    "variant": "primary"
+  },
+  "children": {
+    "editable": true,
+    "default": "Click Me",
+    "hideWhenPropSet": [
+      "text"
+    ]
+  },
+  "groups": [
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "size",
+        "fullWidth",
+        "disabled",
+        "loading"
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
+        "text",
+        "icon",
+        "iconRight"
+      ]
+    },
+    {
+      "name": "Link Mode",
+      "props": [
+        "link",
+        "target",
+        "newWindow"
+      ]
+    },
+    {
+      "name": "Reaction Mode",
+      "props": [
+        "count",
+        "highlight"
+      ]
+    },
+    {
+      "name": "Form",
+      "props": [
+        "htmlType",
+        "form",
+        "value",
+        "tabIndex"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Primary",
+      "props": {
+        "variant": "primary"
+      },
+      "children": "Submit"
+    },
+    {
+      "name": "Secondary",
+      "props": {
+        "variant": "secondary"
+      },
+      "children": "Cancel"
+    },
+    {
+      "name": "Danger",
+      "props": {
+        "variant": "danger"
+      },
+      "children": "Delete"
+    },
+    {
+      "name": "With Icon",
+      "props": {
+        "icon": "plus",
+        "variant": "primary"
+      },
+      "children": "Add Item"
+    },
+    {
+      "name": "Loading",
+      "props": {
+        "loading": true,
+        "variant": "primary"
+      },
+      "children": "Saving..."
+    },
+    {
+      "name": "Reaction",
+      "props": {
+        "variant": "reaction",
+        "icon": "👍",
+        "count": 5
+      },
+      "children": ""
+    },
+    {
+      "name": "Link Mode",
+      "props": {
+        "link": true
+      },
+      "children": "Learn More"
+    }
+  ],
+  "conditionals": {
+    "count": {
+      "requires": {
+        "variant": "reaction"
+      }
+    },
+    "highlight": {
+      "requires": {
+        "variant": "reaction"
+      }
+    },
+    "iconRight": {
+      "requires": "icon"
+    },
+    "target": {
+      "requires": "link"
+    },
+    "newWindow": {
+      "requires": "link"
+    }
+  },
+  "hints": {
+    "reaction_info": {
+      "when": {
+        "variant": "reaction"
+      },
+      "message": "Reaction buttons display an icon (emoji or icon name). If no icon is set, a default smiley will be shown.",
+      "type": "info"
+    },
+    "link_mode_info": {
+      "when": {
+        "link": true
+      },
+      "message": "When link is set, the button renders as an <a> tag instead of <button>.",
+      "type": "info"
+    },
+    "loading_info": {
+      "when": {
+        "loading": true
+      },
+      "message": "Loading state shows a spinner and hides the button content.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+{
+  "children": {
+    "default": "Click Me"
+  },
+  "conditionals": {
+    "count": { "requires": { "variant": "reaction" } },
+    "highlight": { "requires": { "variant": "reaction" } },
+    "iconRight": { "requires": "icon" },
+    "target": { "requires": "link" },
+    "newWindow": { "requires": "link" }
+  },
+  "groups": [
+    { "name": "Appearance", "props": ["variant", "size", "fullWidth", "disabled", "loading"] },
+    { "name": "Content", "props": ["text", "icon", "iconRight"] },
+    { "name": "Link Mode", "props": ["link", "target", "newWindow"] },
+    { "name": "Reaction Mode", "props": ["count", "highlight"] },
+    { "name": "Form", "props": ["htmlType", "form", "value", "tabIndex"] }
+  ],
+  "presets": [
+    { "name": "Primary", "props": { "variant": "primary" }, "children": "Submit" },
+    { "name": "Secondary", "props": { "variant": "secondary" }, "children": "Cancel" },
+    { "name": "Danger", "props": { "variant": "danger" }, "children": "Delete" },
+    { "name": "With Icon", "props": { "icon": "plus", "variant": "primary" }, "children": "Add Item" },
+    { "name": "Loading", "props": { "loading": true, "variant": "primary" }, "children": "Saving..." },
+    { "name": "Reaction", "props": { "variant": "reaction", "icon": "👍", "count": 5 }, "children": "" },
+    { "name": "Link Mode", "props": { "link": true }, "children": "Learn More" }
+  ],
+  "hints": {
+    "reaction_info": {
+      "when": { "variant": "reaction" },
+      "message": "Reaction buttons display an icon (emoji or icon name). If no icon is set, a default smiley will be shown.",
+      "type": "info"
+    },
+    "link_mode_info": {
+      "when": { "link": true },
+      "message": "When link is set, the button renders as an <a> tag instead of <button>.",
+      "type": "info"
+    },
+    "loading_info": {
+      "when": { "loading": true },
+      "message": "Loading state shows a spinner and hides the button content.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_button/docs/example.yml

@@ -4,7 +4,7 @@ examples:
   - button_reaction: Reaction Button
   - button_full_width: Button Full Width
   - button_link: Button Links
-  - button_loading: Button Loading
+  - button_loading_rails: Button Loading
   - button_block_content: Button Block Content
   - button_icon_options: Button Icon Options
   - button_accessibility: Button Accessibility Options