RubyGems - playbook_ui - Versions diffs - 14.21.1 → 14.21.2.pre.alpha.PLAY2005useClickpropreact8411 - Mend

playbook_ui 14.21.1 → 14.21.2.pre.alpha.PLAY2005useClickpropreact8411

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx CHANGED Viewed

@@ -6,15 +6,18 @@ const DropdownSeparatorsHidden = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
   ];

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx CHANGED Viewed

@@ -7,15 +7,18 @@ const DropdownSubcomponentStructure = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
   ];

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb CHANGED Viewed

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb CHANGED Viewed

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx CHANGED Viewed

@@ -6,15 +6,18 @@ const DropdownSubtleVariant = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
   ];

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb CHANGED Viewed

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "United Kingdom",
-      value: "United Kingdom",
+      value: "unitedKingdom",
       areaCode: "+44",
       icon: "🇬🇧",
       id: "gb"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx CHANGED Viewed

@@ -7,21 +7,21 @@ const DropdownWithAutocomplete = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "United Kingdom",
-      value: "United Kingdom",
+      value: "unitedKingdom",
       areaCode: "+44",
       icon: "🇬🇧",
       id: "gb"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb CHANGED Viewed

@@ -2,7 +2,7 @@
    options = [
     {
       label: "Jasper Furniss",
-      value: "Jasper Furniss",
+      value: "jasperFurniss",
       territory: "PHL",
       title: "Lead UX Engineer",
       id: "jasper-furniss",
@@ -10,7 +10,7 @@
     },
     {
       label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
+      value: "ramonRuiz",
       territory: "PHL",
       title: "Senior UX Designer",
       id: "ramon-ruiz",
@@ -18,7 +18,7 @@
     },
     {
       label: "Carlos Lima",
-      value: "Carlos Lima",
+      value: "carlosLima",
       territory: "PHL",
       title: "Nitro Developer",
       id: "carlos-lima",
@@ -26,7 +26,7 @@
     },
     {
       label: "Courtney Long",
-      value: "Courtney Long",
+      value: "courtneyLong",
       territory: "PHL",
       title: "Lead UX Designer",
       id: "courtney-long",

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx CHANGED Viewed

@@ -11,7 +11,7 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
   const options = [
     {
       label: "Jasper Furniss",
-      value: "Jasper Furniss",
+      value: "jasperFurniss",
       territory: "PHL",
       title: "Lead UX Engineer",
       id: "jasper-furniss",
@@ -19,7 +19,7 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
     },
     {
       label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
+      value: "ramonRuiz",
       territory: "PHL",
       title: "Senior UX Designer",
       id: "ramon-ruiz",
@@ -27,7 +27,7 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
     },
     {
       label: "Carlos Lima",
-      value: "Carlos Lima",
+      value: "carlosLima",
       territory: "PHL",
       title: "Nitro Developer",
       id: "carlos-lima",
@@ -35,7 +35,7 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
     },
     {
       label: "Courtney Long",
-      value: "Courtney Long",
+      value: "courtneyLong",
       territory: "PHL",
       title: "Lead UX Designer",
       id: "courtney-long",

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx CHANGED Viewed

@@ -14,7 +14,7 @@ const DropdownWithCustomDisplay = (props) => {
   const options = [
     {
       label: "Jasper Furniss",
-      value: "Jasper Furniss",
+      value: "jasperFurniss",
       territory: "PHL",
       title: "Lead UX Engineer",
       id: "jasper-furniss",
@@ -22,7 +22,7 @@ const DropdownWithCustomDisplay = (props) => {
     },
     {
       label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
+      value: "ramonRuiz",
       territory: "PHL",
       title: "Senior UX Designer",
       id: "ramon-ruiz",
@@ -30,7 +30,7 @@ const DropdownWithCustomDisplay = (props) => {
     },
     {
       label: "Carlos Lima",
-      value: "Carlos Lima",
+      value: "carlosLima",
       territory: "PHL",
       title: "Nitro Developer",
       id: "carlos-lima",
@@ -38,7 +38,7 @@ const DropdownWithCustomDisplay = (props) => {
     },
     {
       label: "Courtney Long",
-      value: "Courtney Long",
+      value: "courtneyLong",
       territory: "PHL",
       title: "Lead UX Designer",
       id: "courtney-long",

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb CHANGED Viewed

@@ -2,7 +2,7 @@
    options = [
     {
       label: "Jasper Furniss",
-      value: "Jasper Furniss",
+      value: "jasperFurniss",
       territory: "PHL",
       title: "Lead UX Engineer",
       id: "jasper-furniss",
@@ -10,7 +10,7 @@
     },
     {
       label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
+      value: "ramonRuiz",
       territory: "PHL",
       title: "Senior UX Designer",
       id: "ramon-ruiz",
@@ -18,7 +18,7 @@
     },
     {
       label: "Carlos Lima",
-      value: "Carlos Lima",
+      value: "carlosLima",
       territory: "PHL",
       title: "Nitro Developer",
       id: "carlos-lima",
@@ -26,7 +26,7 @@
     },
     {
       label: "Courtney Long",
-      value: "Courtney Long",
+      value: "courtneyLong",
       territory: "PHL",
       title: "Lead UX Designer",
       id: "courtney-long",

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.html.erb ADDED Viewed

@@ -0,0 +1,52 @@
+<%
+  options = [
+    { label: "Item 1", value: "item-1", id: "1" },
+    { label: "Item 2", value: "item-2", id: "2" },
+    { label: "Item 3", value: "item-3", id: "3" }
+  ]
+%>
+<%= pb_rails("dropdown", props: { label: "Multiple Icons", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger") %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+          <%= pb_rails("flex") do %>
+            <%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
+            <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
+          <% end %>
+          <%= pb_rails("icon", props: { icon: "check" }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+<%= pb_rails("dropdown", props: { label: "Icon on Left", options: options, padding_y: "md" }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger") %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center" }) do %>
+          <%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
+          <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+<%= pb_rails("dropdown", props: { label: "Icon on Right", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger") %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+          <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
+          <%= pb_rails("icon", props: { icon: "check" }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx ADDED Viewed

@@ -0,0 +1,99 @@
+import React from 'react'
+import Dropdown from '../_dropdown'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import Icon from '../../pb_icon/_icon'
+const DropdownCustomIconOptions = (props) => {
+  const options = [
+    { label: "Item 1", value: "item-1", id: "1" },
+    { label: "Item 2", value: "item-2", id: "2" },
+    { label: "Item 3", value: "item-3", id: "3" },
+  ]
+  return (
+  <div>
+      <Dropdown label="Multiple Icons"
+          options={options}
+          {...props}
+      >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id}
+              option={option}
+          >
+            <Flex align="center"
+                justify="between"
+            >
+                <Flex align="center">
+                  <Icon icon="calendar"
+                      paddingRight="xs"
+                      {...props}
+                  />
+                  <Body color="default"
+                      text={option.label}
+                      {...props}
+                  />
+                </Flex>
+                <Icon icon="check"
+                    {...props}
+                />
+            </Flex>
+          </Dropdown.Option>
+        ))}
+      </Dropdown>
+      <Dropdown label="Icon on Left"
+          options={options}
+          paddingY="md"
+          {...props}
+      >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id}
+              option={option}
+          >
+            <Flex align="center">
+              <Icon icon="calendar"
+                  paddingRight="xs"
+                  {...props}
+              />
+              <Body color="default"
+                  text={option.label}
+                  {...props}
+              />
+            </Flex>
+          </Dropdown.Option>
+        ))}
+      </Dropdown>
+      <Dropdown label="Icon on Right"
+          options={options}
+          {...props}
+      >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id}
+              option={option}
+          >
+            <Flex align="center"
+                justify="between"
+            >
+              <Flex align="center">
+                <Body color="default"
+                    text={option.label}
+                    {...props}
+                />
+              </Flex>
+              <Icon icon="check"
+                  {...props}
+              />
+            </Flex>
+          </Dropdown.Option>
+        ))}
+      </Dropdown>
+  </div>
+  )
+}
+export default  DropdownCustomIconOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Use the `dropdown/dropdown_option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Use the `Dropdown.Option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx CHANGED Viewed

@@ -12,21 +12,21 @@ const DropdownWithCustomOptions = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "United-states"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "canada"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pakistan"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb CHANGED Viewed

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb CHANGED Viewed

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx CHANGED Viewed

@@ -6,21 +6,21 @@ const DropdownWithCustomPadding = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "United-states"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "canada"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pakistan"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.html.erb ADDED Viewed

@@ -0,0 +1,28 @@
+<%
+  options = [
+    { label: "Item 1", value: "item-1", id: "1" },
+    { label: "Item 2", value: "item-2", id: "2" },
+    { label: "Item 3", value: "item-3", id: "3" }
+  ]
+  selected_value = params[:selected_value]
+%>
+<%= pb_rails("dropdown", props: { label: "Choose Item", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger") %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <% checked = (option[:value] == selected_value) %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center" }) do %>
+          <%= pb_rails("radio", props: {
+            text: option[:label],
+            name: "dropdown_radio",
+            value: option[:value],
+            checked: checked,
+          }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx ADDED Viewed

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import Dropdown from '../_dropdown'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import Radio from '../../pb_radio/_radio'
+const DropdownCustomRadioOptions = (props) => {
+  const [selectedValue, setSelectedValue] = useState(null)
+  const options = [
+    { label: "Item 1", value: "item-1", id: "1" },
+    { label: "Item 2", value: "item-2", id: "2" },
+    { label: "Item 3", value: "item-3", id: "3" },
+  ]
+  return (
+  <div>
+      <Dropdown
+          label="Select Item"
+          onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
+          options={options}
+          {...props}
+      >
+        {options.map((option) => {
+          return (
+            <Dropdown.Option key={option.id}
+                option={option}
+            >
+              <Flex align="center">
+                <Radio
+                    checked={selectedValue === option.value}
+                    name="dropdown_radio"
+                    value={option.value}
+                />
+                <Body text={option.label} />
+              </Flex>
+            </Dropdown.Option>
+          )
+        })}
+      </Dropdown>
+  </div>
+  )
+}
+export default  DropdownCustomRadioOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Radio inputs can be used inside `dropdown/dropdown_option` for a custom layout that mimics form-like selection within a dropdown.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx CHANGED Viewed

@@ -14,21 +14,21 @@ const [selectedOption, setSelectedOption] = useState();
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "United-states"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "canada"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pakistan"