playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,89 +1,164 @@
 {
+  "defaults": {
+    "url": "https://unsplash.it/500/400/?image=634",
+    "alt": "Misty forest",
+    "size": "md",
+    "transition": "fade",
+    "rounded": false
+  },
+  "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": [
     {
       "name": "Content",
-      "props": ["url", "alt"]
+      "props": [
+        "url",
+        "alt"
+      ]
     },
     {
       "name": "Appearance",
-      "props": ["size", "rounded", "transition"]
+      "props": [
+        "size",
+        "rounded",
+        "transition"
+      ]
+    },
+    {
+      "name": "Events",
+      "props": [
+        "onError"
+      ]
     }
   ],
   "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"
-    }
   }
 }
+}

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

@@ -2,24 +2,86 @@
   "template": "<LabelPill{{props}} />",
   "propTargets": {},
   "defaults": {
-    "variant": "neutral"
+    "variant": "neutral",
+    "label": "Service Needed",
+    "pillValue": "76"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
         "label",
-        "pillValue",
+        "pillValue"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
         "variant"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Default",
-      "props": {}
+      "name": "Neutral",
+      "props": {
+        "label": "Service Needed",
+        "pillValue": "76",
+        "variant": "neutral"
+      }
+    },
+    {
+      "name": "Success",
+      "props": {
+        "label": "Waiting",
+        "pillValue": "69",
+        "variant": "success"
+      }
+    },
+    {
+      "name": "Error",
+      "props": {
+        "label": "In Service",
+        "pillValue": "28",
+        "variant": "error"
+      }
+    },
+    {
+      "name": "Warning",
+      "props": {
+        "label": "Fully Serviced",
+        "pillValue": "101",
+        "variant": "warning"
+      }
+    },
+    {
+      "name": "Info",
+      "props": {
+        "label": "Inbox",
+        "pillValue": "197",
+        "variant": "info"
+      }
+    },
+    {
+      "name": "Primary",
+      "props": {
+        "label": "Inbox",
+        "pillValue": "218",
+        "variant": "primary"
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "neutral": {
+      "presetName": "Neutral",
+      "message": "LabelPill combines a Caption label with a Pill value.",
+      "type": "info"
+    },
+    "success": {
+      "presetName": "Success",
+      "message": "variant is passed to the nested Pill to control color treatment.",
+      "type": "info"
+    }
+  }
 }

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

@@ -0,0 +1,85 @@
+{
+  "defaults": {
+    "label": "Service Needed",
+    "pillValue": "76",
+    "variant": "neutral"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "pillValue"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Neutral",
+      "props": {
+        "label": "Service Needed",
+        "pillValue": "76",
+        "variant": "neutral"
+      }
+    },
+    {
+      "name": "Success",
+      "props": {
+        "label": "Waiting",
+        "pillValue": "69",
+        "variant": "success"
+      }
+    },
+    {
+      "name": "Error",
+      "props": {
+        "label": "In Service",
+        "pillValue": "28",
+        "variant": "error"
+      }
+    },
+    {
+      "name": "Warning",
+      "props": {
+        "label": "Fully Serviced",
+        "pillValue": "101",
+        "variant": "warning"
+      }
+    },
+    {
+      "name": "Info",
+      "props": {
+        "label": "Inbox",
+        "pillValue": "197",
+        "variant": "info"
+      }
+    },
+    {
+      "name": "Primary",
+      "props": {
+        "label": "Inbox",
+        "pillValue": "218",
+        "variant": "primary"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "neutral": {
+      "presetName": "Neutral",
+      "message": "LabelPill combines a Caption label with a Pill value.",
+      "type": "info"
+    },
+    "success": {
+      "presetName": "Success",
+      "message": "variant is passed to the nested Pill to control color treatment.",
+      "type": "info"
+    }
+  }
+}

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

@@ -4,8 +4,9 @@
   "defaults": {
     "active": false,
     "variant": "default",
-    "label": "Revenue",
-    "value": "1428"
+    "label": "Role",
+    "value": "Administrator, Moderator",
+    "dark": false
   },
   "groups": [
     {
@@ -16,62 +17,78 @@
       ]
     },
     {
-      "name": "Details & appearance",
+      "name": "Details",
       "props": [
         "variant",
         "icon",
         "description",
         "title",
-        "active",
-        "date"
+        "date",
+        "active"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "dark"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Label + value",
+      "name": "Role",
       "props": {
-        "label": "Revenue",
-        "value": "1428",
+        "label": "Role",
+        "value": "Administrator, Moderator",
         "variant": "default"
       }
     },
     {
-      "name": "Amount + unit",
+      "name": "Email",
       "props": {
-        "label": "Balance",
-        "value": "$2,000.00",
+        "label": "Email",
+        "value": "anna.black@powerhrg.com",
         "variant": "default"
       }
     },
     {
-      "name": "Percent",
+      "name": "Long Bio",
       "props": {
-        "label": "Growth",
-        "value": "15%",
+        "label": "Bio",
+        "value": "Proin pulvinar feugiat massa in luctus. Donec urna nulla, elementum sit amet tincidunt nec, mattis nec urna.",
         "variant": "default"
       }
     },
     {
-      "name": "Details row",
+      "name": "Details Row",
       "props": {
         "variant": "details",
-        "label": "Activity",
-        "icon": "dumbbell",
-        "description": "Q1 campaign",
-        "title": "Review budget",
-        "active": true
+        "label": "Project",
+        "icon": "home",
+        "description": "33-12345",
+        "title": "Jefferson-Smith"
       }
     },
     {
-      "name": "Details (inactive)",
+      "name": "Details With Date",
       "props": {
         "variant": "details",
-        "label": "Snapshot",
-        "icon": "clipboard",
-        "description": "Draft",
-        "title": "FY report",
-        "active": false
+        "label": "Project",
+        "icon": "home",
+        "description": "33-12345",
+        "title": "Jefferson-Smith",
+        "date": "2019-11-18T00:00:00.000Z"
+      }
+    },
+    {
+      "name": "Active Details",
+      "props": {
+        "variant": "details",
+        "label": "Chest",
+        "icon": "dumbbell",
+        "description": "6 sets - 8 reps - 40-100 kg",
+        "title": "Bench Press",
+        "active": true
       }
     }
   ],
@@ -108,18 +125,24 @@
     }
   },
   "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.",
+    "role": {
+      "presetName": "Role",
+      "message": "Use the label and value props to render a label and value.",
       "type": "info"
     },
-    "active_links": {
-      "when": {
-        "active": true
-      },
-      "message": "When active is true, the title and date use the link title variant.",
+    "details_row": {
+      "presetName": "Details Row",
+      "message": "Use the variant prop to change the style of the label value.",
+      "type": "info"
+    },
+    "details_with_date": {
+      "presetName": "Details With Date",
+      "message": "Use the date prop to pass a date object.",
+      "type": "info"
+    },
+    "active_details": {
+      "presetName": "Active Details",
+      "message": "Use the active prop to change the style of the label value.",
       "type": "info"
     }
   }