Button

{
  name: "Primary 100 with loading state",
  parameters: {
    // Disables Chromatic's snapshotting, as the spinner is animated und thus leads to diffs
    chromatic: {
      disableSnapshot: true,
      hideInChromatic: true
    }
  },
  args: {
    size: "100",
    variant: "primary",
    defaultSlot: "Label",
    loading: true
  },
  render(args) {
    const {
      defaultSlot,
      ...props
    } = args;
    return html` <div role="status" aria-live="assertive" aria-atomic="true">
      <!-- Content goes here -->
      <oc-button-v1 ${spread(props)}>${unsafeHTML(defaultSlot)}</oc-button-v1>
    </div>`;
  }
}

{
  name: "Demo: accessible multiple buttons",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <ul>
        <li class="oc-p-50">
          Produkt 1
          <oc-button-v1
            size="50"
            variant="primary"
            oc-aria-label="Produkt 1 zum Warenkorb hinzufügen"
            >Zum Warenkorb hinzufügen
          </oc-button-v1>
        </li>
        <li class="oc-p-50">
          Produkt 2
          <oc-button-v1
            size="50"
            variant="primary"
            oc-aria-label="Produkt 2 zum Warenkorb hinzufügen"
            >Zum Warenkorb hinzufügen
          </oc-button-v1>
        </li>
        <li class="oc-p-50">
          Produkt 3
          <oc-button-v1
            size="50"
            variant="primary"
            oc-aria-label="Produkt 2 zum Warenkorb hinzufügen"
            >Zum Warenkorb hinzufügen
          </oc-button-v1>
        </li>
      </ul>
    `;
  }
}

{
  name: "Demo: secondary button to success",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <oc-button-v1 id="follow" size="100" variant="secondary" fit-content oc-aria-label="Folgen">
        Folgen
      </oc-button-v1>

      <script>
        (() => {
          const followButton = document.getElementById("follow");
          followButton.addEventListener("click", followAction);

          function followAction() {
            followButton.success = true;
            followButton.iconTypeLeft = "check";
            followButton.innerHTML = "Gefolgt";
            followButton.ocAriaLabel = "Gefolgt";

            followButton.removeEventListener("click", followAction);
            followButton.addEventListener("click", unfollowAction);
          }

          function unfollowAction() {
            followButton.success = false;
            followButton.iconTypeLeft = undefined;
            followButton.innerHTML = "Folgen";
            followButton.ocAriaLabel = "Folgen";

            followButton.removeEventListener("click", unfollowAction);
            followButton.addEventListener("click", followAction);
          }
        })();
      </script>
    `;
  }
}

{
  name: "Custom color strong",
  args: {
    variant: "custom-color-strong",
    "icon-type-left": "smiley-positive",
    "icon-type-right": "arrow-right",
    "--background-color": "var(--oc-semantic-color-background-strong-pink)",
    "--text-color": "var(--oc-semantic-color-background-soft-pink)"
  },
  render(args) {
    const {
      defaultSlot,
      ...props
    } = args;
    const {
      css,
      className
    } = cssVariablesExample(props);
    return html`
      <oc-button-v1 class="${className}" ${spread(props)}>${unsafeHTML(defaultSlot)}</oc-button-v1>
      ${css}
    `;
  }
}

{
  name: "Custom color soft",
  args: {
    variant: "custom-color-soft",
    "icon-type-left": "smiley-positive",
    "icon-type-right": "arrow-right",
    "--background-color": "var(--oc-semantic-color-background-soft-pink)",
    "--text-color": "var(--oc-semantic-color-background-strong-pink)"
  },
  render(args) {
    const {
      defaultSlot,
      ...props
    } = args;
    const {
      css,
      className
    } = cssVariablesExample(props);
    return html`
      <oc-button-v1 class="${className}" ${spread(props)}>${unsafeHTML(defaultSlot)}</oc-button-v1>
      ${css}
    `;
  }
}

