SWED-2276 refactor CSS Alert component clean

SwedbankPay · Jan 5, 2024 · 292fc74 · 292fc74
1 parent 71e0b6b
commit 292fc74
Show file tree

Hide file tree

Showing 13 changed files with 43 additions and 63 deletions.
diff --git a/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap b/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 alert-icon"
+        className="at-exclamation-triangle"
       />
       <p>
         <b>

diff --git a/src/App/ComponentsDocumentation/components/Alerts/__snapshots__/index.test.js.snap b/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 alert-icon"
+          className="at-info-circle"
         />
         <p>
           <b>

diff --git a/src/App/ComponentsDocumentation/components/Charts/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Charts/__snapshots__/index.test.js.snap
@@ -2507,7 +2507,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-exclamation-triangle alert-icon"
+        className="at-exclamation-triangle"
       />
       <p>
         <b>
@@ -3316,7 +3316,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle alert-icon"
+        className="at-info-circle"
       />
       <p>
         <b>
@@ -3640,7 +3640,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle alert-icon"
+        className="at-info-circle"
       />
       <p>
         <b>
@@ -3868,7 +3868,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle alert-icon"
+        className="at-info-circle"
       />
       <p>
         <b>
@@ -4167,7 +4167,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle alert-icon"
+        className="at-info-circle"
       />
       <p>
         <b>
@@ -4494,7 +4494,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle alert-icon"
+        className="at-info-circle"
       />
       <p>
         <b>
@@ -4847,7 +4847,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle alert-icon"
+        className="at-info-circle"
       />
       <p>
         <b>
@@ -5086,7 +5086,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle alert-icon"
+        className="at-info-circle"
       />
       <p>
         <b>
@@ -5313,7 +5313,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle alert-icon"
+        className="at-info-circle"
       />
       <p>
         <b>
@@ -5636,7 +5636,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle alert-icon"
+        className="at-info-circle"
       />
       <p>
         <b>
@@ -5893,7 +5893,7 @@ exports[`Dashboard: Charts renders 1`] = `
 
       <i
         aria-hidden="true"
-        className="at-info-circle alert-icon"
+        className="at-info-circle"
       />
       <p>
         <b>

diff --git a/src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Dialog/__snapshots__/index.test.js.snap
@@ -299,7 +299,7 @@ Array [
 
     <i
       aria-hidden="true"
-      className="at-warning alert-icon"
+      className="at-warning"
     />
     <p>
       <b>

diff --git a/src/App/GetStarted/get-started/ForDevelopers/__snapshots__/index.test.js.snap b/src/App/GetStarted/get-started/ForDevelopers/__snapshots__/index.test.js.snap
@@ -291,10 +291,8 @@ exports[`GetStarted: ForDevelopers Installation renders 1`] = `
       >
         <i
           aria-hidden="true"
-          className="material-icons alert-icon"
-        >
-          info
-        </i>
+          className="at-info-circle"
+        />
         <p>
           <b>
             Recommended way:
@@ -439,10 +437,8 @@ exports[`GetStarted: ForDevelopers Installation renders 1`] = `
       >
         <i
           aria-hidden="true"
-          className="material-icons alert-icon"
-        >
-          info
-        </i>
+          className="at-info-circle"
+        />
         <p>
           <b>
             Standards:
@@ -717,10 +713,8 @@ exports[`GetStarted: ForDevelopers Installation renders 1`] = `
       >
         <i
           aria-hidden="true"
-          className="material-icons alert-icon"
-        >
-          info
-        </i>
+          className="at-info-circle"
+        />
         <p>
           <b>
             Import only once:
@@ -812,10 +806,8 @@ exports[`GetStarted: ForDevelopers Installation renders 1`] = `
       >
         <i
           aria-hidden="true"
-          className="material-icons alert-icon"
-        >
-          info
-        </i>
+          className="at-info-circle"
+        />
         <p>
           <b>
             Web-perf:
@@ -1186,10 +1178,8 @@ exports[`GetStarted: ForDevelopers Installation renders 1`] = `
     >
       <i
         aria-hidden="true"
-        className="material-icons alert-icon"
-      >
-        info
-      </i>
+        className="at-info-circle"
+      />
       <p>
         <b>
           Target Browser:

