playbook_ui 14.16.0 → 14.17.0.pre.alpha.play1499backgroundkitoverlay7105

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

@@ -1,10 +1,10 @@
 <% 
-  options = [
+   options = [
     {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Senior UX Engineer",
+      title: "Lead UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -17,22 +17,22 @@
       status: "Away"
     },
     {
-      label: "Jason Cypret",
-      value: "Jason Cypret",
+      label: "Carlos Lima",
+      value: "Carlos Lima",
       territory: "PHL",
-      title: "VP of User Experience",
-      id: "jason-cypret",
+      title: "Nitro Developer",
+      id: "carlos-lima",
       status: "Online"
     },
     {
       label: "Courtney Long",
       value: "Courtney Long",
       territory: "PHL",
-      title: "UX Design Mentor",
+      title: "Lead UX Designer",
       id: "courtney-long",
       status: "Online"
     }
-  ]
+  ];
 
 %>
 

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -95,7 +95,7 @@ test('generated customDisplay for trigger', () => {
 
   const kit = screen.getByTestId(testId)
   const trigger = kit.querySelector('.pb_dropdown_trigger')
-  const customDisplay = trigger.querySelector('.fa-flag.pb_icon_kit.fa-fw')
+  const customDisplay = trigger.querySelector('.pb_custom_icon')
   expect(customDisplay).toBeInTheDocument()
 })
 
