@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/Button/Button.tsx

@@ -0,0 +1,112 @@
+import { ComponentChildren, FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { VComponent, classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Button/Button.css';
+
+export interface ButtonProps
+  extends Omit<
+    HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>,
+    'size' | 'icon'
+  > {
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  size?: 'medium' | 'large';
+  children?: ComponentChildren;
+  icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+  disabled?: boolean;
+  active?: boolean;
+  activeChildren?: ComponentChildren;
+  activeIcon?: VNode<HTMLAttributes<SVGSVGElement>>;
+}
+
+export const Button: FunctionComponent<ButtonProps> = ({
+  value,
+  variant = 'primary',
+  size = 'medium',
+  icon,
+  className,
+  children,
+  disabled = false,
+  active = false,
+  activeChildren,
+  activeIcon,
+  href,
+  ...props
+}) => {
+  let buttonType = 'dropin-button';
+
+  if (
+    (icon && !children) ||
+    (icon && active && !activeChildren) ||
+    (!icon && active && activeIcon)
+  ) {
+    buttonType = 'dropin-iconButton';
+  }
+
+  if (active && activeChildren) {
+    buttonType = 'dropin-button';
+  }
+
+  className = classes([
+    buttonType,
+    `${buttonType}--${size}`,
+    `${buttonType}--${variant}`,
+    [`${buttonType}--${variant}--disabled`, disabled],
+    children && icon && `${buttonType}--with-icon`,
+    !children && activeChildren && icon && `${buttonType}--with-icon`,
+    active && activeIcon && `${buttonType}--with-icon`,
+    className,
+  ]);
+
+  const iconClassName = classes([
+    'dropin-button-icon',
+    `dropin-button-icon--${variant}`,
+    [`dropin-button-icon--${variant}--disabled`, disabled],
+    icon?.props.className,
+  ]);
+
+  const attributes = href
+    ? {
+        node: <a />,
+        role: 'link',
+        href,
+        ...props,
+        disabled,
+        active,
+        onKeyDown: (event: KeyboardEvent) => {
+          if (disabled) {
+            event.preventDefault();
+          }
+        },
+        tabIndex: disabled ? -1 : 0,
+      }
+    : {
+        node: <button />,
+        role: 'button',
+        ...props,
+        value,
+        disabled,
+        active,
+      };
+
+  return (
+    <VComponent {...attributes} className={className}>
+      {icon && !active && <VComponent node={icon} className={iconClassName} />}
+
+      {activeIcon && active && (
+        <VComponent node={activeIcon} className={iconClassName} />
+      )}
+
+      {children &&
+        !active &&
+        (typeof children === 'string' ? <span>{children}</span> : children)}
+
+      {active &&
+        activeChildren &&
+        (typeof activeChildren === 'string' ? (
+          <span>{activeChildren}</span>
+        ) : (
+          activeChildren
+        ))}
+    </VComponent>
+  );
+};

package/src/components/Button/index.ts

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

package/src/components/Card/Card.css

@@ -0,0 +1,25 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-card {
+  --bgColor: var(--color-neutral-200);
+  background-color: var(--bgColor);
+  border-width: 0;
+  border-radius: var(--shape-border-radius-2);
+}
+
+.dropin-card--secondary {
+  --bgColor: var(--color-neutral-50);
+  border-width: var(--shape-border-width-2);
+  border-style: solid;
+  border-color: var(--color-neutral-400);
+}
+
+.dropin-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-medium);
+  padding-top: var(--spacing-medium);
+  padding-right: var(--spacing-medium);
+  padding-bottom: var(--spacing-medium);
+  padding-left: var(--spacing-medium);
+}

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

@@ -0,0 +1,67 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Card, CardProps } from '@adobe/elsie/components/Card';
+import { expect, within } from '@storybook/test';
+
+/**
+ * Use Cards to group content into a single container.
+ */
+
+const meta: Meta<CardProps> = {
+  title: 'Components/Card',
+  component: Card,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+    children: {
+      description: 'The content of the Card.',
+      control: false,
+      type: { name: 'other', value: 'VNode[]' },
+    }
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<CardProps>;
+
+/**
+ * ```ts
+ * import { Card } from '@adobe/elsie/components/Card';
+ * ```
+ */
+
+export const Primary: Story = {
+  name: 'Primary Card',
+  args: {
+    variant: 'primary',
+  },
+  render: ({ variant }) => (
+    <Card variant={variant}>
+      <h2 style={{ font: 'var(--type-headline-2-strong-font)' }}>Title</h2>
+      <p style={{ font: 'var(--type-body-2-default-font)' }}>
+        This is a short description of the item and should be kept to two or
+        three lines as maximum.
+      </p>
+    </Card>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.getByText('Title')).toBeVisible();
+    await expect(
+      await canvas.getByText(
+        'This is a short description of the item and should be kept to two or three lines as maximum.'
+      )
+    ).toBeVisible();
+  },
+};
+
+export const Secondary: Story = {
+  name: 'Secondary Card',
+  args: {
+    variant: 'secondary',
+  },
+  render: Primary.render,
+};

