From 45da9643fa1c6ef18e35ab951406eb41781e7718 Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 3 Oct 2022 11:10:08 +0200 Subject: [PATCH] fix(Accordion): support nested accordions --- .../uilib/components/accordion/Examples.js | 34 ++++ .../docs/uilib/components/accordion/demos.md | 7 +- .../__tests__/Accordion.screenshot.test.js | 9 + .../__snapshots__/Accordion.test.js.snap | 174 +++++++++--------- ...dion-in-nested-accordions-1-f81b0.snap.png | Bin 0 -> 14749 bytes .../accordion/stories/Accordion.stories.js | 44 ++++- .../accordion/style/_accordion.scss | 29 ++- .../style/themes/dnb-accordion-theme-ui.scss | 74 ++++---- 8 files changed, 235 insertions(+), 136 deletions(-) create mode 100644 packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/accordion-screenshot-test-js-accordion-closed-screenshot-have-to-match-accordion-in-nested-accordions-1-f81b0.snap.png 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 index 8e65204ee3b..81e72056c5c 100644 --- 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 = () => { ) : null } + +export const AccordionNestedExample = () => { + return ( + + { + /* jsx */ ` + +

Content A

+ +

I'm nested 1

+ +

Content B

+ +

I'm nested 2

+ + +` + } + + ) +} 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 index 1afacce64c4..7daa2be73ba 100644 --- 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 +### Nested Accordions + + + ### 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 index 7e2768cecdb..c2c01181a0f 100644 --- 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 index 3c981410802..b7bc2c5c2d3 100644 --- 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 @@ -179,15 +179,18 @@ exports[`Accordion scss have to match default theme snapshot 1`] = ` */ .dnb-accordion__header { border: none; } - .dnb-accordion__header__icon, .dnb-accordion__header__container { - color: var(--color-emerald-green); } - .dnb-accordion__header__description { - color: var(--color-black-55); } -.dnb-accordion--expanded .dnb-accordion__header__title { +> .dnb-accordion__header .dnb-accordion__header__icon, +> .dnb-accordion__header .dnb-accordion__header__container { + color: var(--color-emerald-green); } + +> .dnb-accordion__header .dnb-accordion__header__description { + color: var(--color-black-55); } + +.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__title { font-weight: var(--font-weight-medium); } -.dnb-accordion__variant--outlined .dnb-accordion__header { +.dnb-accordion__variant--outlined > .dnb-accordion__header { color: var(--color-black-80); background-color: var(--color-white); --border-color: var(--color-black-8); @@ -196,139 +199,143 @@ exports[`Accordion scss have to match default theme snapshot 1`] = ` /* Safari fix - because \\"inset\\" works not fine with border-radius if the user zooms the page */ border-color: transparent; } @supports (-webkit-touch-callout: none) { - .dnb-accordion__variant--outlined .dnb-accordion__header { + .dnb-accordion__variant--outlined > .dnb-accordion__header { box-shadow: 0 0 0 0.0625rem var(--border-color); } } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) { - .dnb-accordion__variant--outlined .dnb-accordion__header { + .dnb-accordion__variant--outlined > .dnb-accordion__header { box-shadow: 0 0 0 0.0625rem var(--border-color); } } } @media screen and (-ms-high-contrast: none) { - .dnb-accordion__variant--outlined .dnb-accordion__header { + .dnb-accordion__variant--outlined > .dnb-accordion__header { box-shadow: inset 0 0 0 1px var(--color-black-8); } } - .dnb-accordion__variant--outlined .dnb-accordion__header:focus[disabled], - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus[disabled] { + .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled], + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus[disabled] { cursor: not-allowed; } - .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]), - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]) { + .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { outline: none; } - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]) { + html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { color: var(--color-emerald-green); background-color: var(--color-white); } - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]) { + html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { --border-color: var(--color-emerald-green); box-shadow: inset 0 0 0 0.125rem var(--border-color); /* iOS fix - because \\"inset\\" works not fine with border-radius */ /* Safari fix - because \\"inset\\" works not fine with border-radius if the user zooms the page */ border-color: transparent; } @supports (-webkit-touch-callout: none) { - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]) { + html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--border-color); } } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) { - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]) { + html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--border-color); } } } @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:focus:not([disabled]) { + html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]), html[data-whatinput='keyboard'] + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:focus:not([disabled]) { box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } } - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:hover[disabled] { + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover[disabled] { cursor: not-allowed; } - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:hover:not([disabled]) { + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) { color: var(--color-emerald-green); background-color: var(--color-white); --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:hover:not([disabled]) { + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) { box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } } @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:hover:not([disabled]) { + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:hover:not([disabled]) { opacity: 1; } } - .dnb-accordion__variant--outlined .dnb-accordion__header:active[disabled], - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:active[disabled] { + .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled], + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active[disabled] { cursor: not-allowed; } - .dnb-accordion__variant--outlined .dnb-accordion__header:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:active:not([disabled]) { + .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]), + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]) { color: var(--color-emerald-green); background-color: var(--color-pistachio); --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } @media screen and (-ms-high-contrast: none) { - .dnb-accordion__variant--outlined .dnb-accordion__header:active:not([disabled]), - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined .dnb-accordion__header:active:not([disabled]) { + .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]), + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined > .dnb-accordion__header:active:not([disabled]) { box-shadow: 0 0 0 0.0625rem var(--color-emerald-green); } } - .dnb-accordion__variant--outlined .dnb-accordion__header[disabled] { - background-color: var(--color-white); - --border-color: var(--color-sea-green-30); - box-shadow: 0 0 0 0.0625rem var(--border-color); - border-color: transparent; } - @media screen and (-ms-high-contrast: none) { - .dnb-accordion__variant--outlined .dnb-accordion__header[disabled] { - box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30); } } - .dnb-accordion__variant--outlined .dnb-accordion__header[disabled] * { - color: var(--color-sea-green-30); } -.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header { +.dnb-accordion__variant--outlined > .dnb-accordion__header .dnb-accordion__header[disabled] { + background-color: var(--color-white); + --border-color: var(--color-sea-green-30); + box-shadow: 0 0 0 0.0625rem var(--border-color); + border-color: transparent; } + @media screen and (-ms-high-contrast: none) { + .dnb-accordion__variant--outlined > .dnb-accordion__header .dnb-accordion__header[disabled] { + box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30); } } + .dnb-accordion__variant--outlined > .dnb-accordion__header .dnb-accordion__header[disabled] * { + color: var(--color-sea-green-30); } + +.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header { color: var(--color-white); background-color: var(--color-sea-green); --border-color: transparent; box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } @media screen and (-ms-high-contrast: none) { - .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header { + .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header { box-shadow: 0 0 0 0.0625rem transparent; } } - .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header[disabled] { - background-color: var(--color-sea-green-30); } - .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header[disabled] * { - color: var(--color-white); } - html[data-whatinput='keyboard'] -.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { - background-color: var(--color-mint-green); } - html[data-whatinput='keyboard'] -.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus * { - color: var(--color-emerald-green); } - .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { - outline: none; } - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { - --border-color: var(--color-emerald-green); - box-shadow: inset 0 0 0 0.125rem var(--border-color); - /* iOS fix - because \\"inset\\" works not fine with border-radius */ - /* Safari fix - because \\"inset\\" works not fine with border-radius if the user zooms the page */ - border-color: transparent; } - @supports (-webkit-touch-callout: none) { - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { - box-shadow: 0 0 0 0.125rem var(--border-color); } } - @media not all and (min-resolution: 0.001dpcm) { - @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) { - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { - box-shadow: 0 0 0 0.125rem var(--border-color); } } } - @media screen and (-ms-high-contrast: none) { - html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { - box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } } -.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header:not(:hover):not([disabled]) * { +.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header[disabled] { + background-color: var(--color-sea-green-30); } + .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header[disabled] * { + color: var(--color-white); } + +.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header html[data-whatinput='keyboard'] +.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { + background-color: var(--color-mint-green); } + .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header html[data-whatinput='keyboard'] +.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus * { + color: var(--color-emerald-green); } + +.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { + outline: none; } + html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { + --border-color: var(--color-emerald-green); + box-shadow: inset 0 0 0 0.125rem var(--border-color); + /* iOS fix - because \\"inset\\" works not fine with border-radius */ + /* Safari fix - because \\"inset\\" works not fine with border-radius if the user zooms the page */ + border-color: transparent; } + @supports (-webkit-touch-callout: none) { + html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { + box-shadow: 0 0 0 0.125rem var(--border-color); } } + @media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) { + html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { + box-shadow: 0 0 0 0.125rem var(--border-color); } } } + @media screen and (-ms-high-contrast: none) { + html[data-whatinput='keyboard'] .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus { + box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } } + +.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header:not(:hover):not([disabled]) * { color: var(--color-white); } -html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled] { +html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled] { cursor: not-allowed; } -html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) { +html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) { color: var(--color-white); background-color: var(--color-sea-green); --border-color: var(--color-sea-green); box-shadow: 0 0 0 0.0625rem var(--border-color); border-color: transparent; } @media screen and (-ms-high-contrast: none) { - html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) { + html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active):hover:not([disabled]) { box-shadow: 0 0 0 0.0625rem var(--color-sea-green); } } -.dnb-accordion__variant--outlined.dnb-accordion--expanded .dnb-accordion__header.dnb-accordion--hover:not(:active) * { +.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header.dnb-accordion--hover:not(:active) * { color: var(--color-white); } " `; @@ -538,15 +545,16 @@ exports[`Accordion scss have to match snapshot 1`] = ` margin-top: 0.25rem; } .dnb-accordion__header__description + .dnb-accordion__header__title { margin-top: 0.25rem; } - .dnb-accordion--expanded .dnb-accordion__header__icon { - transform: rotate(-180deg); } .dnb-accordion--no-animation .dnb-accordion__header__icon, html[data-visual-test] .dnb-accordion__header__icon { transition-duration: 1ms !important; } + .dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header__icon { + transform: rotate(-180deg); } .dnb-accordion__content { display: flex; opacity: 1; visibility: visible; + width: 100%; will-change: height; transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing); } .dnb-accordion__content--hidden { @@ -556,6 +564,7 @@ exports[`Accordion scss have to match snapshot 1`] = ` .dnb-accordion__content--is-animating { overflow: hidden; } .dnb-accordion__content__inner { + width: 100%; margin-top: 1rem; } .dnb-accordion__content__inner--remove-content { display: none; } @@ -567,13 +576,14 @@ exports[`Accordion scss have to match snapshot 1`] = ` @media screen and (min-width: 40em) { .dnb-accordion-group--single-container .dnb-accordion__header { width: 40%; } - .dnb-accordion-group--single-container .dnb-accordion__header__icon { - transform: rotate(-90deg); } .dnb-accordion-group--single-container .dnb-accordion__content { margin-left: 1rem; transition: opacity 1s var(--accordion-easing); } .dnb-accordion-group--single-container .dnb-accordion__content__inner { margin-top: 0; } } + @media screen and (min-width: 40em) { + .dnb-accordion-group--single-container .dnb-accordion > .dnb-accordion__header .dnb-accordion__header__icon { + transform: rotate(-90deg); } } .dnb-accordion--no-animation .dnb-accordion__content, html[data-visual-test] .dnb-accordion__content { transition-duration: 1ms !important; } diff --git a/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/accordion-screenshot-test-js-accordion-closed-screenshot-have-to-match-accordion-in-nested-accordions-1-f81b0.snap.png b/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/accordion-screenshot-test-js-accordion-closed-screenshot-have-to-match-accordion-in-nested-accordions-1-f81b0.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..5b6423d5464ce2e7cf33cf2de1931928473b0a67 GIT binary patch literal 14749 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 { return <> } +export const NestedAccordion = () => { + return ( + + + +

Text A

+ +

I'm nested 1

+ +

Text B

+ +

I'm nested 2

+ + + + + ) +} + export const AccordionSandbox = () => { return ( @@ -324,7 +364,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 +379,8 @@ function ChangingContent({ changeHeight, children }) { Toggle content size + {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 index f5f78eacee7..6118a443046 100644 --- 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,12 +114,6 @@ } } - &--expanded &__header { - &__icon { - transform: rotate(-180deg); - } - } - &--no-animation &__header, html[data-visual-test] &__header { &__icon { @@ -129,10 +121,15 @@ } } + &--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 index 5cb83f742d2..04103eb73ec 100644 --- 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);