SWED-2276 add more custom icons + improve hamburger menu + release notes

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)

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>

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;
                     
 

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",

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

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;
+}

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,15 +82,15 @@ class Nav {
 			passive: true,
 		});
 		this.submenus.forEach((submenu) =>
-			submenu.classList.remove("submenu-open")
+			submenu.classList.remove("submenu-open"),
 		);
 		this.submenuOpen = false;
 	}
 
 	/* 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) {