playbook_ui 13.29.0.pre.alpha.testingcollapsibleissue3052 → 13.30.0

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.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 require 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 a `position` and a `size` as a key:value pair object.
+
+The `position` key accepts `top`, `bottom`, `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 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. By default, `size` is set to `full` (100%) so that your overlay covers the entire container with a smooth fade from `color` at its starting edge, fading to transparent and ending at the containers opposite edge.

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,4 @@
+examples:
+  react:
+  - 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.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

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -24,8 +24,13 @@ $flag-min-resolution: 192dpi;
     transition: $transition_default;
   }
 
+  .iti__divider {
+    border-bottom: 1px solid $border_light !important;  
+  }
+
   .iti__selected-flag {
     padding: 0 $space_xxs 0 $space_sm;
+    border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
       color: $primary_action;
@@ -33,7 +38,6 @@ $flag-min-resolution: 192dpi;
 
     &:focus-visible {
       outline-style: solid;
-      border-radius: $space_xxs 0px 0px $space_xxs;
       outline-color: $primary;
     }
   }
@@ -55,7 +59,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__flag {
-    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png");
+    background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
     border-radius: 1px;
   }
 
@@ -101,28 +105,36 @@ $flag-min-resolution: 192dpi;
     color: $primary_action;
   }
 
-  .iti__active::after {
-    float: right;
+  .iti__country-list .iti__country {
+    display: flex;
+    align-items: center;
+  }
+
+  .iti__flag-box,
+  .iti__country-name,
+  .iti__dial-code {
+    flex-grow: 0;
+  }
+
+  .iti__dial-code {
+    margin-right: $space_sm;
+  }
+
+
+  .iti__country-list .iti__country.iti__active::after {
     content: "";
-    margin-top: $space_xxs + 1px;
-    transform: rotate($transform-rotate-deg/3);
-    height: $space_xs + 4px;
-    width: $space_xxs + 2px;
+    margin-left: auto;
+    transform: rotate(45deg);
+    height: 12px;
+    width: 6px;
     border-bottom: 2px solid;
     border-right: 2px solid;
     border-radius: 1px;
   }
 
-  .iti__country-list {
-    min-width: $dropdown-min-width;
-    border-radius: $border_radius_md;
-    border: 1px solid $border_light;
-    box-shadow: $shadow_deep;
-    margin-top: 1px;
-  }
-
-  .iti__divider {
-    border-bottom: 1px solid $border_light;
+  .iti__dropdown-content {
+    border-radius: $space_xs; 
+    border: 1px solid $border_light !important;
   }
 
   &.dark {
@@ -147,6 +159,15 @@ $flag-min-resolution: 192dpi;
       color: $white;
     }
 
+    .iti__dropdown-content {
+      border-radius: $space_xs; 
+      border: 1px solid $border_dark !important;
+    }
+
+    .iti__divider {
+      border-bottom: 1px solid $border_dark !important;  
+    }
+
     .iti__country-list {
       background-color: $bg_dark;
       border: 1px solid $border_dark;
@@ -157,17 +178,14 @@ $flag-min-resolution: 192dpi;
         .iti__country-name {
           color: $text_dk_default;
         }
-  
+
         .iti__dial-code {
           color: $text_lt_lighter;
+          margin-right: $space_sm;
         }
       }
     }
 
-    .iti__divider {
-      border-bottom: 1px solid $border_dark;
-    }
-
     .iti__arrow.iti__arrow--up::before {
       color: $slate;
     }
@@ -178,10 +196,10 @@ $flag-min-resolution: 192dpi;
       }
     }
   }
-  
+
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
-      background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags@2x.png");
+      background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
     }
   }
 }

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

@@ -1,34 +1,33 @@
-<%= pb_rails("table") do %>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th align="center">Rating</th>
-      <th align="right">Money</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td align="center">3</td>
-      <td align="right">$57.32</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td align="center">2</td>
-      <td align="right">$5,657.08</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td align="center">4</td>
-      <td align="right">$358.77</td>
-    </tr>
-  </tbody>
+<%= pb_rails("table") do %>  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") 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: "Rating", text_align: "center" }) %>
+          <%= pb_rails("table/table_header", props: { text: "Money", text_align: "right" }) %>
+       <% 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: "3", text_align: "center" }) %>
+          <%= pb_rails("table/table_cell", props: { text: "$57.32", text_align: "right" }) %>
+      <% 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: "2", text_align: "center" }) %>
+        <%= pb_rails("table/table_cell", props: { text: "$5,657.08", text_align: "right" }) %>
+    <% 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: "4", text_align: "center" }) %>
+          <%= pb_rails("table/table_cell", props: { text: "$358.77", text_align: "right" }) %>
+      <% end %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -7,9 +7,7 @@
       id: "pb-th#{object.id}",
       **combined_html_options) do %>
     <% unless sorting_style? %>
-      <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
         <%= content.presence || object.text %>
-      <% end %>
     <% else %>
       <%= link_to next_link, style: link_style do %>
         <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>

data/app/pb_kits/playbook/playbook-doc.js

@@ -66,6 +66,7 @@ import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
 import * as Nav from 'pb_nav/docs'
 import * as OnlineStatus from 'pb_online_status/docs'
+import * as Overlay from 'pb_overlay/docs'
 import * as Passphrase from 'pb_passphrase/docs'
 import * as PbReactPopover from 'pb_popover/docs'
 import * as Person from 'pb_person/docs'
@@ -170,6 +171,7 @@ WebpackerReact.registerComponents({
   ...MultipleUsersStacked,
   ...Nav,
   ...OnlineStatus,
+  ...Overlay,
   ...Passphrase,
   ...PbReactPopover,
   ...Person,

data/dist/menu.yml

@@ -352,6 +352,9 @@ kits:
         platforms: *web
         description: 
         status: "stable"
+      - name: "overlay"
+        platforms: *react_only
+        status: "beta"
       - name: "draggable"
         platforms: *react_only
         description:
@@ -467,4 +470,5 @@ kits:
         status: "stable"
       - name: "user"
         platforms: *web
-        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
+        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
+        status: "stable"