playbook_ui 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27221 → 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27240

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7a46a7cfd3f1c08f875db7a6363d442799c0def9c2ab1cca40e8d0d9d309dcb4
-  data.tar.gz: aa0f7e40b010fd97c77ad02bc3f422f997a3f812b4e018a14c5473eb07fffbd7
+  metadata.gz: cfba70a073b0d33aacdfbea9a358801e6db55becf21f92a4d349bb09c93c8f01
+  data.tar.gz: 56d5e22414e5b0f7f5d4f7d0c0ac959011769c77c9c80825d0640a93f998128c
 SHA512:
-  metadata.gz: 18fecbd764fcd254da81bfa222033a4028383ffaccfd340ac23c802db2a4d0b3b5df472d817cd348fe9b9e70ec945210d7bb87aa712867edfbecfdf10e936b11
-  data.tar.gz: 9cf67ba6bd753534a49214e9fa590695bfefc950bbb315a7c2225ad973d8124f2ceaa5136c74b5aa81d1f787b99b640e2a97b4676c10da17da63d18485b7ad7c
+  metadata.gz: 1167069b006efc96683510cab2ffec8b5428c7e608feb864bc85d17a530dcdf8d41e7d9d6bf618bd58fc4746b948bd477af372082fad188da6464d62f771c91f
+  data.tar.gz: d08485abd673a09f6c0d410b4617aaf65abc44d6bf8780af2e3d0121285bdebb8770ef434c092cb7d43dfc100bd1a6fdbf54128776e813246e9a9b61bb8b3677

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -55,4 +55,30 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
       transition: 700ms ease-in;
     }
   }