@@ -170,7 +170,7 @@ test('generated custom Trigger', () => {
         options={options}
     >
       <Dropdown.Trigger>
-          <Icon icon="elephant" />
+          <Icon icon="flag" />
       </Dropdown.Trigger>
       {options.map((option) => (
       <Dropdown.Option key={option.id} 
@@ -182,7 +182,7 @@ test('generated custom Trigger', () => {
 
   const kit = screen.getByTestId(testId)
   const trigger = kit.querySelector('.pb_dropdown_trigger')
-  const customTrigger = trigger.querySelector('.fa-elephant.pb_icon_kit.fa-fw')
+  const customTrigger = trigger.querySelector('.pb_custom_icon')
   expect(customTrigger).toBeInTheDocument()
 })
 

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

@@ -1,6 +1,5 @@
 import React from 'react'
-import { map } from 'lodash'
-import { isEmpty, omitBy } from '../../utilities/object'
+import { isEmpty, omitBy, map } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -46,12 +45,12 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                     dark={dark}
                     size={4}
                     tag="h4"
-                    text={name}
+                    text={`${name}`}
                 /> :
                 <div>
                   <Caption
                       dark={dark}
-                      text={name}
+                      text={`${name}`}
                   />
                   <Title
                       dark={dark}

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

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import { map } from 'lodash'
-import { find, partial } from  '../../utilities/object'
+import { find, partial, map } from  '../../utilities/object'
 
 import Button from '../../pb_button/_button'
 import Icon from '../../pb_icon/_icon'
@@ -27,7 +26,7 @@ const directionIcon = (dir: Direction) => (
 
 const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (
   map(options, (label, name) => {
-    const next = nextValue(value, name)
+    const next = nextValue(value, String(name))
     return (
       <ListItem key={`option-${next.name}-${next.dir}`}>
         <Button

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -1,5 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { debounce } from 'lodash'
+import { debounce } from '../utilities/object'
 
 // Kit selectors
 const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -205,4 +205,26 @@
       border-top-left-radius: 0;
     }
   }
+
+  .pb_text_input_kit.error {
+    .text_input_wrapper {
+      input:focus {
+        outline: none;
+      }
+    }
+
+    & + * input,
+    & + * select {
+      border-left-color: $red;
+    }
+  }
+
+  .pb_text_input_kit:not(.error):focus-within + .error,
+  .pb_text_input_kit:not(.error):focus-within + .pb_select .error {
+    input,
+    select {
+      border-left: none;
+      padding-left: calc(var(--iti-flag-width) + 1px);
+    }
+  }
 }

data/app/pb_kits/playbook/pb_icon/icon.test.js

@@ -16,7 +16,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw")
     })
 
     test("renders rotate prop", () => {[
@@ -31,7 +31,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass(`fa-user pb_icon_kit fa-fw fa-rotate-${rotateProp} far`)
+        expect(kit).toHaveClass(`pb_custom_icon svg-inline--fa rotate_${rotateProp} svg_fw`)
 
         cleanup()
     })
@@ -48,7 +48,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fa-flip-horizontal far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa flip_horizontal svg_fw")
     })
 
 
@@ -63,7 +63,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-spinner pb_icon_kit fa-fw fa-spin far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa spin svg_fw")
     })
 
     test("renders pull icon", () => {
@@ -77,7 +77,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw pull_left")
     })
 
     test("renders pull icon", () => {
@@ -91,7 +91,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw pull_left")
     })
 
     test("renders border around icon", () => {
@@ -105,7 +105,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-border fa-fw far")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_border svg_fw")
     })
 
     test("renders size prop", () => {
@@ -132,7 +132,7 @@ describe("Icon Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_kit fa-user fa-fw fa-${sizeProp} far`)
+            expect(kit).toHaveClass(`pb_custom_icon svg-inline--fa svg_${sizeProp} svg_fw`)
 
             cleanup()
         }) 
@@ -149,7 +149,7 @@ describe("Icon Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fas")
+        expect(kit).toHaveClass("pb_custom_icon svg-inline--fa svg_fw")
     })
 
     test("renders with color prop", () => {

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js

@@ -29,7 +29,7 @@ describe("IconCircle Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector('.pb_icon_kit')
+        const icon = kit.querySelector('.pb_custom_icon')
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -33,7 +33,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector(".fa-lightbulb-on.pb_icon_kit.fa-fw")
+        const icon = kit.querySelector(".pb_custom_icon")
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js

@@ -29,7 +29,7 @@ describe("IconValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector(".fa-clipboard.pb_icon_kit.fa-fw")
+        const icon = kit.querySelector(".pb_custom_icon")
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_label_value/label_value.test.js

@@ -56,7 +56,7 @@ describe("LabelValue Kit", () => {
             />
         )
         const kit = screen.getByTestId(testId)
-        const icon = kit.querySelector(".fa-truck.pb_icon_kit.fa-fw")
+        const icon = kit.querySelector(".pb_custom_icon")
         expect(icon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -10,6 +10,8 @@ $list-header-height: $space_lg;
 $list-footer-height: $space_lg;
 $list-border-radius: $border_rad_lighter;
 $card-border-radius: $border_rad_lightest;
+$bracket-connector-width: 45px;
+$bracket-border-width: 4px;
 
 
 [class^=pb_layout_kit] {
@@ -168,6 +170,62 @@ $card-border-radius: $border_rad_lightest;
     }
   }
 
+  &[class*=_bracket]{
+    display: flex;
+    overflow-x: scroll;
+
+    div.layout_round {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      flex-grow: 1;
+    }
+
+    .connector_container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+    }
+    .right_connector {
+      border-top: $bracket-border-width solid $border_light;
+      width: $bracket-connector-width;
+      margin-left: $bracket-connector-width;
+    }
+
+    .layout_round .layout_game {
+      position: relative;
+    }
+
+    .half_box {
+      content: '';
+      position: absolute;
+      top: calc(50% - $bracket-border-width / 2);
+      height: calc(100% + $bracket-border-width);
+      width: $bracket-connector-width;
+      right: -$bracket-connector-width;
+      border-top-right-radius: $border_radius_lg;
+      border-bottom-right-radius: $border_radius_lg;
+      border-top: $bracket-border-width solid $border_light;
+      border-bottom: $bracket-border-width solid $border_light;
+      border-right: $bracket-border-width solid $border_light;
+    }
+
+    .layout_round_label {
+      display: none;
+    }
+
+    @media (max-width: $screen-md-max) {
+      flex-direction: column;
+      .layout_round_label {
+        display: block;
+      }
+      .layout_round .layout_game::after,
+      .connector_container,
+      .half_box {
+        display: none !important;
+      }
+    }
+  }
 
   &[class*=_sidebar]{
     $layout_sizes: (

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -4,6 +4,9 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 
+import { Round, RoundLabel } from "./subcomponents/_round";
+import Game from "./subcomponents/_game";
+
 type LayoutPropTypes = {
   aria?: {[key: string]: string},
   children?: React.ReactChild[] | React.ReactChild,
@@ -18,7 +21,7 @@ type LayoutPropTypes = {
   size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
   variant?: "light" | "dark" | "gradient",
   transparent?: boolean,
-  layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry",
+  layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry" | "bracket",
 } & GlobalProps
 
 type LayoutSideProps = {
@@ -140,7 +143,7 @@ const Layout = (props: LayoutPropTypes) => {
   const htmlProps = buildHtmlProps(htmlOptions)
 
   const layoutCss =
-    layout == 'collection'
+    (layout == 'collection' || layout == 'bracket')
       ? `pb_layout_kit_${layout}`
       : layout == 'kanban'
         ? `pb_layout_kit_${layout}${responsiveClass}`
@@ -151,11 +154,9 @@ const Layout = (props: LayoutPropTypes) => {
         })
 
   const layoutCollapseCss =
-    layout == 'collection'
+    (layout == 'collection' || layout == 'kanban' || layout == 'bracket')
       ? ''
-      : layout == 'kanban'
-        ? ''
-        : buildCss('layout', position, 'collapse', collapse)
+      : buildCss('layout', position, 'collapse', collapse)
 
   const layoutChildren = React.Children.toArray(children)
 
@@ -175,6 +176,15 @@ const Layout = (props: LayoutPropTypes) => {
     (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
 
+  const numberOfRounds = Array.isArray(nonSideChildren) ? React.Children.toArray(children).filter(
+    (child) => {
+      return (child as React.ReactElement).type === Layout.Round;
+    }
+  ).length : 0
+  const bracketChildren = nonSideChildren.map(child =>
+    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds }) : child
+  )
+  
   const filteredProps = {...props}
   delete filteredProps?.position
 
@@ -196,7 +206,7 @@ const Layout = (props: LayoutPropTypes) => {
         style={dynamicInlineProps}
     >
       {subComponentTags('Side')}
-      {nonSideChildren}
+      {layout === 'bracket' ? bracketChildren : nonSideChildren}
     </div>
   )
 }
@@ -206,5 +216,8 @@ Layout.Body = Body
 Layout.Item = Item
 Layout.Header = Header
 Layout.Footer = Footer
+Layout.Round = Round
+Layout.Game = Game
+Layout.RoundLabel = RoundLabel
 
 export default Layout

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx

@@ -0,0 +1,190 @@
+import React from 'react'
+
+import Layout from '../../pb_layout/_layout'
+import Flex from '../../pb_flex/_flex'
+import Body from '../../pb_body/_body'
+import Caption from '../../pb_caption/_caption'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+
+const LayoutBracket = () => {
+  return (
+    <div>
+      <Layout
+          layout="bracket"
+      >
+        <Layout.RoundLabel>
+          <Caption>Wild Card</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Packers</Body>
+              <Body>10</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>22</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Vikings</Body>
+              <Body>9</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Rams</strong></Body>
+              <Body>27</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Lions</strong></Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>BYE</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Commanders</strong></Body>
+              <Body>23</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>Buccaneers</Body>
+              <Body>20</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>BYE</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Chargers</Body>
+              <Body>12</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Texans</strong></Body>
+              <Body>32</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Broncos</Body>
+              <Body>7</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Bills</strong></Body>
+              <Body>31</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Steelers</Body>
+              <Body>14</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Ravens</strong></Body>
+              <Body>28</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Divisional</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Rams</Body>
+              <Body>22</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>28</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Commanders</strong></Body>
+              <Body>45</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>Lions</Body>
+              <Body>31</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Texans</Body>
+              <Body>14</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+              <Body>23</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Ravens</Body>
+              <Body>25</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Bills</strong></Body>
+              <Body>27</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Conference</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Commanders</Body>
+              <Body>23</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>55</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Bills</Body>
+              <Body>29</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+              <Body>32</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Super Bowl</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Chiefs</Body>
+              <Body>22</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>40</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutBracket

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md

@@ -0,0 +1,5 @@
+Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
+
+On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
+
+Ensure that each `<Layout.Game>` maintains a consistent height for the bracket lines to lay out properly.

data/app/pb_kits/playbook/pb_layout/docs/example.yml

@@ -18,4 +18,5 @@ examples:
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
   - layout_masonry: Masonry Layout
+  - layout_bracket: Bracket Layout
 

data/app/pb_kits/playbook/pb_layout/docs/index.js

@@ -7,4 +7,5 @@ export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.j
 export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
 export { default as LayoutContent } from './_layout_content.jsx'
 export { default as LayoutMasonry } from './_layout_masonry.jsx'
+export { default as LayoutBracket } from './_layout_bracket.jsx'
 

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -82,6 +82,10 @@ test("render all layout variants", () => {
       layout: "masonry",
       expected: "pb_layout_kit_masonry_size_md_left_light",
     },
+    {
+      layout: "bracket",
+      expected: "pb_layout_kit_bracket",
+    },
   ]
 
   testValues.forEach(({ layout, expected }) => {