package/src/components/Card/Card.tsx

@@ -0,0 +1,25 @@
+import { ComponentChildren, FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Card/Card.css';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'primary' | 'secondary';
+  children: ComponentChildren | ComponentChildren[];
+}
+
+export const Card: FunctionComponent<CardProps> = ({
+  variant = 'primary',
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      {...props}
+      className={classes(['dropin-card', `dropin-card--${variant}`, className])}
+    >
+      <div class="dropin-card__content">{children}</div>
+    </div>
+  );
+};

package/src/components/Card/index.ts

@@ -0,0 +1 @@
+export * from '@adobe/elsie/components/Card/Card';

package/src/components/CartItem/CartItem.css

@@ -0,0 +1,474 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-cart-item {
+  --item-group-spacing: 0;
+  --group-spacing: var(--spacing-xsmall);
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+  color: var(--color-neutral-700);
+  container-type: inline-size;
+  container-name: cart-item;
+  position: relative;
+}
+
+/* Skeleton */
+.dropin-cart-item__skeleton {
+  gap: var(--spacing-xsmall);
+}
+
+.dropin-cart-item__skeleton__item {
+  width: 100%;
+  height: auto;
+}
+
+.dropin-cart-item__skeleton__item::after {
+  content: '';
+  display: inline-block;
+}
+
+.dropin-cart-item__image .dropin-cart-item__skeleton__item {
+  padding-bottom: 100%;
+}
+
+.dropin-cart-item__image:is(img),
+.dropin-cart-item__image img {
+  width: 100%;
+  height: auto;
+}
+
+.dropin-cart-item__title {
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+  color: var(--color-neutral-800);
+}
+
+.dropin-cart-item__sku {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+}
+
+.dropin-cart-item__configurations {
+  list-style-type: none;
+  margin: var(--group-spacing) 0 0 0;
+  padding: 0;
+}
+
+.dropin-cart-item__configurations__item__value {
+  font-weight: inherit;
+  color: var(--color-neutral-800);
+}
+
+.dropin-cart-item__configurations__item:not(:last-child) {
+  margin-right: var(--spacing-xxsmall);
+}
+
+.dropin-cart-item__quantity__value {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  display: none;
+}
+
+.dropin-cart-item__quantity__number {
+  font-weight: inherit;
+  color: var(--color-neutral-800);
+}
+
+.dropin-cart-item__quantity__incrementer,
+.dropin-cart-item__quantity__picker {
+  max-width: 160px;
+  margin-top: calc(var(--group-spacing) / 2);
+  margin-bottom: var(--group-spacing);
+}
+
+.dropin-cart-item__remove {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.dropin-cart-item__warning,
+.dropin-cart-item__alert {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  margin-bottom: var(--group-spacing);
+  display: flex;
+  align-items: center;
+}
+
+.dropin-cart-item__discount,
+.dropin-cart-item__savings {
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+}
+
+.dropin-cart-item__warning svg,
+.dropin-cart-item__alert svg {
+  margin-right: var(--spacing-xxsmall);
+}
+
+.dropin-cart-item__savings__large-screen,
+.dropin-cart-item__discount__large-screen,
+.dropin-cart-item__savings__wrapper {
+  display: none;
+}
+
+.dropin-cart-item__warning,
+.dropin-cart-item__discount,
+.dropin-cart-item__savings {
+  color: var(--color-warning-800);
+}
+
+.dropin-cart-item__warning svg {
+  fill: var(--color-warning-800);
+  color: var(--color-neutral-50);
+}
+
+.dropin-cart-item__alert {
+  color: var(--color-alert-800);
+}
+
+.dropin-cart-item__alert svg {
+  fill: var(--color-alert-800);
+  color: var(--color-neutral-50);
+}
+
+.dropin-cart-item__total {
+  display: flex;
+  gap: var(--spacing-xxsmall);
+  flex-direction: column;
+}
+
+.dropin-cart-item__row-total {
+  display: flex;
+  gap: var(--spacing-xxsmall);
+}
+
+.dropin-cart-item__row-total__wrapper {
+  display: flex;
+}
+
+.dropin-cart-item__total-tax-excluded {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  color: var(--color-neutral-800);
+}
+
+.dropin-cart-item--updating {
+  opacity: 0.4;
+  pointer-events: none;
+  position: relative;
+}
+
+.dropin-cart-item__spinner {
+  margin: 0 auto;
+  position: absolute;
+  z-index: 999;
+  left: 0;
+  right: 0;
+  top: calc(50% - (var(--size) / 2));
+  bottom: 0;
+}
+
+.dropin-cart-item__sr-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1;
+  margin: 0 -1px -1px 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1;
+}
+
+/* Grid */
+.dropin-cart-item__wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: min-content;
+  grid-column-gap: var(--spacing-small);
+}
+
+.dropin-cart-item__image {
+  grid-column: 1 / 2;
+  grid-row: 1 / 10;
+}
+
+.dropin-cart-item__title,
+.dropin-cart-item__sku,
+.dropin-cart-item__attributes,
+.dropin-cart-item__configurations,
+.dropin-cart-item__price,
+.dropin-cart-item__total,
+.dropin-cart-item__warning,
+.dropin-cart-item__alert,
+.dropin-cart-item__quantity,
+.dropin-cart-item__footer {
+  grid-column: 2 / 5;
+}
+
+.dropin-cart-item__title--edit {
+  padding-right: var(--spacing-xbig);
+}
+
+/* Spacings */
+.dropin-cart-item__description,
+.dropin-cart-item__sku {
+  margin-top: var(--item-group-spacing);
+}
+
+.dropin-cart-item__price,
+.dropin-cart-item__footer div,
+.dropin-cart-item__attributes div {
+  margin-top: var(--group-spacing);
+}
+
+.dropin-cart-item__footer p {
+  margin-top: 0;
+}
+
+.dropin-cart-item__quantity:not(.dropin-cart-item__quantity--edit) {
+  display: none;
+}
+
+.dropin-cart-item__warning--quantity,
+.dropin-cart-item__alert--quantity {
+  display: none;
+}
+
+.dropin-cart-item__description {
+  display: none;
+}
+
+.dropin-cart-item__price-tax-message,
+.dropin-cart-item__price-tax-excluded-message,
+.dropin-cart-item__total-tax-message {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  color: var(--color-neutral-800);
+}
+
+.dropin-cart-item__total-tax-message {
+  margin-left: var(--spacing-xxsmall);
+}
+
+.dropin-cart-item__footer {
+  font: var(--type-body-2-emphasized-font);
+  letter-spacing: var(--type-body-2-emphasized-letter-spacing);
+  color: var(--color-neutral-800);
+}
+
+.dropin-cart-item__attributes {
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+  color: var(--color-neutral-800);
+}
+
+/*  Smallish / Medium */
+@container cart-item (width >= 400px) and (width < 737px) {
+  .dropin-cart-item__title,
+  .dropin-cart-item__sku,
+  .dropin-cart-item__attributes,
+  .dropin-cart-item__configurations,
+  .dropin-cart-item__price,
+  .dropin-cart-item__warning,
+  .dropin-cart-item__alert,
+  .dropin-cart-item__quantity,
+  .dropin-cart-item__footer {
+    grid-column: 2 / 4;
+  }
+
+  .dropin-cart-item__title--edit {
+    grid-column: 2 / 5;
+  }
+
+  .dropin-cart-item__total:not(.dropin-cart-item__total--edit) {
+    grid-auto-rows: min-content;
+    grid-column: 4 / 5;
+    grid-row: 1 / 10;
+    display: grid;
+    justify-self: end;
+    text-align: right;
+    gap: unset;
+  }
+}
+
+/* Large */
+@container cart-item (width >= 737px) and (width < 1192px) {
+  /* Grid */
+  .dropin-cart-item__wrapper {
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  .dropin-cart-item__image {
+    grid-column: 1 / 3;
+  }
+
+  .dropin-cart-item__savings,
+  .dropin-cart-item__discount {
+    display: none;
+  }
+
+  .dropin-cart-item__savings__large-screen,
+  .dropin-cart-item__discount__large-screen,
+  .dropin-cart-item__savings__wrapper {
+    display: block;
+  }
+
+  .dropin-cart-item__savings__wrapper:empty {
+    display: none;
+  }
+
+  .dropin-cart-item__title,
+  .dropin-cart-item__sku,
+  .dropin-cart-item__savings__large-screen,
+  .dropin-cart-item__discount__large-screen,
+  .dropin-cart-item__attributes,
+  .dropin-cart-item__configurations,
+  .dropin-cart-item__savings__wrapper,
+  .dropin-cart-item__price,
+  .dropin-cart-item__warning,
+  .dropin-cart-item__alert,
+  .dropin-cart-item__quantity,
+  .dropin-cart-item__footer {
+    grid-column: 3 / 10;
+  }
+
+  .dropin-cart-item__savings__wrapper {
+    margin-top: var(--spacing-xsmall);
+  }
+
+  .dropin-cart-item__title--edit {
+    padding-right: unset;
+  }
+
+  .dropin-cart-item__total {
+    grid-column: 10 / 13;
+    grid-row: 1 / 10;
+    text-align: right;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .dropin-cart-item__row-total {
+    display: contents;
+    gap: var(--spacing-xxsmall);
+  }
+
+  .dropin-cart-item__total--edit {
+    padding-right: calc(var(--spacing-xbig) + var(--spacing-xsmall));
+  }
+
+  .dropin-cart-item__row-total__wrapper {
+    display: contents;
+  }
+}
+
+/* Extra Large */
+@container cart-item (width >= 1192px) {
+  .dropin-cart-item {
+    --item-group-spacing: var(--spacing-xxsmall);
+    --group-spacing: var(--spacing-small);
+  }
+
+  /* Grid */
+  .dropin-cart-item__wrapper {
+    grid-template-columns: repeat(8, 1fr);
+    grid-column-gap: var(--spacing-medium);
+  }
+
+  .dropin-cart-item__image {
+    grid-column: 1 / 2;
+  }
+
+  .dropin-cart-item__title,
+  .dropin-cart-item__description,
+  .dropin-cart-item__sku,
+  .dropin-cart-item__price,
+  .dropin-cart-item__attributes,
+  .dropin-cart-item__configurations,
+  .dropin-cart-item__footer {
+    grid-column: 2 / 6;
+  }
+
+  .dropin-cart-item__title {
+    padding-right: unset;
+  }
+
+  .dropin-cart-item__quantity {
+    grid-column: 6 / 7;
+    grid-row: 1 / 10;
+  }
+
+  .dropin-cart-item__warning,
+  .dropin-cart-item__alert {
+    grid-column: 6 / 7;
+  }
+
+  .dropin-cart-item__warning--quantity,
+  .dropin-cart-item__alert--quantity {
+    display: flex;
+    align-items: center;
+  }
+
+  .dropin-cart-item__warning--quantity svg,
+  .dropin-cart-item__alert--quantity svg {
+    margin-right: var(--spacing-xxsmall);
+  }
+
+  .dropin-cart-item__warning--quantity svg {
+    fill: var(--color-warning-800);
+    color: var(--color-neutral-50);
+  }
+
+  .dropin-cart-item__alert--quantity svg {
+    fill: var(--color-alert-800);
+    color: var(--color-neutral-50);
+  }
+
+  .dropin-cart-item__warning:not(.dropin-cart-item__warning--quantity),
+  .dropin-cart-item__alert:not(.dropin-cart-item__alert--quantity) {
+    display: none;
+  }
+
+  .dropin-cart-item__total {
+    grid-column: 7 / 9;
+    grid-row: 1 / 10;
+    justify-self: end;
+    text-align: right;
+  }
+
+  .dropin-cart-item__total:has(.dropin-cart-item__total-tax-excluded) {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .dropin-cart-item__row-total {
+    display: flex;
+    gap: var(--spacing-xxsmall);
+  }
+
+  .dropin-cart-item__total--edit {
+    padding-right: calc(var(--spacing-xbig) + var(--spacing-xsmall));
+  }
+
+  .dropin-cart-item__quantity__incrementer,
+  .dropin-cart-item__quantity__picker {
+    margin-top: 0;
+  }
+
+  .dropin-cart-item__quantity:not(.dropin-cart-item__quantity--edit),
+  .dropin-cart-item__quantity__value {
+    display: unset;
+  }
+
+  .dropin-cart-item__price__quantity {
+    display: none;
+  }
+
+  .dropin-cart-item__title {
+    font: var(--type-headline-2-default-font);
+    letter-spacing: var(--type-headline-2-default-letter-spacing);
+  }
+}