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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.5.0-alpha3000",
+  "version": "1.5.0-alpha3001",
   "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

@@ -326,7 +326,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 +358,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 +384,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 +410,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>
         ),
       },

package/src/components/Table/Table.tsx

@@ -49,6 +49,7 @@ export const Table: FunctionComponent<TableProps> = ({
   ...props
 }) => {
   const translations = useText({
+    ariaSortNone: 'Dropin.Table.ariaSortNone',
     ariaSortAscending: 'Dropin.Table.ariaSortAscending',
     ariaSortDescending: 'Dropin.Table.ariaSortDescending',
     sortedAscending: 'Dropin.Table.sortedAscending',
@@ -115,7 +116,11 @@ 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={
+                  column.sortBy === 'asc' ? translations.ariaSortAscending :
+                  column.sortBy === 'desc' ? translations.ariaSortDescending :
+                  column.sortBy === true ? translations.ariaSortNone : undefined
+                }
               >
                 {column.label}
                 {getSortButton(column)}

package/src/i18n/en_US.json

@@ -143,6 +143,7 @@
       "picker": "Select a date"
     },
     "Table": {
+      "ariaSortNone": "none",
       "ariaSortAscending": "ascending",
       "ariaSortDescending": "descending",
       "sortedAscending": "Sort {label} ascending",