feat(button): remove tertiary button background and update components using it - FRONT-4295

src/implementations/twig/components/carousel/README.md

@@ -13,8 +13,6 @@ npm install --save @ecl/twig-component-carousel
 - **"sr_description"** (string) (default: '') screen reader description of the carousel
 - **"sr_role"** (string) (default: 'carousel') screen reader localized role for the carousel
 - **"sr_slide_role"** (string) (default: 'slide') screen reader localized role for the slides
-- **"sr_previous"** (string) (default: 'Previous slides') screen reader label for previous button
-- **"sr_next"** (string) (default: 'Next slides') screen reader label for next button
 - **"sr_navigation"** (string) (default: 'Go to slide %d') screen reader label for navigation buttons
 - **"sr_play"** (string) (default: 'Play carousel') screen reader label for the play button
 - **"sr_pause"** (string) (default: 'Pause carousel') screen reader label for the pause button

src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap

@@ -95,31 +95,6 @@ exports[`Carousel Default renders correctly 1`] = `
         </div>
       </div>
     </div>
-    <button
-      class="ecl-button ecl-button--ghost ecl-carousel__prev ecl-button--icon-only"
-      type="button"
-    >
-      <span
-        class="ecl-button__container"
-      >
-        <span
-          class="ecl-button__label"
-          data-ecl-label="true"
-        >
-          Previous slides
-        </span>
-        <svg
-          aria-hidden="true"
-          class="ecl-icon ecl-icon--m ecl-icon--rotate-270 ecl-button__icon"
-          data-ecl-icon=""
-          focusable="false"
-        >
-          <use
-            xlink:href="/icons.svg#corner-arrow"
-          />
-        </svg>
-      </span>
-    </button>
     <div
       class="ecl-carousel__container"
     >
@@ -393,31 +368,6 @@ exports[`Carousel Default renders correctly 1`] = `
         </div>
       </div>
     </div>
-    <button
-      class="ecl-button ecl-button--ghost ecl-carousel__next ecl-button--icon-only"
-      type="button"
-    >
-      <span
-        class="ecl-button__container"
-      >
-        <span
-          class="ecl-button__label"
-          data-ecl-label="true"
-        >
-          Next slides
-        </span>
-        <svg
-          aria-hidden="true"
-          class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-button__icon"
-          data-ecl-icon=""
-          focusable="false"
-        >
-          <use
-            xlink:href="/icons.svg#corner-arrow"
-          />
-        </svg>
-      </span>
-    </button>
   </section>
 </jest>
 `;
@@ -519,31 +469,6 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
         </div>
       </div>
     </div>
-    <button
-      class="ecl-button ecl-button--ghost ecl-carousel__prev ecl-button--icon-only"
-      type="button"
-    >
-      <span
-        class="ecl-button__container"
-      >
-        <span
-          class="ecl-button__label"
-          data-ecl-label="true"
-        >
-          Previous slides
-        </span>
-        <svg
-          aria-hidden="true"
-          class="ecl-icon ecl-icon--m ecl-icon--rotate-270 ecl-button__icon"
-          data-ecl-icon=""
-          focusable="false"
-        >
-          <use
-            xlink:href="/icons.svg#corner-arrow"
-          />
-        </svg>
-      </span>
-    </button>
     <div
       class="ecl-carousel__container"
     >
@@ -817,31 +742,6 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
         </div>
       </div>
     </div>
-    <button
-      class="ecl-button ecl-button--ghost ecl-carousel__next ecl-button--icon-only"
-      type="button"
-    >
-      <span
-        class="ecl-button__container"
-      >
-        <span
-          class="ecl-button__label"
-          data-ecl-label="true"
-        >
-          Next slides
-        </span>
-        <svg
-          aria-hidden="true"
-          class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-button__icon"
-          data-ecl-icon=""
-          focusable="false"
-        >
-          <use
-            xlink:href="/icons.svg#corner-arrow"
-          />
-        </svg>
-      </span>
-    </button>
   </section>
 </jest>
 `;
@@ -941,31 +841,6 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
         </div>
       </div>
     </div>
-    <button
-      class="ecl-button ecl-button--ghost ecl-carousel__prev ecl-button--icon-only"
-      type="button"
-    >
-      <span
-        class="ecl-button__container"
-      >
-        <span
-          class="ecl-button__label"
-          data-ecl-label="true"
-        >
-          Previous slides
-        </span>
-        <svg
-          aria-hidden="true"
-          class="ecl-icon ecl-icon--m ecl-icon--rotate-270 ecl-button__icon"
-          data-ecl-icon=""
-          focusable="false"
-        >
-          <use
-            xlink:href="/icons.svg#corner-arrow"
-          />
-        </svg>
-      </span>
-    </button>
     <div
       class="ecl-carousel__container"
     >
