Form group

{
  name: "Default",
  args: {
    "--gap": "var(--oc-base-dimension-8)"
  },
  render(args) {
    const {
      defaultSlot,
      ...props
    } = args;
    const {
      css,
      className
    } = cssVariablesExample(args);
    return html`<oc-form-group-v1 class="${className}" ${spread(props)}
        >${unsafeHTML(defaultSlot)}</oc-form-group-v1
      >${css}`;
  }
}

{
  name: "With hint",
  args: {
    hint: "Example hint.",
    "--gap": "var(--oc-base-dimension-8)"
  },
  render: Default.render
}

{
  name: "With validation message",
  args: {
    "validation-message": "Invalid input.",
    "--gap": "var(--oc-base-dimension-8)"
  },
  render: Default.render
}

{
  name: "Without layout",
  args: {
    orientation: undefined,
    "flex-behavior": undefined,
    "--gap": "var(--oc-base-dimension-8)"
  },
  render: Default.render
}

{
  parameters: {
    controls: {
      disabled: true
    }
  },
  name: "Demo: Form",
  render() {
    return html`
      <form novalidate>
        <oc-text-field-v1 class="oc-mt-150" hint="Example hint." name="field"
          >text field
        </oc-text-field-v1>
        <oc-text-area-v1 class="oc-mt-150" hint="Example hint." name="area"
          >text area</oc-text-area-v1
        >

        <oc-dropdown-v1
          class="oc-mt-150"
          hint="Example hint."
          label="Options"
          name="dropdown"
          options='[{"label":"Option 1","value":"1"},{"label":"Option 2","value":"2"},{"label":"Option 3","value":"3"}]'
          >dropdown
        </oc-dropdown-v1>

        <oc-form-group-v1
          class="demo-class oc-mt-150"
          hint="Text fields hint."
          orientation="horizontal"
          flex-behavior="grow"
        >
          <oc-text-field-v1 name="field1">text field 1</oc-text-field-v1>
          <oc-text-field-v1 name="field2">text field 2</oc-text-field-v1>
        </oc-form-group-v1>

        <oc-form-group-v1
          class="demo-class oc-mt-150"
          hint="Text areas hint."
          orientation="horizontal"
          flex-behavior="grow"
        >
          <oc-text-area-v1 name="area1">text area 1</oc-text-area-v1>
          <oc-text-area-v1 name="area2">text area 2</oc-text-area-v1>
        </oc-form-group-v1>

        <oc-form-group-v1
          class="demo-class oc-mt-150"
          hint="Dropdowns hint."
          orientation="horizontal"
          flex-behavior="grow"
        >
          <oc-dropdown-v1
            label="Options"
            name="dropdown1"
            options='[{"label":"Option 1","value":"1"},{"label":"Option 2","value":"2"},{"label":"Option 3","value":"3"}]'
            >dropdown 1
          </oc-dropdown-v1>
          <oc-dropdown-v1
            label="Options"
            name="dropdown2"
            options='[{"label":"Option 1","value":"1"},{"label":"Option 2","value":"2"},{"label":"Option 3","value":"3"}]'
            >dropdown 2
          </oc-dropdown-v1>
        </oc-form-group-v1>

        <oc-form-group-v1
          class="oc-mt-150"
          hint="Checkboxes hint."
          orientation="horizontal"
          flex-behavior="shrink"
        >
          <oc-checkbox-v1 name="checkbox" value="checked1">checkbox 1</oc-checkbox-v1>
          <oc-checkbox-v1 name="checkbox" value="checked2">checkbox 2</oc-checkbox-v1>
        </oc-form-group-v1>

        <oc-form-group-v1
          class="oc-mt-150"
          hint="Radio buttons hint."
          orientation="horizontal"
          flex-behavior="shrink"
        >
          <oc-radio-button-v1 name="radio" value="checked1">radio button 1</oc-radio-button-v1>
          <oc-radio-button-v1 name="radio" value="checked2">radio button 2</oc-radio-button-v1>
        </oc-form-group-v1>

        <div class="oc-mt-150">
          <oc-button-v1 type="reset" fit-content variant="secondary">Reset</oc-button-v1>
          <oc-button-v1 fit-content id="mark-invalid">Mark Invalid</oc-button-v1>
          <oc-button-v1 type="submit" fit-content>Submit</oc-button-v1>
        </div>
      </form>

      <style>
        .demo-class {
          --gap: var(--oc-base-dimension-8);
        }
      </style>

      <script>
        (() => {
          const [textField] = document.getElementsByTagName("oc-text-field-v1");
          const [textArea] = document.getElementsByTagName("oc-text-area-v1");
          const [dropdown] = document.getElementsByTagName("oc-dropdown-v1");
          const formGroups = document.getElementsByTagName("oc-form-group-v1");

          const [form] = document.getElementsByTagName("form");
          const [reset, markInvalid] = document.getElementsByTagName("oc-button-v1");

          markInvalid.addEventListener("click", () => {
            textField.validationMessage = "This field is invalid";
            textArea.validationMessage = "This field is invalid";
            dropdown.validationMessage = "This field is invalid";
            for (const formGroup of formGroups) {
              formGroup.validationMessage = "These fields are invalid";
            }
          });

          reset.addEventListener("click", () => {
            textField.validationMessage = undefined;
            textArea.validationMessage = undefined;
            dropdown.validationMessage = undefined;
            for (const formGroup of formGroups) {
              formGroup.validationMessage = undefined;
            }
          });

          form.addEventListener("submit", (ev) => {
            let formData = new FormData(form);
            let data = "";
            formData.forEach((value, key) => (data += key + "=" + value + "\\n"));
            console.log(data);
            alert("sending:\\n" + data);
            ev.preventDefault();
          });
        })();
      </script>
    `;
  }
}

