@esri/calcite-ui-icons 3.29.0 → 3.30.0

package/bin/optimize.js

@@ -1,68 +0,0 @@
-const fs = require('fs-extra');
-const glob = require('glob-promise');
-const SVGO = require('svgo');
-const progress = require('cli-progress');
-
-let options = {
-  plugins: [
-    {cleanupIDs: {remove: false}},
-    {removeStyleElement: true},
-    {removeUselessDefs: true},
-    {removeUselessStrokeAndFill: false},
-    {removeHiddenElems: true},
-    {removeEmptyText: true},
-    {convertShapeToPath: { convertArcs: true }},
-    {convertPathData: { noSpaceAfterFlags: false }},
-    {removeEmptyAttrs: true},
-    {removeEmptyContainers: true},
-    {mergePaths: false},
-    {removeTitle: true},
-    {removeDesc: true},
-    {removeDimensions: true},
-    {removeAttrs: {attrs: ['class', '(stroke)']}}
-  ],
-  multipass: true
-};
-
-/**
- * Reads an icon file off disk and optimizes it, saving to same location
- * @param {string[]}           filePaths  array of relative file paths
- * @param {SVGO}               svgo       SVGO instance with correct options
- * @param {SingleBar}          bar        progress bar instance
- * @return {Promise}
- */
-function optimizeIcons (filePaths, svgo, bar) {
-  var num = 0;
-  return Promise.all(filePaths.map((path) => {
-    return fs.readFile(path, 'utf-8')
-      .then((svg) => svgo.optimize(svg, { path }))
-      .then((result) => {
-        num++;
-        bar.update(num);
-        return fs.writeFile(path, result.data, 'utf-8');
-      });
-  }));
-}
-
-/**
- * Optimize a set of icons
- * @param {string}   files       Glob pattern for icons source
- * @param {boolean}  remove      Remove id attributes from output
- * @return {Promise}             Formatted object with all icon metadata
- */
-module.exports = function (files, remove) {
-  if (!files) {
-    return Promise.resolve(true);
-  }
-  options.plugins[0] = {cleanupIDs: { remove }};
-  svgo = new SVGO(options);
-  return glob(files).then((iconPaths) => {
-    const format = "  \x1b[32m {bar} {percentage}% | {value}/{total} \x1b[0m";
-    const bar = new progress.SingleBar({ format }, progress.Presets.shades_classic);
-    bar.start(iconPaths.length, 0);
-    return optimizeIcons(iconPaths, svgo, bar).then(() => {
-      bar.stop();
-      console.log("");
-    });
-  });
-}

package/bin/path-data.js

@@ -1,136 +0,0 @@
-const camelCase = require('camelcase');
-const fs = require('fs-extra');
-const glob = require('glob-promise');
-const path = require('path');
-const util = require('util');
-const svgson = util.promisify(require('svgson'));
-const version = require('../package.json').version;
-
-/**
- * Gets all important information about an icon.
- * @param {string} svg - Path to icon file.
- * @return {object} - Formatted object with all icon metadata
- */
-function formatSVG (svg) {
-  let file = path.basename(svg.file);
-  let filled = file.indexOf('-f.svg') > -1;
-  return {
-    file,
-    filled,
-    paths: getPaths(svg.contents),
-    size: getSize(file),
-    variant: getVariant(file, filled)
-  };
-}
-
-/**
- * Find the path(s) from an icon's svgson data
- * @param {object} svg - Object as returned from svgson.
- * @return {array} - Array of paths
- */
-function getPaths (svg) {
-  const bbPaths = ['M0 0h16v16H0z', 'M0 0h24v24H0z', 'M0 0h32v32H0z'];
-  return svg.childs
-    .filter(child => child.name === 'path' && bbPaths.indexOf(child.attrs.d) === -1) // filter out bounding box paths
-    .map(child => ({ opacity: child.attrs.opacity, d: child.attrs.d }));
-}
-
-/**
- * Find the base icon name
- * @param {string} name - Icon filename
- * @param {boolean} filled - Icon filename
- * @return {array} - Icon filename without size, fill, or file extension
- */
-function getVariant (name, filled) {
-  var noF = name.replace('-f.svg', '.svg');
-  return noF.substring(0, noF.length - 7) + (filled ? "-f" : "");
-}
-
-/**
- * Find an icon's size
- * @param {string} name - Icon filename
- * @return {integer} - 16, 24, 36
- */
-function getSize(name) {
-  var noF = name.replace('-f.svg', '.svg');
-  return parseInt(noF.substring(noF.length - 4, noF.length - 6), 10);
-}
-
-/**
- * Read an icon from disc and get data as json
- * @param {string} fileName - Icon filename (full path)
- * @return {Promise} - Promise resolving to object which includes name and svgson data
- */
-function readSVG (fileName) {
-  return new Promise(function(resolve, reject) {
-    fs.readFile(fileName, 'utf-8').then(function (svg) {
-      svgson(svg, {}, function (contents) {
-        resolve({file: fileName, contents});
-      });
-    });
-  });
-}
-
-module.exports = function generatePathFile () {
-  let banner = '// File generated automatically by path-data.js, do not edit directly\n';
-  let jsFile = `${banner}`;
-  let tsFile = `
-${banner}
-interface CalciteMultiPathEntry {
-  d: string;
-  opacity?: string;
-}
-export type CalciteIconPath = string | CalciteMultiPathEntry[];
-`;
-  return glob('icons/*.svg')
-    .then(filePaths => Promise.all(filePaths.map(readSVG)))
-    .then(files => files.map(formatSVG))
-    .then(files => {
-      let icons = {};
-      let keywords = JSON.parse(fs.readFileSync('docs/keywords.json', 'utf-8'));
-      files.forEach(file => {
-        // add to json file
-        icons[file.variant] = icons[file.variant] || keywords[file.variant] || { alias: [], category: "", release: "" };
-        var icon = icons[file.variant];
-        const firstPath = file.paths[0] || { d: "" }; // back up for "blank" icon
-        const paths = file.paths.length > 1 ? file.paths : firstPath.d;
-        icon[file.size] = paths;
-        var base = file.variant.substring(0, file.variant.length - 2);
-        // make sure filled variants get the keywords from their standard counterpart
-        if (file.filled && !icon.release) {
-          const variantKeywords = keywords[base];
-          if (variantKeywords) {
-            icon.alias = variantKeywords.alias;
-            icon.category = variantKeywords.category;
-            icon.release = variantKeywords.release;
-          }
-        }
-        // add to ts and js files
-        const variant = file.variant.match(/^\d/) ? `i${file.variant}`: file.variant;
-        const camelCaseName = camelCase(`${file.filled ? base: variant }-${file.size}${ file.filled ? "-f" : ""}`);
-        jsFile += `export {${camelCaseName}} from "./js/${camelCaseName}.js";\n`;
-
-        let contents, tsContents;
-        if (typeof paths === "string") {
-          tsFile += `export const ${camelCaseName}: string;\n`;
-          contents = `export const ${camelCaseName} = "${paths}";\n`;
-          tsContents = `export const ${camelCaseName}: string;\n`;
-        } else {
-          icon.multiPath = true;
-          tsFile += `export const ${camelCaseName}: CalciteMultiPathEntry[];\n`;
-          contents = `export const ${camelCaseName} = ${JSON.stringify(paths)};\n`;
-          tsContents = `export const ${camelCaseName}: CalciteMultiPathEntry[];\n`;
-        }
-
-        fs.writeFile(`js/${camelCaseName}.js`, contents, 'utf8');
-        fs.writeFile(`js/${camelCaseName}.d.ts`, tsContents, 'utf8');
-        fs.writeFile(`js/${camelCaseName}.json`, JSON.stringify(paths), 'utf8');
-      });
-      let promises = [
-        fs.writeFile('docs/icons.json', JSON.stringify({ version, icons }), 'utf8'),
-        fs.writeFile('index.d.ts', tsFile, 'utf8'),
-        fs.writeFile('index.js', jsFile, 'utf8')
-      ];
-      return Promise.all(promises);
-    });
-};

