{
  "file": "addon/components/navigation-api/section.js",
  "content": "<pre class=\"language-javascript line-numbers\"><code class=\"language-javascript}\"><span aria-hidden=\"true\" role=\"presentation\" class=\"line-numbers-rows\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span><span class=\"token keyword\">import</span> Component <span class=\"token keyword\">from</span> <span class=\"token string\">'ember-component'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> hbs <span class=\"token keyword\">from</span> <span class=\"token string\">'htmlbars-inline-precompile'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\" spellcheck=\"true\">/**\n * Component creates a section for the {{c-l class='NavigationAPI'}}. Accepts\n * a {{c-l 'title'}} and an {{c-l 'items'}} array, both optional.\n *\n * Component can be used in block form if just the wrapping section markup is\n * needed with a header.\n * @class NavigationAPI.Section\n * @constructor\n * @extends Ember.Component\n */</span>\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> Component<span class=\"token punctuation\">.</span><span class=\"token function\">extend</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n\n  <span class=\"token comment\" spellcheck=\"true\">// Passed Properties</span>\n  <span class=\"token comment\" spellcheck=\"true\">// ---------------------------------------------------------------------------</span>\n  <span class=\"token comment\" spellcheck=\"true\">/**\n   * Array of documentation items to create links for. Each item should be of\n   * form:\n   * ```json\n   * {\n   *   name: 'Item name - used as text for anchor',\n   *   type: 'Either classes or modules'\n   * }\n   * ```\n   * @property items\n   * @type {Array}\n   * @passed NavigationAPI\n   * @required\n   */</span>\n  items<span class=\"token punctuation\">:</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\" spellcheck=\"true\">/**\n   * Section header text content\n   * @property title\n   * @type {string}\n   * @passed\n   * @optional\n   * @default ''\n   */</span>\n  title<span class=\"token punctuation\">:</span> <span class=\"token string\">''</span><span class=\"token punctuation\">,</span>\n\n  <span class=\"token comment\" spellcheck=\"true\">// Properties</span>\n  <span class=\"token comment\" spellcheck=\"true\">// ---------------------------------------------------------------------------</span>\n  <span class=\"token comment\" spellcheck=\"true\">/**\n   * @property classNames\n   * @type {Array}\n   * @default ['nav-section']\n   */</span>\n  classNames<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'nav-section'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\" spellcheck=\"true\">/**\n   * @property tagName\n   * @type {string}\n   * @default 'section'\n   */</span>\n  tagName<span class=\"token punctuation\">:</span> <span class=\"token string\">'section'</span><span class=\"token punctuation\">,</span>\n\n  <span class=\"token comment\" spellcheck=\"true\">// Layout</span>\n  <span class=\"token comment\" spellcheck=\"true\">// ---------------------------------------------------------------------------</span>\n  layout<span class=\"token punctuation\">:</span> hbs<span class=\"token template-string\"><span class=\"token string\">`\n    {{#if title}}\n      &lt;h4 class='section-header fh-element'>{{title}}&lt;/h4>\n    {{/if}}\n    {{! Optional array of links }}\n    {{#each items as |item|}}\n      {{link-to\n        item.name\n        (concat 'api.' item.type)\n        item.name\n        classNames='item-link fh-element'}}\n    {{/each}}\n    {{! You can use a section in block form if you just need wrapping markup }}\n    {{yield}}\n  `</span></span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>"
}