Merge pull request #1737 from CleverCloud/feat/toggle-icon-rotate-opposite-on-hover

feat(cc-block, cc-block-details, cc-visual-tests-report-menu): rotate toggle icon to opposite direction on hover

Author: clara-layus-cc

src/components/cc-block-details/cc-block-details.js

@@ -1,5 +1,5 @@
 import { css, html, LitElement } from 'lit';
-import { iconRemixArrowDownSLine as iconArrowDown } from '../../assets/cc-remix.icons.js';
+import { iconRemixArrowUpSLine as iconArrowUp } from '../../assets/cc-remix.icons.js';
 import '../cc-icon/cc-icon.js';
 import { CcToggleEvent } from '../common.events.js';
 
@@ -39,7 +39,7 @@ export class CcBlockDetails extends LitElement {
         <div class="btn-wrapper">
           <button class="button" aria-expanded="${this.isOpen}" aria-controls="content" @click=${this._onClickToggle}>
             <slot name="button-text"></slot>
-            <cc-icon .icon="${iconArrowDown}"></cc-icon>
+            <cc-icon .icon="${iconArrowUp}"></cc-icon>
           </button>
         </div>
         <div id="content" class="content">
@@ -116,11 +116,11 @@ export class CcBlockDetails extends LitElement {
           transition: all 0.3s;
         }
 
-        :host([is-open]) .button cc-icon {
+        .button[aria-expanded='false'] cc-icon {
           transform: rotate(180deg);
         }
 
-        :host(:not([is-open])) .button:hover cc-icon {
+        .button:hover cc-icon {
           transform: rotate(90deg);
         }
 

src/components/cc-block/cc-block.js

@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { iconRemixArrowDownSLine as iconArrowDown } from '../../assets/cc-remix.icons.js';
+import { iconRemixArrowUpSLine as iconArrowUp } from '../../assets/cc-remix.icons.js';
 import { hasSlottedChildren } from '../../directives/has-slotted-children.js';
 import { isStringEmpty } from '../../lib/utils.js';
 import '../cc-button/cc-button.js';
@@ -93,7 +93,7 @@ export class CcBlock extends LitElement {
                 @click=${this._onClickToggle}
               >
                 ${this._renderHeader()}
-                <cc-icon class="toggle-icon" .icon=${iconArrowDown} size="xl"></cc-icon>
+                <cc-icon class="toggle-icon" .icon=${iconArrowUp} size="xl"></cc-icon>
               </button>
             `
           : this._renderHeader()}
@@ -280,7 +280,7 @@ export class CcBlock extends LitElement {
           transition: transform 0.3s ease-out;
         }
 
-        .toggle-button[aria-expanded='true'] .toggle-icon {
+        .toggle-button[aria-expanded='false'] .toggle-icon {
           transform: rotate(0.5turn);
         }
 

src/components/cc-visual-tests-report-menu/cc-visual-tests-report-menu.js

@@ -2,9 +2,9 @@ import { LitElement, css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import {
-  iconRemixArrowDownSLine as iconArrowDown,
   iconRemixArrowLeftSLine as iconArrowLeft,
   iconRemixArrowRightSLine as iconArrowRight,
+  iconRemixArrowUpSLine as iconArrowUp,
 } from '../../assets/cc-remix.icons.js';
 import { camelCaseToSpacedCapitalized, kebabCase } from '../../lib/change-case.js';
 import { isVisibleInContainer } from '../../lib/utils.js';
@@ -222,7 +222,7 @@ export class CcVisualTestsReportMenu extends LitElement {
                 aria-expanded="${isMenuItemOpen}"
                 aria-controls="stories-${componentTagName}"
               >
-                <cc-icon .icon="${iconArrowDown}"></cc-icon>
+                <cc-icon .icon="${iconArrowUp}"></cc-icon>
                 <span>${componentTagName}</span>
               </button>
               <ul id="stories-${componentTagName}" class="story-list" ?hidden="${!isMenuItemOpen}">
@@ -256,7 +256,7 @@ export class CcVisualTestsReportMenu extends LitElement {
           aria-expanded="${isMenuItemOpen}"
           aria-controls="${componentTagName}-${kebabCasedStoryName}"
         >
-          <cc-icon .icon="${iconArrowDown}"></cc-icon>
+          <cc-icon .icon="${iconArrowUp}"></cc-icon>
           <span>${storyNameToDisplay}</span>
         </button>
         <ul id="${componentTagName}-${kebabCasedStoryName}" class="viewport-browser-list" ?hidden="${!isMenuItemOpen}">
@@ -339,7 +339,7 @@ export class CcVisualTestsReportMenu extends LitElement {
           transition: transform 0.3s;
         }
 
-        .btn[aria-expanded='true'] cc-icon {
+        .btn[aria-expanded='false'] cc-icon {
           transform: rotate(180deg);
         }