playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -0,0 +1,108 @@
+{
+  "defaults": {
+    "icon": "rocket",
+    "size": "md",
+    "variant": "default",
+    "dark": false
+  },
+  "customProps": {
+    "variant": {
+      "type": "enum",
+      "platforms": ["react"],
+      "values": [
+        "default",
+        "royal",
+        "blue",
+        "purple",
+        "teal",
+        "red",
+        "yellow",
+        "orange",
+        "green",
+        "lighter"
+      ],
+      "default": "default"
+    }
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "icon"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "variant",
+        "dark"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "icon": "rocket",
+        "size": "md",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Tiny",
+      "props": {
+        "icon": "rocket",
+        "size": "xxs",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Large",
+      "props": {
+        "icon": "rocket",
+        "size": "xl",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Royal",
+      "props": {
+        "icon": "crown",
+        "size": "md",
+        "variant": "royal"
+      }
+    },
+    {
+      "name": "Emoji",
+      "props": {
+        "icon": "😁",
+        "size": "md",
+        "variant": "orange"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "IconCircle renders an icon inside a circular colored background.",
+      "type": "info"
+    },
+    "tiny": {
+      "presetName": "Tiny",
+      "message": "Use the size prop to change the size of the circle and the nested icon.",
+      "type": "info"
+    },
+    "royal": {
+      "presetName": "Royal",
+      "message": "Use the variant prop to change the color of the circle.",
+      "type": "info"
+    },
+    "emoji": {
+      "presetName": "Emoji",
+      "message": "Use the icon prop to render an emoji as well.",
+      "type": "info"
+    }
+  }
+}

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

@@ -25,7 +25,8 @@
       "props": [
         "orientation",
         "size",
-        "variant"
+        "variant",
+        "dark"
       ]
     }
   ],
@@ -38,52 +39,66 @@
         "unit": "hrs",
         "text": "Avg. session",
         "orientation": "horizontal",
-        "size": "md"
+        "size": "md",
+        "variant": "default"
       }
     },
     {
       "name": "Vertical",
       "props": {
-        "icon": "users",
-        "value": 2000,
-        "unit": "",
-        "text": "Active users",
+        "icon": "broadcast-tower",
+        "value": 102.5,
+        "unit": "wkz",
+        "text": "Radio",
         "orientation": "vertical",
-        "size": "lg",
         "variant": "royal"
       }
     },
     {
-      "name": "Teal accent",
+      "name": "Small Size",
       "props": {
         "icon": "chart-line",
         "value": 15,
         "unit": "%",
         "text": "QoQ growth",
-        "variant": "teal",
-        "size": "sm"
+        "orientation": "horizontal",
+        "size": "sm",
+        "variant": "teal"
       }
     },
     {
-      "name": "Orange stat",
+      "name": "Orange Variant",
       "props": {
         "icon": "lightbulb-on",
         "value": 99,
         "unit": "/mo",
         "text": "Plan tier",
-        "variant": "orange",
-        "size": "md"
+        "orientation": "horizontal",
+        "variant": "orange"
       }
     }
   ],
   "conditionals": {},
   "hints": {
-    "vertical_layout": {
-      "when": {
-        "orientation": "vertical"
-      },
+    "default": {
+      "presetName": "Default",
+      "message": "Use the icon, value, unit, and text props to render an icon stat value.",
+      "type": "info"
+    },
+    "vertical": {
+      "presetName": "Vertical",
       "message": "Vertical orientation stacks the icon above the value; horizontal places the icon to the left.",
       "type": "info"
+    },
+    "small_size": {
+      "presetName": "Small Size",
+      "message": "Use the size prop to change the size of the icon stat value.",
+      "type": "info"
+    },
+    "orange_variant": {
+      "presetName": "Orange Variant",
+      "message": "Use the variant prop to change the color of the icon stat value.",
+      "type": "info"
     }
   }
 }

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

@@ -9,21 +9,94 @@
     "variant": "default"
   },
   "groups": [
-    { "name": "Content", "props": ["icon", "value", "unit", "text"] },
-    { "name": "Appearance", "props": ["orientation", "size", "variant"] }
+    {
+      "name": "Content",
+      "props": [
+        "icon",
+        "value",
+        "unit",
+        "text"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "orientation",
+        "size",
+        "variant",
+        "dark"
+      ]
+    }
   ],
   "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" } }
