feat(Accordion): change sbanken expand icon to chevron (#2854)

dnbexperience · Nov 9, 2023 · a7cb8b9 · a7cb8b9
1 parent a20a764
commit a7cb8b9
Show file tree

Hide file tree

Showing 12 changed files with 4 additions and 21 deletions.
diff --git a/packages/dnb-eufemia/src/components/accordion/AccordionHeader.tsx b/packages/dnb-eufemia/src/components/accordion/AccordionHeader.tsx
@@ -10,7 +10,6 @@ import {
   validateDOMAttributes,
   extendPropsWithContext,
 } from '../../shared/component-helper'
-import { useTheme } from '../../shared'
 import IconPrimary from '../icon-primary/IconPrimary'
 import classnames from 'classnames'
 import AccordionContext from './AccordionContext'
@@ -106,21 +105,10 @@ function AccordionHeaderIcon({
   size = 'medium',
   icon_position,
 }: AccordionHeaderIconProps) {
-  const theme = useTheme()
-  let animateIcon = true
-  if (!icon && theme?.name === 'sbanken') {
-    animateIcon = false
-    icon = {
-      expanded: 'subtract-medium',
-      closed: 'add-medium',
-    }
-  }
-
   return (
     <span
       className={classnames(
         'dnb-accordion__header__icon',
-        !animateIcon && 'dnb-accordion__header__icon--no-animation',
         icon_position && `dnb-accordion__header__icon--${icon_position}`
       )}
     >

diff --git a/...__image_snapshots__/accordion-for-sbanken-have-to-match-disabled-state.snap.png b/...__image_snapshots__/accordion-for-sbanken-have-to-match-disabled-state.snap.png
diff --git a/...shots__/accordion-for-sbanken-have-to-match-in-closed-state-with-focus.snap.png b/...shots__/accordion-for-sbanken-have-to-match-in-closed-state-with-focus.snap.png
diff --git a/...shots__/accordion-for-sbanken-have-to-match-in-closed-state-with-hover.snap.png b/...shots__/accordion-for-sbanken-have-to-match-in-closed-state-with-hover.snap.png
diff --git a/..._image_snapshots__/accordion-for-sbanken-have-to-match-in-closed-state.snap.png b/..._image_snapshots__/accordion-for-sbanken-have-to-match-in-closed-state.snap.png
diff --git a/...__image_snapshots__/accordion-for-sbanken-have-to-match-in-first-state.snap.png b/...__image_snapshots__/accordion-for-sbanken-have-to-match-in-first-state.snap.png
diff --git a/...e_snapshots__/accordion-for-sbanken-have-to-match-in-nested-accordions.snap.png b/...e_snapshots__/accordion-for-sbanken-have-to-match-in-nested-accordions.snap.png
diff --git a/...apshots__/accordion-for-sbanken-have-to-match-in-open-state-with-focus.snap.png b/...apshots__/accordion-for-sbanken-have-to-match-in-open-state-with-focus.snap.png
diff --git a/..._image_snapshots__/accordion-for-sbanken-have-to-match-in-second-state.snap.png b/..._image_snapshots__/accordion-for-sbanken-have-to-match-in-second-state.snap.png
diff --git a/...age_snapshots__/accordion-for-sbanken-have-to-match-with-large-content.snap.png b/...age_snapshots__/accordion-for-sbanken-have-to-match-with-large-content.snap.png
diff --git a/...ages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/...ages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
@@ -195,7 +195,7 @@ p > .dnb-icon {
 .dnb-accordion__header__description + .dnb-accordion__header__title {
   margin-top: 0.25rem;
 }
-.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon:not(.dnb-accordion__header__icon--no-animation) {
+.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon {
   transform: rotate(-180deg);
 }
 .dnb-accordion__content {
@@ -231,7 +231,7 @@ p > .dnb-icon {
   }
 }
 @media screen and (min-width: 40em) {
-  .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon:not(.dnb-accordion__header__icon--no-animation) {
+  .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon {
     transform: rotate(-90deg);
   }
 }

diff --git a/packages/dnb-eufemia/src/components/accordion/style/dnb-accordion.scss b/packages/dnb-eufemia/src/components/accordion/style/dnb-accordion.scss
@@ -129,9 +129,7 @@
     }
   }
 
-  &--expanded
-    > &__header
-    &__header__icon:not(#{&}__header__icon--no-animation) {
+  &--expanded > &__header &__header__icon {
     transform: rotate(-180deg);
   }
 
@@ -188,10 +186,7 @@
     //   }
     // }
   }
-  &-group--single-container
-    &
-    > &__header
-    &__header__icon:not(#{&}__header__icon--no-animation) {
+  &-group--single-container & > &__header &__header__icon {
     @include allAbove(small) {
       transform: rotate(-90deg);
     }