fix(alert): Warning icon (#329)

dataesr · Jan 27, 2023 · 0d16873 · 0d16873
1 parent d1e9f97
commit 0d16873
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 37 deletions.
diff --git a/example/src/components/Alert/Alert.jsx b/example/src/components/Alert/Alert.jsx
@@ -21,6 +21,14 @@ const AlertExample = () => (
       description="Error"
       small
     />
+    <Alert
+      type="warning"
+      description="Warning !!!!"
+    />
+    <Alert
+      type="new"
+      description="Awesome news"
+    />
   </Col>
 );
 

diff --git a/src/style/reset-dsfr.css b/src/style/reset-dsfr.css
@@ -28,32 +28,32 @@ span.error {
 
 /** Icons system from remixicon */
 
-[target="_blank"]:after,
+[target='_blank']:after,
 .fr-search-bar button.fr-btn:before,
 .fr-error-text:before,
 .fr-valid-text:before,
 .fr-header__navbar .fr-btn--menu:before,
 .fr-header__navbar .fr-btn--search:before,
 .fr-nav__btn:after,
 .fr-sidemenu__btn:after,
-button.fr-accordion__btn[aria-expanded="true"]:after,
+button.fr-accordion__btn[aria-expanded='true']:after,
 button.fr-accordion__btn:after,
 .fr-link--close:before,
 .fr-notice button.fr-btn--close:before,
-button[class^="fr-pagination__link"]:before,
-a[class^="fr-btn"]:before,
-button[class^="fr-btn"]:before,
+button[class^='fr-pagination__link']:before,
+a[class^='fr-btn']:before,
+button[class^='fr-btn']:before,
 .fr-translate button.fr-translate__btn:before,
 .fr-translate button.fr-translate__btn:after,
-[class^="fr-alert"]:before,
+[class^='fr-alert']:before,
 div.fr-notice--info .fr-notice__body:before,
 #ds-fr--share-facebook .fr-btn--facebook:before,
 #ds-fr--share-linkedin .fr-btn--linkedin:before,
 #ds-fr--share-copy .fr-btn--copy:before,
 #ds-fr--share-mail .fr-btn--mail:before,
 #ds-fr--share-twitter .fr-btn--twitter:before,
 .fr-breadcrumb__list li:not(:first-child):before {
-  font-family: "remixicon";
+  font-family: 'remixicon';
   box-shadow: none;
   background-color: inherit !important;
   mask-image: inherit !important;
@@ -66,49 +66,54 @@ div.fr-notice--info .fr-notice__body:before,
   Accordion
  */
 button.fr-accordion__btn:after {
-  content: "\ea13";
+  content: '\ea13';
   color: var(--text-action-high-grey);
 }
 
-button.fr-accordion__btn[aria-expanded="true"]:after {
-  content: "\f1af";
+button.fr-accordion__btn[aria-expanded='true']:after {
+  content: '\f1af';
 }
 
 /**
   Alert
  */
 
-[class^="fr-alert"]:before {
+[class^='fr-alert']:before {
   font-size: 1.4rem;
 }
 
 .fr-alert--success:before,
 .fr-valid-text:before {
-  content: "\eb80";
+  content: '\eb80';
 }
 
 .fr-alert--error:before,
 .fr-error-text:before {
-  content: "\f0eb";
+  content: '\f0eb';
 }
 
 .fr-alert--info:before {
-  content: "\ee58";
+  content: '\ee58';
 }
+
+.fr-alert--warning:before {
+  content: '\eca0';
+}
+
 /**********************************/
 
 .fr-notice button.fr-btn--close:before,
 .fr-link--close:before {
-  content: "\eb99" !important;
+  content: '\eb99' !important;
 }
 
 /**
   Footer, Link
  */
 
-[target="_blank"]:after,
-[class^="fr-link"][target="_blank"]:after {
-  content: "\ecaf" !important;
+[target='_blank']:after,
+[class^='fr-link'][target='_blank']:after {
+  content: '\ecaf' !important;
   height: inherit;
   --icon-size: 1rem;
   font-size: 0.9rem;
@@ -119,21 +124,21 @@ button.fr-accordion__btn[aria-expanded="true"]:after {
  */
 
 .fr-search-bar button.fr-btn:before {
-  content: "\f0d1";
+  content: '\f0d1';
 }
 
 .fr-header__navbar .fr-btn--menu:before {
-  content: "\ef3e";
+  content: '\ef3e';
   font-size: 1.2rem;
 }
 
 .fr-header__navbar .fr-btn--search:before {
-  content: "\f0d1";
+  content: '\f0d1';
   font-size: 1.2rem;
 }
 
 .fr-nav__btn:after {
-  content: "\ea4e";
+  content: '\ea4e';
 }
 
 .fr-fi-theme-fill:after,
@@ -146,31 +151,31 @@ button.fr-accordion__btn[aria-expanded="true"]:after {
  */
 
 #ds-fr--share-facebook .fr-btn--facebook:before {
-  content: "\ecbb";
+  content: '\ecbb';
   font-size: 1.4rem;
   line-height: 1.5rem;
 }
 
 #ds-fr--share-twitter .fr-btn--twitter:before {
-  content: "\f23b";
+  content: '\f23b';
   font-size: 1.4rem;
   line-height: 1.5rem;
 }
 
 #ds-fr--share-linkedin .fr-btn--linkedin:before {
-  content: "\eeb4";
+  content: '\eeb4';
   font-size: 1.4rem;
   line-height: 1.5rem;
 }
 
 #ds-fr--share-mail .fr-btn--mail:before {
-  content: "\eef6";
+  content: '\eef6';
   font-size: 1.4rem;
   line-height: 1.5rem;
 }
 
 #ds-fr--share-copy .fr-btn--copy:before {
-  content: "\ecd5";
+  content: '\ecd5';
   font-size: 1.4rem;
   line-height: 1.5rem;
 }
@@ -179,53 +184,53 @@ button.fr-accordion__btn[aria-expanded="true"]:after {
   Pagination
  */
 
-button[class^="fr-pagination__link"]:before {
+button[class^='fr-pagination__link']:before {
   font-size: 1.4rem;
   line-height: 1.5rem;
 }
 
 button.fr-pagination__link--prev:before {
-  content: "\ea64";
+  content: '\ea64';
 }
 
 button.fr-pagination__link--next:before {
-  content: "\ea6e";
+  content: '\ea6e';
 }
 
 button.fr-pagination__link--first:before {
-  content: "\f142";
+  content: '\f142';
 }
 
 button.fr-pagination__link--last:before {
-  content: "\f146";
+  content: '\f146';
 }
 
 /**
     Icons
  */
 
 div.fr-notice--info .fr-notice__body:before {
-  content: "\ee59";
+  content: '\ee59';
   font-size: 1.4rem;
   line-height: 1.5rem;
 }
 
 .fr-translate button.fr-translate__btn:before {
-  content: "\f226";
+  content: '\f226';
 }
 
 .fr-translate button.fr-translate__btn:after {
-  content: "\ea4d";
+  content: '\ea4d';
 }
 
 /**
     Sidemenu
   */
 
 .fr-sidemenu__btn[aria-expanded]:after {
-  content: "\ea4e" !important;
+  content: '\ea4e' !important;
 }
 
 .fr-breadcrumb__list li:not(:first-child):before {
-  content: "\ea54" !important;
+  content: '\ea54' !important;
 }