playbook_ui_docs 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812
+  version: 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-05-03 00:00:00.000000000 Z
+date: 2024-04-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -293,8 +293,6 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default_swift.md
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error_swift.md
@@ -378,15 +376,12 @@ files:
 - app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx
-- app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md
 - app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx
-- app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md
 - app/pb_kits/playbook/pb_currency/docs/_currency_size.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_size.jsx
-- app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md
 - app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.md
@@ -502,8 +497,6 @@ files:
 - app/pb_kits/playbook/pb_date_range_inline/docs/index.js
 - app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx
-- app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md
-- app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md
 - app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_range_stacked/docs/index.js
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb
@@ -597,33 +590,10 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
 - app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
 - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
 - app/pb_kits/playbook/pb_dropdown/docs/example.yml
 - app/pb_kits/playbook/pb_dropdown/docs/index.js
 - app/pb_kits/playbook/pb_file_upload/docs/_description.md
@@ -1249,9 +1219,6 @@ files:
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.html.erb
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx
-- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb
-- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx
-- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.html.erb
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.html.erb
@@ -1286,8 +1253,6 @@ files:
 - app/pb_kits/playbook/pb_radio/docs/_radio_default.html.erb
 - app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx
 - app/pb_kits/playbook/pb_radio/docs/_radio_default_swift.md
-- app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb
-- app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx
 - app/pb_kits/playbook/pb_radio/docs/_radio_error.html.erb
 - app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx
 - app/pb_kits/playbook/pb_radio/docs/_radio_error.md

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb

