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

package/src/components/CartItem/CartItemSkeleton.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 } from 'preact';
 import { Skeleton, SkeletonRow } from '@adobe-commerce/elsie/components';
 

package/src/components/CartItem/index.ts

@@ -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. 
+ *******************************************************************/
+
 export * from '@adobe-commerce/elsie/components/CartItem/CartItem';
 export * from '@adobe-commerce/elsie/components/CartItem/CartItemSkeleton';
 export { CartItem as default } from '@adobe-commerce/elsie/components/CartItem/CartItem';

package/src/components/CartList/CartList.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-list {

package/src/components/CartList/CartList.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/CartList/CartList.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 } from 'preact';
 import { HTMLAttributes, Children } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';

package/src/components/CartList/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/CartList/CartList';
 export { CartList as default } from '@adobe-commerce/elsie/components/CartList/CartList';

package/src/components/Checkbox/Checkbox.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-checkbox {

package/src/components/Checkbox/Checkbox.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 { Checkbox, CheckboxProps } from '@adobe-commerce/elsie/components/Checkbox';

package/src/components/Checkbox/Checkbox.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 { ChangeEvent, HTMLAttributes, useRef, useState } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';

package/src/components/Checkbox/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/Checkbox/Checkbox';

package/src/components/ColorSwatch/ColorSwatch.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 */
 
 /* Hide the default radio/checkbox button */

package/src/components/ColorSwatch/ColorSwatch.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 { action } from '@storybook/addon-actions';

package/src/components/ColorSwatch/ColorSwatch.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 } from 'preact';
 import { HTMLAttributes, useCallback } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';

package/src/components/ColorSwatch/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/ColorSwatch/ColorSwatch';
 export { ColorSwatch as default } from '@adobe-commerce/elsie/components/ColorSwatch/ColorSwatch';

package/src/components/ContentGrid/ContentGrid.css

@@ -1,18 +1,10 @@
 /********************************************************************
- * ADOBE CONFIDENTIAL
- * __________________
- *
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  All information contained herein is, and remains
- * the property of Adobe and its suppliers, if any. The intellectual
- * and technical concepts contained herein are proprietary to Adobe
- * and its suppliers and are protected by all applicable intellectual
- * property laws, including trade secret and copyright laws.
- * Dissemination of this information or reproduction of this material
- * is strictly forbidden unless prior written permission is obtained
- * from Adobe.
+ * 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 */

package/src/components/ContentGrid/ContentGrid.stories.tsx

@@ -1,18 +1,10 @@
 /********************************************************************
- * ADOBE CONFIDENTIAL
- * __________________
- *
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  All information contained herein is, and remains
- * the property of Adobe and its suppliers, if any. The intellectual
- * and technical concepts contained herein are proprietary to Adobe
- * and its suppliers and are protected by all applicable intellectual
- * property laws, including trade secret and copyright laws.
- * Dissemination of this information or reproduction of this material
- * is strictly forbidden unless prior written permission is obtained
- * from Adobe.
+ * 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

package/src/components/ContentGrid/ContentGrid.tsx

@@ -1,18 +1,10 @@
 /********************************************************************
- * ADOBE CONFIDENTIAL
- * __________________
- *
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  All information contained herein is, and remains
- * the property of Adobe and its suppliers, if any. The intellectual
- * and technical concepts contained herein are proprietary to Adobe
- * and its suppliers and are protected by all applicable intellectual
- * property laws, including trade secret and copyright laws.
- * Dissemination of this information or reproduction of this material
- * is strictly forbidden unless prior written permission is obtained
- * from Adobe.
+ * 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';

package/src/components/ContentGrid/index.ts

@@ -1,18 +1,10 @@
 /********************************************************************
- * ADOBE CONFIDENTIAL
- * __________________
- *
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  All information contained herein is, and remains
- * the property of Adobe and its suppliers, if any. The intellectual
- * and technical concepts contained herein are proprietary to Adobe
- * and its suppliers and are protected by all applicable intellectual
- * property laws, including trade secret and copyright laws.
- * Dissemination of this information or reproduction of this material
- * is strictly forbidden unless prior written permission is obtained
- * from Adobe.
+ * 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/ContentGrid/ContentGrid';

package/src/components/Divider/Divider.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. 
+ *******************************************************************/
+
 .dropin-divider {
   border: none;
 }

package/src/components/Divider/Divider.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 { Divider, DividerProps } from '@adobe-commerce/elsie/components/Divider';
 import { expect, within } from '@storybook/test';

package/src/components/Divider/Divider.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 } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';

package/src/components/Divider/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/Divider/Divider';
 export { Divider as default } from '@adobe-commerce/elsie/components/Divider/Divider'; 

