@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,582 @@
+/********************************************************************
+ *  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 {
+  Accordion,
+  AccordionProps,
+  AccordionSection,
+  AccordionSectionProps,
+} from '@adobe-commerce/elsie/components/Accordion';
+import { Price, Card, Image, CartItem } from '..';
+import { expect, within, userEvent } from '@storybook/test';
+import * as Icons from '@adobe-commerce/elsie/icons';
+
+const meta: Meta<AccordionProps & AccordionSectionProps> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered', // centered | fullscreen
+  },
+  argTypes: {
+    actionIconPosition: {
+      description: 'Position of the action icon',
+      options: ['left', 'right'],
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'left',
+    },
+    iconOpen: {
+      description: 'Icon for open button (svg)',
+      options: Object.keys(Icons),
+      mapping: Icons,
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'Minus',
+    },
+    iconClose: {
+      description: 'Icon for close button (svg)',
+      options: Object.keys(Icons),
+      mapping: Icons,
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'Minus',
+    },
+    iconLeft: {
+      description: 'Optional icon on left side (svg)',
+      options: Object.keys(Icons),
+      mapping: Icons,
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'Minus',
+    },
+    showIconLeft: {
+      description: 'Whether or not the display the leftIcon',
+      type: 'boolean',
+      defaultValue: {
+        summary: false,
+      },
+    },
+    defaultOpen: {
+      description:
+        'The defaultOpen prop determines the initial state of the accordion, specifying whether it starts as open or closed. Default is false',
+      type: 'boolean',
+      defaultValue: {
+        summary: false,
+      },
+    },
+    secondaryText: {
+      description: 'Add text to the button.',
+      type: 'string',
+      defaultValue: '',
+      control: 'text',
+    },
+    ariaLabelTitle: {
+      description:
+        'Aria label for the title. Useful for screen readers when the title is not a string',
+      type: 'string',
+      defaultValue: '',
+      control: 'text',
+    },
+    renderContentWhenClosed: {
+      description: 'Render content when closed',
+      type: 'boolean',
+      defaultValue: {
+        summary: true,
+      },
+    },
+    onStateChange: {
+      description: 'Callback function when the state changes',
+      action: 'onStateChange',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<AccordionProps>;
+
+/**
+ * ```ts
+ * import { Accordion, AccordionSection } from '@adobe-commerce/elsie/components/Accordion';
+ *
+ * <Accordion>
+ *    <AccordionSection title={"Title"}><p>Short product details should be kept to 6 lines maximum.</p></AccordionSection>
+ * </Accordion>
+ *
+ * ```
+ */
+export const SingleSection: Story = {
+  args: {
+    actionIconPosition: 'right',
+    iconOpen: Icons.Add,
+    iconClose: Icons.Minus,
+  },
+  render: ({ actionIconPosition, iconOpen, iconClose }) => (
+    <div>
+      <h2
+        style={{
+          font: 'var(--type-body-1-strong-font)',
+          color: 'var(--color-neutral-800)',
+          letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}
+      >
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion
+        actionIconPosition={actionIconPosition}
+        iconOpen={iconOpen}
+        iconClose={iconClose}
+      >
+        <AccordionSection title={'Title'}>
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+      </Accordion>
+    </div>
+  ),
+  play: async () => {
+    const canvasElement = document.querySelector(
+      '#storybook-root'
+    ) as HTMLElement;
+    const canvas = within(canvasElement);
+
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-accordion"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+    const header = document.querySelector(
+      '.dropin-accordion-section__heading'
+    ) as HTMLElement;
+    await expect(header).toHaveTextContent('Title');
+
+    await userEvent.click(canvas.getByRole('button'));
+    const content = document.querySelector(
+      '.dropin-accordion-section__content-container'
+    ) as HTMLElement;
+    await expect(content).toBeVisible();
+  },
+};
+
+export const SingleSectionWithLeftIcon: Story = {
+  args: {
+    actionIconPosition: 'right',
+    iconOpen: Icons.Add,
+    iconClose: Icons.Minus,
+    iconLeft: Icons.Card,
+    showIconLeft: true,
+  },
+  render: ({
+    actionIconPosition,
+    iconOpen,
+    iconClose,
+    iconLeft,
+    showIconLeft,
+  }) => (
+    <div>
+      <h2
+        style={{
+          font: 'var(--type-body-1-strong-font)',
+          color: 'var(--color-neutral-800)',
+          letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}
+      >
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion
+        actionIconPosition={actionIconPosition}
+        iconOpen={iconOpen}
+        iconClose={iconClose}
+      >
+        <AccordionSection
+          title={'Title'}
+          secondaryText={'Optional Text'}
+          iconLeft={iconLeft}
+          showIconLeft={showIconLeft}
+        >
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+      </Accordion>
+    </div>
+  ),
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-accordion"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+    const leftHeader = document.querySelector(
+      '.dropin-accordion-section__title-container'
+    ) as HTMLElement;
+    await expect(leftHeader).toBeVisible();
+    await expect(leftHeader).toContainHTML('<svg');
+  },
+};
+
+export const SingleSectionWithOptionalText: Story = {
+  args: {
+    actionIconPosition: 'right',
+    iconOpen: Icons.Add,
+    iconClose: Icons.Minus,
+    iconLeft: Icons.Card,
+    secondaryText: 'Optional Text',
+  },
+  render: ({
+    actionIconPosition,
+    iconOpen,
+    iconClose,
+    iconLeft,
+    secondaryText,
+  }) => (
+    <div>
+      <h2
+        style={{
+          font: 'var(--type-body-1-strong-font)',
+          color: 'var(--color-neutral-800)',
+          letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}
+      >
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion
+        actionIconPosition={actionIconPosition}
+        iconOpen={iconOpen}
+        iconClose={iconClose}
+      >
+        <AccordionSection
+          title={'Title'}
+          secondaryText={secondaryText}
+          iconLeft={iconLeft}
+        >
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+      </Accordion>
+    </div>
+  ),
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-accordion"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+    const secondaryText = document.querySelector(
+      '.dropin-accordion-section__secondary-text'
+    ) as HTMLElement;
+    await expect(secondaryText).toBeVisible();
+    await expect(secondaryText).toHaveTextContent('Optional Text');
+  },
+};
+
+export const SingleSectionWithPrice: Story = {
+  args: {
+    actionIconPosition: 'right',
+    iconOpen: Icons.Add,
+    iconClose: Icons.Minus,
+    iconLeft: Icons.Card,
+  },
+  render: ({ actionIconPosition, iconOpen, iconClose, iconLeft }) => (
+    <div>
+      <h2
+        style={{
+          font: 'var(--type-body-1-strong-font)',
+          color: 'var(--color-neutral-800)',
+          letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}
+      >
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion
+        actionIconPosition={actionIconPosition}
+        iconOpen={iconOpen}
+        iconClose={iconClose}
+      >
+        <AccordionSection
+          title={'Title'}
+          iconLeft={iconLeft}
+          secondaryText={<Price amount={9.99} />}
+        >
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+      </Accordion>
+    </div>
+  ),
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-accordion"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+    const secondaryText = document.querySelector(
+      '.dropin-accordion-section__secondary-text'
+    ) as HTMLElement;
+    await expect(secondaryText).toBeVisible();
+    await expect(secondaryText).toHaveTextContent('$9.99');
+  },
+};
+
+export const SingleSectionWithLinkAndCartItem: Story = {
+  args: {
+    actionIconPosition: 'left',
+    iconOpen: Icons.ChevronDown,
+    iconClose: Icons.ChevronUp,
+  },
+  render: ({ actionIconPosition, iconOpen, iconClose }) => (
+    <div>
+      <h2
+        style={{
+          font: 'var(--type-body-1-strong-font)',
+          color: 'var(--color-neutral-800)',
+          letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}
+      >
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion
+        actionIconPosition={actionIconPosition}
+        iconOpen={iconOpen}
+        iconClose={iconClose}
+      >
+        <AccordionSection
+          title={'Title'}
+          secondaryText={
+            <a rel="noreferrer" href="/cart">
+              Edit
+            </a>
+          }
+        >
+          <CartItem
+            key={'uuid'}
+            title={<div>Short Name</div>}
+            description={
+              <div>
+                Secondary product information such as brand name, description,
+                etc.
+              </div>
+            }
+            sku={<div>SKU: 59YK7</div>}
+            quantity={1}
+            image={
+              <Image
+                src="https://picsum.photos/132/184"
+                width="132"
+                height="184"
+                alt="Some alternative text"
+                loading="lazy"
+              />
+            }
+            price={
+              <Price
+                amount={53.99}
+                style={{ fontWeight: 'inherit', color: 'inherit' }}
+              />
+            }
+            total={
+              <>
+                <Price amount={59.98} variant="strikethrough" />
+                <Price amount={55.95} sale />
+              </>
+            }
+          />
+        </AccordionSection>
+      </Accordion>
+    </div>
+  ),
+  play: async () => {
+    const accordionElement = document.querySelector(
+      '.dropin-accordion'
+    ) as HTMLElement;
+    const link = accordionElement.querySelector('.dropin-accordion a');
+
+    await expect(accordionElement).toBeVisible();
+    await expect(link).toHaveTextContent('Edit');
+    await expect(link).toHaveAttribute('href', '/cart');
+  },
+};
+
+export const MultipleSection: Story = {
+  args: {
+    actionIconPosition: 'right',
+    iconOpen: Icons.ChevronDown,
+    iconClose: Icons.ChevronUp,
+    iconLeft: Icons.Card,
+    showIconLeft: false,
+  },
+  argTypes: {
+    showIconLeft: {
+      table: {
+        disable: true,
+      },
+    },
+    iconLeft: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: ({ actionIconPosition, iconOpen, iconClose }) => (
+    <div>
+      <h2
+        style={{
+          font: 'var(--type-body-1-strong-font)',
+          color: 'var(--color-neutral-800)',
+          letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}
+      >
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion
+        actionIconPosition={actionIconPosition}
+        iconOpen={iconOpen}
+        iconClose={iconClose}
+      >
+        <AccordionSection
+          title={'Cart summary'}
+          iconLeft={Icons.Cart}
+          showIconLeft={true}
+          renderContentWhenClosed={false}
+        >
+          <Card>
+            <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>
+        </AccordionSection>
+        <AccordionSection
+          title={'Card info'}
+          iconLeft={Icons.Card}
+          showIconLeft={true}
+          secondaryText={'Optional Text'}
+          renderContentWhenClosed={false}
+        >
+          <p>
+            Short product details should be kept to 6 lines maximum.
+            <br />
+            Short product details should be kept to 6 lines maximum.
+            <br />
+            Short product details should be kept to 6 lines maximum.
+            <br />
+            Short product details should be kept to 6 lines maximum.
+            <br />
+            Short product details should be kept to 6 lines maximum.
+            <br />
+          </p>
+        </AccordionSection>
+        <AccordionSection
+          title={'Wallet'}
+          iconLeft={Icons.Wallet}
+          showIconLeft={true}
+        >
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+        <AccordionSection
+          title={'Shipping'}
+          iconLeft={Icons.Delivery}
+          showIconLeft={true}
+        >
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+        <AccordionSection
+          title={'Notes'}
+          iconLeft={Icons.Delivery}
+          showIconLeft={false}
+        >
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+      </Accordion>
+    </div>
+  ),
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-accordion"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+    const section = document.querySelector(
+      '.dropin-accordion-section'
+    ) as HTMLElement;
+    await expect(section).toBeVisible();
+    const divider = document.querySelector('.dropin-divider') as HTMLElement;
+    await expect(divider).toBeVisible();
+  },
+};
+
+export const SingleSection_ToggleBehavior: Story = {
+  args: {
+    actionIconPosition: 'right',
+    iconOpen: Icons.Add,
+    iconClose: Icons.Minus,
+    iconLeft: Icons.Card,
+    defaultOpen: true,
+  },
+  render: ({
+    actionIconPosition,
+    iconOpen,
+    iconClose,
+    iconLeft,
+    defaultOpen,
+  }) => (
+    <div>
+      <h2
+        style={{
+          font: 'var(--type-body-1-strong-font)',
+          color: 'var(--color-neutral-800)',
+          letterSpacing: 'var(--type-body-1-strong-letter-spacing)',
+        }}
+      >
+        This is the Accordion Component, this title will be longer in order to
+        increase width of the story
+      </h2>
+
+      <Accordion
+        key={defaultOpen}
+        actionIconPosition={actionIconPosition}
+        iconOpen={iconOpen}
+        iconClose={iconClose}
+      >
+        <AccordionSection
+          title={'Title'}
+          iconLeft={iconLeft}
+          secondaryText={<Price amount={9.99} />}
+          renderContentWhenClosed={false}
+          defaultOpen={defaultOpen}
+        >
+          <p>Short product details should be kept to 6 lines maximum.</p>
+        </AccordionSection>
+      </Accordion>
+    </div>
+  ),
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-accordion"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+    const secondaryText = document.querySelector(
+      '.dropin-accordion-section__secondary-text'
+    ) as HTMLElement;
+    await expect(secondaryText).toBeVisible();
+    await expect(secondaryText).toHaveTextContent('$9.99');
+  },
+};