@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/ContentGrid/ContentGrid.css

@@ -0,0 +1,54 @@
+/********************************************************************
+ *  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-content-grid {
+    container-type: inline-size;
+    container-name: dropin-content-grid;
+    max-width: inherit;
+    overflow: scroll;
+}
+
+/* Container for the cart summary grid */
+.dropin-content-grid__content {
+    display: grid;
+    gap: var(--spacing-small);
+    margin: auto;
+    justify-items: center;
+}
+
+.dropin-content-grid__dynamic-columns-content {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+/* Empty grid message */
+.dropin-content-grid__content--empty {
+    grid-template-columns: repeat(1, 1fr);
+}
+
+/* Container rules */
+@container dropin-content-grid (width < 360) {
+    .dropin-content-grid__content {
+        grid-template-columns: repeat(4, 1fr);
+        gap: var(--spacing-xsmall);
+    }
+}
+/* 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/ContentGrid/ContentGrid.stories.tsx

@@ -0,0 +1,137 @@
+/********************************************************************
+ *  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 {
+  ContentGrid as component,
+  ContentGridProps,
+} from '@adobe-commerce/elsie/components/ContentGrid/index';
+
+/**
+ * Used to display a grid of content, such as products or images, with a maximum number of columns.
+ */
+const meta: Meta<ContentGridProps> = {
+  title: 'Components/ContentGrid',
+  component,
+  argTypes: {
+    emptyGridContent: {
+      description: 'The content to display when the grid is empty.',
+      control: false,
+    },
+    children: {
+      description:
+        'The content to display in the grid. Each child will be displayed in a grid cell.',
+      control: false,
+    },
+    maxColumns: {
+      description:
+        'The maximum number of columns to display in the grid. If this is not set, this component will act like a flex container that wraps its children.',
+      control: {
+        type: 'number',
+      },
+      columnWidth: {
+        description:
+          'The width of each column in the grid. This is a CSS value, such as `1fr` or `100px`.',
+        control: {
+          type: 'text',
+        },
+      },
+    },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ContentGridProps>;
+
+const defaultProps: ContentGridProps = {
+  emptyGridContent: <div data-testid="empty-grid-content">Empty Grid</div>,
+  maxColumns: 6,
+  columnWidth: '1fr',
+};
+
+// Sample products to display in the grid
+const generateSampleContent = (count: number) => {
+  return Array.from({ length: count }).map((_, index) => (
+    <div
+      style={{
+        width: '100px',
+        height: '100px',
+        border: '1px solid black',
+        display: 'grid',
+        placeItems: 'center',
+      }}
+      key={index}
+    >
+      Product {index + 1}
+    </div>
+  ));
+};
+
+/**
+ * ```tsx
+ * <ContentGrid emptyGridContent={<div>Empty Grid</div>} />
+ * ```
+ */
+export const EmptyGrid: Story = {
+  args: {
+    ...defaultProps,
+  },
+};
+
+/**
+ * ```tsx
+ * <ContentGrid emptyGridContent={<div>Empty Grid</div>} />
+ *    <div>Product 1</div>,
+ *    <div>Product 2</div>,
+ *    //...
+ *    <div>Product 29</div>
+ *    <div>Product 30</div>
+ * </ContentGrid>
+ * ```
+ */
+export const WithContent: Story = {
+  args: {
+    ...defaultProps,
+    children: generateSampleContent(30),
+    maxColumns: 6,
+    columnWidth: '1fr',
+  },
+};
+
+export const InsideContainer: Story = {
+  args: {
+    ...defaultProps,
+    children: <>{generateSampleContent(12)}</>,
+    maxColumns: 6,
+    columnWidth: '1fr',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (story) => {
+      return (
+        <div
+          style={{
+            width: '50vw',
+            maxWidth: '800px',
+            maxHeight: '100vh',
+          }}
+        >
+          {story()}
+        </div>
+      );
+    },
+  ],
+};

package/src/components/ContentGrid/ContentGrid.tsx

@@ -0,0 +1,57 @@
+/********************************************************************
+ *  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';
+import '@adobe-commerce/elsie/components/ContentGrid/ContentGrid.css';
+
+export interface ContentGridProps extends HTMLAttributes<HTMLDivElement> {
+  emptyGridContent: VNode;
+  maxColumns?: number;
+  columnWidth?: string;
+}
+
+export const ContentGrid: FunctionComponent<ContentGridProps> = ({
+  className,
+  children,
+  maxColumns,
+  columnWidth = '1fr',
+  emptyGridContent,
+  ...props
+}) => {
+  const hasChildren =
+    !!children && (Array.isArray(children) ? children.length > 0 : true);
+
+  const additionalStyles = hasChildren
+    ? {
+        gridTemplateColumns: `repeat(${maxColumns}, ${columnWidth})`,
+      }
+    : undefined;
+
+  return (
+    <div
+      {...props}
+      className={classes(['dropin-content-grid', className])}
+      tabindex={0}
+    >
+      <div
+        data-testid="content-grid-content"
+        className={classes([
+          'dropin-content-grid__content',
+          ['dropin-content-grid__dynamic-columns-content', !maxColumns],
+          ['dropin-content-grid__content--empty', !hasChildren],
+        ])}
+        style={additionalStyles}
+      >
+        {hasChildren ? children : emptyGridContent}
+      </div>
+    </div>
+  );
+};

package/src/components/ContentGrid/index.ts

@@ -0,0 +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/ContentGrid/ContentGrid';
+export { ContentGrid as default } from '@adobe-commerce/elsie/components/ContentGrid/ContentGrid';

package/src/components/Divider/Divider.css

@@ -0,0 +1,22 @@
+/********************************************************************
+ *  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;
+}
+
+.dropin-divider--primary {
+  border-top: var(--shape-border-width-3) solid var(--color-neutral-400);
+  margin: var(--spacing-xbig) auto;
+}
+
+.dropin-divider--secondary {
+  border-top: var(--shape-border-width-2) solid var(--color-neutral-400);
+  margin: var(--spacing-medium) auto;
+}

package/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,62 @@
+/********************************************************************
+ *  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';
+
+/**
+ * Use Dividers to separate and group content or build rhythm and structure.
+ */
+const meta: Meta<DividerProps> = {
+  title: 'Components/Divider',
+  component: Divider,
+  argTypes: {
+    variant: {
+      description: 'Divider variant: `primary` or `secondary`',
+      defaultValue: { summary: 'primary' },
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<DividerProps>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+  render: ({ variant }) => (
+    <div style="width: 400px">
+      <Divider variant={variant} />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByRole('separator')).toBeVisible();
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+  },
+  render: ({ variant }) => (
+    <div style="width: 400px">
+      <Divider variant={variant} />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByRole('separator')).toBeVisible();
+  },
+};

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,33 @@
+/********************************************************************
+ *  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';
+import '@adobe-commerce/elsie/components/Divider/Divider.css';
+
+export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+  variant?: 'primary' | 'secondary';
+}
+
+export const Divider: FunctionComponent<DividerProps> = ({
+  variant = 'primary',
+  className,
+}) => {
+  return (
+    <hr
+      role="separator"
+      className={classes([
+        'dropin-divider',
+        `dropin-divider--${variant}`,
+        className,
+      ])}
+    />
+  );
+};

package/src/components/Divider/index.ts

@@ -0,0 +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

@@ -0,0 +1,83 @@
+/********************************************************************
+ *  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;
+  font: var(--type-body-2-strong-font);
+  grid-auto-rows: max-content;
+}
+
+.dropin-field__label--medium {
+  font: var(--type-details-caption-1-font);
+  letter-spacing: var(--type-details-caption-1-letter-spacing);
+  color: var(--color-neutral-800);
+  text-align: left;
+  padding-bottom: var(--spacing-xsmall);
+}
+
+.dropin-field__label--large {
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+  color: var(--color-neutral-800);
+  text-align: left;
+  padding-bottom: var(--spacing-xsmall);
+}
+
+.dropin-field__label--disabled {
+  color: var(--color-neutral-500);
+}
+
+.dropin-field__content {
+  display: grid;
+  grid-auto-rows: max-content;
+}
+
+.dropin-field__hint {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  color: var(--color-neutral-700);
+  text-align: left;
+}
+
+.dropin-field__hint:empty {
+  display: none;
+}
+
+.dropin-field__hint--medium {
+  padding-top: var(--spacing-xsmall);
+}
+
+.dropin-field__hint--large {
+  padding-top: var(--spacing-small);
+}
+
+.dropin-field__hint--error {
+  color: var(--color-alert-800);
+}
+
+.dropin-field__hint--success {
+  color: var(--color-positive-800);
+}
+
+.dropin-field__hint--disabled {
+  color: var(--color-neutral-500);
+}
+
+/* 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) { } */