package/src/components/Field/Field.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-field {
   display: grid;

package/src/components/Field/Field.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
 /* eslint-disable react/no-danger */
 import type { Meta, StoryObj } from '@storybook/preact';

package/src/components/Field/Field.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 '@adobe-commerce/elsie/components/Field/Field.css';
 import { classes } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';

package/src/components/Field/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/Field/Field';

package/src/components/Header/Header.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. 
+ *******************************************************************/
+
 .dropin-header-container {
   display: grid;
   grid-template-columns: repeat(2, auto);

package/src/components/Header/Header.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 { Header, HeaderProps } from '@adobe-commerce/elsie/components/Header';
@@ -50,6 +59,22 @@ export default {
       },
       defaultValue: { summary: '<empty string>' },
     },
+    level: {
+      description: 'Set the heading level',
+      options: [1, 2, 3, 4, 5, 6],
+      control: {
+        type: 'select',
+        labels: {
+          1: 'h1',
+          2: 'h2',
+          3: 'h3',
+          4: 'h4',
+          5: 'h5',
+          6: 'h6'
+        }
+      },
+      defaultValue: { summary: 2 },
+    },
   },
 } as Meta<HeaderProps>;
 
@@ -75,6 +100,7 @@ export const MediumSize = {
         Print order details
       </Button>
     ),
+    level: 2,
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -98,6 +124,7 @@ export const LargeSize = {
     size: 'large',
     divider: true,
     cta: <a href="#">Print order details</a>,
+    level: 2,
   },
 };
 
@@ -111,6 +138,7 @@ export const WithoutLine = {
     size: 'medium',
     divider: false,
     cta: <button>Print order details</button>,
+    level: 2,
   },
 };
 
@@ -124,5 +152,29 @@ export const WithoutActions = {
     size: 'medium',
     divider: false,
     cta: null,
+    level: 2,
   },
 };
+
+
+export const HeadingLevels = {
+  ...Template,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Heading Levels',
+    size: 'medium',
+    divider: true,
+    level: 1,
+  },
+  argTypes: {
+    level: {
+      control: {
+        type: 'select',
+        options: [1, 2, 3, 4, 5, 6]
+      },
+      description: 'Set the heading level',
+    }
+  }
+};

package/src/components/Header/Header.tsx

@@ -1,4 +1,13 @@
-import { FunctionComponent, VNode } from 'preact';
+/********************************************************************
+ *  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 { classes, VComponent } from '@adobe-commerce/elsie/lib';
 import { Divider } from '@adobe-commerce/elsie/components';
@@ -9,14 +18,32 @@ export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
   size?: 'medium' | 'large';
   divider?: boolean;
   cta?: VNode;
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 
+const Heading = ({
+  level,
+  className,
+  children,
+}: {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  className?: string;
+  children?: ComponentChildren;
+}) => {
+  const HeadingTag = level && level >= 1 && level <= 6
+    ? `h${level}` as keyof JSX.IntrinsicElements
+    : 'span';
+
+  return <HeadingTag className={className}>{children as any}</HeadingTag>;
+};
+
 export const Header: FunctionComponent<HeaderProps> = ({
   title = null,
   size = 'medium',
   cta,
   divider = true,
   className,
+  level,
   ...props
 }) => {
   if (!title) return null;
@@ -27,15 +54,16 @@ export const Header: FunctionComponent<HeaderProps> = ({
       className={classes(['dropin-header-container', className])}
       data-testid="dropin-header-container"
     >
-      <span
+      <Heading
         className={classes([
           'dropin-header-container__title',
           ['dropin-header-container__title--medium', size === 'medium'],
           ['dropin-header-container__title--large', size === 'large'],
         ])}
+        level={level}
       >
         {title}
-      </span>
+      </Heading>
       {cta ? (
         <VComponent node={cta} className="dropin-header-container__actions" />
       ) : null}

package/src/components/Header/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/Header/Header';
 export { Header as default } from '@adobe-commerce/elsie/components/Header/Header';

package/src/components/Icon/Icon.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-icon--shape-stroke-1 {

package/src/components/Icon/Icon.stories.helpers.jsx

@@ -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 * as Icons from '@adobe-commerce/elsie/icons';
 import { Icon } from './Icon';
 

package/src/components/Icon/Icon.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 { Icon, IconProps } from '@adobe-commerce/elsie/components/Icon';
 import { Cart } from '@adobe-commerce/elsie/icons/index';

package/src/components/Icon/Icon.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 } from 'preact';
 import { classes } from '@adobe-commerce/elsie/lib/classes';
 import { lazy, Suspense, SVGProps } from 'preact/compat';

package/src/components/Icon/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/Icon/Icon';

package/src/components/IllustratedMessage/IllustratedMessage.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-illustrated-message {