Filter box component

HTML
View
Context
Assets
Info
Notes


    
      

        
        <section class="c-filter-box o-grid">
    <p class="c-filter-box__description o-grid__span-col--8@medium">Please specify the required date range wanted, optionally you can also enter the attributes in the fields you need to filter to show up on your report.</p>
    <div class="o-grid__span-col--4@medium o-grid o-grid--auto--sm">
        <div class="o-stack--xs">
            <label for="start-date" class="o-label">Start date</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="start-date" placeholder="April 15, 2019" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="end-date" class="o-label">End date</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="end-date" placeholder="May 15, 2019" value="">
            <!-- Input ends -->
        </div>
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="company" class="o-label">Company</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="company" placeholder="Type company name" value="">
        <!-- Input ends -->
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="facility" class="o-label">Facility</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="facility" placeholder="Type facility name" value="">
        <!-- Input ends -->
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="well" class="o-label">Well</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="well" placeholder="Type well name" value="">
        <!-- Input ends -->
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="product" class="o-label">Product</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="product" placeholder="Tubing, Rod, Coupling" value="">
        <!-- Input ends -->
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="rack" class="o-label">Rack</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="rack" placeholder="Type rack number" value="">
        <!-- Input ends -->
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="size" class="o-label">Size</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="size" placeholder="2-3/8”, 2-7/8”, 3/4”, 7/8”" value="">
        <!-- Input ends -->
    </div>
    <div class="u-d-flex">
        <button class="c-btn c-btn--primary c-btn--xs u-mr-auto">Update Filters</button>
        <button class="c-btn c-btn--link c-btn--link--no-underline c-btn--xs u-ml-auto u-p-0 u-text-right js-extra-filters">Show more item filters</button>
    </div>
    <section class="o-grid o-grid--auto--lg o-grid--fix--4@large c-filter-box__extra-filters">
        <div class="o-stack--xs">
            <label for="grade" class="o-label">Grade</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="grade" placeholder="J-55, L-80, D, KD, HS" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="APIgrade" class="o-label">API Grade</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="APIgrade" placeholder="Type API Grade" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="coating" class="o-label">Coating</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="coating" placeholder="Type coating" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="mill" class="o-label">Mill</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="mill" placeholder="Type mill" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="range" class="o-label">Range</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="range" placeholder="Type Range" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="seam" class="o-label">Seam</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="seam" placeholder="Type seam" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="connection" class="o-label">Connection</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="connection" placeholder="Type connection" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="couplingMft" class="o-label">Coupling manufacturer</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="couplingMft" placeholder="Type coupling manufacturer" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="guideMft" class="o-label">Guide manufacturer</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="guideMft" placeholder="Type guide manufacturer" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="rodMft" class="o-label">Rod manufacturer</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="rodMft" placeholder="Type rod manufacturer" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="thread" class="o-label">Thread</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="thread" placeholder="Type thread" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="guide" class="o-label">Guide</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="guide" placeholder="Type guide" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="guidePer" class="o-label">Guide Per</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="guidePer" placeholder="Type guide per" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="guidePolymer" class="o-label">Guide polymer</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="guidePolymer" placeholder="Type guide polymer" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="guideSize" class="o-label">Guide size</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="guideSize" placeholder="Type guide size" value="">
            <!-- Input ends -->
        </div>
        <div class="o-stack--xs">
            <label for="guideType" class="o-label">Guide type</label>
            <!-- Input starts -->
            <input type="text" class="c-input" id="guideType" placeholder="Type guide type" value="">
            <!-- Input ends -->
        </div>
    </section>
