@ndla/ui 4.3.1 → 5.0.1

package/lib/index.d.ts

@@ -48,7 +48,7 @@ export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Naviga
 export { default as Programme } from './Programme';
 export { default as CompetenceGoalTab } from './CompetenceGoalTab';
 export { default as MultidisciplinarySubject, MultidisciplinarySubjectHeader } from './MultidisciplinarySubject';
-export { SearchTypeResult, SearchHeader, SearchFieldHeader, SearchNotionsResult, SearchSubjectResult, } from './SearchTypeResult';
+export { SearchTypeResult, SearchHeader, SearchFieldHeader, SearchNotionsResult, SearchSubjectResult, SearchFilterContent, } from './SearchTypeResult';
 export { default as constants } from './model';
 export { default as messagesNB } from './locale/messages-nb';
 export { default as messagesNN } from './locale/messages-nn';
@@ -71,3 +71,4 @@ export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBa
 export { SubjectAbout, SubjectArchive, SubjectCarousel, SubjectChildContent, SubjectContent, SubjectFilter, SubjectFlexChild, SubjectFlexWrapper, SubjectHeader, SubjectLinks, SubjectNewContent, SubjectSecondaryContent, SubjectSectionTitle, SubjectShortcuts, SubjectSidebarWrapper, SubjectSocialContent, SubjectSocialSection, SubjectTopics, SubjectBanner, } from './Subject';
 export { default as ContentCard } from './ContentCard';
 export { default as CopyParagraphButton } from './CopyParagraphButton';
+export { Notion, ConceptNotion } from './Notion';

package/lib/index.js