{
  render: () => {
    return html`
      <oc-form-group-v1
        class="oc-mt-150"
        hint="my hint"
        orientation="horizontal"
        flex-behavior="grow"
      >
        <oc-text-field-v1 name="field1">text field 1</oc-text-field-v1>
        <oc-text-field-v1 name="field2">text field 2</oc-text-field-v1>
      </oc-form-group-v1>

      <oc-form-group-v1
        class="oc-mt-150"
        hint="my hint"
        orientation="horizontal"
        flex-behavior="grow"
      >
        <oc-text-area-v1 name="area1">text area 1</oc-text-area-v1>
        <oc-text-area-v1 name="area2">text area 2</oc-text-area-v1>
      </oc-form-group-v1>

      <oc-form-group-v1
        class="oc-mt-150"
        hint="my hint"
        orientation="horizontal"
        flex-behavior="grow"
      >
        <oc-dropdown-v1
          label="Options"
          name="dropdown1"
          options='[{"label":"Option 1","value":"1"},{"label":"Option 2","value":"2"},{"label":"Option 3","value":"3"}]'
          >dropdown 1
        </oc-dropdown-v1>
        <oc-dropdown-v1
          label="Options"
          name="dropdown2"
          options='[{"label":"Option 1","value":"1"},{"label":"Option 2","value":"2"},{"label":"Option 3","value":"3"}]'
          >dropdown 2
        </oc-dropdown-v1>
      </oc-form-group-v1>

      <oc-form-group-v1
        class="oc-mt-150"
        hint="my hint"
        orientation="horizontal"
        flex-behavior="shrink"
      >
        <oc-checkbox-v1 name="checkbox" value="checked1">checkbox 1</oc-checkbox-v1>
        <oc-checkbox-v1 name="checkbox" value="checked2">checkbox 2</oc-checkbox-v1>
      </oc-form-group-v1>

      <oc-form-group-v1
        class="oc-mt-150"
        hint="my hint"
        orientation="horizontal"
        flex-behavior="shrink"
      >
        <oc-radio-button-v1 name="radio" value="checked1">radio button 1</oc-radio-button-v1>
        <oc-radio-button-v1 name="radio" value="checked2">radio button 2</oc-radio-button-v1>
      </oc-form-group-v1>
    `;
  },
  play: async ({
    canvasElement
  }) => {
    const textFields = Array.from(canvasElement.getElementsByTagName("oc-text-field-v1"));
    const textAreas = Array.from(canvasElement.getElementsByTagName("oc-text-area-v1"));
    const dropdowns = Array.from(canvasElement.getElementsByTagName("oc-dropdown-v1"));
    const checkboxes = Array.from(canvasElement.getElementsByTagName("oc-checkbox-v1"));
    const radioButtons = Array.from(canvasElement.getElementsByTagName("oc-radio-button-v1"));
    await waitFor(() => [...textFields, ...textAreas, ...dropdowns].flatMap(element => [
    // @ts-expect-error -- internally defined property
    expect(element.hideDetails, "should not show details").toBeTruthy(), expect(element.hint, "should have a hint").toBe("my hint")]));
    await waitFor(() => [...textFields, ...textAreas, ...dropdowns, ...checkboxes, ...radioButtons].map(element =>
    // @ts-expect-error -- internally defined property
    expect(element.validationMessage, "should not have validation message").toBeUndefined()));
    Array.from(canvasElement.getElementsByTagName("oc-form-group-v1")).forEach(formGroup => {
      formGroup.setAttribute("validation-message", "This is a validation message");
      formGroup.setAttribute("hint", "This is a hint");
    });
    await tick();
    await waitFor(() => [...textFields, ...textAreas, ...dropdowns].flatMap(element => [
    // @ts-expect-error -- internally defined property
    expect(element.hideDetails, "still should not show details").toBeTruthy(), expect(element.hint, "should have new hint").toBe("This is a hint")]));
    await waitFor(() => [...textFields, ...textAreas, ...dropdowns, ...checkboxes, ...radioButtons].map(element =>
    // @ts-expect-error -- internally defined property
    expect(element.validationMessage, "should have correct validation message").toBe("This is a validation message")));
  }
}