</section>


        <section class="c-filter-box o-grid">
  <p class="c-filter-box__description o-grid__span-col--8@medium">{{filterDescription}}</p>
  <div class="o-grid__span-col--4@medium o-grid o-grid--auto--sm">
    <div class="o-stack--xs">
      <label for="start-date" class="o-label">Start date</label>
      {{> '@input' inputID="start-date" placeholder="April 15, 2019"}}
    </div>
    <div class="o-stack--xs">
      <label for="end-date" class="o-label">End date</label>
      {{> '@input' inputID="end-date" placeholder="May 15, 2019"}}
    </div>
  </div>
  <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
    <label for="company" class="o-label">Company</label>
    {{> '@input' inputID="company" placeholder="Type company name"}}
  </div>
  <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
    <label for="facility" class="o-label">Facility</label>
    {{> '@input' inputID="facility" placeholder="Type facility name"}}
  </div>
  <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
    <label for="well" class="o-label">Well</label>
    {{> '@input' inputID="well" placeholder="Type well name"}}
  </div>
  <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
    <label for="product" class="o-label">Product</label>
    {{> '@input' inputID="product" placeholder="Tubing, Rod, Coupling"}}
  </div>
  <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
    <label for="rack" class="o-label">Rack</label>
    {{> '@input' inputID="rack" placeholder="Type rack number"}}
  </div>
  <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
    <label for="size" class="o-label">Size</label>
    {{> '@input' inputID="size" placeholder="2-3/8”, 2-7/8”, 3/4”, 7/8”"}}
  </div>
  {{#if updateBtn}}
    <div class="u-d-flex">
      <button class="c-btn c-btn--primary c-btn--xs u-mr-auto">Update Filters</button>
      <button class="c-btn c-btn--link c-btn--link--no-underline c-btn--xs u-ml-auto u-p-0 u-text-right js-extra-filters">Show more item filters</button>
    </div>
  {{else}}
  <button class="c-btn c-btn--link c-btn--link--no-underline c-btn--xs u-ml-auto u-p-0 u-text-right js-extra-filters">Show more item filters</button>
  {{/if}}
  <section class="o-grid o-grid--auto--lg o-grid--fix--4@large c-filter-box__extra-filters">
    <div class="o-stack--xs">
      <label for="grade" class="o-label">Grade</label>
      {{> '@input' inputID="grade" placeholder="J-55, L-80, D, KD, HS"}}
    </div>
    <div class="o-stack--xs">
      <label for="APIgrade" class="o-label">API Grade</label>
      {{> '@input' inputID="APIgrade" placeholder="Type API Grade"}}
    </div>
    <div class="o-stack--xs">
      <label for="coating" class="o-label">Coating</label>
      {{> '@input' inputID="coating" placeholder="Type coating"}}
    </div>
    <div class="o-stack--xs">
      <label for="mill" class="o-label">Mill</label>
      {{> '@input' inputID="mill" placeholder="Type mill"}}
    </div>
    <div class="o-stack--xs">
      <label for="range" class="o-label">Range</label>
      {{> '@input' inputID="range" placeholder="Type Range"}}
    </div>
    <div class="o-stack--xs">
      <label for="seam" class="o-label">Seam</label>
      {{> '@input' inputID="seam" placeholder="Type seam"}}
    </div>
    <div class="o-stack--xs">
      <label for="connection" class="o-label">Connection</label>
      {{> '@input' inputID="connection" placeholder="Type connection"}}
    </div>
    <div class="o-stack--xs">
      <label for="couplingMft" class="o-label">Coupling manufacturer</label>
      {{> '@input' inputID="couplingMft" placeholder="Type coupling manufacturer"}}
    </div>
    <div class="o-stack--xs">
      <label for="guideMft" class="o-label">Guide manufacturer</label>
      {{> '@input' inputID="guideMft" placeholder="Type guide manufacturer"}}
    </div>
    <div class="o-stack--xs">
      <label for="rodMft" class="o-label">Rod manufacturer</label>
      {{> '@input' inputID="rodMft" placeholder="Type rod manufacturer"}}
    </div>
    <div class="o-stack--xs">
      <label for="thread" class="o-label">Thread</label>
      {{> '@input' inputID="thread" placeholder="Type thread"}}
    </div>
    <div class="o-stack--xs">
      <label for="guide" class="o-label">Guide</label>
      {{> '@input' inputID="guide" placeholder="Type guide"}}
    </div>
    <div class="o-stack--xs">
      <label for="guidePer" class="o-label">Guide Per</label>
      {{> '@input' inputID="guidePer" placeholder="Type guide per"}}
    </div>
    <div class="o-stack--xs">
      <label for="guidePolymer" class="o-label">Guide polymer</label>
      {{> '@input' inputID="guidePolymer" placeholder="Type guide polymer"}}
    </div>
    <div class="o-stack--xs">
      <label for="guideSize" class="o-label">Guide size</label>
      {{> '@input' inputID="guideSize" placeholder="Type guide size"}}
    </div>
    <div class="o-stack--xs">
      <label for="guideType" class="o-label">Guide type</label>
      {{> '@input' inputID="guideType" placeholder="Type guide type"}}
    </div>
  </section>
</section>


        
            
            {
  "filterDescription": "Please specify the required date range wanted, optionally you can also enter the attributes in the fields you need to filter to show up on your report.",
  "updateBtn": "yes"
}

File:

Content:


                                .c-filter-box {
  padding: $space-lg $space-md $space-unit;
  border: rem(1.5) solid $color-grey-400;
  border-radius: $global-radius;
  //background: $color-gradient--md;
}

  .c-filter-box__description {
    margin-top: $space-sm;
    color: $color-grey-800;
    line-height: 1.5;
  }

  .c-filter-box__extra-filters {
    display: none;
    width: calc(#{$space-md} * 2 + 100%);
    max-width: calc(#{$space-md} * 2 + 100%);
    margin: 0 (-$space-md) (-$space-unit);
    padding: $space-md $space-md $space-lg;
    background-color: $color-grey-100;

    .is-open + &,
    &.is-open {
      display: grid;
    }
  }

URL: /components/raw/filter-box/_filter-box.scss
Filesystem Path: components/_code-components/filter-box/_filter-box.scss
Size: 620 Bytes

Content:


                                var parentNav = document.querySelectorAll('.js-extra-filters');
var extraFilters = document.querySelectorAll('.c-filter-box__extra-filters');

for (var i = 0, l = parentNav.length; i < l; i++) {
  var original = parentNav[i].innerHTML;

  parentNav[i].onclick = function() {
    extraFilters[0].classList.toggle('is-open');
    this.classList.toggle('is-open');
    if(this.classList.contains('is-open')) {
		this.innerHTML = "Hide extra filters";
  	} else {
      this.innerHTML = original;
  	};
    return false;
  }
}

URL: /components/raw/filter-box/filter-box.js
Filesystem Path: components/_code-components/filter-box/filter-box.js
Size: 523 Bytes

Handle: @filter-box
Variants (2): Default , Inventory
Preview:
- With layout
- Component only
Filesystem Path: components/_code-components/filter-box/filter-box.hbs
References (1): @input
Referenced by (4): @collapse-container, @reporting-anchor-opt, @reporting-home, @inventory

There are no notes for this item.