Tooling Components

Tooling for internal or business tools.

Demo landing page
Demo layout for tooling dashboard

Tooling header

Document header and sticky sub-header for tooling portals. The sticky header will scroll up with the document's normal flow, subsequent scroll-ups will make the sticky header reappear to the user, much like address bars on mobile devices.

See the demo layout for an implementation of the ToolHeader, ToolHeaderSticky and 'ToolHeaderSearch' components.

Tooling header notification

Full width banner that can be used to display notifications.

See the demo notification for an implementation of the ToolHeader-notification component.

Select Autocomplete

A text input created on the fly from a select menu rendered by the server that allows autocomplete functionality based on the options supplied to the select

<div class="Input Icons-search SelectAutocomplete">
  <div class="Input-field">
    <input class="Input-input" type="text" name="example_select" id="example_select" value="" placeholder="">
    <label class="Input-label" for="example_select"></label>
    <div class="Input-border"></div>
  </div>
  <select class="SelectAutocomplete-select" name="example_select" id="example_select">
    <option value="">Select an option</option>
    <option value="archibald.smythe-cunningfox@zerodsposit.com">Archibald Smythe-Cunningfox</option>
    <option value="bo.didley@zerodsposit.com">Bo Didley</option>
    <option value="fred.wheeler@zerodsposit.com">Fred Wheeler</option>
    <option value="gabes.mak@zerodsposit.com">Gabes Mak</option>
    <option value="gabes.mak2@zerodsposit.com">Gabes Mak 2</option>
    <option value="jim.jamson@zerodsposit.com">Jim Jamson</option>
    <option value="pete.graham@zerodsposit.com">Pete X Graham</option>
    <option value="zachary.scott@zerodsposit.com">Zachary Scott</option>
  </select>
  <div class="Input-helpers" data-error="" data-hint=""></div>
</div>

Filter Group

Grouped buttons. These are actually input[type=radio] under the surface.

Markup

<div class="FilterGroup js-filter-group-example">
<div class="FilterGroup-item">
  <input class="FilterGroup-input" type="radio" name="filterGroupName" value="1" id="filterGroupName_1">
  <label class="FilterGroup-label" for="filterGroupName_1">Option 1</label>
</div>
<div class="FilterGroup-item">
  <input class="FilterGroup-input" type="radio" name="filterGroupName" value="2" id="filterGroupName_2">
  <label class="FilterGroup-label" for="filterGroupName_2">Option 2</label>
</div>
</div>

Javascript for event handlers

$('.js-filter-group-example').on('filterGroup:change', (e, data) => {
console.log(e, data)
})

The event will return both a generic event and a data object which will provide the currentTarget element and the value of the chosen item.

{
currentTarget: <HTMLElement>,
value: ;
}

Page Navigation

Navigate paginated lists.

Example

<div class="PageNavigation">
  <div class="PageNavigation-contents">
    <a href="#" class="PageNavigation-dir Icons-prev-step is-disabled"></a>
    <div class="PageNavigation-pages">
      <a href="#" class="PageNavigation-page is-current">1</a>
      <a href="#" class="PageNavigation-page">2</a>
      <a href="#" class="PageNavigation-page">3</a>
      <a href="#" class="PageNavigation-page">4</a>
      <a href="#" class="PageNavigation-page">5</a>
      <a href="#" class="PageNavigation-page">6</a>
      <a href="#" class="PageNavigation-page">7</a>
      <a href="#" class="PageNavigation-page">8</a>
      <a href="#" class="PageNavigation-page">9</a>
      <a href="#" class="PageNavigation-page">10</a>
      <a href="#" class="PageNavigation-page">11</a>
      <a href="#" class="PageNavigation-page">12</a>
      <a href="#" class="PageNavigation-page">13</a>
      <a href="#" class="PageNavigation-page">14</a>
      <a href="#" class="PageNavigation-page">15</a>
      <a href="#" class="PageNavigation-page">16</a>
      <a href="#" class="PageNavigation-page">17</a>
      <a href="#" class="PageNavigation-page">18</a>
      <a href="#" class="PageNavigation-page">19</a>
      <a href="#" class="PageNavigation-page">20</a>
    </div>
    <a href="#" class="PageNavigation-dir Icons-next-step"></a>
  </div>  
</div>

Tab Group

Controlled tab groups that will dispatch a jQuery event named tabGroup:change when a tab is selected.

If a child element .TabGroup-contents exists the TabGroup will switch contents for each each tab when clicked. This is determined by the id of the tab content and each tab should have a respective data-target attribute. See example for more detail.

Markup

<div class="TabGroup js-tab-group-example">
<div class="TabGroup-tabs">
  <div data-target="tab_example_1" class="TabGroup-tab is-current">Tab 1</div>
  <div data-target="tab_example_2" class="TabGroup-tab Icons-calendar--after">Another tab</div>
  <div data-target="tab_example_3" class="TabGroup-tab Icons-search">A third tab with a long label</div>
  <div data-target="tab_example_4" class="TabGroup-tab">Fourth</div>
</div>
<div class="TabGroup-contents">
  <div class="TabGroup-content is-current" id="tab_example_1">
    <h4>Tab 1</h4>
    <p>90's mustache cray shaman skateboard. Listicle sriracha gochujang, gentrify cold-pressed organic food truck celiac quinoa craft beer wolf keffiyeh ennui tilde pabst. Quinoa umami actually selfies aesthetic post-ironic iceland meggings try-hard la croix.</p>
  </div>
  <div class="TabGroup-content" id="tab_example_2">
    <h4>Tab 2</h4>
    <p>Kitsch master cleanse drinking vinegar actually humblebrag authentic pinterest letterpress squid mustache hashtag. Fixie raw denim jean shorts, bicycle rights cold-pressed cloud bread four dollar toast kale chips chillwave brooklyn church-key flexitarian la croix. Lomo umami neutra chicharrones intelligentsia fam dreamcatcher humblebrag chia. Schlitz vape semiotics wolf mustache typewriter, bushwick forage.</p>
  </div>
  <div class="TabGroup-content" id="tab_example_3">
    <h4>Tab 3</h4>
    <p>Cred lyft asymmetrical hoodie, pitchfork hot chicken copper mug coloring book sustainable. Crucifix bitters gluten-free raclette trust fund, pour-over bushwick yr cornhole poke semiotics gochujang umami snackwave.</p>
  </div>
  <div class="TabGroup-content" id="tab_example_4">
    <h4>Tab 4</h4>
    <p>Normcore yr farm-to-table try-hard. Kale chips kinfolk beard bushwick pitchfork PBR&amp;B subway tile chillwave tote bag viral heirloom. Photo booth shoreditch godard, 90's lomo authentic la croix pug poke microdosing health goth skateboard scenester.</p>
  </div>
</div>
</div>

Javascript for event handlers

$('.js-tab-group-example').on('tabGroup:change', (e, data) => {
console.log(e, data)
})

The event will return both a generic event and a data object which will provide the index of the selected tab and a reference to the current tab element selected.

{
index: 0,
currentTab: <HTMLElement>
}