playbook_ui_docs 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8856 → 14.22.0.pre.rc.0

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx

@@ -1,69 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import Icon from "../../pb_icon/_icon"
-import Flex from "../../pb_flex/_flex"
-import Caption from "../../pb_caption/_caption"
-import Tooltip from "../../pb_tooltip/_tooltip"
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableWithCustomHeader = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      header: () => (
-        <Flex alignItems="center" 
-            justifyContent="center"
-        >
-          <Caption marginRight="xs">New Enrollments</Caption>
-          <Tooltip placement="top" 
-              text="Whoa. I'm a Tooltip" 
-              zIndex={10}
-          >
-            <Icon cursor="pointer" 
-                icon="info"
-                size="xs" 
-            />
-          </Tooltip>
-        </Flex>
-      ),
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ];
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableWithCustomHeader

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md

@@ -1 +0,0 @@
-The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well. 

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md

@@ -1,3 +0,0 @@
-By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
-
-Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements. 
-Import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.

data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md

@@ -1 +0,0 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

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

@@ -1,52 +0,0 @@
-<%
-  options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" }
-  ]
-%>
-
-<%= pb_rails("dropdown", props: { label: "Multiple Icons", 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", props: { align: "center", justify: "between" }) do %>
-          <%= pb_rails("flex") do %>
-            <%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
-            <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
-          <% end %>
-          <%= pb_rails("icon", props: { icon: "check" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<%= pb_rails("dropdown", props: { label: "Icon on Left", options: options, padding_y: "md" }) 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", props: { align: "center" }) do %>
-          <%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
-          <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<%= pb_rails("dropdown", props: { label: "Icon on Right", 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", props: { align: "center", justify: "between" }) do %>
-          <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
-          <%= pb_rails("icon", props: { icon: "check" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

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

@@ -1,99 +0,0 @@
-import React from 'react'
-import Dropdown from '../_dropdown'
-
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import Icon from '../../pb_icon/_icon'
-
-const DropdownCustomIconOptions = (props) => {
-
-  const options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" },
-  ]
-
-
-  return (
-  <div>
-      <Dropdown label="Multiple Icons"
-          options={options}
-          {...props}
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          >
-            <Flex align="center" 
-                justify="between"
-            >
-                <Flex align="center">
-                  <Icon icon="calendar" 
-                      paddingRight="xs"
-                      {...props}    
-                  />
-                  <Body color="default" 
-                      text={option.label}
-                      {...props}
-                  />
-                </Flex>
-                <Icon icon="check" 
-                    {...props}    
-                />
-            </Flex>
-          </Dropdown.Option>
-        ))}
-      </Dropdown>
-
-      <Dropdown label="Icon on Left"
-          options={options} 
-          paddingY="md"
-          {...props}
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id}
-              option={option}
-          >
-            <Flex align="center">
-              <Icon icon="calendar" 
-                  paddingRight="xs"
-                  {...props}
-              />
-              <Body color="default" 
-                  text={option.label}
-                  {...props}
-              />
-            </Flex>
-          </Dropdown.Option>
-        ))}
-      </Dropdown>
-
-      <Dropdown label="Icon on Right"
-          options={options}
-          {...props}
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id}
-              option={option}
-          >
-            <Flex align="center"
-                justify="between"
-            >
-              <Flex align="center">
-                <Body color="default" 
-                    text={option.label}
-                    {...props}
-                />
-              </Flex>
-              <Icon icon="check"
-                  {...props}
-              />
-            </Flex>
-          </Dropdown.Option>
-        ))}
-      </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownCustomIconOptions

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

@@ -1 +0,0 @@
-Use the `dropdown/dropdown_option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.

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

@@ -1 +0,0 @@
-Use the `Dropdown.Option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.

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

