Merge pull request #825 from statisticsnorway/MIMIR-1311_glossary_div…

…_in_button Mimir 1311 glossary div in button
statisticsnorway · Aug 3, 2023 · 9a23fdd · 9a23fdd
2 parents 28037e3 + 43335ad
commit 9a23fdd
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.0.87",
+  "version": "2.0.88",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {

diff --git a/src/components/Glossary/README.md b/src/components/Glossary/README.md
@@ -6,22 +6,25 @@ Glossary
 ### Usage
 
 #### HTML
-Toggle the class "open" using javascript
+Toggle the class "open" and aria-expanded "true" using javascript
 ```html
-<button class="ssb-glossary"><!-- click to toggle 'open' class -->
-  <div class="glossary-text-wrap">Explain this</div>
-  <i>{feather.openBook 12px}</i>
-  <div class="glossary-animate-background"></div>
-  <div class="ssb-glossary-popup {open or closed}">
+<div class="ssb-glossary">
+  <button class="glossary-button" aria-expanded="false"><!-- click to toggle 'open' class -->
+    <span class="glossary-text-wrap">Explain this</span>
+    <i className="glossary-logo" aria-hidden="true">{feather.openBook 12px}</i>
+  </button>
+  <div class="glossary-popup {open or closed}">
     <div class="content-box">
       <span class="info-text">{insert explanation}</span>
-      <div class="ssb-glossary-closing">
-        <i class="icon">{feather.xCircle 14px}</i>
-        <span>Lukk</span>
+      <div class="glossary-closing">
+        <div role="button" tabindex="0">
+          <i class="icon" aria-hidden="true">{feather.xCircle 14px}</i>
+          <span>Lukk</span>
+        </div>
       </div>
     </div>
   </div>
-</button>
+</div>
 ```
 
 #### React

diff --git a/src/components/Glossary/__snapshots__/glossary.test.jsx.snap b/src/components/Glossary/__snapshots__/glossary.test.jsx.snap
@@ -1,22 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Glossary Matches the snapshot 1`] = `
-<button
-  aria-expanded="false"
-  aria-label="Glossary"
+<div
   className="ssb-glossary"
-  onClick={[Function]}
 >
-  <div
-    className="glossary-text-wrap"
+  <button
+    aria-expanded="false"
+    aria-label="Glossary"
+    className="glossary-button"
+    onClick={[Function]}
   >
-    Glossary
-  </div>
-  <BookOpen
-    aria-hidden="true"
-    className="glossary-logo"
-    size={12}
-  />
+    <span
+      className="glossary-text-wrap"
+    >
+      Glossary
+    </span>
+    <BookOpen
+      aria-hidden="true"
+      className="glossary-logo"
+      size={12}
+    />
+  </button>
   <div
     className="glossary-popup"
   >
@@ -29,7 +33,7 @@ exports[`Glossary Matches the snapshot 1`] = `
         placeholderText
       </span>
       <div
-        className="ssb-glossary-closing"
+        className="glossary-closing"
       >
         <div
           onClick={[Function]}
@@ -49,5 +53,5 @@ exports[`Glossary Matches the snapshot 1`] = `
       </div>
     </div>
   </div>
-</button>
+</div>
 `;
diff --git a/src/components/Glossary/_glossary.scss b/src/components/Glossary/_glossary.scss
@@ -1,36 +1,39 @@
 .ssb-glossary {
-  @include focus-marker;
-  @include reset-button;
-  background-image: linear-gradient(to right, $ssb-green-2 50%, $ssb-white 50%);
-  background-position: right bottom;
-  background-repeat: no-repeat;
-  background-size: 200% 100%;
   display: inline-block;
   position: relative;
-  transition: all .5s ease-out;
 
-  .glossary-text-wrap {
-    border-bottom: 1px dotted $ssb-green-4;
-    display: inline;
-    line-height: inherit;
-  }
-
-  .glossary-logo {
-    color: $ssb-green-3;
-    margin: 2px;
-    transition: color .2s;
-    vertical-align: top;
-  }
+  .glossary-button {
+    @include focus-marker;
+    @include reset-button;
+    background-image: linear-gradient(to right, $ssb-green-2 50%, $ssb-white 50%);
+    background-position: right bottom;
+    background-repeat: no-repeat;
+    background-size: 200% 100%;
+    transition: all .5s ease-out;
 
-  &:hover, &:focus {
-    background-position: left bottom;
+    .glossary-text-wrap {
+      border-bottom: 1px dotted $ssb-green-4;
+      display: inline;
+      line-height: inherit;
+    }
 
     .glossary-logo {
-      color: $ssb-dark-6;
+      color: $ssb-green-3;
+      margin: 2px;
+      transition: color .2s;
+      vertical-align: top;
     }
 
-    .glossary-text-wrap {
-      border-bottom: none;
+    &:hover, &:focus {
+      background-position: left bottom;
+
+      .glossary-logo {
+        color: $ssb-dark-6;
+      }
+
+      .glossary-text-wrap {
+        border-bottom: none;
+      }
     }
   }
 
@@ -69,7 +72,7 @@
       color: $ssb-white;
       padding: 20px;
 
-      .ssb-glossary-closing {
+      .glossary-closing {
         align-items: center;
         display: flex;
         justify-content: center;

diff --git a/src/components/Glossary/index.jsx b/src/components/Glossary/index.jsx
@@ -49,23 +49,25 @@ const Glossary = ({ explanation, children, className, closeText }) => {
 	}, [open]);
 
 	return (
-		<button
-			ref={node}
-			onClick={() => setOpen(!open)}
-			className={`ssb-glossary${className ? ` ${className}` : ''}`}
-			aria-label={children}
-			aria-expanded={open ? 'true' : 'false'}
-		>
-			<div className="glossary-text-wrap">{children}</div>
-			<BookOpen size={12} className="glossary-logo" aria-hidden="true" />
+		<div className={`ssb-glossary${className ? ` ${className}` : ''}`}>
+			<button
+				ref={node}
+				onClick={() => setOpen(!open)}
+				className="glossary-button"
+				aria-label={children}
+				aria-expanded={open ? 'true' : 'false'}
+			>
+				<span className="glossary-text-wrap">{children}</span>
+				<BookOpen size={12} className="glossary-logo" aria-hidden="true" />
+			</button>
 			<div className={`glossary-popup${open ? ' open' : ''}`}>
 				<div className="content-box">
 					<span
 						className="info-text"
 					>
 						{explanation}
 					</span>
-					<div className="ssb-glossary-closing">
+					<div className="glossary-closing">
 						<div
 							role="button"
 							tabIndex={0}
@@ -80,7 +82,7 @@ const Glossary = ({ explanation, children, className, closeText }) => {
 					</div>
 				</div>
 			</div>
-		</button>
+		</div>
 	);
 };
 

diff --git a/src/components/KeyFigures/README.md b/src/components/KeyFigures/README.md
@@ -35,20 +35,23 @@ KeyFigures
 <div class="ssb-key-figures small">
   <div class="kf-icon small"><!-- Insert icon --></div>
   <div>   
-    <button class="ssb-glossary"><!-- click to toggle 'open' class -->
-      <div class="glossary-text-wrap">Explain this</div>
-      <i>{feather.openBook 12px}</i>
-      <div class="glossary-animate-background"></div>
-      <div class="ssb-glossary-popup {open or closed}">
+    <div class="ssb-glossary">
+      <button class="glossary-button" aria-expanded="false"><!-- click to toggle 'open' class -->
+        <span class="glossary-text-wrap">Explain this</span>
+        <i className="glossary-logo" aria-hidden="true">{feather.openBook 12px}</i>
+      </button>
+      <div class="glossary-popup {open or closed}">
         <div class="content-box">
-        <span class="info-text">{insert explanation}</span>
-        <div class="ssb-glossary-closing">
-          <i class="icon">{feather.xCircle 14px}</i>
-          <span>Lukk</span>
-        </div>
+          <span class="info-text">{insert explanation}</span>
+          <div class="glossary-closing">
+            <div role="button" tabindex="0">
+              <i class="icon" aria-hidden="true">{feather.xCircle 14px}</i>
+              <span>Lukk</span>
+            </div>
+          </div>
         </div>
       </div>
-    </button>
+    </div>
     <div class="kf-time">2019</div>
     <div class="number-section">
       <div class="ssb-number large">12 345</div>