playbook_ui 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713

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

@@ -1,45 +0,0 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "ca"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
-    }
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {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/flex_item") do %>
-                    <%= pb_rails("flex") do %>
-                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                    <% end %>
-                <% end %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1 +0,0 @@
-The Dropdown also allows for custom options that can be passed in as children to the `Dropdown.Option` subcomponent. If no children are passed to `Dropdown.Option`, the kit will render each option as text within a Body kit by default. 

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

@@ -1,17 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {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, padding:"sm"}) %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1,48 +0,0 @@
-import React from 'react'
-import { Dropdown } from '../..'
-
-const DropdownWithCustomPadding = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "United-states"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pakistan"
-    }
-  ];  
-
-
-  return (
-  <div>
-    <Dropdown
-        options={options}
-        {...props}
-    >
-      {options.map((option) => (
-        <Dropdown.Option key={option.id} 
-            option={option}
-            padding="sm"
-        /> 
-      ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownWithCustomPadding

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

@@ -1 +0,0 @@
-By default, the padding on each option in the dropdown is set to `xs`. The `padding` Global Props however can be used to override this default. In this example, we are setting padding to `sm`.

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

@@ -1,47 +0,0 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "ca"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
-    }
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) do %>
-    <%= pb_rails("dropdown/dropdown_trigger") do %>
-        <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
-    <% end %>
-    <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
-        <% options.each do |option| %>
-            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("flex") do %>
-                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                    <% end %>
-                <% end %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1 +0,0 @@
-The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit. 

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

@@ -1,59 +0,0 @@
-import React from 'react'
-import { Dropdown, useDropdown, Button } from '../../'
-
-const DropdownWithExternalControl = (props) => {
-const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "United-states"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pakistan"
-    }
-  ];  
-
-  return (
-  <div>
-    <Button
-        data={{dropdown:'pb-dropdown-trigger'}}
-        marginBottom='sm'
-        onClick={() => setIsDropdownClosed(!isDropDownClosed)}
-        padding="none"
-        tabIndex={0}
-        variant="link"
-    >
-      {isDropDownClosed ? "Open Dropdown" : "Close Dropdown"}
-    </Button>
-
-    <Dropdown
-        isClosed={isDropDownClosed}
-        options={options}
-        {...props}
-    >
-      {options.map((option) => (
-        <Dropdown.Option key={option.id} 
-            option={option}
-        /> 
-      ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownWithExternalControl

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

@@ -1,72 +0,0 @@
-import React, { useRef } from 'react'
-import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from '../..'
-
-const DropdownWithHook = (props) => {
-const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
-const buttonRef = useRef(null);
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "United-states"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pakistan"
-    }
-  ];  
-
-  return (
-  <div>
-      <CircleIconButton
-          htmlOptions={{ref: buttonRef}}
-          icon={"flag"}
-          onClick={() => setIsDropdownClosed(!isDropDownClosed)}
-          variant="secondary"
-      />
-    <Dropdown
-        isClosed={isDropDownClosed}
-        options={options}
-        triggerRef={buttonRef}
-        {...props}
-    >
-      {options.map((option) => (
-        <Dropdown.Option key={option.id} 
-            option={option}
-        > 
-        <>
-          <FlexItem>
-              <Flex paddingRight='md'>
-                <Icon icon={option.icon} 
-                    paddingRight="xs"
-                />
-                <Body text={option.label} />
-              </Flex>
-          </FlexItem>
-              <FlexItem>
-                <Body color="light" 
-                    text={option.areaCode} 
-                />
-              </FlexItem>
-            </>
-        </Dropdown.Option>
-      ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownWithHook

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

@@ -1,10 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>

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

@@ -1,39 +0,0 @@
-import React from 'react'
-import { Dropdown } from '../..'
-
-const DropdownDefault = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-    }
-  ];  
-
-
-  return (
-  <div>
-    <Dropdown
-        label="Select a Country"
-        options={options}
-        {...props}
-    >
-      {options.map((option) => (
-        <Dropdown.Option key={option.id} 
-            option={option}
-        /> 
-      ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownDefault

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

@@ -1 +0,0 @@
-The optional `label` prop takes a string value that if present will render that string as the label for the Dropdown.

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -1,21 +0,0 @@
-<%= pb_content_tag do %>
-    <% if object.label.present? %>
-        <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
-    <% end %>
-    <div class="dropdown_wrapper" style="position: relative">
-    <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value=""/>
-    <% if content.present? %>
-        <%= content.presence %>
-    <% else %>
-        <%= pb_rails("dropdown/dropdown_trigger") %>
-        <%= pb_rails("dropdown/dropdown_container") do %>
-            <% if object.options.present? %>
-                <% object.options.each do |option| %>
-                    <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-    </div>
-<% end %>
-  

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -1,20 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDropdown
-    class Dropdown < Playbook::KitBase
-      prop :options, type: Playbook::Props::Array,
-                     default: []
-      prop :label, type: Playbook::Props::String
-      prop :name, type: Playbook::Props::String
-
-      def data
-        Hash(prop(:data)).merge(pb_dropdown: true)
-      end
-
-      def classname
-        generate_classname("pb_dropdown")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -1,15 +0,0 @@
-<%= pb_content_tag(:div, style: object.container_style) do %>
-    <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
-            <% if content.present? %> 
-                <%= content.presence %>
-            <% else %> 
-                <%= pb_rails("list/item", props: {
-                    display: "flex", 
-                    justify_content: "center", 
-                    padding:"xs", 
-                    }) do %> 
-                        <%= pb_rails("body", props: {text: "No option"}) %>
-                <% end %>
-            <% end %>
-    <% end %>        
-<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb

@@ -1,19 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDropdown
-    class DropdownContainer < Playbook::KitBase
-      def classname
-        generate_classname("pb_dropdown_container", "close", separator: " ")
-      end
-
-      def container_style
-        "position: absolute"
-      end
-
-      def data
-        Hash(prop(:data)).merge(dropdown_container: true)
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -1,22 +0,0 @@
-<%= pb_content_tag(:div, id:object.option[:id]) do %>
-    <%= pb_rails("list/item", props: {
-        display: "flex", 
-        justify_content: "center", 
-        padding:"none", 
-        cursor: "pointer"
-        }) do %> 
-            <%= pb_rails("flex", props: {
-                align: "center",
-                classname:"dropdown_option_wrapper",
-                justify: "between",
-                padding_x:"sm",
-                padding_y:"xxs",
-                }) do %>
-                <% if content.present? %>
-                    <%= content.presence %>
-                <% else %>
-                    <%= pb_rails("body", props: {text: object.option[:label]}) %>
-                <% end %>
-            <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb

@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDropdown
-    class DropdownOption < Playbook::KitBase
-      prop :option, type: Playbook::Props::String
-      prop :id, type: Playbook::Props::String
-
-      def data
-        Hash(prop(:data)).merge("dropdown_option_label": option)
-      end
-
-      def padding_helper
-        " p_xs"
-      end
-
-      def classname
-        generate_classname("pb_dropdown_option", "list") + padding_helper
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -1,38 +0,0 @@
-<%= pb_content_tag do %>
-    <% if content.present? %>
-        <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
-          <%= content.presence %>
-        </div>
-    <% else %>
-    <%= pb_rails("flex", props: {
-        align: "center", 
-        border_radius:"lg", 
-        classname: object.trigger_wrapper_classes, 
-        cursor: "pointer", 
-        justify: "between", 
-        padding_x:"sm", 
-        padding_y:"xs",
-        html_options: {tabindex:"0"}
-        }) do %>
-        <%= pb_rails("flex/flex_item") do %>
-            <%= pb_rails("flex", props: {align: "center"}) do %>
-                <% if object.custom_display.present?  %>
-                    <%= pb_rails("flex", props: {align: "center"}) do %>
-                        <div id="dropdown_trigger_custom_display" style="display: none;"> 
-                            <%= object.custom_display %>
-                        </div>
-                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
-                    <% end %>
-                <% else %>
-                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
-                <% end %>
-            <% end %>
-        <% end %>
-            <%= pb_rails("body", props: {display: "flex"}) do  %>
-                <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", id: "dropdown_open_icon"}) %>
-                <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", id: "dropdown_close_icon"}) %>
-            <% end %>
-    <% end %>
-    <% end %>
-<% end %>
-      

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb

@@ -1,30 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDropdown
-    class DropdownTrigger < Playbook::KitBase
-      prop :options, type: Playbook::Props::Array,
-                     default: []
-      prop :id, type: Playbook::Props::String,
-                default: ""
-      prop :placeholder, type: Playbook::Props::String
-      prop :custom_display
-
-      def data
-        Hash(prop(:data)).merge(dropdown_trigger: true)
-      end
-
-      def classname
-        generate_classname("pb_dropdown_trigger")
-      end
-
-      def default_display_placeholder
-        placeholder || "Select..."
-      end
-
-      def trigger_wrapper_classes
-        generate_classname("dropdown_trigger_wrapper", "select_only")
-      end
-    end
-  end
-end