playbook_ui_docs 16.5.0.pre.alpha.play289915580 → 16.5.0.pre.alpha.testingplayground15744

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

@@ -0,0 +1,133 @@
+{
+  "template": "<Flex{{props}}>{{children}}</Flex>",
+  "propTargets": {},
+  "defaults": {
+    "horizontal": "left",
+    "justify": "none",
+    "inline": false,
+    "orientation": "row",
+    "spacing": "none",
+    "reverse": false,
+    "vertical": "top",
+    "align": "none",
+    "wrap": false,
+    "alignSelf": "none"
+  },
+  "children": {
+    "editable": true,
+    "default": "<Caption text=\"A\" /><Caption text=\"B\" /><Caption text=\"C\" />"
+  },
+  "groups": [
+    {
+      "name": "Direction & flow",
+      "props": [
+        "orientation",
+        "reverse",
+        "wrap",
+        "inline"
+      ]
+    },
+    {
+      "name": "Primary axis",
+      "props": [
+        "horizontal",
+        "justify",
+        "spacing"
+      ]
+    },
+    {
+      "name": "Cross axis",
+      "props": [
+        "vertical",
+        "align",
+        "alignSelf"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Row (start)",
+      "props": {
+        "orientation": "row",
+        "justify": "none",
+        "horizontal": "left",
+        "vertical": "top"
+      },
+      "children": "<Caption text=\"A\" /><Caption text=\"B\" /><Caption text=\"C\" />"
+    },
+    {
+      "name": "Column",
+      "props": {
+        "orientation": "column",
+        "justify": "none",
+        "horizontal": "left",
+        "vertical": "top"
+      },
+      "children": "<Caption text=\"One\" /><Caption text=\"Two\" /><Caption text=\"Three\" />"
+    },
+    {
+      "name": "Centered",
+      "props": {
+        "orientation": "row",
+        "justify": "center",
+        "vertical": "center"
+      },
+      "children": "<Caption text=\"Centered\" />"
+    },
+    {
+      "name": "Space between",
+      "props": {
+        "orientation": "row",
+        "justify": "between",
+        "vertical": "center"
+      },
+      "children": "<Caption text=\"Left\" /><Caption text=\"Right\" />"
+    },
+    {
+      "name": "Space around",
+      "props": {
+        "orientation": "row",
+        "justify": "around",
+        "vertical": "center"
+      },
+      "children": "<Caption text=\"A\" /><Caption text=\"B\" /><Caption text=\"C\" />"
+    },
+    {
+      "name": "End aligned",
+      "props": {
+        "orientation": "row",
+        "justify": "end",
+        "vertical": "center"
+      },
+      "children": "<Caption text=\"Trailing\" />"
+    },
+    {
+      "name": "Wrap",
+      "props": {
+        "orientation": "row",
+        "wrap": true,
+        "justify": "start"
+      },
+      "children": "<Caption text=\"Item 1\" /><Caption text=\"Item 2\" /><Caption text=\"Item 3\" /><Caption text=\"Item 4\" />"
+    },
+    {
+      "name": "Inline flex",
+      "props": {
+        "inline": true,
+        "orientation": "row",
+        "vertical": "center"
+      },
+      "children": "<Caption text=\"Inline\" /> <Caption text=\"chips\" />"
+    },
+    {
+      "name": "Column (center items)",
+      "props": {
+        "orientation": "column",
+        "align": "center"
+      },
+      "children": "<Caption text=\"Stacked\" /><Caption text=\"centered\" />"
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,105 @@
+{
+  "children": {
+    "default": "<Caption text=\"A\" /><Caption text=\"B\" /><Caption text=\"C\" />"
+  },
+  "groups": [
+    {
+      "name": "Direction & flow",
+      "props": ["orientation", "reverse", "wrap", "inline"]
+    },
+    {
+      "name": "Primary axis",
+      "props": ["horizontal", "justify", "spacing"]
+    },
+    {
+      "name": "Cross axis",
+      "props": ["vertical", "align", "alignSelf"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Row (start)",
+      "props": {
+        "orientation": "row",
+        "justify": "none",
+        "horizontal": "left",
+        "vertical": "top"
+      },
+      "children": "<Caption text=\"A\" /><Caption text=\"B\" /><Caption text=\"C\" />"
+    },
+    {
+      "name": "Column",
+      "props": {
+        "orientation": "column",
+        "justify": "none",
+        "horizontal": "left",
+        "vertical": "top"
+      },
+      "children": "<Caption text=\"One\" /><Caption text=\"Two\" /><Caption text=\"Three\" />"
+    },
+    {
+      "name": "Centered",
+      "props": {
+        "orientation": "row",
+        "justify": "center",
+        "vertical": "center"
+      },
+      "children": "<Caption text=\"Centered\" />"
+    },
+    {
+      "name": "Space between",
+      "props": {
+        "orientation": "row",
+        "justify": "between",
+        "vertical": "center"
+      },
+      "children": "<Caption text=\"Left\" /><Caption text=\"Right\" />"
+    },
+    {
+      "name": "Space around",
+      "props": {
+        "orientation": "row",
+        "justify": "around",
+        "vertical": "center"
+      },
+      "children": "<Caption text=\"A\" /><Caption text=\"B\" /><Caption text=\"C\" />"
+    },
+    {
+      "name": "End aligned",
+      "props": {
+        "orientation": "row",
+        "justify": "end",
+        "vertical": "center"
+      },
+      "children": "<Caption text=\"Trailing\" />"
+    },
+    {
+      "name": "Wrap",
+      "props": {
+        "orientation": "row",
+        "wrap": true,
+        "justify": "start"
+      },
+      "children": "<Caption text=\"Item 1\" /><Caption text=\"Item 2\" /><Caption text=\"Item 3\" /><Caption text=\"Item 4\" />"
+    },
+    {
+      "name": "Inline flex",
+      "props": {
+        "inline": true,
+        "orientation": "row",
+        "vertical": "center"
+      },
+      "children": "<Caption text=\"Inline\" /> <Caption text=\"chips\" />"
+    },
+    {
+      "name": "Column (center items)",
+      "props": {
+        "orientation": "column",
+        "align": "center"
+      },
+      "children": "<Caption text=\"Stacked\" /><Caption text=\"centered\" />"
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -97,8 +97,8 @@
 }] %>
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true } %>
-  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true } %>
+  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
+  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
   <%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
   <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
@@ -110,14 +110,14 @@
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox_validation, props: { text: "Example Checkbox Validation", label: true, required: true }, checked_value: "1", unchecked_value: "0" %>
-  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, allow_input: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
-  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true } %>
+  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true, validation_message: "Please select a time." } %>
  
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -0,0 +1,13 @@
+{
+  "template": "<Form{{props}} />",
+  "propTargets": {},
+  "defaults": {},
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -3,6 +3,5 @@ examples:
   rails:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
-  - form_form_with_validation_msg: Validation + Custom Validation Message
   - form_form_with_loading: Default + Loading
   - form_with_required_indicator: With Optional Required Indicator

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

@@ -0,0 +1,23 @@
+{
+  "template": "<FormGroup{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "fullWidth": false
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "fullWidth"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,36 @@
+{
+  "template": "<FormPill{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "textTransform": "none",
+    "color": "primary",
+    "wrapped": false
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "text",
+        "name",
+        "onClick",
+        "avatar",
+        "avatarUrl",
+        "size",
+        "textTransform",
+        "color",
+        "tabIndex",
+        "icon",
+        "wrapped",
+        "closeProps"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,29 @@
+{
+  "template": "<Hashtag{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "newWindow": false,
+    "type": "default"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "newWindow",
+        "rel",
+        "target",
+        "text",
+        "type",
+        "url"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,22 @@
+{
+  "template": "<Highlight{{props}} />",
+  "propTargets": {},
+  "defaults": {},
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "text",
+        "highlightedText"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,37 @@
+{
+  "template": "<HomeAddressStreet{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "preserveCase": false,
+    "emphasis": "street",
+    "newWindow": false
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "address",
+        "addressCont",
+        "city",
+        "preserveCase",
+        "emphasis",
+        "homeId",
+        "houseStyle",
+        "homeUrl",
+        "target",
+        "newWindow",
+        "state",
+        "zipcode",
+        "territory"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,115 @@
+{
+  "template": "<Icon{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "border": false,
+    "fixedWidth": true,
+    "inverse": false,
+    "listItem": false,
+    "pulse": false,
+    "fontStyle": "far",
+    "spin": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "icon"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "color",
+        "fontStyle",
+        "fixedWidth"
+      ]
+    },
+    {
+      "name": "Transform",
+      "props": [
+        "flip",
+        "rotation",
+        "spin",
+        "pulse",
+        "pull",
+        "border",
+        "inverse",
+        "listItem",
+        "tabIndex"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "User",
+      "props": {
+        "icon": "user"
+      }
+    },
+    {
+      "name": "Check",
+      "props": {
+        "icon": "check",
+        "color": "primary"
+      }
+    },
+    {
+      "name": "Times",
+      "props": {
+        "icon": "times",
+        "color": "error"
+      }
+    },
+    {
+      "name": "Plus",
+      "props": {
+        "icon": "plus"
+      }
+    },
+    {
+      "name": "Search",
+      "props": {
+        "icon": "search"
+      }
+    },
+    {
+      "name": "Large",
+      "props": {
+        "icon": "user",
+        "size": "lg"
+      }
+    },
+    {
+      "name": "2x size",
+      "props": {
+        "icon": "check",
+        "size": "2x"
+      }
+    },
+    {
+      "name": "3x size",
+      "props": {
+        "icon": "search",
+        "size": "3x"
+      }
+    },
+    {
+      "name": "Solid (fas)",
+      "props": {
+        "icon": "star",
+        "fontStyle": "fas"
+      }
+    },
+    {
+      "name": "Spinning",
+      "props": {
+        "icon": "sync",
+        "spin": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,60 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["icon"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size", "color", "fontStyle", "fixedWidth"]
+    },
+    {
+      "name": "Transform",
+      "props": ["flip", "rotation", "spin", "pulse", "pull", "border", "inverse", "listItem", "tabIndex"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "User",
+      "props": { "icon": "user" }
+    },
+    {
+      "name": "Check",
+      "props": { "icon": "check", "color": "primary" }
+    },
+    {
+      "name": "Times",
+      "props": { "icon": "times", "color": "error" }
+    },
+    {
+      "name": "Plus",
+      "props": { "icon": "plus" }
+    },
+    {
+      "name": "Search",
+      "props": { "icon": "search" }
+    },
+    {
+      "name": "Large",
+      "props": { "icon": "user", "size": "lg" }
+    },
+    {
+      "name": "2x size",
+      "props": { "icon": "check", "size": "2x" }
+    },
+    {
+      "name": "3x size",
+      "props": { "icon": "search", "size": "3x" }
+    },
+    {
+      "name": "Solid (fas)",
+      "props": { "icon": "star", "fontStyle": "fas" }
+    },
+    {
+      "name": "Spinning",
+      "props": { "icon": "sync", "spin": true }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,33 @@
+{
+  "template": "<IconButton{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "icon": "bars",
+    "newWindow": false,
+    "size": "2x",
+    "variant": "default"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "htmlType",
+        "icon",
+        "link",
+        "newWindow",
+        "onClick",
+        "size",
+        "target",
+        "variant"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -0,0 +1,26 @@
+{
+  "template": "<IconCircle{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "size": "md",
+    "variant": "default"
+  },
+  "groups": [
+    {
+      "name": "Props",
+      "props": [
+        "icon",
+        "size",
+        "variant"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}