@ndla/ui 4.3.0 → 4.3.3-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "4.3.0",
+  "version": "4.3.3-alpha.12+22d4e1c49",
   "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": "^2.2.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-alpha.20+22d4e1c49",
+    "@ndla/carousel": "^1.2.1-alpha.20+22d4e1c49",
+    "@ndla/core": "^1.0.1-alpha.20+22d4e1c49",
+    "@ndla/hooks": "^1.1.1-alpha.20+22d4e1c49",
+    "@ndla/icons": "^1.6.1-alpha.20+22d4e1c49",
+    "@ndla/licenses": "^3.0.2-alpha.12+22d4e1c49",
+    "@ndla/modal": "^1.2.1-alpha.20+22d4e1c49",
+    "@ndla/safelink": "^1.1.1-alpha.20+22d4e1c49",
+    "@ndla/switch": "^0.1.1-alpha.20+22d4e1c49",
+    "@ndla/tabs": "^1.1.1-alpha.20+22d4e1c49",
+    "@ndla/tooltip": "^0.3.1-alpha.20+22d4e1c49",
+    "@ndla/util": "^2.0.3-alpha.64+22d4e1c49",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -54,7 +54,6 @@
     "lodash": "^4.17.20",
     "react-bem-helper": "1.4.1",
     "react-device-detect": "^2.1.2",
-    "react-facebook": "^6.0.15",
     "react-sticky-el": "^2.0.6",
     "react-swipeable": "^6.2.0",
     "react-transition-group": "^2.5.3",
@@ -82,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7d6db8f3945947b35bdbb3c38229dec942d43ec1"
+  "gitHead": "22d4e1c498b4c967fa6463ce0a8b8ee3bbd2336e"
 }

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};

package/src/Article/ArticleNotions.tsx

@@ -6,15 +6,14 @@
  *
  */
 
-import React, { MouseEventHandler } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import Modal, { ModalHeader, ModalCloseButton, ModalBody } from '@ndla/modal';
-import { mq, breakpoints } from '@ndla/core';
-import { Explanation } from '@ndla/icons/common';
-import { Locale } from '../types';
-import { Notion } from '../Notion';
-import { NotionProps } from '../Notion/Notion';
+import { mq, breakpoints, fonts, colors } from '@ndla/core';
+import { Explanation, NotionFlip } from '@ndla/icons/common';
+import { ConceptNotion } from '../Notion';
+import { ConceptNotionType } from '../Notion/ConceptNotion';
 
 const ArticleNotionsContainer = styled.div`
   margin-bottom: 26px;
@@ -23,7 +22,6 @@ const ArticleNotionsContainer = styled.div`
     margin-bottom: 0;
   }
 `;
-/* Stored for later 
 
 const NotionsTrigger = styled.div`
   padding: 0 16px;
@@ -32,7 +30,7 @@ const NotionsTrigger = styled.div`
   background-color: ${colors.brand.greyLighter};
   border-radius: 4px;
   cursor: pointer;
- 
+
   ${mq.range({ from: breakpoints.tablet })} {
     position: fixed;
     border: none;
@@ -80,7 +78,7 @@ const NotionsTrigger = styled.div`
     }
   }
 `;
-*/
+
 const ModalHeadingContainer = styled.div`
   display: flex;
   align-items: center;
@@ -158,36 +156,24 @@ export type NotionRelatedContent = {
 };
 
 type ArticleNotionsProps = {
-  locale: Locale;
-  notions: NotionProps[];
-  onReferenceClick?: MouseEventHandler<HTMLButtonElement>;
+  notions: ConceptNotionType[];
   relatedContent?: NotionRelatedContent[];
-  renderMarkdown?: (text: string) => string;
   buttonOffsetRight: number;
 };
 
