element-details

// src/components/element-details/mocks.json

{
  "$variants": [
    {
      "$name": "Slot",
      "name": "slot",
      "description": "A placeholder inside a web component that users can fill with their own markup, with the effect of composing different DOM trees together.",
      "attributes": [
        {
          "key": "name",
          "val": "The name of the slot."
        }
      ]
    },
    {
      "$name": "Template",
      "name": "template",
      "description": "A mechanism for holding client- side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript."
    }
  ]
}

// src/components/element-details/index.hbs

<style>
  dl {
    margin-left: 6px;
  }

  dt {
    font-weight: bold;
    color: #217ac0;
    font-size: 110%
  }

  dt {
    font-family: Consolas, "Liberation Mono", Courier
  }

  dd {
    margin-left: 16px
  }
</style>

<template id="element-details-template">
  <style>
    details {
      font-family: "Open Sans Light", Helvetica, Arial
    }

    .name {
      font-weight: bold;
      color: #217ac0;
      font-size: 120%
    }

    h4 {
      margin: 10px 0 -8px 0;
    }

    h4 span {
      background: #217ac0;
      padding: 2px 6px 2px 6px
    }

    h4 span {
      border: 1px solid #cee9f9;
      border-radius: 4px
    }

    h4 span {
      color: white
    }

    .attributes {
      margin-left: 22px;
      font-size: 90%
    }

    .attributes p {
      margin-left: 16px;
      font-style: italic
    }
  </style>
  <details>
    <summary>
      <span>
        <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code>
        <i class="desc">
          <slot name="description">NEED DESCRIPTION</slot>
        </i>
      </span>
    </summary>
    <div class="attributes">
      <h4><span>Attributes</span></h4>
      <slot name="attributes">
        <p>None</p>
      </slot>
    </div>
  </details>
  <hr>
</template>

<element-details>
  <span slot="element-name">{{name}}</span>
  <span slot="description">{{description}}</span>
  {{#if attributes}}
  <dl slot="attributes">
    {{#each attributes}}
    <dt>{{this.key}}</dt>
    <dd>{{this.val}}</dd>
    {{/each}}
  </dl>
  {{/if}}
</element-details>