playbook_ui_docs 14.19.0.pre.alpha.play2125phonenumberinputcountrysearcherrorstylefix7698 → 14.19.0.pre.rc.0

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

@@ -1,58 +0,0 @@
-<% 
-   options = [
-    {
-      label: "Jasper Furniss",
-      value: "Jasper Furniss",
-      territory: "PHL",
-      title: "Lead 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: "Carlos Lima",
-      value: "Carlos Lima",
-      territory: "PHL",
-      title: "Nitro Developer",
-      id: "carlos-lima",
-      status: "Online"
-    },
-    {
-      label: "Courtney Long",
-      value: "Courtney Long",
-      territory: "PHL",
-      title: "Lead UX Designer",
-      id: "courtney-long",
-      status: "Online"
-    }
-  ];
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) do %>
-    <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Search...", autocomplete: true}) %>
-    <%= 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 %>

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

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

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

@@ -1 +0,0 @@
-The `useDropdown` hook can also be used to toggle the dropdown open and closed using an external control. To do so, you must manage state with the custom hook, pass the `dropdown:'pb-dropdown-trigger'` data attribute to the external control and use the `isClosed` prop as shown. 

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

@@ -1,61 +0,0 @@
-import React, { useState } from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-import IconCircle from '../../pb_icon_circle/_icon_circle';
-
-const DropdownWithSearch = (props) => {
-const [selectedOption, setSelectedOption] = useState();
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-      icon: "🇺🇸",
-      id: "United-states"
-
-    },
-    {
-      label: "United Kingdom",
-      value: "United Kingdom",
-      icon: "🇬🇧",
-      id: "united-kingdom"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      icon: "🇵🇰",
-      id: "pakistan"
-    }
-  ];  
-
-
-  return (
-  <div>
-    <Dropdown
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
-        options={options}
-        {...props}
-    >
-      <Dropdown.Trigger>
-        <div key={selectedOption ? selectedOption.icon : "flag"}>
-            <IconCircle
-                cursor="pointer"
-                icon={selectedOption ? selectedOption.icon : "flag"}
-                variant="royal"
-            />
-        </div>
-      </Dropdown.Trigger>
-      <Dropdown.Container maxWidth="xs"
-          searchbar
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          />
-        ))}
-      </Dropdown.Container>
-    </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownWithSearch

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

@@ -1,2 +0,0 @@
-The optional `searchbar` boolean prop can also be used on the `Dropdown.Container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
-`searchbar` is set to false by default. 

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

@@ -1,52 +0,0 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "United Kingdom",
-      areaCode: "+44",
-      icon: "🇬🇧",
-      id: "gb"
-    },
-    {
-      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", searchbar: true}) 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("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 %>
-<% end %>

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

@@ -1,2 +0,0 @@
-The optional `searchbar` boolean prop can also be used on the `dropdown/dropdown_container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
-`searchbar` is set to false by default. 

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb

@@ -1,27 +0,0 @@
-<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    primary_button: "Next Action",
-    primary_button_url: "#primary_button_url",
-    alignment: "left",
-  }) %>
-
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    primary_button: "Next Action",
-    primary_button_url: "#primary_button_url",
-  }) %>
-
-    <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    primary_button: "Next Action",
-    primary_button_url: "#primary_button_url",
-    alignment: "right",
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb

@@ -1,7 +0,0 @@
-<%= pb_rails("flex", props: {align: "center", justify: "center"}) do %>
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb

@@ -1,12 +0,0 @@
-<%= pb_rails("flex", props: {align: "center", justify: "center", wrap: true}) do %>
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    orientation:"horizontal",
-    alignment: "left",
-    size: "lg",
-    primary_button: "Next Action",
-    primary_button_url: "#primary_button_url",
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb

@@ -1,23 +0,0 @@
-<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    primary_button: "Next Action",
-    primary_button_url: "#primary_button_url",
-    link_button: "Alt Action",
-    link_button_url: "#link_button_url",
-    size: "sm",
-  }) %>
-
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    primary_button: "Next Action",
-    primary_button_url: "#primary_button_url",
-    link_button: "Alt Action",
-    link_button_url: "#link_button_url",
-    size: "lg",
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb

@@ -1,41 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    id: "filter_within_trubo_frames",
-    position: "top",
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "San Francisco"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 1,
-    popover_props: { append_to: "parent"  },
-  }) do
-%>
-  <%
-   example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
-
-    <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md

