From 60ae86f7493ab8aee0c3a77e46570c918e6b5170 Mon Sep 17 00:00:00 2001
From: Raphael Ferrand <goldenraphti@users.noreply.github.com>
Date: Wed, 31 Jan 2024 16:17:59 +0100
Subject: [PATCH] SWED-2276 add more custom icons + improve hamburger menu +
 release notes

---
 RELEASE_NOTES.md                              | 29 ++++++-------
 src/App/AppHeader/index.js                    |  4 +-
 .../__snapshots__/index.test.js.snap          | 42 +++++++++++++++++++
 .../identity/Iconography/constants.js         |  8 ++++
 .../shapes/check_circle_filled_black.svg      |  4 ++
 src/icons/shapes/checkmark.svg                |  3 ++
 src/icons/shapes/chevron-left.svg             |  5 +++
 src/icons/shapes/chevron-right.svg            |  5 +++
 src/icons/shapes/chevron-up.svg               |  5 +++
 src/icons/shapes/menu_hamburger.svg           |  5 +++
 src/less/core/iconography.less                | 27 ++++++++----
 src/less/utilities/color.less                 |  4 ++
 src/scripts/main/nav/index.js                 |  9 ++--
 13 files changed, 121 insertions(+), 29 deletions(-)
 create mode 100644 src/icons/shapes/check_circle_filled_black.svg
 create mode 100644 src/icons/shapes/checkmark.svg
 create mode 100644 src/icons/shapes/chevron-left.svg
 create mode 100644 src/icons/shapes/chevron-right.svg
 create mode 100644 src/icons/shapes/chevron-up.svg
 create mode 100644 src/icons/shapes/menu_hamburger.svg

diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index 86746af385..8c7dd760ea 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -1,29 +1,26 @@
 # Changelog
 
-## \[10.9.1\] - 24.01.2024
+## \[11.0.0\] - 05.02.2024
 
 ## Component changes
 
 ### Non breaking UI changes
 
-- PayEx - non-breaking UI updates
-  - color variables updates (brand-secondary hover, btn-secondary-hover, disabled, ...)
-  - input fields colors (for states disabled & success)
-  - badge colors
-  - skip-link font
-  - link
-    - hover state colors on bright mode
-    - hover state for inline links
-  - code tags secondary & tertiary background colors
-  -
-
-### Bugfix
-
-- Tooltip
-  - fix position tooltip (it got detached from its parent element a few versions back)
+- Icons migration step 1 (NON BREAKING ... for now and until next major release. But we're moving away from Google's material-icons)
+  - Import Atlas icons (via CDN via CSS) for Atlas icons
+  - Add custom icons "Swepay-icons": a few svg icons saved locally to complement where missing from Atlas icons set (called Swepay-icons but supported for both Swedbankpay AND PayEx sides)
+  - Add support in the components styles for the Atlas icons and our new custom made "Swepay-icons"
 
 ## Maintenance
 
 - npm packages dependencies upgrades
 
 ## Design System website
+
+- Update iconography page
+
+  - Add sections about new Atlas and custom icons
+  - Improve sections about sizes
+  - Update status of material-icons
+
+- Deadlink fix (thanks Yvonne for the heads-up)
diff --git a/src/App/AppHeader/index.js b/src/App/AppHeader/index.js
index db166a1c0d..b4a54d4172 100644
--- a/src/App/AppHeader/index.js
+++ b/src/App/AppHeader/index.js
@@ -66,7 +66,7 @@ const AppHeader = () =>
 					aria-expanded="false"
 					aria-controls="topbar-nav"
 				>
-					<i className="at-justify topbar-btn-icon"></i>
+					<i className="swepay-icon-menu-hamburger topbar-btn-icon"></i>
 				</button>
 			</div>
 		</header>
@@ -83,7 +83,7 @@ const AppHeader = () =>
 				aria-expanded="false"
 				aria-controls="topbar-nav"
 			>
-				<i className="at-justify topbar-btn-icon"></i>
+				<i className="swepay-icon-menu-hamburger topbar-btn-icon"></i>
 			</button>
 			<button type="button" className="topbar-close" aria-label="Close menu">
 				<i className="swepay-icon-close topbar-btn-icon"></i>
diff --git a/src/App/Identity/identity/Iconography/__snapshots__/index.test.js.snap b/src/App/Identity/identity/Iconography/__snapshots__/index.test.js.snap
index dd3f2d7cf5..4ee34601f8 100644
--- a/src/App/Identity/identity/Iconography/__snapshots__/index.test.js.snap
+++ b/src/App/Identity/identity/Iconography/__snapshots__/index.test.js.snap
@@ -345,6 +345,36 @@ exports[`Core: Iconography renders 1`] = `
               </code>
             </td>
           </tr>
+          <tr>
+            <td>
+              <i
+                aria-hidden="true"
+                className="swepay-icon-menu-hamburger"
+              />
+            </td>
+            <td>
+              <code
+                className="code-tags code-tags-secondary"
+              >
+                menu-hamburger
+              </code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <i
+                aria-hidden="true"
+                className="swepay-icon-check-circle-filled-customizable"
+              />
+            </td>
+            <td>
+              <code
+                className="code-tags code-tags-secondary"
+              >
+                check-circle-filled-customizable
+              </code>
+            </td>
+          </tr>
           <tr>
             <td>
               <i
@@ -493,6 +523,12 @@ exports[`Core: Iconography renders 1`] = `
                     12
                     
 
