@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/InLineAlert/InLineAlert.css

@@ -0,0 +1,107 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-in-line-alert {
+  border-width: var(--shape-border-width-2);
+  border-style: solid;
+  border-radius: var(--shape-border-radius-1);
+  display: grid;
+  grid-auto-flow: row;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  position: relative;
+}
+
+.dropin-in-line-alert__heading {
+  display: grid;
+  gap: var(--spacing-small);
+  grid-template-columns: auto auto;
+  align-items: center;
+}
+
+.dropin-in-line-alert__title-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+}
+
+.dropin-in-line-alert__title {
+  color: var(--color-neutral-800);
+  font: var(--type-body-2-emphasized-font);
+  letter-spacing: var(--type-body-2-emphasized-letter-spacing);
+  margin: 0;
+}
+
+.dropin-in-line-alert__actions-container {
+  display: flex;
+  justify-content: end;
+}
+
+.dropin-in-line-alert__additional-action {
+  padding: 0px;
+}
+
+.dropin-in-line-alert__additional-action span {
+  font: var(--type-details-caption-1-font);
+  letter-spacing: var(--type-details-caption-1-letter-spacing);
+  text-decoration: underline;
+  color: var(--color-neutral-700);
+}
+
+.dropin-in-line-alert__dismiss-button {
+  padding: 0;
+}
+
+.dropin-in-line-alert__description {
+  color: var(--color-neutral-800);
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+  margin: 0;
+}
+
+.dropin-in-line-alert__additional-actions-container {
+  display: flex;
+  gap: var(--spacing-small);
+  justify-content: flex-end;
+}
+
+.dropin-in-line-alert__item-list:first-child::before {
+  content: '';
+  display: block;
+  border-top: var(--shape-border-width-3) solid var(--color-neutral-400);
+  margin-bottom: var(--spacing-medium);
+}
+
+/* Variants */
+
+/* Error */
+.dropin-in-line-alert--error {
+  border-color: var(--color-alert-500);
+}
+
+/* Warning */
+.dropin-in-line-alert--warning {
+  border-color: var(--color-warning-500);
+}
+
+/* Success */
+.dropin-in-line-alert--success {
+  border-color: var(--color-positive-500);
+}
+
+/* Secondary */
+.dropin-in-line-alert--secondary {
+  border: none;
+  background-color: var(--color-neutral-200);
+}
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+/* @media only screen and (min-width: 768px) { } */
+
+/* Large (landscape tablets, 1024px and up) */
+/* @media only screen and (min-width: 1024px) { } */
+
+/* XLarge (laptops/desktops, 1366px and up) */
+/* @media only screen and (min-width: 1366px) { } */
+
+/* XXlarge (large laptops and desktops, 1920px and up) */
+/* @media only screen and (min-width: 1920px) { } */

package/src/components/InLineAlert/InLineAlert.stories.tsx