{
  name: "Demo: custom colors",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`
      <style>
        .demo-custom-colors {
          display: flex;
          flex-direction: column;
          gap: 2rem;
          padding: 2rem;
        }

        .demo-row {
          display: flex;
          gap: 1rem;
          flex-wrap: wrap;
          align-items: center;
        }

        .demo-item {
          width: 100%;
          max-width: 328px;
        }
      </style>

      <div class="demo-custom-colors">
        <div class="demo-row">
          <div class="demo-item">
            <oc-button-v1
              variant="custom-color-strong"
              icon-type-left="smiley-positive"
              icon-type-right="arrow-right"
              style="--background-color: var(--oc-semantic-color-background-strong-mint);"
            >
              Label
            </oc-button-v1>
          </div>

          <div class="demo-item">
            <oc-button-v1
              variant="custom-color-strong"
              icon-type-left="smiley-positive"
              icon-type-right="arrow-right"
              style="--background-color: var(--oc-semantic-color-background-strong-pink); --text-color: var(--oc-semantic-color-background-soft-pink)"
            >
              Label
            </oc-button-v1>
          </div>

          <div class="demo-item">
            <oc-button-v1
              variant="custom-color-strong"
              icon-type-left="smiley-positive"
              icon-type-right="arrow-right"
              style="--background-color: #522EB7"
            >
              Label
            </oc-button-v1>
          </div>
        </div>

        <div class="demo-row" style="margin-top: 1.5rem">
          <div class="demo-item">
            <oc-button-v1
              variant="custom-color-soft"
              icon-type-left="smiley-positive"
              icon-type-right="arrow-right"
              style="--background-color: var(--oc-semantic-color-background-soft-mint)"
            >
              Label
            </oc-button-v1>
          </div>

          <div class="demo-item">
            <oc-button-v1
              variant="custom-color-soft"
              icon-type-left="smiley-positive"
              icon-type-right="arrow-right"
              style="--background-color: var(--oc-semantic-color-background-soft-pink); --text-color: var(--oc-semantic-color-background-strong-pink)"
            >
              Label
            </oc-button-v1>
          </div>

          <div class="demo-item">
            <oc-button-v1
              variant="custom-color-soft"
              icon-type-left="smiley-positive"
              icon-type-right="arrow-right"
              style="--background-color: #E5D5FE; --text-color: #522EB7"
            >
              Label
            </oc-button-v1>
          </div>
        </div>
      </div>
    `;
  }
}

{
  render() {
    return html` <div id="form-association">
      <oc-button-v1 type="submit">no form</oc-button-v1>
      <oc-button-v1 type="submit" form="form-association-form" formaction="/bar"
        >referenced form
      </oc-button-v1>
      <form id="form-association-form" method="get" action="/foo">
        <oc-button-v1 type="submit" formmethod="post">within form</oc-button-v1>
      </form>
    </div>`;
  },
  async play({
    canvasElement
  }) {
    const form = canvasElement.getElementsByTagName("form").item(0)!;
    const [button1, button2, button3] = Array.from(canvasElement.getElementsByTagName("oc-button-v1"));

    // @ts-expect-error -- internally defined property
    await expect(button1.internals.form).toBe(null);
    // @ts-expect-error -- internally defined property
    await expect(button2.internals.form).toBe(form);
    // @ts-expect-error -- internally defined property
    await expect(button3.internals.form).toBe(form);
  }
}

{
  render() {
    return html`
      <form id="form1" method="get" action="/foo">
        <label>
          <input type="text" name="user" />
        </label>
        <oc-button-v1 type="submit" disabled>never submit me</oc-button-v1>
        <oc-button-v1 type="submit" disabled formaction="/trigger-me"
          >never submit me
        </oc-button-v1>
        <button type="submit"></button>
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    const [button1] = Array.from(canvasElement.getElementsByTagName("oc-button-v1"));
    const input = canvasElement.getElementsByTagName("input").item(0)!;
    const form = canvasElement.querySelector("form") as HTMLFormElement;
    let numberOfSubmitEvents = 0;
    form.addEventListener("submit", ev => {
      ev.preventDefault();
      numberOfSubmitEvents += 1;
    });
    await userEvent.type(input, "{Enter}");
    await userEvent.type(button1, "{Enter}");
    await expect(numberOfSubmitEvents, "never submit disabled button").toBe(0);
  }
}

{
  render() {
    return html`
      <form id="form1">
        <label>
          <textarea name="user"> </textarea>
        </label>
        <oc-button-v1 type="submit">never submit me</oc-button-v1>
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    const input = canvasElement.getElementsByTagName("textarea").item(0)!;
    const form = canvasElement.querySelector("form") as HTMLFormElement;
    let numberOfSubmitEvents = 0;
    form.addEventListener("submit", ev => {
      ev.preventDefault();
      numberOfSubmitEvents += 1;
    });
    await userEvent.type(input, "{Enter}");
    await expect(numberOfSubmitEvents, "never submit disabled button").toBe(0);
  }
}

