@adobe-commerce/elsie 1.5.0-alpha3000 → 1.5.0-alpha3002

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.5.0-alpha3000",
+  "version": "1.5.0-alpha3002",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/Incrementer/Incrementer.css

@@ -19,6 +19,12 @@
   opacity: 1;
 }
 
+.dropin-incrementer__content--no-buttons {
+  grid-template-columns: max-content;
+  width: fit-content;
+  margin-inline: auto;
+}
+
 .dropin-incrementer__content--disabled {
   background: var(--color-neutral-300);
   border-radius: var(--shape-border-radius-1);

package/src/components/Incrementer/Incrementer.stories.tsx

@@ -79,6 +79,10 @@ const meta: Meta<IncrementerProps> = {
       description: 'Maximum length of the input field',
       type: 'number',
     },
+    showButtons: {
+      description: 'Show increase/decrease buttons',
+      control: 'boolean',
+    },
   },
 };
 
@@ -170,3 +174,17 @@ export const WithError = {
     await expect(error).toHaveTextContent('Maximum quantity is 100');
   },
 };
+
+export const WithoutButtons: Story = {
+  args: {
+    size: 'medium',
+    onValue: action('onValue'),
+    name: 'incrementerField',
+    value: '1',
+    min: 1,
+    max: 100,
+    disabled: false,
+    'aria-label': 'Quantity',
+    showButtons: false,
+  },
+};

package/src/components/Incrementer/Incrementer.tsx

@@ -28,6 +28,7 @@ export interface IncrementerProps
   max?: number;
   disabled?: boolean;
   maxLength?: number;
+  showButtons?: boolean;
 }
 
 export const Incrementer: FunctionComponent<IncrementerProps> = ({
@@ -42,6 +43,7 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
   onValue,
   onUpdateError,
   size = 'medium',
+  showButtons = true,
   ...props
 }) => {
   const [currentValue, setCurrentValue] = useState<number>(Number(value));
@@ -99,41 +101,44 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
         className={classes([
           'dropin-incrementer__content',
           `dropin-incrementer__content--${size}`,
+          ['dropin-incrementer__content--no-buttons', !showButtons],
           [`dropin-incrementer__content--error`, isInvalid],
           [`dropin-incrementer__content--success`, success],
           [`dropin-incrementer__content--disabled`, disabled],
         ])}
       >
         {/* Minus Button */}
-        <div
-          className={classes([
-            'dropin-incrementer__button-container',
-            [`dropin-incrementer__button-container--disabled`, disabled],
-          ])}
-        >
-          <Localizer>
-            <button
-              type="button"
-              className={classes([
-                'dropin-incrementer__decrease-button',
-                [`dropin-incrementer__decrease-button--disabled`, disabled],
-              ])}
-              onClick={() => handleIncrementer(currentValue - 1)}
-              disabled={disabled || currentValue < minValue + 1}
-              aria-label={
-                (<Text id="Dropin.Incrementer.decreaseLabel" />) as any
-              }
-            >
-              <Icon
-                source={Minus}
-                size="16"
-                stroke="1"
-                viewBox="4 2 20 20"
-                className="dropin-incrementer__down"
-              />
-            </button>
-          </Localizer>
-        </div>
+        {showButtons && (
+          <div
+            className={classes([
+              'dropin-incrementer__button-container',
+              [`dropin-incrementer__button-container--disabled`, disabled],
+            ])}
+          >
+            <Localizer>
+              <button
+                type="button"
+                className={classes([
+                  'dropin-incrementer__decrease-button',
+                  [`dropin-incrementer__decrease-button--disabled`, disabled],
+                ])}
+                onClick={() => handleIncrementer(currentValue - 1)}
+                disabled={disabled || currentValue < minValue + 1}
+                aria-label={
+                  (<Text id="Dropin.Incrementer.decreaseLabel" />) as any
+                }
+              >
+                <Icon
+                  source={Minus}
+                  size="16"
+                  stroke="1"
+                  viewBox="4 2 20 20"
+                  className="dropin-incrementer__down"
+                />
+              </button>
+            </Localizer>
+          </div>
+        )}
 
         {/* Input Field */}
         <input
@@ -157,36 +162,38 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
           {...props}
         />
 
-        <div
-          className={classes([
-            'dropin-incrementer__button-container',
-            [`dropin-incrementer__button-container--disabled`, disabled],
-          ])}
-        >
-          {/* Plus/Add button */}
-          <Localizer>
-            <button
-              type="button"
-              className={classes([
-                'dropin-incrementer__increase-button',
-                [`dropin-incrementer__increase-button--disabled`, disabled],
-              ])}
-              onClick={() => handleIncrementer(currentValue + 1)}
-              disabled={disabled || currentValue > maxValue - 1}
-              aria-label={
-                (<Text id="Dropin.Incrementer.increaseLabel" />) as any
-              }
-            >
-              <Icon
-                source={Add}
-                size="16"
-                stroke="1"
-                viewBox="4 2 20 20"
-                className="dropin-incrementer__add"
-              />
-            </button>
-          </Localizer>
-        </div>
+        {showButtons && (
+          <div
+            className={classes([
+              'dropin-incrementer__button-container',
+              [`dropin-incrementer__button-container--disabled`, disabled],
+            ])}
+          >
+            {/* Plus/Add button */}
+            <Localizer>
+              <button
+                type="button"
+                className={classes([
+                  'dropin-incrementer__increase-button',
+                  [`dropin-incrementer__increase-button--disabled`, disabled],
+                ])}
+                onClick={() => handleIncrementer(currentValue + 1)}
+                disabled={disabled || currentValue > maxValue - 1}
+                aria-label={
+                  (<Text id="Dropin.Incrementer.increaseLabel" />) as any
+                }
+              >
+                <Icon
+                  source={Add}
+                  size="16"
+                  stroke="1"
+                  viewBox="4 2 20 20"
+                  className="dropin-incrementer__add"
+                />
+              </button>
+            </Localizer>
+          </div>
+        )}
       </div>
       {isInvalid && (
         <p className="dropin-incrementer__content--error-message">

package/src/components/Table/Table.stories.tsx

@@ -96,6 +96,20 @@ const meta: Meta<TableProps> = {
       },
       control: 'object',
     },
+    loading: {
+      description: 'When true, renders skeleton rows instead of actual data. Useful for showing loading state while data is being fetched.',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      control: 'boolean',
+    },
+    skeletonRowCount: {
+      description: 'Number of skeleton rows to render when loading is true. Defaults to 10 rows.',
+      table: {
+        type: { summary: 'number' },
+      },
+      control: 'number',
+    },
   },
 };
 
