feat(Accordion): new filled variant + style refactoring (#2896)

- Accordion default style has been updated with new design
- Added a new variant `filled`
- Css specificity is now as low as possible, only `:hover`, `:active`,
`:focus-visible` and `[disabled]` still has any specificity
- Theme specific css variables are prefixed with `--ui-` or `--sb-`

packages/dnb-design-system-portal/src/docs/uilib/components/accordion/Examples.tsx

@@ -192,3 +192,36 @@ export const AccordionDisabledExample = () => (
     </Accordion.Provider>
   </ComponentBox>
 )
+
+export const AccordionDescriptionExample = () => (
+  <ComponentBox data-visual-test="accordion-description">
+    <Accordion
+      expanded
+      title="Accordion title"
+      description="Accordion description"
+    >
+      <P>Accordion content</P>
+    </Accordion>
+    <Accordion
+      top
+      icon="chevron_down"
+      icon_position="right"
+      id="description-provider-accordion"
+      title="Accordion title"
+      description="Accordion description"
+    >
+      <P>Accordion content</P>
+    </Accordion>
+  </ComponentBox>
+)
+
+export const AccordionFilledExample = () => (
+  <ComponentBox data-visual-test="accordion-filled">
+    <Accordion expanded title="Accordion title" variant="filled">
+      <P>Accordion content</P>
+    </Accordion>
+    <Accordion top title="Accordion title" variant="filled">
+      <P>Accordion content</P>
+    </Accordion>
+  </ComponentBox>
+)

packages/dnb-design-system-portal/src/docs/uilib/components/accordion/demos.mdx

@@ -11,6 +11,8 @@ import {
   AccordionNestedExample,
   AccordionPlainVariant,
   AccordionDisabledExample,
+  AccordionDescriptionExample,
+  AccordionFilledExample,
 } from 'Docs/uilib/components/accordion/Examples'
 
 ## Demos
@@ -25,7 +27,7 @@ import {
 
 ### Grouped Accordion
 
-**NB:** Please have a read on the [unexpected behavior](/uilib/components/accordion/info#unexpected-behavior) thoughts.
+**NB:** Please have a read on the [unexpected behavior](/uilib/components/accordion#unexpected-behavior) thoughts.
 
 <AccordionGroupExample />
 
@@ -46,3 +48,15 @@ import {
 Accordion can be disabled, though is not exactly defined what the use case is.
 
 <AccordionDisabledExample />
+
+### Variant `filled`
+
+<VisibilityByTheme visible="sbanken">
+  This variant does not have any different styling in the Sbanken theme.
+</VisibilityByTheme>
+
+<AccordionFilledExample />
+
+<VisibleWhenVisualTest>
+  <AccordionDescriptionExample />
+</VisibleWhenVisualTest>

packages/dnb-design-system-portal/src/docs/uilib/components/accordion/properties.mdx

@@ -15,7 +15,7 @@ These properties can send along with the `Accordion.Provider` or `Accordion.Grou
 | `remember_state`                        | _(optional)_ if set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.                                                                               |
 | `flush_remembered_state`                | _(optional)_ if set to `true`, the saved (remembered) will be removed and the initial component state will be used and set.                                                                                                                  |
 | `no_animation`                          | _(optional)_ if set to `true`, the open and close animation will be omitted.                                                                                                                                                                 |
-| `variant`                               | _(optional)_ defines the used styling. As of now, only `outlined` is available. Use `plain` for no styles. It defaults to `outlined`.                                                                                                        |
+| `variant`                               | _(optional)_ defines the used styling. `outlined`, `filled`, or `plain`(no styling). Defaults to `outlined`.                                                                                                                                 |
 | `icon`                                  | _(optional)_ will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`.                         |
 | `icon_position`                         | _(optional)_ will set the placement of the icon. Defaults to `left`.                                                                                                                                                                         |
 | `icon_size`                             | _(optional)_ define a different icon size. Defaults to `medium` (1.5rem).                                                                                                                                                                    |

packages/dnb-eufemia/src/components/accordion/AccordionHeader.tsx

@@ -22,7 +22,11 @@ import {
 import type { HeadingLevel } from '../Heading'
 import type { IconSize } from '../Icon'
 import type { SkeletonShow } from '../Skeleton'
-import type { AccordionIcon, AccordionIconPosition } from './Accordion'
+import type {
+  AccordionIcon,
+  AccordionIconPosition,
+  AccordionVariant,
+} from './Accordion'
 
 export type AccordionHeaderTitleProps = SpacingProps & {
   children?: React.ReactNode
@@ -176,6 +180,7 @@ export type AccordionHeaderProps = React.HTMLProps<HTMLElement> &
     no_animation?: boolean
     className?: string
     children?: string | React.ReactNode | ((...args: any[]) => any)
+    variant?: AccordionVariant
   }
 
 const accordionHeaderDefaultProps = {
@@ -251,6 +256,7 @@ export const AccordionHeader = ({
     disabled,
     skeleton,
     no_animation,
+    variant,
   } = extendedProps
 
   let { icon_position } = extendedProps
@@ -365,8 +371,13 @@ export const AccordionHeader = ({
     tabIndex: 0,
     className: classnames(
       'dnb-accordion__header',
+      variant && `dnb-accordion__header--${variant}`,
+      context.expanded && 'dnb-accordion__header--expanded',
       icon_position && `dnb-accordion__header--icon-${icon_position}`,
-      isHovering && hasClicked && 'dnb-accordion--hover',
+      isHovering &&
+        hasClicked &&
+        context.expanded &&
+        'dnb-accordion__header--after-click',
       !canClick() && 'dnb-accordion__header--prevent-click',
       description && 'dnb-accordion__header--description',
       no_animation && 'dnb-accordion__header--no-animation',

packages/dnb-eufemia/src/components/accordion/__tests__/Accordion.screenshot.test.ts

@@ -8,6 +8,91 @@ import {
   setupPageScreenshot,
 } from '../../../core/jest/jestSetupScreenshots'
 
+const testAllStates = (description, testName) => {
+  describe(description, () => {
+    const style = { width: '20rem', height: '15rem' }
+    const selector = '[data-visual-test="' + testName + '"]'
+
+    it('expanded and closed', async () => {
+      const screenshot = await makeScreenshot({
+        style,
+        selector,
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
+    describe('expanded', () => {
+      const simulateSelector =
+        selector + ' .dnb-accordion:nth-of-type(1) .dnb-accordion__header'
+
+      it('hover', async () => {
+        const screenshot = await makeScreenshot({
+          style,
+          selector,
+          simulateSelector,
+          simulate: 'hover',
+        })
+        expect(screenshot).toMatchImageSnapshot()
+      })
+
+      it('active', async () => {
+        const screenshot = await makeScreenshot({
+          style,
+          selector,
+          simulateSelector,
+          simulate: 'active',
+        })
+        expect(screenshot).toMatchImageSnapshot()
+      })
+
+      it('focus', async () => {
+        const screenshot = await makeScreenshot({
+          style,
+          selector,
+          simulateSelector,
+          simulate: 'focus',
+        })
+        expect(screenshot).toMatchImageSnapshot()
+      })
+    })
+
+    describe('closed', () => {
+      const simulateSelector =
+        selector + ' .dnb-accordion:nth-of-type(2) .dnb-accordion__header'
+
+      it('hover', async () => {
+        const screenshot = await makeScreenshot({
+          style,
+          selector,
+          simulateSelector,
+          simulate: 'hover',
+        })
+        expect(screenshot).toMatchImageSnapshot()
+      })
+
+      it('active', async () => {
+        const screenshot = await makeScreenshot({
+          style,
+          selector,
+          simulateSelector,
+          simulate: 'active',
+        })
+        expect(screenshot).toMatchImageSnapshot()
+      })
+
+      it('focus', async () => {
+        const screenshot = await makeScreenshot({
+          style,
+          selector,
+          simulateSelector,
+          simulate: 'focus',
+        })
+        expect(screenshot).toMatchImageSnapshot()
+      })
+    })
+  })
+}
+
 describe.each(['ui', 'sbanken'])('Accordion for %s', (themeName) => {
   setupPageScreenshot({
     themeName,
@@ -127,4 +212,7 @@ describe.each(['ui', 'sbanken'])('Accordion for %s', (themeName) => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  testAllStates('with description', 'accordion-description')
+  testAllStates('variant filled', 'accordion-filled')
 })