{
  render() {
    return html`
      <form id="form1" method="get" action="/foo">
        <label>
          <input type="text" name="user" />
        </label>
        <oc-button-v1 type="submit">do not submit me</oc-button-v1>
        <oc-button-v1 type="submit" formaction="/trigger-me">submit</oc-button-v1>
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    const button2 = canvasElement.getElementsByTagName("oc-button-v1").item(1)!;
    const form = canvasElement.querySelector("form") as HTMLFormElement;
    let submitter: HTMLElement | null = null;
    let numberOfSubmitEvents = 0;
    form.addEventListener("submit", ev => {
      ev.preventDefault();
      submitter = ev.submitter;
      numberOfSubmitEvents += 1;
    });
    await userEvent.type(button2, "{Enter}");
    await expect(numberOfSubmitEvents, "submit once").toBe(1);
    await expect(
    // @ts-expect-error -- internally defined property
    submitter?.formAction.endsWith("/trigger-me"), "should triggered second button only").toBeTruthy();
    await userEvent.click(button2);
    await expect(numberOfSubmitEvents, "second submit").toBe(2);
    await expect(
    // @ts-expect-error -- internally defined property
    submitter?.formAction.endsWith("/trigger-me"), "should triggered second button only").toBeTruthy();
  }
}

{
  render() {
    return html`
      <form id="form1" method="get" action="/foo">
        <label>
          <input type="text" name="user" />
        </label>
        <oc-button-v1 type="submit" formaction="/trigger-me">submit</oc-button-v1>
        <input type="submit" formaction="/do-not-trigger-me" />
        <button type="submit" formaction="/do-not-trigger-me"></button>
        <oc-button-v1 type="submit" formaction="/do-not-trigger-me">submit</oc-button-v1>
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    const input = canvasElement.getElementsByTagName("input").item(0)!;
    const form = canvasElement.querySelector("form") as HTMLFormElement;
    let submitter: HTMLElement | null = null;
    let numberOfSubmitEvents = 0;
    form.addEventListener("submit", ev => {
      ev.preventDefault();
      submitter = ev.submitter;
      numberOfSubmitEvents += 1;
    });
    await userEvent.type(input, "{Enter}");
    await expect(numberOfSubmitEvents, "submit once").toBe(1);
    await expect(
    // @ts-expect-error -- internally defined property
    submitter?.formAction.endsWith("/trigger-me"), "should have form action '/trigger-me'").toBeTruthy();
  }
}

