playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

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