Merge branch '17-diffuser-une-enquete-dans-la-custom-popup' into 'dev'

feat(custom-popup): added link in custom modal

See merge request !883

src/components/CustomPopup/CustomPopupModal.tsx

@@ -38,7 +38,6 @@ const CustomPopupModal: React.FC<CustomPopupModalProps> = ({
       }}
     >
       <div id="accessibility-title">{customPopup.title}</div>
-      <div id="accessibility-content">{customPopup.description}</div>
       <IconButton
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
@@ -47,15 +46,18 @@ const CustomPopupModal: React.FC<CustomPopupModalProps> = ({
         <Icon icon={CloseIcon} size={16} />
       </IconButton>
       <div className="customPopupModal">
-        <StyledIcon icon={Speaker} size={100} className={'warn-icon'} />
+        <StyledIcon icon={Speaker} size={100} />
 
         <div className="customPopup-title text-20-bold">
           {customPopup.title}
         </div>
 
-        <div className="customPopup-content text-16-normal">
-          {customPopup.description}
-        </div>
+        <div
+          className="customPopup-content text-16-normal"
+          dangerouslySetInnerHTML={{
+            __html: customPopup.description,
+          }}
+        />
 
         <Button
           onClick={handleCloseClick}

src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap

@@ -417,11 +417,6 @@ exports[`CustomPopupModal component should render correctly 1`] = `
                       >
                         Bold title
                       </div>
-                      <div
-                        id="accessibility-content"
-                      >
-                        Interesting description
-                      </div>
                       <button
                         aria-label="feedback.accessibility.button_close"
                         class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
@@ -450,7 +445,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
                       >
                         <svg
                           aria-hidden="true"
-                          class="warn-icon styles__icon___23x3R"
+                          class="styles__icon___23x3R"
                           height="100"
                           width="100"
                         >
@@ -695,11 +690,6 @@ exports[`CustomPopupModal component should render correctly 1`] = `
                             >
                               Bold title
                             </div>
-                            <div
-                              id="accessibility-content"
-                            >
-                              Interesting description
-                            </div>
                             <WithStyles(ForwardRef(IconButton))
                               aria-label="feedback.accessibility.button_close"
                               className="modal-paper-close-button"
@@ -829,27 +819,25 @@ exports[`CustomPopupModal component should render correctly 1`] = `
                               className="customPopupModal"
                             >
                               <StyledIcon
-                                className="warn-icon"
                                 icon="test-file-stub"
                                 size={100}
                               >
                                 <Icon
                                   aria-hidden={true}
-                                  className="warn-icon"
                                   icon="test-file-stub"
                                   size={100}
                                   spin={false}
                                 >
                                   <Component
                                     aria-hidden={true}
-                                    className="warn-icon styles__icon___23x3R"
+                                    className="styles__icon___23x3R"
                                     height={100}
                                     style={Object {}}
                                     width={100}
                                   >
                                     <svg
                                       aria-hidden={true}
-                                      className="warn-icon styles__icon___23x3R"
+                                      className="styles__icon___23x3R"
                                       height={100}
                                       style={Object {}}
                                       width={100}
@@ -868,9 +856,12 @@ exports[`CustomPopupModal component should render correctly 1`] = `
                               </div>
                               <div
                                 className="customPopup-content text-16-normal"
-                              >
-                                Interesting description
-                              </div>
+                                dangerouslySetInnerHTML={
+                                  Object {
+                                    "__html": "Interesting description",
+                                  }
+                                }
+                              />
                               <WithStyles(ForwardRef(Button))
                                 classes={
                                   Object {

src/components/CustomPopup/customPopupModal.scss

@@ -6,29 +6,35 @@
 }
 
 .customPopupModal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 1rem;
   max-width: 20rem;
 
-  .warn-icon {
-    margin: 1rem auto;
-    display: block;
-  }
   .customPopup-title {
-    text-align: center;
     color: $gold-shadow;
     margin: 1rem auto;
   }
   .customPopup-content {
     text-align: center;
-    color: $grey-bright;
+    font-weight: 700;
+    p {
+      color: $grey-bright;
+    }
+
+    a {
+      color: $gold-shadow;
+    }
   }
 
   button.btn-highlight {
-    padding: 0.65rem;
+    padding: 0.65rem 2.5rem;
+    margin-top: 1rem;
+    width: unset;
   }
 }
 
-#accessibility-title,
-#accessibility-content {
+#accessibility-title {
   display: none;
 }