RubyGems - playbook_ui - Versions diffs - 14.13.0.pre.alpha.play1884progresspill6064 → 14.13.0.pre.alpha.rails8compatible6228 - Mend

playbook_ui 14.13.0.pre.alpha.play1884progresspill6064 → 14.13.0.pre.alpha.rails8compatible6228

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 (107) hide show

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx ADDED Viewed

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
+// Initial items to be dragged
+const data = [
+    {
+        id: "1",
+        task: "Task 1",
+        assignee_name: "Terry Miles",
+        assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+      },
+      {
+        id: "2",
+        task: "Task 2",
+        assignee_name: "Sophia Miles",
+        assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+      },
+      {
+        id: "3",
+        task: "Task 3",
+        assignee_name: "Alice Jones",
+        assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+      },
+      {
+        id: "4",
+        task: "Task 4",
+        assignee_name: "Mike James",
+        assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+      },
+      {
+        id: "5",
+        task: "Task 5",
+        assignee_name: "James Guy",
+        assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+      }
+];
+const DraggableWithTableReact = (props) => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Table
+            responsive="none"
+            size="sm"
+            {...props}
+        >
+          <Table.Head>
+            <Table.Row>
+              <Table.Header>{"id"}</Table.Header>
+              <Table.Header>{"name"}</Table.Header>
+              <Table.Header>{"task number"}</Table.Header>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body draggableContainer>
+            {initialState.map(({ id, task, assignee_name, assignee_img }) => (
+              <Table.Row
+                  dragId={id}
+                  draggableItem
+                  key={id}
+              >
+                <Table.Cell>{id}</Table.Cell>
+                <Table.Cell>
+                  <Flex align="center">
+                    <Avatar
+                        imageUrl={assignee_img}
+                        size="xs"
+                    />
+                    <Body
+                        paddingLeft="xxs"
+                        text={assignee_name}
+                        {...props}
+                    />
+                  </Flex>
+                </Table.Cell>
+                <Table.Cell>{task}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+    </DraggableProvider>
+    </>
+  );
+};
+export default DraggableWithTableReact;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md ADDED Viewed

@@ -0,0 +1,5 @@
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
+- Wrap the Table with the `DraggableProvider` and manage state as shown.
+- use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
+- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.

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

@@ -4,7 +4,9 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
+  - draggable_with_table_react: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit

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

@@ -2,4 +2,5 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
 export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
-export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
+export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx CHANGED Viewed

@@ -17,10 +17,11 @@ type DraggableContainerProps = {
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 const DraggableContainer = (props: DraggableContainerProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
   const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
@@ -28,6 +29,8 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
+  const Tag: React.ReactElement | any = `${tag}`;
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
@@ -36,18 +39,18 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   );
   return (
-    <div
+    <Tag
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={classes}
         id={id}
         key={container}
-        onDragOver={(e) => handleDragOver(e, container)}
+        onDragOver={(e: Event) => handleDragOver(e, container)}
         onDrop={() => handleDrop(container)}
     >
       {children}
-    </div>
+    </Tag>
   );
 };

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx CHANGED Viewed

@@ -18,10 +18,11 @@ type DraggableItemProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   dragId?: string;
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId, tag="div" } = props;
   const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
     DraggableContext();
