@esri/calcite-ui-icons 3.28.9 → 3.29.1-next.0

package/docs/app.js

@@ -1,118 +0,0 @@
-(function () {
-  var icons = {};
-  var $icons = [];
-
-  fetch('./icons.json')
-    .then(function (response) {
-      return response.json();
-    })
-    .then(function (payload) {
-      icons = payload.icons;
-      document.querySelector('.js-version').innerHTML = payload.version;
-      document.querySelector('.js-search').addEventListener("input", searchIcons);
-      calcite.bus.on("modal:close", removeHash);
-      startup();
-    });
-
-  function startup () {
-    document.querySelector('.js-loader').classList.add('hide');
-    var $iconContainer = document.querySelector('.js-icons');
-
-    Object.keys(icons)
-      .map(function (key) {
-        return {name: key, icon: icons[key]}
-      })
-      .forEach(function (detail) {
-        var $btn = document.createElement('button');
-        $btn.classList = 'js-modal-toggle block padding-leader-2 padding-trailer-2 trailer-1 js-icon-select icon-select btn btn-transparent';
-        $btn.setAttribute('data-icon', detail.name);
-        $btn.setAttribute('data-modal', 'iconDetail');
-        $btn.setAttribute('aria-label', 'View details of icon: ' + detail.name);
-        $btn.appendChild(getSVG(detail.icon['32'], 32));
-        var $name = document.createElement('span');
-        $name.innerHTML = detail.name;
-        $name.classList.add('icon-select--name');
-        $btn.appendChild($name);
-        $iconContainer.appendChild($btn);
-        $btn.addEventListener("click", showDetail);
-        $icons.push($btn);
-      });
-    calcite.init();
-
-    if (window.location.hash.length > 1) {
-      var active = window.location.hash.substring(1);
-      if (icons[active]) {
-        $iconContainer.querySelector('.js-icon-select[data-icon="' + active + '"]').click();
-      }
-    }
-  }
-
-  function searchIcons (e) {
-    $icons.forEach(function ($btn) {
-      var name = $btn.getAttribute('data-icon');
-      var icon = icons[name];
-      var iconText = name + icon.alias.join('');
-      var terms = e.target.value.toLowerCase().split(' ');
-      var matches = terms.reduce((acc, term) => acc && iconText.toLowerCase().includes(term), true);
-      if (matches) {
-        $btn.classList.remove('hide');
-      } else {
-        $btn.classList.add('hide');
-      }
-    });
-  }
-
-  function showDetail (e) {
-    var key = e.target.getAttribute('data-icon');
-    var icon = icons[key];
-    var filled = key.substring(key.length - 2);
-    var isFilled = filled === "-f";
-    var baseName =  isFilled ? key.substring(0, key.length - 2) : key;
-    var baseURL = 'https://raw.githubusercontent.com/Esri/calcite-ui-icons/master/icons/' + baseName + '-';
-    var suffix = '.svg';
-    var tags = icon.alias.map(function (alias) {
-      return '<span class="label inline-block margin-right-quarter trailer-quarter">' + alias + '</span>';
-    }).join('');
-
-    window.location.hash = key;
-    document.querySelector('.js-detail-name').innerHTML = key;
-    document.querySelector('.js-detail-aliases').innerHTML = (tags && tags) || '---';
-    document.querySelector('.js-detail-category').innerHTML = (icon.category && icon.category) || '---';
-    document.querySelector('.js-detail-release').innerHTML = (icon.release && icon.release) || '---';
-
-    [16, 24, 32].forEach(function (size) {
-      document.querySelector('.js-link-' + size).href = baseURL + size + (isFilled ? filled : "") + suffix;
-      var iconDetail = document.querySelector('.js-detail-' + size);
-      iconDetail.innerHTML = '';
-      iconDetail.appendChild(getSVG(icon[size], size));
-    });
-  }
-
-  function getSVG (paths, size) {
-    var $svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    $svg.setAttribute('width', size);
-    $svg.setAttribute('height', size);
-    if (typeof paths === 'string') {
-      paths = [paths];
-    }
-    paths.forEach(function (path) {
-      var $path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      if (typeof path === 'string') {
-        $path.setAttribute('d', path);
-      } else {
-        $path.setAttribute('d', path.d);
-        if (path.opacity) {
-          $path.setAttribute('opacity', path.opacity);
-        }
-      }
-      $svg.appendChild($path);
-    });
-    return $svg;
-  }
-
-  function removeHash (fromOpen) {
-    if (!fromOpen) {
-      window.location.hash = '?';
-    }
-  }
-})();

package/docs/index.html