@@ -326,7 +340,7 @@ export const WideTable: Story = {
  *     { 
  *       user: <div><strong>John Doe</strong><br/>john@example.com<br/>Senior Developer</div>,
  *       description: <div>Lead developer for the<br/>e-commerce platform<br/>with 5+ years experience</div>,
- *       status: <span style="background: green; color: white; padding: 2px 8px; border-radius: 4px;">Active</span>,
+ *       status: <span>Active</span>,
  *       actions: <div><button>Edit</button><br/><button>Delete</button><br/><button>View</button></div>
  *     }
  *   ]}
@@ -358,22 +372,13 @@ export const ComplexCells: Story = {
           </div>
         ),
         status: (
-          <span style={{ 
-            background: '#22c55e', 
-            color: 'white', 
-            padding: '2px 8px', 
-            borderRadius: '4px',
-            fontSize: '12px',
-            fontWeight: 'bold'
-          }}>
-            Active
-          </span>
+          <span>Active</span>
         ),
         actions: (
           <div>
-            <button style={{ marginBottom: '4px', display: 'block' }}>Edit</button>
-            <button style={{ marginBottom: '4px', display: 'block' }}>Delete</button>
-            <button style={{ display: 'block' }}>View</button>
+            <button>Edit</button>
+            <button>Delete</button>
+            <button>View</button>
           </div>
         ),
       },
@@ -393,22 +398,13 @@ export const ComplexCells: Story = {
           </div>
         ),
         status: (
-          <span style={{ 
-            background: '#f59e0b', 
-            color: 'white', 
-            padding: '2px 8px', 
-            borderRadius: '4px',
-            fontSize: '12px',
-            fontWeight: 'bold'
-          }}>
-            Pending
-          </span>
+          <span>Pending</span>
         ),
         actions: (
           <div>
-            <button style={{ marginBottom: '4px', display: 'block' }}>Edit</button>
-            <button style={{ marginBottom: '4px', display: 'block' }}>Approve</button>
-            <button style={{ display: 'block' }}>Reject</button>
+            <button>Edit</button>
+            <button>Approve</button>
+            <button>Reject</button>
           </div>
         ),
       },
