npm - @internetarchive/ia-icons - Versions diffs - 1.3.7 → 1.3.11 - Mend

@internetarchive/ia-icons 1.3.7 → 1.3.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/.eslintrc ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js"]
+      }
+    }
+  },
+  "overrides": [{
+    "files": ["test/**/*.js"],
+    "rules": {
+      "no-unused-expressions": "off"
+    }
+  }]
+}

package/README.md CHANGED Viewed

@@ -1,35 +1,45 @@
-# IA Icons
+# ia-icons: SVG icon library for use in archive.org components
-This repo builds JS source, tests, and test pages, from a subdirectory of svg files:
+## Usage
-[svg/](svg/)
-Each `.svg` source file can then be individually imported via JS/TS like:
 ```js
-import twitter from 'https://esm.archive.org/@internetarchive/ia-icons/src/twitter.js'
+import { IAIcon } from './src/ia-icon';
 ```
-You can use in markup with the lit / web components definition like:
 ```html
-<ia-icon-video></ia-icon-video>
-<script type="module" src="https://esm.archive.org/@internetarchive/ia-icons/src/video.js"></script>
+<ia-icon icon="close" style="--iconFillColor: #0066cc; --iconStrokeColor: #ffffff;"></ia-icon>
 ```
-Each icon `.js` file defines an `<ia-icon>` `LitElement` web component.
+```css
+ia-icon {
+  --iconFillColor: #0066cc;
+  --iconStrokeColor: #ffffff;
+  --iconWidth: 40px;
+  --iconHeight: 40px;
+}
+```
-## Demo Page
-**[test/](test/)**
+## Testing
-## Updating
+Unit tests are placed in the ./test directory with the suffix and extension
+".test.js". Any other JS files in the test directory will be ignored by Karma.
+Run the tests with `yarn test`.
-Please run:
-```sh
-./bin/build.sh
-```
-in a `git clone` of this repo to rebuild/update [src/](src/) and [test/](test/) files.
+## Structure
-You can add a new (or change an existing) `.svg` file in the [svg/](svg/) subdir.
+* index.js - main component export
+* index.html - file opened when running `yarn start`
+* karma.conf.js - Karma runner config
+* karma.bs.conf.js - Karma BrowserStack config. Note that BROWSER_STACK_USERNAME
+  and BROWSER_STACK_ACCESS_KEY need to be set as environment variables before
+  running.
+* /src/ia-icons.js - Class definitions for each LitElement
+* /src/icons - Place icon SVGs here. Convention is to export a Lit-html template
+* /test - unit tests
-Running the [bin/build.sh](bin/build.sh) script will automatically create (or update)
-the relevant JS and test files.
+## Single Icons
+This package is part of [a monorepo](https://github.com/internetarchive/iaux-icons)
+that includes a published package for each icon included here. Each package
+includes a raw SVG file, a LitHtml template literal, and a defined custom
+element created with LitElement.

package/ia-icon.js ADDED Viewed

@@ -0,0 +1,5 @@
+/* eslint-disable import/no-duplicates */
+import './src/ia-icon';
+import IAIcon from './src/ia-icon';
+export default IAIcon;

package/index.html ADDED Viewed

@@ -0,0 +1,124 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="module" src="ia-icon.js"></script>
+    <script type="module" src="src/icon-donate.js"></script>
+    <title>IA SVG Icons</title>
+    <style>
+      html {
+        font: normal 10px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        font-size: 10px;
+        --iconWidth: 40px;
+        --iconHeight: 40px;
+      }
+      body {
+        margin: 0;
+        padding: 0 2rem;
+      }
+      h3 {
+        font-size: 2rem;
+      }
+      ul {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
+        grid-gap: 1rem;
+        padding: 0;
+        list-style: none;
+      }
+      li {
+        padding: 1.5rem 0;
+        border: 2px solid #ccc;
+        text-align: center;
+      }
+      li:hover {
+        color: #f0f0f0;
+        background: #222;
+      }
+      p {
+        margin: 0;
+      }
+      icon-donate {
+        width: 40px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <script type="module">
+      import { render, html } from './node_modules/lit-html/lit-html.js';
+      const listItems = () => {
+        return [
+          'applePay',
+          'advance',
+          'audio',
+          'calendar',
+          'calendarBlank',
+          'close',
+          'closeCircle',
+          'collapseSidebar',
+          'creditCard',
+          'donate',
+          'download',
+          'editPencil',
+          'ellipses',
+          'email',
+          'facebook',
+          'googlePay',
+          'iaLogo',
+          'images',
+          'link',
+          'localePin',
+          'lock',
+          'magnifyMinus',
+          'magnifyPlus',
+          'paypal',
+          'pinterest',
+          'search',
+          'share',
+          'software',
+          'sortAscending',
+          'sortDescending',
+          'texts',
+          'toc',
+          'tumblr',
+          'twitter',
+          'upload',
+          'user',
+          'venmo',
+          'video',
+          'visualAdjustment',
+          'volumes',
+          'web',
+          'info',
+        ].map((name) => {
+          const color = `rgb(${~~(Math.random() * 256)}, ${~~(Math.random() * 256)}, ${~~(Math.random() * 256)})`;
+          return html`
+            <li>
+              <ia-icon icon=${name} style="--iconFillColor: ${color}; --iconStrokeColor: ${color};"></ia-icon>
+              <p>${name}</p>
+            </li>
+          `;
+        });
+      };
+      render(html`
+        <h3>Icons using ${"<ia-icon>"}</h3>
+        <ul>
+          ${listItems()}
+        </ul>
+        <h3>Icon created by extending IAIcon</h3>
+        <icon-donate></icon-donate>
+      `, document.body);
+    </script>
+  </body>
+</html>

package/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import IAIcon from './src/ia-icon';
+export default IAIcon;

package/karma.bs.config.js ADDED Viewed

@@ -0,0 +1,16 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const merge = require('webpack-merge');
+const bsSettings = require('@open-wc/testing-karma-bs/bs-settings.js');
+const createBaseConfig = require('./karma.conf.js');
+module.exports = (config) => {
+  config.set(
+    merge(bsSettings(config), createBaseConfig(config), {
+      browserStack: {
+        project: 'ia-icons',
+      },
+    }),
+  );
+  return config;
+};

package/karma.conf.js ADDED Viewed

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const { createDefaultConfig } = require('@open-wc/testing-karma');
+const merge = require('webpack-merge');
+module.exports = (config) => {
+  config.set(
+    merge(createDefaultConfig(config), {
+      files: [
+        // runs all files ending with .test in the test folder,
+        // can be overwritten by passing a --grep flag. examples:
+        //
+        // npm run test -- --grep test/foo/bar.test.js
+        // npm run test -- --grep test/bar/*
+        { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' },
+      ],
+      esm: {
+        nodeResolve: true,
+      },
+      // you can overwrite/extend the config further
+      coverageIstanbulReporter: {
+        thresholds: {
+          emitWarning: true, // set to `true` to not fail the test command when thresholds are not met
+          // thresholds for all files
+        }
+      }
+    }),
+  );
+  return config;
+};

package/package.json CHANGED Viewed

@@ -1,12 +1,108 @@
 {
   "name": "@internetarchive/ia-icons",
-  "type": "module",
+  "version": "1.3.11",
+  "description": "SVG icon library for use in archive.org components",
   "license": "AGPL-3.0-only",
+  "main": "index.js",
+  "module": "ia-icon.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "es-dev-server --app-index ./index.html --node-resolve --watch --open --preserve-symlinks",
+    "lint:eslint": "eslint --ext .js . --ignore-path .gitignore",
+    "format:eslint": "eslint --ext .js . --fix --ignore-path .gitignore",
+    "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
+    "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore",
+    "lint": "npm run lint:eslint",
+    "format": "npm run format:eslint && npm run format:prettier",
+    "test": "karma start --coverage",
+    "test:watch": "karma start --auto-watch=true --single-run=false",
+    "test:update-snapshots": "karma start --update-snapshots",
+    "test:prune-snapshots": "karma start --prune-snapshots",
+    "test:compatibility": "karma start --compatibility all --coverage",
+    "test:compatibility:watch": "karma start --compatibility all --auto-watch=true --single-run=false",
+    "test:bs": "karma start karma.bs.config.js --compatibility all --coverage"
+  },
+  "dependencies": {
+    "@internetarchive/ia-icons": "^1.3.10",
+    "@internetarchive/icon-advance": "^1.3.4",
+    "@internetarchive/icon-applepay": "^1.3.4",
+    "@internetarchive/icon-audio": "^1.3.4",
+    "@internetarchive/icon-bookmark": "^1.3.4",
+    "@internetarchive/icon-calendar": "^1.3.4",
+    "@internetarchive/icon-calendar-blank": "^1.3.4",
+    "@internetarchive/icon-close": "^1.3.4",
+    "@internetarchive/icon-close-circle": "^1.3.6",
+    "@internetarchive/icon-collapse-sidebar": "^1.3.4",
+    "@internetarchive/icon-credit-card": "^1.3.4",
+    "@internetarchive/icon-dl": "^1.3.4",
+    "@internetarchive/icon-donate": "^1.3.4",
+    "@internetarchive/icon-edit-pencil": "^1.3.4",
+    "@internetarchive/icon-ellipses": "^1.3.4",
+    "@internetarchive/icon-email": "^1.3.4",
+    "@internetarchive/icon-facebook": "^1.3.4",
+    "@internetarchive/icon-googlepay": "^1.3.4",
+    "@internetarchive/icon-ia-logo": "^1.3.4",
+    "@internetarchive/icon-images": "^1.3.4",
+    "@internetarchive/icon-info": "^1.3.5",
+    "@internetarchive/icon-link": "^1.3.4",
+    "@internetarchive/icon-locale-pin": "^1.3.4",
+    "@internetarchive/icon-lock": "^1.3.4",
+    "@internetarchive/icon-magnify-minus": "^1.3.4",
+    "@internetarchive/icon-magnify-plus": "^1.3.4",
+    "@internetarchive/icon-paypal": "^1.3.4",
+    "@internetarchive/icon-pinterest": "^1.3.4",
+    "@internetarchive/icon-search": "^1.3.4",
+    "@internetarchive/icon-share": "^1.3.4",
+    "@internetarchive/icon-software": "^1.3.4",
+    "@internetarchive/icon-sort-ascending": "^1.3.4",
+    "@internetarchive/icon-sort-descending": "^1.3.5",
+    "@internetarchive/icon-texts": "^1.3.4",
+    "@internetarchive/icon-toc": "^1.3.4",
+    "@internetarchive/icon-tumblr": "^1.3.4",
+    "@internetarchive/icon-twitter": "^1.3.4",
+    "@internetarchive/icon-upload": "^1.3.4",
+    "@internetarchive/icon-user": "^1.3.4",
+    "@internetarchive/icon-venmo": "^1.3.4",
+    "@internetarchive/icon-video": "^1.3.4",
+    "@internetarchive/icon-visual-adjustment": "^1.3.4",
+    "@internetarchive/icon-volumes": "^1.3.4",
+    "@internetarchive/icon-web": "^1.3.4",
+    "lit": "^2.8.0"
+  },
   "devDependencies": {
-    "eslint": "^7.4.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-compat": "^4.0.2",
-    "eslint-plugin-import": "^2.26.0"
+    "@open-wc/eslint-config": "^1.3.0",
+    "@open-wc/polyfills-loader": "^0.2.2",
+    "@open-wc/prettier-config": "^0.1.14",
+    "@open-wc/testing": "^2.5.33",
+    "@open-wc/testing-karma": "^3.4.8",
+    "@open-wc/testing-karma-bs": "^1.3.94",
+    "es-dev-server": "^1.60.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-lit": "^0.5.0",
+    "gulp": "^4.0.2",
+    "husky": "^4.3.8",
+    "lint-staged": "^8.2.1",
+    "sinon": "^9.2.4",
+    "webpack-merge": "^4.2.2"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "@open-wc/eslint-config",
+      "eslint-config-prettier"
+    ]
   },
-  "version": "1.3.7"
+  "prettier": "@open-wc/prettier-config"
 }

package/src/ia-icon.js ADDED Viewed

@@ -0,0 +1,128 @@
+import {
+  LitElement, html, css, nothing
+} from 'lit';
+import advance from '@internetarchive/icon-advance/index';
+import applePay from '@internetarchive/icon-applepay/index';
+import audio from '@internetarchive/icon-audio/index';
+import calendar from '@internetarchive/icon-calendar/index';
+import calendarBlank from '@internetarchive/icon-calendar-blank/index';
+import close from '@internetarchive/icon-close/index';
+import closeCircle from '@internetarchive/icon-close-circle/index';
+import collapseSidebar from '@internetarchive/icon-collapse-sidebar/index';
+import creditCard from '@internetarchive/icon-credit-card/index';
+import donate from '@internetarchive/icon-donate/index';
+import download from '@internetarchive/icon-dl/index';
+import editPencil from '@internetarchive/icon-edit-pencil/index';
+import ellipses from '@internetarchive/icon-ellipses/index';
+import email from '@internetarchive/icon-email/index';
+import facebook from '@internetarchive/icon-facebook/index';
+import googlePay from '@internetarchive/icon-googlepay/index';
+import iaLogo from '@internetarchive/icon-ia-logo/index';
+import images from '@internetarchive/icon-images/index';
+import link from '@internetarchive/icon-link/index';
+import localePin from '@internetarchive/icon-locale-pin/index';
+import lock from '@internetarchive/icon-lock/index';
+import magnifyMinus from '@internetarchive/icon-magnify-minus/index';
+import magnifyPlus from '@internetarchive/icon-magnify-plus/index';
+import paypal from '@internetarchive/icon-paypal/index';
+import pinterest from '@internetarchive/icon-pinterest/index';
+import search from '@internetarchive/icon-search/index';
+import share from '@internetarchive/icon-share/index';
+import software from '@internetarchive/icon-software/index';
+import sortAscending from '@internetarchive/icon-sort-ascending/index';
+import sortDescending from '@internetarchive/icon-sort-descending/index';
+import texts from '@internetarchive/icon-texts/index';
+import toc from '@internetarchive/icon-toc/index';
+import tumblr from '@internetarchive/icon-tumblr/index';
+import twitter from '@internetarchive/icon-twitter/index';
+import upload from '@internetarchive/icon-upload/index';
+import user from '@internetarchive/icon-user/index';
+import venmo from '@internetarchive/icon-venmo/index';
+import video from '@internetarchive/icon-video/index';
+import visualAdjustment from '@internetarchive/icon-visual-adjustment/index';
+import volumes from '@internetarchive/icon-volumes/index';
+import web from '@internetarchive/icon-web/index';
+import info from '@internetarchive/icon-info/index';
+const iconTemplates = {
+  applePay,
+  advance,
+  audio,
+  calendar,
+  calendarBlank,
+  close,
+  closeCircle,
+  collapseSidebar,
+  creditCard,
+  donate,
+  download,
+  editPencil,
+  ellipses,
+  email,
+  facebook,
+  googlePay,
+  iaLogo,
+  images,
+  link,
+  localePin,
+  lock,
+  magnifyMinus,
+  magnifyPlus,
+  paypal,
+  pinterest,
+  search,
+  share,
+  software,
+  sortAscending,
+  sortDescending,
+  texts,
+  toc,
+  tumblr,
+  twitter,
+  upload,
+  user,
+  venmo,
+  video,
+  visualAdjustment,
+  volumes,
+  web,
+  info,
+};
+class IAIcon extends LitElement {
+  static get properties() {
+    return {
+      icon: { type: String },
+    };
+  }
+  static get styles() {
+    return css`
+      svg {
+        width: var(--iconWidth, 'auto');
+        height: var(--iconHeight, 'auto');
+      }
+      .fill-color {
+        fill: var(--iconFillColor);
+      }
+      .stroke-color {
+        stroke: var(--iconStrokeColor);
+      }
+    `;
+  }
+  constructor() {
+    super();
+    this.icon = '';
+  }
+  render() {
+    return html`${iconTemplates[this.icon]}` || nothing;
+  }
+}
+customElements.define('ia-icon', IAIcon);
+export default IAIcon;

package/src/icon-donate.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+import IAIcon from './ia-icon';
+class IconDonate extends IAIcon {
+  static get styles() {
+    return css`
+      .fill-color {
+        fill: #ff0000;
+      }
+      .stroke-color {
+        stroke: #ff0000;
+      }
+    `;
+  }
+  constructor() {
+    super();
+    this.icon = 'donate';
+  }
+}
+customElements.define('icon-donate', IconDonate);

package/test/ia-icons.test.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { fixture, expect, html } from '@open-wc/testing';
+import '../ia-icon';
+describe('<ia-icon>', () => {
+  it('renders an empty element when icon type is unrecognized', async () => {
+    const el = await fixture(html`<ia-icon icon="foo"></ia-icon>`);
+    expect(el.shadowRoot.querySelector('svg')).to.equal(null);
+  });
+  it('renders an icon', async () => {
+    const el = await fixture(html`<ia-icon icon="web"></ia-icon>`);
+    expect(el.shadowRoot.querySelector('svg')).to.exist;
+  });
+});

package/.eslintrc.cjs DELETED Viewed

@@ -1,24 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-  },
-  root: true,
-  extends: 'airbnb-base',
-  plugins: [
-    'eslint-plugin-import',
-  ],
-  rules: {
-    // we use esm.sh self-hosted and `import from 'https://..' is fine
-    'import/no-unresolved': [2, {
-      ignore: [
-        '^https://esm.archive.org/',
-        '^https://offshoot.prod.archive.org/lit',
-      ],
-    }],
-    // allow `import .. from '.js'` (.js suffix) in JS files
-    'import/extensions': ['off'],
-    'jsx-a11y/label-has-for': 0,
-  },
-};