-export const ArticleNotions = ({
-  locale,
-  notions,
-  onReferenceClick,
-  relatedContent = [],
-  renderMarkdown,
-  buttonOffsetRight,
-}: ArticleNotionsProps) => {
+export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight }: ArticleNotionsProps) => {
   const { t } = useTranslation();
-  //const leftOffset = `${buttonOffsetRight - 32}px`;
+  const leftOffset = `${buttonOffsetRight - 32}px`;
   return (
     <ArticleNotionsContainer>
       <Modal
-        /* Stored for later
-    
-    activateButton={
+        activateButton={
           <NotionsTrigger role="button" aria-label={t('article.notionsPrompt')} style={{ left: leftOffset }}>
             <NotionFlip />
             <Explanation />
             <span>{t('article.notionsPrompt')}</span>
           </NotionsTrigger>
-        } */
+        }
         size="large"
         backgroundColor="white">
         {(onClose: () => void) => (
@@ -202,13 +188,7 @@ export const ArticleNotions = ({
               </ModalHeadingContainer>
               <NotionsContainer>
                 {notions.map((notion) => (
-                  <Notion
-                    key={notion.id}
-                    locale={locale}
-                    onReferenceClick={onReferenceClick}
-                    renderMarkdown={renderMarkdown}
-                    {...notion}
-                  />
+                  <ConceptNotion key={notion.id} concept={notion} />
                 ))}
               </NotionsContainer>
               {relatedContent.length > 0 && (

package/src/ContentPlaceholder/ContentPlaceholder.tsx

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+import styled from '@emotion/styled';
+import { colors } from '@ndla/core';
+
+const Wrapper = styled.div`
+  position: fixed;
+  z-index: 98;
+  top: 0;
+  left: 0;
+  right: 0;
+`;
+
+const Background = styled.div`
+  height: 100vh;
+  width: 100vw;
+  background-color: ${colors.brand.greyLightest};
+`;
+
+const Placeholder = styled.div`
+  position: absolute;
+  display: block;
+  height: 100vh;
+  width: 100vw;
+  margin-top: 86px;
+  background-position-x: center;
+  background-position-y: 65px;
+  background-repeat: no-repeat;
+  animation-name: pulseAnimation;
+  animation-duration: 1.6s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  @media (max-width: 476px) {
+    background-size: 280px 609px;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyODBweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDI4MCA2MDkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJ0aW55IiBmaWxsPSIjRTZFNkU2IiBmaWxsLXJ1bGU9Im5vbnplcm8iPiAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMjEiIHdpZHRoPSIxNjQuMzA1NTU2IiBoZWlnaHQ9IjMyIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwLjgzMzMzMzMiIGhlaWdodD0iMTYiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIxODAiIHdpZHRoPSIyODAiIGhlaWdodD0iMjcwIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iNzAiIHdpZHRoPSIyODAiIGhlaWdodD0iMjUiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI5OCIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIyNSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjEyNSIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIyNSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjQ4MCIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxOCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjUwOCIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxOCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjUzNSIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxOCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjU2MyIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxOCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjU5MSIgd2lkdGg9IjE5Mi41IiBoZWlnaHQ9IjE4Ij48L3JlY3Q+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
+  }
+  @media (min-width: 476px) {
+    background-size: 375px 848px;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIzNzVweCIgaGVpZ2h0PSI4NDhweCIgdmlld0JveD0iMCAwIDM3NSA4NDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJzbWFsbCIgZmlsbD0iI0U2RTZFNiIgZmlsbC1ydWxlPSJub256ZXJvIj4gICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjI3IiB3aWR0aD0iMjIwLjU4ODIzNSIgaGVpZ2h0PSI0MiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjAiIHdpZHRoPSI1NC4xNDQzODUiIGhlaWdodD0iMjEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIyMTUiIHdpZHRoPSIxMTAuMjk0MTE4IiBoZWlnaHQ9IjIxIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMjY0LjcwNTg4MiIgeT0iMjE1IiB3aWR0aD0iMTEwLjI5NDExOCIgaGVpZ2h0PSIyMSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjI5MCIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIzNTEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI5MSIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjEyNyIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjE2MyIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjY4MCIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjcxNiIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9Ijc1MiIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9Ijc4OCIgd2lkdGg9IjM3NSIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjgyNCIgd2lkdGg9IjI1Ny42ODcxNjYiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICA8L2c+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
+  }
+  @media (min-width: 601px) {
+    background-position-y: 95px;
+    background-size: 530px 848px;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1MzBweCIgaGVpZ2h0PSI4NDhweCIgdmlld0JveD0iMCAwIDUzMCA4NDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJhcnRpY2xlLW1lZGl1bSIgZmlsbD0iI0U2RTZFNiIgZmlsbC1ydWxlPSJub256ZXJvIj4gICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjI3IiB3aWR0aD0iMzExIiBoZWlnaHQ9IjQyIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMCIgd2lkdGg9Ijc3IiBoZWlnaHQ9IjIxIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMjE1IiB3aWR0aD0iMTU2IiBoZWlnaHQ9IjIxIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMzc0IiB5PSIyMTUiIHdpZHRoPSIxNTYiIGhlaWdodD0iMjEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIyOTAiIHdpZHRoPSI1MzAiIGhlaWdodD0iMzUxIj48L3JlY3Q+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iOTEiIHdpZHRoPSI1MzAiIGhlaWdodD0iMzIiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIxMjciIHdpZHRoPSI1MzAiIGhlaWdodD0iMzIiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIxNjMiIHdpZHRoPSI1MzAiIGhlaWdodD0iMzIiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI2ODAiIHdpZHRoPSI1MzAiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI3MTYiIHdpZHRoPSI1MzAiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI3NTIiIHdpZHRoPSI1MzAiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI3ODgiIHdpZHRoPSI1MzAiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI4MjQiIHdpZHRoPSIzNjMiIGhlaWdodD0iMjQiPjwvcmVjdD4gICAgICAgICAgICA8L2c+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
+  }
+  @media (min-width: 768px) {
+    background-size: 624px 848px;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI2MjRweCIgaGVpZ2h0PSI4NDhweCIgdmlld0JveD0iMCAwIDYyNCA4NDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+R3JvdXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJhcnRpY2xlLWxhcmdlIiBmaWxsPSIjRTZFNkU2IiBmaWxsLXJ1bGU9Im5vbnplcm8iPiAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgeD0iMCIgeT0iMjciIHdpZHRoPSIzMjYiIGhlaWdodD0iNDIiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIwIiB3aWR0aD0iODEiIGhlaWdodD0iMjEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSIyMTUiIHdpZHRoPSIxNjMiIGhlaWdodD0iMjEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSI0NjEiIHk9IjIxNSIgd2lkdGg9IjE2MyIgaGVpZ2h0PSIyMSI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjI5MCIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIzNTEiPjwvcmVjdD4gICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiB4PSIwIiB5PSI5MSIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjEyNyIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjE2MyIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIzMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjY4MCIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjcxNiIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9Ijc1MiIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9Ijc4OCIgd2lkdGg9IjYyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIHg9IjAiIHk9IjgyNCIgd2lkdGg9IjM4MC42NCIgaGVpZ2h0PSIyNCI+PC9yZWN0PiAgICAgICAgICAgIDwvZz4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
+  }
+`;
+
+const ContentPlaceholder = () => {
+  return (
+    <Wrapper>
+      <Placeholder />
+      <Background />
+    </Wrapper>
+  );
+};
+
+export default ContentPlaceholder;

package/src/ContentPlaceholder/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import ContentPlaceholder from './ContentPlaceholder';
+
+export default ContentPlaceholder;

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -10,6 +10,7 @@ import {
   ExternalLearningResource,
   SharedResource,
   LearningPath,
+  MultidisciplinaryTopic,
 } from '@ndla/icons/contentType';
 
 import { MenuBook } from '@ndla/icons/action';
@@ -67,6 +68,9 @@ export const ContentTypeBadge = ({ type, background, title, size = 'small', bord
     case contentTypes.TOPIC:
       icon = <Subject title={title} />;
       break;
+    case contentTypes.MULTIDISCIPLINARY_TOPIC:
+      icon = <MultidisciplinaryTopic />;
+      break;
     default:
       break;
   }
@@ -106,3 +110,7 @@ export const SourceMaterialBadge = (props: Omit<Props, 'type'>) => (
 export const LearningPathBadge = (props: Omit<Props, 'type'>) => (
   <ContentTypeBadge {...props} type={contentTypes.LEARNING_PATH} />
 );
+
+export const MultidisciplinaryTopicBadge = (props: Omit<Props, 'type'>) => (
+  <ContentTypeBadge {...props} type={contentTypes.MULTIDISCIPLINARY_TOPIC} />
+);

package/src/ContentTypeBadge/component.content-type-badge.scss

@@ -165,6 +165,11 @@
       background: $subjecttype-background;
     }
   }
+  &--multidisciplinary-topic{
+    &.c-content-type-badge--background {
+      background: #B9B37B;
+    }
+  }
 
   &--large {
     width: 50px;

package/src/FactBox/FactBox.tsx

@@ -6,15 +6,10 @@
  *
  */
 
-import React, { ReactNode, MouseEvent } from 'react';
+import React, { ReactNode, MouseEvent, useState } from 'react';
 import BEMHelper from 'react-bem-helper';
 import Button from '@ndla/button';
-
-const toggleFactBox = (event: MouseEvent<HTMLButtonElement>) => {
-  const button = event.currentTarget;
-  const aside = button?.previousSibling?.parentElement;
-  aside?.classList?.toggle('expanded');
-};
+import { useTranslation } from 'react-i18next';
 
 const classes = new BEMHelper({
   name: 'factbox',
@@ -26,13 +21,25 @@ interface Props {
   children?: ReactNode;
 }
 
-const FactBox = ({ children, dangerouslySetInnerHTML }: Props) => (
-  <aside {...classes()}>
-    <div {...classes('content')} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
-      {children}
-    </div>
-    <Button {...classes('button')} onClick={toggleFactBox} />
-  </aside>
-);
+const FactBox = ({ children, dangerouslySetInnerHTML }: Props) => {
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation();
+
+  const toggleFactBox = (event: MouseEvent<HTMLButtonElement>) => {
+    const button = event.currentTarget;
+    const aside = button?.previousSibling?.parentElement;
+    aside?.classList?.toggle('expanded');
+    setOpen((prev) => !prev);
+  };
+
+  return (
+    <aside {...classes()}>
+      <div {...classes('content')} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
+        {children}
+      </div>
+      <Button {...classes('button')} onClick={toggleFactBox} title={t(open ? 'factbox.close' : 'factbox.open')} />
+    </aside>
+  );
+};
 
 export default FactBox;

package/src/Figure/component.figure.scss

@@ -108,7 +108,7 @@
   background-color: $white;
   padding: $spacing--small 0;
   display: block;
-  border-bottom: 1px solid #d1d6db;
+  border-bottom: 1px solid $brand-grey--light;
 }
 
 .c-figure__caption--hidden-caption {

package/src/Filter/FilterButtons.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-
 import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import Button from '@ndla/button';
@@ -15,6 +14,7 @@ import { Cross as CrossIcon, Plus as PlusIcon } from '@ndla/icons/action';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 // @ts-ignore
 import ToggleItem from './ToggleItem';
+import FilterCarousel from './FilterCarousel';
 
 const StyledHeading = styled.h3`
   ${fonts.sizes('16px', '32px')};
@@ -25,12 +25,14 @@ const StyledHeading = styled.h3`
 
 const StyledButtonsWrapper = styled.div`
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  position: relative;
 `;
 
 const StyledButtonElementWrapper = styled.div`
   margin: 0 ${spacing.xsmall} ${spacing.xsmall} 0;
   break-inside: avoid;
+  flex: 1 0 auto;
 `;
 
 const StyledList = styled.ul`
@@ -61,6 +63,7 @@ const StyledButtonContentSelected = styled.span`
 
 const StyledRemoveWrapper = styled.div`
   margin-top: ${spacing.xsmall};
+  margin-left: 10px;
 `;
 
 const ButtonRemoveText = styled.span`
@@ -73,8 +76,8 @@ export type ItemProps = {
   value: string;
   selected?: boolean;
 };
-type Props = {
-  heading: string;
+export type FilterButtonsProps = {
+  heading?: string;
   items: ItemProps[];
   onFilterToggle: (value: string) => void;
   onRemoveAllFilters: () => void;
@@ -83,7 +86,7 @@ type Props = {
   };
 };
 
-export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilters, labels }: Props) => {
+export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilters, labels }: FilterButtonsProps) => {
   const { t } = useTranslation();
   const [isNarrowScreen, setIsNarrowScreen] = useState(false);
 
@@ -155,9 +158,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
                           checked={item.selected}
                           label={item.label}
                           component="div"
-                          onChange={() => {
-                            onFilterToggle(item.value);
-                          }}
+                          onChange={() => onFilterToggle(item.value)}
                         />
                       </StyledListItem>
                     ))}
@@ -170,18 +171,16 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
       )}
       {!isNarrowScreen && (
         <>
-          <StyledHeading>{heading}</StyledHeading>
-          <StyledButtonsWrapper>
+          {heading && <StyledHeading>{heading}</StyledHeading>}
+          <FilterCarousel>
             {items.map((item: ItemProps) => (
               <StyledButtonElementWrapper key={item.value}>
                 <Button
                   type="button"
                   size="normal"
-                  greyLightest={!item.selected}
+                  greyLighter={!item.selected}
                   borderShape="rounded"
-                  onClick={() => {
-                    onFilterToggle(item.value);
-                  }}>
+                  onClick={() => onFilterToggle(item.value)}>
                   <StyledButtonContent>{item.label}</StyledButtonContent>
                   {item.selected && (
                     <StyledButtonContentSelected>
@@ -191,7 +190,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
                 </Button>
               </StyledButtonElementWrapper>
             ))}
-          </StyledButtonsWrapper>
+          </FilterCarousel>
           <StyledRemoveWrapper>
             {hasSelectedFilters && (
               <Button onClick={onRemoveAllFilters} link>