@@ -428,22 +424,13 @@ export const ComplexCells: Story = {
           </div>
         ),
         status: (
-          <span style={{ 
-            background: '#ef4444', 
-            color: 'white', 
-            padding: '2px 8px', 
-            borderRadius: '4px',
-            fontSize: '12px',
-            fontWeight: 'bold'
-          }}>
-            Inactive
-          </span>
+          <span>Inactive</span>
         ),
         actions: (
           <div>
-            <button style={{ marginBottom: '4px', display: 'block' }}>Edit</button>
-            <button style={{ marginBottom: '4px', display: 'block' }}>Activate</button>
-            <button style={{ display: 'block' }}>Archive</button>
+            <button>Edit</button>
+            <button>Activate</button>
+            <button>Archive</button>
           </div>
         ),
       },
@@ -645,4 +632,42 @@ export const RowDetails: Story = {
   },
 };
 
+/**
+ * Table in loading state with skeleton rows.
+ * Demonstrates how the table appears while data is being fetched.
+ * Each cell shows a skeleton placeholder that matches the table structure.
+ * 
+ * **Features**:
+ * - Shows skeleton rows instead of actual data when `loading` is true
+ * - Configurable number of skeleton rows via `skeletonRowCount` prop
+ * - Maintains table structure and column headers during loading
+ * - Each cell contains a single-line skeleton component
+ * 
+ * ```tsx
+ * <Table
+ *   loading={true}
+ *   skeletonRowCount={5}
+ *   columns={[
+ *     { key: 'name', label: 'Name' },  
+ *     { key: 'email', label: 'Email' },
+ *     { key: 'status', label: 'Status' }
+ *   ]}
+ *   rowData={[]} // Empty array when loading
+ * />
+ * ```
+ */
+export const LoadingState: Story = {
+  args: {
+    loading: true,
+    skeletonRowCount: 5,
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'email', label: 'Email' },
+      { key: 'status', label: 'Status' },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [], // Empty when loading
+  },
+};
+
 

package/src/components/Table/Table.tsx

@@ -10,7 +10,7 @@
 import { FunctionComponent, VNode, Fragment } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { classes, VComponent } from '@adobe-commerce/elsie/lib';
