From cc1000c53bc2a4278cd4dee0b1ce161ffe9c91db Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 29 Oct 2024 15:53:21 +0100 Subject: [PATCH 01/25] [Darkside] Migrated typo to new CSS --- .storybook/preview.jsx | 2 +- .../css/darkside/baseline/theme.darkside.css | 6 +- .../core/css/darkside/typography.darkside.css | 135 ++++++++---------- 3 files changed, 67 insertions(+), 76 deletions(-) diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index 88cb8ca018..f84af9305d 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -50,7 +50,7 @@ const ModeDecorator = ({ children, mode }) => { document.head.appendChild(style); if (mode === "darkside") { - document.body.style.setProperty("background", "var(--a-bg-default)"); + document.body.style.setProperty("background", "var(--ax-bg-default)"); } return () => { diff --git a/@navikt/core/css/darkside/baseline/theme.darkside.css b/@navikt/core/css/darkside/baseline/theme.darkside.css index d752dfb905..8dfe05a2d0 100644 --- a/@navikt/core/css/darkside/baseline/theme.darkside.css +++ b/@navikt/core/css/darkside/baseline/theme.darkside.css @@ -1,10 +1,12 @@ +/* stylelint-disable csstools/value-no-unknown-custom-properties */ + /* To support nested theming, we want to declare color on each scoped elements */ :root, :host, .light { - color: var(--a-text-default); + color: var(--ax-text-default); } .dark { - color: var(--a-text-default); + color: var(--ax-text-default); } diff --git a/@navikt/core/css/darkside/typography.darkside.css b/@navikt/core/css/darkside/typography.darkside.css index 9d8ae5ecf4..0dda0eda10 100644 --- a/@navikt/core/css/darkside/typography.darkside.css +++ b/@navikt/core/css/darkside/typography.darkside.css @@ -1,4 +1,4 @@ -/* New in darkside */ +/* stylelint-disable csstools/value-no-unknown-custom-properties */ body, :host { font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif; @@ -6,207 +6,196 @@ body, font-size: 1.125rem; } -/* Start old CSS (pre darkside) */ -[data-theme="dark"] { - --__ac-typo-error-text: var(--a-red-300); - --__ac-typo-text-subtle: var(--a-gray-300); -} - -[data-theme="light"] { - --__ac-typo-error-text: initial; - --__ac-typo-text-subtle: initial; -} - /* Heading */ .navds-heading { - font-weight: var(--a-font-weight-bold); + font-weight: var(--ax-font-weight-bold); margin: 0; } .navds-heading--xlarge { - font-size: var(--a-font-size-heading-2xlarge); + font-size: var(--ax-font-size-heading-2xlarge); letter-spacing: -0.01em; - line-height: var(--a-font-line-height-heading-2xlarge); + line-height: var(--ax-font-line-height-heading-2xlarge); } .navds-heading--xlarge.navds-typo--spacing { - margin-bottom: var(--a-spacing-5); + margin-bottom: var(--ax-spacing-5); } .navds-heading--large { - font-size: var(--a-font-size-heading-xlarge); + font-size: var(--ax-font-size-heading-xlarge); letter-spacing: -0.008em; - line-height: var(--a-font-line-height-heading-xlarge); + line-height: var(--ax-font-line-height-heading-xlarge); } .navds-heading--large.navds-typo--spacing { - margin-bottom: var(--a-spacing-4); + margin-bottom: var(--ax-spacing-4); } /* Mobile scale */ @media (max-width: 480px) { .navds-heading--xlarge { - font-size: var(--a-font-size-heading-xlarge); + font-size: var(--ax-font-size-heading-xlarge); letter-spacing: -0.008em; - line-height: var(--a-font-line-height-heading-xlarge); + line-height: var(--ax-font-line-height-heading-xlarge); } .navds-heading--xlarge.navds-typo--spacing { - margin-bottom: var(--a-spacing-4); + margin-bottom: var(--ax-spacing-4); } .navds-heading--large { - font-size: var(--a-font-size-heading-large); + font-size: var(--ax-font-size-heading-large); letter-spacing: -0.004em; - line-height: var(--a-font-line-height-heading-large); + line-height: var(--ax-font-line-height-heading-large); } .navds-heading--large.navds-typo--spacing { - margin-bottom: var(--a-spacing-3); + margin-bottom: var(--ax-spacing-3); } } .navds-heading--medium { - font-size: var(--a-font-size-heading-medium); + font-size: var(--ax-font-size-heading-medium); letter-spacing: -0.002em; - line-height: var(--a-font-line-height-heading-medium); + line-height: var(--ax-font-line-height-heading-medium); } .navds-heading--medium.navds-typo--spacing { - margin-bottom: var(--a-spacing-3); + margin-bottom: var(--ax-spacing-3); } .navds-heading--small { - font-size: var(--a-font-size-heading-small); + font-size: var(--ax-font-size-heading-small); letter-spacing: -0.001em; - line-height: var(--a-font-line-height-heading-small); + line-height: var(--ax-font-line-height-heading-small); } .navds-heading--small.navds-typo--spacing { - margin-bottom: var(--a-spacing-3); + margin-bottom: var(--ax-spacing-3); } .navds-heading--xsmall { - font-size: var(--a-font-size-heading-xsmall); + font-size: var(--ax-font-size-heading-xsmall); letter-spacing: -0.001em; - line-height: var(--a-font-line-height-heading-xsmall); + line-height: var(--ax-font-line-height-heading-xsmall); } .navds-heading--xsmall.navds-typo--spacing { - margin-bottom: var(--a-spacing-3); + margin-bottom: var(--ax-spacing-3); } /* Ingress */ .navds-ingress { - font-size: var(--a-font-size-xlarge); - font-weight: var(--a-font-weight-regular); + font-size: var(--ax-font-size-xlarge); + font-weight: var(--ax-font-weight-regular); letter-spacing: -0.001em; - line-height: var(--a-font-line-height-xlarge); + line-height: var(--ax-font-line-height-xlarge); margin: 0; } .navds-ingress.navds-typo--spacing { - margin-bottom: var(--a-spacing-10); + margin-bottom: var(--ax-spacing-10); } /* Body */ .navds-body-long { - font-size: var(--a-font-size-large); - font-weight: var(--a-font-weight-regular); + font-size: var(--ax-font-size-large); + font-weight: var(--ax-font-weight-regular); letter-spacing: 0; - line-height: var(--a-font-line-height-xlarge); + line-height: var(--ax-font-line-height-xlarge); margin: 0; } .navds-body-long.navds-typo--spacing { - margin-bottom: var(--a-spacing-7); + margin-bottom: var(--ax-spacing-7); } .navds-body-long--large { - font-size: var(--a-font-size-xlarge); + font-size: var(--ax-font-size-xlarge); letter-spacing: -0.0013em; - line-height: var(--a-font-line-height-xlarge); + line-height: var(--ax-font-line-height-xlarge); } .navds-body-long--large.navds-typo--spacing { - margin-bottom: var(--a-spacing-10); + margin-bottom: var(--ax-spacing-10); } .navds-body-long--small { - font-size: var(--a-font-size-medium); + font-size: var(--ax-font-size-medium); letter-spacing: 0.002em; - line-height: var(--a-font-line-height-large); + line-height: var(--ax-font-line-height-large); } .navds-body-long--small.navds-typo--spacing { - margin-bottom: var(--a-spacing-6); + margin-bottom: var(--ax-spacing-6); } .navds-body-short { - font-size: var(--a-font-size-large); - font-weight: var(--a-font-weight-regular); + font-size: var(--ax-font-size-large); + font-weight: var(--ax-font-weight-regular); letter-spacing: 0; - line-height: var(--a-font-line-height-large); + line-height: var(--ax-font-line-height-large); margin: 0; } .navds-body-short.navds-typo--spacing { - margin-bottom: var(--a-spacing-3); + margin-bottom: var(--ax-spacing-3); } .navds-body-short--large { - font-size: var(--a-font-size-xlarge); + font-size: var(--ax-font-size-xlarge); letter-spacing: -0.0013em; - line-height: var(--a-font-line-height-large); + line-height: var(--ax-font-line-height-large); } .navds-body-short--large.navds-typo--spacing { - margin-bottom: var(--a-spacing-4); + margin-bottom: var(--ax-spacing-4); } .navds-body-short--small { - font-size: var(--a-font-size-medium); + font-size: var(--ax-font-size-medium); letter-spacing: 0.002em; - line-height: var(--a-font-line-height-medium); + line-height: var(--ax-font-line-height-medium); } .navds-body-short--small.navds-typo--spacing { - margin-bottom: var(--a-spacing-2); + margin-bottom: var(--ax-spacing-2); } /* Label */ .navds-label { - font-size: var(--a-font-size-large); - font-weight: var(--a-font-weight-bold); + font-size: var(--ax-font-size-large); + font-weight: var(--ax-font-weight-bold); letter-spacing: 0; - line-height: var(--a-font-line-height-large); + line-height: var(--ax-font-line-height-large); margin: 0; } .navds-label.navds-typo--spacing { - margin-bottom: var(--a-spacing-3); + margin-bottom: var(--ax-spacing-3); } .navds-label--small { - font-size: var(--a-font-size-medium); + font-size: var(--ax-font-size-medium); letter-spacing: 0.002em; - line-height: var(--a-font-line-height-medium); + line-height: var(--ax-font-line-height-medium); } .navds-label--small.navds-typo--spacing { - margin-bottom: var(--a-spacing-2); + margin-bottom: var(--ax-spacing-2); } /* Small text */ .navds-detail { - font-size: var(--a-font-size-small); + font-size: var(--ax-font-size-small); letter-spacing: 0.004em; - line-height: var(--a-font-line-height-medium); + line-height: var(--ax-font-line-height-medium); margin: 0; } .navds-detail.navds-typo--spacing { - margin-bottom: var(--a-spacing-2); + margin-bottom: var(--ax-spacing-2); } .navds-detail.navds-typo--uppercase { @@ -214,15 +203,15 @@ body, } .navds-detail--small { - font-weight: var(--a-font-weight-regular); + font-weight: var(--ax-font-weight-regular); } .navds-detail--small.navds-typo--spacing { - margin-bottom: var(--a-spacing-2); + margin-bottom: var(--ax-spacing-2); } .navds-error-message { - color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger))); + color: var(--ax-text-danger); } .navds-typo--truncate { @@ -232,7 +221,7 @@ body, } .navds-typo--semibold { - font-weight: var(--a-font-weight-bold); + font-weight: var(--ax-font-weight-bold); } .navds-typo--align-start { @@ -261,5 +250,5 @@ body, } .navds-typo--color-subtle { - color: var(--__ac-typo-text-subtle, var(--a-text-subtle)); + color: var(--ax-text-subtle); } From a7c5d075368fcdcc781941e2942b8dbe03424415 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 29 Oct 2024 15:55:43 +0100 Subject: [PATCH 02/25] memo: Added comments --- @navikt/core/css/darkside/typography.darkside.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/@navikt/core/css/darkside/typography.darkside.css b/@navikt/core/css/darkside/typography.darkside.css index 0dda0eda10..eeeeeb82fe 100644 --- a/@navikt/core/css/darkside/typography.darkside.css +++ b/@navikt/core/css/darkside/typography.darkside.css @@ -1,4 +1,6 @@ /* stylelint-disable csstools/value-no-unknown-custom-properties */ + +/* ------------------------- Global typo-definitions ------------------------ */ body, :host { font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif; @@ -6,6 +8,8 @@ body, font-size: 1.125rem; } +/* ----------------------------- Typo-components ---------------------------- */ + /* Heading */ .navds-heading { font-weight: var(--ax-font-weight-bold); @@ -214,6 +218,7 @@ body, color: var(--ax-text-danger); } +/* -------------------------------- Utilities ------------------------------- */ .navds-typo--truncate { overflow: hidden; white-space: nowrap; From 22004d6748cc1f8f6846d6edd7d0988e14669b37 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 29 Oct 2024 19:09:44 +0100 Subject: [PATCH 03/25] change: Implemented accordion header and content --- .../core/css/darkside/accordion.darkside.css | 180 ++++++++++++++---- 1 file changed, 147 insertions(+), 33 deletions(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index b44af6e4eb..9569adb583 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -1,11 +1,123 @@ +/* stylelint-disable csstools/value-no-unknown-custom-properties */ .navds-accordion { - --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider)); } +/* ---------------------------- Accordion header ---------------------------- */ +.navds-accordion__header { + width: 100%; + display: flex; + justify-content: flex-start; + align-items: flex-start; + gap: var(--ax-spacing-3); + padding: var(--ax-spacing-2) var(--ax-spacing-3); + text-align: left; + cursor: pointer; + border: none; + position: relative; + z-index: 1; + border-radius: var(--ax-border-radius-large); + background: transparent; + color: var(--ax-text-accent); + + &:hover { + background-color: var(--ax-bg-accent-hover); + color: var(--ax-text-accent-strong); + } + + &:focus-visible { + outline: 2px solid var(--ax-border-focus); + outline-offset: 2px; + } +} + +.navds-accordion__header-content { + overflow: hidden; + text-overflow: ellipsis; +} + +/* ------------------------- Accordion chevron icon ------------------------- */ +.navds-accordion__icon-wrapper { + display: grid; + place-content: center; + border-radius: var(--ax-border-radius-large); + width: 22px; + height: 22px; + align-self: center; + background-color: var(--ax-bg-accent-moderate); + color: var(--ax-text-accent-strong); +} + +.navds-accordion__header:hover > .navds-accordion__icon-wrapper { + background-color: var(--ax-bg-accent-strong-hover); + color: var(--ax-text-accent-contrast); +} + +.navds-accordion__header-chevron { + height: inherit; + width: inherit; + flex-shrink: 0; + transition: transform 250ms cubic-bezier(0.2, 0, 0, 1); +} + +.navds-accordion__item--open > .navds-accordion__header .navds-accordion__header-chevron { + transform: rotateX(-180deg); +} + +/* ---------------------------- Accordion content --------------------------- */ +.navds-accordion__content { + --__acx-accordion-content-line-width: 2px; + + padding-inline: var(--ax-spacing-6) var(--ax-spacing-3); + + /* TODO: Will this cause issues? */ + position: relative; + opacity: 0.01; + display: none; + overflow: hidden; + padding-block: 0; + max-height: 0; + transition: all 250ms cubic-bezier(0.2, 0, 0, 1) allow-discrete; +} + +.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content { + /* Since we use psuedo-element for "border", we add the width to left-padding. This alignes with the header-text */ + padding-inline: calc(var(--ax-spacing-11) + var(--__acx-accordion-content-line-width)) var(--ax-spacing-8); +} + +.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content::before { + content: ""; + display: block; + position: absolute; + top: var(--ax-spacing-2); + left: calc(var(--ax-spacing-6) - var(--__acx-accordion-content-line-width)); + height: calc(100% - var(--ax-spacing-7)); + width: var(--__acx-accordion-content-line-width); + background-color: var(--ax-border-subtleA); +} + +.navds-accordion__item--open > .navds-accordion__content { + display: block; + opacity: 1; + overflow: visible; + max-height: fit-content; + padding-block: var(--ax-spacing-4); + padding-block-end: var(--ax-spacing-7); +} + +@starting-style { + .navds-accordion__item--open > .navds-accordion__content { + padding-block: 0; + max-height: 0; + opacity: 0.01; + } +} + +/* START OLD */ + /************************* * Header * *************************/ -.navds-accordion__header { +.old-navds-accordion__header { --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color); @@ -25,31 +137,31 @@ z-index: 1; } -.navds-accordion__header:hover { +.old-navds-accordion__header:hover { background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover)); text-decoration: underline; color: var(--ac-accordion-header-text-hover, inherit); } -.navds-accordion--small .navds-accordion__header { +.old-navds-accordion--small .old-navds-accordion__header { padding: var(--a-spacing-2) var(--a-spacing-3); } -.navds-accordion--medium .navds-accordion__header { +.old-navds-accordion--medium .old-navds-accordion__header { padding: var(--a-spacing-3); } -.navds-accordion--large .navds-accordion__header { +.old-navds-accordion--large .old-navds-accordion__header { padding: var(--a-spacing-4) var(--a-spacing-3); } -.navds-accordion__item:last-child > :where(.navds-accordion__header) { +.old-navds-accordion__item:last-child > :where(.old-navds-accordion__header) { box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color); } -.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) { +.old-navds-accordion__item:last-child:where(.old-navds-accordion__item--open) :where(.old-navds-accordion__header) { box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), @@ -57,7 +169,7 @@ inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color); } -.navds-accordion__item:last-child:where(.navds-accordion__item--open) { +.old-navds-accordion__item:last-child:where(.old-navds-accordion__item--open) { box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), @@ -65,11 +177,11 @@ inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color); } -.navds-accordion__item--open > :where(.navds-accordion__header) { +.old-navds-accordion__item--open > :where(.old-navds-accordion__header) { box-shadow: var(--__ac-accordion-header-shadow); } -.navds-accordion__header:focus-visible { +.old-navds-accordion__header:focus-visible { outline: 2px solid transparent; outline-offset: 3px; box-shadow: var(--a-shadow-focus); @@ -77,14 +189,14 @@ } @supports not selector(:focus-visible) { - .navds-accordion__header:focus { + .old-navds-accordion__header:focus { outline: none; box-shadow: var(--a-shadow-focus); border-radius: var(--a-border-radius-large); } } -.navds-accordion__header-content { +.old-navds-accordion__header-content { overflow: hidden; text-overflow: ellipsis; } @@ -92,7 +204,7 @@ /************************* * Icon * *************************/ -.navds-accordion__icon-wrapper { +.old-navds-accordion__icon-wrapper { display: grid; place-content: center; border-radius: var(--a-border-radius-medium); @@ -101,11 +213,11 @@ align-self: center; } -.navds-accordion__header:hover > .navds-accordion__icon-wrapper { +.old-navds-accordion__header:hover > .old-navds-accordion__icon-wrapper { background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover)); } -.navds-accordion__header-chevron { +.old-navds-accordion__header-chevron { border-radius: var(--a-border-radius-medium); font-size: 1.5rem; height: 1.75rem; @@ -114,35 +226,37 @@ align-self: center; } -:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) { +:where(.old-navds-accordion__header):hover + > :where(.old-navds-accordion__icon-wrapper) + > :where(.old-navds-accordion__header-chevron) { transform: translateY(1px); } -.navds-accordion__item--open - > :where(.navds-accordion__header) - > :where(.navds-accordion__icon-wrapper) - > :where(.navds-accordion__header-chevron) { +.old-navds-accordion__item--open + > :where(.old-navds-accordion__header) + > :where(.old-navds-accordion__icon-wrapper) + > :where(.old-navds-accordion__header-chevron) { transform: translateY(0) rotate(-180deg); } -.navds-accordion__item--open - > :where(.navds-accordion__header):hover - > :where(.navds-accordion__icon-wrapper) - > :where(.navds-accordion__header-chevron) { +.old-navds-accordion__item--open + > :where(.old-navds-accordion__header):hover + > :where(.old-navds-accordion__icon-wrapper) + > :where(.old-navds-accordion__header-chevron) { transform: translateY(-1px) rotate(-180deg); } /************************* * Variant/Default * *************************/ -.navds-accordion__item--open { +.old-navds-accordion__item--open { background-color: var(--ac-accordion-item-bg-open, var(--a-transparent)); } /************************* * Variant/Neutral * *************************/ -.navds-accordion__item--open.navds-accordion__item--neutral { +.old-navds-accordion__item--open.old-navds-accordion__item--neutral { background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle)); } @@ -150,20 +264,20 @@ * Content * *************************/ -.navds-accordion__content { +.old-navds-accordion__content { padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5); animation: fadeAccordionContent 250ms ease; } -.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) { +.old-navds-accordion--indent > :where(.old-navds-accordion__item) > :where(.old-navds-accordion__content) { padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11); } -.navds-accordion__content--closed { +.old-navds-accordion__content--closed { display: none; } -.navds-accordion__item--no-animation :where(.navds-accordion__content) { +.old-navds-accordion__item--no-animation :where(.old-navds-accordion__content) { animation: none; } @@ -184,13 +298,13 @@ } @media (forced-colors: active) { - .navds-accordion__header { + .old-navds-accordion__header { border: 1px solid buttonborder; background-color: canvas; color: canvastext; } - .navds-accordion__header:hover { + .old-navds-accordion__header:hover { background-color: canvas; border: 1px solid highlight; color: highlight; From afadea70c721c9a9fc6aef9e2184ce4b1a704a46 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 29 Oct 2024 19:31:44 +0100 Subject: [PATCH 04/25] change: Added lines --- .../core/css/darkside/accordion.darkside.css | 242 +++--------------- .../react/src/accordion/AccordionItem.tsx | 1 + 2 files changed, 42 insertions(+), 201 deletions(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 9569adb583..9153e4b843 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -1,6 +1,4 @@ /* stylelint-disable csstools/value-no-unknown-custom-properties */ -.navds-accordion { -} /* ---------------------------- Accordion header ---------------------------- */ .navds-accordion__header { @@ -22,11 +20,21 @@ &:hover { background-color: var(--ax-bg-accent-hover); color: var(--ax-text-accent-strong); + + &::before, + &::after { + display: none; + } } &:focus-visible { outline: 2px solid var(--ax-border-focus); outline-offset: 2px; + + &::before, + &::after { + display: none; + } } } @@ -35,6 +43,37 @@ text-overflow: ellipsis; } +.navds-accordion__header::before, +.navds-accordion__header::after, +.navds-accordion__item:last-child > .navds-accordion__content::after { + content: ""; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 1px; + background-color: var(--ax-border-subtle); +} + +.navds-accordion__header::after, +.navds-accordion__item:last-child > .navds-accordion__content::after { + top: initial; + bottom: 0; +} + +.navds-accordion__item[data-expanded="true"] > .navds-accordion__header::after, +.navds-accordion__item:not(:last-child) > .navds-accordion__header::after { + display: none; +} + +.navds-accordion__item[data-expanded="false"]:has(.navds-accordion__header:hover) + + .navds-accordion__item + > .navds-accordion__header::before { + display: none; +} + /* ------------------------- Accordion chevron icon ------------------------- */ .navds-accordion__icon-wrapper { display: grid; @@ -111,202 +150,3 @@ opacity: 0.01; } } - -/* START OLD */ - -/************************* - * Header * - *************************/ -.old-navds-accordion__header { - --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), - inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color); - - width: 100%; - display: flex; - justify-content: flex-start; - align-items: flex-start; - gap: var(--a-spacing-2); - padding: var(--a-spacing-3); - margin: 0; - text-align: left; - background: var(--ac-accordion-header-bg, var(--a-surface-transparent)); - cursor: pointer; - border: none; - position: relative; - box-shadow: var(--__ac-accordion-header-shadow); - z-index: 1; -} - -.old-navds-accordion__header:hover { - background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover)); - text-decoration: underline; - color: var(--ac-accordion-header-text-hover, inherit); -} - -.old-navds-accordion--small .old-navds-accordion__header { - padding: var(--a-spacing-2) var(--a-spacing-3); -} - -.old-navds-accordion--medium .old-navds-accordion__header { - padding: var(--a-spacing-3); -} - -.old-navds-accordion--large .old-navds-accordion__header { - padding: var(--a-spacing-4) var(--a-spacing-3); -} - -.old-navds-accordion__item:last-child > :where(.old-navds-accordion__header) { - box-shadow: - var(--__ac-accordion-header-shadow), - inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color); -} - -.old-navds-accordion__item:last-child:where(.old-navds-accordion__item--open) :where(.old-navds-accordion__header) { - box-shadow: - inset 2px 0 0 0 var(--a-transparent), - inset -2px 0 0 0 var(--a-transparent), - inset 0 2px 0 0 var(--a-transparent), - inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color); -} - -.old-navds-accordion__item:last-child:where(.old-navds-accordion__item--open) { - box-shadow: - inset 2px 0 0 0 var(--a-transparent), - inset -2px 0 0 0 var(--a-transparent), - inset 0 2px 0 0 var(--a-transparent), - inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color); -} - -.old-navds-accordion__item--open > :where(.old-navds-accordion__header) { - box-shadow: var(--__ac-accordion-header-shadow); -} - -.old-navds-accordion__header:focus-visible { - outline: 2px solid transparent; - outline-offset: 3px; - box-shadow: var(--a-shadow-focus); - border-radius: var(--a-border-radius-large); -} - -@supports not selector(:focus-visible) { - .old-navds-accordion__header:focus { - outline: none; - box-shadow: var(--a-shadow-focus); - border-radius: var(--a-border-radius-large); - } -} - -.old-navds-accordion__header-content { - overflow: hidden; - text-overflow: ellipsis; -} - -/************************* - * Icon * - *************************/ -.old-navds-accordion__icon-wrapper { - display: grid; - place-content: center; - border-radius: var(--a-border-radius-medium); - height: var(--a-spacing-6); - width: var(--a-spacing-6); - align-self: center; -} - -.old-navds-accordion__header:hover > .old-navds-accordion__icon-wrapper { - background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover)); -} - -.old-navds-accordion__header-chevron { - border-radius: var(--a-border-radius-medium); - font-size: 1.5rem; - height: 1.75rem; - flex-shrink: 0; - transition: transform 150ms ease-in-out; - align-self: center; -} - -:where(.old-navds-accordion__header):hover - > :where(.old-navds-accordion__icon-wrapper) - > :where(.old-navds-accordion__header-chevron) { - transform: translateY(1px); -} - -.old-navds-accordion__item--open - > :where(.old-navds-accordion__header) - > :where(.old-navds-accordion__icon-wrapper) - > :where(.old-navds-accordion__header-chevron) { - transform: translateY(0) rotate(-180deg); -} - -.old-navds-accordion__item--open - > :where(.old-navds-accordion__header):hover - > :where(.old-navds-accordion__icon-wrapper) - > :where(.old-navds-accordion__header-chevron) { - transform: translateY(-1px) rotate(-180deg); -} - -/************************* - * Variant/Default * - *************************/ -.old-navds-accordion__item--open { - background-color: var(--ac-accordion-item-bg-open, var(--a-transparent)); -} - -/************************* - * Variant/Neutral * - *************************/ -.old-navds-accordion__item--open.old-navds-accordion__item--neutral { - background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle)); -} - -/************************* - * Content * - *************************/ - -.old-navds-accordion__content { - padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5); - animation: fadeAccordionContent 250ms ease; -} - -.old-navds-accordion--indent > :where(.old-navds-accordion__item) > :where(.old-navds-accordion__content) { - padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11); -} - -.old-navds-accordion__content--closed { - display: none; -} - -.old-navds-accordion__item--no-animation :where(.old-navds-accordion__content) { - animation: none; -} - -@keyframes fadeAccordionContent { - 0% { - opacity: 0.25; - transform: translateY(-8px); - } - - 40% { - opacity: 0.7; - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -@media (forced-colors: active) { - .old-navds-accordion__header { - border: 1px solid buttonborder; - background-color: canvas; - color: canvastext; - } - - .old-navds-accordion__header:hover { - background-color: canvas; - border: 1px solid highlight; - color: highlight; - } -} diff --git a/@navikt/core/react/src/accordion/AccordionItem.tsx b/@navikt/core/react/src/accordion/AccordionItem.tsx index e049a9fa32..4434aa4a69 100644 --- a/@navikt/core/react/src/accordion/AccordionItem.tsx +++ b/@navikt/core/react/src/accordion/AccordionItem.tsx @@ -65,6 +65,7 @@ const AccordionItem = forwardRef( "navds-accordion__item--neutral": context?.variant === "neutral", "navds-accordion__item--no-animation": !shouldAnimate.current, })} + data-expanded={_open} ref={ref} {...omit(rest, ["onClick"])} > From 5e10278ed3ed5ea05d46eb620d3324e4ebb4b73a Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 29 Oct 2024 19:33:27 +0100 Subject: [PATCH 05/25] feat: added todo --- @navikt/core/css/darkside/accordion.darkside.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 9153e4b843..7e43ed5bef 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -1,5 +1,15 @@ /* stylelint-disable csstools/value-no-unknown-custom-properties */ +/* TODO: */ + +/* Validate that each 'size' variant is correct */ + +/* refactor code for 'line' above and below */ + +/* Discuss animation */ + +/* Avoid animation from triggering on initial render if default open */ + /* ---------------------------- Accordion header ---------------------------- */ .navds-accordion__header { width: 100%; From 4523a0b5bd8ce04647f8c30b59c510717faed1ae Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 30 Oct 2024 09:52:10 +0100 Subject: [PATCH 06/25] change: Fixed layering issues with lines --- @navikt/core/css/darkside/accordion.darkside.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 7e43ed5bef..ee48976d1b 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -22,7 +22,6 @@ cursor: pointer; border: none; position: relative; - z-index: 1; border-radius: var(--ax-border-radius-large); background: transparent; color: var(--ax-text-accent); @@ -40,6 +39,7 @@ &:focus-visible { outline: 2px solid var(--ax-border-focus); outline-offset: 2px; + z-index: 1; &::before, &::after { @@ -78,7 +78,7 @@ display: none; } -.navds-accordion__item[data-expanded="false"]:has(.navds-accordion__header:hover) +.navds-accordion__item[data-expanded="false"]:has(.navds-accordion__header:where(:hover, :focus-visible)) + .navds-accordion__item > .navds-accordion__header::before { display: none; From 28fb9abed27a79e0396ffe47548977520f10310a Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 30 Oct 2024 10:07:43 +0100 Subject: [PATCH 07/25] change: Avoid animation on initial render --- @navikt/core/css/darkside/accordion.darkside.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index ee48976d1b..59bdd0247a 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -154,7 +154,7 @@ } @starting-style { - .navds-accordion__item--open > .navds-accordion__content { + .navds-accordion__item--open:not(.navds-accordion__item--no-animation) > .navds-accordion__content { padding-block: 0; max-height: 0; opacity: 0.01; From b3758d7d969df2eea514c37a9650758d7f36a984 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 30 Oct 2024 10:20:32 +0100 Subject: [PATCH 08/25] change: Removed comments --- @navikt/core/css/darkside/accordion.darkside.css | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 59bdd0247a..887b20035f 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -6,10 +6,6 @@ /* refactor code for 'line' above and below */ -/* Discuss animation */ - -/* Avoid animation from triggering on initial render if default open */ - /* ---------------------------- Accordion header ---------------------------- */ .navds-accordion__header { width: 100%; @@ -116,10 +112,8 @@ .navds-accordion__content { --__acx-accordion-content-line-width: 2px; - padding-inline: var(--ax-spacing-6) var(--ax-spacing-3); - - /* TODO: Will this cause issues? */ position: relative; + padding-inline: var(--ax-spacing-6) var(--ax-spacing-3); opacity: 0.01; display: none; overflow: hidden; From b4a9f795c8545cb48ce5c5f5ace635f2404a806f Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 30 Oct 2024 11:20:47 +0100 Subject: [PATCH 09/25] change: moved icon state into nesting --- @navikt/core/css/darkside/accordion.darkside.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 887b20035f..706f110000 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -30,6 +30,11 @@ &::after { display: none; } + + > .navds-accordion__icon-wrapper { + background-color: var(--ax-bg-accent-strong-hover); + color: var(--ax-text-accent-contrast); + } } &:focus-visible { @@ -92,11 +97,6 @@ color: var(--ax-text-accent-strong); } -.navds-accordion__header:hover > .navds-accordion__icon-wrapper { - background-color: var(--ax-bg-accent-strong-hover); - color: var(--ax-text-accent-contrast); -} - .navds-accordion__header-chevron { height: inherit; width: inherit; From f15d94a7fcae728fb0eb4dc83b45d947f3714b08 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 30 Oct 2024 13:08:42 +0100 Subject: [PATCH 10/25] change: Added alpha-background for icon, updated fontweight --- .../core/css/darkside/accordion.darkside.css | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 706f110000..7b144060cf 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -1,11 +1,3 @@ -/* stylelint-disable csstools/value-no-unknown-custom-properties */ - -/* TODO: */ - -/* Validate that each 'size' variant is correct */ - -/* refactor code for 'line' above and below */ - /* ---------------------------- Accordion header ---------------------------- */ .navds-accordion__header { width: 100%; @@ -13,7 +5,7 @@ justify-content: flex-start; align-items: flex-start; gap: var(--ax-spacing-3); - padding: var(--ax-spacing-2) var(--ax-spacing-3); + padding: var(--ax-spacing-3); text-align: left; cursor: pointer; border: none; @@ -22,8 +14,12 @@ background: transparent; color: var(--ax-text-accent); + > * { + font-weight: var(--ax-font-weight-regular); + } + &:hover { - background-color: var(--ax-bg-accent-hover); + background-color: var(--ax-bg-accent-hoverA); color: var(--ax-text-accent-strong); &::before, @@ -93,7 +89,7 @@ width: 22px; height: 22px; align-self: center; - background-color: var(--ax-bg-accent-moderate); + background-color: var(--ax-bg-accent-moderateA); color: var(--ax-text-accent-strong); } From 4b7310e739eb1b6707e1a8ed3e060cb0fe2575c6 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 30 Oct 2024 13:54:25 +0100 Subject: [PATCH 11/25] change: Added forced-colors support --- @navikt/core/css/darkside/accordion.darkside.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 7b144060cf..37dbfbf3f7 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -18,6 +18,12 @@ font-weight: var(--ax-font-weight-regular); } + @media (forced-colors: active) { + border: 1px solid buttonborder; + background-color: canvas; + color: canvastext; + } + &:hover { background-color: var(--ax-bg-accent-hoverA); color: var(--ax-text-accent-strong); @@ -31,6 +37,12 @@ background-color: var(--ax-bg-accent-strong-hover); color: var(--ax-text-accent-contrast); } + + @media (forced-colors: active) { + background-color: canvas; + border: 1px solid highlight; + color: highlight; + } } &:focus-visible { @@ -132,6 +144,10 @@ height: calc(100% - var(--ax-spacing-7)); width: var(--__acx-accordion-content-line-width); background-color: var(--ax-border-subtleA); + + @media (forced-colors: active) { + background-color: canvastext; + } } .navds-accordion__item--open > .navds-accordion__content { From a70edfd92b2be7c86a4cf190d024b30bda2d4fd0 Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 1 Nov 2024 11:46:32 +0100 Subject: [PATCH 12/25] Removed use op --open class --- @navikt/core/css/darkside/accordion.darkside.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 37dbfbf3f7..95adfb1a24 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -112,7 +112,7 @@ transition: transform 250ms cubic-bezier(0.2, 0, 0, 1); } -.navds-accordion__item--open > .navds-accordion__header .navds-accordion__header-chevron { +.navds-accordion__item[data-expanded="true"] > .navds-accordion__header .navds-accordion__header-chevron { transform: rotateX(-180deg); } @@ -150,7 +150,7 @@ } } -.navds-accordion__item--open > .navds-accordion__content { +.navds-accordion__item[data-expanded="true"] > .navds-accordion__content { display: block; opacity: 1; overflow: visible; @@ -160,7 +160,7 @@ } @starting-style { - .navds-accordion__item--open:not(.navds-accordion__item--no-animation) > .navds-accordion__content { + .navds-accordion__item[data-expanded="true"]:not(.navds-accordion__item--no-animation) > .navds-accordion__content { padding-block: 0; max-height: 0; opacity: 0.01; From 5f90ca891898a8ff7681ef7db1ae405dfb75550f Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 1 Nov 2024 14:22:54 +0100 Subject: [PATCH 13/25] Removed old grid centering --- @navikt/core/css/darkside/accordion.darkside.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 95adfb1a24..1607277ac2 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -95,8 +95,6 @@ /* ------------------------- Accordion chevron icon ------------------------- */ .navds-accordion__icon-wrapper { - display: grid; - place-content: center; border-radius: var(--ax-border-radius-large); width: 22px; height: 22px; From 6271cb16c7a04f1c4dd53ddc538120d956c67a2b Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 1 Nov 2024 14:27:27 +0100 Subject: [PATCH 14/25] Top, bottom line is now alpha --- @navikt/core/css/darkside/accordion.darkside.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 1607277ac2..35263320eb 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -73,7 +73,7 @@ right: 0; width: 100%; height: 1px; - background-color: var(--ax-border-subtle); + background-color: var(--ax-border-subtleA); } .navds-accordion__header::after, From 474d76b87b12b86c722831a87e58dafb5d8c0cc5 Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 1 Nov 2024 14:41:47 +0100 Subject: [PATCH 15/25] Fixed animation --- .../core/css/darkside/accordion.darkside.css | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 35263320eb..e1842aa4cd 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -11,7 +11,7 @@ border: none; position: relative; border-radius: var(--ax-border-radius-large); - background: transparent; + background: white; color: var(--ax-text-accent); > * { @@ -120,12 +120,30 @@ position: relative; padding-inline: var(--ax-spacing-6) var(--ax-spacing-3); - opacity: 0.01; display: none; overflow: hidden; padding-block: 0; max-height: 0; transition: all 250ms cubic-bezier(0.2, 0, 0, 1) allow-discrete; + animation: navds-accordion-content-animation 250ms cubic-bezier(0.2, 0, 0, 1); +} + +.navds-accordion__item--no-animation { + animation: none; +} + +@keyframes navds-accordion-content-animation { + 0% { + opacity: 0.01; + } + + 20% { + opacity: 0.01; + } + + 100% { + opacity: 1; + } } .navds-accordion--indent > .navds-accordion__item > .navds-accordion__content { @@ -161,6 +179,5 @@ .navds-accordion__item[data-expanded="true"]:not(.navds-accordion__item--no-animation) > .navds-accordion__content { padding-block: 0; max-height: 0; - opacity: 0.01; } } From 1eb182182f321f7d69e5a806863d381e08421b81 Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 1 Nov 2024 15:56:47 +0100 Subject: [PATCH 16/25] bug: Revert to transparent bg --- @navikt/core/css/darkside/accordion.darkside.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index e1842aa4cd..ad8c143e1f 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -11,7 +11,7 @@ border: none; position: relative; border-radius: var(--ax-border-radius-large); - background: white; + background: transparent; color: var(--ax-text-accent); > * { From fc64936b87edf61806efe36a1576bfa70e9da99c Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 1 Nov 2024 15:59:32 +0100 Subject: [PATCH 17/25] deprecation: Added tags to accordion props that are to be removed --- @navikt/core/react/src/accordion/Accordion.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/@navikt/core/react/src/accordion/Accordion.tsx b/@navikt/core/react/src/accordion/Accordion.tsx index a6d4802b4b..5783887b92 100644 --- a/@navikt/core/react/src/accordion/Accordion.tsx +++ b/@navikt/core/react/src/accordion/Accordion.tsx @@ -31,10 +31,12 @@ interface AccordionComponent export interface AccordionProps extends React.HTMLAttributes { /** + * @deprecated Prop will be removed in future versions. "default" will be the only variant. * @default "default" */ variant?: "default" | "neutral"; /** + * @deprecated Prop will be removed and replaced by `size` in future versions. * @default "small" */ headingSize?: "large" | "medium" | "small" | "xsmall"; From d2488b93f3ae8f2bd4b5bc7a86929ba808a6fde7 Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 1 Nov 2024 16:34:36 +0100 Subject: [PATCH 18/25] removed deprecation for accordion headingSize prop --- @navikt/core/react/src/accordion/Accordion.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/@navikt/core/react/src/accordion/Accordion.tsx b/@navikt/core/react/src/accordion/Accordion.tsx index 5783887b92..024548df92 100644 --- a/@navikt/core/react/src/accordion/Accordion.tsx +++ b/@navikt/core/react/src/accordion/Accordion.tsx @@ -36,7 +36,6 @@ export interface AccordionProps extends React.HTMLAttributes { */ variant?: "default" | "neutral"; /** - * @deprecated Prop will be removed and replaced by `size` in future versions. * @default "small" */ headingSize?: "large" | "medium" | "small" | "xsmall"; From 74a9bff9c967df8fe800d9d19773900212392227 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 5 Nov 2024 13:15:00 +0100 Subject: [PATCH 19/25] Updated implementation of line in accordion --- .storybook/preview.jsx | 2 +- .../core/css/darkside/accordion.darkside.css | 26 +++++++++---------- .../react/src/accordion/AccordionContent.tsx | 9 ++++++- 3 files changed, 21 insertions(+), 16 deletions(-) diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx index 4e3f734fc6..878de70d71 100644 --- a/.storybook/preview.jsx +++ b/.storybook/preview.jsx @@ -2,7 +2,7 @@ import { withThemeByClassName } from "@storybook/addon-themes"; import React, { useLayoutEffect } from "react"; import darksideCss from "@navikt/ds-css/darkside/index.css?inline"; import defaultCss from "@navikt/ds-css/index.css?inline"; -import { UNSAFE_AkselTheme } from "@navikt/ds-react/Provider"; +import { UNSAFE_AkselTheme } from "../@navikt/core/react/src/provider"; import "./layout.css"; export const parameters = { diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index ad8c143e1f..696e399027 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -128,6 +128,8 @@ animation: navds-accordion-content-animation 250ms cubic-bezier(0.2, 0, 0, 1); } +/* navds-accordion__content-inner */ + .navds-accordion__item--no-animation { animation: none; } @@ -147,22 +149,18 @@ } .navds-accordion--indent > .navds-accordion__item > .navds-accordion__content { - /* Since we use psuedo-element for "border", we add the width to left-padding. This alignes with the header-text */ - padding-inline: calc(var(--ax-spacing-11) + var(--__acx-accordion-content-line-width)) var(--ax-spacing-8); + padding-inline: var(--ax-spacing-6) var(--ax-spacing-3); } -.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content::before { - content: ""; - display: block; - position: absolute; - top: var(--ax-spacing-2); - left: calc(var(--ax-spacing-6) - var(--__acx-accordion-content-line-width)); - height: calc(100% - var(--ax-spacing-7)); - width: var(--__acx-accordion-content-line-width); - background-color: var(--ax-border-subtleA); +.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner { + box-shadow: -2px 0 0 0 var(--ax-border-subtleA); + padding-block: var(--ax-spacing-2); + + /* Aligns content with heading-section */ + padding-inline: calc(var(--ax-spacing-5) + 2px) var(--ax-spacing-5); @media (forced-colors: active) { - background-color: canvastext; + border-left: 1px solid canvastext; } } @@ -171,8 +169,8 @@ opacity: 1; overflow: visible; max-height: fit-content; - padding-block: var(--ax-spacing-4); - padding-block-end: var(--ax-spacing-7); + padding-block: var(--ax-spacing-2); + padding-block-end: var(--ax-spacing-6); } @starting-style { diff --git a/@navikt/core/react/src/accordion/AccordionContent.tsx b/@navikt/core/react/src/accordion/AccordionContent.tsx index 168958b7e3..30b125f0bb 100644 --- a/@navikt/core/react/src/accordion/AccordionContent.tsx +++ b/@navikt/core/react/src/accordion/AccordionContent.tsx @@ -1,5 +1,6 @@ import cl from "clsx"; import React, { forwardRef, useContext } from "react"; +import { UNSAFE_useAkselTheme } from "../provider"; import { BodyLong } from "../typography"; import { AccordionItemContext } from "./AccordionItem"; @@ -15,6 +16,8 @@ const AccordionContent = forwardRef( ({ children, className, ...rest }, ref) => { const context = useContext(AccordionItemContext); + const themeContext = UNSAFE_useAkselTheme(false); + if (context === null) { console.error( " has to be used within an ", @@ -38,7 +41,11 @@ const AccordionContent = forwardRef( !context.open || undefined } /* Added to fix bug with Radio component, where label text inside a span sometimes is ignored by screen readers after hiding/displaying the RadioGroup inside an Accordion */ > - {children} + {themeContext ? ( +
{children}
+ ) : ( + children + )} ); }, From 6f8406f0247eb19e3f9deb986e9b68751215267c Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 5 Nov 2024 13:21:24 +0100 Subject: [PATCH 20/25] Remove position relative in accordion content --- @navikt/core/css/darkside/accordion.darkside.css | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 696e399027..8feebc94f5 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -63,8 +63,7 @@ } .navds-accordion__header::before, -.navds-accordion__header::after, -.navds-accordion__item:last-child > .navds-accordion__content::after { +.navds-accordion__header::after { content: ""; display: block; position: absolute; @@ -76,8 +75,11 @@ background-color: var(--ax-border-subtleA); } -.navds-accordion__header::after, -.navds-accordion__item:last-child > .navds-accordion__content::after { +.navds-accordion__item:last-child > .navds-accordion__content { + border-bottom: 1px solid transparent; +} + +.navds-accordion__header::after { top: initial; bottom: 0; } @@ -118,12 +120,12 @@ .navds-accordion__content { --__acx-accordion-content-line-width: 2px; - position: relative; padding-inline: var(--ax-spacing-6) var(--ax-spacing-3); display: none; overflow: hidden; padding-block: 0; max-height: 0; + border-color: transparent; transition: all 250ms cubic-bezier(0.2, 0, 0, 1) allow-discrete; animation: navds-accordion-content-animation 250ms cubic-bezier(0.2, 0, 0, 1); } @@ -171,11 +173,13 @@ max-height: fit-content; padding-block: var(--ax-spacing-2); padding-block-end: var(--ax-spacing-6); + border-color: var(--ax-border-subtleA); } @starting-style { .navds-accordion__item[data-expanded="true"]:not(.navds-accordion__item--no-animation) > .navds-accordion__content { padding-block: 0; max-height: 0; + border-color: transparent; } } From ae9bc0209f98770114277b4906efa0c5f4506a39 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 5 Nov 2024 13:57:43 +0100 Subject: [PATCH 21/25] Implemented size-update for accordion --- @navikt/core/css/darkside/accordion.darkside.css | 4 ++++ @navikt/core/react/src/accordion/AccordionHeader.tsx | 12 +++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/@navikt/core/css/darkside/accordion.darkside.css b/@navikt/core/css/darkside/accordion.darkside.css index 8feebc94f5..b9c233ca87 100644 --- a/@navikt/core/css/darkside/accordion.darkside.css +++ b/@navikt/core/css/darkside/accordion.darkside.css @@ -57,6 +57,10 @@ } } +.navds-accordion--small .navds-accordion__header { + padding-block: var(--a-spacing-2); +} + .navds-accordion__header-content { overflow: hidden; text-overflow: ellipsis; diff --git a/@navikt/core/react/src/accordion/AccordionHeader.tsx b/@navikt/core/react/src/accordion/AccordionHeader.tsx index f3e73e6d89..911e177c41 100644 --- a/@navikt/core/react/src/accordion/AccordionHeader.tsx +++ b/@navikt/core/react/src/accordion/AccordionHeader.tsx @@ -1,6 +1,7 @@ import cl from "clsx"; import React, { forwardRef, useContext } from "react"; import { ChevronDownIcon } from "@navikt/aksel-icons"; +import { UNSAFE_useAkselTheme } from "../provider"; import { Heading } from "../typography"; import { composeEventHandlers } from "../util/composeEventHandlers"; import { AccordionContext } from "./AccordionContext"; @@ -19,6 +20,8 @@ const AccordionHeader = forwardRef( const itemContext = useContext(AccordionItemContext); const accordionContext = useContext(AccordionContext); + const themeContext = UNSAFE_useAkselTheme(false); + if (itemContext === null) { console.error( " has to be used within an , which in turn must be within an ", @@ -26,6 +29,13 @@ const AccordionHeader = forwardRef( return null; } + let headingSize = accordionContext?.headingSize ?? "small"; + + if (themeContext) { + /* Fallback to "medium" if any other sizes are used */ + headingSize = accordionContext?.size === "small" ? "xsmall" : "small"; + } + return ( From 842a04294bd7a84ea20757ed1bc6a6a4a50514cd Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 6 Nov 2024 15:30:40 +0100 Subject: [PATCH 25/25] Re-added className in accordionHeader --- @navikt/core/react/src/accordion/AccordionHeader.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/@navikt/core/react/src/accordion/AccordionHeader.tsx b/@navikt/core/react/src/accordion/AccordionHeader.tsx index cdf5de9ac4..98e26ae47f 100644 --- a/@navikt/core/react/src/accordion/AccordionHeader.tsx +++ b/@navikt/core/react/src/accordion/AccordionHeader.tsx @@ -51,7 +51,11 @@ const AccordionHeader = forwardRef( aria-hidden /> - + {children}