Barmer Fractal

Form 

<form class="o-form js-form" action="" method="">
    <div class="m-form-control ">
        <label class="a-label " for="textinput1">
            A standard text input

        </label>

        <input type="text" value="" class="a-input input--text" id="textinput1">
    </div>

    <div class="m-form-control ">
        <label class="a-label " for="email">
            A text input with the type email
            <button class="a-btn js-has-tooltip" type="button" data-tooltip-text="Tooltip text"><span class="sr-only">Tooltip</span><i class="a-icon icon--help-circle" aria-hidden="true"></i></button>

        </label>

        <input type="email" value="" class="a-input input--text" id="email">
    </div>

    <div class="m-form-control form-control--full-width">
        <label class="a-label " for="textinput2">
            A text input spanning the full form width

        </label>

        <input type="text" value="" class="a-input input--text" id="textinput2">
    </div>

    <div class="m-form-control form-control--full-width">
        <label class="a-label " for="textarea">
            A textarea spanning the full form width

        </label>

        <textarea class="a-textarea " id="textarea"></textarea>

    </div>

    <fieldset class="m-fieldset">
        <legend class="fieldset__legend">Form elements in a fieldset. This is the fieldset legend</legend>
        <div class="m-form-control ">
            <label class="a-label " for="textinput3">
                A text input inside the fieldset

            </label>

            <input type="text" value="" class="a-input input--text" id="textinput3">
        </div>

        <div class="m-form-control ">
            <label class="a-label " for="textinput4">
                Another text input inside the fieldset

            </label>

            <input type="text" value="" class="a-input input--text" id="textinput4">
        </div>

    </fieldset>

    <div class="form__actions">
        <button class="a-btn btn--primary" type="submit">Submit Button</button>

        <button class="a-btn btn--secondary" type="button">Another Button</button>

        <button class="a-btn js-has-tooltip" type="button" data-tooltip-text="Tooltip text"><span class="sr-only">Tooltip</span><i class="a-icon icon--help-circle" aria-hidden="true"></i></button>

    </div>
</form>
 
<form class="o-form {{viewtypes.specifier}}" {{#each content.attributes}}{{#this}}{{@key}}="{{@this}}"{{/this}}{{/each}}>
  {{#each partials.items  as |formItem| }}
    {{ render (stringToPartial formItem.type) formItem merge=true }}
  {{/each}}

  <div class="form__actions">
  {{#each partials.buttons as |button| }}
    {{ render (stringToPartial button.type) button merge=true }}
  {{/each}}
  </div>
</form>
 
{
  "switches": {},
  "viewtypes": {
    "specifier": "js-form"
  },
  "content": {
    "attributes": {
      "action": "",
      "method": ""
    }
  },
  "partials": {
    "items": [
      {
        "type": "form-control",
        "viewtypes": {
          "specifier": ""
        },
        "content": {},
        "partials": {
          "label": {
            "content": {
              "for": "textinput1",
              "text": "A standard text input"
            }
          },
          "input": {
            "type": "formelement-input--text",
            "switches": {},
            "content": {
              "id": "textinput1"
            }
          }
        }
      },
      {
        "type": "form-control",
        "viewtypes": {
          "specifier": ""
        },
        "content": {},
        "partials": {
          "label": {
            "switches": {
              "hasTooltip": true
            },
            "content": {
              "for": "email",
              "text": "A text input with the type email"
            }
          },
          "input": {
            "type": "formelement-input--text",
            "switches": {},
            "content": {
              "id": "email",
              "type": "email"
            }
          }
        }
      },
      {
        "type": "form-control",
        "viewtypes": {
          "specifier": "form-control--full-width"
        },
        "content": {},
        "partials": {
          "label": {
            "content": {
              "for": "textinput2",
              "text": "A text input spanning the full form width"
            }
          },
          "input": {
            "type": "formelement-input--text",
            "switches": {},
            "content": {
              "id": "textinput2"
            }
          }
        }
      },
      {
        "type": "form-control",
        "viewtypes": {
          "specifier": "form-control--full-width"
        },
        "content": {},
        "partials": {
          "label": {
            "content": {
              "for": "textarea",
              "text": "A textarea spanning the full form width"
            }
          },
          "input": {
            "type": "formelement-textarea",
            "switches": {},
            "content": {
              "id": "textarea"
            }
          }
        }
      },
      {
        "type": "fieldset",
        "content": {
          "legend": "Form elements in a fieldset. This is the fieldset legend"
        },
        "partials": {
          "items": [
            {
              "type": "form-control",
              "viewtypes": {
                "specifier": ""
              },
              "content": {},
              "partials": {
                "label": {
                  "content": {
                    "for": "textinput3",
                    "text": "A text input inside the fieldset"
                  }
                },
                "input": {
                  "type": "formelement-input--text",
                  "switches": {},
                  "content": {
                    "id": "textinput3"
                  }
                }
              }
            },
            {
              "type": "form-control",
              "viewtypes": {
                "specifier": ""
              },
              "content": {},
              "partials": {
                "label": {
                  "content": {
                    "for": "textinput4",
                    "text": "Another text input inside the fieldset"
                  }
                },
                "input": {
                  "type": "formelement-input--text",
                  "switches": {},
                  "content": {
                    "id": "textinput4"
                  }
                }
              }
            }
          ]
        }
      }
    ],
    "buttons": [
      {
        "type": "button--primary",
        "viewtypes": {},
        "content": {
          "type": "submit",
          "label": "Submit Button"
        }
      },
      {
        "type": "button--secondary",
        "viewtypes": {},
        "content": {
          "label": "Another Button"
        }
      },
      {
        "type": "button--tooltip",
        "viewtypes": {},
        "content": {
          "label": "Tooltip"
        }
      }
    ]
  }
}

No notes defined.