playbook_ui 14.16.0 → 14.17.0.pre.alpha.PBNTR766tablenestedcollapsiblerowsborderdoubling7256

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

@@ -12,7 +12,7 @@ const DropdownWithAutocomplete = (props) => {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Senior UX Engineer",
+      title: "Lead UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -25,18 +25,18 @@ const DropdownWithAutocomplete = (props) => {
       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/docs/_dropdown_with_autocomplete_and_custom_display.jsx

@@ -15,7 +15,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Senior UX Engineer",
+      title: "Lead UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -28,18 +28,18 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
       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/docs/_dropdown_with_custom_display.jsx

@@ -15,7 +15,7 @@ const DropdownWithCustomDisplay = (props) => {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Senior UX Engineer",
+      title: "Lead UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -28,18 +28,18 @@ const DropdownWithCustomDisplay = (props) => {
       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/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

@@ -85,8 +85,16 @@
     .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      border-right-width: 0;
+      border-right-color: transparent;
     }
+    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
+    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
+      border-right-color: $primary;
+    } 
+    [class^=pb_text_input_kit].error .text_input_wrapper input,
+    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
+      border-right-color: $error;
+    }   
   }
 
   & > [class^=pb_phone_number_input]:not(:first-child) {
@@ -107,8 +115,16 @@
     .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      border-right: none;
+      border-right-color: transparent;
     }
+    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
+    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
+      border-right-color: $primary;
+    } 
+    [class^=pb_text_input_kit].error .text_input_wrapper input,
+    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
+      border-right-color: $error;
+    }  
   }
 
   &[class*=rails] > [class^=pb_date_picker_kit] {
@@ -205,4 +221,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_form_group/docs/_form_group_select.html.erb

@@ -1,5 +1,4 @@
-<div>
-
+<%= pb_rails("flex", props: {orientation: "column", row_gap:"md"}) do %>
   <%= pb_rails("form_group") do %>
     <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
     <%= pb_rails("select", props: {
@@ -17,8 +16,6 @@
       ]
     }) %>
   <% end %>
-  <br>
-  <br>
   <%= pb_rails("form_group") do %>
     <%= pb_rails("select", props: {
         blank_selection: "Phone",
@@ -32,4 +29,17 @@
         id: "phone"
     }) %>
   <% end %>
-</div>
+  <%= pb_rails("form_group") do %>
+      <%= pb_rails("phone_number_input", props: {
+        id: "phone2"
+      }) %>
+      <%= pb_rails("select", props: {
+        blank_selection: "Phone",
+        options: [
+          { value: "Cell" },
+          { value: "Work" },
+          { value: "Home" },
+        ]
+      }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -4,6 +4,7 @@ import FormGroup from '../_form_group'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
+import Flex from '../../pb_flex/_flex'
 
 const FormGroupSelect = (props) => {
   const options = [
@@ -25,7 +26,10 @@ const FormGroupSelect = (props) => {
   ]
 
   return (
-    <div>
+    <Flex 
+        orientation="column" 
+        rowGap="md"
+    >
       <FormGroup>
         <TextInput
             placeholder="Enter Artist Name"
@@ -37,18 +41,29 @@ const FormGroupSelect = (props) => {
             {...props}
         />
       </FormGroup>
-      <br />
-      <br />
       <FormGroup>
         <Select
             blankSelection="Phone"
             options={phoneOptions}
-            />
+            {...props}
+        />
         <PhoneNumberInput
             id='default'
+            {...props}
         />
     </FormGroup>
-    </div>
+    <FormGroup>
+      <PhoneNumberInput
+          id='default-2'
+          {...props}
+      />
+      <Select
+          blankSelection="Phone"
+          options={phoneOptions}
+          {...props}
+      />
+    </FormGroup>
+    </Flex>
   )
 }
 

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,131 @@ $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;
+    }
+
+    .polygon_node {
+      position: absolute;
+      top: calc(50% - 5px);
+      right: -10px;
+
+      width: 0;
+      height: 0;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-left: 10px solid $border_light;
+    }
+
+    .layout_round_label {
+      display: none;
+    }
+
+    .layout_participant,
+    .layout_participant_winner,
+    .layout_participant_self,
+    .layout_participant_winner_self,
+    .layout_participant_winner_self_last {
+      height: 60px;
+    }
+
+    .layout_tbd {
+      height: 140px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .layout_participant_winner,
+    .layout_participant_self,
+    .layout_participant_winner_self,
+    .layout_participant_winner_self_last {
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        width: 4px;
+        height: 100%;
+      }
+    }
+
+    .layout_participant_winner::after {
+      right: 0;
+      background: $product_6_highlight;
+    }
+
+    .layout_participant_self::after {
+      left: 0;
+      background: $category_1;
+    }
+
+    .layout_participant_winner_self::after {
+      right: 0;
+      background: $product_6_highlight;
+    }
+
+    .layout_participant_winner_self_last::after {
+      left: 0;
+      background: $category_1;
+    }
+
+    .game_separator {
+      &::before, &::after {
+        height: 2px;
+      }
+    }
+
+    @media (max-width: $screen-md-max) {
+      flex-direction: column;
+      .layout_round_label {
+        display: block;
+      }
+      .layout_round .layout_game::after,
+      .connector_container,
+      .half_box,
+      .polygon_node {
+        display: none !important;
+      }
+    }
+  }
 
   &[class*=_sidebar]{
     $layout_sizes: (