package/.github/workflows/ci.yml DELETED Viewed

@@ -1,23 +0,0 @@
-name: App CI
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
-      with:
-        node-version: 19.x
-    - name: Install dependencies
-      run: npm install
-    - name: Run tests
-      run: npx eslint

package/bin/build.sh DELETED Viewed

@@ -1,63 +0,0 @@
-#!/bin/zsh -e
-# (re)generates all `src/*.js` and `test/` files (from `svg/*.svg` source images).
-MYDIR=${0:a:h}
-cd $MYDIR/..
-# start of the main test/display page
-cat >| test/index.html << EOF
-<style>
-  div {
-    display: inline-block;
-    width: 100px;
-    padding: 5px;
-    border: 1px solid gray;
-    border-radius: 5px;
-    vertical-align: top;
-    margin: 10px 5px;
-    background-color: #e9e9e9;
-  }
-</style>
-<body>
-EOF
-for SVG in svg/*.svg; do
-  BASENAME=$(basename $SVG .svg)
-  OUT=src/${BASENAME}.js
-  echo "generating $SVG => $OUT"
-  # create icon's `src/...js` JS file
-  cat >| $OUT << EOF
-import IAIconBase from './base.js';
-class IAIcon extends IAIconBase {
-  constructor() {
-    super(\`
-$(cat $SVG)
-\`);
-  }
-}
-customElements.define('ia-icon-$BASENAME', IAIcon);
-export default IAIcon;
-EOF
-  # add the icon to the test page
-  cat >> test/index.html << EOF
-<div>
-  &lt;ia-icon-$BASENAME/&gt;
-  <hr>
-  <ia-icon-$BASENAME></ia-icon-$BASENAME>
-</div>
-<script type="module" src="../src/$BASENAME.js"></script>
-EOF
-done