+    {
+      "name": "Default",
+      "props": {
+        "icon": "chart-line",
+        "value": 1428,
+        "unit": "hrs",
+        "text": "Avg. session",
+        "orientation": "horizontal",
+        "size": "md",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Vertical",
+      "props": {
+        "icon": "broadcast-tower",
+        "value": 102.5,
+        "unit": "wkz",
+        "text": "Radio",
+        "orientation": "vertical",
+        "variant": "royal"
+      }
+    },
+    {
+      "name": "Small Size",
+      "props": {
+        "icon": "chart-line",
+        "value": 15,
+        "unit": "%",
+        "text": "QoQ growth",
+        "orientation": "horizontal",
+        "size": "sm",
+        "variant": "teal"
+      }
+    },
+    {
+      "name": "Orange Variant",
+      "props": {
+        "icon": "lightbulb-on",
+        "value": 99,
+        "unit": "/mo",
+        "text": "Plan tier",
+        "orientation": "horizontal",
+        "variant": "orange"
+      }
+    }
   ],
   "conditionals": {},
   "hints": {
-    "vertical_layout": {
-      "when": { "orientation": "vertical" },
+    "default": {
+      "presetName": "Default",
+      "message": "Use the icon, value, unit, and text props to render an icon stat value.",
+      "type": "info"
+    },
+    "vertical": {
+      "presetName": "Vertical",
       "message": "Vertical orientation stacks the icon above the value; horizontal places the icon to the left.",
       "type": "info"
+    },
+    "small_size": {
+      "presetName": "Small Size",
+      "message": "Use the size prop to change the size of the icon stat value.",
+      "type": "info"
+    },
+    "orange_variant": {
+      "presetName": "Orange Variant",
+      "message": "Use the variant prop to change the color of the icon stat value.",
+      "type": "info"
     }
   }
 }

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

