SWED-2379 migrate components snippets icons

RELEASE_NOTES.md

@@ -1,17 +1,25 @@
 # Changelog
 
-## \[10.10.1\] - 06.02.2024
+## \[10.10.1\] - xx.02.2024
 
 ## Component changes
 
 ### Non breaking UI changes
 
 - 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).
+  - Toast icons are modified. Since Toast is created entirely via a script shipped in the package, nothing is requiring from devs consuming the package. But expect a change in the icon used by the Toast component.
+
+### NON Breaking UI changes BUT CAN & SHOULD modify code when have time
+
+- Tags
+  - the close icon is now a cross set via CSS only, no need to add an `<i>` element anymore
+- Dialog
+  - the close icon is now a cross set via CSS only, no need to add an `<i>` element anymore
 
 ## Maintenance
 
 - npm packages dependencies upgrades
 
 ## Design System website
 
-- Migrated the icons used on the documentation website from Material-icons to a combination of Atlas and our own custom swepay-icons
+- Migrate icons used on the DS documentation website from Material-icons to Atlas + Swepay-icon custom icons

src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap

@@ -682,7 +682,7 @@ exports[`Components: ActionList renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-exclamation-triangle"
+        className="swepay-icon-error-triangle-filled"
       />
       <p>
         <b>
@@ -752,10 +752,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              bookmark
-            </i>
+              className="at-bookmark-star small"
+            />
             Add bookmark
           </a>
 
@@ -766,10 +764,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              business_center
-            </i>
+              className="at-business-suitcase small"
+            />
             Add client
           </a>
 
@@ -780,10 +776,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              add_circle
-            </i>
+              className="at-plus-circle small"
+            />
             Add document
           </a>
 
@@ -794,10 +788,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              person_add
-            </i>
+              className="at-user-plus small"
+            />
             Add user
           </a>
 
@@ -893,16 +885,16 @@ exports[`Components: ActionList renders 1`] = `
                       &lt;div class="action-menu" aria-labelledby="actionListToggle"&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;bookmark&lt;/i&gt;Add bookmark&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-bookmark-star small" aria-hidden="true"&gt;&lt;/i&gt;Add bookmark&lt;/a&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;business_center&lt;/i&gt;Add client&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-business-suitcase small" aria-hidden="true"&gt;&lt;/i&gt;Add client&lt;/a&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;add_circle&lt;/i&gt;Add document&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-plus-circle small" aria-hidden="true"&gt;&lt;/i&gt;Add document&lt;/a&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;person_add&lt;/i&gt;Add user&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-user-plus small" aria-hidden="true"&gt;&lt;/i&gt;Add user&lt;/a&gt;
 
 
                       &lt;/div&gt;
@@ -976,10 +968,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              bookmark
-            </i>
+              className="at-bookmark-star small"
+            />
             Add bookmark
           </a>
 
@@ -990,10 +980,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              business_center
-            </i>
+              className="at-business-suitcase small"
+            />
             Add client
           </a>
 
@@ -1004,10 +992,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              add_circle
-            </i>
+              className="at-plus-circle small"
+            />
             Add document
           </a>
 
@@ -1018,10 +1004,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              person_add
-            </i>
+              className="at-user-plus small"
+            />
             Add user
           </a>
 
@@ -1117,16 +1101,16 @@ exports[`Components: ActionList renders 1`] = `
                       &lt;div class="action-menu" aria-labelledby="actionListToggle"&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;bookmark&lt;/i&gt;Add bookmark&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-bookmark-star small" aria-hidden="true"&gt;&lt;/i&gt;Add bookmark&lt;/a&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;business_center&lt;/i&gt;Add client&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-business-suitcase small" aria-hidden="true"&gt;&lt;/i&gt;Add client&lt;/a&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;add_circle&lt;/i&gt;Add document&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-plus-circle small" aria-hidden="true"&gt;&lt;/i&gt;Add document&lt;/a&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;person_add&lt;/i&gt;Add user&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-user-plus small" aria-hidden="true"&gt;&lt;/i&gt;Add user&lt;/a&gt;
 
 
                       &lt;/div&gt;
@@ -1192,10 +1176,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              bookmark
-            </i>
+              className="at-bookmark-star small"
+            />
             Add bookmark
           </a>
 
@@ -1206,10 +1188,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              business_center
-            </i>
+              className="at-business-suitcase small"
+            />
             Add client
           </a>
 
@@ -1220,10 +1200,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              add_circle
-            </i>
+              className="at-plus-circle small"
+            />
             Add document
           </a>
 
@@ -1234,10 +1212,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              person_add
-            </i>
+              className="at-user-plus small"
+            />
             Add user
           </a>
 
@@ -1333,16 +1309,16 @@ exports[`Components: ActionList renders 1`] = `
                       &lt;div class="action-menu" aria-labelledby="actionListToggle"&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;bookmark&lt;/i&gt;Add bookmark&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-bookmark-star small" aria-hidden="true"&gt;&lt;/i&gt;Add bookmark&lt;/a&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;business_center&lt;/i&gt;Add client&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-business-suitcase small" aria-hidden="true"&gt;&lt;/i&gt;Add client&lt;/a&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;add_circle&lt;/i&gt;Add document&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-plus-circle small" aria-hidden="true"&gt;&lt;/i&gt;Add document&lt;/a&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;person_add&lt;/i&gt;Add user&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-user-plus small" aria-hidden="true"&gt;&lt;/i&gt;Add user&lt;/a&gt;
 
 
                       &lt;/div&gt;
@@ -1408,10 +1384,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              bookmark
-            </i>
+              className="at-bookmark-star small"
+            />
             Add bookmark
           </a>
 
@@ -1422,10 +1396,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              business_center
-            </i>
+              className="at-business-suitcase small"
+            />
             Add client
           </a>
 
@@ -1436,10 +1408,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              add_circle
-            </i>
+              className="at-plus-circle small"
+            />
             Add document
           </a>
 
@@ -1450,10 +1420,8 @@ exports[`Components: ActionList renders 1`] = `
           >
             <i
               aria-hidden="true"
-              className="material-icons"
-            >
-              person_add
-            </i>
+              className="at-user-plus small"
+            />
             Add user
           </a>
 
@@ -1549,16 +1517,16 @@ exports[`Components: ActionList renders 1`] = `
                       &lt;div class="action-menu" aria-labelledby="actionListToggle"&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;bookmark&lt;/i&gt;Add bookmark&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-bookmark-star small" aria-hidden="true"&gt;&lt;/i&gt;Add bookmark&lt;/a&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;business_center&lt;/i&gt;Add client&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-business-suitcase small" aria-hidden="true"&gt;&lt;/i&gt;Add client&lt;/a&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;add_circle&lt;/i&gt;Add document&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-plus-circle small" aria-hidden="true"&gt;&lt;/i&gt;Add document&lt;/a&gt;
 
 
-                          &lt;a href="#"&gt;&lt;i class="material-icons" aria-hidden="true"&gt;person_add&lt;/i&gt;Add user&lt;/a&gt;
+                          &lt;a href="#"&gt;&lt;i class="at-user-plus small" aria-hidden="true"&gt;&lt;/i&gt;Add user&lt;/a&gt;
 
 
                       &lt;/div&gt;

src/App/ComponentsDocumentation/components/ActionList/index.js

@@ -11,19 +11,19 @@ import NpmInformation from "@docutils/NpmInformation";
 const items = [
 	{
 		name: "Add bookmark",
-		icon: "bookmark",
+		icon: "at-bookmark-star",
 	},
 	{
 		name: "Add client",
-		icon: "business_center",
+		icon: "at-business-suitcase",
 	},
 	{
 		name: "Add document",
-		icon: "add_circle",
+		icon: "at-plus-circle",
 	},
 	{
 		name: "Add user",
-		icon: "person_add",
+		icon: "at-user-plus",
 	},
 ];
 
@@ -87,7 +87,7 @@ const ActionList = () => {
 		<DocContainer>
 			<Alert
 				type="danger"
-				icon="exclamation-triangle"
+				icon="swepay-icon-error-triangle-filled"
 				text={
 					<p>
 						<b>Deprecated:</b> Be aware, this component will not be maintained

src/App/ComponentsDocumentation/components/Alerts/__snapshots__/index.test.js.snap

@@ -20,7 +20,7 @@ exports[`Documentation: Alerts Content guidelines renders 1`] = `
 
         <i
           aria-hidden="true"
-          className="at-info-circle"
+          className="swepay-icon-info-circle-filled"
         />
         <p>
           <b>