playbook_ui_docs 16.6.0 → 16.7.0.pre.rc.0

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

@@ -0,0 +1,149 @@
+{
+  "template": "<Select{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "compact": false,
+    "disabled": false,
+    "inline": false,
+    "multiple": false,
+    "required": false,
+    "requiredIndicator": false,
+    "showArrow": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "name",
+        "value",
+        "options",
+        "blankSelection",
+        "includeBlank"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "disabled",
+        "error",
+        "required",
+        "requiredIndicator"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "inline",
+        "compact",
+        "showArrow",
+        "multiple"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Country",
+        "name": "country",
+        "value": "us",
+        "options": [
+          {
+            "value": "us",
+            "text": "United States"
+          },
+          {
+            "value": "ca",
+            "text": "Canada"
+          },
+          {
+            "value": "uk",
+            "text": "United Kingdom"
+          },
+          {
+            "value": "au",
+            "text": "Australia"
+          }
+        ]
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "label": "Department",
+        "name": "department",
+        "value": "",
+        "blankSelection": "Select a department",
+        "error": "Please choose a department.",
+        "options": [
+          {
+            "value": "eng",
+            "text": "Engineering"
+          },
+          {
+            "value": "design",
+            "text": "Design"
+          },
+          {
+            "value": "sales",
+            "text": "Sales"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Role",
+        "name": "role",
+        "value": "member",
+        "disabled": true,
+        "options": [
+          {
+            "value": "admin",
+            "text": "Admin"
+          },
+          {
+            "value": "member",
+            "text": "Member"
+          },
+          {
+            "value": "guest",
+            "text": "Guest"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "Priority",
+        "name": "priority",
+        "value": "medium",
+        "required": true,
+        "requiredIndicator": true,
+        "options": [
+          {
+            "value": "low",
+            "text": "Low"
+          },
+          {
+            "value": "medium",
+            "text": "Medium"
+          },
+          {
+            "value": "high",
+            "text": "High"
+          }
+        ]
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "label"
+    }
+  },
+  "hints": {}
+}

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

@@ -0,0 +1,80 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["label", "name", "value", "options", "blankSelection", "includeBlank"]
+    },
+    {
+      "name": "State",
+      "props": ["disabled", "error", "required", "requiredIndicator"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["inline", "compact", "showArrow", "multiple"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Country",
+        "name": "country",
+        "value": "us",
+        "options": [
+          { "value": "us", "text": "United States" },
+          { "value": "ca", "text": "Canada" },
+          { "value": "uk", "text": "United Kingdom" },
+          { "value": "au", "text": "Australia" }
+        ]
+      }
+    },
+    {
+      "name": "With Error",
+      "props": {
+        "label": "Department",
+        "name": "department",
+        "value": "",
+        "blankSelection": "Select a department",
+        "error": "Please choose a department.",
+        "options": [
+          { "value": "eng", "text": "Engineering" },
+          { "value": "design", "text": "Design" },
+          { "value": "sales", "text": "Sales" }
+        ]
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Role",
+        "name": "role",
+        "value": "member",
+        "disabled": true,
+        "options": [
+          { "value": "admin", "text": "Admin" },
+          { "value": "member", "text": "Member" },
+          { "value": "guest", "text": "Guest" }
+        ]
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "Priority",
+        "name": "priority",
+        "value": "medium",
+        "required": true,
+        "requiredIndicator": true,
+        "options": [
+          { "value": "low", "text": "Low" },
+          { "value": "medium", "text": "Medium" },
+          { "value": "high", "text": "High" }
+        ]
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": { "requires": "label" }
+  },
+  "hints": {}
+}

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

@@ -28,7 +28,7 @@ const SelectError = (props) => {
       <Select
           error={error}
           label="Favorite Food"
-          name="food"
+          name="food-error"
           options={options}
           value="2"
           {...props}

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx

@@ -23,7 +23,7 @@ const SelectInline = (props) => {
       <Select
           inline
           label="Favorite Food"
-          name="food"
+          name="food-inline"
           options={options}
           {...props}
       />

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx

@@ -24,7 +24,7 @@ const SelectInlineCompact = (props) => {
           compact
           inline
           label="Favorite Food"
-          name="food"
+          name="food-inline-compact"
           options={options}
           {...props}
       />

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx

@@ -23,7 +23,7 @@ const SelectInlineShowArrow = (props) => {
       <Select
           inline
           label="Favorite Food"
-          name="food"
+          name="food-inline-show-arrow"
           options={options}
           showArrow
           {...props}

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb

@@ -22,15 +22,15 @@
       value_text: "BBQ",
     },
     {
-      value: "4",
+      value: "5",
       value_text: "Sushi",
     },
     {
-      value: "4",
+      value: "6",
       value_text: "Chinese",
     },
     {
-      value: "4",
+      value: "7",
       value_text: "Hot Dogs",
     },
   ]

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx

@@ -17,19 +17,19 @@ const SelectMultiple = (props) => {
       text: 'Tacos',
     },
     {
-      value: '3',
+      value: '4',
       text: 'BBQ',
     },
     {
-      value: '3',
+      value: '5',
       text: 'Sushi',
     },
     {
-      value: '3',
+      value: '6',
       text: 'Chinese',
     },
     {
-      value: '3',
+      value: '7',
       text: 'Hot Dogs',
     },
   ]
@@ -39,7 +39,7 @@ const SelectMultiple = (props) => {
       <Select
           label="Favorite Food"
           multiple
-          name="food"
+          name="food-multiple"
           options={options}
           {...props}
       />

data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx

@@ -7,12 +7,12 @@ import Button from "../../pb_button/_button"
 const SelectReactHook = (props) => {
   const { register, handleSubmit, formState: { errors } } = useForm({
     defaultValues: {
-      food: '',
+      "food-react-hook": '',
     },
   })
 
   const [submittedData, setSubmittedData] = useState({
-    food: '',
+    "food-react-hook": '',
   })
 
   const onSubmit = (data) => {
@@ -39,8 +39,8 @@ const SelectReactHook = (props) => {
       <form onSubmit={handleSubmit(onSubmit)}>
         <Select
             {...props}
-            {...register("food", { required: true })}
-            error={errors.food ? "Please select a food." : null}
+            {...register("food-react-hook", { required: true })}
+            error={errors["food-react-hook"] ? "Please select a food." : null}
             label="Favorite Food"
             options={options}
         />
@@ -51,7 +51,7 @@ const SelectReactHook = (props) => {
           />
       </form>
       <Body padding="xs"
-          text={`Food: ${submittedData.food}`}
+          text={`Food: ${submittedData["food-react-hook"]}`}
       />
     </>
   )

data/app/pb_kits/playbook/pb_select/docs/_select_required_indicator.jsx

@@ -22,7 +22,7 @@ const SelectRequiredIndicator = () => {
     <div>
       <Select
           label="Favorite Snack"
-          name="food"
+          name="food-required-indicator"
           options={options}
           requiredIndicator
       />

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

@@ -0,0 +1,145 @@
+{
+  "template": "<SelectableCard{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "checked": false,
+    "disabled": false,
+    "error": false,
+    "icon": false,
+    "multi": true,
+    "variant": "default"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text",
+        "value",
+        "name",
+        "inputId"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "checked",
+        "disabled",
+        "error",
+        "multi"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "variant",
+        "icon",
+        "customIcon"
+      ]
+    },
+    {
+      "name": "Events",
+      "props": [
+        "onChange"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Unselected",
+      "props": {
+        "checked": false,
+        "text": "Option label",
+        "name": "selectable_card_demo",
+        "value": "opt1",
+        "variant": "default",
+        "multi": true,
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Selected",
+      "props": {
+        "checked": true,
+        "text": "Selected option",
+        "name": "selectable_card_demo",
+        "value": "opt1",
+        "variant": "default",
+        "multi": true,
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "checked": false,
+        "disabled": true,
+        "text": "Unavailable",
+        "name": "selectable_card_demo",
+        "value": "opt2",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "With check icon",
+      "props": {
+        "checked": true,
+        "icon": true,
+        "text": "With icon",
+        "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": "() => {}"
+      }
+    }
+  ],
+  "conditionals": {
+    "customIcon": {
+      "requires": {
+        "icon": true
+      }
+    }
+  },
+  "hints": {
+    "onchange_note": {
+      "when": {},
+      "message": "onChange receives the input change event; wire it to your form state in real usage.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["text", "value", "name", "inputId"]
+    },
+    {
+      "name": "State",
+      "props": ["checked", "disabled", "error", "multi"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["variant", "icon", "customIcon"]
+    },
+    {
+      "name": "Events",
+      "props": ["onChange"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Unselected",
+      "props": {
+        "checked": false,
+        "text": "Option label",
+        "name": "selectable_card_demo",
+        "value": "opt1",
+        "variant": "default",
+        "multi": true,
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Selected",
+      "props": {
+        "checked": true,
+        "text": "Selected option",
+        "name": "selectable_card_demo",
+        "value": "opt1",
+        "variant": "default",
+        "multi": true,
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "checked": false,
+        "disabled": true,
+        "text": "Unavailable",
+        "name": "selectable_card_demo",
+        "value": "opt2",
+        "variant": "default",
+        "onChange": "() => {}"
+      }
+    },
+    {
+      "name": "With check icon",
+      "props": {
+        "checked": true,
+        "icon": true,
+        "text": "With icon",
+        "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": "() => {}"
+      }
+    }
+  ],
+  "conditionals": {
+    "customIcon": { "requires": { "icon": true } }
+  },
+  "hints": {
+    "onchange_note": {
+      "when": {},
+      "message": "onChange receives the input change event; wire it to your form state in real usage.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+{
+  "template": "<SelectableCardIcon{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "checked": false,
+    "checkmark": false,
+    "disabled": false,
+    "multi": true
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "checked",
+        "checkmark",
+        "customIcon",
+        "dark",
+        "disabled",
+        "icon",
+        "inputId",
+        "multi",
+        "name",
+        "titleText",
+        "bodyText",
+        "value",
+        "onChange"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}