fix(Accordion): support nested accordions

dnbexperience · Oct 3, 2022 · 1741d68 · 1741d68
1 parent 0560ce3
commit 1741d68
Show file tree

Hide file tree

Showing 8 changed files with 232 additions and 136 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/Examples.js
@@ -266,3 +266,37 @@ export const AccordionPlainVariant = () => {
     </ComponentBox>
   ) : null
 }
+
+export const AccordionNestedExample = () => {
+  return (
+    <ComponentBox data-visual-test="accordion-nested">
+      {
+        /* jsx */ `
+<Accordion
+  id="nested-accordion"
+  title="Accordion"
+  expanded
+  space
+>
+  <P space={false}>Content A</P>
+  <Accordion
+    id="nested-accordion-1"
+    title="Accordion nested 1"
+    space
+  >
+    <P space={false}>I'm nested 1</P>
+  </Accordion>
+  <P space={false}>Content B</P>
+  <Accordion
+    id="nested-accordion-2"
+    title="Accordion nested 2"
+    space
+  >
+    <P space={false}>I'm nested 2</P>
+  </Accordion>
+</Accordion>
+`
+      }
+    </ComponentBox>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/accordion/demos.md
@@ -8,7 +8,8 @@ AccordionLargeContentExample,
 AccordionCustomisationExample,
 AccordionContainerExample,
 AccordionGroupExample,
-AccordionPlainVariant
+AccordionNestedExample,
+AccordionPlainVariant,
 } from 'Docs/uilib/components/accordion/Examples'
 
 ## Demos
@@ -31,6 +32,10 @@ AccordionPlainVariant
 
 <AccordionCustomisationExample />
 
+### Nested Accordions
+
+<AccordionNestedExample />
+
 ### Accordion with a single container
 
 A single container is only used for wider screens (desktop). When the users' screen is narrower (mobile), it will change to a normal accordion. The change happens with CSS only, so it will not interrupt any React render.

diff --git a/packages/dnb-eufemia/src/components/accordion/__tests__/Accordion.screenshot.test.js b/packages/dnb-eufemia/src/components/accordion/__tests__/Accordion.screenshot.test.js
@@ -53,6 +53,15 @@ describe('Accordion closed screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match accordion in nested accordions', async () => {
+    const screenshot = await testPageScreenshot({
+      style: { width: '20rem', height: '25rem' },
+      selector: '[data-visual-test="accordion-nested"]',
+      simulateSelector: '[data-visual-test="accordion-nested"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe('Accordion container screenshot', () => {

diff --git a/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap b/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap
diff --git a/...closed-screenshot-have-to-match-accordion-in-nested-accordions-1-f81b0.snap.png b/...closed-screenshot-have-to-match-accordion-in-nested-accordions-1-f81b0.snap.png
diff --git a/packages/dnb-eufemia/src/components/accordion/stories/Accordion.stories.js b/packages/dnb-eufemia/src/components/accordion/stories/Accordion.stories.js
@@ -65,6 +65,43 @@ const DidRender = ({ message }) => {
   return <></>
 }
 
+export const NestedAccordion = () => {
+  return (
+    <Wrapper>
+      <Box>
+        <Accordion
+          id="nested-accordion"
+          title="Accordion"
+          expanded
+          space
+          prevent_rerender
+        >
+          <P>Text A</P>
+          <Accordion
+            id="nested-accordion-1"
+            title="Accordion 1"
+            expanded
+            space
+            prevent_rerender
+          >
+            <P>I'm nested 1</P>
+          </Accordion>
+          <P>Text B</P>
+          <Accordion
+            id="nested-accordion-2"
+            title="Accordion 2 very long title"
+            expanded
+            space
+            prevent_rerender
+          >
+            <P>I'm nested 2</P>
+          </Accordion>
+        </Accordion>
+      </Box>
+    </Wrapper>
+  )
+}
+
 export const AccordionSandbox = () => {
   return (
     <Wrapper>
@@ -324,7 +361,7 @@ function AccordionWithContainer() {
 }
 function ChangingContent({ changeHeight, children }) {
   const [contentSize, changeContentSize] = React.useState(false)
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     changeHeight.current.setContainerHeight()
   }, [changeHeight, contentSize])
   return (
@@ -339,6 +376,8 @@ function ChangingContent({ changeHeight, children }) {
         Toggle content size
       </ToggleButton>
 
+      {String(contentSize)}
+
       {contentSize ? children : null}
     </>
   )

diff --git a/packages/dnb-eufemia/src/components/accordion/style/_accordion.scss b/packages/dnb-eufemia/src/components/accordion/style/_accordion.scss
@@ -26,6 +26,9 @@
     cursor: pointer;
     outline: none;
 
+    border: var(--accordion-border-width) solid transparent;
+    border-radius: var(--accordion-border-radius);
+
     &:focus {
       user-select: none;
     }
@@ -40,11 +43,6 @@
       pointer-events: none;
     }
 
-    border: var(--accordion-border-width) solid transparent;
-    border-radius: var(--accordion-border-radius);
-
-    // background-color: var(--color-white);
-
     &__wrapper {
       display: flex;
       flex-direction: column;
@@ -116,23 +114,22 @@
     }
   }
 
-  &--expanded &__header {
-    &__icon {
-      transform: rotate(-180deg);
-    }
-  }
-
   &--no-animation &__header,
   html[data-visual-test] &__header {
     &__icon {
       transition-duration: 1ms !important;
     }
   }
 
+  &--expanded > &__header &__header__icon {
+    transform: rotate(-180deg);
+  }
+
   &__content {
     display: flex;
     opacity: 1;
     visibility: visible;
+    width: 100%;
 
     will-change: height;
     transition: height 400ms var(--accordion-easing),
@@ -149,6 +146,7 @@
     }
 
     &__inner {
+      width: 100%;
       margin-top: 1rem;
 
       &--remove-content {
@@ -168,10 +166,6 @@
     @media screen and (min-width: 40em) {
       &__header {
         width: 40%; // 40% / 60%
-
-        &__icon {
-          transform: rotate(-90deg);
-        }
       }
 
       // Only to make sure we have a spacing. But would be typcally project spesific
@@ -194,6 +188,11 @@
     //   }
     // }
   }
+  &-group--single-container & > &__header &__header__icon {
+    @media screen and (min-width: 40em) {
+      transform: rotate(-90deg);
+    }
+  }
   &--no-animation &__content,
   html[data-visual-test] &__content {
     transition-duration: 1ms !important;

diff --git a/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss b/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss
@@ -9,28 +9,25 @@
 .dnb-accordion {
   &__header {
     border: none;
+  }
+  > &__header &__header__icon,
+  > &__header &__header__container {
+    color: var(--color-emerald-green);
+  }
 
-    &__icon,
-    &__container {
-      color: var(--color-emerald-green);
-    }
-
-    &__description {
-      color: var(--color-black-55);
-    }
+  > &__header &__header__description {
+    color: var(--color-black-55);
   }
 
-  &--expanded &__header {
-    &__title {
-      font-weight: var(--font-weight-medium);
-    }
+  &--expanded > &__header &__header__title {
+    font-weight: var(--font-weight-medium);
   }
 
   // &__variant--default {
   // }
 
   // Variant: outlined
-  &__variant--outlined &__header {
+  &__variant--outlined > &__header {
     color: var(--color-black-80);
     background-color: var(--color-white);
 
@@ -44,49 +41,52 @@
 
       @include fakeBorder(var(--color-emerald-green), 0.0625rem);
     }
-
-    &[disabled] {
-      background-color: var(--color-white);
-      @include fakeBorder(var(--color-sea-green-30), 0.0625rem);
-      * {
-        color: var(--color-sea-green-30);
-      }
+  }
+  &__variant--outlined > &__header &__header[disabled] {
+    background-color: var(--color-white);
+    @include fakeBorder(var(--color-sea-green-30), 0.0625rem);
+    * {
+      color: var(--color-sea-green-30);
     }
   }
-  &__variant--outlined#{&}--expanded &__header {
+  &__variant--outlined#{&}--expanded > &__header {
     color: var(--color-white);
     background-color: var(--color-sea-green);
 
     @include fakeBorder(transparent);
-
-    &[disabled] {
-      background-color: var(--color-sea-green-30);
-      * {
-        color: var(--color-white);
-      }
+  }
+  &__variant--outlined#{&}--expanded > &__header &__header[disabled] {
+    background-color: var(--color-sea-green-30);
+    * {
+      color: var(--color-white);
     }
+  }
 
-    // Additional focus handling
+  // Additional focus handling
+  &__variant--outlined#{&}--expanded
+    > &__header
     html[data-whatinput='keyboard']
-      &:not([disabled]):not(:active):not(:hover):focus {
-      background-color: var(--color-mint-green);
-      * {
-        color: var(--color-emerald-green);
-      }
-    }
-    &:not([disabled]):not(:active):not(:hover):focus {
-      @include fakeFocus(null, var(--color-emerald-green), inset);
+    &__header:not([disabled]):not(:active):not(:hover):focus {
+    background-color: var(--color-mint-green);
+    * {
+      color: var(--color-emerald-green);
     }
   }
+  &__variant--outlined#{&}--expanded
+    > &__header
+    &__header:not([disabled]):not(:active):not(:hover):focus {
+    @include fakeFocus(null, var(--color-emerald-green), inset);
+  }
 
   &__variant--outlined#{&}--expanded
+    > &__header
     &__header:not(:hover):not([disabled]) {
     * {
       color: var(--color-white);
     }
   }
   // we have this hover variant, because of the default html focus/hover handling
-  &__variant--outlined#{&}--expanded &__header#{&}--hover:not(:active) {
+  &__variant--outlined#{&}--expanded > &__header#{&}--hover:not(:active) {
     @include hover {
       color: var(--color-white);
       background-color: var(--color-sea-green);