playbook_ui 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6884 → 14.16.0.pre.alpha.PLAY1929bracketlayout6927

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,61 @@ $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 {
+        display: none;
+      }
+    }
+  }
 
   &[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,11 @@ const Layout = (props: LayoutPropTypes) => {
     (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
 
+  const numberOfRounds = Array.isArray(nonSideChildren) ? nonSideChildren.filter((child: any) => child.type?.name === 'Round').length : 0
+  const bracketChildren = nonSideChildren.map(child =>
+    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds }) : child
+  )
+  
   const filteredProps = {...props}
   delete filteredProps?.position
 
@@ -196,7 +202,7 @@ const Layout = (props: LayoutPropTypes) => {
         style={dynamicInlineProps}
     >
       {subComponentTags('Side')}
-      {nonSideChildren}
+      {layout === 'bracket' ? bracketChildren : nonSideChildren}
     </div>
   )
 }
@@ -206,5 +212,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 }) => {

data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
+
+import Card from '../../pb_card/_card'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+
+type LayoutGameProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+  numberOfRounds: number,
+  numberOfGames: number,
+  isOdd: boolean,
+} & GlobalProps
+
+// Game component (modeled after Item)
+const Game = (props: LayoutGameProps) => {
+  const { children, className, numberOfRounds, numberOfGames, isOdd } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  
+  const isMultiple = Array.isArray(children)
+  const numberOfChildren = isMultiple ? children.length : 0
+
+  let ratio = 0
+  let exponent
+  if (numberOfGames > 1) {
+    exponent = (numberOfRounds) - Math.log2(numberOfGames) - 1
+    ratio = 2 ** exponent
+  }
+  
+  if (numberOfChildren === 2) {
+    const [firstChild, secondChild] = React.Children.toArray(children)
+  
+    if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) { 
+    return (
+      <div
+          className={classnames('layout_game', globalProps(props), className)}
+          style={dynamicInlineProps}
+      >
+        <Card
+            marginY="xs"
+            padding="none"
+            shadow="deep"
+        >
+          <Card.Body padding="xs">{firstChild}</Card.Body>
+          <SectionSeparator />
+          <Card.Body padding="xs">{secondChild}</Card.Body>
+        </Card>
+        {isOdd && numberOfGames > 1  &&
+          <div
+              className="half_box"
+              style={{ height: `calc(${ratio} * 100% + 4px)` }}
+          />
+        }
+      </div>
+      )
+    }
+  }
+  
+  return (
+    <div
+        className={classnames('layout_game', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
+    {((!isMultiple && children) || numberOfChildren >= 1 )? (
+      children
+    ) : (
+      <Card
+          marginY="xs"
+          padding="none"
+          shadow="deep"
+      >
+        <Card.Body padding="xs">To be determined...</Card.Body>
+        <SectionSeparator />
+        <Card.Body padding="xs">To be determined...</Card.Body>
+      </Card>
+    )}
+      {isOdd && numberOfGames > 1  &&
+        <div
+            className="half_box"
+            style={{ height: `calc(${ratio} * 100% + 4px)` }}
+        />
+      }
+    </div>
+  )
+}
+
+export default Game

data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
+
+type LayoutRoundLabelProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+} & GlobalProps
+
+export const RoundLabel = (props: LayoutRoundLabelProps) => {
+  const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  return (
+    <div
+        className={classnames('layout_round_label', className)}
+        style={dynamicInlineProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+type LayoutRoundProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+  numberOfRounds: number,
+} & GlobalProps
+
+export const Round = (props: LayoutRoundProps) => {
+  const { children, className, numberOfRounds } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  const numberOfChildren = Array.isArray(children) ? children.length : 0
+
+  const childrenWithProps = Array.isArray(children) ? children.map((child, index) =>
+    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, numberOfGames: numberOfChildren, isOdd: index % 2 === 0 }) : child
+  ) : children
+
+  const rightConnectors = Array.from({ length: numberOfChildren / 2 }, (_, index) => (
+    <div
+        className="right_connector"
+        key={`right_connector_${index}`}
+    />
+  ))
+
+  return (
+    <>
+      <div
+          className={classnames('layout_round', globalProps(props), className)}
+          style={dynamicInlineProps}
+      >
+        {childrenWithProps}
+      </div>
+      <div className="connector_container">{rightConnectors}</div>
+    </>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash'
+import { debounce } from "../../utilities/object" 
 import { useCallback, useMemo, useState } from 'react'
 
 export default function useVisibility(initialState = false) {

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -7,11 +7,12 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
+import { cloneDeep } from "../utilities/object";
+
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
-import { cloneDeep } from "lodash";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";