playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

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

@@ -0,0 +1,23 @@
+{
+  "template": "<FormGroup{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "fullWidth": false
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "fullWidth"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,36 @@
+{
+  "template": "<FormPill{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "textTransform": "none",
+    "color": "primary",
+    "wrapped": false
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "text",
+        "name",
+        "onClick",
+        "avatar",
+        "avatarUrl",
+        "size",
+        "textTransform",
+        "color",
+        "tabIndex",
+        "icon",
+        "wrapped",
+        "closeProps"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,30 @@
+{
+  "template": "<Hashtag{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "newWindow": false,
+    "type": "default"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "dark",
+        "newWindow",
+        "rel",
+        "target",
+        "text",
+        "type",
+        "url"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,22 @@
+{
+  "template": "<Highlight{{props}} />",
+  "propTargets": {},
+  "defaults": {},
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "text",
+        "highlightedText"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,38 @@
+{
+  "template": "<HomeAddressStreet{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "preserveCase": false,
+    "emphasis": "street",
+    "newWindow": false
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "address",
+        "addressCont",
+        "city",
+        "dark",
+        "preserveCase",
+        "emphasis",
+        "homeId",
+        "houseStyle",
+        "homeUrl",
+        "target",
+        "newWindow",
+        "state",
+        "zipcode",
+        "territory"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,115 @@
+{
+  "template": "<Icon{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "border": false,
+    "fixedWidth": true,
+    "inverse": false,
+    "listItem": false,
+    "pulse": false,
+    "fontStyle": "far",
+    "spin": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "icon"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "color",
+        "fontStyle",
+        "fixedWidth"
+      ]
+    },
+    {
+      "name": "Transform",
+      "props": [
+        "flip",
+        "rotation",
+        "spin",
+        "pulse",
+        "pull",
+        "border",
+        "inverse",
+        "listItem",
+        "tabIndex"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "User",
+      "props": {
+        "icon": "user"
+      }
+    },
+    {
+      "name": "Check",
+      "props": {
+        "icon": "check",
+        "color": "primary"
+      }
+    },
+    {
+      "name": "Times",
+      "props": {
+        "icon": "times",
+        "color": "error"
+      }
+    },
+    {
+      "name": "Plus",
+      "props": {
+        "icon": "plus"
+      }
+    },
+    {
+      "name": "Search",
+      "props": {
+        "icon": "search"
+      }
+    },
+    {
+      "name": "Large",
+      "props": {
+        "icon": "user",
+        "size": "lg"
+      }
+    },
+    {
+      "name": "2x size",
+      "props": {
+        "icon": "check",
+        "size": "2x"
+      }
+    },
+    {
+      "name": "3x size",
+      "props": {
+        "icon": "search",
+        "size": "3x"
+      }
+    },
+    {
+      "name": "Solid (fas)",
+      "props": {
+        "icon": "star",
+        "fontStyle": "fas"
+      }
+    },
+    {
+      "name": "Spinning",
+      "props": {
+        "icon": "sync",
+        "spin": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,60 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["icon"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size", "color", "fontStyle", "fixedWidth"]
+    },
+    {
+      "name": "Transform",
+      "props": ["flip", "rotation", "spin", "pulse", "pull", "border", "inverse", "listItem", "tabIndex"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "User",
+      "props": { "icon": "user" }
+    },
+    {
+      "name": "Check",
+      "props": { "icon": "check", "color": "primary" }
+    },
+    {
+      "name": "Times",
+      "props": { "icon": "times", "color": "error" }
+    },
+    {
+      "name": "Plus",
+      "props": { "icon": "plus" }
+    },
+    {
+      "name": "Search",
+      "props": { "icon": "search" }
+    },
+    {
+      "name": "Large",
+      "props": { "icon": "user", "size": "lg" }
+    },
+    {
+      "name": "2x size",
+      "props": { "icon": "check", "size": "2x" }
+    },
+    {
+      "name": "3x size",
+      "props": { "icon": "search", "size": "3x" }
+    },
+    {
+      "name": "Solid (fas)",
+      "props": { "icon": "star", "fontStyle": "fas" }
+    },
+    {
+      "name": "Spinning",
+      "props": { "icon": "sync", "spin": true }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,33 @@
+{
+  "template": "<IconButton{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "icon": "bars",
+    "newWindow": false,
+    "size": "2x",
+    "variant": "default"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "htmlType",
+        "icon",
+        "link",
+        "newWindow",
+        "onClick",
+        "size",
+        "target",
+        "variant"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,27 @@
+{
+  "template": "<IconCircle{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "size": "md",
+    "variant": "default"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "dark",
+        "icon",
+        "size",
+        "variant"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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"
+      ]
+    }
+  ]
+}