Rename WordExplanation to Glossary and update all relevant documentat…

…ion and breaking changes

src/components/WordExplanation/README.md → src/components/Glossary/README.md

@@ -1,4 +1,4 @@
-WordExplanation
+Glossary
 ========
 
 > Pop-up box for explaining a word
@@ -8,26 +8,26 @@ WordExplanation
 #### HTML
 Toggle the class "open" using javascript
 ```html
-<div class="ssb-word-explanation">
-  <div class="we-text-wrap">Explain this</div>
-  <!-- Insert dedicated custom icon -->
-  <div class="we-animate-background"></div>
-  <div class="ssb-we-popup {open or closed}">
+<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="content-box">
       <span class="info-text">{insert explanation}</span>
-      <div class="ssb-we-closing">
+      <div class="ssb-glossary-closing">
         <i class="icon">{feather.xCircle 14px}</i>
         <span>Lukk</span>
       </div>
     </div>
   </div>
-</div>
+</button>
 ```
 
 #### React
 
 ```jsx harmony
-<WordExplanation explanation={placeholderText}>Explain this</WordExplanation>
+<Glossary explanation={placeholderText}>Explain this</Glossary>
 ```
 
 Available props:

src/components/WordExplanation/_word-explanation.scss → src/components/Glossary/_glossary.scss