@@ -1239,31 +1114,6 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
         </div>
       </div>
     </div>
-    <button
-      class="ecl-button ecl-button--ghost ecl-carousel__next ecl-button--icon-only"
-      type="button"
-    >
-      <span
-        class="ecl-button__container"
-      >
-        <span
-          class="ecl-button__label"
-          data-ecl-label="true"
-        >
-          Next slides
-        </span>
-        <svg
-          aria-hidden="true"
-          class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-button__icon"
-          data-ecl-icon=""
-          focusable="false"
-        >
-          <use
-            xlink:href="/icons.svg#corner-arrow"
-          />
-        </svg>
-      </span>
-    </button>
   </section>
 </jest>
 `;

src/implementations/twig/components/carousel/carousel.html.twig

@@ -8,8 +8,6 @@
     - "sr_description" (string) (default: '') screen reader description of the carousel
     - "sr_role" (string) (default: 'carousel') screen reader localized role for the carousel
     - "sr_slide_role" (string) (default: 'slide') screen reader localized role for the slides
-    - "sr_previous" (string) (default: 'Previous slides') screen reader label for previous button
-    - "sr_next" (string) (default: 'Next slides') screen reader label for next button
     - "sr_navigation" (string) (default: 'Go to slide %d') screen reader label for navigation buttons
     - "sr_play" (string) (default: 'Play carousel') screen reader label for the play button
     - "sr_pause" (string) (default: 'Pause carousel') screen reader label for the pause button
@@ -33,8 +31,6 @@
 {% set _sr_description = sr_description|default('') %}
 {% set _sr_role = sr_role|default('carousel') %}
 {% set _sr_slide_role = sr_slide_role|default('slide') %}
-{% set _sr_previous = sr_previous|default('Previous slides') %}
-{% set _sr_next = sr_next|default('Next slides') %}
 {% set _sr_navigation = sr_navigation|default('Go to slide %d') %}
 {% set _sr_play = sr_play|default('Play carousel') %}
 {% set _sr_pause = sr_pause|default('Pause carousel') %}
@@ -114,20 +110,6 @@
     </div>
   </div>
 
-  {% include '@ecl/button/button.html.twig' with {
-    hide_label: true,
-    label: _sr_previous,
-    type: 'button',
-    variant: 'ghost',
-    extra_classes: 'ecl-carousel__prev',
-    icon: {
-      path: _icon_path,
-      name: 'corner-arrow',
-      size: 'm',
-      transform: 'rotate-270',
-    },
-  } only %}
-
   <div class="ecl-carousel__container">
     <div class="ecl-carousel__slides" id="ecl-carousel-slider">
     {% for item in _items %}
@@ -144,20 +126,6 @@
     {% endfor %}
     </div>
   </div>
-
-  {% include '@ecl/button/button.html.twig' with {
-    hide_label: true,
-    label: _sr_next,
-    type: 'button',
-    variant: 'ghost',
-    extra_classes: 'ecl-carousel__next',
-    icon: {
-      path: _icon_path,
-      name: 'corner-arrow',
-      size: 'm',
-      transform: 'rotate-90',
-    },
-  } only %}
 </section>
 {% endif %}
 

src/implementations/vanilla/components/carousel/carousel.js

@@ -4,8 +4,6 @@ import { queryOne, queryAll } from '@ecl/dom-utils';
  * @param {HTMLElement} element DOM element for component instantiation and scope
  * @param {Object} options
  * @param {String} options.toggleSelector Selector for toggling element
- * @param {String} options.prevSelector Selector for prev element
- * @param {String} options.nextSelector Selector for next element
  * @param {String} options.contentClass Selector for the content container
  * @param {String} options.slidesClass Selector for the slides container
  * @param {String} options.slideClass Selector for the slide items
@@ -33,8 +31,6 @@ export class Carousel {
     {
       playSelector = '.ecl-carousel__play',
       pauseSelector = '.ecl-carousel__pause',
-      prevSelector = '.ecl-carousel__prev',
-      nextSelector = '.ecl-carousel__next',
       containerClass = '.ecl-carousel__container',
       slidesClass = '.ecl-carousel__slides',
       slideClass = '.ecl-carousel__slide',
@@ -57,8 +53,6 @@ export class Carousel {
     // Options
     this.playSelector = playSelector;
     this.pauseSelector = pauseSelector;
-    this.prevSelector = prevSelector;
-    this.nextSelector = nextSelector;
     this.containerClass = containerClass;
     this.slidesClass = slidesClass;
     this.slideClass = slideClass;
@@ -73,8 +67,6 @@ export class Carousel {
     this.slides = null;
     this.btnPlay = null;
     this.btnPause = null;
-    this.btnPrev = null;
-    this.btnNext = null;
     this.index = 1;
     this.total = 0;
     this.allowShift = true;
@@ -126,8 +118,6 @@ export class Carousel {
 
     this.btnPlay = queryOne(this.playSelector, this.element);
     this.btnPause = queryOne(this.pauseSelector, this.element);
-    this.btnPrev = queryOne(this.prevSelector, this.element);
-    this.btnNext = queryOne(this.nextSelector, this.element);
     this.slidesContainer = queryOne(this.slidesClass, this.element);
     this.container = queryOne(this.containerClass, this.element);
     this.navigation = queryOne('.ecl-carousel__navigation', this.element);
@@ -141,12 +131,6 @@ export class Carousel {
 
     // If only one slide, don't initialize carousel and hide controls
     if (this.total <= 1) {
-      if (this.btnNext) {
-        this.btnNext.style.display = 'none';
-      }
-      if (this.btnPrev) {
-        this.btnPrev.style.display = 'none';
-      }
       if (this.controls) {
         this.controls.style.display = 'none';
       }
@@ -197,18 +181,6 @@ export class Carousel {
     if (this.btnPlay) {
       this.btnPlay.addEventListener('keydown', this.handleKeyboardOnPlay);
     }
-    if (this.attachClickListener && this.btnNext) {
-      this.btnNext.addEventListener(
-        'click',
-        this.shiftSlide.bind(this, 'next', true),
-      );
-    }
-    if (this.attachClickListener && this.btnPrev) {
-      this.btnPrev.addEventListener(
-        'click',
-        this.shiftSlide.bind(this, 'prev', true),
-      );
-    }
 
     if (this.slidesContainer) {
       // Mouse events
@@ -249,12 +221,6 @@ export class Carousel {
     if (this.btnPause) {
       this.btnPause.replaceWith(this.btnPause.cloneNode(true));
     }
-    if (this.btnNext) {
-      this.btnNext.replaceWith(this.btnNext.cloneNode(true));
-    }
-    if (this.btnPrev) {
-      this.btnPrev.replaceWith(this.btnPrev.cloneNode(true));
-    }
     if (this.slidesContainer) {
       this.slidesContainer.removeEventListener(
         'mouseover',

src/implementations/vanilla/components/gallery/gallery.scss

@@ -377,6 +377,8 @@ $_image-height-mobile: 260px;
 
   &:focus-visible {
     background-color: map.get($theme, 'color', 'white');
+    outline: 2px solid map.get($theme, 'color', 'white');
+    outline-offset: 0;
   }
 }
 

src/implementations/vanilla/components/site-header/site-header-ec.scss

@@ -276,7 +276,6 @@ $menu-top: calc(44px + 2 * var(--s-xs));
   .ecl-site-header__login-toggle,
   .ecl-site-header__search-toggle,
   .ecl-site-header__language-selector {
-    background: map.get($site-header, 'background-color');
     font-size: 0;
     line-height: 0;
     padding: var(--s-xs) 0;

src/implementations/vanilla/components/site-header/site-header-eu.scss

@@ -36,6 +36,10 @@ $language-list: null !default;
     margin-bottom: 8px;
   }
 
+  .ecl-menu__open:not(:hover, :focus-visible) {
+    color: map.get($theme, 'color', 'white');
+  }
+
   &:not(.ecl-site-header--has-menu) {
     box-shadow: var(--sh-2);
   }

src/themes/ec/variables/_button.scss

@@ -40,9 +40,9 @@ $button: (
     focus-shadow: none,
   ),
   tertiary: (
-    background: map.get($color, 'white'),
+    background: transparent,
     color: var(--c-d),
-    border-color: map.get($color, 'white'),
+    border-color: transparent,
     background-hover: var(--c-p-20),
     color-hover: var(--c-d),
     border-color-hover: var(--c-d-80),