@@ -1,23 +0,0 @@
-<%= pb_rails("flex", props: {orientation: "column"}) do %>
-    <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("checkbox" , props: {
-            input_options: { tabindex: 0 },
-            margin_bottom: "xs",
-            text: "Disabled unchecked",
-            value: "checkbox-value",
-            disabled: true,
-            name: "checkbox-name"
-        }) %>
-    <% end %>
-    <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("checkbox" , props: {
-            input_options: { tabindex: 0 },
-            text: "Disabled checked",
-            value: "checkbox-value",
-            disabled: true,
-            checked: true,
-            name: "checkbox-name"
-        }) %>
-    <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-
-import Checkbox from '../_checkbox'
-
-const CheckboxDisabled = (props) => {
-  return (
-    <div style={{ display: "flex", flexDirection: "column" }}>
-      <Checkbox
-          disabled
-          marginBottom="xs"
-          name="default name"
-          tabIndex={0}
-          text="Disabled unchecked"
-          value="default value"
-          {...props}
-      />
-      <Checkbox
-          checked
-          disabled
-          name="checkbox-name"
-          text="Disabled checked"
-          value="check-box value"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default CheckboxDisabled

data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md

@@ -1,43 +0,0 @@
-[!Currency-Alignment](https://github.com/powerhome/playbook-swift/assets/112719604/d74a9c5a-c606-4cd0-bf70-20e9297ec246)
-
-```swift
-VStack(alignment: .leading, spacing: Spacing.small) {
-  HStack {
-    PBCurrency(
-      amount: "2,000",
-      decimalAmount: ".50",
-      label: "left",
-      size: .title4,
-      symbol: "en_US",
-      isEmphasized: true,
-      alignment: .leading
-    )
-  }
-  .frame(maxWidth: .infinity, alignment: .leading)
-  HStack {
-    PBCurrency(
-      amount: "342",
-      decimalAmount: ".00",
-      label: "center",
-      size: .title4,
-      symbol: "en_EU",
-      isEmphasized: true,
-      alignment: .center
-    )
-  }
-  .frame(maxWidth: .infinity, alignment: .center)
-  HStack {
-    PBCurrency(
-      amount: "45",
-      label: "right",
-      size: .title4,
-      symbol: "en_US",
-      unit: "/mo",
-      isEmphasized: true,
-      hasUnit: true,
-      alignment: .trailing
-    )
-  }
-  .frame(maxWidth: .infinity, alignment: .trailing)
-}
-```

data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md

@@ -1,12 +0,0 @@
-### Props
-| Name | Type | Description | Default | Values |
-| --- | ----------- | --------- | --------- | --------- |
-| **amount** | `String` | Allows user to enter a currency amount | |  |
-| **decimalAmount** | `String` | Allows user to enter a decimal amount |  | |
-| **label** | `String` | Allows user to a descriptive label value |  | |
-| **size** | `PBFont` | Allows user to choose the size of the amount that is being displayed | `.title4` | `title4` `title3` `title4` |
-| **symbol** | `String` | A string value used to produce the desired currency symbol |  | |
-| **unit** | `String` | Allows user to add a unit of measure instead of a decimal amount |  | |
-| **alignment** | `Alignment` | Sets alignment of content | `.leading` | `leading` `center` `trailing` |
-| **isEmphasized** | `Bool` | Determines whether or not the currency that is being displayed is emphasized | `false` | `true` `false` |
-| **hasUnit** | `Bool` | Determines whether or not the currency has a decimal value or a unit of measure | `false` | `true` `false` |

data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md

@@ -1,31 +0,0 @@
-![Currency-Default](https://github.com/powerhome/playbook-swift/assets/54749071/bf3810f9-6dd2-4bdd-b32a-14109f3a0b9a)
-
-```swift
-VStack(alignment: .leading, spacing: Spacing.small) {
-  PBCurrency(
-    amount: "2,000",
-    decimalAmount: ".50",
-    label: "small",
-    size: .title4,
-    symbol: "en_US",
-    isEmphasized: true
-  )
-  PBCurrency(
-    amount: "342",
-    decimalAmount: ".00",
-    label: "medium",
-    size: .title3,
-    symbol: "en_EU",
-    isEmphasized: true
-  )
-  PBCurrency(
-    amount: "45",
-    label: "large",
-    size: .title1,
-    symbol: "en_US",
-    unit: "/mo",
-    isEmphasized: true,
-    hasUnit: true
-  )
-}
-```

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md

@@ -1,14 +0,0 @@
-![Date-Range-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/ccb85e5d-0f6d-4ced-8154-aa9dfa72a131)
-
-```swift
-VStack(alignment: .leading, spacing: Spacing.small) {
-  PBDateRangeStacked(
-    startDate: Date().makeDate(year: 2019, month: 6, day: 18),
-    endDate: Date().makeDate(year: 2020, month: 3, day: 20),
-    startAlignment: .trailing,
-    endAlignment: .leading,
-    startVariant: .short(showIcon: false),
-    endVariant: .short(showIcon: false)
-  )
-}
-```

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md

@@ -1,9 +0,0 @@
-### Props
-| Name | Type | Description | Default | Values |
-| --- | ----------- | --------- | --------- | --------- |
-| **startDate** | `Date()` | Takes a string value to set the starting date range value | `Date()` |  |
-| **endDate** | `Date()` | Takes a string value to set the ending date range value |  `Date()` |  |
-| **startAlignment** | `Alignment` | Changes the alignment of the starting date | `.leading` | `.leading` `.trailing` |
-| **endAlignment** | `Alignment` | Changes the alignment of the ending date | `.leading` | `.leading` `.trailing` |
-| **startVariant** | `PBDate.Variant` | Changes the style of the starting date | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
-| **endVariant** | `PBDate.Variant` | Changes the style of the ending date | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.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}) %>

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

@@ -1 +0,0 @@
-The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.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}) %>
-        <% end %>
-    <% end %>
-<% end %>

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

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

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

@@ -1,7 +0,0 @@
-The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
-
-`Dropdown. Trigger` / `dropdown/dropdown_trigger`
-`Dropdown.Container`/ `dropdown/dropdown_container`
-`Dropdown.Option` / `dropdown/dropdown_option`
-
-See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props. 

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

