Merge branch 'feat/helios-etc-icons' into 'master'

Add icons for Helios, Redmine, Zulip, Forum, Mastodon

See merge request !5

package-lock.json

 {
   "name": "edition-node-gulp",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "edition-node-gulp",
-      "version": "2.14.0",
+      "version": "2.15.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package.json

 {
   "name": "edition-node-gulp",
   "description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "dependencies": {
     "@fullcalendar/core": "^6.1.5",
     "@fullcalendar/daygrid": "^6.1.5",

source/_patterns/00-atoms/02-icons/icons.mustache

@@ -980,6 +980,51 @@
   </div>
 </div>
 
+<div class="card">
+  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+    <i class="ico--forum"></i>
+  </div>
+  <div class="card__body p-2 text-2xs">
+    <code>.ico--forum</code>
+  </div>
+</div>
+
+<div class="card">
+  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+    <i class="ico--helios"></i>
+  </div>
+  <div class="card__body p-2 text-2xs">
+    <code>.ico--helios</code>
+  </div>
+</div>
+
+<div class="card">
+  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+    <i class="ico--redmine"></i>
+  </div>
+  <div class="card__body p-2 text-2xs">
+    <code>.ico--redmine</code>
+  </div>
+</div>
+
+<div class="card">
+  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+    <i class="ico--zulip"></i>
+  </div>
+  <div class="card__body p-2 text-2xs">
+    <code>.ico--zulip</code>
+  </div>
+</div>
+
+<div class="card">
+  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+    <i class="ico--mastodon"></i>
+  </div>
+  <div class="card__body p-2 text-2xs">
+    <code>.ico--mastodon</code>
+  </div>
+</div>
+
 <div class="card">
   <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
     <i class="ico--open-source"></i>

source/css/atoms/icons.pcss

-
 @font-face {
   font-family: 'pirati-ui';
-  src:  url('../fonts/pirati-ui.eot?16cba54ca38938d07a34607a0eb2fcb6');
-  src:  url('../fonts/pirati-ui.eot?16cba54ca38938d07a34607a0eb2fcb6#iefix') format('embedded-opentype'),
-    url('../fonts/pirati-ui.ttf?16cba54ca38938d07a34607a0eb2fcb6') format('truetype'),
-    url('../fonts/pirati-ui.woff?16cba54ca38938d07a34607a0eb2fcb6') format('woff'),
-    url('../fonts/pirati-ui.svg?16cba54ca38938d07a34607a0eb2fcb6#pirati-ui') format('svg');
-  font-weight: normal;
+  src:  url('../fonts/pirati-ui.eot?964zxx');
+  src:  url('../fonts/pirati-ui.eot?964zxx#iefix') format('embedded-opentype'),
+    url('../fonts/pirati-ui.ttf?964zxx') format('truetype'),
+    url('../fonts/pirati-ui.woff?964zxx') format('woff'),
+    url('../fonts/pirati-ui.svg?964zxx#pirati-ui') format('svg');
+font-weight: normal;
   font-style: normal;
   font-display: block;
 }
@@ -26,33 +25,21 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-@font-face {
-  font-family: 'pirati-ui';
-  src:  url('fonts/pirati-ui.eot?uv2v4l');
-  src:  url('fonts/pirati-ui.eot?uv2v4l#iefix') format('embedded-opentype'),
-    url('fonts/pirati-ui.ttf?uv2v4l') format('truetype'),
-    url('fonts/pirati-ui.woff?uv2v4l') format('woff'),
-    url('fonts/pirati-ui.svg?uv2v4l#pirati-ui') format('svg');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
+.ico--mastodon:before {
+  content: "\e973";
 }
-
-[class^="ico--"], [class*=" ico--"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'pirati-ui' !important;
-  speak: never;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.ico--helios:before {
+  content: "\e96e";
+}
+.ico--redmine:before {
+  content: "\e96f";
+}
+.ico--zulip:before {
+  content: "\e970";
+}
+.ico--forum:before {
+  content: "\e971";
 }
-
 .ico--pirati:before {
   content: "\e90d";
 }
@@ -359,6 +346,9 @@
 .ico--facebook:before {
   content: "\e902";
 }
+.ico--envelop:before {
+  content: "\e972";
+}
 .ico--bed:before {
   content: "\e969";
 }

source/icons/demo.html

@@ -9,10 +9,80 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> pirati-ui <small class="fgc1">(Glyphs:&nbsp;110)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> pirati-ui <small class="fgc1">(Glyphs:&nbsp;116)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--mastodon"></span>
+                <span class="mls"> ico--mastodon</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e973" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe973;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--helios"></span>
+                <span class="mls"> ico--helios</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e96e" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe96e;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--redmine"></span>
+                <span class="mls"> ico--redmine</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e96f" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe96f;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--zulip"></span>
+                <span class="mls"> ico--zulip</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e970" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe970;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--forum"></span>
+                <span class="mls"> ico--forum</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e971" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe971;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="ico--pirati"></span>
@@ -1453,6 +1523,20 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
+        <div class="glyph fs5">
+            <div class="clearfix bshadow0 pbs">
+                <span class="ico--envelop"></span>
+                <span class="mls"> ico--envelop</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e972" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe972;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="envelop, mail" class="liga unitRight" />
+            </div>
+        </div>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 14</h1>

source/icons/style.css

 @font-face {
   font-family: 'pirati-ui';
-  src:  url('fonts/pirati-ui.eot?uv2v4l');
-  src:  url('fonts/pirati-ui.eot?uv2v4l#iefix') format('embedded-opentype'),
-    url('fonts/pirati-ui.ttf?uv2v4l') format('truetype'),
-    url('fonts/pirati-ui.woff?uv2v4l') format('woff'),
-    url('fonts/pirati-ui.svg?uv2v4l#pirati-ui') format('svg');
+  src:  url('fonts/pirati-ui.eot?964zxx');
+  src:  url('fonts/pirati-ui.eot?964zxx#iefix') format('embedded-opentype'),
+    url('fonts/pirati-ui.ttf?964zxx') format('truetype'),
+    url('fonts/pirati-ui.woff?964zxx') format('woff'),
+    url('fonts/pirati-ui.svg?964zxx#pirati-ui') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,21 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.ico--mastodon:before {
+  content: "\e973";
+}
+.ico--helios:before {
+  content: "\e96e";
+}
+.ico--redmine:before {
+  content: "\e96f";
+}
+.ico--zulip:before {
+  content: "\e970";
+}
+.ico--forum:before {
+  content: "\e971";
+}
 .ico--pirati:before {
   content: "\e90d";
 }
@@ -331,6 +346,9 @@
 .ico--facebook:before {
   content: "\e902";
 }
+.ico--envelop:before {
+  content: "\e972";
+}
 .ico--bed:before {
   content: "\e969";
 }

source/icons/style.scss

@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: '#{$icomoon-font-family}';
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?uv2v4l');
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?uv2v4l#iefix') format('embedded-opentype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?uv2v4l') format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?uv2v4l') format('woff'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?uv2v4l##{$icomoon-font-family}') format('svg');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?964zxx');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?964zxx#iefix') format('embedded-opentype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?964zxx') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?964zxx') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?964zxx##{$icomoon-font-family}') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -27,6 +27,31 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.ico--mastodon {
+  &:before {
+    content: $ico--mastodon; 
+  }
+}
+.ico--helios {
+  &:before {
+    content: $ico--helios; 
+  }
+}
+.ico--redmine {
+  &:before {
+    content: $ico--redmine; 
+  }
+}
+.ico--zulip {
+  &:before {
+    content: $ico--zulip; 
+  }
+}
+.ico--forum {
+  &:before {
+    content: $ico--forum; 
+  }
+}
 .ico--pirati {
   &:before {
     content: $ico--pirati; 
@@ -537,6 +562,11 @@
     content: $ico--facebook; 
   }
 }
+.ico--envelop {
+  &:before {
+    content: $ico--envelop; 
+  }
+}
 .ico--bed {
   &:before {
     content: $ico--bed; 

source/icons/variables.scss

 $icomoon-font-family: "pirati-ui" !default;
 $icomoon-font-path: "fonts" !default;
 
+$ico--mastodon: "\e973";
+$ico--helios: "\e96e";
+$ico--redmine: "\e96f";
+$ico--zulip: "\e970";
+$ico--forum: "\e971";
 $ico--pirati: "\e90d";
 $ico--jitsi: "\e90f";
 $ico--open-source: "\e90e";
@@ -103,6 +108,7 @@ $ico--location: "\e906";
 $ico--phone: "\e907";
 $ico--linkedin: "\e903";
 $ico--facebook: "\e902";
+$ico--envelop: "\e972";
 $ico--bed: "\e969";
 $ico--train: "\e96a";
 $ico--bus: "\e96b";