Button

// src/components/button/schema.json

{
  "$schema": "http://json-schema.org/draft-07/schema",
  "required": [
    "label"
  ],
  "properties": {
    "disabled": {
      "type": "boolean"
    },
    "external": {
      "type": "boolean"
    },
    "label": {
      "type": "string"
    },
    "modifiers": {
      "type": "array"
    },
    "type": {
      "type": "string"
    },
    "url": {
      "type": "string"
    }
  }
}

// src/components/button/mocks.json

{
  "label": "Regular button",
  "$variants": [
    {
      "$name": "external link",
      "label": "External link",
      "url": "https://mgrossklaus.de",
      "external": true
    },
    {
      "$name": "secondary",
      "label": "Secondary button",
      "modifiers": [
        "secondary"
      ]
    },
    {
      "$name": "disabled",
      "label": "Disabled button",
      "disabled": true
    },
    {
      "$name": "disabled/secondary",
      "label": "Disabled secondary button",
      "disabled": true,
      "modifiers": [
        "secondary"
      ]
    }
  ]
}

// src/components/button/index.hbs

{{#if url}}
<a href="{{url}}" class="Button{{#each modifiers}} Button--{{this}}{{/each}}" {{#if external}} target="_blank"
  rel="noopener" {{/if}}>
  {{else}}
  <button class="Button{{#each modifiers}} Button--{{this}}{{/each}}" type="{{ type }}" {{#if disabled}}
    disabled{{/if}}>
    {{/if}}
    <span class="Button-label">{{label}}</span>
    {{#if url}}
</a>
{{else}}
</button>
{{/if}}