From 35d09a92cf20820a491b1c274999c1a9209a31f1 Mon Sep 17 00:00:00 2001 From: Alexis Gaillard Date: Mon, 25 Jul 2022 15:32:53 +0200 Subject: [PATCH 01/15] revamp desktop menu --- .../menu/__snapshots__/menu.test.js.snap | 602 +++-- .../twig/components/menu/menu-item.html.twig | 25 +- .../site-header-core.test.js.snap | 2180 ++++++++++------ .../site-header-harmonised.test.js.snap | 1190 ++++++--- .../site-header-standardised.test.js.snap | 2182 +++++++++++------ .../vanilla/components/menu/_menu.scss | 148 +- .../vanilla/components/menu/menu-ec.scss | 9 +- .../vanilla/components/menu/menu-eu.scss | 14 +- 8 files changed, 4254 insertions(+), 2096 deletions(-) diff --git a/src/implementations/twig/components/menu/__snapshots__/menu.test.js.snap b/src/implementations/twig/components/menu/__snapshots__/menu.test.js.snap index 1dd8757c21e..bd926cfa6c2 100644 --- a/src/implementations/twig/components/menu/__snapshots__/menu.test.js.snap +++ b/src/implementations/twig/components/menu/__snapshots__/menu.test.js.snap @@ -108,7 +108,7 @@ exports[`Menu Default renders correctly 1`] = ` data-ecl-menu-link="" href="/example" > - Home + Home
  • Item 2 label - +
    Item 3 with a very long label - +
    - Item 4 label + Item 4 label
  • Item 5 label - +
    Item 6 label - +
    Item 7 label - +
    - Home + Home
  • Item 2 label - +
    Item 3 with a very long label - +
    - Item 4 label + Item 4 label
  • Item 5 label - +
    Item 6 label - +
    Item 7 label - +
    - Home + Home
  • Item 2 label - +
    Item 3 with a very long label - +
    - Item 4 label + Item 4 label
  • Item 5 label - +
    Item 6 label - +
    Item 7 label - +
    - Accueil + Accueil
  • Item 2 titre - +
    Item 3 avec un très long titre - +
    Item 4 titre - +
    Item 5 titre - +
    Item 6 titre - +
    Item 7 titre - +
    {{- item.label -}} - {%- if (item.children is defined and item.children is not empty and item.children is iterable) or item.external -%} + {%- if item.external -%} {% include '@ecl/icon/icon.html.twig' with { icon: { path: icon_path, - name: item.external ? 'external' : 'corner-arrow', + name: 'external', size: 'xs', - transform: item.external ? '' : 'rotate-90', + transform: 'rotate-90', }, - extra_classes: item.external ? 'ecl-menu__link-icon--external ecl-menu__link-icon' : 'ecl-menu__link-icon', + extra_classes: 'ecl-menu__link-icon--external ecl-menu__link-icon', } %} - {% endif %} + {%- endif -%} + {%- if (item.children is defined and item.children is not empty and item.children is iterable) -%} + {% include '@ecl/button/button.html.twig' with { + variant: 'primary', + type: 'button', + disabled: false, + icon: { + name: 'corner-arrow', + size: '2xs', + path: icon_path, + transform: 'rotate-180', + }, + icon_position: 'after', + extra_classes: 'ecl-menu__button-caret', + } %} + {%- endif -%} {% if item.children is defined and item.children is not empty and item.children is iterable %}
    - Home + Home
  • Item 2 label - +
    Item 3 with a very long label - +
    - Item 4 label + Item 4 label
  • Item 5 label - +
    Item 6 label - +
    Item 7 label - +
    - Home + Home
  • Item 2 label - +
    Item 3 with a very long label - +
    - Item 4 label + Item 4 label
  • Item 5 label - +
    Item 6 label - +
    Item 7 label - +
    - Home + Home
  • Item 2 label - +
    Item 3 with a very long label - +
    - Item 4 label + Item 4 label
  • Item 5 label - +
    Item 6 label - +
    Item 7 label - +
    - Home + Home
  • Item 2 label - +
    Item 3 with a very long label - +
    - Item 4 label + Item 4 label
  • Item 5 label - +
    Item 6 label - +
    Item 7 label - +
    - Accueil + Accueil
  • Item 2 titre - +
    Item 3 avec un très long titre - +
    Item 4 titre - +
    Item 5 titre - +
    Item 6 titre - +
    Item 7 titre - +
    - Accueil + Accueil
  • Item 2 titre - +
    Item 3 avec un très long titre - +
    Item 4 titre - +
    Item 5 titre - +
    Item 6 titre - +
    Item 7 titre - +
    - Accueil + Accueil
  • Item 2 titre - +
    Item 3 avec un très long titre - -
    + + + + +
    @@ -10033,16 +10373,26 @@ exports[`EC Site Header Core Translated renders correctly with extra class names href="/example" > Item 4 titre - +
    Item 5 titre - +
    Item 6 titre - +
    Item 7 titre - +
    - Home + Home
  • Item 2 label - +
    Item 3 with a very long label - +
    - Item 4 label + Item 4 label
  • Item 5 label - +
    Item 6 label - +
    Item 7 label - +
    - Home + Home
  • Item 2 label - +
    Item 3 with a very long label - -
    + + + + +
      - Item 4 label + Item 4 label
    • Item 5 label - +
      Item 6 label - +
      Item 7 label - +
      - Home + Home
    • Item 2 label - +
      Item 3 with a very long label - +
      - Item 4 label + Item 4 label
    • Item 5 label - +
      Item 6 label - +
      Item 7 label - +
      - Home + Home
    • Item 2 label - +
      Item 3 with a very long label - +
      - Item 4 label + Item 4 label
    • Item 5 label - -
      + + + + +
      @@ -16455,16 +17015,26 @@ exports[`EU Site Header Core Default renders correctly with extra class names 1` href="/example" > Item 6 label - +
      Item 7 label - +
      - Accueil + Accueil
    • Item 2 titre - +
      Item 3 avec un très long titre - +
      Item 4 titre - +
      Item 5 titre - +
      Item 6 titre - +
      Item 7 titre - +
      - Accueil + Accueil
    • Item 2 titre - +
      Item 3 avec un très long titre - +
      Item 4 titre - +
      Item 5 titre - +
      Item 6 titre - +
      Item 7 titre - +
      - Accueil + Accueil
    • Item 2 titre - +
      Item 3 avec un très long titre - +
      Item 4 titre - +
      Item 5 titre - +
      Item 6 titre - +
      Item 7 titre - +
      - Home + Home
    • Item 2 - +
      Item 3 - +
      Item 4 - +
      Item 5 - +
      Item 6 - +
      Item 7 with a long label - +
      - Home + Home
    • Item 2 - +
      Item 3 - +
      Item 4 - +
      Item 5 - +
      Item 6 - +
      Item 7 with a long label - +
      - Home + Home
    • Item 2 - +
      Item 3 - +
      Item 4 - +
      Item 5 - +
      Item 6 - +
      Item 7 with a long label - +
      - Home + Home
    • Item 2 - +
      Item 3 - +
      Item 4 - +
      Item 5 - +
      Item 6 - +
      Item 7 with a long label - +
      - Home + Home
    • Item 2 - +
      Item 3 - +
      Item 4 - +
      Item 5 - +
      Item 6 - +
      Item 7 with a long label - +
      - Home + Home
    • Item 2 - +
      Item 3 - +
      Item 4 - +
      Item 5 - +
      Item 6 - +
      Item 7 with a long label - +
      - Home + Home
    • Item 2 - +
      Item 3 - +
      Item 4 - +
      Item 5 - +
      Item 6 - +
      Item 7 with a long label - +
      - Home + Home
    • Item 2 label - +
      Item 3 with a very long label - +
      - Item 4 label + Item 4 label
    • Item 5 label - +
      Item 6 label - +
      Item 7 label - +
      - Home + Home
    • Item 2 label - +
      Item 3 with a very long label - +
      - Item 4 label + Item 4 label
    • Item 5 label - +
      Item 6 label - +
      Item 7 label - +
      - Home + Home
    • Item 2 label - +
      Item 3 with a very long label - +
      - Item 4 label + Item 4 label
    • Item 5 label - +
      Item 6 label - +
      Item 7 label - +
      - Home + Home
    • Item 2 label - +
      Item 3 with a very long label - +
      - Item 4 label + Item 4 label
    • Item 5 label - +
      Item 6 label - +
      Item 7 label - +
      - Accueil + Accueil
    • Item 2 titre - +
      Item 3 avec un très long titre - +
      - Item 4 titre - + data-ecl-menu-link="" + href="/example" + > + Item 4 titre +
      Item 5 titre - +
      Item 6 titre - +
      Item 7 titre - +
      - Accueil + Accueil
    • Item 2 titre - +
      Item 3 avec un très long titre - +
      Item 4 titre - +
      Item 5 titre - +
      Item 6 titre - +
      Item 7 titre - +
      - Accueil + Accueil
    • Item 2 titre - +
      Item 3 avec un très long titre - +
      Item 4 titre - +
      Item 5 titre - +
      Item 6 titre - +
      Item 7 titre - +
      - Home + Home
    • Item 2 label - +
      Item 3 with a very long label - +
      - Item 4 label + Item 4 label
    • Item 5 label - +
      Item 6 label - +
      Item 7 label - +
      - Home + Home
    • Item 2 label - +
      Item 3 with a very long label - +
      - Item 4 label + Item 4 label
    • Item 5 label - +
      Item 6 label - +
      Item 7 label - +
      - Home + Home
    • Item 2 label - +
      - Item 3 with a very long label - - - - + + +
      - Item 4 label + Item 4 label
    • Item 5 label - +
      Item 6 label - +
      Item 7 label - +
      - Home + Home
    • Item 2 label - +
      Item 3 with a very long label - +
      - Item 4 label + Item 4 label
    • Item 5 label - +
      Item 6 label - +
      Item 7 label - +
      - Accueil + Accueil
    • Item 2 titre - +
      Item 3 avec un très long titre - +
      Item 4 titre - +
      Item 5 titre - +
      Item 6 titre - +
      Item 7 titre - +
      - Accueil + Accueil
    • Item 2 titre - +
      Item 3 avec un très long titre - +
      Item 4 titre - +
      Item 5 titre - +
      Item 6 titre - +
      Item 7 titre - +
      - Accueil + Accueil
    • Item 2 titre - +
      Item 3 avec un très long titre - +
      Item 4 titre - +
      Item 5 titre - +
      Item 6 titre - +
      Item 7 titre - +
      Date: Tue, 26 Jul 2022 08:33:44 +0200 Subject: [PATCH 02/15] desktop keyboard and styles --- .../menu/__snapshots__/menu.test.js.snap | 21 +++ .../twig/components/menu/menu-item.html.twig | 1 + .../site-header-core.test.js.snap | 76 +++++++++ .../site-header-harmonised.test.js.snap | 42 +++++ .../site-header-standardised.test.js.snap | 76 +++++++++ .../vanilla/components/menu/_menu.scss | 90 ++++++----- .../vanilla/components/menu/menu.js | 146 ++++++++++++++---- 7 files changed, 386 insertions(+), 66 deletions(-) diff --git a/src/implementations/twig/components/menu/__snapshots__/menu.test.js.snap b/src/implementations/twig/components/menu/__snapshots__/menu.test.js.snap index bd926cfa6c2..b9d5afce091 100644 --- a/src/implementations/twig/components/menu/__snapshots__/menu.test.js.snap +++ b/src/implementations/twig/components/menu/__snapshots__/menu.test.js.snap @@ -127,6 +127,7 @@ exports[`Menu Default renders correctly 1`] = `