playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -2,13 +2,13 @@
   "template": "<Icon{{props}} />",
   "propTargets": {},
   "defaults": {
-    "border": false,
     "fixedWidth": true,
     "inverse": false,
     "listItem": false,
     "pulse": false,
     "fontStyle": "far",
-    "spin": false
+    "spin": false,
+    "icon": "user"
   },
   "groups": [
     {
@@ -22,7 +22,6 @@
       "props": [
         "size",
         "color",
-        "fontStyle",
         "fixedWidth"
       ]
     },
@@ -43,73 +42,99 @@
   ],
   "presets": [
     {
-      "name": "User",
+      "name": "Regular User",
       "props": {
-        "icon": "user"
+        "icon": "user",
+        "fixedWidth": true
       }
     },
     {
-      "name": "Check",
+      "name": "Primary Check",
       "props": {
         "icon": "check",
-        "color": "primary"
+        "color": "primary",
+        "fixedWidth": true
       }
     },
     {
-      "name": "Times",
+      "name": "Product Icon",
       "props": {
-        "icon": "times",
-        "color": "error"
+        "icon": "product-roofing",
+        "color": "product_5_background",
+        "fixedWidth": true
       }
     },
     {
-      "name": "Plus",
+      "name": "Small Search",
       "props": {
-        "icon": "plus"
+        "icon": "search",
+        "size": "sm",
+        "fixedWidth": true
       }
     },
     {
-      "name": "Search",
+      "name": "Spinning",
       "props": {
-        "icon": "search"
+        "icon": "sync",
+        "spin": true,
+        "fixedWidth": true
       }
     },
     {
-      "name": "Large",
+      "name": "Pulse Spinner",
       "props": {
-        "icon": "user",
-        "size": "lg"
+        "icon": "spinner",
+        "pulse": true,
+        "size": "2x",
+        "fixedWidth": true
       }
     },
     {
-      "name": "2x size",
+      "name": "Bordered Pull",
       "props": {
-        "icon": "check",
-        "size": "2x"
+        "icon": "arrow-left",
+        "border": true,
+        "pull": "left",
+        "fixedWidth": true
       }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "regular_user": {
+      "presetName": "Regular User",
+      "message": "Use any icon form Playbook Icons by passing the icon name to the icon prop.",
+      "type": "info"
     },
-    {
-      "name": "3x size",
-      "props": {
-        "icon": "search",
-        "size": "3x"
-      }
+    "product_icon": {
+      "presetName": "Product Icon",
+      "message": "Use any product icon by passing the icon name to the icon prop.",
+      "type": "info"
     },
-    {
-      "name": "Solid (fas)",
-      "props": {
-        "icon": "star",
-        "fontStyle": "fas"
-      }
+    "spinning": {
+      "presetName": "Spinning",
+      "message": "spin applies the continuous spinning animation.",
+      "type": "info"
     },
-    {
-      "name": "Spinning",
-      "props": {
-        "icon": "sync",
-        "spin": true
-      }
+    "pulse_spinner": {
+      "presetName": "Pulse Spinner",
+      "message": "pulse uses the stepped pulse animation, which is commonly paired with spinning icons.",
+      "type": "info"
+    },
+    "primary_check": {
+      "presetName": "Primary Check",
+      "message": "Use the color prop to change the color of the icon.",
+      "type": "info"
+    },
+    "small_search": {
+      "presetName": "Small Search",
+      "message": "Use the size prop to change the size of the icon.",
+      "type": "info"
     }
-  ],
-  "conditionals": {},
-  "hints": {}
+  },
+  "hiddenProps": [
+    "customIcon",
+    "fontStyle",
+    "border"
+  ]
 }

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

@@ -1,4 +1,14 @@
 {
+  "defaults": {
+    "icon": "user",
+    "fixedWidth": true,
+    "fontStyle": "far"
+  },
+  "hiddenProps": [
+    "customIcon",
+    "fontStyle",
+    "border"
+  ],
   "groups": [
     {
       "name": "Content",
@@ -6,7 +16,7 @@
     },
     {
       "name": "Appearance",
-      "props": ["size", "color", "fontStyle", "fixedWidth"]
+      "props": ["size", "color", "fixedWidth"]
     },
     {
       "name": "Transform",
@@ -15,46 +25,94 @@
   ],
   "presets": [
     {
-      "name": "User",
-      "props": { "icon": "user" }
+      "name": "Regular User",
+      "props": {
+        "icon": "user",
+        "fixedWidth": true
+      }
     },
     {
-      "name": "Check",
-      "props": { "icon": "check", "color": "primary" }
+      "name": "Primary Check",
+      "props": {
+        "icon": "check",
+        "color": "primary",
+        "fixedWidth": true
+      }
     },
     {
-      "name": "Times",
-      "props": { "icon": "times", "color": "error" }
+      "name": "Product Icon",
+      "props": {
+        "icon": "product-roofing",
+        "color": "product_5_background",
+        "fixedWidth": true
+      }
     },
     {
-      "name": "Plus",
-      "props": { "icon": "plus" }
+      "name": "Small Search",
+      "props": {
+        "icon": "search",
+        "size": "sm",
+        "fixedWidth": true
+      }
     },
     {
-      "name": "Search",
-      "props": { "icon": "search" }
+      "name": "Spinning",
+      "props": {
+        "icon": "sync",
+        "spin": true,
+        "fixedWidth": true
+      }
     },
     {
-      "name": "Large",
-      "props": { "icon": "user", "size": "lg" }
+      "name": "Pulse Spinner",
+      "props": {
+        "icon": "spinner",
+        "pulse": true,
+        "size": "2x",
+        "fixedWidth": true
+      }
     },
     {
-      "name": "2x size",
-      "props": { "icon": "check", "size": "2x" }
+      "name": "Bordered Pull",
+      "props": {
+        "icon": "arrow-left",
+        "border": true,
+        "pull": "left",
+        "fixedWidth": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "regular_user": {
+      "presetName": "Regular User",
+      "message": "Use any icon form Playbook Icons by passing the icon name to the icon prop.",
+      "type": "info"
     },
-    {
-      "name": "3x size",
-      "props": { "icon": "search", "size": "3x" }
+    "product_icon": {
+      "presetName": "Product Icon",
+      "message": "Use any product icon by passing the icon name to the icon prop.",
+      "type": "info"
     },
-    {
-      "name": "Solid (fas)",
-      "props": { "icon": "star", "fontStyle": "fas" }
+    "spinning": {
+      "presetName": "Spinning",
+      "message": "spin applies the continuous spinning animation.",
+      "type": "info"
     },
-    {
-      "name": "Spinning",
-      "props": { "icon": "sync", "spin": true }
+    "pulse_spinner": {
+      "presetName": "Pulse Spinner",
+      "message": "pulse uses the stepped pulse animation, which is commonly paired with spinning icons.",
+      "type": "info"
+    },
+    "primary_check": {
+      "presetName": "Primary Check",
+      "message": "Use the color prop to change the color of the icon.",
+      "type": "info"
+    },
+    "small_search": {
+      "presetName": "Small Search",
+      "message": "Use the size prop to change the size of the icon.",
+      "type": "info"
     }
-  ],
-  "conditionals": {},
-  "hints": {}
+  }
 }

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

@@ -5,29 +5,131 @@
     "icon": "bars",
     "newWindow": false,
     "size": "2x",
-    "variant": "default"
+    "variant": "default",
+    "htmlType": "button"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
+      "props": [
+        "icon"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "size"
+      ]
+    },
+    {
+      "name": "Action",
       "props": [
         "htmlType",
-        "icon",
-        "link",
-        "newWindow",
         "onClick",
-        "size",
+        "link",
         "target",
-        "variant"
+        "newWindow"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "icon": "bars",
+        "size": "2x",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Link Variant",
+      "props": {
+        "icon": "external-link-alt",
+        "size": "2x",
+        "variant": "link"
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "icon": "search",
+        "size": "sm",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Large",
+      "props": {
+        "icon": "plus",
+        "size": "lg",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Click Handler",
+      "props": {
+        "icon": "check",
+        "onClick": "() => alert('Clicked!')",
+        "size": "2x",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Linked Button",
+      "props": {
+        "icon": "arrow-up-right-from-square",
+        "link": "https://powerhrg.com/",
+        "newWindow": true,
+        "size": "2x",
+        "target": "_blank",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Submit",
+      "props": {
+        "htmlType": "submit",
+        "icon": "paper-plane",
+        "size": "2x",
+        "variant": "default"
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "IconButton wraps a Button and renders the selected icon inside it.",
+      "type": "info"
+    },
+    "link_variant": {
+      "presetName": "Link Variant",
+      "message": "variant=\"link\" switches the icon button to the lighter link treatment.",
+      "type": "info"
+    },
+    "click_handler": {
+      "presetName": "Click Handler",
+      "message": "onClick is passed directly to the inner Button for interactive icon actions.",
+      "type": "info"
+    },
+    "linked_button": {
+      "presetName": "Linked Button",
+      "message": "Use link with target or newWindow when the icon button should navigate.",
+      "type": "info"
+    },
+    "submit": {
+      "presetName": "Submit",
+      "message": "htmlType controls the native button type for form use cases.",
+      "type": "info"
+    }
+  },
+  "customProps": {
+    "onClick": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    }
+  }
 }

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

@@ -0,0 +1,131 @@
+{
+  "defaults": {
+    "icon": "bars",
+    "size": "2x",
+    "variant": "default",
+    "htmlType": "button",
+    "newWindow": false
+  },
+  "customProps": {
+    "onClick": {
+      "type": "function",
+      "platforms": ["react"]
+    }
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "icon"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "size"
+      ]
+    },
+    {
+      "name": "Action",
+      "props": [
+        "htmlType",
+        "onClick",
+        "link",
+        "target",
+        "newWindow"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "icon": "bars",
+        "size": "2x",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Link Variant",
+      "props": {
+        "icon": "external-link-alt",
+        "size": "2x",
+        "variant": "link"
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "icon": "search",
+        "size": "sm",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Large",
+      "props": {
+        "icon": "plus",
+        "size": "lg",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Click Handler",
+      "props": {
+        "icon": "check",
+        "onClick": "() => alert('Clicked!')",
+        "size": "2x",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Linked Button",
+      "props": {
+        "icon": "arrow-up-right-from-square",
+        "link": "https://powerhrg.com/",
+        "newWindow": true,
+        "size": "2x",
+        "target": "_blank",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Submit",
+      "props": {
+        "htmlType": "submit",
+        "icon": "paper-plane",
+        "size": "2x",
+        "variant": "default"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "IconButton wraps a Button and renders the selected icon inside it.",
+      "type": "info"
+    },
+    "link_variant": {
+      "presetName": "Link Variant",
+      "message": "variant=\"link\" switches the icon button to the lighter link treatment.",
+      "type": "info"
+    },
+    "click_handler": {
+      "presetName": "Click Handler",
+      "message": "onClick is passed directly to the inner Button for interactive icon actions.",
+      "type": "info"
+    },
+    "linked_button": {
+      "presetName": "Linked Button",
+      "message": "Use link with target or newWindow when the icon button should navigate.",
+      "type": "info"
+    },
+    "submit": {
+      "presetName": "Submit",
+      "message": "htmlType controls the native button type for form use cases.",
+      "type": "info"
+    }
+  }
+}

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

@@ -3,25 +3,110 @@
   "propTargets": {},
   "defaults": {
     "size": "md",
-    "variant": "default"
+    "variant": "default",
+    "icon": "rocket",
+    "dark": false
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
+      "props": [
+        "icon"
+      ]
+    },
+    {
+      "name": "Appearance",
       "props": [
-        "dark",
-        "icon",
         "size",
-        "variant"
+        "variant",
+        "dark"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "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": {}
+  "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"
+    }
+  },
+  "customProps": {
+    "variant": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "default",
+        "royal",
+        "blue",
+        "purple",
+        "teal",
+        "red",
+        "yellow",
+        "orange",
+        "green",
+        "lighter"
+      ],
+      "default": "default"
+    }
+  }
 }