{
  render: () => {
    return html`
      <oc-form-group-v1 orientation="horizontal" flex-behavior="grow">
        <oc-text-field-v1 name="field1">text field 1</oc-text-field-v1>
      </oc-form-group-v1>
    `;
  },
  play: async ({
    canvasElement
  }) => {
    const formGroup = canvasElement.getElementsByTagName("oc-form-group-v1")[0];
    const textField1 = canvasElement.getElementsByTagName("oc-text-field-v1")[0];
    formGroup.hint = "This is a hint";
    await tick();
    await waitFor(() => [
    // @ts-expect-error -- internally defined property
    expect(textField1.hideDetails, "textField1.hideDetail").toBeTruthy(), expect(textField1.validationMessage, "textField1.validationMessage").toBeUndefined(), expect(textField1.hint, "textField1.hint").toBe("This is a hint")]);
    await tick();
    const textField2 = document.createElement("oc-text-field-v1");
    textField2.innerText = "text field 2";
    formGroup.appendChild(textField2);
    await waitFor(() => [
    // @ts-expect-error -- internally defined property
    expect(textField2.hideDetails, "textField2.hideDetails").toBeTruthy(), expect(textField2.validationMessage, "textField2.validationMessage").toBeUndefined(), expect(textField2.hint, "textField2.hint").toBe("This is a hint")]);
    formGroup.validationMessage = "This is a validation message";
    await tick();
    const textField3 = document.createElement("oc-text-field-v1");
    textField3.innerText = "text field 3";
    formGroup.appendChild(textField3);
    await waitFor(() => [
    // @ts-expect-error -- internally defined property
    expect(textField1.hideDetails, "textField1.hideDetails").toBeTruthy(), expect(textField1.validationMessage, "textField1.validationMessage").toBe("This is a validation message"), expect(textField1.hint, "textField1.hint").toBe("This is a hint"),
    // @ts-expect-error -- internally defined property
    expect(textField2.hideDetails, "textField2.hideDetails").toBeTruthy(), expect(textField2.validationMessage, "textField2.validationMessage").toBe("This is a validation message"), expect(textField2.hint, "textField2.hint").toBe("This is a hint"),
    // @ts-expect-error -- internally defined property
    expect(textField3.hideDetails, "textField3.hideDetails").toBeTruthy(), expect(textField3.validationMessage, "textField3.validationMessage").toBe("This is a validation message"), expect(textField3.hint, "textField3.hint").toBe("This is a hint")]);
  }
}