npm - @odx/icons - Versions diffs - 1.1.0 → 1.3.0 - Mend

@odx/icons 1.1.0 → 1.3.0

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 (16) hide show

package/CHANGELOG.md +2 -3
package/README.md +25 -1
package/core/demo-poster.html +65 -15
package/medical/demo-poster.html +65 -15
package/medical/font.eot +0 -0
package/package.json +1 -1
package/safety/demo-poster.html +4138 -35
package/safety/font.css +3263 -1
package/safety/font.eot +0 -0
package/safety/font.scss +3264 -2
package/safety/font.svg +2312 -2
package/safety/font.ttf +0 -0
package/safety/font.woff +0 -0
package/safety/font.woff2 +0 -0
package/safety/iconmap.scss +771 -1
package/safety/metadata.json +2317 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,10 +1,9 @@
-# [1.1.0](https://dev.azure.com/draeger/ODXP/_git/odx-icons/compare/v1.0.0...v1.1.0) (2023-04-14)
+# [1.3.0](https://dev.azure.com/draeger/ODXP/_git/odx-icons/compare/v1.2.0...v1.3.0) (2023-04-14)
 ### Features
-* add util functions to get icon glyph and font family name ([0cffa67](https://dev.azure.com/draeger/ODXP/_git/odx-icons/commit/0cffa679d3e83238b9e93b0d3fa5ac33e5e7cdf1))
-* include changelog in published package ([48b7bf4](https://dev.azure.com/draeger/ODXP/_git/odx-icons/commit/48b7bf447b9ab1cf36165e83eabd0b4adc402627))
+* add search to icon set demo poster ([643fc16](https://dev.azure.com/draeger/ODXP/_git/odx-icons/commit/643fc163aa396476d450501c7d1fed3fcedd9bfb))
 # 1.0.0 (2023-04-13)

package/README.md CHANGED Viewed

@@ -12,11 +12,35 @@ npm install @odx/icons
 ## Use
-Import the @odx/icons css file into your ``styles.scss``:
+@odx/icons contains multiple icon sets for different types of applications:
+*core: Icons used across applications of all Dräger entities
+*medical: (Under consstruction) Icons for use in specific applications of the Dräger Medical division
+*safety: Icons for use in specific applications of the Dräger Safety division
+Import one or more icon sets into your ``styles.scss``, for example:
 ```css
 @import 'node_modules/@odx/icons/core/font.css';
+@import 'node_modules/@odx/icons/medical/font.css';
+@import 'node_modules/@odx/icons/safety/font.css';
+```
+In you HTML template you can now include icons as easy as:
 ```
+<i class="odx-icon" data-icon-set="core" data-icon-name="placeholder">
+  <span></span>
+</i>
+<i class="odx-icon" data-icon-set="safety" data-icon-name="add">
+  <span></span>
+</i>
+```
+The ``<span>`` elements are needed to display multicolor icons correctly.
+Demo posters with all icons contained in the icon sets are part of this package.
 [npm-icon]: https://nodei.co/npm/@odx/icons.svg?downloads=true
 [npm-url]: https://npmjs.org/package/@odx/icons

package/core/demo-poster.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>@odx/icons 1.1.0</title>
+    <title>@odx/icons 1.3.0</title>
     <link rel="stylesheet" type="text/css" href="font.css" media="screen" />
     <style>
       * {
@@ -19,18 +19,30 @@
       .page-header {
         display: flex;
         background-color: #ffffff;
-        border-bottom: 1px solid rgba(0,0,0,.1);
         font-size: 24px;
         line-height: 48px;
         position: sticky;
         top: 0;
         z-index: 1;
-        margin-bottom: 32px;
         padding: 0 32px;
+        align-items: center;
+      }
+      .page-logo {
+        height: 24px;
+        margin-right: 12px;
       }
       .page-title {
-        font-size: 24px;
+        font-size: 18px;
+      }
+      .page-search {
+        margin: 0 auto;
+        flex: 1 1 auto;
+        margin: 0 24px;
+        padding: 0 8px;
+        line-height: 24px;
       }
       .icon-count {
@@ -42,6 +54,7 @@
         display: flex;
         flex-wrap: wrap;
         margin: 0 auto;
+        padding: 24px;
         justify-content: center;
       }
@@ -50,14 +63,18 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        width: 250px;
+        min-width: 160px;
         margin: 8px;
         padding: 8px;
         line-height: 18px;
-        transition: 300ms ease;
+        transition: 250ms ease;
         cursor: pointer;
       }
+      .icons__item.is-hidden {
+        display: none;
+      }
       .odx-icon {
         width: 48px;
         height: 48px;
@@ -66,7 +83,19 @@
       .icons__item:hover {
         background-color: #ffffff;
-        transform: scale(1.25);
+        transform: scale(1.1);
+      }
+      .icon-name,
+      .icon-alias {
+        max-width: 160px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      .icon-name {
+        font-size: 14px;
       }
       .icon-alias {
@@ -82,7 +111,7 @@
         width: 100%;
         line-height: 32px;
         text-align:center;
-        background-color: #00dd31;
+        background-color: #93ffaa;
         color: #002766;
         z-index: 2;
       }
@@ -90,11 +119,18 @@
   </head>
   <body>
     <header class="page-header">
+      <svg class="page-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74 29">
+        <path
+          fill="#002766"
+          d="M29.717 2.887c0 1.4-1.127 2.535-2.512 2.535a2.522 2.522 0 0 1-2.514-2.533c0-1.4 1.124-2.534 2.514-2.534a2.523 2.523 0 0 1 2.512 2.532ZM9.827.848H0v2.554h7.779c.903 0 1.635.732 1.644 1.637v14.62a1.65 1.65 0 0 1-1.644 1.64H4.823l.001-15.516H0v18.174h9.827c2.303 0 4.17-1.868 4.192-4.187V5.036C13.998 2.717 12.13.848 9.827.848Zm13.968 6.18c-2.705-.01-4.327.186-5.537.464-1.649.414-2.318.972-2.638 1.24a2.134 2.134 0 0 1-.145.114v15.111h4.596V11.452c-.027-1.55 2.264-2.062 3.722-.984l.002-3.44Zm42.037 1.694c.324-.269.992-.823 2.634-1.235 1.205-.275 2.833-.475 5.534-.464v3.44c-1.457-1.079-3.75-.566-3.726.984v12.509h-4.593V8.84c.04-.028.09-.068.15-.12ZM31.507 21.278h-2.135c-.987.018-1.716-.705-1.737-1.76a37.415 37.415 0 0 1 0-1.91c.014-.968.75-1.743 1.737-1.73h2.135v5.4Zm.679-14.253h-7.447v3.438s2.625-.894 4.448-.894c2.222 0 2.34 1.13 2.322 1.635v2.022h-4.484c-2.048 0-3.709 1.67-3.718 3.734v3.246c0 2.07 1.665 3.75 3.718 3.75h9.077v-13.01c-.015-2.318-1.883-3.92-3.916-3.92Zm1.074-1.604a2.521 2.521 0 0 0 2.512-2.534A2.52 2.52 0 0 0 33.26.355a2.522 2.522 0 0 0-2.513 2.532 2.523 2.523 0 0 0 2.513 2.534ZM43.7 9.605c-1.776 0-1.974 1.253-1.974 1.975v1.67c0 .725.198 1.976 1.974 1.974 1.778-.001 1.975-1.25 1.975-1.975v-1.67c0-.722-.197-1.974-1.975-1.974Zm2.281 8.092H41.33c-2.038.01-3.916-1.604-3.914-3.919V10.98C37.405 8.927 39 7.014 41.3 7.025h8.566v6.72c.004 2.05-1.601 3.96-3.884 3.952Zm-.117 6.877c0 .719-.21 1.971-2.084 1.971-1.869 0-2.078-1.252-2.078-1.97v-1.673c0-.723.21-1.977 2.078-1.977 1.875 0 2.084 1.255 2.084 1.977v1.672Zm.473-6.234-5.21.002c-2.29-.003-3.892 1.868-3.885 3.92v2.785c-.005 2.305 1.88 3.956 3.917 3.953h5.204c2.288 0 3.902-1.915 3.89-3.953v-2.785a3.916 3.916 0 0 0-3.916-3.922Zm9.41-3.326h3.946v-3.449c0-.723-.253-1.975-1.972-1.975-1.722 0-1.973 1.252-1.973 1.975v3.449Zm-.59-7.99 5.173-.001c2.03 0 3.926 1.602 3.923 3.92v6.699h-8.417v2.072c.008.906.696 1.66 2.522 1.66 2.81.005 5.761-.846 5.761-.846v3.428h-8.76c-2.233.004-4.123-1.6-4.118-3.918v-9.093c0-2.33 1.879-3.93 3.916-3.921Z"
+        />
+      </svg>
       <h1 class="page-title">
-        @odx/icons 1.1.0
+        @odx/icons 1.3.0
       </h1>
+      <input class="page-search" placeholder="Search icons ..." />
       <div class="icon-count">
-        Iconset: core - 294 icons
+        Iconset: <strong>core</strong> (294 icons)
       </div>
     </header>
     <main class="icons" id="icons">
@@ -1788,17 +1824,18 @@
     </main>
     <script>
       let currentMessage, timeout;
-      document.body.addEventListener('click', function(event) {
+      document.body.addEventListener('click', event => {
         const target = event.target.closest('.icons__item');
         if(target) {
-          const iconName = `odx-icon--${target.querySelector('.icon-name').textContent}`;
-          navigator.clipboard.writeText(iconName).then(function() {
-            const message = `Copied icon "${iconName}" to clipboard`;
+          const iconName = target.querySelector('.icon-name').textContent;
+          navigator.clipboard.writeText(iconName).then(() => {
+            const message = `Copied <strong>${iconName}</strong> to clipboard`;
             if(currentMessage) currentMessage.remove();
             currentMessage = document.createElement('div');
             currentMessage.classList.add('copied-message');
-            currentMessage.textContent = message
+            currentMessage.innerHTML = message
             document.body.appendChild(currentMessage);
             clearTimeout(timeout);
             timeout = setTimeout(() => {
@@ -1808,6 +1845,19 @@
           });
         }
       });
+      const searchInput = document.querySelector('.page-search');
+      const iconElements = document.querySelectorAll('.icons__item');
+      const iconNames = new WeakMap();
+      for(const iconElement of iconElements) {
+        iconNames.set(iconElement, iconElement.querySelector('.icon-name').textContent.toLowerCase())
+      }
+      searchInput.addEventListener('keyup', event => {
+        for(const iconElement of iconElements) {
+          const isVisible = iconNames.get(iconElement).includes(searchInput.value.toLowerCase());
+          iconElement.classList.toggle('is-hidden', !isVisible);
+        }
+      })
     </script>
   </body>
 </html>

package/medical/demo-poster.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>@odx/icons 1.1.0</title>
+    <title>@odx/icons 1.3.0</title>
     <link rel="stylesheet" type="text/css" href="font.css" media="screen" />
     <style>
       * {
@@ -19,18 +19,30 @@
       .page-header {
         display: flex;
         background-color: #ffffff;
-        border-bottom: 1px solid rgba(0,0,0,.1);
         font-size: 24px;
         line-height: 48px;
         position: sticky;
         top: 0;
         z-index: 1;
-        margin-bottom: 32px;
         padding: 0 32px;
+        align-items: center;
+      }
+      .page-logo {
+        height: 24px;
+        margin-right: 12px;
       }
       .page-title {
-        font-size: 24px;
+        font-size: 18px;
+      }
+      .page-search {
+        margin: 0 auto;
+        flex: 1 1 auto;
+        margin: 0 24px;
+        padding: 0 8px;
+        line-height: 24px;
       }
       .icon-count {
@@ -42,6 +54,7 @@
         display: flex;
         flex-wrap: wrap;
         margin: 0 auto;
+        padding: 24px;
         justify-content: center;
       }
@@ -50,14 +63,18 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        width: 250px;
+        min-width: 160px;
         margin: 8px;
         padding: 8px;
         line-height: 18px;
-        transition: 300ms ease;
+        transition: 250ms ease;
         cursor: pointer;
       }
+      .icons__item.is-hidden {
+        display: none;
+      }
       .odx-icon {
         width: 48px;
         height: 48px;
@@ -66,7 +83,19 @@
       .icons__item:hover {
         background-color: #ffffff;
-        transform: scale(1.25);
+        transform: scale(1.1);
+      }
+      .icon-name,
+      .icon-alias {
+        max-width: 160px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      .icon-name {
+        font-size: 14px;
       }
       .icon-alias {
@@ -82,7 +111,7 @@
         width: 100%;
         line-height: 32px;
         text-align:center;
-        background-color: #00dd31;
+        background-color: #93ffaa;
         color: #002766;
         z-index: 2;
       }
@@ -90,11 +119,18 @@
   </head>
   <body>
     <header class="page-header">
+      <svg class="page-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74 29">
+        <path
+          fill="#002766"
+          d="M29.717 2.887c0 1.4-1.127 2.535-2.512 2.535a2.522 2.522 0 0 1-2.514-2.533c0-1.4 1.124-2.534 2.514-2.534a2.523 2.523 0 0 1 2.512 2.532ZM9.827.848H0v2.554h7.779c.903 0 1.635.732 1.644 1.637v14.62a1.65 1.65 0 0 1-1.644 1.64H4.823l.001-15.516H0v18.174h9.827c2.303 0 4.17-1.868 4.192-4.187V5.036C13.998 2.717 12.13.848 9.827.848Zm13.968 6.18c-2.705-.01-4.327.186-5.537.464-1.649.414-2.318.972-2.638 1.24a2.134 2.134 0 0 1-.145.114v15.111h4.596V11.452c-.027-1.55 2.264-2.062 3.722-.984l.002-3.44Zm42.037 1.694c.324-.269.992-.823 2.634-1.235 1.205-.275 2.833-.475 5.534-.464v3.44c-1.457-1.079-3.75-.566-3.726.984v12.509h-4.593V8.84c.04-.028.09-.068.15-.12ZM31.507 21.278h-2.135c-.987.018-1.716-.705-1.737-1.76a37.415 37.415 0 0 1 0-1.91c.014-.968.75-1.743 1.737-1.73h2.135v5.4Zm.679-14.253h-7.447v3.438s2.625-.894 4.448-.894c2.222 0 2.34 1.13 2.322 1.635v2.022h-4.484c-2.048 0-3.709 1.67-3.718 3.734v3.246c0 2.07 1.665 3.75 3.718 3.75h9.077v-13.01c-.015-2.318-1.883-3.92-3.916-3.92Zm1.074-1.604a2.521 2.521 0 0 0 2.512-2.534A2.52 2.52 0 0 0 33.26.355a2.522 2.522 0 0 0-2.513 2.532 2.523 2.523 0 0 0 2.513 2.534ZM43.7 9.605c-1.776 0-1.974 1.253-1.974 1.975v1.67c0 .725.198 1.976 1.974 1.974 1.778-.001 1.975-1.25 1.975-1.975v-1.67c0-.722-.197-1.974-1.975-1.974Zm2.281 8.092H41.33c-2.038.01-3.916-1.604-3.914-3.919V10.98C37.405 8.927 39 7.014 41.3 7.025h8.566v6.72c.004 2.05-1.601 3.96-3.884 3.952Zm-.117 6.877c0 .719-.21 1.971-2.084 1.971-1.869 0-2.078-1.252-2.078-1.97v-1.673c0-.723.21-1.977 2.078-1.977 1.875 0 2.084 1.255 2.084 1.977v1.672Zm.473-6.234-5.21.002c-2.29-.003-3.892 1.868-3.885 3.92v2.785c-.005 2.305 1.88 3.956 3.917 3.953h5.204c2.288 0 3.902-1.915 3.89-3.953v-2.785a3.916 3.916 0 0 0-3.916-3.922Zm9.41-3.326h3.946v-3.449c0-.723-.253-1.975-1.972-1.975-1.722 0-1.973 1.252-1.973 1.975v3.449Zm-.59-7.99 5.173-.001c2.03 0 3.926 1.602 3.923 3.92v6.699h-8.417v2.072c.008.906.696 1.66 2.522 1.66 2.81.005 5.761-.846 5.761-.846v3.428h-8.76c-2.233.004-4.123-1.6-4.118-3.918v-9.093c0-2.33 1.879-3.93 3.916-3.921Z"
+        />
+      </svg>
       <h1 class="page-title">
-        @odx/icons 1.1.0
+        @odx/icons 1.3.0
       </h1>
+      <input class="page-search" placeholder="Search icons ..." />
       <div class="icon-count">
-        Iconset: medical - 1 icons
+        Iconset: <strong>medical</strong> (1 icons)
       </div>
     </header>
     <main class="icons" id="icons">
@@ -108,17 +144,18 @@
     </main>
     <script>
       let currentMessage, timeout;
-      document.body.addEventListener('click', function(event) {
+      document.body.addEventListener('click', event => {
         const target = event.target.closest('.icons__item');
         if(target) {
-          const iconName = `odx-icon--${target.querySelector('.icon-name').textContent}`;
-          navigator.clipboard.writeText(iconName).then(function() {
-            const message = `Copied icon "${iconName}" to clipboard`;
+          const iconName = target.querySelector('.icon-name').textContent;
+          navigator.clipboard.writeText(iconName).then(() => {
+            const message = `Copied <strong>${iconName}</strong> to clipboard`;
             if(currentMessage) currentMessage.remove();
             currentMessage = document.createElement('div');
             currentMessage.classList.add('copied-message');
-            currentMessage.textContent = message
+            currentMessage.innerHTML = message
             document.body.appendChild(currentMessage);
             clearTimeout(timeout);
             timeout = setTimeout(() => {
@@ -128,6 +165,19 @@
           });
         }
       });
+      const searchInput = document.querySelector('.page-search');
+      const iconElements = document.querySelectorAll('.icons__item');
+      const iconNames = new WeakMap();
+      for(const iconElement of iconElements) {
+        iconNames.set(iconElement, iconElement.querySelector('.icon-name').textContent.toLowerCase())
+      }
+      searchInput.addEventListener('keyup', event => {
+        for(const iconElement of iconElements) {
+          const isVisible = iconNames.get(iconElement).includes(searchInput.value.toLowerCase());
+          iconElement.classList.toggle('is-hidden', !isVisible);
+        }
+      })
     </script>
   </body>
 </html>

package/medical/font.eot CHANGED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@odx/icons",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "author": "Drägerwerk AG & Co. KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {