RubyGems - playbook_ui_docs - Versions diffs - 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469 - Mend

playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

data/app/pb_kits/playbook/pb_selectable_card/docs/_playground.json CHANGED Viewed

@@ -7,7 +7,11 @@
     "error": false,
     "icon": false,
     "multi": true,
-    "variant": "default"
+    "variant": "default",
+    "inputId": "selectable_card_plan",
+    "name": "selectable_card_demo",
+    "text": "Standard plan",
+    "value": "standard"
   },
   "groups": [
     {
@@ -33,113 +37,102 @@
       "props": [
         "variant",
         "icon",
-        "customIcon"
-      ]
-    },
-    {
-      "name": "Events",
-      "props": [
-        "onChange"
+        "dark"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Unselected",
+      "name": "Default",
+      "structureMode": "normal",
       "props": {
         "checked": false,
-        "text": "Option label",
+        "inputId": "plan_standard",
         "name": "selectable_card_demo",
-        "value": "opt1",
-        "variant": "default",
+        "text": "Standard plan",
+        "value": "standard",
         "multi": true,
-        "onChange": "() => {}"
+        "variant": "default"
       }
     },
     {
-      "name": "Selected",
+      "name": "Nested Content",
+      "structureMode": "nested",
       "props": {
         "checked": true,
-        "text": "Selected option",
+        "icon": true,
+        "inputId": "plan_pro",
         "name": "selectable_card_demo",
-        "value": "opt1",
-        "variant": "default",
+        "value": "pro",
         "multi": true,
-        "onChange": "() => {}"
-      }
-    },
-    {
-      "name": "Disabled",
-      "props": {
-        "checked": false,
-        "disabled": true,
-        "text": "Unavailable",
-        "name": "selectable_card_demo",
-        "value": "opt2",
-        "variant": "default",
-        "onChange": "() => {}"
-      }
+        "variant": "default"
+      },
+      "children": "<Title size={4} text=\"Pro plan\" />\n<Body color=\"light\" text=\"Includes advanced reporting.\" />"
     },
     {
-      "name": "With check icon",
+      "name": "Input Variant",
+      "structureMode": "nested",
       "props": {
         "checked": true,
-        "icon": true,
-        "text": "With icon",
+        "inputId": "plan_display",
         "name": "selectable_card_demo",
-        "value": "opt3",
-        "variant": "default",
-        "onChange": "() => {}"
-      }
+        "value": "display",
+        "variant": "displayInput"
+      },
+      "children": "<Body text=\"Display input style\" />"
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a checkbox-style selectable card with state-backed checked behavior in the preview.",
+      "type": "info"
     },
-    {
-      "name": "Radio (single)",
-      "props": {
-        "checked": false,
-        "multi": false,
-        "text": "Plan A",
-        "name": "plan",
-        "value": "a",
-        "variant": "default",
-        "onChange": "() => {}"
-      }
+    "nested_content": {
+      "presetName": "Nested Content",
+      "message": "Nested Content uses child JSX inside SelectableCard for richer card content.",
+      "type": "info"
     },
-    {
-      "name": "Display input variant",
-      "props": {
-        "checked": false,
-        "variant": "displayInput",
-        "text": "Display style",
-        "name": "selectable_card_demo",
-        "value": "disp1",
-        "onChange": "() => {}"
-      }
+    "radio": {
+      "presetName": "Radio (single)",
+      "message": "Radio (single) sets multi to false so the card behaves like a radio option.",
+      "type": "info"
     },
-    {
-      "name": "Error state",
-      "props": {
-        "checked": false,
-        "error": true,
-        "text": "Invalid choice",
-        "name": "selectable_card_demo",
-        "value": "err1",
-        "variant": "default",
-        "onChange": "() => {}"
-      }
+    "input_variant": {
+      "presetName": "Input Variant",
+      "message": "Input Variant uses the displayInput treatment with nested content beside the visible input.",
+      "type": "info"
     }
-  ],
-  "conditionals": {
-    "customIcon": {
-      "requires": {
-        "icon": true
+  },
+  "structureModes": {
+    "default": "normal",
+    "modes": {
+      "normal": {
+        "label": "Normal",
+        "template": "<SelectableCard checked={isChecked} onChange={handleChange}{{props}} />",
+        "children": ""
+      },
+      "nested": {
+        "label": "Nested",
+        "template": "<SelectableCard checked={isChecked} onChange={handleChange}{{props}}>\n  {{children}}\n</SelectableCard>",
+        "children": "<Title size={4} text=\"Pro plan\" />\n<Body color=\"light\" text=\"Includes advanced reporting.\" />"
       }
     }
   },
-  "hints": {
-    "onchange_note": {
-      "when": {},
-      "message": "onChange receives the input change event; wire it to your form state in real usage.",
-      "type": "info"
-    }
-  }
+  "wrapper": "const SelectableCardPlayground = () => {\n  const [isChecked, setIsChecked] = useState(checked)\n  const handleChange = ({ target }) => setIsChecked(target.checked)\n\n  return {{component}}\n}\n\n<SelectableCardPlayground />",
+  "externalImports": [
+    "import React, { useState } from 'react'"
+  ],
+  "statefulProps": [
+    "checked"
+  ],
+  "children": {
+    "editable": true,
+    "default": "<Title size={4} text=\"Pro plan\" />\n<Body color=\"light\" text=\"Includes advanced reporting.\" />"
+  },
+  "hiddenProps": [
+    "customIcon",
+    "onChange"
+  ]
 }

data/app/pb_kits/playbook/pb_selectable_card/docs/_playground.overrides.json CHANGED Viewed

@@ -1,4 +1,39 @@
 {
+  "structureModes": {
+    "default": "normal",
+    "modes": {
+      "normal": {
+        "label": "Normal",
+        "template": "<SelectableCard checked={isChecked} onChange={handleChange}{{props}} />",
+        "children": ""
+      },
+      "nested": {
+        "label": "Nested",
+        "template": "<SelectableCard checked={isChecked} onChange={handleChange}{{props}}>\n  {{children}}\n</SelectableCard>",
+        "children": "<Title size={4} text=\"Pro plan\" />\n<Body color=\"light\" text=\"Includes advanced reporting.\" />"
+      }
+    }
+  },
+  "wrapper": "const SelectableCardPlayground = () => {\n  const [isChecked, setIsChecked] = useState(checked)\n  const handleChange = ({ target }) => setIsChecked(target.checked)\n\n  return {{component}}\n}\n\n<SelectableCardPlayground />",
+  "externalImports": ["import React, { useState } from 'react'"],
+  "statefulProps": ["checked"],
+  "children": {
+    "editable": true,
+    "default": "<Title size={4} text=\"Pro plan\" />\n<Body color=\"light\" text=\"Includes advanced reporting.\" />"
+  },
+  "defaults": {
+    "checked": false,
+    "disabled": false,
+    "error": false,
+    "icon": false,
+    "inputId": "selectable_card_plan",
+    "multi": true,
+    "name": "selectable_card_demo",
+    "text": "Standard plan",
+    "value": "standard",
+    "variant": "default"
+  },
+  "hiddenProps": ["customIcon", "onChange"],
   "groups": [
     {
       "name": "Content",
@@ -10,105 +45,70 @@
     },
     {
       "name": "Appearance",
-      "props": ["variant", "icon", "customIcon"]
-    },
-    {
-      "name": "Events",
-      "props": ["onChange"]
+      "props": ["variant", "icon", "dark"]
     }
   ],
   "presets": [
     {
-      "name": "Unselected",
+      "name": "Default",
+      "structureMode": "normal",
       "props": {
         "checked": false,
-        "text": "Option label",
+        "inputId": "plan_standard",
         "name": "selectable_card_demo",
-        "value": "opt1",
-        "variant": "default",
+        "text": "Standard plan",
+        "value": "standard",
         "multi": true,
-        "onChange": "() => {}"
+        "variant": "default"
       }
     },
     {
-      "name": "Selected",
+      "name": "Nested Content",
+      "structureMode": "nested",
       "props": {
         "checked": true,
-        "text": "Selected option",
+        "icon": true,
+        "inputId": "plan_pro",
         "name": "selectable_card_demo",
-        "value": "opt1",
-        "variant": "default",
+        "value": "pro",
         "multi": true,
-        "onChange": "() => {}"
-      }
+        "variant": "default"
+      },
+      "children": "<Title size={4} text=\"Pro plan\" />\n<Body color=\"light\" text=\"Includes advanced reporting.\" />"
     },
     {
-      "name": "Disabled",
-      "props": {
-        "checked": false,
-        "disabled": true,
-        "text": "Unavailable",
-        "name": "selectable_card_demo",
-        "value": "opt2",
-        "variant": "default",
-        "onChange": "() => {}"
-      }
-    },
-    {
-      "name": "With check icon",
+      "name": "Input Variant",
+      "structureMode": "nested",
       "props": {
         "checked": true,
-        "icon": true,
-        "text": "With icon",
+        "inputId": "plan_display",
         "name": "selectable_card_demo",
-        "value": "opt3",
-        "variant": "default",
-        "onChange": "() => {}"
-      }
-    },
-    {
-      "name": "Radio (single)",
-      "props": {
-        "checked": false,
-        "multi": false,
-        "text": "Plan A",
-        "name": "plan",
-        "value": "a",
-        "variant": "default",
-        "onChange": "() => {}"
-      }
-    },
-    {
-      "name": "Display input variant",
-      "props": {
-        "checked": false,
-        "variant": "displayInput",
-        "text": "Display style",
-        "name": "selectable_card_demo",
-        "value": "disp1",
-        "onChange": "() => {}"
-      }
-    },
-    {
-      "name": "Error state",
-      "props": {
-        "checked": false,
-        "error": true,
-        "text": "Invalid choice",
-        "name": "selectable_card_demo",
-        "value": "err1",
-        "variant": "default",
-        "onChange": "() => {}"
-      }
+        "value": "display",
+        "variant": "displayInput"
+      },
+      "children": "<Body text=\"Display input style\" />"
     }
   ],
-  "conditionals": {
-    "customIcon": { "requires": { "icon": true } }
-  },
+  "conditionals": {},
   "hints": {
-    "onchange_note": {
-      "when": {},
-      "message": "onChange receives the input change event; wire it to your form state in real usage.",
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a checkbox-style selectable card with state-backed checked behavior in the preview.",
+      "type": "info"
+    },
+    "nested_content": {
+      "presetName": "Nested Content",
+      "message": "Nested Content uses child JSX inside SelectableCard for richer card content.",
+      "type": "info"
+    },
+    "radio": {
+      "presetName": "Radio (single)",
+      "message": "Radio (single) sets multi to false so the card behaves like a radio option.",
+      "type": "info"
+    },
+    "input_variant": {
+      "presetName": "Input Variant",
+      "message": "Input Variant uses the displayInput treatment with nested content beside the visible input.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_playground.json CHANGED Viewed

@@ -1,38 +1,128 @@
 {
-  "template": "<SelectableCardIcon{{props}} />",
+  "template": "<SelectableCardIcon checked={isChecked} onChange={handleChange}{{props}} />",
   "propTargets": {},
   "defaults": {
     "checked": false,
     "checkmark": false,
     "disabled": false,
-    "multi": true
+    "multi": true,
+    "bodyText": "Export",
+    "icon": "chart-line",
+    "inputId": "report_quarterly",
+    "name": "report_type",
+    "titleText": "Quarterly Report",
+    "value": "quarterly"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
-        "checked",
-        "checkmark",
-        "customIcon",
-        "dark",
-        "disabled",
-        "icon",
-        "inputId",
-        "multi",
-        "name",
         "titleText",
         "bodyText",
+        "icon",
+        "name",
         "value",
-        "onChange"
+        "inputId"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "checked",
+        "disabled",
+        "multi"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "checkmark",
+        "dark"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "bodyText": "Export",
+        "icon": "chart-line",
+        "inputId": "report_quarterly",
+        "name": "report_type",
+        "titleText": "Quarterly Report",
+        "value": "quarterly"
+      }
+    },
+    {
+      "name": "Selected",
+      "props": {
+        "bodyText": "Export",
+        "checked": true,
+        "icon": "chart-pie",
+        "inputId": "report_market_share",
+        "name": "report_type",
+        "titleText": "Market Share",
+        "value": "market_share"
+      }
+    },
+    {
+      "name": "Checkmark",
+      "props": {
+        "bodyText": "Includes checkmark indicator",
+        "checked": true,
+        "checkmark": true,
+        "icon": "hat-cowboy",
+        "inputId": "role_cowboy",
+        "name": "role",
+        "titleText": "Cowboy",
+        "value": "cowboy"
+      }
+    },
+    {
+      "name": "Radio (single)",
+      "props": {
+        "bodyText": "Single-select option",
+        "icon": "chart-bar",
+        "inputId": "report_summary",
+        "multi": false,
+        "name": "report_type",
+        "titleText": "Summary",
+        "value": "summary"
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default combines a SelectableCard shell with an icon, title, supporting body text, and state-backed preview selection.",
+      "type": "info"
+    },
+    "selected": {
+      "presetName": "Selected",
+      "message": "Selected shows the checked card icon state while keeping the checkbox behavior.",
+      "type": "info"
+    },
+    "checkmark": {
+      "presetName": "Checkmark",
+      "message": "Checkmark adds the card-level check indicator in addition to the inner icon.",
+      "type": "info"
+    },
+    "radio": {
+      "presetName": "Radio (single)",
+      "message": "Radio (single) sets multi to false so the hidden input uses radio semantics.",
+      "type": "info"
+    }
+  },
+  "wrapper": "const SelectableCardIconPlayground = () => {\n  const [isChecked, setIsChecked] = useState(checked)\n  const handleChange = ({ target }) => setIsChecked(target.checked)\n\n  return {{component}}\n}\n\n<SelectableCardIconPlayground />",
+  "externalImports": [
+    "import React, { useState } from 'react'"
+  ],
+  "statefulProps": [
+    "checked"
+  ],
+  "hiddenProps": [
+    "customIcon",
+    "onChange"
+  ]
 }

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_playground.overrides.json ADDED Viewed

@@ -0,0 +1,106 @@
+{
+  "template": "<SelectableCardIcon checked={isChecked} onChange={handleChange}{{props}} />",
+  "wrapper": "const SelectableCardIconPlayground = () => {\n  const [isChecked, setIsChecked] = useState(checked)\n  const handleChange = ({ target }) => setIsChecked(target.checked)\n\n  return {{component}}\n}\n\n<SelectableCardIconPlayground />",
+  "externalImports": ["import React, { useState } from 'react'"],
+  "statefulProps": ["checked"],
+  "defaults": {
+    "bodyText": "Export",
+    "checked": false,
+    "checkmark": false,
+    "disabled": false,
+    "icon": "chart-line",
+    "inputId": "report_quarterly",
+    "multi": true,
+    "name": "report_type",
+    "titleText": "Quarterly Report",
+    "value": "quarterly"
+  },
+  "hiddenProps": ["customIcon", "onChange"],
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["titleText", "bodyText", "icon", "name", "value", "inputId"]
+    },
+    {
+      "name": "State",
+      "props": ["checked", "disabled", "multi"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["checkmark", "dark"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "bodyText": "Export",
+        "icon": "chart-line",
+        "inputId": "report_quarterly",
+        "name": "report_type",
+        "titleText": "Quarterly Report",
+        "value": "quarterly"
+      }
+    },
+    {
+      "name": "Selected",
+      "props": {
+        "bodyText": "Export",
+        "checked": true,
+        "icon": "chart-pie",
+        "inputId": "report_market_share",
+        "name": "report_type",
+        "titleText": "Market Share",
+        "value": "market_share"
+      }
+    },
+    {
+      "name": "Checkmark",
+      "props": {
+        "bodyText": "Includes checkmark indicator",
+        "checked": true,
+        "checkmark": true,
+        "icon": "hat-cowboy",
+        "inputId": "role_cowboy",
+        "name": "role",
+        "titleText": "Cowboy",
+        "value": "cowboy"
+      }
+    },
+    {
+      "name": "Radio (single)",
+      "props": {
+        "bodyText": "Single-select option",
+        "icon": "chart-bar",
+        "inputId": "report_summary",
+        "multi": false,
+        "name": "report_type",
+        "titleText": "Summary",
+        "value": "summary"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default combines a SelectableCard shell with an icon, title, supporting body text, and state-backed preview selection.",
+      "type": "info"
+    },
+    "selected": {
+      "presetName": "Selected",
+      "message": "Selected shows the checked card icon state while keeping the checkbox behavior.",
+      "type": "info"
+    },
+    "checkmark": {
+      "presetName": "Checkmark",
+      "message": "Checkmark adds the card-level check indicator in addition to the inner icon.",
+      "type": "info"
+    },
+    "radio": {
+      "presetName": "Radio (single)",
+      "message": "Radio (single) sets multi to false so the hidden input uses radio semantics.",
+      "type": "info"
+    }
+  }
+}