@@ -1,132 +0,0 @@
-<!doctype html>
-  <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta content="IE=edge" http-equiv="X-UA-Compatible">
-    <meta name="viewport" content="width=device-width">
-    <title>Calcite UI Icons</title>
-    <meta name="description" content="Searchable library of SVG icons for the Calcite design system">
-    <link rel="stylesheet" href="./resources/calcite-web.min.css">
-    <style>
-    .icon-select * {
-      pointer-events: none;
-      margin-left: auto;
-      margin-right: auto;
-    }
-    .icon-select {
-      border: 1px solid #efefef;
-      background-color: #fff;
-      color: #000;
-      transition: all 100ms linear;
-    }
-    .icon-select:hover, .icon-select:focus {
-      border: 1px solid #007ac2;
-      color: #000;
-      text-decoration: none;
-      background-color: #fff;
-    }
-    .icon-select--name {
-      word-wrap: break-word;
-      text-align: center;
-      margin-top: .5rem;
-      white-space: normal;
-      font-size: 12px;
-      display: block;
-    }
-    </style>
-  </head>
-  <body>
-    <div class="wrapper panel panel-no-border panel-no-padding">
-      <!-- header -->
-      <header class="panel-blue" role="banner">
-        <div class="grid-container">
-          <div class="column-24">
-            <h1 class="sub-nav-title leader-3">Calcite UI Icons</h1>
-          </div>
-          <div class="column-24">
-            <div class="column-12">
-              <p class="trailer-half">
-                Version <span class="js-version margin-right-2">1.1.2</span>
-                <a href="https://github.com/esri/calcite-ui-icons/" class="link-white">View on GitHub <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="15" class="margin-left-quarter"><path d="M14 8h1v7H1V1h7v1H2v12h12zm-4-7v1h3.29L7.62 7.67l.71.71L14 2.71V6h1V1z"/></svg></a>
-              </p>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      <div class="third-nav js-sticky">
-        <div class="third-nav-container">
-          <div class="grid-container">
-            <div class="column-24">
-              <div class="column-12 pre-12">
-                <label class="trailer-0">
-                  <input type="search" class="js-search input-search leader-quarter trailer-quarter" placeholder="Search icons" aria-label="Search icons">
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="grid-container padding-trailer-4 padding-leader-2">
-        <div class="js-app-content column-24 leader-0">
-          <div class="js-loader loader is-active padding-leader-6 leader-3 padding-trailer-3">
-            <div class="loader-bars"></div>
-            <div class="loader-text">Loading icons...</div>
-          </div>
-          <div class="js-icons block-group block-group-6-up tablet-block-group-4-up phone-block-group-2-up"></div>
-        </div>
-      </div>
-
-      <div class="js-modal modal-overlay" data-modal="iconDetail">
-        <div class="modal-content column-12" role="dialog">
-          <button class="js-modal-toggle right btn-link leader-quarter" aria-label="Close icon detail view">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-              <path d="M13.207 12.5l7.778 7.778-.707.707-7.778-7.778-7.778 7.778-.707-.707 7.778-7.778-7.778-7.778.707-.707 7.778 7.778 7.778-7.778.707.707z"/>
-            </svg>
-          </button>
-          <h2 class='trailer-half js-detail-name'></h2>
-          <div class="block-group block-group-2-up leader-half">
-            <div class="block">
-              <h3 class="font-size-1 trailer-0">Aliases</h3>
-              <p class="js-detail-aliases leader-quarter"></p>
-            </div>
-            <div class="block">
-              <h3 class="font-size-1 trailer-0">Category</h3>
-              <p class="js-detail-category font-size-2"></p>
-            </div>
-          </div>
-
-          <h3 class="font-size-1">Sizes</h3>
-          <div class="block-group block-group-3-up">
-            <a class="js-link-16 block padding-leader-1 padding-trailer-2 icon-select btn btn-transparent" href="#" target="_blank">
-              <div class="text-center trailer-1">
-                <span class="label label-blue">16</span>
-              </div>
-              <div class="js-detail-16 text-center"></div>
-            </a>
-            <a class="js-link-24 block padding-leader-1 padding-trailer-2 icon-select btn btn-transparent" href="#" target="_blank">
-              <div class="text-center trailer-1">
-                <span class="label label-blue">24</span>
-              </div>
-              <div class="js-detail-24 text-center"></div>
-            </a>
-            <a class="js-link-32 block padding-leader-1 padding-trailer-2 icon-select btn btn-transparent" href="#" target="_blank">
-              <div class="text-center trailer-1">
-                <span class="label label-blue">32</span>
-              </div>
-              <div class="js-detail-32 text-center"></div>
-            </a>
-          </div>
-          <p class='leader-1 trailer-0 font-size--1 avenir-italic'>Released in v<span class='js-detail-release'></span></p>
-        </div>
-      </div>
-    </div>
-
-    <!-- get calcite-web js from the cdn (use latest version) -->
-    <script src="./resources/calcite-web.min.js"></script>
-
-    <!-- start up app -->
-    <script src="./app.js"></script>
-
-  </body>
-</html>