diff --git a/src/App/GetStarted/get-started/ForDevelopers/index.js b/src/App/GetStarted/get-started/ForDevelopers/index.js
@@ -52,9 +52,7 @@ const InstallJS = () => (
 			</ul>
 		</p>
 		<div className="alert alert-informative">
-			<i className="material-icons alert-icon" aria-hidden="true">
-				info
-			</i>
+			<i className="at-info-circle" aria-hidden="true"></i>
 			<p>
 				<b>Recommended way:</b> Importing component per component means you do
 				not end up importing the javascript for components you are not using.
@@ -75,9 +73,7 @@ const InstallJS = () => (
 			dg.script.initAll();
 		</ComponentPreview>
 		<div className="alert alert-informative">
-			<i className="material-icons alert-icon" aria-hidden="true">
-				info
-			</i>
+			<i className="at-info-circle" aria-hidden="true"></i>
 			<p>
 				<b>Standards:</b> Our JS uses modern features such as optional-chaining.
 				If you&apos;re experiencing issues you might want to look at our browser
@@ -134,9 +130,7 @@ const InstallCSSLESS = () => (
 			],
 		</ComponentPreview>
 		<div className="alert alert-informative">
-			<i className="material-icons alert-icon" aria-hidden="true">
-				info
-			</i>
+			<i className="at-info-circle" aria-hidden="true"></i>
 			<p>
 				<b>Import only once:</b> Either import from the style file <em>OR</em>{" "}
 				from the build tool. If you import through both you will end up loading
@@ -161,9 +155,7 @@ const InstallIndividualComponents = () => (
 			url(&quot;@swedbankpay/design-guide/src/less/components/expandable.less&quot;);
 		</ComponentPreview>
 		<div className="alert alert-informative">
-			<i className="material-icons alert-icon" aria-hidden="true">
-				info
-			</i>
+			<i className="at-info-circle" aria-hidden="true"></i>
 			<p>
 				<b>Web-perf:</b> Importing the style of individual components means
 				fewer css imported, hence smaller file size. If you do not want to
@@ -356,9 +348,7 @@ const BrowserSupport = () => (
 			))}
 		</div>
 		<div className="alert alert-informative mt-4">
-			<i className="material-icons alert-icon" aria-hidden="true">
-				info
-			</i>
+			<i className="at-info-circle" aria-hidden="true"></i>
 			<p>
 				<b>Target Browser:</b> &quot;Last 3 versions, &gt; 1%, not dead&quot;
 			</p>

diff --git a/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap b/src/App/Patterns/content/Forms/__snapshots__/index.test.js.snap
@@ -1543,7 +1543,7 @@ exports[`Forms: index renders 1`] = `
 
                 <i
                   aria-hidden="true"
-                  className="at-exclamation-triangle alert-icon"
+                  className="at-exclamation-triangle"
                 />
                 <p>
                   <b>

diff --git a/src/App/components/Alert/__snapshots__/index.test.js.snap b/src/App/components/Alert/__snapshots__/index.test.js.snap
@@ -8,7 +8,7 @@ exports[`Component: Alert prop type is marked as required 1`] = `
 
   <i
     aria-hidden="true"
-    className="at- alert-icon"
+    className="at-"
   />
   
 
@@ -23,7 +23,7 @@ exports[`Component: Alert renders an alert with a close-button 1`] = `
 
   <i
     aria-hidden="true"
-    className="at- alert-icon"
+    className="at-"
   />
   
 
@@ -56,7 +56,7 @@ exports[`Component: Alert renders an alert with icon 1`] = `
 
   <i
     aria-hidden="true"
-    className="at-test alert-icon"
+    className="at-test"
   />
   
 
@@ -71,7 +71,7 @@ exports[`Component: Alert renders an alert with text 1`] = `
 
   <i
     aria-hidden="true"
-    className="at- alert-icon"
+    className="at-"
   />
   <p>
     test
@@ -89,7 +89,7 @@ exports[`Component: Alert renders an alert with the correct type recieved from i
 
   <i
     aria-hidden="true"
-    className="at- alert-icon"
+    className="at-"
   />
   
 
@@ -104,7 +104,7 @@ exports[`Component: Alert renders an alert without a close-button if no close pr
 
   <i
     aria-hidden="true"
-    className="at- alert-icon"
+    className="at-"
   />
   
 
@@ -119,7 +119,7 @@ exports[`Component: Alert renders an alert without an icon if no icon prop is pr
 
   <i
     aria-hidden="true"
-    className="at- alert-icon"
+    className="at-"
   />
   
 
@@ -134,7 +134,7 @@ exports[`Component: Alert renders an alert without text if no text prop is provi
 
   <i
     aria-hidden="true"
-    className="at- alert-icon"
+    className="at-"
   />
   
 

diff --git a/src/App/components/Alert/index.js b/src/App/components/Alert/index.js
@@ -12,7 +12,7 @@ const Alert = ({ id, type, icon = "", close, text, className }) => {
 	return (
 		<div id={id} className={alertClasses}>
 			{"\n"}
-			<i className={`at-${icon} alert-icon`} aria-hidden="true"></i>
+			<i className={`at-${icon}`} aria-hidden="true"></i>
 			{text}
 			{"\n"}
 			{close ? (

diff --git a/src/App/components/Alert/index.test.js b/src/App/components/Alert/index.test.js
@@ -35,7 +35,7 @@ describe("Component: Alert", () => {
 		const { container } = render(<Alert type="test" icon="test" />);
 
 		expect(container.querySelectorAll("i").length).toBe(1);
-		expect(container.querySelector("i")).toHaveClass("at-test alert-icon");
+		expect(container.querySelector("i")).toHaveClass("at-test");
 		// checks icon is hidden for screen-readers
 		expect(container.querySelector("i")).toHaveAttribute("aria-hidden", "true");
 

diff --git a/src/App/docutils/DeprecatedComponentAlert/__snapshots__/index.test.js.snap b/src/App/docutils/DeprecatedComponentAlert/__snapshots__/index.test.js.snap
@@ -8,7 +8,7 @@ exports[`Utilities: DeprecatedComponentAlert renders 1`] = `
 
   <i
     aria-hidden="true"
-    className="at-exclamation-triangle alert-icon"
+    className="at-exclamation-triangle"
   />
   
 

diff --git a/src/App/docutils/ExperimentalComponentAlert/__snapshots__/index.test.js.snap b/src/App/docutils/ExperimentalComponentAlert/__snapshots__/index.test.js.snap
@@ -8,7 +8,7 @@ exports[`Utilities: ExperimentalComponentAlert renders 1`] = `
 
   <i
     aria-hidden="true"
-    className="at-exclamation-triangle alert-icon"
+    className="at-exclamation-triangle"
   />
   
 

diff --git a/src/less/components/alert.less b/src/less/components/alert.less
@@ -13,7 +13,7 @@
 	border-radius: 0.25rem;
 	background-color: var(--color-bg);
 
-	& > i {
+	& > i[aria-hidden="true"]:first-child {
 		color: var(--color-icon);
 		margin-right: 1rem;
 	}