playbook_ui_docs 14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348 → 14.14.0.pre.alpha.PBNTR890typeahead6390

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a15579a24e261985e92c9cef33dbe5adfcbf355b032e0f25a83ba30706edf8e1
-  data.tar.gz: fc91e1b02b3fe001646924a53a05c768e3630f2d1894be024e4a675faaec9371
+  metadata.gz: cf1194400657803a6f582266d93a060747e8d6ac3a59ff2b8d20819b520e8694
+  data.tar.gz: 87633273b9ffad2301c21c689973629e0f6370591b5e1c87efc63cfba9a28996
 SHA512:
-  metadata.gz: 557c05f3cbd5cdb32f2aeec3088de4a208a7ff2c074e992dfadde6e12c1c22acd3b4c0d040457f602c132fd36ce539d405fd42e96d0b3fc62bcec01ae3deb36f
-  data.tar.gz: '09aedda15bb4e39bb7539abe3bed656f94bb10e3cc4c992f636df8d238887ae999e0e881bb8191d15e4a5f309dad2b36dc85b1144109759992735b05253537c7'
+  metadata.gz: 929b91f957d43112e7304ef565b350e586a01b84a2809bf9ea241a9e745307a60b2dfef15c20ba0fe9f265278bca9e51cf56504ce3a29b3f8cfd9c82c5d5f492
+  data.tar.gz: 585616c877f906ac125a94cbf8c383c80994b6bb685c38d08f306bf27121a77d532a36226899543dd42155dd0990259b2e8e6576f96030ff86093b173b8166c3

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("button", props: { text: "Push Drawer", margin_right: "sm", data: {"open-drawer": "drawer-3"} }) %>
+
+<%= pb_rails("drawer", props: { 
+    id:"drawer-3", 
+    behavior: "push"
+}) do  %>
+    Test me (Push Behavior)
+<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-12", 
+        overlay: false,
+        border: "right"
+    }) do  %>
+        Test me (Border Right)
+    <% end %>
+    
+    
+    <%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-13", 
+        overlay: false,
+        border: "left"
+    }) do  %>
+        Test me (Border Left)
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-14", 
+        overlay: false,
+        border: "full"
+    }) do  %>
+        Test me (Border Full)
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb

@@ -1 +1,20 @@
-<%= pb_rails("drawer") %>
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-1", 
+    }) do  %>
+        Test me (Left Drawer)
+    <% end %>
+    
+    
+    <%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-2", 
+        placement: "right"
+    }) do  %>
+        Test me (Right Drawer)
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
+    <%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
+<% end %>
+
+<%= pb_rails("drawer", props: { 
+    id:"drawer-4", 
+    within_element: true,
+    placement: "bottom",
+    breakpoint: "md",
+    size: "full"
+}) do  %>
+    <%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
+        <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
+        <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
+    <% end %>
+    <%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
+        <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+        <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
+        <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-10", 
+        overlay: false
+    }) do  %>
+        Test me (No Overlay)
+    <% end %>
+    
+    
+    <%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
+    
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-11", 
+        placement: "right"
+    }) do  %>
+        Test me (Has Overlay)
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md

@@ -0,0 +1 @@
+Click the button to close the drawer when there is no overlay.

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb

@@ -0,0 +1,49 @@
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-5", 
+        size: "xs"
+    }) do  %>
+        XS 
+    <% end %>
+    
+    <%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-6", 
+        size: "sm",
+        placement: "right"
+    }) do  %>
+        This is a small drawer 
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-7", 
+        size: "md"
+    }) do  %>
+        This is a medium drawer 
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-8", 
+        size: "lg",
+        placement: "right"
+    }) do  %>
+        This is a large drawer 
+    <% end %>
+
+    <%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
+
+    <%= pb_rails("drawer", props: { 
+        id:"drawer-9", 
+        size: "xl"
+    }) do  %>
+        This is an extra large drawer 
+    <% end %>
+<% end %>
+

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

@@ -2,6 +2,11 @@ examples:
   
   rails:
   - drawer_default: Default
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_borders: Borders 
   
   
   react:

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", dynamic: true }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md

@@ -0,0 +1 @@
+Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar.

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

@@ -8,4 +8,5 @@ examples:
   rails:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
+  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle

data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb

@@ -1,10 +1,9 @@
 <%= pb_rails("title", props: {
+    margin_bottom: "md"
 })  do %>
     Default Title
 <% end %>
 
-<br/>
-
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx

