diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/Examples.tsx index 956fb18c40f..062961ff50b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/lists/Examples.tsx @@ -18,10 +18,12 @@ render(
Description 1
Description 2
Description 3
-
-
Sub Term
-
Sub Description
-
+
+
+
Sub Term
+
Sub Description
+
+
) ` } diff --git a/packages/dnb-eufemia/src/elements/Dl.tsx b/packages/dnb-eufemia/src/elements/Dl.tsx index 462fc2d8f66..4e0a1082d67 100644 --- a/packages/dnb-eufemia/src/elements/Dl.tsx +++ b/packages/dnb-eufemia/src/elements/Dl.tsx @@ -37,9 +37,10 @@ Dl.Item = ({ children, }: DlItemProps & React.AllHTMLAttributes) => { return ( - + <> {children} - +
+ ) } diff --git a/packages/dnb-eufemia/src/elements/__tests__/Lists.screenshot.test.js b/packages/dnb-eufemia/src/elements/__tests__/Lists.screenshot.test.js index 006317d081f..c2ce1586be4 100644 --- a/packages/dnb-eufemia/src/elements/__tests__/Lists.screenshot.test.js +++ b/packages/dnb-eufemia/src/elements/__tests__/Lists.screenshot.test.js @@ -52,7 +52,7 @@ describe('List screenshot', () => { it('have to match dl list', async () => { const screenshot = await testPageScreenshot({ - style: { width: '40rem' }, + style: { width: '35rem' }, selector: '[data-visual-test="lists-dl-horizontal"]', }) expect(screenshot).toMatchImageSnapshot() diff --git a/packages/dnb-eufemia/src/elements/__tests__/Lists.test.tsx b/packages/dnb-eufemia/src/elements/__tests__/Lists.test.tsx new file mode 100644 index 00000000000..691b4e1959f --- /dev/null +++ b/packages/dnb-eufemia/src/elements/__tests__/Lists.test.tsx @@ -0,0 +1,49 @@ +/** + * Dl Test + * + */ + +import React from 'react' +import { axeComponent } from '../../core/jest/jestSetup' +import { render } from '@testing-library/react' +import Dl from '../Dl' +import Dt from '../Dt' +import Dd from '../Dd' + +describe('Dl', () => { + describe('in horizontal direction', () => { + it('should validate with ARIA rules', async () => { + const Component = render( +
+ +
Term
+
Description
+
+ +
Term
+
Description
+
+
+ ) + expect(await axeComponent(Component)).toHaveNoViolations() + }) + }) + + describe('with nested Dls', () => { + it('should validate with ARIA rules', async () => { + const Component = render( +
+
Term
+
Description
+
+
+
Term
+
Description
+
+
+
+ ) + expect(await axeComponent(Component)).toHaveNoViolations() + }) + }) +}) diff --git a/packages/dnb-eufemia/src/elements/__tests__/__snapshots__/lists-screenshot-test-js-list-screenshot-have-to-match-dl-list-2-6ae87.snap.png b/packages/dnb-eufemia/src/elements/__tests__/__snapshots__/lists-screenshot-test-js-list-screenshot-have-to-match-dl-list-2-6ae87.snap.png index a358b6c3748..159f48dbbf4 100644 Binary files a/packages/dnb-eufemia/src/elements/__tests__/__snapshots__/lists-screenshot-test-js-list-screenshot-have-to-match-dl-list-2-6ae87.snap.png and b/packages/dnb-eufemia/src/elements/__tests__/__snapshots__/lists-screenshot-test-js-list-screenshot-have-to-match-dl-list-2-6ae87.snap.png differ diff --git a/packages/dnb-eufemia/src/elements/stories/Lists.stories.tsx b/packages/dnb-eufemia/src/elements/stories/Lists.stories.tsx index 8c166637870..66a1095c07a 100644 --- a/packages/dnb-eufemia/src/elements/stories/Lists.stories.tsx +++ b/packages/dnb-eufemia/src/elements/stories/Lists.stories.tsx @@ -139,8 +139,19 @@ export const ListSandbox = () => (
Term
Description
+ +
A term with several
+
+ Description with several words lorem nulla mi posuere + cubilia vel vulputate +
+
A term with several words
+
Description
+
+ +
Term word
Description with several words lorem nulla mi posuere cubilia vel vulputate diff --git a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap index fc881ca66ab..03a8ef5e4d3 100644 --- a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap +++ b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap @@ -726,24 +726,29 @@ a.dnb-button { .dnb-dl dd { padding: 0; margin: 0.5rem 0 1rem; } - .dnb-dl > dl, - .dnb-dl:not([class*='dnb-space']) > dl { + .dnb-dl > dd > dl, + .dnb-dl:not([class*='dnb-space']) > dd > dl { margin-top: 1.5rem; margin-left: 2rem; } @media screen and (min-width: 40em) { .dnb-dl__direction--horizontal { display: flex; - flex-direction: column; + flex-wrap: wrap; gap: 0.5rem; } - .dnb-dl__direction--horizontal dt, + .dnb-dl__direction--horizontal dt { + margin-right: 0.5rem; + max-width: 30%; } .dnb-dl__direction--horizontal dd { + width: calc(70% - 1.5rem); } + .dnb-dl__direction--horizontal dt, + .dnb-dl__direction--horizontal dd, + .dnb-dl__direction--horizontal dd ~ dt { margin-top: 0; margin-bottom: 0; } - .dnb-dl__direction--horizontal dt { - margin-right: 1rem; - max-width: 60ch; } - .dnb-dl__item { - display: flex; } } + .dnb-dl dd.dnb-dl__item { + width: 100%; + height: 0; + overflow: hidden; } } .dnb-spacing .dnb-ul:not([class*='dnb-space__top']), .dnb-spacing .dnb-ol:not([class*='dnb-space__top']) { diff --git a/packages/dnb-eufemia/src/style/elements/lists.scss b/packages/dnb-eufemia/src/style/elements/lists.scss index 82441a4ec6d..321c0a086a6 100644 --- a/packages/dnb-eufemia/src/style/elements/lists.scss +++ b/packages/dnb-eufemia/src/style/elements/lists.scss @@ -130,8 +130,8 @@ // In case we really want / need to have a indented definition content // margin-left: 2rem; } - & > dl, - &:not([class*='dnb-space']) > dl { + & > dd > dl, + &:not([class*='dnb-space']) > dd > dl { margin-top: 1.5rem; margin-left: 2rem; } @@ -140,22 +140,29 @@ @include allAbove(small) { &__direction--horizontal { display: flex; - flex-direction: column; + flex-wrap: wrap; gap: 0.5rem; - & dt, + & dt { + margin-right: 0.5rem; + max-width: 30%; + } & dd { + // width: calc(70% - 1.5rem); // minus margin-right and the gap + width: calc(70% - 1.5rem); // minus margin-right and the gap + } + & dt, + & dd, + & dd ~ dt { margin-top: 0; margin-bottom: 0; } - & dt { - margin-right: 1rem; - max-width: 60ch; - } } - &__item { - display: flex; + dd#{&}__item { + width: 100%; + height: 0; + overflow: hidden; } } }