Merge branch 'main' into io-1286

CHANGELOG.md

@@ -10,6 +10,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added VUE apps names to the components so they are easier to identify in Vue devtools applist.
+- Added links to the designmanual in typography and icons to clearify font installation.
+
+### Changed
+
+### Fixed
 
 ### Changed
 
@@ -19,6 +24,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+### Changed
+
+### Fixed
+
+### Removed
+
+- Removed twitter icon.
+
 ## [1.1.0] - 16.02.2024
 
 ### Added

src/components/links/link/link.html

@@ -50,7 +50,7 @@ <h2 class="ods-devtools-text-preset-1">No decoration</h2>
       <div class="ods-devtools-code">
         <div class="ods-devtools-code__box">
           <p>
-            <a href="javascript:void(0)" class="ods-link ods-link--no-decoration"><span class="ods-icon ods-icon--size-echo ods-icon--clock" aria-hidden="true"></span> <span class="ods-icon ods-icon--size-echo ods-icon--twitter" aria-hidden="true"></span></a>
+            <a href="javascript:void(0)" class="ods-link ods-link--no-decoration"><span class="ods-icon ods-icon--size-echo ods-icon--clock" aria-hidden="true"></span> <span class="ods-icon ods-icon--size-echo ods-icon--information" aria-hidden="true"></span></a>
           </p>
         </div>
       </div>
@@ -135,7 +135,7 @@ <h2 class="ods-devtools-text-preset-2">Testcases</h2>
     </div>
     <div class="ods-grid__column--12">
       <a href="javascript:void(0)" class="ods-link ods-link--no-decoration ods-text--size-hotel">No decoration. <span class="ods-icon ods-icon--clock" aria-hidden="true"></span> Useful for icons.</a>
-      <a href="javascript:void(0)" class="ods-link ods-link--no-decoration"><span class="ods-icon ods-icon--size-echo ods-icon--clock" aria-hidden="true"></span> <span class="ods-icon ods-icon--size-echo ods-icon--twitter" aria-hidden="true"></span></a>
+      <a href="javascript:void(0)" class="ods-link ods-link--no-decoration"><span class="ods-icon ods-icon--size-echo ods-icon--clock" aria-hidden="true"></span> <span class="ods-icon ods-icon--size-echo ods-icon--information" aria-hidden="true"></span></a>
     </div>
   </div>
 </div>

src/components/menu/menu.html

@@ -313,7 +313,7 @@ <h2 class="ods-navbar-menu__heading">Annet</h2>
                   <li>
                     <a class="ods-navbar-menu__link" href="javascript:void(0)">
                       <div class="ods-navbar-menu__link-content">
-                        <span class="ods-icon ods-icon--twitter" aria-label="Twitter"></span>
+                        <span class="ods-icon ods-icon--x" aria-label="X"></span>
                       </div>
                     </a>
                   </li>
@@ -637,7 +637,7 @@ <h2 class="ods-navbar-menu__heading">Annet</h2>
               <li>
                 <a class="ods-navbar-menu__link" href="javascript:void(0)">
                   <div class="ods-navbar-menu__link-content">
-                    <span class="ods-icon ods-icon--twitter" aria-label="Twitter"></span>
+                    <span class="ods-icon ods-icon--x" aria-label="X"></span>
                   </div>
                 </a>
               </li>

src/general/icons/icons.html

@@ -80,6 +80,10 @@ <h2 class="ods-devtools-text-preset-1">In text</h2>
       </div>
     </div>
   </div>
+  <div class="ods-grid__column--12">
+    <h2 class="ods-devtools-text-preset-1">Download icons</h2>
+    <p>To use the icons you will need to download the font from <a href="https://designmanual.oslo.kommune.no/" target="_blank">Oslo Designmanual</a>.</p>
+  </div>
   <div class="ods-grid__column--12">
     <h3 class="ods-devtools-text-preset-1">Arrows</h3>
   </div>
@@ -242,12 +246,6 @@ <h3 class="ods-devtools-text-preset-1">Social media</h3>
       <span class="ods-icon ods-icon--standalone ods-icon--size-golf ods-icon--linked-in" aria-hidden="true"></span>
     </div>
   </div>
-  <div class="ods-grid__column--3">
-    <div class="ods-color-bg-gray-light ods-text--align-center ods-padding-3">
-      <p class="ods-padding-bottom-3">twitter</p>
-      <span class="ods-icon ods-icon--standalone ods-icon--size-golf ods-icon--twitter" aria-hidden="true"></span>
-    </div>
-  </div>
   <div class="ods-grid__column--3">
     <div class="ods-color-bg-gray-light ods-text--align-center ods-padding-3">
       <p class="ods-padding-bottom-3">X</p>

src/general/typography/typography.html

@@ -11,6 +11,10 @@
   <div class="ods-grid__column--12">
     <div id="types-placeholder" class="ods-grid"></div>
   </div>
+  <div class="ods-grid__column--12">
+    <h2 class="ods-devtools-text-preset-1">Font</h2>
+    <p>If you do not have the font installed, download it from <a href="https://designmanual.oslo.kommune.no/" target="_blank">Oslo Designmanual</a>.</p>
+  </div>
   <div class="ods-grid__column--12">
     <h2 class="ods-devtools-text-preset-1">Weight</h2>
     <p class="ods-text--weight-light">.ods-text--weight-light (300)</p>

src/system/_icon-map.scss

@@ -226,20 +226,18 @@ $icons: (
 
     "treatment": "\ea71",
 
-    "twitter": "\ea72",
+    "user": "\ea72",
 
-    "user": "\ea73",
+    "warning-triangle": "\ea73",
 
-    "warning-triangle": "\ea74",
+    "water-faucet": "\ea74",
 
-    "water-faucet": "\ea75",
+    "wifi": "\ea75",
 
-    "wifi": "\ea76",
+    "x": "\ea76",
 
-    "x": "\ea77",
+    "zoom-minus": "\ea77",
 
-    "zoom-minus": "\ea78",
-
-    "zoom-plus": "\ea79",
+    "zoom-plus": "\ea78",
 
 );