<div class="table table--store-hours collapsible-table" data-collapsible="1" data-week-start-day="1">
    <table>
        <caption>
            <button class="table__toggle-control js-table-toggle-control">
      Store Hours
      <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

      <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

      </button>
        </caption>
        <colgroup>
            <col class="colgroup colgroup--day">
            <col class="colgroup colgroup--hours">
        </colgroup>
        <thead>
            <tr>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Monday</th>
                <td>09:00am - 05:00pm</td>
            </tr>
            <tr>
                <th>Tuesday</th>
                <td>09:00am - 05:00pm</td>
            </tr>
            <tr>
                <th>Wednesday</th>
                <td>09:00am - 05:00pm</td>
            </tr>
            <tr>
                <th>Thursday</th>
                <td>09:00am - 05:00pm</td>
            </tr>
            <tr>
                <th>Friday</th>
                <td>09:00am - 05:00pm</td>
            </tr>
            <tr>
                <th>Saturday</th>
                <td>09:00am - 05:00pm</td>
            </tr>
            <tr>
                <th>Sunday</th>
                <td>Closed</td>
            </tr>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</div>
<div class="table table--{{_self.name}}{{#each tableClasses}} {{this}}{{/each}}"{{#if collapsible}} data-collapsible="1"{{/if}}{{#each tableAttributes}} {{this.name}}="{{this.value}}"{{/each}}>
  <table>
    {{#if caption}}
    <caption{{#each captionAttributes}} {{this.name}}="{{this.value}}"{{/each}}>
      {{#if collapsible}}<button class="table__toggle-control js-table-toggle-control">{{/if}}
      {{caption}}
      {{#if collapsible}}
      {{render '@icons--arrow-down'}}
      {{render '@icons--arrow-up'}}
      </button>{{/if}}
    </caption>
    {{/if}}
    {{#if colgroup}}
    <colgroup>
      {{#each colgroup}}
      <col{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>
      {{/each}}
    </colgroup>
    {{/if}}
    {{#if thead}}
    <thead{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>
      <tr>
        {{#each thead.cells}}
        <{{../thead.cellType}}{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>{{value}}</{{../thead.cellType}}>
        {{/each}}
      </tr>
    </thead>
    {{/if}}
    <tbody>
      {{#each tbody.rows}}
      <tr>
        {{#each cells}}
        <{{cellType}}{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>{{value}}</{{cellType}}>
        {{/each}}
      </tr>
      {{/each}}
    </tbody>
    {{#if tfoot}}
    <tfoot{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>
      {{#each tfoot.cells}}
      <{{../tfoot.cellType}}{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>{{value}}</{{../tfoot.cellType}}>
      {{/each}}
    </tfoot>
    {{/if}}
  </table>
</div>
{
  "collapsible": true,
  "tableClasses": [
    "collapsible-table"
  ],
  "tableAttributes": [
    {
      "name": "data-week-start-day",
      "value": "1"
    }
  ],
  "caption": "Store Hours",
  "captionAttributes": [],
  "colgroup": [
    {
      "attributes": [
        {
          "name": "class",
          "value": "colgroup colgroup--day"
        }
      ]
    },
    {
      "attributes": [
        {
          "name": "class",
          "value": "colgroup colgroup--hours"
        }
      ]
    }
  ],
  "thead": {},
  "tbody": {
    "rows": [
      {
        "attributes": [],
        "cells": [
          {
            "value": "Monday",
            "cellType": "th"
          },
          {
            "value": "09:00am - 05:00pm",
            "cellType": "td"
          }
        ]
      },
      {
        "cells": [
          {
            "value": "Tuesday",
            "cellType": "th"
          },
          {
            "value": "09:00am - 05:00pm",
            "cellType": "td"
          }
        ]
      },
      {
        "cells": [
          {
            "value": "Wednesday",
            "cellType": "th"
          },
          {
            "value": "09:00am - 05:00pm",
            "cellType": "td"
          }
        ]
      },
      {
        "cells": [
          {
            "value": "Thursday",
            "cellType": "th"
          },
          {
            "value": "09:00am - 05:00pm",
            "cellType": "td"
          }
        ]
      },
      {
        "cells": [
          {
            "value": "Friday",
            "cellType": "th"
          },
          {
            "value": "09:00am - 05:00pm",
            "cellType": "td"
          }
        ]
      },
      {
        "cells": [
          {
            "value": "Saturday",
            "cellType": "th"
          },
          {
            "value": "09:00am - 05:00pm",
            "cellType": "td"
          }
        ]
      },
      {
        "cells": [
          {
            "value": "Sunday",
            "cellType": "th"
          },
          {
            "value": "Closed",
            "cellType": "td"
          }
        ]
      }
    ]
  },
  "tfoot": {}
}
  • Content:
    (function (window) {
      'use strict';
    
      const tableSelector = '.table';
      const tables = document.querySelectorAll(tableSelector);
      const collapsibleTableClass = 'collapsible-table';
      const collapsibleTableActiveClass = 'js-collapsible-table--active';
      const collapsibleTableToggleSelector = '.js-table-toggle-control';
      const storeHoursTableClass = 'table--store-hours';
      const storeHoursTodayClass = 'js-store-hours-table--today';
      const today = new Date;
      const weekday = today.getDay();
    
      function toggleCollapsibleTable(e) {
        e.target.closest(tableSelector).classList.toggle(collapsibleTableActiveClass);
        e.preventDefault();
      }
    
      function init() {
        if (tables) {
          for (let i = 0; i < tables.length; i++) {
            const table = tables[i];
    
            // Handle collapsible tables.
            if (table.classList.contains(collapsibleTableClass)) {
              const toggleControl = table.querySelector(collapsibleTableToggleSelector);
              toggleControl.addEventListener('click', toggleCollapsibleTable);
            }
    
            // Handle store hours tables.
            if (table.classList.contains(storeHoursTableClass)) {
              const weekStartDay = table.getAttribute('data-week-start-day');
              // Javascript considers weeks to start on Sunday, so Sunday == 0. Our
              // tables may NOT start on Sunday, so we need to account for that (but
              // we assume that if they don't start on Sunday, they start on Monday!)
              //
              // Note that we're also compensating here for the fact that the weekday
              // value is zero-based while the nth-child selector we use to mark the
              // current day's row is one-based.
              const todaysHoursRowIndex = (weekStartDay > 0) ? weekday : weekday + 1;
              const todaysHoursRow = table.querySelector('tr:nth-child(' + todaysHoursRowIndex + ')');
    
              todaysHoursRow.classList.add(storeHoursTodayClass);
            }
          }
        }
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/table/table.js
  • Filesystem Path: src/components/01-elements/table/table.js
  • Size: 2 KB
  • Content:
    .table {
      max-width: 300px;
      font-size: 1.4rem;
      line-height: 2.0rem;
      text-align: left;
      border-collapse: collapse;
    
      caption {
        width: 100%;
        margin-bottom: $gutter-width / 2;
        font-weight: bold;
        text-align: left;
      }
    
      th,
      td {
        padding: 0;
        font-weight: $font-weight-normal;
        text-align: left;
      }
    
      th {
        padding: 0;
      }
    }
    
    .table[data-collapsible='1'] {
      thead,
      tfoot,
      tr {
        display: none;
      }
    
      &.table--store-hours {
        tr.js-store-hours-table--today {
          display: table-row;
        }
      }
    }
    
    .js-collapsible-table--active[data-collapsible] {
      thead {
        display: table-header-group;
      }
    
      tfoot {
        display: table-footer-group;
      }
    
      tr {
        display: table-row;
      }
    
      .icon--arrow-up {
        display: block;
      }
    
      .icon--arrow-down {
        display: none;
      }
    }
    
    .table__toggle-control {
      width: 100%;
      margin: 0;
      padding: 0;
      border-style: none;
      background: transparent;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      text-align: inherit;
      cursor: pointer;
    
      .icon {
        width: 6px;
        padding: 8px 0 7px;
        float: right;
      }
    
      .icon--arrow-up {
        display: none;
      }
    }
    
    .table--store-hours {
      th {
        padding-right: 5px;
      }
    }
    
  • URL: /components/raw/table/table.scss
  • Filesystem Path: src/components/01-elements/table/table.scss
  • Size: 1.2 KB

There are no notes for this item.