playbook_ui 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096 → 13.30.0.pre.alpha.20240515remotebuildkitconversion3150

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -23,6 +23,7 @@ type FixedConfirmationToastProps = {
   data?: string;
   horizontal?: "right" | "left" | "center";
   htmlOptions?: { [key: string]: string | number | boolean | (VoidCallback) };
+  icon?: string,
   id?: string;
   multiLine?: boolean;
   onClose?: VoidCallback;
@@ -41,6 +42,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     closeable = false,
     horizontal,
     htmlOptions = {},
+    icon,
     multiLine = false,
     onClose = () => undefined,
     open = true,
@@ -48,14 +50,18 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     text,
     vertical,
   } = props;
+
+  const returnedIcon = icon || iconMap[status]
+  const iconClass = icon ? "custom_icon" : ""
+
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
     { _multi_line: multiLine },
     { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
+    `${iconClass}`,
     globalProps(props),
     className
   );
-  const icon = iconMap[status];
 
   const htmlProps = buildHtmlProps(htmlOptions);
 
@@ -86,11 +92,11 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
             onClick={handleClick}
             {...htmlProps}
         >
-          {icon && (
+          {returnedIcon && (
             <Icon
                 className="pb_icon"
                 fixedWidth
-                icon={icon}
+                icon={returnedIcon}
             />
           )}
 

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.html.erb

@@ -0,0 +1,32 @@
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "wrench",
+    text: "Fix before proceeding",
+    status: "error",
+    closeable: true,
+    margin_bottom: "md"
+  })%>
+</div>
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "star",
+    text: "Thank you for completing the form!",
+    status: "success",
+    margin_bottom: "md"
+  })%>
+</div>
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "file-pdf",
+    text: "Saved as PDF",
+    status: "neutral",
+    margin_bottom: "md"
+  })%>
+</div>
+<div>
+  <%= pb_rails("fixed_confirmation_toast", props: {
+    icon: "arrow-down",
+    text: "New Messages",
+    status: "tip"
+  })%>
+</div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastCustomIcon = (props) => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            closeable
+            icon="wrench"
+            marginBottom="md"
+            status="error"
+            text="Fix before proceeding"
+            {...props}
+        />
+      </div>
+      <div>
+        <FixedConfirmationToast
+            icon="star"
+            marginBottom="md"
+            status="success"
+            text="Thank you for completing the form!"
+            {...props}
+        />
+      </div>
+      <div>
+        <FixedConfirmationToast
+            icon="file-pdf"
+            marginBottom="md"
+            status="neutral"
+            text="Saved as PDF"
+            {...props}
+        />
+      </div>
+      <div>
+        <FixedConfirmationToast
+            icon="arrow-down"
+            status="tip"
+            text="New Messages"
+            {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastCustomIcon

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

@@ -6,6 +6,7 @@ examples:
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_children: Children
+  - fixed_confirmation_toast_custom_icon: Custom Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -14,6 +15,7 @@ examples:
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
+  - fixed_confirmation_toast_custom_icon: Custom Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -4,3 +4,4 @@ export { default as FixedConfirmationToastClose } from './_fixed_confirmation_to
 export { default as FixedConfirmationToastPositions } from './_fixed_confirmation_toast_positions.jsx'
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
+export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -20,6 +20,7 @@ module Playbook
                       values: [nil, "top", "bottom"],
                       default: nil
       prop :auto_close, type: Playbook::Props::Number
+      prop :icon, type: Playbook::Props::String
 
       def show_text?
         text.present?
@@ -42,20 +43,24 @@ module Playbook
       end
 
       def icon_value
-        case status
-        when "success"
-          "check"
-        when "error"
-          "exclamation-triangle"
-        when "neutral"
-          "info-circle"
-        when "tip"
-          "info-circle"
-        end
+        icon || case status
+                when "success"
+                  "check"
+                when "error"
+                  "exclamation-triangle"
+                when "neutral"
+                  "info-circle"
+                when "tip"
+                  "info-circle"
+                end
+      end
+
+      def icon_class
+        icon.present? ? " custom_icon" : ""
       end
 
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class + icon_class
       end
     end
   end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import { render, waitFor } from '../utilities/test-utils'
+
+import { FixedConfirmationToast } from '../'
+
+beforeEach(() => {
+    // Silences error logs within the test suite.
+    jest.spyOn(console, 'error')
+    // eslint-disable-next-line
+    console.error.mockImplementation(() => {})
+})
+  
+afterEach(() => {
+    // eslint-disable-next-line
+    console.error.mockRestore()
+})
+
+test('renders with default props', () => {
+    const { container } = render(<FixedConfirmationToast />);
+    expect(container.firstChild).toBeInTheDocument();
+});
+
+test('renders with text', () => {
+    const { getByText } = render(<FixedConfirmationToast text="Message Text" />);
+    expect(getByText('Message Text')).toBeInTheDocument();
+});
+
+test('does not render if open prop is false', () => {
+    const { container } = render(<FixedConfirmationToast open={false} />);
+    expect(container.firstChild).toBeNull();
+});
+
+test('closes after autoClose duration', async () => {
+    jest.useFakeTimers();
+    const onCloseMock = jest.fn();
+    render(
+        <FixedConfirmationToast 
+            autoClose={1000} 
+            onClose={onCloseMock}
+            open
+        />
+    );
+    
+    jest.advanceTimersByTime(1000);
+    await waitFor(() => expect(onCloseMock).toHaveBeenCalled());
+});
+
+test('renders success status with icon', () => {
+    const { container } = render(<FixedConfirmationToast status="success" />);
+    expect(container.querySelector('.pb_fixed_confirmation_toast_kit_success')).toBeInTheDocument();
+    expect(container.querySelector('.pb_icon')).toBeInTheDocument();
+});
+  
+test('renders custom icon when provided', () => {
+    const { container } = render(<FixedConfirmationToast icon="wrench" />);
+    expect(container.querySelector('.custom_icon')).toBeInTheDocument();
+});
+
+test('renders correctly with multiLine prop', () => {
+    const { container } = render(<FixedConfirmationToast multiLine />);
+    expect(container.querySelector('._multi_line')).toBeInTheDocument();
+});
+
+test('renders position when provided', () => {
+    const { container } = render(
+        <FixedConfirmationToast 
+            horizontal="right"
+            vertical="bottom" 
+        />
+    );
+    expect(container.querySelector('.positioned_toast')).toBeInTheDocument();
+});

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
+import aliasesJson from './icon_aliases.json'
 
 export type IconSizes = "lg"
 | "xs"
@@ -40,6 +41,19 @@ type IconProps = {
   spin?: boolean,
 } & GlobalProps
 
+type AliasType = string | string[];
+
+interface Aliases {
+  [key: string]: AliasType;
+}
+
+interface AliasesJson {
+  aliases: Aliases;
+}
+
+const aliases: AliasesJson = aliasesJson;
+
+
 const flipMap = {
   horizontal: 'fa-flip-horizontal',
   vertical: 'fa-flip-vertical',
@@ -52,6 +66,22 @@ declare global {
   var PB_ICONS: {[key: string]: React.FunctionComponent<any>}
 }
 
+// Resolve alias function
+const resolveAlias = (icon: string): string => {
+  const alias = aliases.aliases[icon];
+
+  if (alias) {
+    if (Array.isArray(alias)) {
+      return alias[0];
+    } else {
+      return alias;
+    }
+  }
+
+  return icon;
+};
+
+
 const Icon = (props: IconProps) => {
   const {
     aria = {},
@@ -74,7 +104,8 @@ const Icon = (props: IconProps) => {
     spin = false,
   } = props
 
-  let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
+  const resolvedIcon = resolveAlias(icon as string)
+  let iconElement: ReactSVGElement | null = typeof(resolvedIcon) === "object" ? resolvedIcon : null
 
   const faClasses = {
     'fa-border': border,
@@ -90,12 +121,12 @@ const Icon = (props: IconProps) => {
 
   if (!customIcon && !iconElement) {
     const PowerIcon: React.FunctionComponent<any> | undefined =
-      window.PB_ICONS ? window.PB_ICONS[icon as string] : null
+      window.PB_ICONS ? window.PB_ICONS[resolvedIcon as string] : null
 
     if (PowerIcon) {
       iconElement = <PowerIcon /> as ReactSVGElement
     } else {
-      faClasses[`fa-${icon}`] = icon as string
+      faClasses[`fa-${resolvedIcon}`] = resolvedIcon as string
     }
   }
 
@@ -115,7 +146,7 @@ const Icon = (props: IconProps) => {
     className
   )
 
-  aria.label ? null : aria.label = `${icon} icon`
+  aria.label ? null : aria.label = `${resolvedIcon} icon`
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -137,7 +168,7 @@ const Icon = (props: IconProps) => {
           }
         </>
       )
-    else if (isValidEmoji(icon as string))
+    else if (isValidEmoji(resolvedIcon as string))
       return (
         <>
           <span
@@ -146,7 +177,7 @@ const Icon = (props: IconProps) => {
               className={classesEmoji}
               id={id}
           >
-            {icon}
+            {resolvedIcon}
           </span>
         </>
       )

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb

@@ -1 +1,6 @@
-<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<%= pb_rails("icon", props: { icon: "angles-down", fixed_width: true }) %>
+<%= pb_rails("icon", props: { icon: "circle-arrow-right", fixed_width: true }) %>
+<%= pb_rails("icon", props: { icon: "arrow-circle-right", fixed_width: true }) %>
+
+<%= pb_rails("caption", props: { text: "Font Awesome (no alias & not in our Playbook-icons lib)", margin_y: "md" }) %>
+<%= pb_rails("icon", props: { icon: "elephant", fixed_width: true }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx

@@ -1,13 +1,29 @@
-import React from 'react'
+import React from "react"
 
-import Icon from '../_icon'
+import Icon from "../_icon"
+import {Caption} from "../.."
 
 const IconDefault = (props) => {
   return (
     <div>
-      <Icon
-          fixedWidth
-          icon="user"
+      <Icon fixedWidth
+          icon='angles-down'
+          {...props}
+      />
+      <Icon fixedWidth
+          icon='circle-arrow-right'
+          {...props}
+      />
+      <Icon fixedWidth
+          icon='arrow-circle-right'
+          {...props}
+      />
+      <Caption
+          marginY='md'
+          text='Font Awesome (no alias & not in our Playbook-icons lib)'
+      />
+      <Icon fixedWidth
+          icon='elephant'
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -3,6 +3,7 @@
 # rubocop:disable Style/HashLikeCase
 
 require "open-uri"
+require "json"
 
 module Playbook
   module PbIcon
@@ -38,6 +39,8 @@ module Playbook
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
 
+      ALIASES = JSON.parse(File.read(Playbook::Engine.root.join("app/pb_kits/playbook/pb_icon/icon_aliases.json")))["aliases"].freeze
+
       def valid_emoji?
         emoji_regex = /\p{Emoji}/
         emoji_regex.match?(icon)
@@ -83,7 +86,8 @@ module Playbook
         return unless Rails.application.config.respond_to?(:icon_path)
 
         base_path = Rails.application.config.icon_path
-        icon_path = Dir.glob(Rails.root.join(base_path, "**", "#{icon}.svg")).first
+        resolved_icon = resolve_alias(icon)
+        icon_path = Dir.glob(Rails.root.join(base_path, "**", "#{resolved_icon}.svg")).first
         icon_path if icon_path && File.exist?(icon_path)
       end
 
@@ -106,6 +110,22 @@ module Playbook
 
     private
 
+      def resolve_alias(icon)
+        aliases = ALIASES[icon]
+        return icon unless aliases
+
+        if aliases.is_a?(Array)
+          aliases.find { |alias_name| file_exists?(alias_name) } || icon
+        else
+          aliases
+        end
+      end
+
+      def file_exists?(alias_name)
+        base_path = Rails.application.config.icon_path
+        File.exist?(Dir.glob(Rails.root.join(base_path, "**", "#{alias_name}.svg")).first)
+      end
+
       def svg_size
         size.nil? ? "1x" : size
       end

data/app/pb_kits/playbook/pb_icon/icon_aliases.json

@@ -0,0 +1,39 @@
+{
+    "aliases": {
+      "arrow-alt-circle-right": "circle-right",
+      "angles-down": "angle-double-down",
+      "arrow-alt-down": "down",
+      "arrow-alt-up": "up",
+      "arrow-right-long": "long-arrow-right",
+      "arrow-to-bottom": "arrow-down-to-line",
+      "arrows-h": "arrows-left-right",
+      "calendar-days": "calendar-alt",
+      "circle-arrow-right": "arrow-circle-right",
+      "clock-rotate-left": "history",
+      "close": [
+        "times",
+        "xmark"
+      ],
+      "ellipsis-h": "ellipsis",
+      "exclamation-circle": "circle-exclamation",
+      "external-link": "arrow-up-right-from-square",
+      "file-lines": "file-alt",
+      "gear": "cog",
+      "home": "house",
+      "info-circle": "circle-info",
+      "map-o": "map",
+      "message": "comment-alt",
+      "minus-circle": "circle-minus",
+      "money": "money-bill",
+      "mouse-pointer": "arrow-pointer",
+      "nitro": "nitro-n",
+      "play-circle": "circle-play",
+      "plus-circle": "circle-plus",
+      "plus-square": "square-plus",
+      "powergon": "powergon-p",
+      "question-circle": "circle-question",
+      "roofing": "product-roofing",
+      "shelves": "inventory",
+      "th-list": "table-list"
+    }
+  }

data/app/pb_kits/playbook/pb_icon/types.d.ts

@@ -0,0 +1 @@
+declare module 'js-yaml'

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -10,7 +10,7 @@ type ListProps = {
   className?: string;
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
-  draggable?: boolean;
+  enableDrag?: boolean;
   data?: Record<string, unknown>;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
@@ -32,7 +32,7 @@ const List = (props: ListProps) => {
     className,
     dark = false,
     data = {},
-    draggable = false,
+    enableDrag = false,
     htmlOptions = {},
     id,
     layout = "",
@@ -54,7 +54,7 @@ const List = (props: ListProps) => {
   const childrenWithProps = React.Children.map(
     children,
     (child: React.ReactElement) => {
-      return React.cloneElement(child, { text, variant, draggable });
+      return React.cloneElement(child, { text, variant, enableDrag });
     }
   );
   const ariaProps = buildAriaProps(aria);
@@ -74,7 +74,7 @@ const List = (props: ListProps) => {
   return (
     <>
     {
-      draggable ? (
+      enableDrag ? (
         <Draggable.Container>
      <div className={classes}>
       {ordered ? (

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -11,6 +11,7 @@ type ListItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: Record<string, unknown>,
+  dragId?: string,
   dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -23,7 +24,8 @@ const ListItem = (props: ListItemProps) => {
     children,
     className,
     data = {},
-    draggable = false,
+    enableDrag,
+    dragId, 
     dragHandle = true,
     htmlOptions = {},
     id,
@@ -42,8 +44,10 @@ const ListItem = (props: ListItemProps) => {
   return (
     <>
     {
-      draggable ? (
-        <Draggable.Item id={id}>
+      enableDrag ? (
+        <Draggable.Item 
+            dragId={dragId}
+        >
         <li
             {...ariaProps}
             {...dataProps}

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("nav", props: { variant: "bold" }) do %>
-    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", collapsed: false }) do %>
         <%= pb_rails("nav", props: { variant: "bold" }) do %>
             <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
             <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -9,6 +9,7 @@ const CollapsibleNav = (props) => {
     >
       <NavItem
           active
+          collapsed={false}
           collapsible 
           iconLeft="city" 
           link="#" 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md

@@ -1 +1,3 @@
-The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.
+The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.
+
+The optional `collapsed` prop can also be used to set the default state for the collapsed nav on first render of the page. `collapsed` takes a boolean value that is set to true (meaning nav is collapsed) by default. Set it to false as shown here to have the nav open on first render.

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -22,7 +22,7 @@
           </span>
         <% end %>    
        <% end %>
-      <%= pb_rails("collapsible/collapsible_content") do %>
+      <%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
         <%= content.presence %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -12,6 +12,7 @@ module Playbook
                          default: "regular"
       prop :highlighted_border, type: Playbook::Props::Boolean, default: true
       prop :collapsible, type: Playbook::Props::Boolean, default: false
+      prop :collapsed, type: Playbook::Props::Boolean, default: true
       prop :link
       prop :text
       prop :collapsible_trail, type: Playbook::Props::Boolean, default: false

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.md

@@ -1,7 +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.
+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 a `position` and a `size` as a key:value pair object.
+The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
 
-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 `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 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.
+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 %>