title: Adding 'controls' to Fabricator 'UI Toolkit'
body: <p>I'm building a style guide using <a href="http://fbrctr.github.io/" rel="nofollow noreferrer">Fabricator</a>, and <a href="http://fbrctr.github.io/getting-started/working-with-fabricator.html#controls" rel="nofollow noreferrer">the docs</a> seem to indicate that I should be able to add 'controls' to let the users toggle visibility on various sections.</p>
  
  <p>By default, Fabricator builds come with 3 main toggles: <code>labels</code>, <code>notes</code>, and <code>code</code>. I want to add a 4th toggle that I'm calling <code>styles</code>.</p>
  
  <p>The relevant sections of the <code>fabricator.js</code> file look like this:</p>
  
  <pre><code>/**
   * Default options
   * @type {Object}
   */
  fabricator.options = {
    toggles: {
      labels: true,
      notes: true,
      code: false,
      styles: true,
    },
    menu: true,
    mq: '(min-width: 60em)',
  };
  </code></pre>
  
  <p>&amp;</p>
  
  <pre><code>/**
   * Handler for preview and code toggles
   * @return {Object} fabricator
   */
  fabricator.allItemsToggles = () =&gt; {
  
    const itemCache = {
      labels: document.querySelectorAll('[data-f-toggle="labels"]'),
      notes: document.querySelectorAll('[data-f-toggle="notes"]'),
      code: document.querySelectorAll('[data-f-toggle="code"]'),
      styles: document.querySelectorAll('[data-f-toggle="styles"]'),
    };
  }
  </code></pre>
  
  <p>As you can see, I've added my <code>styles</code> toggle to the <code>fabricator.options</code> object and to the itemCache object matching the formatting to the existing elements.</p>
  
  <p>I've also added new <code>styles</code> sections to the controls and content partials: </p>
  
  <p><code>f-item-controls.html</code></p>
  
  <pre><code>{{!-- this is part of the default build --}}
  {{#if notes}}
  &lt;span class="f-control f-icon" data-f-toggle-control="notes" title="Toggle Notes"&gt;
      &lt;svg&gt;
          &lt;use xlink:href="#f-icon-notes" /&gt;
      &lt;/svg&gt;
  &lt;/span&gt;
  {{/if}}
  
  {{!-- this is my matching addition --}}
  {{#if styles}}
  &lt;span class="f-control f-icon" data-f-toggle-control="styles" title="Toggle Styles"&gt;
      &lt;svg&gt;
          &lt;use xlink:href="#f-icon-styles" /&gt;
      &lt;/svg&gt;
  &lt;/span&gt;
  {{/if}}
  </code></pre>
  
  <p><code>f-item-content.html</code></p>
  
  <pre><code>{{!-- this is part of the default build --}}
  {{#if notes}}
  &lt;div class="f-item-notes" data-f-toggle="notes"&gt;
      {{{notes}}}
  &lt;/div&gt;
  {{/if}}
  
  {{!-- this is my matching addition --}}    
  {{#if styles}}
  &lt;div class="f-item-styles" data-f-toggle="styles"&gt;
      {{{styles}}}
  &lt;/div&gt;
  {{/if}}
  </code></pre>
  
  <p>Finally, just so I have content to work with, I added some 'front-matter' data that my button component could render:</p>
  
  <pre><code>---
  notes: |
    These are notes written in `markdown`
  styles: |
    These are styles written in `markdown`
  ---
  </code></pre>
  
  <p>The <code>notes</code> (part of the default build) render and toggle correctly; the <code>styles</code> don't render at all. If I remove the {{#if}} conditions around the <code>styles</code> blocks, then the <code>control</code> icon and corresponding <code>content</code> <code>&lt;div&gt;</code> are generated, but the actual <code>style</code> text is still missing.</p>
  
  <p>I've reached out to Luke Askew (the creator of Fabricator) asking for clarity, but I haven't heard back from him yet. In the meantime, I'm hoping someone in the SO community might be able to help me understand how this works so that I can continue my work.</p>