@@ -1,28 +0,0 @@
-<%
-  options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" }
-  ]
-
-  selected_value = params[:selected_value]
-%>
-
-<%= pb_rails("dropdown", props: { label: "Choose Item", options: options }) do %>
-  <%= pb_rails("dropdown/dropdown_trigger") %>
-  <%= pb_rails("dropdown/dropdown_container") do %>
-    <% options.each do |option| %>
-      <% checked = (option[:value] == selected_value) %>
-      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
-        <%= pb_rails("flex", props: { align: "center" }) do %>
-          <%= pb_rails("radio", props: {
-            text: option[:label],
-            name: "dropdown_radio",
-            value: option[:value],
-            checked: checked,
-          }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

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

@@ -1,47 +0,0 @@
-import React, { useState } from 'react'
-import Dropdown from '../_dropdown'
-
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import Radio from '../../pb_radio/_radio'
-
-const DropdownCustomRadioOptions = (props) => {
-  const [selectedValue, setSelectedValue] = useState(null)
-
-  const options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" },
-  ]
-
-
-  return (
-  <div>
-      <Dropdown
-          label="Select Item"
-          onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
-          options={options}
-          {...props}
-      >
-        {options.map((option) => {
-          return (
-            <Dropdown.Option key={option.id}
-                option={option}
-            >
-              <Flex align="center">
-                <Radio
-                    checked={selectedValue === option.value}
-                    name="dropdown_radio"
-                    value={option.value}
-                />
-                <Body text={option.label} />
-              </Flex>
-            </Dropdown.Option>
-          )
-        })}
-      </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownCustomRadioOptions

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

@@ -1 +0,0 @@
-Radio inputs can be used inside `dropdown/dropdown_option` for a custom layout that mimics form-like selection within a dropdown.

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

@@ -1 +0,0 @@
-Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.

data/app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx

@@ -1,224 +0,0 @@
-import React, { useState } from 'react'
-
-import Filter from '../../pb_filter/_filter'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Checkbox from '../../pb_checkbox/_checkbox'
-import Flex from '../../pb_flex/_flex'
-import Table from '../../pb_table/_table'
-import Caption from '../../pb_caption/_caption'
-import Icon from '../../pb_icon/_icon'
-
-const people = [
-  { name: 'Hera Syndulla', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
-  { name: 'Kanan Jarrus', territory: 'USA', products: ['Siding', 'Roofing', 'Gutters'] },
-  { name: 'C1-10P', territory: 'USA', products: ['Roofing'] },
-  { name: 'Anakin Skywalker', territory: 'A galaxy far far away, like really far away...', products: ['Doors', 'Windows', 'Solar'] },
-  { name: 'Leia Organa', territory: 'Canada', products: ['Windows', 'Doors'] },
-  { name: 'Luke Skywalker', territory: 'Brazil', products: ['Solar', 'Roofing'] },
-  { name: 'Padmé Amidala', territory: 'Philippines', products: ['Siding', 'Gutters'] },
-  { name: 'Obi-Wan Kenobi', territory: 'USA', products: ['Windows', 'Siding'] },
-  { name: 'Ahsoka Tano', territory: 'Canada', products: ['Insulation', 'Solar'] },
-  { name: 'Boba Fett', territory: 'Brazil', products: ['Roofing', 'Gutters'] },
-  { name: 'Mace Windu', territory: 'Philippines', products: ['Doors', 'Siding'] },
-  { name: 'Grogu', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
-  { name: 'Sabine Wren', territory: 'Canada', products: ['Solar', 'Doors'] },
-  { name: 'C-3PO', territory: 'Brazil', products: ['Windows'] },
-  { name: 'R2-D2', territory: 'Philippines', products: ['Doors', 'Gutters'] },
-]
-
-const FilterSidebar = (props) => {
-  const [name, setName] = useState('')
-  const [ territory, setTerritory ] = useState('')
-  const [ products, setProducts ] = useState({})
-  const handleUpdateName = ({ target }) => {
-    setName(target.value)
-  }
-  const handleUpdateTerritory = ({ target }) => {
-    setTerritory(target.value)
-  }
-  const handleCheckboxChange = ({ target }) => {
-    setProducts(prev => ({
-      ...prev,
-      [target.name]: !prev[target.name],
-    }))
-  }
-  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
-  const [isProductsCollapsed, setIsProductsCollapsed] = useCollapsible(true)
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
-  ]
-
-  const filteredPeople = people.filter((person) => {
-    const matchesName = person.name.toLowerCase().includes(name.toLowerCase())
-
-    const matchesTerritory = territory === '' ? true : person.territory === territory
-
-    const matchesProducts = Object.values(products).every((product) => !product) ? true : person.products.some(product => products[product])
-
-    return matchesName && matchesTerritory && matchesProducts
-  })
-
-  return (
-    <>
-      <Flex>
-        <Filter
-            isCollapsed={isCollapsed}
-            marginRight="xs"
-            onCollapse={() => setIsCollapsed(!isCollapsed)}
-            results={filteredPeople.length}
-            sortOptions={{
-              popularity: 'Popularity',
-              // eslint-disable-next-line
-              manager_title: 'Manager\'s Title',
-              // eslint-disable-next-line
-              manager_name: 'Manager\'s Name',
-            }}
-            sortValue={[{ name: 'popularity', dir: 'desc' }]}
-            variant="sidebar"
-            width="xs"
-            {...props}
-        >
-          <Filter.Section
-              collapsed={isCollapsed}
-              headerText="Full Name"
-          >
-            <TextInput
-                onChange={handleUpdateName}
-                placeholder="Enter name"
-                value={name}
-                {...props}
-            />
-          </Filter.Section>
-          <SectionSeparator />
-          <Filter.Section
-              collapsed={isCollapsed}
-              collapsible
-              headerText="Territory"
-          >
-            <Select
-                blankSelection="Select One..."
-                name="location"
-                onChange={handleUpdateTerritory}
-                options={options}
-                {...props}
-            />
-          </Filter.Section>
-          <SectionSeparator />
-          <Filter.Section
-              collapsed={isCollapsed}
-              collapsible
-              headerText="Products"
-          >
-            <div>
-              <Checkbox
-                  marginBottom="sm"
-                  name="Doors"
-                  onChange={handleCheckboxChange}
-                  text="Doors"
-              />
-            </div>
-            <div>
-              <Checkbox
-                  marginBottom="sm"
-                  name="Windows"
-                  onChange={handleCheckboxChange}
-                  text="Windows"
-              />
-            </div>
-            <div>
-              <Checkbox
-                  marginBottom="sm"
-                  name="Siding"
-                  onChange={handleCheckboxChange}
-                  text="Siding"
-              />
-            </div>
-            {!isProductsCollapsed &&
-              <>
-                <div>
-                  <Checkbox
-                      checked={products["Roofing"]}
-                      marginBottom="sm"
-                      name="Roofing"
-                      onChange={handleCheckboxChange}
-                      text="Roofing"
-                  />
-                </div>
-                <div>
-                  <Checkbox
-                      checked={products["Gutters"]}
-                      marginBottom="sm"
-                      name="Gutters"
-                      onChange={handleCheckboxChange}
-                      text="Gutters"
-                  />
-                </div>
-                <div>
-                  <Checkbox
-                      checked={products["Solar"]}
-                      marginBottom="sm"
-                      name="Solar"
-                      onChange={handleCheckboxChange}
-                      text="Solar"
-                  />
-                </div>
-                <div>
-                  <Checkbox
-                      checked={products["Insulation"]}
-                      marginBottom="sm"
-                      name="Insulation"
-                      onChange={handleCheckboxChange}
-                      text="Insulation"
-                  />
-                </div>
-              </>
-            }
-            <div onClick={() => setIsProductsCollapsed(!isProductsCollapsed)}>
-              <Flex
-                  cursor="pointer"
-                  marginBottom="sm"
-              >
-                <Caption
-                    color="link"
-                    marginRight="xxs"
-                    size="xs"
-                    text={isProductsCollapsed ? "Show More" : "Show Less"}
-                />
-                <Icon
-                    icon={isProductsCollapsed ? "chevron-down" : "chevron-up"}
-                />
-              </Flex>
-            </div>
-          </Filter.Section>
-        </Filter>
-        <Table
-            size="sm"
-        >
-          <thead>
-            <tr>
-              <th>{'Name'}</th>
-              <th>{'Territory'}</th>
-              <th>{'Products'}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {filteredPeople.map((person) => (<tr key={person.name}>
-              <td>{ person.name }</td>
-              <td>{ person.territory }</td>
-              <td>{ person.products.join(", ") }</td>
-            </tr>))}
-          </tbody>
-        </Table>
-      </Flex>
-    </>
-  )
-}
-
-export default FilterSidebar

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb

@@ -1,14 +0,0 @@
-<%= pb_rails("button", props: { 
-  text: "Click to Open",
-  id: "click-tooltip-trigger-1",
-  variant: "primary"
-}) %>
-
-<%= pb_rails("tooltip", props: {
-  trigger_element_selector: "#click-tooltip-trigger-1",
-  tooltip_id: "click-tooltip-1",
-  position: "top",
-  use_click_to_open: true
-}) do %>
-  Tooltip opened by click! Click trigger again to close.
-<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import Button from '../../pb_button/_button'
-import Tooltip from '../_tooltip'
-import Flex from '../../pb_flex/_flex'
-
-const TooltipClickOpen = (props) => {
-  return (
-    <Flex flexDirection='row'
-        gap='md'
-        wrap
-    >
-      <Tooltip
-          placement='top'
-          text='Tooltip Opened'
-          useClickToOpen
-          zIndex={10}
-          {...props}
-      >
-        <Button text='Click to Open' />
-      </Tooltip>
-    </Flex>
-  )
-}
-
-export default TooltipClickOpen

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md

@@ -1 +0,0 @@
-Set the prop `use_click_to_open` as `true` so that the tooltip will only appear when an item is clicked rather than hovered over.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md

@@ -1 +0,0 @@
-Set the prop `useClickToOpen` so that the tooltip will only appear when an item is clicked rather than hovered over.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb

@@ -1,18 +0,0 @@
-<%
-  options = [
-    { label: 'Orange', value: '#FFA500' },
-    { label: 'Red', value: '#FF0000' },
-    { label: 'Green', value: '#00FF00' },
-    { label: 'Blue', value: '#0000FF' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-preserve-search-input",
-    is_multi: false,
-    label: "Colors",
-    options: options,
-    placeholder: "Select...",
-    preserve_search_input: true,
-  })
-%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md

@@ -1 +0,0 @@
-By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserve_search_input` prop in order to prevent text from being cleared when the field loses focus