@@ -1,22 +1,24 @@
-.ssb-word-explanation {
+.ssb-glossary {
   @include focus-marker;
   @include reset-button;
   cursor: pointer;
   display: inline-block;
   position: relative;
 
-  .we-text-wrap {
+  .glossary-text-wrap {
     border-bottom: 1px dotted $ssb-green-4;
     display: inline-block;
     line-height: inherit;
   }
 
-  .we-logo {
+  .glossary-logo {
+    color: $ssb-green-3;
     margin: 2px;
+    transition: color .2s;
     vertical-align: top;
   }
 
-  .we-animate-background {
+  .glossary-animate-background {
     background: $ssb-green-2;
     bottom: 0;
     height: 0;
@@ -29,12 +31,16 @@
 
   &:hover, &:focus {
 
-    .we-animate-background {
+    .glossary-animate-background {
       height: 100%;
     }
+
+    .glossary-logo {
+      color: $ssb-dark-6;
+    }
   }
 
-  .we-popup {
+  .glossary-popup {
     @include open-sans;
     animation: fadein .2s;
     display: none;
@@ -68,7 +74,7 @@
       color: $ssb-white;
       padding: 20px;
 
-      .ssb-we-closing {
+      .ssb-glossary-closing {
         align-items: center;
         display: flex;
         justify-content: center;

src/components/WordExplanation/wordExplanation.story.jsx → src/components/Glossary/glossary.story.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import centered from '@storybook/addon-centered/react';
-import WordExplanation from './index';
+import Glossary from './index';
 import Text from '../Text';
 
 const placeholderText = `This is the explanation of the word
 written in one or more paragraphs depending on the amount of space needed`;
 
-storiesOf('WordExplanation', module).addDecorator(centered)
+storiesOf('Glossary', module).addDecorator(centered)
 	.add('As a wrapper', () => (
-		<Text>You can explain a single <WordExplanation explanation={placeholderText}>word</WordExplanation>
+		<Text>You can explain a single <Glossary explanation={placeholderText}>word</Glossary>
 			&nbsp;in a sentence.
 		</Text>
 	));

src/components/WordExplanation/index.jsx → src/components/Glossary/index.jsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { XCircle } from 'react-feather';
-import Ordforklaring from '../../media/icons/ordforklaring.svg';
+import { BookOpen, XCircle } from 'react-feather';
 
-const WordExplanation = ({ explanation, children }) => {
+const Glossary = ({ explanation, children }) => {
 	const node = useRef();
 	const infoContainer = useRef();
 	const [open, setOpen] = useState(false);
@@ -28,15 +27,15 @@ const WordExplanation = ({ explanation, children }) => {
 	}, [open]);
 
 	return (
-		<button ref={node} onClick={() => setOpen(!open)} className="ssb-word-explanation">
-			<div className="we-text-wrap">{children}</div>
-			<Ordforklaring className="we-logo" alt="Ordforklaring" />
-			<div className="we-animate-background" />
+		<button ref={node} onClick={() => setOpen(!open)} className="ssb-glossary">
+			<div className="glossary-text-wrap">{children}</div>
+			<BookOpen size={12} className="glossary-logo" />
+			<div className="glossary-animate-background" />
 			{open && (
-				<div className={`we-popup${open ? ' open' : ''}`} ref={infoContainer}>
+				<div className={`glossary-popup${open ? ' open' : ''}`} ref={infoContainer}>
 					<div className="content-box">
 						<span className="info-text">{explanation}</span>
-						<div className="ssb-we-closing">
+						<div className="ssb-glossary-closing">
 							<XCircle size={16} className="icon" /><span>Lukk</span>
 						</div>
 					</div>
@@ -47,11 +46,11 @@ const WordExplanation = ({ explanation, children }) => {
 	);
 };
 
-WordExplanation.defaultProps = {};
+Glossary.defaultProps = {};
 
-WordExplanation.propTypes = {
+Glossary.propTypes = {
 	children: PropTypes.node,
 	explanation: PropTypes.string.isRequired,
 };
 
-export default WordExplanation;
+export default Glossary;

src/components/KeyFigures/README.md

@@ -35,21 +35,20 @@ KeyFigures
 <div class="ssb-key-figures small">
   <div class="kf-icon small"><!-- Insert icon --></div>
   <div>   
-    <div class="ssb-word-explanation">
-      <div class="we-text-wrap">
-        <div class="ssb-title kf-title">Explain this</div>
-      </div>
-      <!-- Insert dedicated custom icon -->
-      <div class="we-animate-background"></div>
-      <div class="ssb-we-popup {open or closed}">
+    <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="content-box">
-          <span class="info-text">{insert explanation}</span>
-          <div class="ssb-we-closing">
-            <i class="icon feather-x-circle" /><span>Lukk</span>
-          </div>
+        <span class="info-text">{insert explanation}</span>
+        <div class="ssb-glossary-closing">
+          <i class="icon">{feather.xCircle 14px}</i>
+          <span>Lukk</span>
+        </div>
         </div>
       </div>
-    </div>
+    </button>
     <div class="kf-time">2019</div>
     <div class="number-section">
       <div class="ssb-number large">12 345</div>
@@ -69,7 +68,7 @@ KeyFigures
   size="small"
   title="Title"
   time="2019"
-  wordExplanation="Some string that explains the title"
+  glossary="Some string that explains the title"
 />
 ```
 
@@ -83,8 +82,8 @@ Available props:
 | size | 'small', 'medium' or 'large' | Change size of number and icon |
 | title | string | Displays title |
 | time | string or number | Displays a year between title and number |
-| wordExplanation | string | Explanation for the title |
+| glossary | string | Explanation for the title |
 
 __Dependencies__
  - [Number](../Number)
- - [WordExplanation](../WordExplanation)
+ - [Glossary](../Glossary)

src/components/KeyFigures/__snapshots__/keyFigures.test.jsx.snap

@@ -14,15 +14,15 @@ exports[`KeyFigures component Matches the snapshot 1`] = `
     />
   </div>
   <div>
-    <WordExplanation
+    <Glossary
       explanation="Explain something"
     >
       <span
         className="kf-title"
       >
         Antall husholdninger
       </span>
-    </WordExplanation>
+    </Glossary>
     <div
       className="kf-time"
     >

src/components/KeyFigures/index.jsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Number from '../Number';
-import WordExplanation from '../WordExplanation';
+import Glossary from '../Glossary';
 
-const KeyFigures = ({	icon, number, numberDescription, size, title, time, wordExplanation }) => (
+const KeyFigures = ({	icon, number, numberDescription, size, title, time, glossary }) => (
 	<div className={`ssb-key-figures ${size}`}>
 		{icon && <div className={`kf-icon ${size}`}>{icon}</div>}
 		<div>
-			{wordExplanation
+			{glossary
 				? (
-					<WordExplanation explanation={wordExplanation}>
+					<Glossary explanation={glossary}>
 						<span className="kf-title">{title}</span>
-					</WordExplanation>
+					</Glossary>
 				)
 				: <span className="kf-title">{title}</span>}
 			<div className="kf-time">{time}</div>
@@ -42,7 +42,7 @@ KeyFigures.propTypes = {
 		PropTypes.string,
 		PropTypes.number,
 	]),
-	wordExplanation: PropTypes.string,
+	glossary: PropTypes.string,
 };
 
 export default KeyFigures;

src/components/KeyFigures/keyFigures.story.jsx

@@ -19,7 +19,7 @@ storiesOf('KeyFigures', module).addDecorator(centered)
 				time="2018"
 				size="large"
 				icon={<HouseIcon alt="house" />}
-				wordExplanation={placeholderText}
+				glossary={placeholderText}
 			/>
 		</div>
 	))
@@ -55,7 +55,7 @@ storiesOf('KeyFigures', module).addDecorator(centered)
 				numberDescription="husholdninger"
 				time="2018"
 				size="large"
-				wordExplanation={placeholderText}
+				glossary={placeholderText}
 			/>
 			<br />
 			<Divider />

src/components/KeyFigures/keyFigures.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import { Home } from 'react-feather';
 import KeyFigures from './index';
-import WordExplanation from '../WordExplanation';
+import Glossary from '../Glossary';
 
 const title = 'Antall husholdninger';
 
@@ -16,21 +16,21 @@ describe('KeyFigures component', () => {
 				time="2018"
 				size="large"
 				icon={<Home className="feather-home" />}
-				wordExplanation={'Explain something'}
+				glossary={'Explain something'}
 			/>
 		);
 		expect(wrapper).toMatchSnapshot();
 	});
 
-	test('Renders WordExplanation conditionally', () => {
+	test('Renders Glossary conditionally', () => {
 		const wrapper = shallow(
-			<KeyFigures number="789 398" wordExplanation={'Explain something'} />
+			<KeyFigures number="789 398" glossary={'Explain something'} />
 		);
-		expect(wrapper.find(WordExplanation)).toHaveLength(1);
+		expect(wrapper.find(Glossary)).toHaveLength(1);
 
 		const wrapper2 = shallow(
 			<KeyFigures number="789 398" />
 		);
-		expect(wrapper2.find(WordExplanation)).toHaveLength(0);
+		expect(wrapper2.find(Glossary)).toHaveLength(0);
 	});
 });

src/index.js

@@ -11,6 +11,7 @@ export { default as Divider } from './components/Divider';
 export { default as Dropdown } from './components/Dropdown';
 export { default as FactBox } from './components/FactBox';
 export { default as FormError } from './components/FormError';
+export { default as Glossary } from './components/Glossary';
 export { default as Input } from './components/Input';
 export { default as KeyFigures } from './components/KeyFigures';
 export { default as LeadParagraph } from './components/LeadParagraph';
@@ -30,4 +31,3 @@ export { default as Tag } from './components/Tag';
 export { default as Text } from './components/Text';
 export { default as TextArea } from './components/TextArea';
 export { default as Title } from './components/Title';
-export { default as WordExplanation } from './components/WordExplanation';

src/main.scss

@@ -11,13 +11,15 @@
 @import './components/BlockContent/block-content';
 @import './components/Breadcrumb/breadcrumb';
 @import './components/Button/button';
+@import './components/Card/card';
 @import './components/Checkbox/checkbox';
 @import './components/CheckboxGroup/checkbox-group';
 @import './components/Dialog/dialog';
 @import './components/Divider/divider';
 @import './components/Dropdown/dropdown';
 @import './components/FactBox/factbox';
 @import './components/FormError/form-error';
+@import './components/Glossary/glossary';
 @import './components/Input/input';
 @import './components/InputError/input-error';
 @import './components/KeyFigures/key-figures';
@@ -27,7 +29,6 @@
 @import './components/Number/number';
 @import './components/Pagination/pagination';
 @import './components/Paragraph/paragraph';
-@import 'components/Card/card';
 @import './components/Quote/quote';
 @import './components/RadioButton/radio-button';
 @import './components/RadioGroup/radio-group';
@@ -38,4 +39,3 @@
 @import './components/Text/text';
 @import './components/TextArea/text-area';
 @import './components/Title/title';
-@import './components/WordExplanation/word-explanation';