playbook_ui_docs 16.6.0 → 16.7.0.pre.rc.0

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

@@ -0,0 +1,89 @@
+{
+  "template": "<IconStatValue{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "orientation": "horizontal",
+    "size": "md",
+    "text": "Avg. session",
+    "unit": "hrs",
+    "variant": "default",
+    "icon": "chart-line",
+    "value": 1428
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "icon",
+        "value",
+        "unit",
+        "text"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "orientation",
+        "size",
+        "variant"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "icon": "chart-line",
+        "value": 1428,
+        "unit": "hrs",
+        "text": "Avg. session",
+        "orientation": "horizontal",
+        "size": "md"
+      }
+    },
+    {
+      "name": "Vertical",
+      "props": {
+        "icon": "users",
+        "value": 2000,
+        "unit": "",
+        "text": "Active users",
+        "orientation": "vertical",
+        "size": "lg",
+        "variant": "royal"
+      }
+    },
+    {
+      "name": "Teal accent",
+      "props": {
+        "icon": "chart-line",
+        "value": 15,
+        "unit": "%",
+        "text": "QoQ growth",
+        "variant": "teal",
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Orange stat",
+      "props": {
+        "icon": "lightbulb-on",
+        "value": 99,
+        "unit": "/mo",
+        "text": "Plan tier",
+        "variant": "orange",
+        "size": "md"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "vertical_layout": {
+      "when": {
+        "orientation": "vertical"
+      },
+      "message": "Vertical orientation stacks the icon above the value; horizontal places the icon to the left.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+{
+  "defaults": {
+    "icon": "chart-line",
+    "value": 1428,
+    "unit": "hrs",
+    "text": "Avg. session",
+    "size": "md",
+    "orientation": "horizontal",
+    "variant": "default"
+  },
+  "groups": [
+    { "name": "Content", "props": ["icon", "value", "unit", "text"] },
+    { "name": "Appearance", "props": ["orientation", "size", "variant"] }
+  ],
+  "presets": [
+    { "name": "Default", "props": { "icon": "chart-line", "value": 1428, "unit": "hrs", "text": "Avg. session", "orientation": "horizontal", "size": "md" } },
+    { "name": "Vertical", "props": { "icon": "users", "value": 2000, "unit": "", "text": "Active users", "orientation": "vertical", "size": "lg", "variant": "royal" } },
+    { "name": "Teal accent", "props": { "icon": "chart-line", "value": 15, "unit": "%", "text": "QoQ growth", "variant": "teal", "size": "sm" } },
+    { "name": "Orange stat", "props": { "icon": "lightbulb-on", "value": 99, "unit": "/mo", "text": "Plan tier", "variant": "orange", "size": "md" } }
+  ],
+  "conditionals": {},
+  "hints": {
+    "vertical_layout": {
+      "when": { "orientation": "vertical" },
+      "message": "Vertical orientation stacks the icon above the value; horizontal places the icon to the left.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+{
+  "template": "<IconValue{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left",
+    "icon": "chart-line",
+    "text": "1,428"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "icon",
+        "text"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "align"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Metric",
+      "props": {
+        "icon": "chart-line",
+        "text": "1,428",
+        "align": "left"
+      }
+    },
+    {
+      "name": "Users",
+      "props": {
+        "icon": "users",
+        "text": "2,000",
+        "align": "left"
+      }
+    },
+    {
+      "name": "Centered",
+      "props": {
+        "icon": "heart",
+        "text": "15%",
+        "align": "center"
+      }
+    },
+    {
+      "name": "Right aligned",
+      "props": {
+        "icon": "dollar-sign",
+        "text": "$2,000",
+        "align": "right"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,19 @@
+{
+  "defaults": {
+    "align": "left",
+    "icon": "chart-line",
+    "text": "1,428"
+  },
+  "groups": [
+    { "name": "Content", "props": ["icon", "text"] },
+    { "name": "Appearance", "props": ["align"] }
+  ],
+  "presets": [
+    { "name": "Metric", "props": { "icon": "chart-line", "text": "1,428", "align": "left" } },
+    { "name": "Users", "props": { "icon": "users", "text": "2,000", "align": "left" } },
+    { "name": "Centered", "props": { "icon": "heart", "text": "15%", "align": "center" } },
+    { "name": "Right aligned", "props": { "icon": "dollar-sign", "text": "$2,000", "align": "right" } }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,101 @@
+{
+  "template": "<Image{{props}} />",
+  "propTargets": {},
+  "defaults": {},
+  "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"
+    }
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "url",
+        "alt"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "rounded",
+        "transition"
+      ]
+    }
+  ]
+}

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": {}
+}