uniformize Modal CSS

InseeFr · Sep 20, 2023 · e504692 · e504692
1 parent f232033
commit e504692
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 95 deletions.
diff --git a/src/constants/dictionary.js b/src/constants/dictionary.js
@@ -753,11 +753,11 @@ const dictionary = {
     en: 'Current questionnaire',
   },
   CollectedVariableType: {
-    fr: 'Collecté',
+    fr: 'Collectée',
     en: 'Collected',
   },
   CalculatedVariableType: {
-    fr: 'Calculé',
+    fr: 'Calculée',
     en: 'Calculated',
   },
   ExternalVariableType: {

diff --git a/src/layout/generic-input/components/generic-input.jsx b/src/layout/generic-input/components/generic-input.jsx
@@ -34,26 +34,11 @@ export const defaultProps = {
 
 // Components
 
-export const customModalStyles = {
-  content: {
-    display: 'absolute',
-    textAlign: 'center',
-    verticAlalign: 'middle',
-    top: '40%',
-    left: '50%',
-    right: 'auto',
-    bottom: 'auto',
-    marginRight: '-50%',
-    width: '400px',
-    alignItems: 'center',
-    transform: 'translate(-50%, -50%)',
-  },
-};
 export const customLoopModalStyles = {
   content: {
     display: 'absolute',
     textAlign: 'center',
-    verticAlalign: 'middle',
+    verticalAlign: 'middle',
     top: '25%',
     left: '50%',
     right: 'auto',
@@ -153,13 +138,13 @@ function GenericInput(props) {
                 isOpen
                 ariaHideApp={false}
                 shouldCloseOnOverlayClick={false}
-                style={customModalStyles}
+                className="custom-modal"
               >
                 <p>{Dictionary.modification}</p>
-                <button onClick={onCancel} style={customModalbuttonStyles}>
+                <button onClick={onCancel} className="modal-button">
                   {Dictionary.no}
                 </button>
-                <button onClick={onConfirm} style={customModalbuttonStyles}>
+                <button onClick={onConfirm} className="modal-button">
                   {Dictionary.yes}
                 </button>
               </ReactModal>
@@ -286,33 +271,30 @@ function GenericInput(props) {
       <ReactModal
         isOpen={showNewUnsavedModal}
         ariaHideApp={false}
-        style={customModalStyles}
+        className="custom-modal"
       >
         <p>{Dictionary.notSaved}</p>
-        <button onClick={handleCloseModal} style={customModalbuttonStyles}>
+        <button onClick={handleCloseModal} className="modal-button">
           {Dictionary.close}
         </button>
       </ReactModal>
       <ReactModal
         isOpen={showVisualizationErrorPopup}
         ariaHideApp={false}
-        style={customModalStyles}
+        className="custom-modal"
       >
         <p>{Dictionary.visualizationError}</p>
-        <button
-          onClick={removeVisualizationError}
-          style={customModalbuttonStyles}
-        >
+        <button onClick={removeVisualizationError} className="modal-button">
           {Dictionary.close}
         </button>
       </ReactModal>
       <ReactModal
         isOpen={showNewLoopModal}
         ariaHideApp={false}
-        style={customLoopModalStyles}
+        className="custom-modal"
       >
         <p>{Dictionary.loopNotSaved}</p>
-        <button onClick={handleCloseModal} style={customModalbuttonStyles}>
+        <button onClick={handleCloseModal} className="modal-button">
           {Dictionary.close}
         </button>
       </ReactModal>

diff --git a/src/scss/_global.scss b/src/scss/_global.scss
@@ -257,6 +257,34 @@ a {
   }
 }
 
+.custom-modal {
+  @extend .container;
+  border: 1px solid black;
+  position: absolute;
+  text-align: center;
+  vertical-align: middle;
+  padding: 10px;
+  top: 40%;
+  left: 50%;
+  right: auto;
+  bottom: auto;
+  margin-right: -50%;
+  width: 400px;
+  align-items: center;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  border-radius: 4px;
+}
+
+.modal-button {
+  background-color: #15417a;
+  color: white;
+  box-shadow: none;
+  border: none;
+  padding: 5px 10px;
+  margin-right: 10px;
+}
+
 .alert-triangle {
   position: relative;
   background-color: red;
@@ -380,10 +408,6 @@ a {
   margin: -50px 0px 0px -50px;
 }
 
-.customLoopModalStyles {
-  overflow: scroll;
-}
-
 .questionnaire-element-filter {
   margin: 10px;
   width: 35%;

diff --git a/src/scss/inc/_page-questionnaire.scss b/src/scss/inc/_page-questionnaire.scss
@@ -119,7 +119,8 @@
           flex-wrap: wrap;
           justify-content: flex-end;
           align-items: center;
-          a, button {
+          a,
+          button {
             margin: 5px 5px 2px 2px;
           }
         }

diff --git a/src/widgets/external-questionnaire-dropdown/components/external-questionnaire-dropdown.jsx b/src/widgets/external-questionnaire-dropdown/components/external-questionnaire-dropdown.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import classSet from 'react-classset';
+import ClassSet from 'react-classset';
 import { Link } from 'react-router-dom';
 
 import Dictionary from 'utils/dictionary/dictionary';
@@ -37,23 +37,6 @@ function ExternalQuestionnaireDropdown({ questionnaireId, disabled, top }) {
     setDropdownOpen(!dropdownOpen);
   };
 
-  const classDropDown = classSet({
-    'btn-group': true,
-    dropup: top,
-    'flex-column': !top,
-    'flex-column-reverse': top,
-    open: dropdownOpen,
-  });
-  const classDropDownTrigger = classSet({
-    btn: true,
-    'dropdown-toggle': true,
-    'btn-yellow': false,
-    'btn-white': true,
-    disabled: disabled,
-  });
-  const classDropDownList = classSet({
-    'dropdown-menu': true,
-  });
   const linksQuestionnaire = [
     {
       actionType: 'tcmRef',
@@ -72,9 +55,24 @@ function ExternalQuestionnaireDropdown({ questionnaireId, disabled, top }) {
     },
   ];
   return (
-    <div className={classDropDown} ref={wrapperRef}>
+    <div
+      className={ClassSet({
+        'btn-group': true,
+        dropup: top,
+        'flex-column': !top,
+        'flex-column-reverse': top,
+        open: dropdownOpen,
+      })}
+      ref={wrapperRef}
+    >
       <button
-        className={classDropDownTrigger}
+        className={ClassSet({
+          btn: true,
+          'dropdown-toggle': true,
+          'btn-yellow': false,
+          'btn-white': true,
+          disabled: disabled,
+        })}
         disabled={disabled}
         data-toggle="dropdown"
         aria-haspopup="true"
@@ -85,7 +83,7 @@ function ExternalQuestionnaireDropdown({ questionnaireId, disabled, top }) {
         <span className="caret" />
       </button>
 
-      <ul className={classDropDownList}>
+      <ul className="dropdown-menu">
         {linksQuestionnaire.map(link => {
           return (
             <li key={link.actionLabel}>

diff --git a/src/widgets/visualize-dropdown/__snapshots__/visualize-dropdown.spec.js.snap b/src/widgets/visualize-dropdown/__snapshots__/visualize-dropdown.spec.js.snap
@@ -10,6 +10,7 @@ exports[`Visualize Dropdown Component:  Should disable the button 1`] = `
     className="btn dropdown-toggle btn-yellow disabled"
     data-toggle="dropdown"
     disabled={true}
+    id="visualize"
     onClick={[Function]}
   >
     Visualise
@@ -90,6 +91,7 @@ exports[`Visualize Dropdown Component:  Should display the dropdown on top 1`] =
     className="btn dropdown-toggle btn-yellow"
     data-toggle="dropdown"
     disabled={false}
+    id="visualize"
     onClick={[Function]}
   >
     Visualise
@@ -170,6 +172,7 @@ exports[`Visualize Dropdown Component:  Should return the right HTML 1`] = `
     className="btn dropdown-toggle btn-yellow"
     data-toggle="dropdown"
     disabled={false}
+    id="visualize"
     onClick={[Function]}
   >
     Visualise

diff --git a/src/widgets/visualize-dropdown/components/visualize-dropdown.jsx b/src/widgets/visualize-dropdown/components/visualize-dropdown.jsx
@@ -5,10 +5,6 @@ import { Link } from 'react-router-dom';
 import ReactModal from 'react-modal';
 import Dictionary from 'utils/dictionary/dictionary';
 import { hasDuplicateVariables } from 'utils/variables/variables-utils';
-import {
-  customModalStyles,
-  /* customModalbuttonStyles, */
-} from 'layout/generic-input/components/generic-input';
 
 /**
  * Component used in the actions toolbar and on each
@@ -81,23 +77,6 @@ function VisualizeDropdown({
 
   const handleCloseModal = () => setAllowDuplicateVariablesModal(false);
 
-  const classDropDown = classSet({
-    'btn-group': true,
-    dropup: top,
-    'flex-column': !top,
-    'flex-column-reverse': top,
-    open: dropdownOpen,
-  });
-  const classDropDownTrigger = classSet({
-    btn: true,
-    'dropdown-toggle': true,
-    'btn-yellow': true,
-    'btn-white': false,
-    disabled: disabled,
-  });
-  const classDropDownList = classSet({
-    'dropdown-menu': true,
-  });
   const links = [
     { actionType: 'html', actionLabel: Dictionary.VISUALIZE_WEB },
     {
@@ -111,9 +90,25 @@ function VisualizeDropdown({
     { actionType: 'ddi', actionLabel: Dictionary.VISUALIZE_DDI },
   ];
   return (
-    <div className={classDropDown} ref={wrapperRef}>
+    <div
+      className={classSet({
+        'btn-group': true,
+        dropup: top,
+        'flex-column': !top,
+        'flex-column-reverse': top,
+        open: dropdownOpen,
+      })}
+      ref={wrapperRef}
+    >
       <button
-        className={classDropDownTrigger}
+        id="visualize"
+        className={classSet({
+          btn: true,
+          'dropdown-toggle': true,
+          'btn-yellow': true,
+          'btn-white': false,
+          disabled: disabled,
+        })}
         disabled={disabled}
         data-toggle="dropdown"
         aria-haspopup="true"
@@ -124,7 +119,7 @@ function VisualizeDropdown({
         <span className="caret" />
       </button>
 
-      <ul className={classDropDownList}>
+      <ul className="dropdown-menu">
         {links.map(link => {
           return (
             <li key={link.actionLabel}>
@@ -139,16 +134,18 @@ function VisualizeDropdown({
         isOpen={
           allowDuplicateVariablesModal && hasQuestionnaireDuplicateVariables
         }
+        className="custom-modal"
         ariaHideApp={false}
-        style={customModalStyles}
       >
         <p>{Dictionary.duplicateVariablesComment}</p>
         <Link to={`/questionnaire/${questionnaire?.id}/duplicate-variables`}>
-          <button style={{ color: 'black' }}>
+          <button className="modal-button">
             {Dictionary.showErrorDuplicateVariables}
           </button>
         </Link>
-        <button onClick={handleCloseModal}>{Dictionary.close}</button>
+        <button className="modal-button" onClick={handleCloseModal}>
+          {Dictionary.close}
+        </button>
       </ReactModal>
     </div>
   );
@@ -172,11 +169,11 @@ VisualizeDropdown.defaultProps = {
   disabled: false,
   top: false,
   componentId: '',
-  externalVariables: undefined,
-  calculatedVariables: undefined,
-  collectedVariableByQuestion: undefined,
-  questionnaire: undefined,
-  externalQuestionnairesVariables: undefined,
+  externalVariables: {},
+  calculatedVariables: {},
+  collectedVariableByQuestion: {},
+  questionnaire: {},
+  externalQuestionnairesVariables: {},
 };
 
 export default VisualizeDropdown;
diff --git a/src/widgets/visualize-dropdown/containers/visualize-dropdown-container.js b/src/widgets/visualize-dropdown/containers/visualize-dropdown-container.js
@@ -6,7 +6,6 @@ import VisualizeDropdown from '../components/visualize-dropdown';
 const mapStateToProps = state => {
   return {
     questionnaire: state.appState.activeQuestionnaire,
-    components: state.appState.activeComponentById,
     calculatedVariables: state.appState.activeCalculatedVariablesById,
     externalVariables: state.appState.activeExternalVariablesById,
     collectedVariableByQuestion: state.appState.collectedVariableByQuestion,
@@ -15,13 +14,13 @@ const mapStateToProps = state => {
   };
 };
 
-const PageQuestionnaireContainer = connect(mapStateToProps)(VisualizeDropdown);
+const VisualizeDropdownContainer = connect(mapStateToProps)(VisualizeDropdown);
 
-PageQuestionnaireContainer.propTypes = {
+VisualizeDropdownContainer.propTypes = {
   questionnaireId: PropTypes.string,
 };
-PageQuestionnaireContainer.defaultProps = {
+VisualizeDropdownContainer.defaultProps = {
   questionnaireId: undefined,
 };
 
-export default PageQuestionnaireContainer;
+export default VisualizeDropdownContainer;
diff --git a/src/widgets/visualize-dropdown/visualize-dropdown.spec.js b/src/widgets/visualize-dropdown/visualize-dropdown.spec.js
@@ -48,11 +48,11 @@ describe('Visualize Dropdown Component: ', () => {
     const wrapper = shallow(<VisualizeDropdown {...props} />);
     expect(wrapper.find('div').hasClass('open')).toBeFalsy();
     wrapper
-      .find('button')
+      .find('button[id="visualize"]')
       .simulate('click', { preventDefault() {}, stopPropagation() {} });
     expect(wrapper.find('div').hasClass('open')).toBeTruthy();
     wrapper
-      .find('button')
+      .find('button[id="visualize"]')
       .simulate('click', { preventDefault() {}, stopPropagation() {} });
     expect(wrapper.find('div').hasClass('open')).toBeFalsy();
   });