playbook_ui 13.29.0 → 13.30.0.pre.alpha.PBNTR353draggablev53136

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

@@ -0,0 +1,72 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+
+$overlay_sizes: (
+  full: 100%,
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
+
+$overlay_positions: left, right, top, bottom, x, y;
+
+$overlay_colors: (
+  card_light: $card_light,
+  card_dark: $card_dark,
+  bg_dark: $bg_dark,
+  bg_light: $bg_light,
+);
+
+@mixin overlay($direction, $size, $color) {
+  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;
+  }
+}
+
+[class^=pb_overlay] {
+  position: relative;
+  @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);
+          }
+        }
+      }
+    }
+  }
+
+  .overlay_linear_gradient {
+    inset: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 1;
+  }
+}

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

@@ -0,0 +1,78 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import OverlayPercentage from './subcomponents/_overlay_percentage'
+import OverlayToken from './subcomponents/_overlay_token'
+
+export type OverlayChildrenProps = {
+    children: React.ReactNode[] | React.ReactNode,
+    color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
+    position: string,
+    size: string,
+}
+
+type OverlayProps = {
+    aria?: { [key: string]: string },
+    className?: string,
+    children: React.ReactNode[] | React.ReactNode,
+    color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
+    data?: { [key: string]: string },
+    htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+    id?: string,
+    layout: { [key: string]: string },
+}
+
+const Overlay = (props: OverlayProps) => {
+    const {
+        aria = {},
+        className,
+        children,
+        color = "card_light",
+        data = {},
+        htmlOptions = {},
+        id,
+        layout = { "bottom": "full" },
+    } = props
+
+    const ariaProps = buildAriaProps(aria)
+    const dataProps = buildDataProps(data)
+    const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
+    const htmlProps = buildHtmlProps(htmlOptions)
+
+    const getPosition = () => {
+        return Object.keys(layout)[0]
+    }
+
+    const getSize = () => {
+        return Object.values(layout)[0]
+    }
+
+    const isSizePercentage = getSize().includes("%")
+
+    return (
+        <div
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+            {isSizePercentage ?
+                OverlayPercentage({
+                    children,
+                    color,
+                    position: getPosition(),
+                    size: getSize()
+                }) : OverlayToken({
+                    children,
+                    color,
+                    position: getPosition(),
+                    size: getSize()
+                })
+            }
+        </div>
+    )
+}
+
+export default Overlay

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("overlay") do %>
+    <%= pb_rails("table", props: { size: "sm" }) 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>
+            <% 7.times do %>
+                <tr>
+                    <td>Value 1</td>
+                    <td>Value 2</td>
+                    <td>Value 3</td>
+                    <td>Value 4</td>
+                    <td>Value 5</td>
+                </tr>
+            <% end %>   
+        </tbody>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+    Overlay,
+    Table,
+} from '../..'
+
+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 OverlayDefault = () => (
+    <>
+        <Overlay>
+            <TableExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayDefault

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

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

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light" }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from '../..'
+
+const InlineCardsExample = () => {
+    return (
+        <Flex
+            columnGap="lg"
+            orientation="row"
+            overflowX="auto"
+        >
+            {Array.from({ length: 15 }, (_, index) => (
+                <FlexItem key={index}>
+                    <Card>{"Card Content"}</Card>
+                </FlexItem>
+            ))}
+        </Flex>
+    )
+}
+
+const OverlayMultiDirectional = () => (
+    <>
+        <Overlay
+            color="card_light"
+            layout={{"x": "xl"}}
+        >
+            <InlineCardsExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayMultiDirectional

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

@@ -0,0 +1,5 @@
+Optionally, you can pass multi-directional options (`x` or `y`) to the `position` key, which creates multiple overlays. 
+
+Your `color` is still applied as the starting edge to both overlays, and each mask will fade to transparent moving toward its opposite edge, ending at the `size` value you set. 
+
+NOTE: Multi-directional overlays share the available container space, so passing `full` or a percentage string greater than 50% to a multi-directional overlay will cause your masks to overlap at the midline of your container. As a best practice, we do not recommend exceeding a percentage size of 25% when using multi-directional overlays.

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

@@ -0,0 +1,8 @@
+examples:
+  react:
+  - overlay_default: Default
+  - overlay_multi_directional: Multi-directional
+
+  rails:
+    - overlay_default: Default
+    - overlay_multi_directional: Multi-directional

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

@@ -0,0 +1,2 @@
+export { default as OverlayDefault } from './_overlay_default.jsx'
+export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.html.erb

@@ -0,0 +1,27 @@
+<%= pb_content_tag(:div,
+aria: object.aria,
+class: object.classname,
+data: object.data,
+id: object.id,
+**combined_html_options) do %>
+    <% if is_size_percentage %>
+        <div class="overlay_linear_gradient"
+        style="background: <%= previous_overlay %>"></div>
+
+        <%= content.presence %>
+
+        <% if has_subsequent_overlay %>
+            <div class="overlay_linear_gradient"
+            style="background: <%= subsequent_overlay %>"></div>
+        <% end %>
+
+    <% else %>
+        <div class="<%= previous_overlay_class_name %>"></div>
+
+        <%= content.presence %>
+
+        <% if has_subsequent_overlay %>
+            <div class="<%= subsequent_overlay_class_name %>"></div>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbOverlay
+    class Overlay < Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[card_light bg_light card_dark bg_dark],
+                   default: "card_light"
+      prop :layout, type: Playbook::Props::HashProp,
+                    default: { "bottom": "full" }
+
+      def classname
+        generate_classname("pb_overlay")
+      end
+
+      def position
+        layout.keys[0]
+      end
+
+      def size
+        layout.values[0]
+      end
+
+      def is_size_percentage
+        size.include?("%")
+      end
+
+      def previous_overlay
+        "linear-gradient(#{previous_overlay_direction}, #{color_map[color.to_sym]} 0%, transparent #{size})"
+      end
+
+      def subsequent_overlay
+        "linear-gradient(#{subsequent_overlay_direction}, #{color_map[color.to_sym]} 0%, transparent #{size})"
+      end
+
+      def previous_overlay_class_name
+        "overlay_#{color}_#{previous_overlay_direction_token}_#{size}"
+      end
+
+      def subsequent_overlay_class_name
+        "overlay_#{color}_#{subsequent_overlay_direction_token}_#{size}"
+      end
+
+      def previous_overlay_direction
+        previous_overlay_direction_map[position.to_sym]
+      end
+
+      def subsequent_overlay_direction
+        subsequent_overlay_direction_map[position.to_sym]
+      end
+
+      def previous_overlay_direction_token
+        has_subsequent_overlay ? previous_overlay_direction_map_token[position.to_sym] : position
+      end
+
+      def subsequent_overlay_direction_token
+        has_subsequent_overlay ? subsequent_overlay_direction_map_token[position.to_sym] : position
+      end
+
+      def previous_overlay_direction_map
+        {
+          "bottom": "to top",
+          "top": "to bottom",
+          "left": "to right",
+          "right": "to left",
+          "x": "to right",
+          "y": "to top",
+        }
+      end
+
+      def subsequent_overlay_direction_map
+        {
+          "bottom": "to top",
+          "top": "to bottom",
+          "left": "to right",
+          "right": "to left",
+          "x": "to left",
+          "y": "to bottom",
+        }
+      end
+
+      def previous_overlay_direction_map_token
+        {
+          "x": "left",
+          "y": "top",
+        }
+      end
+
+      def subsequent_overlay_direction_map_token
+        {
+          "x": "right",
+          "y": "bottom",
+        }
+      end
+
+      def has_subsequent_overlay
+        position == "x".to_sym || position == "y".to_sym
+      end
+
+      def color_map
+        {
+          "card_light": "#fff",
+          "bg_light": "#F3F7FB",
+          "card_dark": "#231E3D",
+          "bg_dark": "#0a0527",
+        }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { render, screen } from '../utilities/test-utils'
+import { Overlay } from '..'
+
+const testId = "overlay"
+const children = "This is the Overlay children"
+
+test('should pass data prop', () => {
+    const props = {
+        children,
+        data: { testid: testId }
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
+test("should pass className prop", () => {
+    const className = "custom-class-name"
+    const props = {
+        className,
+        children,
+        data: { testid: testId },
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
+test('should pass aria prop', () => {
+    const props = {
+        aria: { label: testId },
+        children,
+        data: { testid: testId },
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should pass id prop', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('id', testId)
+})
+
+test('should render children', () => {
+    const props = {
+        children,
+        data: { testid: testId }
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent(props.children)
+})

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_percentage.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import defaultColors from "../../tokens/exports/_colors.scss";
+import { OverlayChildrenProps } from '../_overlay';
+
+
+const previousOverlayDirectionMap: { [key: string]: string } = {
+    "bottom": "to top",
+    "top": "to bottom",
+    "left": "to right",
+    "right": "to left",
+    "x": "to right",
+    "y": "to top",
+}
+
+const subsequentOverlayDirectionMap: { [key: string]: string } = {
+    ...previousOverlayDirectionMap,
+    "x": "to left",
+    "y": "to bottom",
+}
+
+const OverlayPercentage = (props: OverlayChildrenProps) => {
+    const {
+        children,
+        color,
+        position,
+        size,
+    } = props
+
+    const getPreviousOverlayDirection = () => {
+        return previousOverlayDirectionMap[position]
+    }
+
+    const getSubsequentOverlayDirection = () => {
+        return subsequentOverlayDirectionMap[position]
+    }
+
+    const hasSubsequentOverlay = position === "x" || position === "y"
+
+    const previousOverlay = `linear-gradient(${getPreviousOverlayDirection()}, ${defaultColors[color]} 0%, transparent ${size})`
+    const subsequentOverlay = `linear-gradient(${getSubsequentOverlayDirection()}, ${defaultColors[color]} 0%, transparent ${size})`
+
+    return (
+        <>
+            <div className="overlay_linear_gradient"
+                style={{ background: previousOverlay }} />
+
+            {children}
+
+            { hasSubsequentOverlay &&
+                <div className="overlay_linear_gradient"
+                    style={{ background: subsequentOverlay }} />
+            }       
+        </>
+    )
+}
+
+export default OverlayPercentage

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { OverlayChildrenProps } from '../_overlay'
+
+const previousOverlayDirectionMap: { [key: string]: string } = {
+    "x": "left",
+    "y": "top",
+}
+
+const subsequentOverlayDirectionMap: { [key: string]: string } = {
+    "x": "right",
+    "y": "bottom",
+}
+
+const OverlayToken = (props: OverlayChildrenProps) => {
+    const {
+        children,
+        color,
+        position,
+        size,
+    } = props
+
+    const hasSubsequentOverlay = position === "x" || position === "y"
+
+    const getPreviousOverlayDirection = () => {
+        return hasSubsequentOverlay ? previousOverlayDirectionMap[position] : position
+    }
+
+    const getSubsequentOverlayDirection = () => {
+        return hasSubsequentOverlay ? subsequentOverlayDirectionMap[position] : position
+    }
+
+    const previousOverlayClassName = `overlay_${color}_${getPreviousOverlayDirection()}_${size}`
+    const subsequentOverlayClassName = `overlay_${color}_${getSubsequentOverlayDirection()}_${size}`
+
+    return (
+        <>
+            <div className={previousOverlayClassName} />
+
+            {children}
+
+            { hasSubsequentOverlay &&
+                <div className={subsequentOverlayClassName} />
+            }
+        </>
+    )
+}
+
+export default OverlayToken