playbook_ui 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY20787400

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

@@ -0,0 +1,394 @@
+import React from 'react'
+
+import Layout from '../../pb_layout/_layout'
+import Caption from '../../pb_caption/_caption'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+
+const teamData = {
+  eagles: {
+    avatar:"https://images.unsplash.com/photo-1628703117067-fb7c9c20946e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZWFnbGVzfGVufDB8fDB8fHww",
+    name:"Eagles",
+    rank:"#1 NFC East",
+    territory:"PHI",
+  },
+  packers: {
+    avatar:"https://images.unsplash.com/photo-1486297678162-eb2a19b0a32d?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    name:"Packers",
+    rank:"#3 NFC North",
+    territory:"GB",
+  },
+  vikings: {
+    avatar:"https://images.unsplash.com/photo-1525540796810-55f9fbc5592f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHZpa2luZ3xlbnwwfHwwfHx8MA%3D%3D",
+    name:"Vikings",
+    rank:"#2 NFC North",
+    territory:"MIN",
+  },
+  rams: {
+    avatar:"https://images.unsplash.com/photo-1490739043913-239b6cdf4084?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    name:"Rams",
+    rank:"#1 NFC West",
+    territory:"LAR",
+  },
+  lions: {
+    avatar:"https://images.unsplash.com/photo-1614027164847-1b28cfe1df60?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    name:"Lions",
+    rank:"#1 NFC North",
+    territory:"DET",
+  },
+  commanders: {
+    avatar:"https://images.unsplash.com/photo-1501466044931-62695aada8e9?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    name:"Commanders",
+    rank:"#2 NFC East",
+    territory:"WAS",
+  },
+  buccaneers: {
+    avatar:"https://images.unsplash.com/photo-1584116843008-46d529f04145?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    name:"Buccaneers",
+    rank:"#1 NFC South",
+    territory:"TB",
+  },
+  chiefs: {
+    avatar:"https://plus.unsplash.com/premium_photo-1697729864667-57f5f29e946b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8a2Fuc2FzJTIwY2l0eXxlbnwwfHwwfHx8MA%3D%3D",
+    name:"Chiefs",
+    rank:"#1 AFC West",
+    territory:"KC",
+  },
+  chargers: {
+    avatar:"https://images.unsplash.com/photo-1529310399831-ed472b81d589?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    name:"Chargers",
+    rank:"#2 AFC West",
+    territory:"LAC",
+  },
+  texans: {
+    avatar:"https://images.unsplash.com/photo-1545345540-ea5d968030af?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    name:"Texans",
+    rank:"#1 AFC South",
+    territory:"HOU",
+  },
+  broncos: {
+    avatar:"https://images.unsplash.com/photo-1553284965-83fd3e82fa5a?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    name:"Broncos",
+    rank:"#3 AFC West",
+    territory:"DEN",
+  },
+  bills: {
+    avatar:"https://images.unsplash.com/photo-1575414914265-ebc9aa2637f4?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    name:"Bills",
+    rank:"#1 AFC East",
+    territory:"BUF",
+  },
+  steelers: {
+    avatar:"https://plus.unsplash.com/premium_photo-1697730155764-cc8ca8f78cbe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGl0dHNidXJnaHxlbnwwfHwwfHx8MA%3D%3D",
+    name:"Steelers",
+    rank:"#2 AFC North",
+    territory:"PIT",
+  },
+  ravens: {
+    avatar:"https://images.unsplash.com/photo-1433888376991-1297486ba3f5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cmF2ZW58ZW58MHx8MHx8fDA%3D",
+    name:"Ravens",
+    rank:"#1 AFC North",
+    territory:"BAL",
+  },
+  bye: {
+    avatar:"",
+    name:"BYE",
+    rank:"",
+    territory:"",
+  },
+}
+
+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>
+            <Layout.Participant
+                avatar={teamData.packers.avatar}
+                name={teamData.packers.name}
+                points="10"
+                rank={teamData.packers.rank}
+                territory={teamData.packers.territory}
+            />
+            <Layout.Participant
+                avatar={teamData.eagles.avatar}
+                name={teamData.eagles.name}
+                points="22"
+                rank={teamData.eagles.rank}
+                self
+                territory={teamData.eagles.territory}
+                winner
+            />
+          </Layout.Game>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.vikings.avatar}
+                name={teamData.vikings.name}
+                points="9"
+                rank={teamData.vikings.rank}
+                territory={teamData.vikings.territory}
+            />
+            <Layout.Participant
+                avatar={teamData.rams.avatar}
+                name={teamData.rams.name}
+                points="27"
+                rank={teamData.rams.rank}
+                territory={teamData.rams.territory}
+                winner
+            />
+          </Layout.Game>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.lions.avatar}
+                name={teamData.lions.name}
+                points=""
+                rank={teamData.lions.rank}
+                territory={teamData.lions.territory}
+                winner
+            />
+            <Layout.Participant
+                avatar={teamData.bye.avatar}
+                name={teamData.bye.name}
+                points=""
+                rank={teamData.bye.rank}
+                territory={teamData.bye.territory}
+            />
+          </Layout.Game>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.commanders.avatar}
+                name={teamData.commanders.name}
+                points="23"
+                rank={teamData.commanders.rank}
+                territory={teamData.commanders.territory}
+                winner
+            />
+            <Layout.Participant
+                avatar={teamData.buccaneers.avatar}
+                name={teamData.buccaneers.name}
+                points="20"
+                rank={teamData.buccaneers.rank}
+                territory={teamData.buccaneers.territory}
+            />
+          </Layout.Game>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.chiefs.avatar}
+                name={teamData.chiefs.name}
+                points=""
+                rank={teamData.chiefs.rank}
+                territory={teamData.chiefs.territory}
+                winner
+            />
+            <Layout.Participant
+                avatar={teamData.bye.avatar}
+                name={teamData.bye.name}
+                points=""
+                rank={teamData.bye.rank}
+                territory={teamData.bye.territory}
+            />
+          </Layout.Game>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.chargers.avatar}
+                name={teamData.chargers.name}
+                points="12"
+                rank={teamData.chargers.rank}
+                territory={teamData.chargers.territory}
+            />
+            <Layout.Participant
+                avatar={teamData.texans.avatar}
+                name={teamData.texans.name}
+                points="32"
+                rank={teamData.texans.rank}
+                territory={teamData.texans.territory}
+                winner
+            />
+          </Layout.Game>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.broncos.avatar}
+                name={teamData.broncos.name}
+                points="7"
+                rank={teamData.broncos.rank}
+                territory={teamData.broncos.territory}
+            />
+            <Layout.Participant
+                avatar={teamData.bills.avatar}
+                name={teamData.bills.name}
+                points="31"
+                rank={teamData.bills.rank}
+                territory={teamData.bills.territory}
+                winner
+            />
+          </Layout.Game>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.steelers.avatar}
+                name={teamData.steelers.name}
+                points="14"
+                rank={teamData.steelers.rank}
+                territory={teamData.steelers.territory}
+            />
+            <Layout.Participant
+                avatar={teamData.ravens.avatar}
+                name={teamData.ravens.name}
+                points="28"
+                rank={teamData.ravens.rank}
+                territory={teamData.ravens.territory}
+                winner
+            />
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Divisional</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.rams.avatar}
+                name={teamData.rams.name}
+                points="22"
+                rank={teamData.rams.rank}
+                territory={teamData.rams.territory}
+            />
+            <Layout.Participant
+                avatar={teamData.eagles.avatar}
+                name={teamData.eagles.name}
+                points="28"
+                rank={teamData.eagles.rank}
+                self
+                territory={teamData.eagles.territory}
+                winner
+            />
+          </Layout.Game>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.commanders.avatar}
+                name={teamData.commanders.name}
+                points="45"
+                rank={teamData.commanders.rank}
+                territory={teamData.commanders.territory}
+                winner
+            />
+            <Layout.Participant
+                avatar={teamData.lions.avatar}
+                name={teamData.lions.name}
+                points="31"
+                rank={teamData.lions.rank}
+                territory={teamData.lions.territory}
+            />
+          </Layout.Game>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.texans.avatar}
+                name={teamData.texans.name}
+                points="14"
+                rank={teamData.texans.rank}
+                territory={teamData.texans.territory}
+            />
+            <Layout.Participant
+                avatar={teamData.chiefs.avatar}
+                name={teamData.chiefs.name}
+                points="23"
+                rank={teamData.chiefs.rank}
+                territory={teamData.chiefs.territory}
+                winner
+            />
+          </Layout.Game>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.ravens.avatar}
+                name={teamData.ravens.name}
+                points="25"
+                rank={teamData.ravens.rank}
+                territory={teamData.ravens.territory}
+            />
+            <Layout.Participant
+                avatar={teamData.bills.avatar}
+                name={teamData.bills.name}
+                points="27"
+                rank={teamData.bills.rank}
+                territory={teamData.bills.territory}
+                winner
+            />
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Conference</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.commanders.avatar}
+                name={teamData.commanders.name}
+                points="23"
+                rank={teamData.commanders.rank}
+                territory={teamData.commanders.territory}
+            />
+            <Layout.Participant
+                avatar={teamData.eagles.avatar}
+                name={teamData.eagles.name}
+                points="55"
+                rank={teamData.eagles.rank}
+                self
+                territory={teamData.eagles.territory}
+                winner
+            />
+          </Layout.Game>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.bills.avatar}
+                name={teamData.bills.name}
+                points="29"
+                rank={teamData.bills.rank}
+                territory={teamData.bills.territory}
+            />
+            <Layout.Participant
+                avatar={teamData.chiefs.avatar}
+                name={teamData.chiefs.name}
+                points="32"
+                rank={teamData.chiefs.rank}
+                territory={teamData.chiefs.territory}
+                winner
+            />
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Super Bowl</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round>
+          <Layout.Game>
+            <Layout.Participant
+                avatar={teamData.chiefs.avatar}
+                name={teamData.chiefs.name}
+                points="22"
+                rank={teamData.chiefs.rank}
+                territory={teamData.chiefs.territory}
+            />
+            <Layout.Participant
+                avatar={teamData.eagles.avatar}
+                name={teamData.eagles.name}
+                points="40"
+                rank={teamData.eagles.rank}
+                self
+                territory={teamData.eagles.territory}
+                winner
+            />
+          </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>`, `<Layout.Game>`, and/or `<Layout.Participant>` to make a bracket layout. Feel free to use custom components in place of the template components based on your needs. 
+
+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,121 @@
+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'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+
+type LayoutGameProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+  numberOfRounds: number,
+  numberOfGames: number,
+  lastRoundWithSelf?: number,
+  isOdd: boolean,
+} & GlobalProps
+
+// Game component (modeled after Item)
+const Game = (props: LayoutGameProps) => {
+  const { children, className, numberOfRounds, numberOfGames, isOdd, lastRoundWithSelf } = props
+  const dynamicInlineProps = globalInlineProps(props)
+
+  const numberOfChildren = Array.isArray(children) ? children.length : 0
+
+  const isMultiple = Array.isArray(children)
+
+  let ratio = 0
+  let exponent
+  let currentRound = numberOfRounds
+  if (numberOfGames > 1) {
+    exponent = (numberOfRounds) - Math.log2(numberOfGames) - 1
+    ratio = 2 ** exponent
+
+    currentRound = exponent + 1
+  }
+
+  let hasWinner = false
+  const hasLastWinnerAndSelf = lastRoundWithSelf === currentRound
+  if (numberOfChildren === 2) {
+    const [firstChildWithoutProps, secondChildWithoutProps] = React.Children.toArray(children)
+
+    const firstChild = React.isValidElement(firstChildWithoutProps) ? React.cloneElement(firstChildWithoutProps, { hasLastWinnerAndSelf }) : firstChildWithoutProps
+    const secondChild = React.isValidElement(secondChildWithoutProps) ? React.cloneElement(secondChildWithoutProps, { hasLastWinnerAndSelf }) : secondChildWithoutProps
+
+    if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) {
+      if (
+        firstChild?.props && typeof firstChild.props === 'object' && 'winner' in firstChild.props ||
+        secondChild?.props && typeof secondChild.props === 'object' && 'winner' in secondChild.props
+      ) {
+        hasWinner = true
+      }
+      return (
+        <div
+            className={classnames('layout_game', globalProps(props), className)}
+            style={dynamicInlineProps}
+        >
+          <Card
+              marginY="xs"
+              overflow="hidden"
+              padding="none"
+              shadow="deep"
+          >
+            <Card.Body padding="none">{firstChild}</Card.Body>
+            <SectionSeparator className="game_separator"/>
+            <Card.Body padding="none">{secondChild}</Card.Body>
+          </Card>
+          {isOdd && numberOfGames > 1 &&
+            <div
+                className="half_box"
+                style={{ height: `calc(${ratio} * 100% + 4px)` }}
+            />
+          }
+          {numberOfGames > 1 && hasWinner &&
+            <div className="polygon_node" />
+          }
+        </div>
+      )
+    }
+  }
+
+  return (
+    <div
+        className={classnames('layout_game', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
+      {((!isMultiple && children) || numberOfChildren >= 1) ? (
+        children
+      ) : (
+        <div className="layout_tbd">
+          <Card
+              marginY="xs"
+              padding="none"
+              shadow="deep"
+          >
+            <Card.Body padding="xs">
+              <Body color="light">
+                To be determined...
+              </Body>
+            </Card.Body>
+            <SectionSeparator className="game_separator"/>
+            <Card.Body padding="xs">
+              <Body color="light">
+                To be determined...
+              </Body>
+            </Card.Body>
+          </Card>
+        </div>
+      )}
+      {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/_participant.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildCss } from '../../utilities/props'
+import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
+
+import Avatar from "../../pb_avatar/_avatar";
+import Body from "../../pb_body/_body";
+import Flex from "../../pb_flex/_flex";
+import Badge from "../../pb_badge/_badge";
+import Detail from "../../pb_detail/_detail";
+import Background from "../../pb_background/_background";
+
+type LayoutParticipantProps = {
+  className?: string,
+  name?: string,
+  territory?: string,
+  points?: string,
+  rank?: string,
+  avatar?: string,
+  winner?: boolean,
+  self?: boolean,
+} & GlobalProps
+
+export const Participant = (props: LayoutParticipantProps) => {
+  const { className, name = 'To be determined...', territory = '', points, rank, avatar, winner, self, hasLastWinnerAndSelf } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  const isLastWinnerAndSelf = hasLastWinnerAndSelf && self && winner
+  const classes = classnames(buildCss('layout_participant', winner ? 'winner' : '', self ? 'self' : '', isLastWinnerAndSelf ? 'last' : ''), globalProps(props), className)
+  return (
+    <Background
+        backgroundColor={winner ? "success_subtle" : "white"}
+        className={classes}
+        padding="xs"
+        style={dynamicInlineProps}
+    >
+      <Flex justify="between">
+        <Avatar
+            imageUrl={avatar}
+            marginRight="sm"
+            name={name}
+            size="sm"
+        />
+        <Body flexGrow={1}>
+          <Flex justify="between">
+            <Body
+                color={winner && !isLastWinnerAndSelf ? "success" : "default"}
+                truncate={1}
+            >
+              {winner ? <strong>{name}{self ? ' (You)' : ''}</strong> : name + (self && !isLastWinnerAndSelf ? ' (You)' : '')}
+            </Body>
+            <Body
+                color={winner && !isLastWinnerAndSelf ? "success" : "light"}
+                display="flex"
+            >
+              {points && (<>
+                <strong>{points}</strong>
+                <Detail
+                    color={winner && !isLastWinnerAndSelf ? "success" : "light"}
+                    text="pts"
+                />
+              </>)}
+            </Body>
+          </Flex>
+          <Body color="light">
+            {territory}
+            &nbsp;
+            <Badge
+                text={rank}
+                variant={winner && !isLastWinnerAndSelf ? "success" : self ? "notification" : "neutral"}
+            />
+          </Body>
+        </Body>
+      </Flex>
+    </Background>
+  )
+}
+
+export default Participant