Mim 1962 adjustment expansion box (#1243)

* MIM-1962:Removed prop icon and added prop sparklesIcon * MIM-1962:Adjusting hovereffect and change propname * Fixed problem with scrollbar mobile * Fixes clickspace when sneakpeek and closed * MIM-1962:Bump version
statisticsnorway · Aug 20, 2024 · f5e4d59 · f5e4d59
1 parent d446ab0
commit f5e4d59
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 69 deletions.
diff --git a/lib/bundle.css b/lib/bundle.css
@@ -963,6 +963,9 @@ a {
   display: grid;
   width: 100%;
 }
+.ssb-expansion-box:has(.header:hover) {
+  box-shadow: 0 0 0 1px #00824d;
+}
 .ssb-expansion-box .header {
   background-color: transparent;
   border: none;
@@ -978,6 +981,13 @@ a {
   cursor: pointer;
   display: flex;
 }
+.ssb-expansion-box .header:hover .icon-wrapper::before {
+  height: 3rem;
+  width: 3rem;
+}
+.ssb-expansion-box .header:hover .icon-wrapper .expand-icon {
+  color: #fff;
+}
 .ssb-expansion-box .header .header-text {
   font-family: "Roboto", sans-serif !important;
   font-stretch: normal;
@@ -1017,6 +1027,8 @@ a {
   align-items: center;
   display: inline-flex;
   margin-right: 1rem;
+}
+.ssb-expansion-box .header .icon svg {
   height: 2rem;
   width: 2rem;
 }
@@ -1063,21 +1075,20 @@ a {
     padding: 0 1.25rem 1.25rem;
   }
 }
-.ssb-expansion-box:hover {
-  box-shadow: 0 0 0 1px #00824d;
-}
-.ssb-expansion-box:hover .header .icon-wrapper::before {
-  height: 3rem;
-  width: 3rem;
-}
-.ssb-expansion-box:hover .header .icon-wrapper .expand-icon {
-  color: #fff;
-}
 .ssb-expansion-box:focus-within {
   outline: #9272fc solid 2px;
   outline-offset: 2px;
   border-radius: 8px;
 }
+.ssb-expansion-box.sneak-peek:not(.ssb-expansion-box.sneak-peek.open) {
+  position: relative;
+}
+.ssb-expansion-box.sneak-peek:not(.ssb-expansion-box.sneak-peek.open) .header::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
 .ssb-expansion-box.sneak-peek .header {
   padding-bottom: 0.5rem;
   transition: padding-bottom 0.5s;
@@ -2228,11 +2239,15 @@ a {
   border-bottom: transparent;
 }
 @media screen and (min-width: 992px) {
-  .ssb-table-wrapper .ssb-table .caption-text-wrapper,
   .ssb-table-wrapper .ssb-table tfoot td > * {
     max-width: 780px;
   }
 }
+@media screen and (min-width: 992px) {
+  .ssb-table-wrapper .ssb-table .caption-text-wrapper {
+    max-width: 998px;
+  }
+}
 .ssb-table-wrapper .ssb-table th,
 .ssb-table-wrapper .ssb-table td {
   text-align: left;
@@ -2282,7 +2297,8 @@ a {
   font-weight: bold;
   text-align: left;
   width: 998px;
-  padding-top: 10px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 .ssb-table-wrapper .ssb-table caption .caption-wrapper .scroll-icon-wrapper {
   display: flex;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {

diff --git a/src/@types/assets/index.d.ts b/src/@types/assets/index.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import React = require('react')
+
+  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
+  export default ReactComponent
+}
diff --git a/src/components/ExpansionBox/ExpansionBox.tsx b/src/components/ExpansionBox/ExpansionBox.tsx
@@ -1,18 +1,19 @@
 import React, { useEffect, useRef, useState, ReactNode } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'
+import SparklesIcon from '../../media/icons/sparkles.svg'
 
 export interface ExpansionBoxProps {
+  aiIcon?: boolean
   className?: string
   header: string
-  icon?: ReactNode
   openByDefault?: boolean
   sneakPeek?: boolean
   text: string | ReactNode
 }
 const ExpansionBox: React.FC<ExpansionBoxProps> = ({
+  aiIcon = false,
   className = '',
   header = '',
-  icon,
   openByDefault = false,
   sneakPeek,
   text = '',
@@ -24,7 +25,7 @@ const ExpansionBox: React.FC<ExpansionBoxProps> = ({
   useEffect(() => {
     if (contentRef.current) {
       const contentHeight = contentRef.current.scrollHeight
-      const maxHeightValue = contentHeight <= 1000 ? contentHeight : 1000
+      const maxHeightValue = contentHeight <= 1000 ? contentHeight + 10 : 1000
       setMaxHeight(isOpen ? `${maxHeightValue}px` : '')
     }
   }, [isOpen])
@@ -34,7 +35,11 @@ const ExpansionBox: React.FC<ExpansionBoxProps> = ({
       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>}
+        {aiIcon && (
+          <div className='icon'>
+            <SparklesIcon />
+          </div>
+        )}
         <span className='header-text'>{header}</span>
         <div className='icon-wrapper'>
           {!isOpen && <ChevronDown className='expand-icon' size={24} />}

diff --git a/src/components/ExpansionBox/README.md b/src/components/ExpansionBox/README.md
@@ -18,11 +18,11 @@
 </div>
 ```
 
-```html SneakPeek and icon
+```html SneakPeek and aiIcon
 <div class="ssb-expansion-box sneak-peek">
    <button class="header" aria-expanded="false">
       <div class="icon">
-        <i>{feather.sun 32px}</i>
+        <i>{SparklesIcon 32px}</i>
       </div>
       <span class="header-text">ExpansionBox with icon and sneakpeek content</span>
       <div class="icon-wrapper">
@@ -42,18 +42,18 @@
 
 <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 />
+<ExpansionBox header='ExpansionBox with AI icon and sneakpeek text' text='This is paragraph text which explains the expansionBox' aiIcon 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                   |
+| Name          | Type              | Description                                                    |
+| ------------- | ----------------- | -------------------------------------------------------------  |
+| aiIcon        | bool              | Show a AI icon to the left of header                           |
+| className     | string            | Optional container class                                       |
+| header        | string            | Header text                                                    |
+| sneakPeek     | bool              | Show a sneakpeek of the text                                   |
+| openByDefault | bool              | Open when rendered. Defaults to false                          |
+| text          | string or element | Content in expansionBox                                        |
 
 
diff --git a/src/components/ExpansionBox/_expansion-box.scss b/src/components/ExpansionBox/_expansion-box.scss
@@ -4,13 +4,30 @@
   display: grid;
   width: 100%;
 
+  &:has(.header:hover) {
+    box-shadow: 0 0 0 1px $ssb-green-4;
+  }
+
   .header {
     @include reset-button;
     padding: 1.7rem 2.5rem;
     align-items: center;
     cursor: pointer;
     display: flex;
 
+    &:hover {
+      .icon-wrapper {
+        &::before {
+          height: 3rem;
+          width: 3rem;
+        }
+
+        .expand-icon {
+          color: $ssb-white;
+        }
+      }
+    }
+
     .header-text {
       @include roboto;
       color: $ssb-dark-6;
@@ -52,8 +69,11 @@
       align-items: center;
       display: inline-flex;
       margin-right: 1rem;
-      height: 2rem;
-      width: 2rem;
+
+      svg {
+        height: 2rem;
+        width: 2rem;
+      }
     }
 
     &:focus-visible {
@@ -105,27 +125,23 @@
     }
   }
 
-  &:hover {
-    box-shadow: 0 0 0 1px $ssb-green-4;
-
-    .header .icon-wrapper {
-      &::before {
-        height: 3rem;
-        width: 3rem;
-      }
-
-      .expand-icon {
-        color: $ssb-white;
-      }
-    }
-  }
-
   &:focus-within {
     @include focus-ring;
     border-radius: 8px;
   }
 
   &.sneak-peek {
+    &:not(&.open) {
+      position: relative;
+
+      .header::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+      }
+    }
+
     .header {
       padding-bottom: 0.5rem;
       transition: padding-bottom 0.5s;

diff --git a/src/components/ExpansionBox/expansionBox.story.jsx b/src/components/ExpansionBox/expansionBox.story.jsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Sun } from 'react-feather'
 import ExpansionBox from './ExpansionBox'
 
 const mockedHeader = 'This is a expansion box header'
@@ -53,28 +52,13 @@ export const DefaultOpen = () => (
 )
 
 export const SneakPeek = () => (
-  <div style={{ width: '1800px', display: 'flex', justifyContent: 'center' }}>
-    <div style={{ width: '740px', marginRight: '10px' }}>
-      <ExpansionBox
-        header='ExpansionBox with icon and sneakpeek text'
-        text={mockedText}
-        icon={<Sun size={32} />}
-        sneakPeek
-      />
-    </div>
-    <div style={{ width: '740px' }}>
-      <ExpansionBox
-        header='ExpansionBox with icon and sneakpeek content'
-        text={mockedContent}
-        icon={<Sun size={32} />}
-        sneakPeek
-      />
-    </div>
+  <div style={{ width: '740px', marginRight: '10px' }}>
+    <ExpansionBox header='ExpansionBox with sneakpeek text' text={mockedText} sneakPeek />
   </div>
 )
 
-export const Icon = () => (
-  <div style={{ width: '450px' }}>
-    <ExpansionBox header={mockedHeader} text={mockedContent} icon={<Sun size={32} />} />
+export const SneakpeekWithAiIcon = () => (
+  <div style={{ width: '740px' }}>
+    <ExpansionBox header='ExpansionBox with sneakpeek text and AI icon' text={mockedContent} aiIcon sneakPeek />
   </div>
 )
diff --git a/src/media/icons/sparkles.svg b/src/media/icons/sparkles.svg
diff --git a/tsconfig.json b/tsconfig.json
@@ -10,6 +10,7 @@
     "strictNullChecks": true,
     "noImplicitThis": true,
     "noImplicitReturns": true,
-    "skipLibCheck": false
+    "skipLibCheck": false,
+    "typeRoots": ["./src/@types", "./node_modules/@types"],
   }
 }