playbook_ui 14.17.0.pre.alpha.PBNTR935draggablelinedesign7118 → 14.17.0.pre.alpha.PLAY1597tiptapupgrade7304

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] {

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_layout/_layout.scss

@@ -210,10 +210,78 @@ $bracket-border-width: 4px;
       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 {
@@ -221,7 +289,8 @@ $bracket-border-width: 4px;
       }
       .layout_round .layout_game::after,
       .connector_container,
-      .half_box {
+      .half_box,
+      .polygon_node {
         display: none !important;
       }
     }

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

@@ -6,6 +6,7 @@ import { GlobalProps, globalProps, globalInlineProps } from '../utilities/global
 
 import { Round, RoundLabel } from "./subcomponents/_round";
 import Game from "./subcomponents/_game";
+import Participant from "./subcomponents/_participant";
 
 type LayoutPropTypes = {
   aria?: {[key: string]: string},
@@ -176,13 +177,38 @@ const Layout = (props: LayoutPropTypes) => {
     (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
 
-  const numberOfRounds = Array.isArray(nonSideChildren) ? React.Children.toArray(children).filter(
+  const numberOfRounds = Array.isArray(children) ? React.Children.toArray(children).filter(
     (child) => {
       return (child as React.ReactElement).type === Layout.Round;
     }
   ).length : 0
+
+  const lastRoundWithSelf = React.Children.toArray(children).filter((child) => {
+    if ((child as React.ReactElement).type !== Layout.Round) {
+      return false
+    }
+  
+    const roundElement = child as React.ReactElement
+  
+    const gameChildren = React.Children.toArray(roundElement.props.children)
+  
+    const hasWinningSelfParticipant = gameChildren.some((gameChild) => {
+      const gameElement = gameChild as React.ReactElement
+  
+      const participantChildren = React.Children.toArray(gameElement.props.children)
+  
+      return participantChildren.some((participantChild) => {
+        const participantElement = participantChild as React.ReactElement
+        const { self } = participantElement.props
+        return self === true
+      })
+    })
+  
+    return hasWinningSelfParticipant
+  }).length
+
   const bracketChildren = nonSideChildren.map(child =>
-    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds }) : child
+    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, lastRoundWithSelf }) : child
   )
   
   const filteredProps = {...props}
@@ -219,5 +245,6 @@ Layout.Footer = Footer
 Layout.Round = Round
 Layout.Game = Game
 Layout.RoundLabel = RoundLabel
+Layout.Participant = Participant
 
 export default Layout