RubyGems - playbook_ui - Versions diffs - 14.18.0.pre.rc.0 → 14.18.0.pre.rc.1 - Mend

playbook_ui 14.18.0.pre.rc.0 → 14.18.0.pre.rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,31 @@ $overlay_colors: (
       &::-webkit-scrollbar {
         display: none !important;
       }
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
     }
   }
+  &.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 CHANGED Viewed

@@ -7,7 +7,7 @@ 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,
     position: string,
     size: string,
@@ -18,14 +18,16 @@ 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,
+    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 +38,24 @@ const Overlay = (props: OverlayProps) => {
         color = "card_light",
         data = {},
         dynamic = 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 },
+        globalProps(props),
+        gradient === false ? 'no_gradient' : '',
+        opacity,
+        className
+    )
     const htmlProps = buildHtmlProps(htmlOptions)
     const dynamicInlineProps = globalInlineProps(props)

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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_gradient_opacity.jsx ADDED Viewed

@@ -0,0 +1,39 @@
+import React from 'react'
+import Overlay from '../../pb_overlay/_overlay'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
+const OverlayGradientOpacity = () => (
+    <Flex
+        justify="around"
+        wrap
+    >
+        <Overlay
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_2"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              maxWidth="100%"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_8"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              maxWidth="100%"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+    </Flex>
+)
+export default OverlayGradientOpacity

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ By default, the overlay is rendered as a gradient. Setting the `gradient` prop to `false` renders the overlay as a solid color. You can adjust the transparency of the solid overlay by using the `opacity` prop.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx ADDED Viewed

@@ -0,0 +1,40 @@
+import React from 'react'
+import Overlay from '../../pb_overlay/_overlay'
+import Table from '../../pb_table/_table'
+const TableExample = () => {
+    return (
+        <Table size="sm">
+            <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>
+                {Array.from({ length: 7 }, (_, index) => (
+                    <tr key={index}>
+                        {Array.from({ length: 5 }, (_, columnIndex) => (
+                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </Table>
+    )
+}
+const OverlayLayout = () => (
+    <>
+        <Overlay layout={{ y: "xl" }}>
+            <TableExample />
+        </Overlay>
+    </>
+)
+export default OverlayLayout

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md ADDED Viewed

@@ -0,0 +1,5 @@
+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).

data/app/pb_kits/playbook/pb_overlay/docs/example.yml CHANGED Viewed

@@ -1,6 +1,9 @@
 examples:
   react:
   - overlay_default: Default
+  - overlay_gradient_opacity: Gradient & Opacity
+  - overlay_color: Color
+  - overlay_layout: Layout
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle

data/app/pb_kits/playbook/pb_overlay/docs/index.js CHANGED Viewed

@@ -1,4 +1,7 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
+export { default as OverlayGradientOpacity } from './_overlay_gradient_opacity.jsx'
+export { default as OverlayColor } from './_overlay_color.jsx'
+export { default as OverlayLayout } from './_overlay_layout.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx CHANGED Viewed

@@ -71,8 +71,46 @@ test('should add overlay-hide-scrollbar class when scrollBarNone is true', () =>
       data: { testid: testId },
       scrollBarNone: true
     }
     render(<Overlay {...props} />)
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass('overlay-hide-scrollbar')
 })
+test('should have no_gradient class if gradient prop is false', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId,
+        gradient: false
+    }
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('no_gradient')
+})
+test('should not have no_gradient class if gradient is not passed', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId
+    }
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).not.toHaveClass('no_gradient')
+})
+test('should have the correct opacity class if opacity prop is passed', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId,
+        opacity: "opacity_5"
+    }
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('opacity_5')
+})