Merge pull request #915 from visualize-admin/feat/banner-height

feat: Diminish banner height

Author: ptbrowne

app/configurator/components/presence.tsx

@@ -36,9 +36,11 @@ export const navPresenceProps = {
   exit: "exit",
 };
 
+export const BANNER_HEIGHT = 250;
+export const BANNER_MARGIN_TOP = 96;
 export const bannerPresenceProps: Transition = {
   transition: { duration: 0.5 },
-  initial: { marginTop: -446 },
-  animate: { marginTop: 96 },
-  exit: { marginTop: -446 },
+  initial: { marginTop: -(BANNER_HEIGHT + BANNER_MARGIN_TOP) },
+  animate: { marginTop: BANNER_MARGIN_TOP },
+  exit: { marginTop: -(BANNER_HEIGHT + BANNER_MARGIN_TOP) },
 };

app/configurator/components/select-dataset-step.tsx

@@ -29,6 +29,8 @@ import {
 } from "@/configurator/components/layout";
 import {
   bannerPresenceProps,
+  BANNER_HEIGHT,
+  BANNER_MARGIN_TOP,
   MotionBox,
   navPresenceProps,
   smoothPresenceProps,
@@ -81,8 +83,8 @@ const useStyles = makeStyles<Theme, { datasetPresent: boolean }>((theme) => ({
     gridTemplateColumns:
       "minmax(12rem, 20rem) minmax(22rem, 1fr) minmax(12rem, 20rem)",
     gridTemplateAreas: `". banner ."`,
-    height: 350,
-    marginTop: 96,
+    minHeight: BANNER_HEIGHT,
+    marginTop: BANNER_MARGIN_TOP,
     backgroundColor: theme.palette.primary.light,
   },
   panelBanner: {

e2e/filters.spec.ts

@@ -22,9 +22,9 @@ describe("Filters", () => {
       "1. Production region",
       "2. Stand structure",
       // ---
-      "3. Evaluation type",
-      "4. Reference area",
-      "5. Grid",
+      "3. Inventory",
+      "4. Evaluation type",
+      "5. Reference area",
     ]);
 
     const productionRegionFilter = selectors.edition.dataFilterInput(

e2e/interactive-filters.spec.ts

@@ -8,10 +8,11 @@ test("it should display values in interactive filters as hierarchie", async ({
   await page.goto("/en/__test/int/bathing-water-quality-hierarchie");
   await selectors.chart.loaded();
   await page.locator('text="Show Filters"').click();
-  await within(selectors.published.interactiveFilters())
-    .getByText("Seerose")
-    .click();
-  await selectors.mui.popover().getByText("BAQUA_FR");
+  const interactiveFilters = await within(
+    selectors.published.interactiveFilters()
+  );
+  await page.locator("[value=Seerose]").click();
+  await selectors.mui.popover().getByText("BAQUA_FR").click();
   await selectors.mui.popover().getByText("Nouvelle plage").click();
   await selectors.chart.loaded();
 });