@adobe-commerce/elsie 1.0.0-alpha4 → 1.0.0-beta1

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import {

package/src/components/Accordion/Accordion.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes, useState, useEffect } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';

package/src/components/Accordion/index.ts

@@ -1,2 +1,11 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/Accordion/Accordion';
 export { Accordion as default } from '@adobe-commerce/elsie/components/Accordion/Accordion';

package/src/components/ActionButton/ActionButton.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 /* https://cssguidelin.es/#bem-like-naming */
 
 .dropin-action-button {

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import {

package/src/components/ActionButton/ActionButton.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 import { ComponentChildren, FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { VComponent, classes } from '@adobe-commerce/elsie/lib';

package/src/components/ActionButton/index.ts

@@ -1 +1,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/ActionButton/ActionButton';

package/src/components/ActionButtonGroup/ActionButtonGroup.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 /* https://cssguidelin.es/#bem-like-naming */
 
 .dropin-action-button-group {

package/src/components/ActionButtonGroup/ActionButtonGroup.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import { ActionButton } from '..';

package/src/components/ActionButtonGroup/ActionButtonGroup.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 import { FunctionComponent, VNode, cloneElement } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';

package/src/components/ActionButtonGroup/index.ts

@@ -1 +1,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/ActionButtonGroup/ActionButtonGroup';

package/src/components/AlertBanner/AlertBanner.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 /* https://cssguidelin.es/#bem-like-naming */
 
 .dropin-alert-banner {

package/src/components/AlertBanner/AlertBanner.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import {

package/src/components/AlertBanner/AlertBanner.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { classes, VComponent } from '@adobe-commerce/elsie/lib';

package/src/components/AlertBanner/index.ts

@@ -1,2 +1,11 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/AlertBanner/AlertBanner';
 export { AlertBanner as default } from '@adobe-commerce/elsie/components/AlertBanner/AlertBanner';

package/src/components/Breadcrumbs/Breadcrumbs.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 /* https://cssguidelin.es/#bem-like-naming */
 
 .dropin-breadcrumbs__container {

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import {

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 import { HTMLAttributes } from 'preact/compat';
 import { FunctionComponent, VNode } from 'preact';
 import { VComponent, classes } from '@adobe-commerce/elsie/lib';

package/src/components/Breadcrumbs/index.ts

@@ -1,2 +1,11 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/Breadcrumbs/Breadcrumbs';
 export { Breadcrumbs as default } from '@adobe-commerce/elsie/components/Breadcrumbs/Breadcrumbs';

package/src/components/Button/Button.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 /* Common button styles */
 .dropin-button,
 .dropin-iconButton {

package/src/components/Button/Button.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 import type { Meta, StoryObj } from '@storybook/preact';
 import {
   Button as component,

package/src/components/Button/Button.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 import { ComponentChildren, FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { VComponent, classes } from '@adobe-commerce/elsie/lib';

package/src/components/Button/index.ts

@@ -1,2 +1,11 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/Button/Button';
 export { Button as default } from '@adobe-commerce/elsie/components/Button/Button';

package/src/components/Card/Card.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 /* https://cssguidelin.es/#bem-like-naming */
 
 .dropin-card {

package/src/components/Card/Card.stories.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 import type { Meta, StoryObj } from '@storybook/preact';
 import { Card, CardProps } from '@adobe-commerce/elsie/components/Card';

package/src/components/Card/Card.tsx

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 import { ComponentChildren, FunctionComponent } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';

package/src/components/Card/index.ts

@@ -1 +1,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/Card/Card';

package/src/components/CartItem/CartItem.css

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
+ *******************************************************************/
+
 /* https://cssguidelin.es/#bem-like-naming */
 
 .dropin-cart-item {
@@ -207,6 +216,20 @@
   grid-column: 2 / 5;
 }
 
+.dropin-cart-item__actions {
+  grid-column: 1 / 5;
+  grid-row: 5 / 10;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.dropin-cart-item__actions button:only-child {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .dropin-cart-item__title--edit {
   padding-right: var(--spacing-xbig);
 }
@@ -278,6 +301,11 @@
     grid-column: 2 / 4;
   }
 
+  .dropin-cart-item__actions {
+    grid-column: 1 / 4;
+    grid-row: 5 / 10;
+  }
+
   .dropin-cart-item__title--edit {
     grid-column: 2 / 5;
   }
@@ -331,7 +359,13 @@
   .dropin-cart-item__alert,
   .dropin-cart-item__quantity,
   .dropin-cart-item__footer {
-    grid-column: 3 / 10;
+    grid-column: 3 / 9;
+  }
+
+  .dropin-cart-item__actions {
+    grid-column: 10 / 13;
+    grid-row: 4 / 10;
+    text-align: right;
   }
 
   .dropin-cart-item__savings__wrapper {
@@ -396,9 +430,10 @@
     padding-right: unset;
   }
 
-  .dropin-cart-item__quantity {
-    grid-column: 6 / 7;
-    grid-row: 1 / 10;
+  .dropin-cart-item__actions {
+    grid-column: 9 / 13;
+    grid-row: 4 / 10;
+    text-align: right;
   }
 
   .dropin-cart-item__warning,
@@ -433,7 +468,7 @@
   }
 
   .dropin-cart-item__total {
-    grid-column: 7 / 9;
+    grid-column: 10 / 13;
     grid-row: 1 / 10;
     justify-self: end;
     text-align: right;