playbook_ui 14.17.0 → 14.18.0.pre.alpha.PLAY20787400

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

@@ -5,79 +5,110 @@ import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/glo
 
 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 } = props
+  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 [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"
+    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.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>
+          <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
-    ) : (
-      <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  &&
+      {((!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)` }}

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

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

@@ -18,34 +18,39 @@ $overlay_colors: (
   card_dark: $card_dark,
   bg_dark: $bg_dark,
   bg_light: $bg_light,
+  black: $black,
+  white: $white,
+  success: $success,
+  error: $error
 );
 
-@mixin overlay($direction, $size, $color) {
+@mixin overlay($direction, $size, $color, $apply_gradient: true) {
   display: block;
   position: absolute;
   pointer-events: none;
   z-index: 1;
   content: "";
 
-  @if $direction == "left" {
-    inset: 0 auto 0 0;
-    background: linear-gradient(to right, $color 0%, transparent 100%);
-    width: $size;
-  }
-  @if $direction == "right" {
-    inset: 0 0 0 auto;
-    background: linear-gradient(to left, $color 0%, transparent 100%);
-    width: $size;
-  }
-  @if $direction == "top" {
-    inset: 0 0 auto 0;
-    background: linear-gradient(to bottom, $color 0%, transparent 100%);
-    height: $size;
-  }
-  @if $direction == "bottom" {
-    inset: auto 0 0 0;
-    background: linear-gradient(to top, $color 0%, transparent 100%);
-    height: $size;
+  @if $apply_gradient {
+    @if $direction == "left" {
+      inset: 0 auto 0 0;
+      background: linear-gradient(to right, $color 0%, transparent 100%);
+      width: $size;
+    } @else if $direction == "right" {
+      inset: 0 0 0 auto;
+      background: linear-gradient(to left, $color 0%, transparent 100%);
+      width: $size;
+    } @else if $direction == "top" {
+      inset: 0 0 auto 0;
+      background: linear-gradient(to bottom, $color 0%, transparent 100%);
+      height: $size;
+    } @else if $direction == "bottom" {
+      inset: auto 0 0 0;
+      background: linear-gradient(to top, $color 0%, transparent 100%);
+      height: $size;
+    }
+  } @else {
+    background: $color;
   }
 }
 
@@ -69,7 +74,7 @@ $overlay_colors: (
     pointer-events: none;
     z-index: 1;
   }
-  
+
   &.overlay-hide-scrollbar {
     & [class*="overflow_x_auto"],
     & [class*="overflow_y_auto"],
@@ -77,9 +82,65 @@ $overlay_colors: (
       &::-webkit-scrollbar {
         display: none !important;
       }
-      
+
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
     }
   }
+
+  &.overlay-full-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+
+    &.no_gradient {
+      @each $color_name, $color in $overlay_colors {
+        &[data-overlay-color="#{$color_name}"] {
+          &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: $color;
+            pointer-events: none;
+          }
+        }
+      }
+    }
+
+    @each $key, $value in $opacity {
+      &.#{$key}::before {
+        opacity: $value;
+      }
+    }
+  }
+
+  &.no_gradient {
+    @each $color_name, $color in $overlay_colors {
+      .overlay_#{$color_name} {
+        @each $name, $size in $overlay_sizes {
+          @each $position in $overlay_positions {
+            &_#{$position}_#{$name} {
+              @include overlay($position, $size, $color, false);
+            }
+          }
+        }
+      }
+    }
+
+    @each $key, $value in $opacity {
+      &.#{$key} {
+        [class^=overlay] {
+          opacity: $value;
+        }
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -7,8 +7,9 @@ import OverlayToken from './subcomponents/_overlay_token'
 
 export type OverlayChildrenProps = {
     children: React.ReactNode[] | React.ReactNode,
-    color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
+    color: "card_light" | "bg_light" | "card_dark" | "bg_dark" | "black" | "white" | "success" | "error",
     dynamic?: boolean,
+    gradient?: boolean,
     position: string,
     size: string,
     scrollBarNone?: boolean,
@@ -18,14 +19,17 @@ type OverlayProps = {
     aria?: { [key: string]: string },
     className?: string,
     children: React.ReactNode[] | React.ReactNode,
-    color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
+    color: "card_light" | "bg_light" | "card_dark" | "bg_dark" | "black" | "white" | "success" | "error",
     data?: { [key: string]: string },
     dynamic?: false,
+    fullScreen?: boolean,
+    gradient?: boolean,
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
+    opacity: 'opacity_1' | 'opacity_2' | 'opacity_3' | 'opacity_4' | 'opacity_5' | 'opacity_6' | 'opacity_7' | 'opacity_8' | 'opacity_9' | 'opacity_10',
     scrollBarNone?: boolean,
-    
+
 }
 
 const Overlay = (props: OverlayProps) => {
@@ -36,15 +40,26 @@ const Overlay = (props: OverlayProps) => {
         color = "card_light",
         data = {},
         dynamic = false,
+        fullScreen = false,
+        gradient = true,
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
+        opacity,
         scrollBarNone = false,
     } = props
 
     const ariaProps = buildAriaProps(aria)
     const dataProps = buildDataProps(data)
-    const classes = classnames(buildCss('pb_overlay'), { 'overlay-hide-scrollbar': scrollBarNone }, globalProps(props), className )
+    const classes = classnames(
+        buildCss('pb_overlay'),
+        { 'overlay-hide-scrollbar': scrollBarNone },
+        { 'overlay-full-screen': fullScreen },
+        { 'no_gradient': gradient === false },
+        globalProps(props),
+        opacity,
+        className
+    )
     const htmlProps = buildHtmlProps(htmlOptions)
     const dynamicInlineProps = globalInlineProps(props)
 
@@ -53,6 +68,9 @@ const Overlay = (props: OverlayProps) => {
     }
 
     const getSize = () => {
+        if (fullScreen) {
+            return "100%"
+        }
         return Object.values(layout)[0]
     }
 
@@ -64,23 +82,37 @@ const Overlay = (props: OverlayProps) => {
             {...dataProps}
             {...htmlProps}
             className={classes}
+            data-overlay-color={color}
             id={id}
-            style={dynamicInlineProps}
+            style={{
+                ...(fullScreen ? {
+                  position: 'fixed',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  zIndex: 9999,
+                  '--overlay-color': `var(--${color})`,
+                } : {}),
+                ...dynamicInlineProps
+              }}
         >
             {isSizePercentage ?
                 OverlayPercentage({
                     children,
                     color,
+                    gradient,
                     position: getPosition(),
                     scrollBarNone,
-                    size: getSize()
+                    size: getSize(),
                 }) : OverlayToken({
                     children,
                     color,
                     dynamic: dynamic,
+                    gradient,
                     position: getPosition(),
                     scrollBarNone,
-                    size: getSize()
+                    size: getSize(),
                 })
             }
         </div>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
+
+const OverlayColor = () => (
+    <Flex
+        justify="around"
+        wrap
+    >
+        <Overlay
+            color="black"
+            marginBottom="xxs"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            color="black"
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_4"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            color="error"
+            marginBottom="xxs"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            color="error"
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_4"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              size="xl"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+    </Flex>
+)
+
+export default OverlayColor

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md

@@ -0,0 +1,3 @@
+The `color` prop is used to change the color of the solid or gradient mask. Gradient overlays always start opaque and fade to transparent.
+
+NOTE: Images are set to `display: block` to remove the default inline spacing caused by line height. This ensures the image fully fills the container without unexpected gaps.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md

@@ -1,7 +1 @@
-Overlays optionally accept a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent. 
-
-The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
-
-The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
-
-The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s). 
+Overlays help shift focus by dimming or masking background content. This kit supports gradient and solid color modes, with adjustable opacity to suit the context.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import Overlay from '../../pb_overlay/_overlay'
+import Button from '../../pb_button/_button'
+import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
+
+const OverlayFullscreenBackground = () => {
+  const [openBackground, setOpenBackground] = useState(false)
+
+  const handleClickBackground = () => {
+    setOpenBackground(true)
+  }
+
+  const handleCloseBackground = () => {
+    setOpenBackground(false)
+  }
+
+  return (
+    <>
+      <div>
+        <Button
+            onClick={handleClickBackground}
+            text="Background Dark"
+            variant="secondary"
+        />
+
+        {openBackground && (
+          <Overlay
+              color="bg_dark"
+              fullScreen
+              gradient={false}
+              opacity="opacity_4"
+          >
+            <FixedConfirmationToast
+                closeable
+                horizontal='center'
+                onClose={handleCloseBackground}
+                open={openBackground}
+                status="tip"
+                text='Fullscreen Overlay with color set to Background Dark.'
+                vertical='top'
+            />
+          </Overlay>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default OverlayFullscreenBackground

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md

@@ -0,0 +1 @@
+The `fullScreen` prop also allows you to use `color` along with it.