playbook_ui 14.21.2.pre.alpha.PLAY2020sidebarfilterPOC8265 → 14.21.2.pre.alpha.PLAY18938263

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.21.2"
-  VERSION = "14.21.2.pre.alpha.PLAY2020sidebarfilterPOC8265"
+  VERSION = "14.21.2.pre.alpha.PLAY18938263"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.21.2.pre.alpha.PLAY2020sidebarfilterPOC8265
+  version: 14.21.2.pre.alpha.PLAY18938263
 platform: ruby
 authors:
 - Power UX
@@ -274,6 +274,7 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts
 - app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx
+- app/pb_kits/playbook/pb_advanced_table/Utilities/ColumnStylingHelper.ts
 - app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx
 - app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts
@@ -306,6 +307,14 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx
@@ -1462,8 +1471,6 @@ files:
 - app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterSection.tsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterSidebar.tsx
 - app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
 - app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
 - app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
@@ -1495,7 +1502,6 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
-- app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb
@@ -3613,8 +3619,8 @@ files:
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
 - dist/chunks/_typeahead-CoOpeYom.js
-- dist/chunks/_weekday_stacked-BitxTXxk.js
-- dist/chunks/lazysizes-DHz07jlL.js
+- dist/chunks/_weekday_stacked-JnoR3mIy.js
+- dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-D7Va7yqa.js
 - dist/chunks/pb_form_validation-DSkdRDMf.js
 - dist/chunks/vendor.js

data/app/pb_kits/playbook/pb_filter/Filter/FilterSection.tsx

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

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

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