+
+  &[class*=imageoverlay] {
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      background-color: inherit;
+    }
+
+    * {
+      position: relative;
+      z-index: 2;
+    }
+  }
+
+  @each $key, $value in $opacity {
+    &.imageoverlay_#{$key}::before {
+      opacity: $value;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -25,6 +25,7 @@ type BackgroundProps = {
   backgroundPosition?: ResponsiveProp<string> | string,
   backgroundRepeat?: ResponsiveProp<BackgroundRepeat> | BackgroundRepeat,
   imageUrl?: ResponsiveProp<string> | string,
+  imageOverlay?: 'opacity_1' | 'opacity_2' | 'opacity_3' | 'opacity_4' | 'opacity_5' | 'opacity_6' | 'opacity_7' | 'opacity_8' | 'opacity_9' | 'opacity_10',
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,
   customColor?: string,
@@ -83,11 +84,12 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     data = {},
     htmlOptions = {},
     id,
+    imageOverlay,
     imageUrl = '',
     tag = 'div',
     transition = '',
   } = props
-  
+
   const [responsiveProps, setResponsiveProps] = useState({
     backgroundSize: getResponsiveValue(backgroundSize),
     backgroundPosition: getResponsiveValue(backgroundPosition),
@@ -132,6 +134,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
       [`pb_background_color_${resBackgroundColor}`]: resBackgroundColor && !customColor,
       [`pb_background_custom_color`]: !!customColor,
     },
+    imageOverlay ? `imageoverlay_${imageOverlay}` : "",
     className
   );
 
@@ -155,7 +158,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  
+
   return (
     <Tag
         {...ariaProps}
@@ -168,7 +171,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     >
       {children}
     </Tag>
-  
   )
 }
 

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -37,3 +37,8 @@ test('backgroundSize = auto', () => {
   const kit = renderKit(Background, props, { classname: "background-image", imageUrl: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", backgroundSize: 'auto' })
   expect(kit).toHaveStyle('background-size: auto')
 })
+
+test('applies correct overlay class when imageOverlay prop is provided', () => {
+  const kit = renderKit(Background, props, { imageOverlay: 'opacity_6' });
+  expect(kit).toHaveClass('imageoverlay_opacity_6');
+});

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import Background from "../../pb_background/_background"
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Title from "../../pb_title/_title"
+
+const BackgroundOverlay = (props) => {
+  return (
+    <Background
+        alt="colorful background"
+        backgroundColor="category_21"
+        className="background lazyload"
+        imageOverlay="opacity_2"
+        imageUrl="https://unsplash.it/500/400/?image=633"
+        {...props}
+      >
+        <Flex
+            orientation="column"
+            vertical="center"
+            {...props}
+        >
+          <FlexItem>
+            <Title
+                dark
+                padding="lg"
+                size={1}
+                text="Background Kit Image"
+            />
+          </FlexItem>
+        </Flex>
+      </Background>
+  )
+}
+
+export default BackgroundOverlay

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md

@@ -0,0 +1 @@
+An overlay can be added to the background image by setting the `imageOverlay` prop and adding a `backgroundColor`. The `imageOverlay` prop can be set to any opacity ranging from `opacity_1` to `opacity_10`.

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

@@ -19,3 +19,4 @@ examples:
   - background_status_subtle: Status Subtle
   - background_category: Category
   - background_size: Size
+  - background_overlay: Overlay

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

@@ -6,3 +6,4 @@ export { default as BackgroundStatus } from './_background_status.jsx'
 export { default as BackgroundStatusSubtle } from './_background_status_subtle.jsx'
 export { default as BackgroundCategory } from './_background_category.jsx'
 export { default as BackgroundSize } from './_background_size.jsx'
+export { default as BackgroundOverlay } from './_background_overlay.jsx'

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

@@ -233,14 +233,16 @@ $bracket-border-width: 4px;
     }
 
     .layout_tbd {
-      height: 139px;
+      height: 140px;
       display: flex;
       flex-direction: column;
       justify-content: center;
     }
 
     .layout_participant_winner,
-    .layout_participant_self {
+    .layout_participant_self,
+    .layout_participant_winner_self,
+    .layout_participant_winner_self_last {
       position: relative;
 
       &::after {
@@ -262,6 +264,22 @@ $bracket-border-width: 4px;
       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 {

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

@@ -177,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}

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

@@ -121,6 +121,7 @@ const LayoutBracket = () => {
                 name={teamData.eagles.name}
                 points="22"
                 rank={teamData.eagles.rank}
+                self
                 territory={teamData.eagles.territory}
                 winner
             />
@@ -263,6 +264,7 @@ const LayoutBracket = () => {
                 name={teamData.eagles.name}
                 points="28"
                 rank={teamData.eagles.rank}
+                self
                 territory={teamData.eagles.territory}
                 winner
             />
@@ -337,6 +339,7 @@ const LayoutBracket = () => {
                 name={teamData.eagles.name}
                 points="55"
                 rank={teamData.eagles.rank}
+                self
                 territory={teamData.eagles.territory}
                 winner
             />
@@ -379,6 +382,7 @@ const LayoutBracket = () => {
                 rank={teamData.eagles.rank}
                 self
                 territory={teamData.eagles.territory}
+                winner
             />
           </Layout.Game>
         </Layout.Round>

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

@@ -13,12 +13,13 @@ type LayoutGameProps = {
   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 } = props
+  const { children, className, numberOfRounds, numberOfGames, isOdd, lastRoundWithSelf } = props
   const dynamicInlineProps = globalInlineProps(props)
 
   const numberOfChildren = Array.isArray(children) ? children.length : 0
@@ -27,14 +28,21 @@ const Game = (props: LayoutGameProps) => {
 
   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 [firstChild, secondChild] = React.Children.toArray(children)
+    const [firstChildWithoutProps, secondChildWithoutProps] = React.Children.toArray(children)
+
+    const firstChild = React.cloneElement(firstChildWithoutProps, { hasLastWinnerAndSelf })
+    const secondChild = React.cloneElement(secondChildWithoutProps, { hasLastWinnerAndSelf })
 
     if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) {
       if ('winner' in firstChild.props || 'winner' in secondChild.props) {
@@ -52,7 +60,7 @@ const Game = (props: LayoutGameProps) => {
               shadow="deep"
           >
             <Card.Body padding="none">{firstChild}</Card.Body>
-            <SectionSeparator />
+            <SectionSeparator className="game_separator"/>
             <Card.Body padding="none">{secondChild}</Card.Body>
           </Card>
           {isOdd && numberOfGames > 1 &&
@@ -84,13 +92,13 @@ const Game = (props: LayoutGameProps) => {
               shadow="deep"
           >
             <Card.Body padding="xs">
-              <Body color="lighter">
+              <Body color="light">
                 To be determined...
               </Body>
             </Card.Body>
-            <SectionSeparator />
+            <SectionSeparator className="game_separator"/>
             <Card.Body padding="xs">
-              <Body color="lighter">
+              <Body color="light">
                 To be determined...
               </Body>
             </Card.Body>

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

@@ -23,9 +23,10 @@ type LayoutParticipantProps = {
 } & GlobalProps
 
 export const Participant = (props: LayoutParticipantProps) => {
-  const { className, name = 'To be determined...', territory = '', points, rank, avatar, winner, self } = props
+  const { className, name = 'To be determined...', territory = '', points, rank, avatar, winner, self, hasLastWinnerAndSelf } = props
   const dynamicInlineProps = globalInlineProps(props)
-  const classes = classnames(buildCss('layout_participant', winner ? 'winner' : '', self ? 'self' : ''), globalProps(props), className)
+  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"}
@@ -42,15 +43,15 @@ export const Participant = (props: LayoutParticipantProps) => {
         />
         <Body flexGrow={1}>
           <Flex justify="between">
-            <Body color={winner ? "success" : "default"}>{winner ? <strong>{name}</strong> : name}{self ? ' (You)' : ''}</Body>
+            <Body color={winner && !isLastWinnerAndSelf ? "success" : "default"}>{winner ? <strong>{name}{self ? ' (You)' : ''}</strong> : name + (self && !isLastWinnerAndSelf ? ' (You)' : '')}</Body>
             <Body
-                color={winner ? "success" : "light"}
+                color={winner && !isLastWinnerAndSelf ? "success" : "light"}
                 display="flex"
             >
               {points && (<>
                 <strong>{points}</strong>
                 <Detail
-                    color={winner ? "success" : "light"}
+                    color={winner && !isLastWinnerAndSelf ? "success" : "light"}
                     text="pts"
                 />
               </>)}
@@ -61,7 +62,7 @@ export const Participant = (props: LayoutParticipantProps) => {
             &nbsp;
             <Badge
                 text={rank}
-                variant={winner ? "success" : self ? "notification" : "neutral"}
+                variant={winner && !isLastWinnerAndSelf ? "success" : self ? "notification" : "neutral"}
             />
           </Body>
         </Body>

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

@@ -25,16 +25,33 @@ type LayoutRoundProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   numberOfRounds: number,
+  lastRoundWithSelf: number,
 } & GlobalProps
 
 export const Round = (props: LayoutRoundProps) => {
-  const { children, className, numberOfRounds } = props
+  const { children, className, numberOfRounds, lastRoundWithSelf } = 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, key: `child_${index}` }) : child
-  ) : children
+  const childrenWithProps = Array.isArray(children)
+  ? children.map((child, index) =>
+      React.isValidElement(child)
+        ? React.cloneElement(child, {
+            numberOfRounds,
+            numberOfGames: numberOfChildren,
+            isOdd: index % 2 === 0,
+            key: `child_${index}`,
+            lastRoundWithSelf
+          })
+        : child
+    )
+  : React.isValidElement(children)
+    ? React.cloneElement(children, {
+        numberOfRounds,
+        numberOfGames: numberOfChildren,
+        lastRoundWithSelf
+      })
+    : children
 
   const rightConnectors = Array.from({ length: numberOfChildren / 2 }, (_, index) => (
     <div

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) do %>
+    <thead>
+        <tr>
+            <th>Column 1</th>
+            <th>Column 2</th>
+            <th>Column 3</th>
+            <th>Column 4</th>
+            <th>Column 5</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Value 1</td>
+            <td>Value 2</td>
+            <td>Value 3</td>
+            <td>Value 4</td>
+            <td>Value 5</td>
+        </tr>
+        <tr>
+            <td>Value 1</td>
+            <td>Value 2</td>
+            <td>Value 3</td>
+            <td>Value 4</td>
+            <td>Value 5</td>
+        </tr>
+        <tr>
+            <td>Value 1</td>
+            <td>Value 2</td>
+            <td>Value 3</td>
+            <td>Value 4</td>
+            <td>Value 5</td>
+        </tr>
+    </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md

@@ -0,0 +1 @@
+Customize your header by removing the header borders with the `header_style: "borderless"` prop.

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb

@@ -0,0 +1,36 @@
+<%= pb_rails("card", props: { background: "light" })  do %>
+    <%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
+        <%= pb_rails("table/table_head") do %>
+            <%= pb_rails("background", props: { background_color: "light", tag: "tr" }) do %>
+                <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+                <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+                <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+                <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+                <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>       
+            <% end %>
+        <% end %>
+        <%= pb_rails("table/table_body") do %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md

@@ -0,0 +1 @@
+Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/rails#table-with-background-kit) logic to give your table header a custom background color. Use the `header_style: "floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `background_color` passed to Background kit should match the `background` or `background_color` for the element in which it is nested).

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md

@@ -1 +1 @@
-Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).
+Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `background` or `backgroundColor` for the element in which it is nested).

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

@@ -37,6 +37,8 @@ examples:
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
     - table_with_selectable_rows: Table with Selectable Rows
+    - table_with_header_style_borderless: Header Style Borderless
+    - table_with_header_style_floating: Header Style Floating
 
   react:
     - table_sm: Small

data/app/pb_kits/playbook/pb_table/table.rb

@@ -37,13 +37,16 @@ module Playbook
       prop :outer_padding, type: Playbook::Props::Enum,
                            values: ["none", "xxs", "xs", "sm", "md", "lg", "xl", nil],
                            default: nil
+      prop :header_style, type: Playbook::Props::Enum,
+                          values: %w[default borderless floating],
+                          default: "default"
 
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
           sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
-          "table-responsive-#{responsive}", separator: " "
+          "table-responsive-#{responsive}", header_style_class, separator: " "
         )
       end
 
@@ -123,6 +126,15 @@ module Playbook
           outer_padding.present? ? "outer_padding_#{space_css_name}#{outer_padding}" : nil
         end
       end
+
+      def header_style_class
+        case header_style
+        when "borderless"
+          "header-borderless"
+        when "floating"
+          "header-floating"
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -26,9 +26,12 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
+      prop :header_style, type: Playbook::Props::Enum,
+                          values: %w[default borderless floating],
+                          default: "default"
 
       def classname
-        generate_classname("pb_table_header_kit", align_class) + tag_class
+        generate_classname("pb_table_header_kit", align_class, header_style_class) + tag_class
       end
 
       def tag_class
@@ -106,6 +109,15 @@ module Playbook
         end
         active_item
       end
+
+      def header_style_class
+        case header_style
+        when "borderless"
+          "header-borderless"
+        when "floating"
+          "header-floating"
+        end
+      end
     end
   end
 end