RubyGems - playbook_ui - Versions diffs - 14.21.2.pre.alpha.PLAY22558410 → 14.21.2 - Mend

playbook_ui 14.21.2.pre.alpha.PLAY22558410 → 14.21.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (129) hide show

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

	@@ -1 +0,0 @@
1	- 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 DELETED Viewed

	@@ -1 +0,0 @@
1	- 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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

	@@ -1 +0,0 @@
1	- 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 DELETED Viewed

	@@ -1 +0,0 @@
1	- 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/Filter/FilterSection.tsx DELETED Viewed

@@ -1,49 +0,0 @@
-import React from 'react'
-import Collapsible from '../../pb_collapsible/_collapsible'
-import Caption from '../../pb_caption/_caption'
-import Body from '../../pb_body/_body'
-type FilterSectionProps = {
-  children?: React.ReactChild[] | React.ReactChild,
-  collapsible?: boolean,
-  collapsed?: boolean,
-  headerText?: string,
-}
-const FilterSection = ({ children, collapsible = false, collapsed = true, headerText, }: FilterSectionProps): React.ReactElement => {
-  if (collapsible) {
-    return (
-      <Collapsible
-          collapsed={collapsed}
-          padding="none"
-      >
-        <Collapsible.Main
-            paddingX="sm"
-            paddingY="xs"
-        >
-            <Caption>{ headerText }</Caption>
-        </Collapsible.Main>
-        <Collapsible.Content
-            className="filter_section_collapsible"
-            paddingX="sm"
-        >
-          { children }
-        </Collapsible.Content>
-      </Collapsible>
-    )
-  }
-  return (
-    <Body
-        paddingTop="xs"
-        paddingX="sm"
-    >
-      <>
-        {headerText && <Caption marginBottom="sm">{ headerText }</Caption>}
-        { children }
-      </>
-    </Body>
-  )
-}
-export default FilterSection

data/app/pb_kits/playbook/pb_filter/Filter/FilterSidebar.tsx DELETED Viewed

@@ -1,69 +0,0 @@
-import React from 'react'
-import { FilterDescription } from './CurrentFilters'
-import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
-import ResultsCount from './ResultsCount'
-import Flex from '../../pb_flex/_flex'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-export type FilterSidebarProps = {
-  children?: React.ReactChild[] | React.ReactChild,
-  filters?: FilterDescription,
-  results?: number,
-} & FilterBackgroundProps
-const FilterSidebar = ({
-  onCollapse,
-  onSortChange,
-  sortOptions,
-  sortValue,
-  filters,
-  results,
-  children,
-  dark,
-  isCollapsed,
-  maxHeight,
-  minWidth,
-  placement,
-  popoverProps,
-  ...bgProps
-}: FilterSidebarProps): React.ReactElement => (
-  <FilterBackground
-      dark={dark}
-      {...bgProps}
-  >
-    <Card.Body
-        paddingX="sm"
-        paddingY="xs"
-    >
-      <Flex
-          align="center"
-          justify="between"
-          orientation="row"
-      >
-        <ResultsCount
-            dark={dark}
-            results={results}
-            title
-        />
-        <div onClick={onCollapse}>
-          <Caption
-              color="link"
-              cursor="pointer"
-              size="xs"
-              text={isCollapsed ? "Expand All" : "Collapse All"}
-          />
-        </div>
-      </Flex>
-    </Card.Body>
-    <SectionSeparator dark={dark} />
-    <>
-      { children }
-    </>
-  </FilterBackground>
-)
-export default FilterSidebar

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

@@ -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