playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

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

@@ -0,0 +1,205 @@
+{
+  "template": "<Typeahead{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "async": false,
+    "createable": false,
+    "disabled": false,
+    "error": "",
+    "inputDisplay": "pills",
+    "required": false,
+    "requiredIndicator": false,
+    "clearOnContextChange": true,
+    "preserveSearchInput": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "name",
+        "options"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "disabled",
+        "error",
+        "required",
+        "requiredIndicator",
+        "validation"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "inputDisplay"
+      ]
+    },
+    {
+      "name": "Async & data",
+      "props": [
+        "async",
+        "createable",
+        "loadOptions",
+        "getOptionLabel",
+        "getOptionValue",
+        "optionsByContext",
+        "searchContextSelector",
+        "clearOnContextChange",
+        "preserveSearchInput"
+      ]
+    },
+    {
+      "name": "Advanced",
+      "props": [
+        "components",
+        "onChange"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Basic list",
+      "props": {
+        "label": "Colors",
+        "options": [
+          {
+            "label": "Orange",
+            "value": "#FFA500"
+          },
+          {
+            "label": "Red",
+            "value": "#FF0000"
+          },
+          {
+            "label": "Green",
+            "value": "#00FF00"
+          },
+          {
+            "label": "Blue",
+            "value": "#0000FF"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Pills display",
+      "props": {
+        "label": "Tags",
+        "inputDisplay": "pills",
+        "options": [
+          {
+            "label": "Design",
+            "value": "design"
+          },
+          {
+            "label": "Engineering",
+            "value": "engineering"
+          },
+          {
+            "label": "Support",
+            "value": "support"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Plain input",
+      "props": {
+        "label": "Team",
+        "inputDisplay": "none",
+        "options": [
+          {
+            "label": "North",
+            "value": "north"
+          },
+          {
+            "label": "South",
+            "value": "south"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Read only",
+        "disabled": true,
+        "options": [
+          {
+            "label": "Only option",
+            "value": "one"
+          }
+        ]
+      }
+    },
+    {
+      "name": "With error",
+      "props": {
+        "label": "Assignee",
+        "error": "Selection is required.",
+        "options": [
+          {
+            "label": "Ada",
+            "value": "ada"
+          },
+          {
+            "label": "Grace",
+            "value": "grace"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Creatable",
+      "props": {
+        "label": "Add labels",
+        "createable": true,
+        "options": [
+          {
+            "label": "Bug",
+            "value": "bug"
+          },
+          {
+            "label": "Feature",
+            "value": "feature"
+          }
+        ]
+      }
+    }
+  ],
+  "conditionals": {
+    "loadOptions": {
+      "requires": {
+        "async": true
+      }
+    },
+    "getOptionLabel": {
+      "requires": {
+        "async": true
+      }
+    },
+    "getOptionValue": {
+      "requires": {
+        "async": true
+      }
+    },
+    "optionsByContext": {
+      "requires": "searchContextSelector"
+    },
+    "clearOnContextChange": {
+      "requires": "searchContextSelector"
+    }
+  },
+  "hints": {
+    "async_options": {
+      "when": {
+        "async": true
+      },
+      "message": "Async mode expects loadOptions to return option objects with label and value.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["label", "name", "options"]
+    },
+    {
+      "name": "State",
+      "props": ["disabled", "error", "required", "requiredIndicator", "validation"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["inputDisplay"]
+    },
+    {
+      "name": "Async & data",
+      "props": [
+        "async",
+        "createable",
+        "loadOptions",
+        "getOptionLabel",
+        "getOptionValue",
+        "optionsByContext",
+        "searchContextSelector",
+        "clearOnContextChange",
+        "preserveSearchInput"
+      ]
+    },
+    {
+      "name": "Advanced",
+      "props": ["components", "onChange"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Basic list",
+      "props": {
+        "label": "Colors",
+        "options": [
+          { "label": "Orange", "value": "#FFA500" },
+          { "label": "Red", "value": "#FF0000" },
+          { "label": "Green", "value": "#00FF00" },
+          { "label": "Blue", "value": "#0000FF" }
+        ]
+      }
+    },
+    {
+      "name": "Pills display",
+      "props": {
+        "label": "Tags",
+        "inputDisplay": "pills",
+        "options": [
+          { "label": "Design", "value": "design" },
+          { "label": "Engineering", "value": "engineering" },
+          { "label": "Support", "value": "support" }
+        ]
+      }
+    },
+    {
+      "name": "Plain input",
+      "props": {
+        "label": "Team",
+        "inputDisplay": "none",
+        "options": [
+          { "label": "North", "value": "north" },
+          { "label": "South", "value": "south" }
+        ]
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "label": "Read only",
+        "disabled": true,
+        "options": [{ "label": "Only option", "value": "one" }]
+      }
+    },
+    {
+      "name": "With error",
+      "props": {
+        "label": "Assignee",
+        "error": "Selection is required.",
+        "options": [
+          { "label": "Ada", "value": "ada" },
+          { "label": "Grace", "value": "grace" }
+        ]
+      }
+    },
+    {
+      "name": "Creatable",
+      "props": {
+        "label": "Add labels",
+        "createable": true,
+        "options": [
+          { "label": "Bug", "value": "bug" },
+          { "label": "Feature", "value": "feature" }
+        ]
+      }
+    }
+  ],
+  "conditionals": {
+    "loadOptions": { "requires": { "async": true } },
+    "getOptionLabel": { "requires": { "async": true } },
+    "getOptionValue": { "requires": { "async": true } },
+    "optionsByContext": { "requires": "searchContextSelector" },
+    "clearOnContextChange": { "requires": "searchContextSelector" }
+  },
+  "hints": {
+    "async_options": {
+      "when": { "async": true },
+      "message": "Async mode expects loadOptions to return option objects with label and value.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.html.erb

@@ -0,0 +1,29 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-creatable",
+    placeholder: "All Colors",
+    options: options,
+    label: "Colors",
+    name: :foo,
+    createable: true,
+    pills: true,
+  })
+%>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-creatable-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-creatable-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.md

@@ -0,0 +1 @@
+The `createable` prop allows users to create new options by typing a value that doesn't exist in the options list. 

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml

@@ -11,6 +11,7 @@ examples:
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
+    - typeahead_createable: Createable
     - typeahead_error_state: Error State
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)

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

@@ -0,0 +1,110 @@
+{
+  "template": "<User{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "align": "left",
+    "avatar": true,
+    "bold": true,
+    "avatarGrayscale": false,
+    "nameStyle": "title",
+    "orientation": "horizontal",
+    "size": "md",
+    "titleStyle": "body",
+    "name": "Anna Black",
+    "title": "Engineer",
+    "subtitle": "Product team",
+    "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "name",
+        "title",
+        "subtitle",
+        "territory",
+        "avatar",
+        "avatarUrl"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "orientation",
+        "align",
+        "nameStyle",
+        "titleStyle",
+        "bold",
+        "avatarGrayscale"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "With avatar",
+      "props": {
+        "name": "Anna Black",
+        "title": "Engineer",
+        "avatar": true,
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "size": "md",
+        "orientation": "horizontal"
+      }
+    },
+    {
+      "name": "Text only",
+      "props": {
+        "name": "Anna Black",
+        "title": "Engineer",
+        "avatar": false,
+        "avatarUrl": "",
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Large",
+      "props": {
+        "name": "Anna Black",
+        "title": "Engineer",
+        "subtitle": "San Francisco",
+        "avatar": true,
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "size": "lg"
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "name": "Anna Black",
+        "title": "Engineer",
+        "avatar": true,
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Vertical",
+      "props": {
+        "name": "Anna Black",
+        "title": "Engineer",
+        "avatar": true,
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "orientation": "vertical",
+        "size": "md"
+      }
+    },
+    {
+      "name": "With territory",
+      "props": {
+        "name": "Anna Black",
+        "territory": "West",
+        "title": "Engineer",
+        "avatar": true,
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,89 @@
+{
+  "defaults": {
+    "name": "Anna Black",
+    "title": "Engineer",
+    "subtitle": "Product team",
+    "avatar": true,
+    "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+    "size": "md",
+    "orientation": "horizontal",
+    "align": "left"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["name", "title", "subtitle", "territory", "avatar", "avatarUrl"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size", "orientation", "align", "nameStyle", "titleStyle", "bold", "avatarGrayscale"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "With avatar",
+      "props": {
+        "name": "Anna Black",
+        "title": "Engineer",
+        "avatar": true,
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "size": "md",
+        "orientation": "horizontal"
+      }
+    },
+    {
+      "name": "Text only",
+      "props": {
+        "name": "Anna Black",
+        "title": "Engineer",
+        "avatar": false,
+        "avatarUrl": "",
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Large",
+      "props": {
+        "name": "Anna Black",
+        "title": "Engineer",
+        "subtitle": "San Francisco",
+        "avatar": true,
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "size": "lg"
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "name": "Anna Black",
+        "title": "Engineer",
+        "avatar": true,
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Vertical",
+      "props": {
+        "name": "Anna Black",
+        "title": "Engineer",
+        "avatar": true,
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
+        "orientation": "vertical",
+        "size": "md"
+      }
+    },
+    {
+      "name": "With territory",
+      "props": {
+        "name": "Anna Black",
+        "territory": "West",
+        "title": "Engineer",
+        "avatar": true,
+        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,61 @@
+{
+  "template": "<UserBadge{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "badge": "million-dollar",
+    "size": "md"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "badge"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Million dollar · md",
+      "props": {
+        "badge": "million-dollar",
+        "size": "md"
+      }
+    },
+    {
+      "name": "Million dollar · sm",
+      "props": {
+        "badge": "million-dollar",
+        "size": "sm"
+      }
+    },
+    {
+      "name": "Million dollar · lg",
+      "props": {
+        "badge": "million-dollar",
+        "size": "lg"
+      }
+    },
+    {
+      "name": "Veteran · md",
+      "props": {
+        "badge": "veteran",
+        "size": "md"
+      }
+    },
+    {
+      "name": "Veteran · sm",
+      "props": {
+        "badge": "veteran",
+        "size": "sm"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,36 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["badge"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Million dollar · md",
+      "props": { "badge": "million-dollar", "size": "md" }
+    },
+    {
+      "name": "Million dollar · sm",
+      "props": { "badge": "million-dollar", "size": "sm" }
+    },
+    {
+      "name": "Million dollar · lg",
+      "props": { "badge": "million-dollar", "size": "lg" }
+    },
+    {
+      "name": "Veteran · md",
+      "props": { "badge": "veteran", "size": "md" }
+    },
+    {
+      "name": "Veteran · sm",
+      "props": { "badge": "veteran", "size": "sm" }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}