fix: keep style consistent

annuaire-entreprises-data-gouv-fr · May 28, 2024 · d9dbe00 · d9dbe00
1 parent c799e8d
commit d9dbe00
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 21 deletions.
diff --git a/components-ui/filter-menu/filter-menu.tsx b/components-ui/filter-menu/filter-menu.tsx
@@ -2,6 +2,7 @@
 import { PropsWithChildren, useId, useState } from 'react';
 import ButtonLink from '#components-ui/button';
 import ButtonClose from '#components-ui/button/button-close';
+import FloatingModal from '#components-ui/floating-modal';
 import { Icon } from '#components-ui/icon/wrapper';
 import constants from '#models/constants';
 import {
@@ -78,9 +79,11 @@ export const FilterMenu: React.FC<PropsWithChildren<FilterMenuProps>> = ({
             />
           )}
         </div>
-        <div
+        <FloatingModal
           className={styles['container']}
           style={{ display: open ? 'block' : 'none' }}
+          aria-label={'Les filtres de ' + activeFilter.label}
+          aria-modal={false}
         >
           <div className={styles['filter-container']}>{children}</div>
           {addSaveClearButton && (
@@ -99,7 +102,7 @@ export const FilterMenu: React.FC<PropsWithChildren<FilterMenuProps>> = ({
               </div>
             </>
           )}
-        </div>
+        </FloatingModal>
       </div>
     </>
   );

diff --git a/components-ui/filter-menu/style.module.css b/components-ui/filter-menu/style.module.css
@@ -66,12 +66,10 @@ span.search-filter-label:hover {
 .container {
   box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.3);
   top: 100%;
+  border: none;
   left: 0;
   position: absolute;
-  padding: 15px;
   margin-top: 5px;
-  background-color: #fff;
-  border-radius: 3px;
   width: 480px;
   z-index: 1000;
 }

diff --git a/components-ui/floating-modal/index.tsx b/components-ui/floating-modal/index.tsx
@@ -3,10 +3,18 @@ import styles from './style.module.css';
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   agentColor?: boolean;
   noMobile?: boolean;
+  elevation?: 'low' | 'high';
   footer?: React.ReactNode;
 };
 export default forwardRef(function FloatingModal(
-  { children, agentColor = false, footer, noMobile = false, ...props }: IProps,
+  {
+    children,
+    agentColor = false,
+    footer,
+    noMobile = false,
+    elevation = 'high',
+    ...props
+  }: IProps,
   ref: React.Ref<HTMLDivElement>
 ) {
   return (
@@ -19,7 +27,11 @@ export default forwardRef(function FloatingModal(
         ' ' +
         (props.className ?? '') +
         ' ' +
-        (noMobile ? styles['no-mobile'] : '')
+        (noMobile ? styles['no-mobile'] : '') +
+        ' ' +
+        (elevation === 'low'
+          ? styles['elevation-low']
+          : styles['elevation-high'])
       }
       ref={ref}
     >

diff --git a/components-ui/floating-modal/style.module.css b/components-ui/floating-modal/style.module.css
@@ -2,15 +2,13 @@
   --gutter-vertical: 1rem;
   --gutter-horizontal: 1.5rem;
   background-color: #fff;
-  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
   padding: var(--gutter-vertical) var(--gutter-horizontal);
   border-radius: 0.25rem;
-  border: 2px solid var(--annuaire-colors-pastelBlue);
+  border: 1px solid var(--annuaire-colors-pastelBlue);
 }
 
 .footer {
-  margin: calc(var(--gutter-vertical) * 2) calc(var(--gutter-horizontal) * -1)
-    calc(var(--gutter-vertical) * -1);
+  margin: calc(var(--gutter-vertical) * 2) calc(var(--gutter-horizontal) * -1) calc(var(--gutter-vertical) * -1);
   padding: var(--gutter-vertical) var(--gutter-horizontal);
   font-size: 0.9rem;
   background-color: var(--background-alt-grey);
@@ -20,9 +18,19 @@
   .no-mobile .footer {
     background-color: transparent;
   }
+
   .no-mobile.floating-modal {
     box-shadow: none;
     border: none;
     padding: 0;
   }
 }
+
+.elevation-low {
+  box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.3);
+}
+
+.elevation-high {
+  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
+
+}
diff --git a/components/header/menu/index.tsx b/components/header/menu/index.tsx
@@ -34,11 +34,12 @@ const Menu: React.FC<{
       <FloatingModal
         id="feedback-modal"
         aria-modal="false"
+        elevation="low"
         role="dialog"
         className={styles.dialog}
-        aria-label="Partager une idée, un bug, une question ou une donnée manquante avec l'équipe de l'Annuaire des Entreprises"
       >
         <a
+          aria-label="Se déconnecter de l'espace agent public"
           href={`/api/auth/agent-connect/logout?pathFrom=${encodeURIComponent(
             pathFrom
           )}`}

diff --git a/components/header/menu/styles.module.css b/components/header/menu/styles.module.css
@@ -1,37 +1,89 @@
 .menuLogout {
   position: relative;
-  z-index: 10;
+  z-index: 11;
   cursor: pointer;
 }
 
-.menuLogout>.dialog {
+.menuLogout:hover {
+  background-color: #eee;
+}
+
+.dialog {
   position: absolute;
-  right: -1rem;
-  z-index: 11;
+
+  min-width: max-content;
+  position: absolute;
+  z-index: 10;
   visibility: hidden;
-  width: max-content;
 }
 
 .menuLogout:hover>.dialog,
-.menuLogout:focus>.dialog,
-.dialog:focus-within,
+.menuLogout:focus-visible>.dialog,
+.dialog:focus-visible,
 .dialog:hover {
   visibility: visible !important;
-  animation: appear 0.1s ease-in-out forwards;
+  animation: appear 0.15s ease-in-out forwards;
+}
 
+.dialog a {
+  display: block;
+  margin: -0.5rem 0;
+  color: var(--annuaire-colors-frBlue);
 }
 
 .dialog a:hover {
   text-decoration: underline;
+
+}
+
+.dialog:hover {
+  background: #f8f8f8;
+
 }
 
 @media only screen and (min-width: 1px) and (max-width: 992px) {
   .menuText {
     display: none;
   }
+
+  .dialog {
+    top: 0.25rem;
+    right: 0.5rem;
+  }
+
+  .menuLogout:hover>.dialog,
+  .menuLogout:focus-visible>.dialog,
+  .dialog:focus-visible,
+  .dialog:hover,
+  .menuLogout:focus>.dialog,
+  .dialog:focus {
+    visibility: visible !important;
+    animation: appear-right 0.1s ease-in-out forwards;
+  }
+
 }
 
-@keyframes appear {
+@media only screen and (min-width: 993px) {
+  .dialog {
+    right: 0;
+    left: 0;
+    top: 100%;
+    border: none;
+
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .menuLogout:hover>.dialog,
+  .menuLogout:focus-visible>.dialog,
+  .dialog:focus-visible,
+  .dialog:hover {
+    visibility: visible !important;
+    animation: appear-top 0.15s ease-in-out forwards;
+  }
+}
+
+@keyframes appear-top {
   from {
     opacity: 0;
     transform: translateY(-10%);
@@ -41,4 +93,16 @@
     opacity: 1;
     transform: translateY(0);
   }
+}
+
+@keyframes appear-right {
+  from {
+    opacity: 0;
+    transform: translateX(10%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }