playbook_ui 14.18.0.pre.alpha.dropdownautocomplete7493 → 14.18.0.pre.alpha.play1736highchartslinegraphdefaultrebuild7431

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_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.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_line_graph/lineGraphTheme.ts

@@ -1,110 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const lineGraphTheme = {
-  title: {
-    text: "",
-    style: {
-      color: colors.text_lt_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
-  subtitle: {
-    text: "" ,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_base,
-    },
-  },
-  chart: {
-    type: "line",
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    followPointer: true,
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  plotOptions: {
-    line: {
-      dataLabels: {
-        enabled: false,
-      },
-    },
-  },
-  credits: { enabled: false },
-  legend: { enabled: false },
-  colors: [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7,
-  ],
-  xAxis: {
-    gridLineWidth: 0,
-    lineColor: colors.border_light,
-    tickColor: colors.border_light,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        color: colors.text_lt_default,
-        fontFamily: typography.font_family_base,
-        fontWeight: typography.regular,
-        fontSize: typography.heading_4,
-      },
-    },
-  },
-  yAxis: {
-    alternateGridColor: undefined as string | undefined,
-    minorTickInterval: null as number | null,
-    gridLineColor: colors.border_light,
-    minorGridLineColor: colors.border_light,
-    lineWidth: 0,
-    tickWidth: 0,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-  },
-}
-
-export default lineGraphTheme;

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.