-import { Icon, Button } from '@adobe-commerce/elsie/components';
+import { Icon, Button, Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';
 import { useText } from '@adobe-commerce/elsie/i18n';
 
 import '@adobe-commerce/elsie/components/Table/Table.css';
@@ -28,13 +28,15 @@ type RowData = {
   _rowDetails?: VNode | string; // Special property for expandable row content
 };
 
-export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+export interface TableProps extends Omit<HTMLAttributes<HTMLTableElement>, 'loading'> {
   columns: Column[];
   rowData: RowData[];
   mobileLayout?: 'stacked' | 'none';
   caption?: string;
-  onSortChange?: (columnKey: string, direction: Sortable) => void;
   expandedRows?: Set<number>;
+  loading?: boolean;
+  skeletonRowCount?: number;
+  onSortChange?: (columnKey: string, direction: Sortable) => void;
 }
 
 export const Table: FunctionComponent<TableProps> = ({
@@ -44,13 +46,13 @@ export const Table: FunctionComponent<TableProps> = ({
   rowData = [],
   mobileLayout = 'none',
   caption,
-  onSortChange,
   expandedRows = new Set(),
+  loading = false,
+  skeletonRowCount = 10,
+  onSortChange,
   ...props
 }) => {
   const translations = useText({
-    ariaSortAscending: 'Dropin.Table.ariaSortAscending',
-    ariaSortDescending: 'Dropin.Table.ariaSortDescending',
     sortedAscending: 'Dropin.Table.sortedAscending',
     sortedDescending: 'Dropin.Table.sortedDescending',
     sortBy: 'Dropin.Table.sortBy',
@@ -72,7 +74,7 @@ export const Table: FunctionComponent<TableProps> = ({
     onSortChange(column.key, nextDirection);
   };
 
-  const getSortButton = (column: Column) => {
+  const renderSortButton = (column: Column) => {
     if (column.sortBy === undefined) return null;
 
     let iconSource: string;
@@ -101,6 +103,74 @@ export const Table: FunctionComponent<TableProps> = ({
     );
   };
 
+  const renderSkeletonRows = () => {
+    return Array.from({ length: skeletonRowCount }, (_, rowIndex) => (
+      <tr key={`skeleton-${rowIndex}`} className="dropin-table__body__row">
+        {columns.map((column) => (
+          <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
+            <Skeleton>
+              <SkeletonRow variant="row" size="small" fullWidth />
+            </Skeleton>
+          </td>
+        ))}
+      </tr>
+    ));
+  };
+
+  const renderDataRows = () => {
+    return rowData.map((row, rowIndex) => {
+      const hasDetails = row._rowDetails !== undefined;
+      const isExpanded = expandedRows.has(rowIndex);
+
+      return (
+        <Fragment key={rowIndex}>
+          <tr className="dropin-table__body__row">
+            {columns.map((column) => {
+              const cell = row[column.key];
+
+              if (typeof cell === 'string' || typeof cell === 'number') {
+                return (
+                  <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
+                    {cell}
+                  </td>
+                );
+              }
+
+              return (
+                <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
+                  <VComponent node={cell!} />
+                </td>
+              );
+            })}
+          </tr>
+          {hasDetails && isExpanded && (
+            <tr
+              key={`${rowIndex}-details`}
+              className="dropin-table__row-details dropin-table__row-details--expanded"
+              id={`row-${rowIndex}-details`}
+            >
+              <td
+                className="dropin-table__row-details__cell"
+                colSpan={columns.length}
+                role="region"
+                aria-labelledby={`row-${rowIndex}-details`}
+              >
+                {typeof row._rowDetails === 'string' ? row._rowDetails : <VComponent node={row._rowDetails!} />}
+              </td>
+            </tr>
+          )}
+        </Fragment>
+      );
+    });
+  };
+
+  const getAriaSort = (column: Column): 'none' | 'ascending' | 'descending' | 'other' | undefined => {
+    if (column.sortBy === true) return 'none';
+    if (column.sortBy === 'asc') return 'ascending';
+    if (column.sortBy === 'desc') return 'descending';
+    return undefined;
+  };
+
   return (
     <div className={classes(['dropin-table', `dropin-table--mobile-layout-${mobileLayout}`, className])}>
       <table {...props} className="dropin-table__table">
@@ -115,59 +185,22 @@ export const Table: FunctionComponent<TableProps> = ({
                   ['dropin-table__header__cell--sorted', column.sortBy === 'asc' || column.sortBy === 'desc'],
                   ['dropin-table__header__cell--sortable', column.sortBy !== undefined]
                 ])}
-                role="columnheader"
+                aria-sort={getAriaSort(column)}
               >
                 {column.label}
-                {getSortButton(column)}
+                {renderSortButton(column)}
               </th>
             ))}
           </tr>
         </thead>
         <tbody className="dropin-table__body">
-          {rowData.map((row, rowIndex) => {
-            const hasDetails = row._rowDetails !== undefined;
-            const isExpanded = expandedRows.has(rowIndex);
-            
-            return (
-              <Fragment key={rowIndex}>
-                <tr className="dropin-table__body__row">
-                  {columns.map((column) => {
-                    const cell = row[column.key];
-
-                    if (typeof cell === 'string' || typeof cell === 'number') {
-                      return (
-                        <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
-                          {cell}
-                        </td>
-                      );
-                    }
-
-                    return (
-                      <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
-                        <VComponent node={cell!} />
-                      </td>
-                    );
-                  })}
-                </tr>
-                {hasDetails && isExpanded && (
-                  <tr 
-                    key={`${rowIndex}-details`} 
-                    className="dropin-table__row-details dropin-table__row-details--expanded"
-                    id={`row-${rowIndex}-details`}
-                  >
-                    <td 
-                      className="dropin-table__row-details__cell" 
-                      colSpan={columns.length}
-                      role="region"
-                      aria-labelledby={`row-${rowIndex}-details`}
-                    >
-                      {typeof row._rowDetails === 'string' ? row._rowDetails : <VComponent node={row._rowDetails!} />}
-                    </td>
-                  </tr>
-                )}
-              </Fragment>
-            );
-          })}
+          {loading ? (
+            // Render skeleton rows when loading
+            renderSkeletonRows()
+          ) : (
+            // Render actual data when not loading
+            renderDataRows()
+          )}
         </tbody>
       </table>
     </div>

package/src/i18n/en_US.json

@@ -143,8 +143,6 @@
       "picker": "Select a date"
     },
     "Table": {
-      "ariaSortAscending": "ascending",
-      "ariaSortDescending": "descending",
       "sortedAscending": "Sort {label} ascending",
       "sortedDescending": "Sort {label} descending",
       "sortBy": "Sort by {label}"