@@ -1,84 +0,0 @@
-import React from 'react'
-import { Dropdown, User, Badge, FlexItem } from '../..'
-
-const DropdownWithAutocomplete = (props) => {
-
-  const options = [
-    {
-      label: "Jasper Furniss",
-      value: "Jasper Furniss",
-      territory: "PHL",
-      title: "Senior UX Engineer",
-      id: "jasper-furniss",
-      status: "Offline"
-    },
-    {
-      label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
-      territory: "PHL",
-      title: "Senior UX Designer",
-      id: "ramon-ruiz",
-      status: "Away"
-    },
-    {
-      label: "Jason Cypret",
-      value: "Jason Cypret",
-      territory: "PHL",
-      title: "VP of User Experience",
-      id: "jason-cypret",
-      status: "Online"
-    },
-    {
-      label: "Courtney Long",
-      value: "Courtney Long",
-      territory: "PHL",
-      title: "UX Design Mentor",
-      id: "courtney-long",
-      status: "Online"
-    }
-  ];
-
-
-  return (
-  <div>
-    <Dropdown autocomplete
-        options={options}
-        {...props}
-    >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          >
-            <>
-              <FlexItem>
-                <User
-                    align="left"
-                    avatar
-                    name={option.label}
-                    orientation="horizontal"
-                    territory={option.territory}
-                    title={option.title}
-                />
-              </FlexItem>
-              <FlexItem>
-                <Badge
-                    rounded
-                    text={option.status}
-                    variant={`${
-                        option.status === "Offline"
-                        ? "neutral"
-                        : option.status === "Online"
-                        ? "success"
-                        : "warning"
-                    }`}
-                />
-              </FlexItem>
-            </>
-          </Dropdown.Option>
-        ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownWithAutocomplete

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

@@ -1 +0,0 @@
-The `autocomplete` prop can be used to add autocomplete or typeahead functionality to the Dropdown's default Trigger. This prop is set to 'false' by default. 

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

@@ -1,101 +0,0 @@
-import React, { useState } from 'react'
-import { Dropdown, User, Badge, FlexItem, Avatar } from '../..'
-
-const DropdownWithAutocompleteAndCustomDisplay = (props) => {
-  const [selectedOption, setSelectedOption] = useState();
-
-  const options = [
-    {
-      label: "Jasper Furniss",
-      value: "Jasper Furniss",
-      territory: "PHL",
-      title: "Senior UX Engineer",
-      id: "jasper-furniss",
-      status: "Offline"
-    },
-    {
-      label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
-      territory: "PHL",
-      title: "Senior UX Designer",
-      id: "ramon-ruiz",
-      status: "Away"
-    },
-    {
-      label: "Jason Cypret",
-      value: "Jason Cypret",
-      territory: "PHL",
-      title: "VP of User Experience",
-      id: "jason-cypret",
-      status: "Online"
-    },
-    {
-      label: "Courtney Long",
-      value: "Courtney Long",
-      territory: "PHL",
-      title: "UX Design Mentor",
-      id: "courtney-long",
-      status: "Online"
-    }
-  ];
-
-  const CustomDisplay = () => {
-    return (
-      <>
-      {
-        selectedOption && (
-            <Avatar
-                name={selectedOption.label}
-                size="xs"
-            />
-        )
-      }
-    </>
-    )
-  };
-
-  return (
-  <div>
-    <Dropdown autocomplete
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
-        options={options}
-        {...props}
-    >
-        <Dropdown.Trigger customDisplay={<CustomDisplay/>} />
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          >
-            <>
-              <FlexItem>
-                <User
-                    align="left"
-                    avatar
-                    name={option.label}
-                    orientation="horizontal"
-                    territory={option.territory}
-                    title={option.title}
-                />
-              </FlexItem>
-              <FlexItem>
-                <Badge
-                    rounded
-                    text={option.status}
-                    variant={`${
-                        option.status === "Offline"
-                        ? "neutral"
-                        : option.status === "Online"
-                        ? "success"
-                        : "warning"
-                    }`}
-                />
-              </FlexItem>
-            </>
-          </Dropdown.Option>
-        ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownWithAutocompleteAndCustomDisplay

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

@@ -1 +0,0 @@
-`autocomplete` prop can also be used in conjunction with the `customDisplay` prop.

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

@@ -1,60 +0,0 @@
-<% 
-  options = [
-    {
-      label: "Jasper Furniss",
-      value: "Jasper Furniss",
-      territory: "PHL",
-      title: "Senior UX Engineer",
-      id: "jasper-furniss",
-      status: "Offline"
-    },
-    {
-      label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
-      territory: "PHL",
-      title: "Senior UX Designer",
-      id: "ramon-ruiz",
-      status: "Away"
-    },
-    {
-      label: "Jason Cypret",
-      value: "Jason Cypret",
-      territory: "PHL",
-      title: "VP of User Experience",
-      id: "jason-cypret",
-      status: "Online"
-    },
-    {
-      label: "Courtney Long",
-      value: "Courtney Long",
-      territory: "PHL",
-      title: "UX Design Mentor",
-      id: "courtney-long",
-      status: "Online"
-    }
-  ]
-
-%>
-
-<%
-  custom_display = capture do
-    pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
-  end
-%>
-
-
-<%= pb_rails("dropdown", props: {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/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 %>

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

@@ -1,5 +0,0 @@
-The `customDisplay` prop can be used to customize the display of the selected item by allowing devs to pass in a component that will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
-
-The `placeholder` prop can also be used to customize the placeholder text for the default Trigger. 
-
-The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.

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.