package/bin/server.js

@@ -1,41 +0,0 @@
-#!/usr/bin/env node
-const build = require('./build');
-const pathData = require('./path-data');
-const optimize = require('./optimize');
-const debounce = require('debounce');
-const bs = require('browser-sync').create();
-const options = {
-  awaitWriteFinish: true,
-  ignoreInitial: true
-};
-
-console.log('🗜  optimizing icons... \n')
-
-build()
-  .then(() => {
-    bs.init({
-      server: './docs',
-      notify: false,
-      ui: false,
-      port: 8080
-    });
-    bs.watch('icons/*.svg', options, onChange);
-    bs.watch('docs/keywords.json', options, onChange);
-
-    function onChange (event, file) {
-      if (event === 'add') {
-        console.log('🗜  new icon detected, optimizing... \n');
-        optimize(file, true).then(() => {});
-      } else {
-        update();
-      }
-    }
-
-    const update = debounce(function () {
-      pathData()
-        .then(() => {
-          console.log('✨  path file updated');
-          bs.reload();
-        });
-    }, 300);
-  });

package/bin/templates/imageset.json

@@ -1,29 +0,0 @@
-{
-    "images": [
-      {
-        "idiom": "universal"
-      },
-      {
-        "scale": "1x",
-        "idiom": "universal",
-        "filename": "${NAME}@1x.png"
-      },
-      {
-        "scale": "2x",
-        "idiom": "universal",
-        "filename": "${NAME}@2x.png"
-      },
-      {
-        "scale": "3x",
-        "idiom": "universal",
-        "filename": "${NAME}@3x.png"
-      }
-    ],
-    "properties": {
-      "template-rendering-intent" : "template"
-    },
-    "info": {
-      "version": 1,
-      "author": "xcode"
-    }
-  }

package/bin/templates/xcassets.json

@@ -1,6 +0,0 @@
-{
-    "info" : {
-      "version" : 1,
-      "author" : "xcode"
-    }
-}

package/bower.json

@@ -1,27 +0,0 @@
-{
-  "name": "calcite-ui-icons",
-  "authors": [
-    "Julio Ochoa <jochoa@esri.com>",
-    "Paul Pederson <PPederson@esri.com>",
-    "John Griffith <jgriffith@esri.com>",
-    "Katelyn Seitz <kseitz@esri.com>"
-  ],
-  "description": "A collection of UI icons created by Esri for web based applications.",
-  "main": "",
-  "keywords": [
-    "esri",
-    "arcgis",
-    "apps",
-    "icons",
-    "svg"
-  ],
-  "license": "SEE LICENSE IN README.md",
-  "private": false,
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ]
-}

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>