@@ -1 +0,0 @@
-By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const data = [{
-  name: 'Installation',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
-}, {
-  name: 'Manufacturing',
-  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
-}, {
-  name: 'Sales & Distribution',
-  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
-}, {
-  name: 'Project Development',
-  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
-}, {
-  name: 'Other',
-  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
-}]
-
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const baseOptions = {
-  series: data,
-  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
-  subtitle: { text: "Source: thesolarfoundation.com" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-}
-
-const LineGraphPbStyles = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphPbStyles

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb

@@ -1,9 +0,0 @@
-<%= pb_rails("message", props: {
-  label: "Mike Bishop",
-  message: "So long, and thanks for all the fish!",
-  timestamp: "3 months ago",
-  avatar_name: "Mike Bishop",
-  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
-  avatar_status: "offline",
-  avatar_grayscale: true,
-}) %>

data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx

@@ -1,21 +0,0 @@
-import React from "react"
-
-import Message from "../_message"
-
-const MessageGrayscale = (props) => {
-  return (
-    <Message
-        avatarGrayscale
-        avatarName='Mike Bishop'
-        avatarStatus='offline'
-        avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
-        borderRadius='rounded'
-        label='Mike Bishop'
-        message='So long, and thanks for all the fish!'
-        timestamp='3 months ago'
-        {...props}
-    />
-  )
-}
-
-export default MessageGrayscale

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-    country_search: true, 
-    id: "country-search",
-}) %>
-
-<%= pb_rails("phone_number_input", props: {
-    country_search: true, 
-    id: "country-search-limited",
-    only_countries: ["br", "us", "ph", "gb"],
-}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import PhoneNumberInput from '../_phone_number_input'
-
-const PhoneNumberInputCountrySearch = (props) => (
-    <>
-        <PhoneNumberInput
-            countrySearch
-            id='country-search'
-            {...props} 
-        />
-        <PhoneNumberInput
-            countrySearch
-            id='country-search-limited'
-            onlyCountries={["br", "us", "ph", "gb"]}
-            {...props} 
-        />
-    </>
-)
-
-export default PhoneNumberInputCountrySearch

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md

@@ -1 +0,0 @@
-Set `country_search` / `countrySearch` to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb

@@ -1,46 +0,0 @@
-<%= pb_rails("flex", props: {
-    dark: true,
-    orientation: "row",
-    vertical: "center",
-    margin_bottom: "md"
-    }) do %>
-    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
-    &nbsp;
-    <%= pb_rails("circle_icon_button", props: {
-        variant: "secondary",
-        icon: "info",
-        id: "append-to-popover-1"
-    }) %>
-    <%= pb_rails("popover", props: {
-        trigger_element_id: "append-to-popover-1",
-        tooltip_id: "append-to-tooltip-1",
-        offset: true,
-        position: "top",
-        append_to: "parent",
-    }) do %>
-        I'm a popover. I have been appended to my parent element.
-    <% end %>
-<% end %>
-
-<%= pb_rails("flex", props: {
-    dark: true,
-    orientation: "row",
-    vertical: "center"
-    }) do %>
-    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
-    &nbsp;
-    <%= pb_rails("circle_icon_button", props: {
-        variant: "secondary",
-        icon: "info",
-        id: "append-to-popover-2"
-    }) %>
-    <%= pb_rails("popover", props: {
-        trigger_element_id: "append-to-popover-2",
-        tooltip_id: "append-to-tooltip-2",
-        offset: true,
-        position: "top",
-        append_to: ".kit-show-wrapper",
-    }) do %>
-        I'm a popover. I have been appended to the .kit-show-wrapper.
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md

@@ -1 +0,0 @@
-By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `append_to` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb

@@ -1,6 +0,0 @@
-<%= pb_rails("user", props: {
-  name: "Anna Black",
-  title: "Remodeling Consultant",
-  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-  avatar_grayscale: true,
-}) %>

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import User from '../../pb_user/_user'
-
-const UserGrayscale = (props) => {
-  return (
-    <User
-        avatarGrayscale
-        avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-        name="Anna Black"
-        title="Remodeling Consultant"
-        {...props}
-    />
-  )
-}
-
-export default UserGrayscale