Filter box component: Inventory

HTML
View
Context
Assets
Info
Notes


    
      

        
        <section class="c-filter-box c-filter-box--inventory o-grid">
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <span class="o-label u-d-block">Total items</span>
        <strong class="c-inventory__total-items">556,655</strong>
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label class="o-label">Type</label>
        <div class="c-inventory__type-toggle o-grid o-grid--auto--sm@small o-grid--fix--3@medium">
            <!-- outline button starts -->
            <button class="c-btn is-active u-p-0 c-btn--outline">Product</button>
            <!-- outline button ends -->
            <!-- outline button starts -->
            <button class="c-btn u-p-0 c-btn--outline">Location</button>
            <!-- outline button ends -->
            <!-- outline button starts -->
            <button class="c-btn u-p-0 c-btn--outline">Rack</button>
            <!-- outline button ends -->
        </div>
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="product-name" class="o-label">Product name</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="product-name" 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="facility" class="o-label">Facility</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="facility" placeholder="Add facility names" value="">
        <!-- Input ends -->
    </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="Add company names" value="">
        <!-- Input ends -->
    </div>
    <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
        <label for="condition" class="o-label">Condition</label>
        <!-- Input starts -->
        <input type="text" class="c-input" id="condition" placeholder="New, Yellow band, Inspected #1" 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="A-1, A-11, T-15" 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="o-grid__span-col--6@small o-grid__span-col--4@medium 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="u-d-flex">
        <button class="c-btn c-btn--link c-btn--link--no-underline c-btn--xs u-p-0 u-mr-auto">Reset fields</button>
        <button class="c-btn c-btn--link c-btn--link--no-underline c-btn--xs 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="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 c-filter-box--inventory o-grid{{#if extraClasses}} {{extraClasses}}{{/if}}">
  <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
    <span class="o-label u-d-block">Total items</span>
    <strong class="c-inventory__total-items">556,655</strong>
  </div>
  <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
    <label class="o-label">Type</label>
    <div class="c-inventory__type-toggle o-grid o-grid--auto--sm@small o-grid--fix--3@medium">
      {{> '@buttons--outline' mod="outline" state="is-active u-p-0" btnText="Product"}}
      {{> '@buttons--outline' mod="outline" state="u-p-0" btnText="Location"}}
      {{> '@buttons--outline' mod="outline" state="u-p-0" btnText="Rack"}}
    </div>
  </div>
  <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
    <label for="product-name" class="o-label">Product name</label>
    {{> '@input' inputID="product-name" placeholder="Tubing, Rod, Coupling"}}
  </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="Add facility names"}}
  </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="Add company names"}}
  </div>
  <div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
    <label for="condition" class="o-label">Condition</label>
    {{> '@input' inputID="condition" placeholder="New, Yellow band, Inspected #1"}}
  </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="A-1, A-11, T-15"}}
  </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>
  <div class="o-grid__span-col--6@small o-grid__span-col--4@medium 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="u-d-flex">
    <button class="c-btn c-btn--link c-btn--link--no-underline c-btn--xs u-p-0 u-mr-auto">Reset fields</button>
    <button class="c-btn c-btn--link c-btn--link--no-underline c-btn--xs 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="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--inventory
Variants (2): Default , Inventory
Preview:
- With layout
- Component only
Filesystem Path: components/_code-components/filter-box/filter-box--inventory.hbs
References (2): @buttons--outline, @input
Referenced by (1): @inventory

There are no notes for this item.