@@ -105,6 +105,7 @@ var _exportNames = {
   SearchFieldHeader: true,
   SearchNotionsResult: true,
   SearchSubjectResult: true,
+  SearchFilterContent: true,
   constants: true,
   messagesNB: true,
   messagesNN: true,
@@ -165,7 +166,9 @@ var _exportNames = {
   SubjectTopics: true,
   SubjectBanner: true,
   ContentCard: true,
-  CopyParagraphButton: true
+  CopyParagraphButton: true,
+  Notion: true,
+  ConceptNotion: true
 };
 Object.defineProperty(exports, "ArticleByline", {
   enumerable: true,
@@ -761,6 +764,12 @@ Object.defineProperty(exports, "SearchSubjectResult", {
     return _SearchTypeResult.SearchSubjectResult;
   }
 });
+Object.defineProperty(exports, "SearchFilterContent", {
+  enumerable: true,
+  get: function get() {
+    return _SearchTypeResult.SearchFilterContent;
+  }
+});
 Object.defineProperty(exports, "constants", {
   enumerable: true,
   get: function get() {
@@ -1127,6 +1136,18 @@ Object.defineProperty(exports, "CopyParagraphButton", {
     return _CopyParagraphButton["default"];
   }
 });
+Object.defineProperty(exports, "Notion", {
+  enumerable: true,
+  get: function get() {
+    return _Notion.Notion;
+  }
+});
+Object.defineProperty(exports, "ConceptNotion", {
+  enumerable: true,
+  get: function get() {
+    return _Notion.ConceptNotion;
+  }
+});
 
 var _indexJavascript = require("./index-javascript");
 
@@ -1263,6 +1284,8 @@ var _ContentCard = _interopRequireDefault(require("./ContentCard"));
 
 var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
 
+var _Notion = require("./Notion");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

package/lib/locale/messages-en.d.ts

@@ -39,6 +39,10 @@ declare const messages: {
         open: string;
         close: string;
     };
+    factbox: {
+        open: string;
+        close: string;
+    };
     htmlTitles: {
         titleTemplate: string;
         welcomePage: string;
@@ -139,6 +143,7 @@ declare const messages: {
             useFilter: string;
             closeFilter: string;
             removeFilter: string;
+            additionalSubjectFilters: string;
             coreRelevance: string;
             supplementaryRelevance: string;
             resourceTypeFilter: {
@@ -148,19 +153,24 @@ declare const messages: {
         };
         resultType: {
             showing: string;
+            showingAll: string;
             showMore: string;
             showAll: string;
+            toTopOfPage: string;
             toSubjectPageLabel: string;
             all: string;
+            allContentTypes: string;
             hits: string;
             showingSearchPhrase: string;
-            showingCompetenceGoalSearchPhrase: string;
             searchPhraseSuggestion: string;
+            showingCompetenceGoalSearchPhrase: string;
             notionLabels: string;
             notionsHeading: string;
             notionsRemove: string;
             showVideo: string;
             showNotion: string;
+            gridView: string;
+            listView: string;
         };
         contextModal: {
             button: string;
@@ -560,6 +570,7 @@ declare const messages: {
         'source-material': string;
         'assessment-resources': string;
         topic: string;
+        'multidisciplinary-topic': string;
     };
     modal: {
         closeModal: string;
@@ -841,6 +852,9 @@ declare const messages: {
         };
         readMoreDescriptionLabel: string;
     };
+    h5p: {
+        reuse: string;
+    };
     video: {
         download: string;
         reuse: string;
@@ -852,6 +866,7 @@ declare const messages: {
     };
     concept: {
         showDescription: string;
+        reuse: string;
         error: {
             title: string;
             content: string;

package/lib/locale/messages-en.js

@@ -119,6 +119,7 @@ var messages = _objectSpread(_objectSpread({
       useFilter: 'Use filter',
       closeFilter: 'Close filter',
       removeFilter: 'Remove filter {{filterName}}',
+      additionalSubjectFilters: '+ {{count}} subjects',
       coreRelevance: 'Core content',
       supplementaryRelevance: 'Supplementary content',
       resourceTypeFilter: {
@@ -127,20 +128,25 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     resultType: {
-      showing: 'Showing {{fromCount}} to {{toCount}} of {{totalCount}}',
+      showing: 'Showing {{count}} of {{totalCount}} {{contentType}}',
+      showingAll: 'Showing all',
       showMore: 'Show more',
       showAll: 'Show all',
+      toTopOfPage: 'To top of page',
       toSubjectPageLabel: 'Go to subject page',
       all: 'All',
+      allContentTypes: 'All content-types',
       hits: '{{count}} hits',
-      showingSearchPhrase: 'Showing results for:',
+      showingSearchPhrase: 'Showing hits for',
+      searchPhraseSuggestion: 'Search instead for',
       showingCompetenceGoalSearchPhrase: 'Showing results for competence goals {text}',
-      searchPhraseSuggestion: 'Search instead for:',
       notionLabels: 'Used in',
       notionsHeading: 'Explanations',
       notionsRemove: 'Remove',
       showVideo: 'Watch video',
-      showNotion: 'Show notion'
+      showNotion: 'Show notion',
+      gridView: 'Grid-view',
+      listView: 'List-view'
     },
     contextModal: {
       button: '+ {{count}} more contexts',
@@ -422,7 +428,7 @@ var messages = _objectSpread(_objectSpread({
       heading: 'How to use other content from the article',
       description: 'You will find guidelines for use of other content in the asset',
       itemImage: {
-        ariaLabel: 'Open video in new window'
+        ariaLabel: 'Open in new window'
       }
     },
     h5p: {
@@ -515,7 +521,8 @@ var messages = _objectSpread(_objectSpread({
     'external-learning-resources': 'External learning resources',
     'source-material': 'Source material',
     'assessment-resources': 'Assessment resource',
-    topic: 'Topic'
+    topic: 'Topic',
+    'multidisciplinary-topic': 'Multidisciplinary case'
   },
   modal: {
     closeModal: 'Close'
@@ -797,6 +804,9 @@ var messages = _objectSpread(_objectSpread({
     },
     readMoreDescriptionLabel: 'show more'
   },
+  h5p: {
+    reuse: 'Use H5P'
+  },
   video: {
     download: 'Download video',
     reuse: 'Use video',
@@ -808,6 +818,7 @@ var messages = _objectSpread(_objectSpread({
   },
   concept: {
     showDescription: 'Show concept description',
+    reuse: 'Use concept',
     error: {
       title: 'An error occurred',
       content: 'Could not load the description of the concept.'
@@ -857,6 +868,10 @@ var messages = _objectSpread(_objectSpread({
   slateBlockMenu: {
     open: 'Open menu',
     close: 'Close menu'
+  },
+  factbox: {
+    open: 'Open fact box',
+    close: 'Close fact box'
   }
 });
 

package/lib/locale/messages-nb.d.ts

@@ -39,6 +39,10 @@ declare const messages: {
         open: string;
         close: string;
     };
+    factbox: {
+        open: string;
+        close: string;
+    };
     htmlTitles: {
         titleTemplate: string;
         welcomePage: string;
@@ -139,6 +143,7 @@ declare const messages: {
             useFilter: string;
             closeFilter: string;
             removeFilter: string;
+            additionalSubjectFilters: string;
             coreRelevance: string;
             supplementaryRelevance: string;
             resourceTypeFilter: {
@@ -148,10 +153,13 @@ declare const messages: {
         };
         resultType: {
             showing: string;
+            showingAll: string;
             showMore: string;
             showAll: string;
+            toTopOfPage: string;
             toSubjectPageLabel: string;
             all: string;
+            allContentTypes: string;
             hits: string;
             showingSearchPhrase: string;
             showingCompetenceGoalSearchPhrase: string;
@@ -161,6 +169,8 @@ declare const messages: {
             notionsRemove: string;
             showVideo: string;
             showNotion: string;
+            gridView: string;
+            listView: string;
         };
         contextModal: {
             button: string;
@@ -560,6 +570,7 @@ declare const messages: {
         'source-material': string;
         'assessment-resources': string;
         topic: string;
+        'multidisciplinary-topic': string;
     };
     modal: {
         closeModal: string;
@@ -841,6 +852,9 @@ declare const messages: {
         };
         readMoreDescriptionLabel: string;
     };
+    h5p: {
+        reuse: string;
+    };
     video: {
         download: string;
         reuse: string;
@@ -852,6 +866,7 @@ declare const messages: {
     };
     concept: {
         showDescription: string;
+        reuse: string;
         error: {
             title: string;
             content: string;

package/lib/locale/messages-nb.js

@@ -119,6 +119,7 @@ var messages = _objectSpread(_objectSpread({
       useFilter: 'Bruk filter',
       closeFilter: 'Lukk filter',
       removeFilter: 'Fjern filter {{filterName}}',
+      additionalSubjectFilters: '+ {{count}} fag',
       coreRelevance: 'Kjernestoff',
       supplementaryRelevance: 'Tilleggsstoff',
       resourceTypeFilter: {
@@ -127,20 +128,25 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     resultType: {
-      showing: 'Viser {{fromCount}} til {{toCount}} av {{totalCount}}',
+      showing: 'Viser {{count}} av {{totalCount}} {{contentType}}',
+      showingAll: 'Viser alle',
       showMore: 'Vis mer',
       showAll: 'Vis alle',
+      toTopOfPage: 'Til toppen',
       toSubjectPageLabel: 'Gå til fagsiden',
       all: 'Alle',
-      hits: '{{count}} Treff',
-      showingSearchPhrase: 'Viser resultater for',
+      allContentTypes: 'Alle innholdstyper',
+      hits: '{{count}} treff',
+      showingSearchPhrase: 'Viser treff for',
       showingCompetenceGoalSearchPhrase: 'Viser resultater for kompetansemål {text}',
-      searchPhraseSuggestion: 'Søk i stedet for',
+      searchPhraseSuggestion: 'Søk heller',
       notionLabels: 'Brukes i',
       notionsHeading: 'Begrepsforklaring',
       notionsRemove: 'Fjern',
       showVideo: 'Se video',
-      showNotion: 'Se forklaring'
+      showNotion: 'Se forklaring',
+      gridView: 'Gallerivisning',
+      listView: 'Listevisning'
     },
     contextModal: {
       button: '+ {{count}} flere steder',
@@ -515,7 +521,8 @@ var messages = _objectSpread(_objectSpread({
     'external-learning-resources': 'Ekstern læringsressurs',
     'source-material': 'Kildemateriale',
     'assessment-resources': 'Vurderingsressurs',
-    topic: 'Emne'
+    topic: 'Emne',
+    'multidisciplinary-topic': 'Tverrfaglig case'
   },
   modal: {
     closeModal: 'Lukk'
@@ -797,6 +804,9 @@ var messages = _objectSpread(_objectSpread({
     },
     readMoreDescriptionLabel: 'vis mer'
   },
+  h5p: {
+    reuse: 'Bruk H5P'
+  },
   video: {
     download: 'Last ned video',
     reuse: 'Bruk video',
@@ -808,6 +818,7 @@ var messages = _objectSpread(_objectSpread({
   },
   concept: {
     showDescription: 'Vis beskrivelsen av forklaringen.',
+    reuse: 'Bruk forklaring',
     error: {
       title: 'En feil oppstod',
       content: 'Kunne ikke laste beskrivelsen av forklaringen.'
@@ -857,6 +868,10 @@ var messages = _objectSpread(_objectSpread({
   slateBlockMenu: {
     open: 'Åpne meny',
     close: 'Lukk meny'
+  },
+  factbox: {
+    open: 'Åpne faktaboks',
+    close: 'Lukk faktaboks'
   }
 });
 

package/lib/locale/messages-nn.d.ts

@@ -39,6 +39,10 @@ declare const messages: {
         open: string;
         close: string;
     };
+    factbox: {
+        open: string;
+        close: string;
+    };
     htmlTitles: {
         titleTemplate: string;
         welcomePage: string;
@@ -139,6 +143,7 @@ declare const messages: {
             useFilter: string;
             removeFilter: string;
             closeFilter: string;
+            additionalSubjectFilters: string;
             coreRelevance: string;
             supplementaryRelevance: string;
             resourceTypeFilter: {
@@ -148,19 +153,24 @@ declare const messages: {
         };
         resultType: {
             showing: string;
+            showingAll: string;
             showMore: string;
             showAll: string;
+            toTopOfPage: string;
             toSubjectPageLabel: string;
             all: string;
+            allContentTypes: string;
             hits: string;
             showingSearchPhrase: string;
-            showingCompetenceGoalSearchPhrase: string;
             searchPhraseSuggestion: string;
+            showingCompetenceGoalSearchPhrase: string;
             notionLabels: string;
             notionsHeading: string;
             notionsRemove: string;
             showVideo: string;
             showNotion: string;
+            gridView: string;
+            listView: string;
         };
         contextModal: {
             button: string;
@@ -560,6 +570,7 @@ declare const messages: {
         'source-material': string;
         'assessment-resources': string;
         topic: string;
+        'multidisciplinary-topic': string;
     };
     modal: {
         closeModal: string;
@@ -841,6 +852,9 @@ declare const messages: {
         };
         readMoreDescriptionLabel: string;
     };
+    h5p: {
+        reuse: string;
+    };
     video: {
         download: string;
         reuse: string;
@@ -852,6 +866,7 @@ declare const messages: {
     };
     concept: {
         showDescription: string;
+        reuse: string;
         error: {
             title: string;
             content: string;

package/lib/locale/messages-nn.js

@@ -119,6 +119,7 @@ var messages = _objectSpread(_objectSpread({
       useFilter: 'Bruk filter',
       removeFilter: 'Fjern filter {{filterName}}',
       closeFilter: 'Lukk filter',
+      additionalSubjectFilters: '+ {{count}} fag',
       coreRelevance: 'Kjernestoff',
       supplementaryRelevance: 'Tilleggsstoff',
       resourceTypeFilter: {
@@ -127,20 +128,25 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     resultType: {
-      showing: 'Viser {{fromCount}} til {{toCount}} av {{totalCount}}',
+      showing: 'Viser {{count}} av {{totalCount}} {{contentType}}',
+      showingAll: 'Viser alle',
       showMore: 'Vis meir',
       showAll: 'Vis alle',
+      toTopOfPage: 'Til toppen',
       toSubjectPageLabel: 'Gå til fagsida',
       all: 'Alle',
-      hits: '{{count}} Treff',
-      showingSearchPhrase: 'Viser resultat for',
+      allContentTypes: 'Alle innhaldstyper',
+      hits: '{{count}} treff',
+      showingSearchPhrase: 'Viser treff for',
+      searchPhraseSuggestion: 'Søk heller',
       showingCompetenceGoalSearchPhrase: 'Viser resultat for kompetansemål {text}',
-      searchPhraseSuggestion: 'Søk i staden for',
       notionLabels: 'Brukes i',
       notionsHeading: 'Begrepsforklaring',
       notionsRemove: 'Fjern',
       showVideo: 'Sjå video',
-      showNotion: 'Sjå forklaring'
+      showNotion: 'Sjå forklaring',
+      gridView: 'Gallerivisning',
+      listView: 'Listevisning'
     },
     contextModal: {
       button: '+ {{count}} fleire stader',
@@ -515,7 +521,8 @@ var messages = _objectSpread(_objectSpread({
     'external-learning-resources': 'Ekstern læringsressurs',
     'source-material': 'Kjeldemateriale',
     'assessment-resources': 'Vurderingsressurs',
-    topic: 'Emne'
+    topic: 'Emne',
+    'multidisciplinary-topic': 'Tverrfagleg case'
   },
   modal: {
     closeModal: 'Lukk'
@@ -797,6 +804,9 @@ var messages = _objectSpread(_objectSpread({
     },
     readMoreDescriptionLabel: 'vis meir'
   },
+  h5p: {
+    reuse: 'Bruk H5P'
+  },
   video: {
     download: 'Last ned video',
     reuse: 'Bruk video',
@@ -808,6 +818,7 @@ var messages = _objectSpread(_objectSpread({
   },
   concept: {
     showDescription: 'Vis skildring av forklaringa',
+    reuse: 'Bruk forklaring',
     error: {
       title: 'Ein feil oppstod',
       content: 'Kunne ikkje laste skildringa av forklaringa.'
@@ -857,6 +868,10 @@ var messages = _objectSpread(_objectSpread({
   slateBlockMenu: {
     open: 'Åpne meny',
     close: 'Lukk meny'
+  },
+  factbox: {
+    open: 'Åpne faktaboks',
+    close: 'Lukk faktaboks'
   }
 });
 

package/lib/model/ContentType.d.ts

@@ -13,3 +13,4 @@ export declare const EXTERNAL_LEARNING_RESOURCES = "external-learning-resources"
 export declare const SOURCE_MATERIAL = "source-material";
 export declare const LEARNING_PATH = "learning-path";
 export declare const TOPIC = "topic";
+export declare const MULTIDISCIPLINARY_TOPIC = "multidisciplinary-topic";

package/lib/model/ContentType.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOPIC = exports.LEARNING_PATH = exports.SOURCE_MATERIAL = exports.EXTERNAL_LEARNING_RESOURCES = exports.SUBJECT = exports.ASSESSMENT_RESOURCES = exports.TASKS_AND_ACTIVITIES = exports.SUBJECT_MATERIAL = void 0;
+exports.MULTIDISCIPLINARY_TOPIC = exports.TOPIC = exports.LEARNING_PATH = exports.SOURCE_MATERIAL = exports.EXTERNAL_LEARNING_RESOURCES = exports.SUBJECT = exports.ASSESSMENT_RESOURCES = exports.TASKS_AND_ACTIVITIES = exports.SUBJECT_MATERIAL = void 0;
 
 /**
  * Copyright (c) 2017-present, NDLA.
@@ -27,4 +27,6 @@ exports.SOURCE_MATERIAL = SOURCE_MATERIAL;
 var LEARNING_PATH = 'learning-path';
 exports.LEARNING_PATH = LEARNING_PATH;
 var TOPIC = 'topic';
-exports.TOPIC = TOPIC;
+exports.TOPIC = TOPIC;
+var MULTIDISCIPLINARY_TOPIC = 'multidisciplinary-topic';
+exports.MULTIDISCIPLINARY_TOPIC = MULTIDISCIPLINARY_TOPIC;

package/lib/shapes.js

@@ -100,7 +100,7 @@ var ResourceShape = _propTypes["default"].shape({
 
 exports.ResourceShape = ResourceShape;
 
-var ContentTypeShape = _propTypes["default"].oneOf([contentTypes.SUBJECT_MATERIAL, contentTypes.TASKS_AND_ACTIVITIES, contentTypes.ASSESSMENT_RESOURCES, contentTypes.SUBJECT, contentTypes.EXTERNAL_LEARNING_RESOURCES, contentTypes.SOURCE_MATERIAL, contentTypes.LEARNING_PATH, contentTypes.TOPIC, 'beta', 'ndla-film', 'ndla-film has-image']);
+var ContentTypeShape = _propTypes["default"].oneOf([contentTypes.SUBJECT_MATERIAL, contentTypes.TASKS_AND_ACTIVITIES, contentTypes.ASSESSMENT_RESOURCES, contentTypes.SUBJECT, contentTypes.EXTERNAL_LEARNING_RESOURCES, contentTypes.SOURCE_MATERIAL, contentTypes.LEARNING_PATH, contentTypes.TOPIC, contentTypes.MULTIDISCIPLINARY_TOPIC, 'beta', 'ndla-film', 'ndla-film has-image']);
 
 exports.ContentTypeShape = ContentTypeShape;
 

package/lib/types.d.ts

@@ -43,6 +43,7 @@ export interface Copyright {
     creators: Array<Contributor>;
     rightsholders: Array<Contributor>;
     processors: Array<Contributor>;
+    origin?: string;
 }
 export interface FootNote {
     ref: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "4.3.1",
+  "version": "5.0.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,18 +31,18 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.1.0",
-    "@ndla/carousel": "^1.2.0",
-    "@ndla/core": "^1.0.0",
-    "@ndla/hooks": "^1.1.0",
-    "@ndla/icons": "^1.6.0",
-    "@ndla/licenses": "^3.0.0",
-    "@ndla/modal": "^1.2.0",
-    "@ndla/safelink": "^1.1.0",
-    "@ndla/switch": "^0.1.0",
-    "@ndla/tabs": "^1.1.0",
-    "@ndla/tooltip": "^0.3.0",
-    "@ndla/util": "^2.0.2",
+    "@ndla/button": "^2.1.1",
+    "@ndla/carousel": "^1.2.1",
+    "@ndla/core": "^1.0.1",
+    "@ndla/hooks": "^1.1.1",
+    "@ndla/icons": "^1.6.1",
+    "@ndla/licenses": "^4.0.0",
+    "@ndla/modal": "^1.2.1",
+    "@ndla/safelink": "^1.1.1",
+    "@ndla/switch": "^0.1.1",
+    "@ndla/tabs": "^1.1.1",
+    "@ndla/tooltip": "^0.3.1",
+    "@ndla/util": "^2.0.3",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "471a578a2f53d87b6dcb75c4d3a36c8acfcf3838"
+  "gitHead": "43a6444a198b56add3ab80245b26f075c20b465e"
 }

package/src/Article/Article.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ComponentType, ReactNode, useEffect, useRef, useState, forwardRef, MouseEventHandler } from 'react';
+import React, { ComponentType, ReactNode, useEffect, useRef, useState, forwardRef } from 'react';
 import BEMHelper from 'react-bem-helper';
 import isString from 'lodash/isString';
 import parse from 'html-react-parser';
@@ -21,9 +21,9 @@ import ArticleByline from './ArticleByline';
 import LayoutItem from '../Layout';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 import ArticleNotions, { NotionRelatedContent } from './ArticleNotions';
-import { NotionProps } from '../Notion/Notion';
 import ArticleAccessMessage from './ArticleAccessMessage';
 import MessageBox from '../MessageBox/MessageBox';
+import { ConceptNotionType } from '../Notion/ConceptNotion';
 
 const classes = new BEMHelper({
   name: 'article',
@@ -114,8 +114,7 @@ type Props = {
   renderMarkdown: (text: string) => string;
   copyPageUrlLink?: string;
   printUrl?: string;
-  notions?: { list: NotionProps[]; related: NotionRelatedContent[] };
-  onReferenceClick?: MouseEventHandler;
+  notions?: { list: ConceptNotionType[]; related: NotionRelatedContent[] };
   accessMessage?: string;
 };
 
@@ -144,7 +143,6 @@ export const Article = ({
   id,
   locale,
   notions,
-  onReferenceClick,
   printUrl,
   renderMarkdown,
   accessMessage,
@@ -207,16 +205,11 @@ export const Article = ({
         </LayoutItem>
         <LayoutItem layout="center">
           {notions && showExplainNotions && (
-            <>
-              <ArticleNotions
-                locale={locale}
-                notions={notions.list}
-                onReferenceClick={onReferenceClick}
-                relatedContent={notions.related}
-                renderMarkdown={renderMarkdown}
-                buttonOffsetRight={articlePositionRight}
-              />
-            </>
+            <ArticleNotions
+              notions={notions.list}
+              relatedContent={notions.related}
+              buttonOffsetRight={articlePositionRight}
+            />
           )}
           {getArticleContent(content, locale)}
         </LayoutItem>

package/src/Article/ArticleByline.tsx

@@ -21,7 +21,7 @@ const Wrapper = styled.div`
   margin-top: ${spacing.normal};
   padding-top: ${spacing.normal};
   padding-bottom: ${spacing.xsmall};
-  border-top: 2px solid ${colors.brand.greyLighter};
+  border-top: 1px solid ${colors.brand.greyLight};
   ${fonts.sizes('14px', '18px')};
   font-family: ${fonts.sans};
   color: ${colors.brand.greyDark};