{
  render() {
    return html`
      <form id="form1" method="get" action="/foo">
        <label>
          <input type="text" name="user" />
        </label>
        <a href="#">Foo</a>
        <oc-button-v1 type="submit" formaction="/trigger-me">submit</oc-button-v1>
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    const link = canvasElement.getElementsByTagName("a").item(0)!;
    const form = canvasElement.querySelector("form") as HTMLFormElement;
    link.addEventListener("click", ev => ev.preventDefault());
    let numberOfSubmitEvents = 0;
    form.addEventListener("submit", ev => {
      ev.preventDefault();
      numberOfSubmitEvents += 1;
    });
    await userEvent.type(link, "{Enter}");
    await expect(numberOfSubmitEvents, "should not trigger submit").toBe(0);
  }
}

{
  render() {
    return html`
      <form id="form1">
        <label>
          {Enter}
          <input type="text" name="name" />
        </label>
        <oc-button-v1 type="submit" data-should-submit></oc-button-v1>
        <oc-button-v1 type="submit" data-should-not-submit></oc-button-v1>
      </form>

      <form id="form2">
        <label>
          {Enter}
          <input type="text" name="name" />
        </label>
        <input type="submit" data-should-submit />
        <oc-button-v1 type="submit" data-should-not-submit></oc-button-v1>
      </form>

      <form id="form3">
        <label>
          {Enter}
          <input type="text" name="name" />
        </label>
        Should submit the form but not by oc-button-v1
      </form>

      <form id="form4">
        <input type="submit" data-should-submit />
        <oc-button-v1 type="submit" data-should-not-submit></oc-button-v1>
        <label>
          {Enter}
          <input type="text" name="name" form="form4" />
        </label>
      </form>

      <form id="form5">
        <label>
          {Enter}
          <input type="text" name="name" />
        </label>
        <oc-button-v1 type="submit" disabled data-should-not-submit></oc-button-v1>
        <oc-button-v1 type="submit" data-should-not-submit></oc-button-v1>
      </form>

      <form id="form6">
        <label>
          {Enter}
          <input type="text" name="name" />
        </label>
        <input type="submit" disabled data-should-not-submit />
        <oc-button-v1 type="submit" data-should-not-submit></oc-button-v1>
      </form>

      <form id="form7">
        <label>
          {Enter}
          <input type="text" name="name" />
        </label>
      </form>

      <oc-button-v1 type="submit" form="form7" data-should-submit></oc-button-v1>
      <oc-button-v1 type="submit" form="form7" data-should-not-submit></oc-button-v1>
      <button type="submit" form="form7" data-should-not-submit></button>
    `;
  },
  async play({
    canvasElement
  }) {
    const inputs = Array.from(canvasElement.querySelectorAll(`input[name="name"]`)) as HTMLInputElement[];
    const submits: {
      form: string;
      submitter: HTMLElement | null;
    }[] = [];
    canvasElement.querySelectorAll("form").forEach(form => {
      form.addEventListener("submit", ev => {
        ev.preventDefault();
        submits.push({
          form: form.id,
          submitter: ev.submitter
        });
      });
    });

    // eslint-disable-next-line no-restricted-syntax
    for (const input of inputs) {
      // eslint-disable-next-line no-await-in-loop
      await userEvent.type(input, "{Enter}");
    }
    await expect(submits.length).toBe(5);
    await expect(submits[0].form).toBe("form1");
    await expect(submits[0].submitter?.dataset.shouldNotSubmit).toBeUndefined();
    await expect(submits[1].form).toBe("form2");
    await expect(submits[1].submitter?.dataset.shouldNotSubmit).toBeUndefined();
    await expect(submits[2].form).toBe("form3");
    await expect(submits[2].submitter).toBe(undefined);
    await expect(submits[3].form).toBe("form4");
    await expect(submits[3].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[4].form).toBe("form7");
    await expect(submits[4].submitter?.dataset.shouldNotSubmit).toBeUndefined();
  }
}

{
  args: {
    variant: "primary",
    size: "100",
    type: "submit"
  },
  render(args) {
    return html` <form onsubmit="return false;">
      <label for="username">Username</label>
      <input id="username" />
      <oc-button-v1 ${spread(args)}>Submit Form</oc-button-v1>
    </form>`;
  },
  play: async ({
    canvasElement
  }) => {
    const innerButton = getByShadowRole(canvasElement, "button");
    const form = canvasElement.querySelector("form");
    let formSubmitted = false;
    if (form) {
      form.addEventListener("submit", event => {
        formSubmitted = true;
        event.preventDefault();
      });
    }
    await expect(formSubmitted).toBeFalsy();
    await click(innerButton);
    await expect(formSubmitted).toBeTruthy();
  }
}

{
  args: {
    variant: "primary",
    size: "100"
  },
  render(args) {
    return html` <form onsubmit="return false;">
      <label for="username">Username</label>
      <input id="username" />
      <oc-button-v1 ${spread(args)}>Submit Form</oc-button-v1>
    </form>`;
  },
  play: async ({
    canvasElement
  }) => {
    const innerButton = getByShadowRole(canvasElement, "button");
    const form = canvasElement.querySelector("form");
    let formSubmitted = false;
    if (form) {
      form.addEventListener("submit", event => {
        formSubmitted = true;
        event.preventDefault();
      });
    }
    await expect(formSubmitted).toBeFalsy();
    await click(innerButton);
    await expect(formSubmitted).toBeFalsy();
  }
}

{
  args: {
    variant: "primary",
    size: "100",
    type: "reset"
  },
  render(args) {
    return html` <form onsubmit="return false;" onreset="return false;">
      <label for="username">Username</label>
      <input id="username" />
      <oc-button-v1 ${spread(args)}>Reset Form</oc-button-v1>
    </form>`;
  },
  play: async ({
    canvasElement
  }) => {
    const innerButton = getByShadowRole(canvasElement, "button");
    const form = canvasElement.querySelector("form");
    let formResetted = false;
    if (form) {
      form.addEventListener("reset", event => {
        formResetted = true;
        event.preventDefault();
      });
    }
    await expect(formResetted).toBeFalsy();
    await click(innerButton);
    await expect(formResetted).toBeTruthy();
  }
}

{
  args: {
    variant: "primary",
    size: "100",
    type: "button"
  },
  parameters: {
    // Disables Chromatic's snapshotting, as the spinner is animated und thus leads to diffs
    chromatic: {
      disableSnapshot: true
    }
  },
  render(args) {
    return html` <oc-button-v1 ${spread(args)}>Button</oc-button-v1>`;
  },
  play: async ({
    canvasElement
  }) => {
    // given
    const ocButton = canvasElement.getElementsByTagName("oc-button-v1").item(0)!;
    const button = getByShadowRole(canvasElement, "button");
    button.addEventListener("click", () => {
      ocButton.setAttribute("loading", "");
    });

    // there should be no spinner before clicking the button
    const noSpinner = Array.from(button.childNodes).find(node => node.nodeName === "OC-SPINNER-V1");
    await expect(noSpinner, "no spinner should be rendered before clicking the button").toBeFalsy();

    // when
    await click(button);

    // then
    // wait for some time because of the default debounce (?)
    await waitFor("spinner to arrive", async () => {
      const spinner = Array.from(button.childNodes).find(node => node.nodeName === "OC-SPINNER-V1");
      await expect(spinner, "spinner should be rendered after clicking the button").toBeTruthy();
    });
  }
}

{
  render() {
    return html` <oc-button-v1 type="submit">Button</oc-button-v1>`;
  },
  play: async ({
    canvasElement
  }) => {
    const ocButton = canvasElement.getElementsByTagName("oc-button-v1").item(0)!;
    const button = getByShadowRole(canvasElement, "button");
    let clickCount = 0;
    let documentClickCount = 0;
    document.addEventListener("click", () => {
      documentClickCount++;
    });
    ocButton.addEventListener("click", () => {
      clickCount++;
    });

    // when
    await click(button);

    // then
    await expect(clickCount, "direct click count should be 1 after first click").toBe(1);
    await expect(documentClickCount, "document click count should be 1 after first click").toBe(1);

    // when loading is set to true
    ocButton.setAttribute("loading", "");

    // give it time to settle
    await waitFor("spinner to arrive", async () => {
      const spinner = Array.from(button.childNodes).find(node => node.nodeName === "OC-SPINNER-V1");
      await expect(spinner, "spinner should be rendered after clicking the button").toBeTruthy();
    });
    await click(button);

    // then the click event should not be triggered again
    await expect(clickCount, "direct click count should increase when loading is true").toBe(2);
    // TODO slop: the document click count should not increase because the click event should not propagate, but currently it does for the first click after setting loading to true. This is because the bouncer logic is only applied on subsequent clicks, but not on the first click after setting loading to true. This is a known issue and will be fixed in the next iteration.
    await expect(documentClickCount, "document click count should not increase when loading is true, but does for the first click after setting loading to true").toBe(2);
    await click(button);

    // then the click event should not be triggered again
    await expect(clickCount, "direct click count should increase when loading is true").toBe(3);
    await expect(documentClickCount, "document click count should not increase when loading is true, and now works for the second click after setting loading to true").toBe(2);

    // and the spinner should be rendered inside the button
    const spinner = Array.from(button.childNodes).find(node => node.nodeName === "OC-SPINNER-V1");
    await expect(spinner, "spinner should be rendered when loading is true").toBeTruthy();
  }
}

{
  render() {
    return html` <oc-button-v1 base64-href="L2Zvbw==">Link</oc-button-v1>`;
  },
  async play({
    canvasElement
  }) {
    const ocButton = canvasElement.getElementsByTagName("oc-button-v1").item(0)!;
    ocButton.focus();
    let linkElement: HTMLAnchorElement;
    await waitFor("render link element inside shadow root", async () => {
      // instead of the button element there should now be an anchor element
      const buttonElement = ocButton.shadowRoot!.querySelector("button");
      linkElement = ocButton.shadowRoot!.querySelector("a")!;
      await expect(buttonElement, "no button should be rendered").toBeNull();
      await expect(linkElement.tagName, "anchor should be rendered").toBe("A");
    });

    // anchor element inside the shadow root should have the correct href attribute
    await expect(linkElement!.getAttribute("href")).toBe(`/foo`);

    // anchor element inside the shadow root should have the same fully href as the host
    await expect(ocButton.href).toBe(`${window.location.origin}/foo`);
    await expect(linkElement!.href).toBe(`${window.location.origin}/foo`);
  }
}