@@ -3,8 +3,9 @@
   "propTargets": {},
   "defaults": {
     "align": "left",
-    "icon": "chart-line",
-    "text": "1,428"
+    "icon": "clipboard",
+    "text": "33-123456",
+    "dark": false
   },
   "groups": [
     {
@@ -17,37 +18,30 @@
     {
       "name": "Appearance",
       "props": [
-        "align"
+        "align",
+        "dark"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Metric",
+      "name": "Heart",
       "props": {
-        "icon": "chart-line",
-        "text": "1,428",
-        "align": "left"
-      }
-    },
-    {
-      "name": "Users",
-      "props": {
-        "icon": "users",
-        "text": "2,000",
+        "icon": "heart",
+        "text": "93",
         "align": "left"
       }
     },
     {
       "name": "Centered",
       "props": {
-        "icon": "heart",
-        "text": "15%",
+        "icon": "comment",
+        "text": "5 comments",
         "align": "center"
       }
     },
     {
-      "name": "Right aligned",
+      "name": "Right Aligned",
       "props": {
         "icon": "dollar-sign",
         "text": "$2,000",
@@ -56,5 +50,21 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "heart": {
+      "presetName": "Heart",
+      "message": "Use the icon prop to render any icon you want.",
+      "type": "info"
+    },
+    "centered": {
+      "presetName": "Centered",
+      "message": "Use the align prop to change the alignment of the icon and text.",
+      "type": "info"
+    },
+    "right_aligned": {
+      "presetName": "Right Aligned",
+      "message": "Use the align prop to right align the icon and text.",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,19 +1,68 @@
 {
   "defaults": {
     "align": "left",
-    "icon": "chart-line",
-    "text": "1,428"
+    "icon": "clipboard",
+    "text": "33-123456",
+    "dark": false
   },
   "groups": [
-    { "name": "Content", "props": ["icon", "text"] },
-    { "name": "Appearance", "props": ["align"] }
+    {
+      "name": "Content",
+      "props": [
+        "icon",
+        "text"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "align",
+        "dark"
+      ]
+    }
   ],
   "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" } }
+    {
+      "name": "Heart",
+      "props": {
+        "icon": "heart",
+        "text": "93",
+        "align": "left"
+      }
+    },
+    {
+      "name": "Centered",
+      "props": {
+        "icon": "comment",
+        "text": "5 comments",
+        "align": "center"
+      }
+    },
+    {
+      "name": "Right Aligned",
+      "props": {
+        "icon": "dollar-sign",
+        "text": "$2,000",
+        "align": "right"
+      }
+    }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "heart": {
+      "presetName": "Heart",
+      "message": "Use the icon prop to render any icon you want.",
+      "type": "info"
+    },
+    "centered": {
+      "presetName": "Centered",
+      "message": "Use the align prop to change the alignment of the icon and text.",
+      "type": "info"
+    },
+    "right_aligned": {
+      "presetName": "Right Aligned",
+      "message": "Use the align prop to right align the icon and text.",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,84 +1,155 @@
 {
   "template": "<Image{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "url": "https://unsplash.it/500/400/?image=634",
+    "alt": "Misty forest",
+    "size": "md",
+    "transition": "fade",
+    "rounded": false
+  },
   "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",
+      "name": "Default",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Medium",
-        "size": "md"
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Misty forest",
+        "size": "md",
+        "transition": "fade"
       }
     },
     {
-      "name": "Large",
+      "name": "Extra Small",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Large",
-        "size": "lg"
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Extra small misty forest",
+        "size": "xs",
+        "transition": "fade"
       }
     },
     {
       "name": "Rounded",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Rounded",
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Rounded misty forest",
         "rounded": true,
-        "size": "md"
+        "size": "md",
+        "transition": "fade"
       }
     },
     {
-      "name": "Blur transition",
+      "name": "Blur Transition",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Blur",
-        "transition": "blur",
-        "size": "md"
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Blur transition image",
+        "size": "md",
+        "transition": "blur"
       }
     },
     {
-      "name": "Scale transition",
+      "name": "Scale Transition",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Scale",
-        "transition": "scale",
-        "size": "md"
+        "url": "https://unsplash.it/500/400/?image=634",
+        "alt": "Scale transition image",
+        "size": "md",
+        "transition": "scale"
       }
     },
     {
-      "name": "Fade transition",
+      "name": "Custom Error Handler",
       "props": {
-        "url": "https://unsplash.it/500/400",
-        "alt": "Fade",
-        "transition": "fade",
-        "size": "md"
+        "url": "https://example.invalid/missing-image.jpg",
+        "alt": "Broken image example",
+        "onError": "() => console.log('image failed to load')",
+        "size": "md",
+        "transition": "fade"
       }
     }
   ],
   "conditionals": {},
   "hints": {
-    "lazyload": {
-      "when": {
-        "url": "https://unsplash.it/500/400"
-      },
-      "message": "The kit uses lazyload classes; url is applied as src and data-src.",
+    "default": {
+      "presetName": "Default",
+      "message": "Use the url prop to pass the image URL.",
+      "type": "info"
+    },
+    "rounded": {
+      "presetName": "Rounded",
+      "message": "rounded adds the rounded class while preserving the selected size.",
+      "type": "info"
+    },
+    "blur_transition": {
+      "presetName": "Blur Transition",
+      "message": "Use the transition prop to select the lazyload transition class: fade, blur, or scale.",
+      "type": "info"
+    },
+    "custom_error_handler": {
+      "presetName": "Custom Error Handler",
+      "message": "Use the onError prop to pass a function to handle the image error.",
+      "type": "info"
+    },
+    "Extra Small": {
+      "presetName": "Extra Small",
+      "message": "Use the size prop to change the size of the image.",
       "type": "info"
+    },
+    "Rounded": {
+      "presetName": "Rounded",
+      "message": "Use the rounded prop to add rounded corners to the image.",
+      "type": "info"
+    }
+  },
+  "customProps": {
+    "alt": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "url": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "size": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "default": "md"
+    },
+    "rounded": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ],
+      "default": false
+    },
+    "transition": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "blur",
+        "fade",
+        "scale"
+      ],
+      "default": "fade"
+    },
+    "onError": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
     }
   },
   "groups": [
@@ -96,6 +167,12 @@
         "rounded",
         "transition"
       ]
+    },
+    {
+      "name": "Events",
+      "props": [
+        "onError"
+      ]
     }
   ]
 }