Merge pull request #929 from SwedbankPay/feature/SWED-2380-migrate_ic…

…ons_DS_website SWED-2380 migrate icons DS website
SwedbankPay · Feb 8, 2024 · 28aa610 · 28aa610
2 parents 146a01e + 1f17fe4
commit 28aa610
Show file tree

Hide file tree

Showing 79 changed files with 811 additions and 1,112 deletions.
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -1,26 +1,17 @@
 # Changelog
 
-## \[10.10.0\] - 06.02.2024
+## \[10.10.1\] - 06.02.2024
 
 ## Component changes
 
 ### Non breaking UI changes
 
-- 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": svg icons saved locally to complement the ones 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"
+- Icons migration step 2 (still non-breaking. But the migrations is decided and is happening, so move when you can. Silent support of Material-icons until next major version release).
 
 ## 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)
+- Migrated the icons used on the documentation website from Material-icons to a combination of Atlas and our own custom swepay-icons
diff --git a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js
@@ -11,7 +11,10 @@ test("Accordion page exist", async ({ page }) => {
 	await expect(page.getByRole("link", { name: "Accordion" })).toHaveCount(
 		page.viewportSize().width < 991 ? 1 : 2,
 	);
-	await page.getByText("calendar_view_dayAccordionarrow_forward").click();
+	await page
+		.getByLabel("components overview")
+		.getByRole("link", { name: "Accordion" })
+		.click();
 	await expect(page).toHaveTitle(/Accordion/);
 	await expect(
 		page.getByRole("heading", { name: "Accordion", exact: true, level: 1 }),

diff --git a/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap
@@ -819,10 +819,9 @@ exports[`Components: ActionList renders 1`] = `
             onClick={[Function]}
           >
             <i
-              className="material-icons-outlined"
-            >
-              content_copy
-            </i>
+              aria-hidden="true"
+              className="at-clipboard small"
+            />
             <div
               id="tooltipCopy"
               role="tooltip"
@@ -1044,10 +1043,9 @@ exports[`Components: ActionList renders 1`] = `
             onClick={[Function]}
           >
             <i
-              className="material-icons-outlined"
-            >
-              content_copy
-            </i>
+              aria-hidden="true"
+              className="at-clipboard small"
+            />
             <div
               id="tooltipCopy"
               role="tooltip"
@@ -1261,10 +1259,9 @@ exports[`Components: ActionList renders 1`] = `
             onClick={[Function]}
           >
             <i
-              className="material-icons-outlined"
-            >
-              content_copy
-            </i>
+              aria-hidden="true"
+              className="at-clipboard small"
+            />
             <div
               id="tooltipCopy"
               role="tooltip"
@@ -1478,10 +1475,9 @@ exports[`Components: ActionList renders 1`] = `
             onClick={[Function]}
           >
             <i
-              className="material-icons-outlined"
-            >
-              content_copy
-            </i>
+              aria-hidden="true"
+              className="at-clipboard small"
+            />
             <div
               id="tooltipCopy"
               role="tooltip"
@@ -1684,10 +1680,9 @@ exports[`Components: ActionList renders 1`] = `
               onClick={[Function]}
             >
               <i
-                className="material-icons-outlined"
-              >
-                content_copy
-              </i>
+                aria-hidden="true"
+                className="at-clipboard small"
+              />
               <div
                 id="tooltipCopy"
                 role="tooltip"

diff --git a/src/App/ComponentsDocumentation/components/Breadcrumb/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Breadcrumb/__snapshots__/index.test.js.snap
@@ -104,10 +104,9 @@ exports[`Documentation: Breadcrumb renders 1`] = `
             onClick={[Function]}
           >
             <i
-              className="material-icons-outlined"
-            >
-              content_copy
-            </i>
+              aria-hidden="true"
+              className="at-clipboard small"
+            />
             <div
               id="tooltipCopy"
               role="tooltip"
@@ -256,10 +255,9 @@ exports[`Documentation: Breadcrumb renders 1`] = `
             onClick={[Function]}
           >
             <i
-              className="material-icons-outlined"
-            >
-              content_copy
-            </i>
+              aria-hidden="true"
+              className="at-clipboard small"
+            />
             <div
               id="tooltipCopy"
               role="tooltip"

diff --git a/src/App/ComponentsDocumentation/components/Buttons/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Buttons/__snapshots__/index.test.js.snap
@@ -99,10 +99,9 @@ exports[`Documentation: Buttons Combining buttons renders 1`] = `
           onClick={[Function]}
         >
           <i
-            className="material-icons-outlined"
-          >
-            content_copy
-          </i>
+            aria-hidden="true"
+            className="at-clipboard small"
+          />
           <div
             id="tooltipCopy"
             role="tooltip"
@@ -288,10 +287,9 @@ exports[`Documentation: Buttons Developer documentation renders 1`] = `
           onClick={[Function]}
         >
           <i
-            className="material-icons-outlined"
-          >
-            content_copy
-          </i>
+            aria-hidden="true"
+            className="at-clipboard small"
+          />
           <div
             id="tooltipCopy"
             role="tooltip"
@@ -428,10 +426,9 @@ exports[`Documentation: Buttons Developer documentation renders 1`] = `
           onClick={[Function]}
         >
           <i
-            className="material-icons-outlined"
-          >
-            content_copy
-          </i>
+            aria-hidden="true"
+            className="at-clipboard small"
+          />
           <div
             id="tooltipCopy"
             role="tooltip"

diff --git a/src/App/ComponentsDocumentation/components/Card/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Card/__snapshots__/index.test.js.snap
@@ -12,10 +12,8 @@ Array [
   >
     <i
       aria-hidden="true"
-      className="material-icons"
-    >
-      sentiment_very_dissatisfied
-    </i>
+      className="at-axe"
+    />
     Being removed
   </span>,
   <p>
@@ -76,10 +74,9 @@ Array [
           onClick={[Function]}
         >
           <i
-            className="material-icons-outlined"
-          >
-            content_copy
-          </i>
+            aria-hidden="true"
+            className="at-clipboard small"
+          />
           <div
             id="tooltipCopy"
             role="tooltip"
@@ -381,10 +378,9 @@ Array [
           onClick={[Function]}
         >
           <i
-            className="material-icons-outlined"
-          >
-            content_copy
-          </i>
+            aria-hidden="true"
+            className="at-clipboard small"
+          />
           <div
             id="tooltipCopy"
             role="tooltip"
@@ -1013,10 +1009,9 @@ Array [
           onClick={[Function]}
         >
           <i
-            className="material-icons-outlined"
-          >
-            content_copy
-          </i>
+            aria-hidden="true"
+            className="at-clipboard small"
+          />
           <div
             id="tooltipCopy"
             role="tooltip"

diff --git a/...p/ComponentsDocumentation/components/Charts/Introduction/__snapshots__/index.test.js.snap b/...p/ComponentsDocumentation/components/Charts/Introduction/__snapshots__/index.test.js.snap
@@ -39,10 +39,9 @@ Array [
           onClick={[Function]}
         >
           <i
-            className="material-icons-outlined"
-          >
-            content_copy
-          </i>
+            aria-hidden="true"
+            className="at-clipboard small"
+          />
           <div
             id="tooltipCopy"
             role="tooltip"
@@ -197,10 +196,9 @@ Array [
           onClick={[Function]}
         >
           <i
-            className="material-icons-outlined"
-          >
-            content_copy
-          </i>
+            aria-hidden="true"
+            className="at-clipboard small"
+          />
           <div
             id="tooltipCopy"
             role="tooltip"