@@ -0,0 +1,317 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  InLineAlert as component,
+  InLineAlertProps,
+} from '@adobe/elsie/components/InLineAlert';
+import { action } from '@storybook/addon-actions';
+import { IconsList } from '@adobe/elsie/components/Icon/Icon.stories.helpers';
+import { CartList, Image, Price } from '@adobe/elsie/components';
+import CartItem from '../CartItem';
+
+/**
+ * Use Inline Alerts to display messages or warnings to the user.
+ */
+const meta: Meta<InLineAlertProps> = {
+  title: 'Components/InLineAlert',
+  component,
+  argTypes: {
+    heading: {
+      description: 'Heading message',
+      type: { name: 'string', required: true },
+    },
+    description: {
+      description: 'Alert description',
+      type: { name: 'string', required: false },
+    },
+    type: {
+      description:
+        'Alert variant type (determines the border color).<br/>`"error"` | `"warning"` | `"success"`',
+      defaultValue: { summary: 'warning' },
+      type: { name: 'string', required: false },
+      options: ['error', 'warning', 'success'],
+      control: 'radio',
+    },
+    variant: {
+      description:
+        'Changes the appearance of the notification. Disables the border and adds a background.<br/>`"primary"` | `"secondary"`',
+      defaultValue: { summary: 'primary' },
+      type: { name: 'string', required: false },
+      options: ['primary', 'secondary'],
+      control: 'radio',
+    },
+    onDismiss: {
+      description:
+        'When set, the component renders a dismiss button and calls this function when clicked',
+      type: { name: 'function', required: false },
+      control: { disable: true },
+      action: 'Dismiss clicked',
+    },
+    additionalActions: {
+      description:
+        'An array of additional action objects that must contain `label` and `onClick()` properties',
+    },
+    icon: {
+      description: 'Icon `(FunctionComponent)`',
+      type: { name: 'symbol' },
+      options: Object.keys(IconsList),
+      mapping: IconsList,
+      control: 'select',
+    },
+    actionButtonPosition: {
+      description: 'Position of the action button.<br/>`"top"` | `"bottom"`',
+      defaultValue: { summary: 'bottom' },
+      type: { name: 'string', required: false },
+      options: ['top', 'bottom'],
+      control: 'radio',
+    },
+    itemList: {
+      description: 'List of items to display in the alert',
+      type: { name: 'other', value: 'VNode' },
+      control: { disable: true },
+    }
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<InLineAlertProps>;
+
+/**
+ * ```ts
+ * import { InLineAlert } from '@adobe/elsie/components/InLineAlert';
+ * ```
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  description="Description of the In Line Alert"
+ *  type="warning"
+ *  additionalActions={[
+ *   {
+ *    label: 'Action 1',
+ *    onClick: ()=>{},
+ *   },
+ *  ]}
+ * />
+ * ```
+ */
+
+export const InLineAlert: Story = {
+  args: {
+    heading: 'In Line Alert heading',
+    description: 'Description of the In Line Alert',
+    type: 'warning',
+    //@ts-ignore
+    icon: IconsList.WarningFilled,
+    additionalActions: [
+      {
+        label: 'Action',
+        onClick: action('Action clicked'),
+      },
+    ],
+  },
+};
+
+/**
+ * You can create the small variant by skipping the description prop.
+ *
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  type="success"
+ *  additionalActions={[
+ *   {
+ *     label: 'Action',
+ *     onClick: ()=>{},
+ *   },
+ *  ]}
+ * />
+ * ```
+ */
+export const InLineAlertSmall: Story = {
+  args: {
+    heading: 'In Line Alert heading',
+    type: 'success',
+    //@ts-ignore
+    icon: IconsList.CheckWithCircle,
+    additionalActions: [
+      {
+        label: 'Action',
+        onClick: action('Action clicked'),
+      },
+    ],
+  },
+};
+
+/**
+ * You can create the medium variant by including the description prop.
+ *
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  description="Description of the In Line Alert"
+ *  type="error"
+ *  additionalActions={[
+ *   {
+ *     label: 'Action',
+ *     onClick: ()=>{},
+ *   },
+ *  ]}
+ * />
+ * ```
+ */
+export const InLineAlertMedium: Story = {
+  args: {
+    heading: 'In Line Alert heading',
+    description: 'Description of the In Line Alert',
+    type: 'error',
+    //@ts-ignore
+    icon: IconsList.WarningFilled,
+    additionalActions: [
+      {
+        label: 'Action',
+        onClick: action('Action clicked'),
+      },
+    ],
+  },
+};
+
+/**
+ * You can create the large variant by including more than one additional actions.
+ *
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  description="Description of the In Line Alert"
+ *  type="warning"
+ *  additionalActions={[
+ *   {
+ *     label: 'Action 1',
+ *     onClick: ()=>{},
+ *   },
+ *   {
+ *     label: 'Action 2',
+ *     onClick: ()=>{},
+ *   },
+ *  ]}
+ * />
+ * ```
+ */
+export const InLineAlertLarge: Story = {
+  args: {
+    heading: 'In Line Alert heading',
+    description: 'Description of the In Line Alert',
+    type: 'warning',
+    //@ts-ignore
+    icon: IconsList.WarningFilled,
+    additionalActions: [
+      {
+        label: 'Action 1',
+        onClick: action('Action 1 clicked'),
+      },
+      {
+        label: 'Action 2',
+        onClick: action('Action 2 clicked'),
+      },
+    ],
+  },
+};
+
+export const NoDismiss: Story = {
+  args: {
+    heading: 'In Line Alert heading',
+    description: 'Description of the In Line Alert',
+    type: 'warning',
+    additionalActions: [
+      {
+        label: 'Action 1',
+        onClick: action('Action 1 clicked'),
+      },
+    ],
+    onDismiss: undefined,
+  },
+};
+
+/**
+ * You can create the large variant by including a list of items.
+ *
+ * ```tsx
+ * <InLineAlert
+ *  heading="In Line Alert heading"
+ *  description="This is a short description of the In Line Alert"
+ *  icon: IconsList.OrderError,
+ *  type: 'warning',
+ *  onDismiss: undefined,
+ *  additionalActions={[
+ *   {
+ *     label: 'Action 1',
+ *     onClick: ()=>{},
+ *   },
+ *   {
+ *     label: '',
+ *     onClick: ()=>{},
+ *   },
+ *  ]},
+ *     itemList: (
+ *      <CartList>
+ *        <CartItem
+ *          name="Product Name"
+ *          quantity={1}
+ *          sku={<span>{'SKU: 59YK7'}</span>}
+ *          title={<span>{'title'}</span>}
+ *          price={<Price amount={53.99} weight="normal" />}
+ *          image={
+ *            <Image
+ *              src="https://picsum.photos/132/184"
+ *              width="132"
+ *              height="184"
+ *              alt="Some alternative text"
+ *              loading="lazy"
+ *            />
+ *          }
+ *          total={<Price amount={53.99} weight="normal" />}
+ *        />
+ *      </CartList>
+ *   ),
+ *
+ * />
+ * ```
+ */
+export const WithItemList: Story = {
+  args: {
+    heading: 'In Line Alert heading',
+    description: 'This is a short description of the In Line Alert',
+    actionButtonPosition: 'bottom',
+    //@ts-ignore
+    icon: IconsList.OrderError,
+    type: 'warning',
+    additionalActions: [
+      {
+        label: 'Action 1',
+        onClick: action('Action 1 clicked'),
+      },
+    ],
+    onDismiss: undefined,
+    itemList: (
+      <CartList>
+        <CartItem
+          name="Product Name"
+          quantity={1}
+          sku={<span>{'SKU: 59YK7'}</span>}
+          title={<span>{'title'}</span>}
+          price={<Price amount={53.99} weight="normal" />}
+          image={
+            <Image
+              src="https://picsum.photos/132/184"
+              width="132"
+              height="184"
+              alt="Some alternative text"
+              loading="lazy"
+            />
+          }
+          total={<Price amount={53.99} weight="normal" />}
+        />
+      </CartList>
+    ),
+  },
+};

package/src/components/InLineAlert/InLineAlert.tsx

@@ -0,0 +1,119 @@
+import { Button, Icon } from '@adobe/elsie/components';
+import { useText } from '@adobe/elsie/i18n';
+import { Close } from '@adobe/elsie/icons';
+import { VComponent, classes } from '@adobe/elsie/lib';
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+
+import '@adobe/elsie/components/InLineAlert/InLineAlert.css';
+export interface InLineAlertProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'icon'> {
+  variant?: 'primary' | 'secondary';
+  heading: string;
+  description?: string;
+  type?: 'error' | 'warning' | 'success';
+  icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+  additionalActions?: Array<{
+    label: string;
+    onClick: (event: Event) => void;
+  }>;
+  onDismiss?: (event: Event) => void;
+  itemList?: VNode;
+  actionButtonPosition?: 'top' | 'bottom';
+}
+
+export const InLineAlert: FunctionComponent<InLineAlertProps> = ({
+  variant = 'primary',
+  className,
+  type = 'warning',
+  additionalActions,
+  onDismiss,
+  heading,
+  description,
+  icon,
+  itemList,
+  actionButtonPosition,
+  ...props
+}) => {
+  const translations = useText({
+    dismiss: 'Dropin.InlineAlert.dismissLabel',
+  });
+
+  return (
+    <div
+      {...props}
+      className={classes([
+        'dropin-in-line-alert',
+        `dropin-in-line-alert--${type}`,
+        `dropin-in-line-alert--${variant}`,
+        className,
+      ])}
+    >
+      <div className={'dropin-in-line-alert__heading'}>
+        <div className={'dropin-in-line-alert__title-container'}>
+          {icon && (
+            <VComponent node={icon} className={'dropin-in-line-alert__icon'} />
+          )}
+
+          <span className={'dropin-in-line-alert__title'}>{heading}</span>
+        </div>
+
+        <div className={'dropin-in-line-alert__actions-container'}>
+          {additionalActions &&
+            (actionButtonPosition === 'top' ||
+              (!actionButtonPosition && additionalActions.length <= 1)) && (
+              <Button
+                variant="tertiary"
+                className={'dropin-in-line-alert__additional-action'}
+                onClick={
+                  additionalActions.length > 0
+                    ? additionalActions[0]?.onClick
+                    : undefined
+                }
+                aria-label={additionalActions[0]?.label}
+              >
+                {additionalActions[0]?.label}
+              </Button>
+            )}
+          {onDismiss && (
+            <Button
+              icon={<Icon source={Close} size="24" stroke="2" />}
+              className={'dropin-in-line-alert__dismiss-button'}
+              variant="tertiary"
+              onClick={onDismiss}
+              aria-label={translations.dismiss}
+            />
+          )}
+        </div>
+      </div>
+
+      {description && (
+        <p className={'dropin-in-line-alert__description'}>{description}</p>
+      )}
+      <div className={'dropin-in-line-alert__item-list-container'}>
+        {itemList && (
+          <VComponent
+            node={itemList}
+            className={classes(['dropin-in-line-alert__item-list'])}
+          />
+        )}
+      </div>
+      {additionalActions &&
+        (actionButtonPosition === 'bottom' ||
+          (!actionButtonPosition && additionalActions.length > 1)) && (
+          <div className={'dropin-in-line-alert__additional-actions-container'}>
+            {additionalActions.map((action) => (
+              <Button
+                key={action.label}
+                variant="tertiary"
+                className={'dropin-in-line-alert__additional-action'}
+                onClick={action.onClick}
+              >
+                {action.label}
+              </Button>
+            ))}
+          </div>
+        )}
+    </div>
+  );
+};

package/src/components/InLineAlert/index.ts

@@ -0,0 +1,2 @@
+export * from '@adobe/elsie/components/InLineAlert/InLineAlert';
+export { InLineAlert as default } from '@adobe/elsie/components/InLineAlert/InLineAlert';

package/src/components/Incrementer/Incrementer.css

@@ -0,0 +1,156 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+/* Content */
+.dropin-incrementer__content {
+  border-radius: var(--shape-border-radius-1);
+  border: solid var(--shape-border-width-1) var(--color-neutral-600);
+  display: grid;
+  grid-template-columns: var(--spacing-xxbig) auto var(--spacing-xxbig);
+  height: var(--spacing-xbig);
+  opacity: 1;
+}
+
+.dropin-incrementer__content--disabled {
+  background: var(--color-neutral-300);
+  border-radius: var(--shape-border-radius-1);
+  border: solid var(--shape-border-width-1) var(--color-neutral-500);
+}
+
+.dropin-incrementer__content--large {
+  height: var(--spacing-xxbig);
+}
+
+.dropin-incrementer__content:hover {
+  border: solid var(--shape-border-width-1) var(--color-neutral-700);
+}
+
+.dropin-incrementer__content:active {
+  border: solid var(--shape-border-width-1) var(--color-neutral-800);
+}
+
+.dropin-incrementer__content--error:hover,
+.dropin-incrementer__content--error {
+  border: var(--shape-border-width-2) solid var(--color-alert-500);
+}
+
+.dropin-incrementer__content--error-message {
+  color: var(--color-alert-800);
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  text-align: left;
+}
+
+/* Footer */
+.dropin-incrementer__footer {
+  font: var(--type-details-caption-2-font);
+}
+
+/* Buttons */
+.dropin-incrementer__decrease-button > svg,
+.dropin-incrementer__increase-button > svg {
+  align-items: center;
+  justify-content: center;
+}
+
+.dropin-incrementer__button-container {
+  align-items: center;
+  border-radius: var(--shape-border-radius-1);
+  display: grid;
+  justify-content: center;
+  background: var(--color-neutral-50);
+}
+
+.dropin-incrementer__button-container--disabled {
+  background-color: var(--color-neutral-300);
+}
+
+.dropin-incrementer__decrease-button,
+.dropin-incrementer__increase-button {
+  align-items: center;
+  background-color: var(--color-neutral-50);
+  border-radius: var(--shape-border-radius-3);
+  border: none;
+  display: grid;
+  height: var(--spacing-medium);
+  width: var(--spacing-medium);
+}
+
+.dropin-incrementer__decrease-button:enabled,
+.dropin-incrementer__increase-button:enabled {
+  cursor: pointer;
+}
+
+.dropin-incrementer__decrease-button--disabled,
+.dropin-incrementer__increase-button--disabled {
+  background-color: var(--color-neutral-300);
+}
+
+.dropin-incrementer__increase-button:focus-visible,
+.dropin-incrementer__decrease-button:focus-visible {
+  outline: var(--shape-border-width-1) solid var(--color-brand-500);
+  box-shadow: 0px 0px 0px var(--shape-border-radius-1) var(--color-neutral-500);
+}
+
+.dropin-incrementer__decrease-button:focus:not(:focus-visible),
+.dropin-incrementer__increase-button:focus:not(:focus-visible) {
+  background-color: var(--color-neutral-50);
+}
+
+.dropin-incrementer__decrease-button:hover:enabled,
+.dropin-incrementer__increase-button:hover:enabled,
+.dropin-incrementer__decrease-button:focus,
+.dropin-incrementer__increase-button:focus {
+  background: var(--color-neutral-300);
+}
+
+/* Input */
+.dropin-incrementer__input {
+  box-sizing: border-box;
+  text-align: center;
+  min-width: var(--spacing-xxbig);
+}
+
+.dropin-incrementer__input:disabled {
+  background-color: var(--color-neutral-300);
+  color: var(--color-neutral-500);
+}
+
+.dropin-incrementer__input::-webkit-outer-spin-button,
+.dropin-incrementer__input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.dropin-incrementer__input:focus-within {
+  border: none;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.dropin-incrementer__input:focus-within[type='number'] {
+  box-shadow: none;
+}
+
+/* Firefox */
+.dropin-incrementer__input[type='number'] {
+  -moz-appearance: textfield;
+  box-shadow: none;
+  border: none;
+}
+
+textarea:focus,
+input:focus {
+  outline: none;
+}
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+/* @media only screen and (min-width: 768px) { } */
+
+/* Large (landscape tablets, 1024px and up) */
+/* @media only screen and (min-width: 1024px) { } */
+
+/* XLarge (laptops/desktops, 1366px and up) */
+/* @media only screen and (min-width: 1366px) { } */
+
+/* XXlarge (large laptops and desktops, 1920px and up) */
+/* @media only screen and (min-width: 1920px) { } */