@@ -6,10 +6,10 @@ const TitleDefault = (props) => {
   return (
     <div>
       <Title
+          marginBottom='md'
           text="Default Title"
           {...props}
       />
-      <br />
       <Title
           size={1}
           tag="h1"

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("title", props: { text: "Display Size xs", tag: "h1", display_size: "xs" }) %>
+<%= pb_rails("title", props: { text: "Display Size sm", tag: "h1", display_size: "sm" }) %>
+<%= pb_rails("title", props: { text: "Display Size md", tag: "h1", display_size: "md" }) %>
+<%= pb_rails("title", props: { text: "Display Size lg", tag: "h1", display_size: "lg" }) %>
+<%= pb_rails("title", props: { text: "Display Size xl", tag: "h1", display_size: "xl" }) %>
+<%= pb_rails("title", props: { text: "Display Size xxl", tag: "h1", display_size: "xxl" }) %>
+<%= pb_rails("title", props: { text: "This is a size of display", tag: "h1", size: "display"}) %>

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleDisplaySize = (props) => {
+  return (
+    <div>
+      <Title
+          displaySize="xs"
+          tag="h1"
+          text="Display Size xs"
+          {...props}
+      />
+      <Title
+          displaySize="sm"
+          tag="h1"
+          text="Display Size sm"
+          {...props}
+      />
+      <Title
+          displaySize="md"
+          tag="h1"
+          text="Display Size md"
+          {...props}
+      />
+      <Title
+          displaySize="lg"
+          tag="h1"
+          text="Display Size lg"
+          {...props}
+      />
+      <Title
+          displaySize="xl"
+          tag="h1"
+          text="Display Size xl"
+          {...props}
+      />
+      <Title
+          displaySize="xxl"
+          tag="h1"
+          text="Display Size xxl"
+          {...props}
+      />
+      <Title
+          size="display"
+          tag="h1"
+          text="This is a size of display"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleDisplaySize

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md

@@ -0,0 +1 @@
+Responsive sizes for large screens and tablets, perfect for digital signage.

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

@@ -5,6 +5,7 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
+  - title_display_size: Display Size
 
   react:
   - title_default: Default UI
@@ -12,3 +13,4 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
+  - title_display_size: Display Size

data/app/pb_kits/playbook/pb_title/docs/index.js

@@ -3,3 +3,4 @@ export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
 export { default as TitleResponsive } from './_title_responsive.jsx'
 export { default as TitleTruncate } from './_title_truncate.jsx'
+export { default as TitleDisplaySize } from './_title_display_size.jsx'

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
+  <% end %>
+
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-delay",
+      tooltip_id: "delay-tooltip",
+      position: 'top',
+      delay_open: 1000,
+      delay_close: 1000
+    }) do %>
+        1s open/close delay 
+  <% end %>
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-open-delay",
+      tooltip_id: "open-tooltip",
+      position: 'top',
+      delay_open: 1000
+    }) do %>
+        1s open delay 
+  <% end %>
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-close-delay",
+      tooltip_id: "close-tooltip",
+      position: 'top',
+      delay_close: 1000
+    }) do %>
+        1s close delay 
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md

@@ -0,0 +1,3 @@
+Waits for the specified time when the event listener runs before triggering the tooltip.
+
+The `delay_open` and `delay_close` accept numbers in milliseconds. 1 second is 1000 milliseconds.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
+  <%= pb_rails("flex/flex_item") do %>
+    <%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#tooltip-interaction",
+      tooltip_id: "tooltip-with-interaction",
+      position: 'top',
+      interaction: true
+    }) do %>
+        You can copy me
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item") do %>
+    <%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#tooltip-no-interaction",
+      tooltip_id: "tooltip-without-interaction",
+      position: 'top',
+    }) do %>
+        I'm just a regular tooltip
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -2,8 +2,10 @@ examples:
 
   rails:
   - tooltip_default: Default
+  - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
+  - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
 
   react:

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

@@ -0,0 +1,45 @@
+<%= pb_rails("select", props: {
+  id:"color_context_2",
+  label: "Choose a Color",
+  name: "color_name",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" }
+  ],
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  label: "Pick a Shade",
+  is_multi: false,
+  search_context_selector: "color_context_2",
+  options_by_context: {
+    "red":  [
+      { label: "Scarlet", value: "scarlet" },
+      { label: "Mahogany", value: "mahogany" },
+      { label: "Crimson", value: "crimson" }
+    ],
+    "blue": [
+      { label: "Sky Blue", value: "sky" },
+      { label: "Cerulean", value: "cerulean" },
+      { label: "Navy", value: "navy" }
+    ],
+    "green": [
+      { label: "Emerald", value: "emerald" },
+      { label: "Mint", value: "mint" },
+      { label: "Olive", value: "olive" }
+    ]
+  },
+  id: "typeahead-dynamic-options",
+}) %>
+
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

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

@@ -0,0 +1,5 @@
+You can also set up a typeahead to render options dynamically based on input from a select. To achieve this:
+- The typeahead must have a unique `id`
+- Use the `search_context_selector` prop on the typeahead. The value here must match the id of the select so the Typeahead knows where to read the current "context" from.
+- Use `options_by_context` to pass in a hash whose keys match the possible values of your “context” select. Each key maps to an array of { label, value } objects. The typeahead automatically displays only the subset of options matching the current context.
+- Additionally, the optional `clear_on_context_change` prop controls whether the typeahead clears or not when a change happens in the linked select. This prop is set to true by default so that whenever a selection is made in the select, the Typeahead automatically clears its current input/selection.

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

@@ -0,0 +1,33 @@
+<%= pb_rails("select", props: {
+  id:"color_context",
+  label: "Choose a Color",
+  name: "color_name_2",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" }
+  ],
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  label: "Pick a Shade",
+  search_context_selector: "color_context",
+  options_by_context: {
+    "red":  [
+      { label: "Scarlet", value: "scarlet" },
+      { label: "Mahogany", value: "mahogany" },
+      { label: "Crimson", value: "crimson" }
+    ],
+    "blue": [
+      { label: "Sky Blue", value: "sky" },
+      { label: "Cerulean", value: "cerulean" },
+      { label: "Navy", value: "navy" }
+    ],
+    "green": [
+      { label: "Emerald", value: "emerald" },
+      { label: "Mint", value: "mint" },
+      { label: "Olive", value: "olive" }
+    ]
+  },
+  search_term_minimum_length: 0,
+}) %>

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

@@ -0,0 +1,3 @@
+The dynamic rendering of options for the typeahead can also be achieved with a pure Rails implementation (not react rendered). For this implementation, use all the props as above with the following additions:
+
+- `search_term_minimum_length`: this sets the minimum input in the typeahead needed to display the dropdown. This is set to 3 by default. Set it to 0 for the dropdown to always display when the typeahead is interacted with. 

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

@@ -12,6 +12,8 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
+    - typeahead_dynamic_options: Dynamic Options
+    - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
 
   react:
     - typeahead_default: Default