Mim 1962 expansion box (#1175)

* MIM-1962:Startet on Expansion Box

* MIM-1962: Lagt til effekt ved åpne og lukk

* MIM-1962: Starten på SneakPeek og Icon

* Litt mer fiksing på sneakPeek

* Ryddet i css

* Added test and readme

* MIM-1962: refaktorering av koden

* MIM-1962:Lagt til mobil styling

* Fixed sass warning nested rules

* Lagt til ExpansionBox til index.js

* Added information about deprecated component FaxtBox

* converted from jsx to tsx

* MIM-1962:Refactoring after QA Teknisk

* More refactoring css

* Added setMaxHeigh to improve open and close content

* Updated bundle.css and bumped version to 2.2.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {
@@ -65,6 +65,8 @@
     "@testing-library/react": "~16.0.0",
     "@testing-library/user-event": "~14.5.2",
     "@types/jest": "~29.5.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "babel-jest": "~29.7.0",
     "babel-loader": "~9.1.3",
     "babel-plugin-module-resolver": "~5.0.2",
@@ -128,4 +130,4 @@
       "name": "Carina G. Nordseth"
     }
   ]
-}
+}

src/components/Accordion/_accordion.scss

@@ -3,7 +3,6 @@
   width: 100%;
 
   .accordion-header {
-    @include focus-marker;
     @include reset-button;
     @include roboto;
     font-size: 20px;
@@ -38,6 +37,10 @@
         color: $ssb-green-4;
       }
     }
+
+    &:focus {
+      @include focus-ring;
+    }
   }
 
   &:not(.without-borders) {

src/components/Button/_button.scss

@@ -1,5 +1,4 @@
 .ssb-btn {
-  @include focus-marker;
   @include roboto;
   @include reset-button;
   align-items: center;
@@ -28,6 +27,7 @@
 
   &:hover,
   &:focus {
+    @include focus-ring;
     background: $ssb-green-4;
     color: $ssb-white;
     text-decoration: underline;

src/components/ButtonTertiary/_buttonTertiary.scss

@@ -1,6 +1,5 @@
 .ssb-btn-tertiary {
   .button-header {
-    @include focus-marker;
     @include reset-button;
     @include roboto;
     font-family: 'Open Sans', sans-serif;
@@ -29,6 +28,8 @@
 
     &:hover,
     &:focus {
+      @include focus-ring;
+
       .header-text {
         color: $ssb-green-4;
         text-decoration: underline;

src/components/Card/_card.scss

@@ -3,7 +3,6 @@
   width: 100%;
 
   .clickable {
-    @include focus-within-marker;
     @include reset-button;
     width: 100%;
     position: relative;
@@ -124,6 +123,10 @@
         }
       }
     }
+
+    &:focus-within {
+      @include focus-ring;
+    }
   }
 
   .card-content {

src/components/ExpansionBox/ExpansionBox.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useRef, useState, ReactNode } from 'react'
+import { ChevronDown, ChevronUp } from 'react-feather'
+
+export interface ExpansionBoxProps {
+  className?: string
+  header: string
+  icon?: ReactNode
+  openByDefault?: boolean
+  sneakPeek?: boolean
+  text: string | ReactNode
+}
+const ExpansionBox: React.FC<ExpansionBoxProps> = ({
+  className = '',
+  header = '',
+  icon,
+  openByDefault = false,
+  sneakPeek,
+  text = '',
+}) => {
+  const [isOpen, toggleOpen] = useState(openByDefault)
+  const [maxHeight, setMaxHeight] = useState('')
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (contentRef.current) {
+      const contentHeight = contentRef.current.scrollHeight
+      const maxHeightValue = contentHeight <= 1000 ? contentHeight : 1000
+      setMaxHeight(isOpen ? `${maxHeightValue}px` : '')
+    }
+  }, [isOpen])
+
+  return (
+    <div
+      className={`ssb-expansion-box${className ? ` ${className}` : ''}${isOpen ? ' open' : ''}${sneakPeek ? ` sneak-peek` : ''}`}
+    >
+      <button className='header' aria-expanded={isOpen ? 'true' : 'false'} onClick={() => toggleOpen(!isOpen)}>
+        {icon && <div className='icon'>{icon}</div>}
+        <span className='header-text'>{header}</span>
+        <div className='icon-wrapper'>
+          {!isOpen && <ChevronDown className='expand-icon' size={24} />}
+          {isOpen && <ChevronUp className='expand-icon' size={24} />}
+        </div>
+      </button>
+      <div className={`content ${!isOpen ? 'closed' : ''}`} ref={contentRef} style={{ maxHeight }}>
+        {text}
+      </div>
+    </div>
+  )
+}
+
+export default ExpansionBox

src/components/ExpansionBox/README.md

@@ -0,0 +1,59 @@
+# ExpansionBox
+
+> Wrapper for expansionBox
+
+### Usage
+
+#### HTML
+
+```html Default
+<div class='ssb-expansion-box'>
+  <button aria-expanded='false' class='header'>
+    <span class='header-text'>This is a ExpansionBox title</span>
+    <div class='icon-wrapper'>
+      <i class="expand-icon">{feather.chevronDown 20px}</i>
+    </div>
+  </button>
+  <div class='content closed'>This is paragraph text</div>
+</div>
+```
+
+```html SneakPeek and icon
+<div class="ssb-expansion-box sneak-peek">
+   <button class="header" aria-expanded="false">
+      <div class="icon">
+        <i>{feather.sun 32px}</i>
+      </div>
+      <span class="header-text">ExpansionBox with icon and sneakpeek content</span>
+      <div class="icon-wrapper">
+         <i class="expand-icon">{feather.chevronDown 20px}</i>
+      </div>
+   </button>
+   <div class="content closed">
+      {content}
+   </div>
+</div>
+```
+
+#### React
+
+```jsx harmony
+<ExpansionBox header='Default expansionBox' text='This is paragraph text which explains the expansionBox' />
+
+<ExpansionBox header='ExpansionBox open by default' text='This is paragraph text which explains the expansionBox' openByDefault />
+
+<ExpansionBox header='ExpansionBox with icon and sneakpeek text' text='This is paragraph text which explains the expansionBox' icon={<Sun size={32} />} sneakPeek />
+```
+
+Available props:
+
+| Name          | Type              | Description                           |
+| ------------- | ----------------- | ------------------------------------- |
+| className     | string            | Optional container class              |
+| header        | string            | Header text                           |
+| icon          | node              | Renders an icon to the left of header |
+| sneakPeek     | bool              | Show a sneakpeek of the text          |
+| openByDefault | bool              | Open when rendered. Defaults to false |
+| text          | string or element | Content in expansionBox                   |
+
+

src/components/ExpansionBox/__snapshots__/expansionBox.test.jsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExpansionBox component Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="ssb-expansion-box"
+  >
+    <button
+      aria-expanded="false"
+      class="header"
+    >
+      <span
+        class="header-text"
+      >
+        This is a ExpansionBox title
+      </span>
+      <div
+        class="icon-wrapper"
+      >
+        <svg
+          class="expand-icon"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polyline
+            points="6 9 12 15 18 9"
+          />
+        </svg>
+      </div>
+    </button>
+    <div
+      class="content closed"
+    >
+      This is paragraph text
+    </div>
+  </div>
+</DocumentFragment>
+`;