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

package/src/components/ToggleButton/ToggleButton.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 {
@@ -7,6 +16,7 @@ import {
 import { Card as CardSVG } from '@adobe-commerce/elsie/icons';
 import { Card as CardPNG } from '@adobe-commerce/elsie/static/assets/images';
 import { expect, within } from '@storybook/test';
+import { Price } from '@adobe-commerce/elsie/components';
 
 /**
  * Use ToggleButtons to let users select one option from a set of mutually exclusive choices.
@@ -20,9 +30,11 @@ const meta: Meta<ToggleButtonProps> = {
     },
     label: {
       description: 'Label of the Toggle button',
-      type: {
-        required: true,
-        name: 'string',
+      required: true,
+      table: {
+        type: {
+          summary: 'string | VNode',
+        },
       },
       control: {
         type: 'text',
@@ -144,3 +156,35 @@ export const ToggleButtonWithImage: Story = {
     icon: <img src={CardPNG} alt="alt" />,
   },
 };
+
+export const ToggleButtonWithHTML: Story = {
+  name: 'Toggle Button with HTML',
+  args: {
+    label: (
+      <p>
+        Toggle Button label {''}
+        <a href="https://www.adobe.com/" target="_blank" rel="noreferrer">
+          with a link
+        </a>
+      </p>
+    ),
+    name: 'toggle-button-name',
+    value: 'value',
+    selected: true,
+    icon: <img src={CardPNG} alt="alt" />,
+  },
+};
+
+export const ToggleButtonWithPrice: Story = {
+  name: 'Toggle Button with Price',
+  args: {
+    label: (
+      <p>
+        <Price currency="USD" value={100} /> Toggle Button label
+      </p>
+    ),
+    name: 'toggle-button-name',
+    value: 'value',
+    selected: true,
+  },
+};

package/src/components/ToggleButton/ToggleButton.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 } from '@adobe-commerce/elsie/lib';
@@ -5,28 +14,28 @@ import '@adobe-commerce/elsie/components/ToggleButton/ToggleButton.css';
 import { RadioButton } from '@adobe-commerce/elsie/components';
 
 export interface ToggleButtonProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'icon'> {
-  label: string;
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'icon' | 'label'> {
+  label: string | VNode<HTMLAttributes<HTMLElement>>;
   name: string;
   value: string;
-  selected?: boolean;
-  onChange?: (value: string) => void;
+  busy?: boolean;
   icon?:
     | VNode<HTMLAttributes<SVGSVGElement>>
     | VNode<HTMLAttributes<HTMLImageElement>>;
-  busy?: boolean;
+  onChange?: (value: string) => void;
+  selected?: boolean;
 }
 
 export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
-  className,
   label,
   name,
   value,
-  selected = true,
-  onChange,
-  icon,
   busy = false,
   children,
+  className,
+  icon,
+  onChange,
+  selected = true,
   ...props
 }) => {
   return (
@@ -45,7 +54,7 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
           value={value}
           checked={selected}
           onChange={() => onChange && onChange(value)}
-          aria-label={label}
+          aria-label={name}
           busy={busy}
           className={classes([className, 'dropin-toggle-button__radioButton'])}
         />
@@ -58,7 +67,6 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
               className="dropin-toggle-button__icon"
             />
           )}
-
           {label}
         </span>
       </label>

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

package/src/components/UIProvider/UIProvider.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. 
+ *******************************************************************/
+
 /**
  * Do not edit directly
  * Generated on Tue, 05 Mar 2024 20:18:40 GMT

package/src/components/UIProvider/UIProvider.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, createContext, useMemo } from 'preact/compat';
 import { deepmerge, Render } from '@adobe-commerce/elsie/lib';

package/src/components/UIProvider/debugger.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-debugger--show-slots [data-slot-key] {
   outline: 1px dashed var(--color-neutral-600);
   border-radius: 4px;

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

package/src/components/UIProvider/normalize.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-design a {
   --textColor: var(--color-brand-500);
   color: var(--textColor);

package/src/components/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/Skeleton';
 export * from '@adobe-commerce/elsie/components/UIProvider';
 export * from '@adobe-commerce/elsie/components/Incrementer';

package/src/i18n/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. 
+ *******************************************************************/
+
 import { deepmerge } from '@adobe-commerce/elsie/lib';
 import en_US from '@adobe-commerce/elsie/i18n/en_US.json';
 

package/src/lib/classes.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. 
+ *******************************************************************/
+
 // @ts-ignore
 import { JSXInternal } from 'preact/src/jsx';
 

package/src/lib/config.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 class Config<T> {
   private config: T;
 

package/src/lib/debounce.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 const debounce = (fn: Function, ms: number) => {
   let timeoutId: ReturnType<typeof setTimeout>;
   return function (this: any, ...args: any[]) {

package/src/lib/deepmerge.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. 
+ *******************************************************************/
+
 import deepmerge from 'deepmerge';
 
 export { default as deepmerge } from 'deepmerge';

package/src/lib/deviceUtils.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 const isIOSMobileDevice = () => {
   const userAgent = navigator.userAgent.toLowerCase();
   const isIOS = /ipad|iphone|ipod/.test(userAgent);

package/src/lib/form-values.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 const getFormValues = (form: HTMLFormElement) => {
   const formData: any = new FormData(form);
   const result = Object.fromEntries(formData);

package/src/lib/i18n.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. 
+ *******************************************************************/
+
 /**
  * Convert locale from Magento standard to react-intl BCP 47 language tag
  *

package/src/lib/image-params-keymap.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. 
+ *******************************************************************/
+
 class ImageParamsKeyMap {
   private _map:
     | { [key: string]: string | ((data: any) => [string, string]) }

package/src/lib/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/lib/form-values';
 export * from '@adobe-commerce/elsie/lib/classes';
 export * from '@adobe-commerce/elsie/lib/deepmerge';

package/src/lib/initializer.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. 
+ *******************************************************************/
+
 import {
   Config,
   setImageParamsKeyMap,

package/src/lib/is-number.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 const isNumber = (value: number | string): value is number => {
   return typeof value === 'number';
 };

package/src/lib/render.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 { render, VNode, createContext } from 'preact';
 import renderToString from 'preact-render-to-string';
 import { Container, VComponent } from '@adobe-commerce/elsie/lib';

package/src/lib/resolve-image.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. 
+ *******************************************************************/
+
 import { getImageParamsKeyMap } from '@adobe-commerce/elsie/lib/';
 
 const BREAKPOINTS = {

package/src/lib/signals.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. 
+ *******************************************************************/
+
 // eslint-disable-next-line no-restricted-imports
 export * from '@preact/signals';

package/src/lib/slot.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 { cloneElement, ComponentChildren, RefObject, VNode } from 'preact';
 import {
   StateUpdater,

package/src/lib/tests.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 {
   render as originalRender,
   RenderOptions,

package/src/lib/types.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. 
+ *******************************************************************/
+
 import { FunctionComponent } from 'preact';
 
 export type Container<T, D = { [key: string]: any }> = FunctionComponent<

package/src/lib/vcomponent.tsx

@@ -1,16 +1,11 @@
-/*
-ADOBE CONFIDENTIAL
-Copyright 2023 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.
-*/
+/********************************************************************
+ *  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 { VNode, ComponentChildren } from 'preact';
 import { classes } from '.';

package/static/assets/images/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 { default as Card } from './Card.png';
 export { default as Image } from './example.jpg';

package/storybook-stories.js

@@ -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. 
+ *******************************************************************/
+
 const path = require('path');
 
 const { name } = require('./.elsie');

package/tests/__mocks__/browserMocks.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. 
+ *******************************************************************/
+
 // Mock Browser API's which are not supported by JSDOM, e.g. ServiceWorker, LocalStorage
 import { TextDecoder, TextEncoder } from 'util';
 import { BroadcastChannel } from 'worker_threads';

package/tests/__mocks__/fileMocks.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. 
+ *******************************************************************/
+
 // This fixed an error related to the CSS and loading gif breaking my Jest test
 // See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
 export default 'test-file-stub';

package/types/icons.d.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. 
+ *******************************************************************/
+
 declare module '*.svg' {
   import { SVGProps, FunctionComponent } from 'preact/compat';