playbook_ui_docs 14.7.0.pre.alpha.PBNTR667railstypeaheadformintegration4454 → 14.7.0.pre.alpha.spacingquickchange4482

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 14d083c9c6fd4c5929ba49590b4c1e62f2a3839d434f618e017a953efc5c859e
-  data.tar.gz: 4259298458e01f8cf3e2bc7d382acb6e1bb953a30ead1e493f64ec290b487b72
+  metadata.gz: 305905fca6bab9e8fffdf4dee21a81a04172d8a3c47b25346af358c072791ea0
+  data.tar.gz: 98c608e407e99720a465f680009e7ff3b778023c3ce0a68da3be904a3df3654d
 SHA512:
-  metadata.gz: c9659f70947a8541ae8c2d7d0640186948582eddb18a7881042a9f5c2ad854aa0b964f0c3bcbc47199c0a7894e9e61e578ee458bdebe47f63f5e47b70e85bb3a
-  data.tar.gz: f404e5e2129e6de4fdc4759fc15d3d9ea298a721779a84aa2e405130f00a67337060e7a4b44f8fc26620a138deb21bec039e2e07a398512074f33c56dc45501b
+  metadata.gz: e050d379ce8c0ad37201304b3abc2efc512e0af9e497d5e6056b3e378d849f77d28a905918090f337365d70ed59477fe501709c8bd61541447c83b275ef74345
+  data.tar.gz: a6ade754cb45d89d373bbc501870d0213072d3b8393776358005b374609168dd3d400411f82bfa2f4bfcc740528a660a05cfaede6e5adf4fb48a70b176663494

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -1 +1 @@
-Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>  

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb

@@ -0,0 +1,26 @@
+<% initial_items = [
+  {
+    id: "1",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "2",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "3",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex") do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md

@@ -0,0 +1,7 @@
+The `draggable` kit gives you a full subcomponent structure that allows it to be used with almost any kit.
+
+`initial_items` is a REQUIRED prop, which is the array of objects that contains data for the the draggable items.
+ 
+`draggable/draggable_container` = This specifies the container within which items can be dropped.
+
+`draggable/draggable_item` = This specifies the items that can be dragged and dropped. `drag_id` is a REQUIRED prop for draggable_item and must match the id on the items within `initial_items`.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb

@@ -0,0 +1,38 @@
+<% initial_items = [
+  { id: "21", name: "Joe Black" },
+  { id: "22", name: "Nancy White" },
+  { id: "23", name: "Bill Green" },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <% initial_items.each do |item| %>
+      <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
+          <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
+            <%= pb_rails("flex", props:{gap: "xs"}) do %>
+              <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
+              <%= pb_rails("badge", props: {text:"35-12345" ,variant: "primary"}) %>
+            <% end %>
+            <%= pb_rails("caption", props: { size: "xs", text: "8:00A • Township Name • 90210" }) %>
+            <%= pb_rails("flex", props:{gap: "xxs", spacing:"between"}) do %>
+              <%= pb_rails("flex", props:{gap: "xxs"}) do %>
+                <%= pb_rails("caption", props: { size: "xs" , color: "error" }) do %>
+                  <%= pb_rails("icon", props: { icon: "house-circle-exclamation", fixed_width: true }) %>
+                <% end %>
+                <%= pb_rails("caption", props: { size: "xs" , color: "success" }) do %>
+                  <%= pb_rails("icon", props: { icon: "file-circle-check", fixed_width: true }) %>
+                <% end %>
+              <% end %>
+              <%= pb_rails("flex") do %>
+                <%= pb_rails("badge", props: {text:"Schedule QA" ,variant: "warning", rounded: true}) %>
+                <%= pb_rails("badge", props: {text:"Flex" ,variant: "primary", rounded: true}) %>
+                <%= pb_rails("badge", props: {text:"R99" ,variant: "primary", rounded: true}) %>
+            <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb

@@ -0,0 +1,19 @@
+<% initial_items = [
+  { id: "31", name: "Philadelphia" },
+  { id: "32", name: "New Jersey" },
+  { id: "33", name: "Maryland" },
+  { id: "34", name: "Connecticut" },
+
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("list", props: {ordered: false}) do %>
+        <% initial_items.each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+                <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -8,4 +8,10 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_multiple_containers: Dragging Across Multiple Containers
   
+  rails:
+  - draggable_default_rails: Default
+  - draggable_with_list_rails: Draggable with List Kit
+  - draggable_with_cards_rails: Draggable with Cards
+
+
   

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

@@ -23,7 +23,7 @@
 %>
 
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
-  <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
+  <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
@@ -92,7 +92,7 @@
     const selectedUserData = JSON.parse(selectedUserJSON)
 
     // set the input field's value
-    event.target.querySelector('input[name=example_typeahead]').value = selectedUserData.login
+    event.target.querySelector('input[name=example_user]').value = selectedUserData.login
 
     // log the selected option's dataset
     console.log('The selected user data:')

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

@@ -1,5 +1,5 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
-  <%= form.text_field :example_text_field_loading, props: { label: true } %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -22,74 +22,23 @@
 %>
 
 <%= 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, validation: { message: "Please select a user." } } %>
-  <%= 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" } %>
-  <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
-  <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
-  <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
-  <%= form.password_field :example_password_field_validation, props: { label: true, required: true } %>
-  <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
-  <%= 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.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
-  <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.text_field :example_text_field, props: { label: true, required: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
+  <%= form.email_field :example_email_field, props: { label: true, required: true } %>
+  <%= form.number_field :example_number_field, props: { label: true, required: true } %>
+  <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
+  <%= form.password_field :example_password_field, props: { label: true, required: true } %>
+  <%= form.url_field :example_url_field, props: { label: true, required: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true } %>
+  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
+  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
-  <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
+  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
 <% end %>
-
-<!-- form.typeahead user results example template -->
-<template data-typeahead-example-result-option>
-  <%= pb_rails("user", props: {
-    name: tag(:slot, name: "name"),
-    orientation: "horizontal",
-    align: "left",
-    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
-    avatar: true
-    }) %>
-</template>
-
-<!-- form.typeahead JS example implementation -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return
-
-    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
-      .then(response => response.json())
-      .then((result) => {
-        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
-
-        event.detail.setResults((result.items || []).map((user) => {
-          const wrapper = resultOptionTemplate.content.cloneNode(true)
-          wrapper.children[0].dataset.user = JSON.stringify(user)
-          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
-          wrapper.querySelector('img').dataset.src = user.avatar_url
-          return wrapper
-        }))
-      })
-  })
-
-
-  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
-    if (!event.target.dataset.typeaheadExample2) return
-
-    const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
-    const selectedUserData = JSON.parse(selectedUserJSON)
-
-    // set the input field's value
-    event.target.querySelector('input[name=example_typeahead_validation]').value = selectedUserData.login
-
-    // log the selected option's dataset
-    console.log('The selected user data:')
-    console.dir(selectedUserData)
-
-    // do even more with the data later - TBD
-    event.target.dataset.user = selectedUserJSON
-  })
-<% end %>