playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.html.erb

@@ -0,0 +1,93 @@
+<%
+  options = [
+    {
+      label: "Jasper Furniss",
+      value: "jasperFurniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "ramonRuiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Unavailable",
+      disabled: true
+    },
+    {
+      label: "Carlos Lima",
+      value: "carlosLima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "courtneyLong",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ]
+%>
+
+<%
+  custom_display = capture do
+    pb_rails("flex", props: { align: "center" }) do
+      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
+      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
+      concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
+    end
+  end
+%>
+
+<%= pb_rails("dropdown", props: { id: "user-dropdown-disabled-options", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger", props: { placeholder: "Select a User", custom_display: custom_display }) %>
+  <%= 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/flex_item") do %>
+            <%= pb_rails("user", props: { name: option[:label], align: "left", avatar: true, orientation: "horizontal", territory: option[:territory], title: option[:title] }) %>
+          <% end %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("badge", props: { rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script>
+  document.addEventListener("pb:dropdown:selected", (e) => {
+    if (e.target.id !== "user-dropdown-disabled-options") return;
+
+    const option = e.detail;
+    const dropdown = e.target;
+    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
+    if (!display) return;
+
+    const nameEl = display.querySelector("#dropdown-avatar-name");
+    if (nameEl) nameEl.textContent = option.label;
+
+    const avatarWrapper = display.querySelector("#dropdown-avatar .avatar_wrapper");
+    if (avatarWrapper) {
+      const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
+      avatarWrapper.dataset.name = option.label;
+      avatarWrapper.setAttribute("data-initials", initials);
+    }
+
+    const badgeEl = display.querySelector("#dropdown-avatar-status");
+    const variant = option.status === "Online" ? "success" : option.status === "Offline" ? "neutral" : "warning";
+    if (badgeEl) {
+      badgeEl.querySelector("span").textContent = option.status;
+      badgeEl.className = `pb_badge_kit_${variant}`;
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.jsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import User from '../../pb_user/_user'
+import Body from '../../pb_body/_body'
+
+const DropdownCustomDisplayDisabledOption = (props) => {
+  const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "Jasper Furniss",
+      value: "jasperFurniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "ramonRuiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Unavailable",
+      disabled: true
+    },
+    {
+      label: "Carlos Lima",
+      value: "carlosLima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "courtneyLong",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ];
+
+  const CustomDisplay = () => {
+    return (
+      <>
+      {
+        selectedOption && (
+          <Flex align="center">
+            <Avatar
+                name={selectedOption.label}
+                size="xs"
+            />
+            <Body 
+                marginX="xs"
+                text={selectedOption.label} 
+            />
+            <Badge 
+                text={selectedOption.status} 
+                variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
+            />
+          </Flex>
+        )
+      }
+    </>
+    )
+  };
+
+
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger customDisplay={<CustomDisplay/>}
+          placeholder="Select a User"
+      />
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <Flex
+                align="center"
+                justify="between"
+            >
+              <FlexItem>
+                <User
+                    align="left"
+                    avatar
+                    name={option.label}
+                    orientation="horizontal"
+                    territory={option.territory}
+                    title={option.title}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Badge dark
+                    rounded
+                    text={option.status}
+                    variant={`${
+                        option.status === "Offline"
+                        ? "neutral"
+                    : option.status === "Unavailable"
+                    ? "warning"
+                        : option.status === "Online"
+                        ? "success"
+                        : "warning"
+                    }`}
+                />
+              </FlexItem>
+            </Flex>
+          </Dropdown.Option>
+        ))}
+    </Dropdown>
+  </div>
+  )
+}
+
+export default DropdownCustomDisplayDisabledOption

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.md

@@ -0,0 +1 @@
+To disable individual items in the `options`, include `disabled: true` within the object on the option that you want disabled. See the code snippet below for an example of how to do this.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {id: "dropdown-disabled", disabled: true,label: "Default Dropdown", options: options}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import Dropdown from '../_dropdown'
+
+const DropdownDisabled = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        disabled
+        label="Default Dropdown"
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownDisabled

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.html.erb

@@ -0,0 +1,10 @@
+<%
+  options = [
+    { label: "Available Option", value: "available", id: "available-option" },
+    { label: "Coming Soon", value: "coming-soon", id: "coming-soon", disabled: true },
+    { label: "Another Available", value: "another-available", id: "another-available" },
+    { label: "Locked Feature", value: "locked-feature", id: "locked-feature", disabled: true },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: { label: "Disabled Options", options: options }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Caption from '../../pb_caption/_caption'
+
+const DropdownDisabledOption = (props) => {
+  const [selectedOption, setSelectedOption] = useState()
+
+  const options = [
+    { label: 'Available Option', value: 'available', id: 'available-option' },
+    { label: 'Coming Soon', value: 'coming-soon', id: 'coming-soon', disabled: true },
+    { label: 'Another Available', value: 'another-available', id: 'another-available' },
+    { label: 'Locked Feature', value: 'locked-feature', id: 'locked-feature', disabled: true },
+  ]
+
+  return (
+    <div>
+      <Caption
+          text="Select an option. Disabled options remain visible but cannot be selected."
+      />
+      <Dropdown
+          onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+          options={options}
+          placeholder="Choose an option"
+          {...props}
+      />
+      {selectedOption && (
+        <Caption
+            marginTop="xs"
+            text={`Selected: ${selectedOption.label}`}
+        />
+      )}
+    </div>
+  )
+}
+
+export default DropdownDisabledOption

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.md

@@ -0,0 +1 @@
+To disable individual items in the `options`, include `disabled: true` within the object on the option that you want disabled. See the code snippet below for an example of how to do this.