@@ -30,6 +31,8 @@ const DraggableItem = (props: DraggableItemProps) => {
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
+  const Tag: React.ReactElement | any = `${tag}`;
   const classes = classnames(
     buildCss("pb_draggable_item"),
     `${isDragging === dragId ? "is_dragging" : ""}`,
@@ -38,7 +41,7 @@ const DraggableItem = (props: DraggableItemProps) => {
   );
   return (
-    <div
+    <Tag
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -51,7 +54,7 @@ const DraggableItem = (props: DraggableItemProps) => {
         onDragStart={() => handleDragStart(dragId, container)}
     >
       {children}
-    </div>
+    </Tag>
   );
 };

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb CHANGED Viewed

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      data: object.data,
-      id: object.id,
-      class: object.classname,
-      **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= react_component("MultiLevelSelect", object.multi_level_select_options)  %>
 <% end %>

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

@@ -1,15 +1,9 @@
   <% if object.collapsible %>
     <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
-        <%= content_tag(object.tag,
-          aria: object.aria,
-          class: object.classname,
-          data: object.data,
-          dark: object.dark,
-          id: object.id,
-          href: object.link && object.link,
-          target: object.link && object.target,
-          **combined_html_options
+        <%= pb_content_tag( object.tag,
+            href: object.link && object.link,
+            target: object.link && object.target
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -20,22 +14,16 @@
           <span class="pb_nav_list_item_text_collapsible">
             <%= object.text %>
           </span>
-        <% end %>
+        <% end %>
        <% end %>
       <%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
   <% else %>
-    <%= content_tag(object.tag,
-      aria: object.aria,
-      class: object.classname,
-      **combined_html_options,
-      data: object.data,
-      dark: object.dark,
-      id: object.id,
-      href: object.link && object.link,
-      target: object.link && object.target
+    <%= pb_content_tag( object.tag,
+        href: object.link && object.link,
+        target: object.link && object.target
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

data/app/pb_kits/playbook/pb_nav/nav.html.erb CHANGED Viewed

@@ -1,12 +1,7 @@
-<%= content_tag(:nav,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:nav) do %>
   <% if object.title %>
-    <%= content_tag(:div, class: "pb_nav_list_title") do %>
-      <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
+    <%= pb_content_tag do %>
+      <%= pb_content_tag(:a) do %>
         <%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb CHANGED Viewed

@@ -1,7 +1,2 @@
-<%= content_tag(:div,
-    aria: object.aria.merge!(label: object.status),
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 <% end %>

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

@@ -8,6 +8,7 @@ import OverlayToken from './subcomponents/_overlay_token'
 export type OverlayChildrenProps = {
     children: React.ReactNode[] | React.ReactNode,
     color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
+    dynamic?: boolean,
     position: string,
     size: string,
 }
@@ -18,6 +19,7 @@ type OverlayProps = {
     children: React.ReactNode[] | React.ReactNode,
     color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
     data?: { [key: string]: string },
+    dynamic?: false,
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
@@ -30,6 +32,7 @@ const Overlay = (props: OverlayProps) => {
         children,
         color = "card_light",
         data = {},
+        dynamic = false,
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
@@ -69,6 +72,7 @@ const Overlay = (props: OverlayProps) => {
                 }) : OverlayToken({
                     children,
                     color,
+                    dynamic: dynamic,
                     position: getPosition(),
                     size: getSize()
                 })

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

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
+const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
+    return (
+        <Flex
+            columnGap="lg"
+            orientation="row"
+            ref={ref}
+        >
+            {Array.from({ length: 15 }, (_, index) => (
+                <FlexItem key={index}>
+                    <Card>{"Card Content"}</Card>
+                </FlexItem>
+            ))}
+        </Flex>
+    )
+})
+const OverlayVerticalDynamicMultiDirectional = () => (
+    <>
+        <Overlay
+            color="card_light"
+            dynamic
+            layout={{"x": "xl"}}
+        >
+            <InlineCardsExample />
+        </Overlay>
+    </>
+)
+export default OverlayVerticalDynamicMultiDirectional

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

	@@ -0,0 +1 @@
1	+ Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar. You must also add a `ref` to the child that's being passed through the Overlay.

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

@@ -2,6 +2,7 @@ examples:
   react:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
+  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
   rails:

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

@@ -1,3 +1,4 @@
 export { default as OverlayDefault } from './_overlay_default.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/subcomponents/_overlay_token.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
-import React from 'react'
-import { OverlayChildrenProps } from '../_overlay'
+import React, { useRef, useEffect, useState } from 'react';
+import { OverlayChildrenProps } from '../_overlay';
 const previousOverlayDirectionMap: { [key: string]: string } = {
     "x": "left",
@@ -15,11 +15,40 @@ const OverlayToken = (props: OverlayChildrenProps) => {
     const {
         children,
         color,
+        dynamic,
         position,
         size,
     } = props
-    const hasSubsequentOverlay = position === "x" || position === "y"
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const [isAtStart, setIsAtStart] = useState(true);
+    const [isAtEnd, setIsAtEnd] = useState(false);
+    const handleScroll = () => {
+        const container = scrollContainerRef.current;
+        if (container) {
+            const { scrollLeft, scrollWidth, clientWidth } = container;
+            const atStart = scrollLeft === 0;
+            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
+            setIsAtStart(atStart);
+            setIsAtEnd(atEnd);
+        }
+    };
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (container) {
+            container.addEventListener('scroll', handleScroll);
+            handleScroll();
+            return () => {
+                container.removeEventListener('scroll', handleScroll);
+            };
+        }
+    }, []);
+    const hasSubsequentOverlay = position === "x" || position === "y";
     const getPreviousOverlayDirection = () => {
         return hasSubsequentOverlay ? previousOverlayDirectionMap[position] : position
@@ -34,15 +63,24 @@ const OverlayToken = (props: OverlayChildrenProps) => {
     return (
         <>
-            <div className={previousOverlayClassName} />
-            {children}
-            { hasSubsequentOverlay &&
-                <div className={subsequentOverlayClassName} />
+            <div className={dynamic ? isAtStart ? '' : previousOverlayClassName : previousOverlayClassName} />
+            {dynamic ?
+                <div
+                    ref={scrollContainerRef}
+                    style={{
+                        overflowX: 'auto',
+                    }}
+                >
+                    {children}
+                </div>
+                :
+                    children
+                }
+            {hasSubsequentOverlay &&
+                <div className={dynamic ? isAtEnd ? '' : subsequentOverlayClassName : subsequentOverlayClassName} />
             }
         </>
     )
 }
-export default OverlayToken
+export default OverlayToken;

data/app/pb_kits/playbook/pb_popover/popover.html.erb CHANGED Viewed

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss CHANGED Viewed

@@ -28,6 +28,10 @@
   [class*=pb_progress_pill] {
     @include pb_progress_pill;
+    &.full_width_pill {
+      max-width: none;
+    }
     &[class*=_inactive] {
       background-color: $border_light;
       &.dark {

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx CHANGED Viewed

@@ -13,6 +13,7 @@ type ProgressPillsProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
+  fullWidthPill?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   steps?: number,
@@ -20,19 +21,19 @@ type ProgressPillsProps = {
   value?: string,
 }
-const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
+const ProgressPill = ({ active, dark, steps: step, fullWidthPill }: ProgressPillsProps) => (
   <div
       className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
-      }`}
+      }${fullWidthPill ? ' full_width_pill' : ''}`}
       key={step}
   />
 )
-const showSteps = (steps: number, active: number, dark: boolean) => {
+const showSteps = (steps: number, active: number, dark: boolean, fullWidthPill: boolean) => {
   const items = []
   for (let step = 1; step <= steps; step++) {
-    items.push(ProgressPill({ steps: step, active, dark }))
+    items.push(ProgressPill({ steps: step, active, dark, fullWidthPill }))
   }
   return items
@@ -44,6 +45,7 @@ const ProgressPills = (props: ProgressPillsProps) => {
     aria = { hidden: 'true' },
     className,
     data = {},
+    fullWidthPill = false,
     htmlOptions = {},
     id,
     steps = 3,
@@ -79,7 +81,7 @@ const ProgressPills = (props: ProgressPillsProps) => {
               text={value}
           />
         </div>}
-      <div className="progress_pills">{showSteps(steps, active, dark)}</div>
+      <div className="progress_pills">{showSteps(steps, active, dark, fullWidthPill)}</div>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb ADDED Viewed

	@@ -0,0 +1 @@
1	+ <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 5 steps complete" }, steps: 5, active: 2, full_width_pill: true }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from 'react'
+import ProgressPills from '../_progress_pills'
+const ProgressPillsFullWidth = (props) => {
+    return (
+        <>
+            <ProgressPills
+                active={2}
+                aria={{ label: '2 out of 5 steps complete' }}
+                fullWidthPill
+                steps={5}
+                {...props}
+            />
+        </>
+    )
+}
+export default ProgressPillsFullWidth

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Pass `full_width_pill: true` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Pass `fullWidthPill` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

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

@@ -3,9 +3,11 @@ examples:
   rails:
   - progress_pills_default: Default
   - progress_pills_status: Status
+  - progress_pills_full_width: Full Container Width
   react:
   - progress_pills_default: Default
   - progress_pills_status: Status
+  - progress_pills_full_width: Full Container Width

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

@@ -1,2 +1,3 @@
 export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
 export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
+export { default as ProgressPillsFullWidth } from './_progress_pills_full_width.jsx'

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb CHANGED Viewed

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria_attributes,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <div class="progress_pills_status">
       <% object.with_status do |status| %>
@@ -14,7 +9,7 @@
     <div class="progress_pills">
       <% object.each_step do |step| %>
-        <span class="pb_progress_pill<%= object.active_step(step) %><%= object.dark_pill %>"></span>
+        <span class="pb_progress_pill<%= object.active_step(step) %><%= object.make_full_width %><%= object.dark_pill %>"></span>
       <% end %>
     </div>

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb CHANGED Viewed

@@ -9,6 +9,8 @@ module Playbook
       prop :steps, type: Playbook::Props::Number,
                    default: 3
       prop :title
+      prop :full_width_pill, type: Playbook::Props::Boolean,
+                             default: false
       def classname
         generate_classname("pb_progress_pills_kit")
@@ -26,6 +28,10 @@ module Playbook
         step <= active ? "_active" : "_inactive"
       end
+      def make_full_width
+        full_width_pill ? " full_width_pill" : nil
+      end
       def aria_attributes
         return aria if aria.present?

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.test.js CHANGED Viewed

@@ -23,6 +23,20 @@ const ProgressPillsDefault = () => {
     )
 }
+const ProgressPillsFullWidth = () => {
+    return (
+        <ProgressPills
+            active={2}
+            aria={{ label: ariaLabel }}
+            data={{ testid: testId }}
+            fullWidthPill
+            steps={3}
+            title={title}
+            value={value}
+        />
+    )
+}
 test('should pass data prop', () => {
     render(<ProgressPillsDefault />)
     const kit = screen.getByTestId(testId)
@@ -51,4 +65,15 @@ test('should render value', () => {
     render(<ProgressPillsDefault />)
     const kit = screen.getByText(value)
     expect(kit).toBeInTheDocument()
-})
+})
+test('should apply fullWidthPill styling when fullWidthPill prop is true', () => {
+    render(<ProgressPillsFullWidth />)
+    const container = screen.getByTestId(testId)
+    const pillElements = container.querySelectorAll('.full_width_pill')
+    expect(pillElements.length).toBeGreaterThan(0)
+    pillElements.forEach((pill) => {
+        expect(pill).toHaveClass('full_width_pill')
+    })
+})