+                    13
+                    
+
+                    14
+                    
+
                   </pre>
                 </td>
                 <td
@@ -520,6 +556,12 @@ exports[`Core: Iconography renders 1`] = `
                     &lt;i class="swepay-icon-plus-add" aria-hidden="true"&gt;&lt;/i&gt;
                     
 
+                    &lt;i class="swepay-icon-menu-hamburger" aria-hidden="true"&gt;&lt;/i&gt;
+                    
+
+                    &lt;i class="swepay-icon-check-circle-filled-customizable" aria-hidden="true"&gt;&lt;/i&gt;
+                    
+
                     &lt;i class="swepay-icon-check-circle-filled" aria-hidden="true"&gt;&lt;/i&gt;
                     
 
diff --git a/src/App/Identity/identity/Iconography/constants.js b/src/App/Identity/identity/Iconography/constants.js
index cea41b0c4a..922eeacf67 100644
--- a/src/App/Identity/identity/Iconography/constants.js
+++ b/src/App/Identity/identity/Iconography/constants.js
@@ -170,6 +170,14 @@ export const shapes = [
 		title: "Plus add",
 		code: "plus-add",
 	},
+	{
+		title: "Hamburger menu",
+		code: "menu-hamburger",
+	},
+	{
+		title: "Check circle filled customizable",
+		code: "check-circle-filled-customizable",
+	},
 	{
 		title: "Check circle filled",
 		code: "check-circle-filled",
diff --git a/src/icons/shapes/check_circle_filled_black.svg b/src/icons/shapes/check_circle_filled_black.svg
new file mode 100644
index 0000000000..b4c2a71ebc
--- /dev/null
+++ b/src/icons/shapes/check_circle_filled_black.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="11" fill="currentColor"/>
+<path d="M6.5 12L10.5 16L18 8" stroke="white" stroke-width="2"/>
+</svg>
diff --git a/src/icons/shapes/checkmark.svg b/src/icons/shapes/checkmark.svg
new file mode 100644
index 0000000000..555fa1ba0b
--- /dev/null
+++ b/src/icons/shapes/checkmark.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7295 1.68394L5.52318 10.4374L0.792894 5.70711L2.20711 4.29289L5.47682 7.56261L12.2705 0.316059L13.7295 1.68394Z" fill="white"/>
+</svg>
diff --git a/src/icons/shapes/chevron-left.svg b/src/icons/shapes/chevron-left.svg
new file mode 100644
index 0000000000..d479225c9d
--- /dev/null
+++ b/src/icons/shapes/chevron-left.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chevron-left">
+<path id="Vector" d="M15.2812 18L9.28125 12L15.2813 6" stroke="currentColor" stroke-width="1.91" stroke-miterlimit="10"/>
+</g>
+</svg>
diff --git a/src/icons/shapes/chevron-right.svg b/src/icons/shapes/chevron-right.svg
new file mode 100644
index 0000000000..683bf3047f
--- /dev/null
+++ b/src/icons/shapes/chevron-right.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chevron-right">
+<path id="Vector" d="M9.28125 6L15.2812 12L9.28125 18" stroke="currentColor" stroke-width="1.91" stroke-miterlimit="10"/>
+</g>
+</svg>
diff --git a/src/icons/shapes/chevron-up.svg b/src/icons/shapes/chevron-up.svg
new file mode 100644
index 0000000000..35d9ca31d0
--- /dev/null
+++ b/src/icons/shapes/chevron-up.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chevron-up">
+<path id="Vector" d="M6.28076 15.0005L12.2808 9.00049L18.2808 15.0005" stroke="currentColor" stroke-width="1.91" stroke-miterlimit="10"/>
+</g>
+</svg>
diff --git a/src/icons/shapes/menu_hamburger.svg b/src/icons/shapes/menu_hamburger.svg
new file mode 100644
index 0000000000..4b37c9b38d
--- /dev/null
+++ b/src/icons/shapes/menu_hamburger.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 5H23.5" stroke="currentColor" stroke-width="1.92" stroke-miterlimit="10"/>
+<path d="M0.5 12H23.5" stroke="currentColor" stroke-width="1.92" stroke-miterlimit="10"/>
+<path d="M0.5 19H23.5" stroke="currentColor" stroke-width="1.92" stroke-miterlimit="10"/>
+</svg>
diff --git a/src/less/core/iconography.less b/src/less/core/iconography.less
index 33488c0760..a375e2dc4c 100644
--- a/src/less/core/iconography.less
+++ b/src/less/core/iconography.less
@@ -634,7 +634,8 @@ i[class*=" swepay-icon-"] {
 	&.swepay-icon-chevron-right,
 	&.swepay-icon-close,
 	&.swepay-icon-minus-substract,
-	&.swepay-icon-plus-add {
+	&.swepay-icon-plus-add,
+	&.swepay-icon-menu-hamburger {
 		mask: var(--mask-path) 0 0 / var(--icon-size) var(--icon-size) no-repeat;
 	}
 
@@ -643,18 +644,15 @@ i[class*=" swepay-icon-"] {
 	}
 
 	&.swepay-icon-chevron-up {
-		--mask-path: url("../../icons/shapes/chevron_down.svg");
-		transform: rotate(180deg);
+		--mask-path: url("../../icons/shapes/chevron-up.svg");
 	}
 
 	&.swepay-icon-chevron-left {
-		--mask-path: url("../../icons/shapes/chevron_down.svg");
-		transform: rotate(90deg);
+		--mask-path: url("../../icons/shapes/chevron-left.svg");
 	}
 
 	&.swepay-icon-chevron-right {
-		--mask-path: url("../../icons/shapes/chevron_down.svg");
-		transform: rotate(-90deg);
+		--mask-path: url("../../icons/shapes/chevron-right.svg");
 	}
 
 	&.swepay-icon-close {
@@ -669,6 +667,10 @@ i[class*=" swepay-icon-"] {
 		--mask-path: url("../../icons/shapes/plus_add.svg");
 	}
 
+	&.swepay-icon-menu-hamburger {
+		--mask-path: url("../../icons/shapes/menu_hamburger.svg");
+	}
+
 	// ICONS styled differently since their color should never be modified.
 	// Therefore it uses background-image instead of mask
 
@@ -703,6 +705,17 @@ i[class*=" swepay-icon-"] {
 	&.swepay-icon-info-circle-filled {
 		background-image: url("../../icons/shapes/info_circle_filled.svg");
 	}
+
+	// Icons using a mixed approach (mask + background-image) to allow for color customization of the icon itself and the background separately
+	// (would use the mask approach if I could, but so far the strokes/shapes inside are disappearing)
+	&.swepay-icon-check-circle-filled-customizable {
+		background-color: currentColor; /* Color of the circle */
+		background-image: url("../../icons/shapes/checkmark.svg");
+		background-repeat: no-repeat;
+		background-position: 47% 53%;
+		background-size: 55%;
+		border-radius: 100%;
+	}
 }
 
 // shape (basic UI) custom icons end
diff --git a/src/less/utilities/color.less b/src/less/utilities/color.less
index b44afe1adf..5541178de0 100644
--- a/src/less/utilities/color.less
+++ b/src/less/utilities/color.less
@@ -37,3 +37,7 @@
 each(@bg-color-list, .(@color, @name) {
     .background-variant(~"bg-@{name}", @color);
 });
+
+.bg-blend-exclusion {
+	background-blend-mode: exclusion;
+}
diff --git a/src/scripts/main/nav/index.js b/src/scripts/main/nav/index.js
index ee77252df4..dbaf448c15 100644
--- a/src/scripts/main/nav/index.js
+++ b/src/scripts/main/nav/index.js
@@ -26,7 +26,8 @@ class Nav {
 
 			menu.setAttribute("href", "#");
 			menu.classList.add("nav-openbtn");
-			menu.innerHTML = "<i class='material-icons' aria-hidden='true'>menu</i>";
+			menu.innerHTML =
+				"<i class='swepay-icon-menu-hamburger' aria-hidden='true'></i>";
 
 			this._el.appendChild(menu);
 
@@ -81,7 +82,7 @@ class Nav {
 			passive: true,
 		});
 		this.submenus.forEach((submenu) =>
-			submenu.classList.remove("submenu-open")
+			submenu.classList.remove("submenu-open"),
 		);
 		this.submenuOpen = false;
 	}
@@ -89,7 +90,7 @@ class Nav {
 	/* Removes hidden class from list items */
 	_showItems() {
 		this.listItems.forEach((listItem) =>
-			listItem.classList.remove("responsive-hidden")
+			listItem.classList.remove("responsive-hidden"),
 		);
 	}
 
@@ -99,7 +100,7 @@ class Nav {
 			(notHidden) =>
 				!notHidden.classList.contains("responsive-hidden") &&
 				notHidden.querySelector(SELECTORS.SUB) === null &&
-				this._el.querySelector("UL") === notHidden.parentElement
+				this._el.querySelector("UL") === notHidden.parentElement,
 		);
 
 		if (this.submenus.length > 0) {