@ndla/ui 32.1.0 → 33.0.0

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

@@ -295,12 +295,13 @@ declare const messages: {
         active: string;
         archive: string;
         beta: string;
+        otherResources: string;
         resourceCollection: string;
     };
     subjectTypes: {
         betaSubject: string;
-        subject: string;
         resourceCollection: string;
+        subject: string;
     };
     searchPage: {
         noHits: string;
@@ -508,6 +509,7 @@ declare const messages: {
             };
         };
         menu: {
+            goToMainMenu: string;
             close: string;
             goTo: string;
             search: string;

package/lib/locale/messages-en.js

@@ -109,8 +109,8 @@ var messages = _objectSpread(_objectSpread({
     embed: 'Embed',
     notSupported: 'It did not work to auto-insert the content. You can copy the source code and add it to your content.'
   },
-  subjectCategories: (_subjectCategories = {}, _defineProperty(_subjectCategories, subjectCategories.ACTIVE_SUBJECTS, 'Active'), _defineProperty(_subjectCategories, subjectCategories.ARCHIVE_SUBJECTS, 'Expired'), _defineProperty(_subjectCategories, subjectCategories.BETA_SUBJECTS, 'Revised'), _defineProperty(_subjectCategories, subjectTypes.RESOURCE_COLLECTION, 'Other resources'), _subjectCategories),
-  subjectTypes: (_subjectTypes = {}, _defineProperty(_subjectTypes, subjectTypes.BETA_SUBJECT, 'Betafag'), _defineProperty(_subjectTypes, subjectTypes.SUBJECT, 'Subject'), _defineProperty(_subjectTypes, subjectTypes.RESOURCE_COLLECTION, 'Resource collection'), _subjectTypes),
+  subjectCategories: (_subjectCategories = {}, _defineProperty(_subjectCategories, subjectCategories.ACTIVE_SUBJECTS, 'Active'), _defineProperty(_subjectCategories, subjectCategories.ARCHIVE_SUBJECTS, 'Expired'), _defineProperty(_subjectCategories, subjectCategories.BETA_SUBJECTS, 'Revised'), _defineProperty(_subjectCategories, subjectCategories.OTHER, 'Other resources'), _defineProperty(_subjectCategories, subjectTypes.RESOURCE_COLLECTION, 'Resource collections'), _subjectCategories),
+  subjectTypes: (_subjectTypes = {}, _defineProperty(_subjectTypes, subjectTypes.BETA_SUBJECT, 'Betafag'), _defineProperty(_subjectTypes, subjectTypes.RESOURCE_COLLECTION, 'Resource collection'), _defineProperty(_subjectTypes, subjectTypes.SUBJECT, 'Subject'), _subjectTypes),
   searchPage: {
     noHits: 'Your search - {{query}} - did not match any articles. ',
     noHitsShort: 'No results for search: {{query}}',
@@ -317,6 +317,7 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     menu: {
+      goToMainMenu: 'Go to main menu',
       close: 'Close',
       goTo: 'Go to',
       search: 'Search',

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

@@ -295,12 +295,13 @@ declare const messages: {
         active: string;
         archive: string;
         beta: string;
+        otherResources: string;
         resourceCollection: string;
     };
     subjectTypes: {
         betaSubject: string;
-        subject: string;
         resourceCollection: string;
+        subject: string;
     };
     searchPage: {
         noHits: string;
@@ -508,6 +509,7 @@ declare const messages: {
             };
         };
         menu: {
+            goToMainMenu: string;
             close: string;
             goTo: string;
             search: string;

package/lib/locale/messages-nb.js

@@ -109,8 +109,8 @@ var messages = _objectSpread(_objectSpread({
     embed: 'Sett inn',
     notSupported: 'Det fungerte ikke å sette inn innholdet automatisk. Kopier kildekoden under for å sette inn på din side.'
   },
-  subjectCategories: (_subjectCategories = {}, _defineProperty(_subjectCategories, subjectCategories.ACTIVE_SUBJECTS, 'Aktive'), _defineProperty(_subjectCategories, subjectCategories.ARCHIVE_SUBJECTS, 'Utgåtte'), _defineProperty(_subjectCategories, subjectCategories.BETA_SUBJECTS, 'Kommende'), _defineProperty(_subjectCategories, subjectTypes.RESOURCE_COLLECTION, 'Andre ressurser'), _subjectCategories),
-  subjectTypes: (_subjectTypes = {}, _defineProperty(_subjectTypes, subjectTypes.BETA_SUBJECT, 'Betafag'), _defineProperty(_subjectTypes, subjectTypes.SUBJECT, 'Fag'), _defineProperty(_subjectTypes, subjectTypes.RESOURCE_COLLECTION, 'Ressurssamling'), _subjectTypes),
+  subjectCategories: (_subjectCategories = {}, _defineProperty(_subjectCategories, subjectCategories.ACTIVE_SUBJECTS, 'Aktive'), _defineProperty(_subjectCategories, subjectCategories.ARCHIVE_SUBJECTS, 'Utgåtte'), _defineProperty(_subjectCategories, subjectCategories.BETA_SUBJECTS, 'Kommende'), _defineProperty(_subjectCategories, subjectCategories.OTHER, 'Andre ressurser'), _defineProperty(_subjectCategories, subjectTypes.RESOURCE_COLLECTION, 'Ressurssamlinger'), _subjectCategories),
+  subjectTypes: (_subjectTypes = {}, _defineProperty(_subjectTypes, subjectTypes.BETA_SUBJECT, 'Betafag'), _defineProperty(_subjectTypes, subjectTypes.RESOURCE_COLLECTION, 'Ressurssamling'), _defineProperty(_subjectTypes, subjectTypes.SUBJECT, 'Fag'), _subjectTypes),
   searchPage: {
     noHits: 'Ingen artikler samsvarte med søket ditt på: {{query}}',
     noHitsShort: 'Ingen treff på søk: {{query}}',
@@ -317,6 +317,7 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     menu: {
+      goToMainMenu: 'Gå til hovedmeny',
       close: 'Lukk',
       goTo: 'Gå til',
       search: 'Søk',

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

@@ -295,12 +295,13 @@ declare const messages: {
         active: string;
         archive: string;
         beta: string;
+        otherResources: string;
         resourceCollection: string;
     };
     subjectTypes: {
         betaSubject: string;
-        subject: string;
         resourceCollection: string;
+        subject: string;
     };
     searchPage: {
         noHits: string;
@@ -508,6 +509,7 @@ declare const messages: {
             };
         };
         menu: {
+            goToMainMenu: string;
             close: string;
             goTo: string;
             search: string;

package/lib/locale/messages-nn.js

@@ -109,8 +109,8 @@ var messages = _objectSpread(_objectSpread({
     embed: 'Sett inn',
     notSupported: 'Det fungerte ikkje å setje inn innhaldet automatisk. Kopier kjeldekoden under for å setje han inn på sida di.'
   },
-  subjectCategories: (_subjectCategories = {}, _defineProperty(_subjectCategories, subjectCategories.ACTIVE_SUBJECTS, 'Aktive'), _defineProperty(_subjectCategories, subjectCategories.ARCHIVE_SUBJECTS, 'Utgåtte'), _defineProperty(_subjectCategories, subjectCategories.BETA_SUBJECTS, 'Kommande'), _defineProperty(_subjectCategories, subjectTypes.RESOURCE_COLLECTION, 'Andre ressursar'), _subjectCategories),
-  subjectTypes: (_subjectTypes = {}, _defineProperty(_subjectTypes, subjectTypes.BETA_SUBJECT, 'Betafag'), _defineProperty(_subjectTypes, subjectTypes.SUBJECT, 'Fag'), _defineProperty(_subjectTypes, subjectTypes.RESOURCE_COLLECTION, 'Ressurssamling'), _subjectTypes),
+  subjectCategories: (_subjectCategories = {}, _defineProperty(_subjectCategories, subjectCategories.ACTIVE_SUBJECTS, 'Aktive'), _defineProperty(_subjectCategories, subjectCategories.ARCHIVE_SUBJECTS, 'Utgåtte'), _defineProperty(_subjectCategories, subjectCategories.BETA_SUBJECTS, 'Kommande'), _defineProperty(_subjectCategories, subjectCategories.OTHER, 'Andre ressursar'), _defineProperty(_subjectCategories, subjectTypes.RESOURCE_COLLECTION, 'Ressurssamlingar'), _subjectCategories),
+  subjectTypes: (_subjectTypes = {}, _defineProperty(_subjectTypes, subjectTypes.BETA_SUBJECT, 'Betafag'), _defineProperty(_subjectTypes, subjectTypes.RESOURCE_COLLECTION, 'Ressurssamling'), _defineProperty(_subjectTypes, subjectTypes.SUBJECT, 'Fag'), _subjectTypes),
   searchPage: {
     noHits: 'Ingen artiklar samsvarte med søket ditt på: {{query}}',
     noHitsShort: 'Ingen treff på søk: {{query}}',
@@ -317,6 +317,7 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     menu: {
+      goToMainMenu: 'Gå til hovedmeny',
       close: 'Lukk',
       goTo: 'Gå til',
       search: 'Søk',

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

@@ -295,12 +295,13 @@ declare const messages: {
         active: string;
         archive: string;
         beta: string;
+        otherResources: string;
         resourceCollection: string;
     };
     subjectTypes: {
         betaSubject: string;
-        subject: string;
         resourceCollection: string;
+        subject: string;
     };
     searchPage: {
         noHits: string;
@@ -508,6 +509,7 @@ declare const messages: {
             };
         };
         menu: {
+            goToMainMenu: string;
             close: string;
             goTo: string;
             search: string;

package/lib/locale/messages-se.js

@@ -109,8 +109,8 @@ var messages = _objectSpread(_objectSpread({
     embed: 'Deavdde',
     notSupported: 'Ii lean vejolaš bidjat sisdoalu sisa automáhtalaččat. Kopiere gáldokoda vulobealde ja bija iežat siidui.'
   },
-  subjectCategories: (_subjectCategories = {}, _defineProperty(_subjectCategories, subjectCategories.ACTIVE_SUBJECTS, 'Doaimmas'), _defineProperty(_subjectCategories, subjectCategories.ARCHIVE_SUBJECTS, 'Ii doaimmas šat'), _defineProperty(_subjectCategories, subjectCategories.BETA_SUBJECTS, 'Boahttevaš'), _defineProperty(_subjectCategories, subjectTypes.RESOURCE_COLLECTION, 'Eará resurssat'), _subjectCategories),
-  subjectTypes: (_subjectTypes = {}, _defineProperty(_subjectTypes, subjectTypes.BETA_SUBJECT, 'Betafága'), _defineProperty(_subjectTypes, subjectTypes.SUBJECT, 'Fága'), _defineProperty(_subjectTypes, subjectTypes.RESOURCE_COLLECTION, 'Resursačoakkáldat'), _subjectTypes),
+  subjectCategories: (_subjectCategories = {}, _defineProperty(_subjectCategories, subjectCategories.ACTIVE_SUBJECTS, 'Doaimmas'), _defineProperty(_subjectCategories, subjectCategories.ARCHIVE_SUBJECTS, 'Ii doaimmas šat'), _defineProperty(_subjectCategories, subjectCategories.BETA_SUBJECTS, 'Boahttevaš'), _defineProperty(_subjectCategories, subjectCategories.OTHER, 'Eará resurssat'), _defineProperty(_subjectCategories, subjectTypes.RESOURCE_COLLECTION, 'Resursačoakkáldat'), _subjectCategories),
+  subjectTypes: (_subjectTypes = {}, _defineProperty(_subjectTypes, subjectTypes.BETA_SUBJECT, 'Betafága'), _defineProperty(_subjectTypes, subjectTypes.RESOURCE_COLLECTION, 'Resursačoakkáldat'), _defineProperty(_subjectTypes, subjectTypes.SUBJECT, 'Fága'), _subjectTypes),
   searchPage: {
     noHits: 'Ii oktage artihkal heiven du ohcamii: {{query}}',
     noHitsShort: 'Du ohcamii ii lean deaivva: {{query}}',
@@ -317,6 +317,7 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     menu: {
+      goToMainMenu: 'Gå til hovedmeny',
       close: 'Govčča',
       goTo: 'Mana deike',
       search: 'Oza',

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

@@ -295,12 +295,13 @@ declare const messages: {
         active: string;
         archive: string;
         beta: string;
+        otherResources: string;
         resourceCollection: string;
     };
     subjectTypes: {
         betaSubject: string;
-        subject: string;
         resourceCollection: string;
+        subject: string;
     };
     searchPage: {
         noHits: string;
@@ -508,6 +509,7 @@ declare const messages: {
             };
         };
         menu: {
+            goToMainMenu: string;
             close: string;
             goTo: string;
             search: string;

package/lib/locale/messages-sma.js

@@ -109,8 +109,8 @@ var messages = _objectSpread(_objectSpread({
     embed: 'Sett inn',
     notSupported: 'Det fungerte ikke å sette inn innholdet automatisk. Kopier kildekoden under for å sette inn på din side.'
   },
-  subjectCategories: (_subjectCategories = {}, _defineProperty(_subjectCategories, subjectCategories.ACTIVE_SUBJECTS, 'Aktive'), _defineProperty(_subjectCategories, subjectCategories.ARCHIVE_SUBJECTS, 'Utgåtte'), _defineProperty(_subjectCategories, subjectCategories.BETA_SUBJECTS, 'Kommende'), _defineProperty(_subjectCategories, subjectTypes.RESOURCE_COLLECTION, 'Andre ressurser'), _subjectCategories),
-  subjectTypes: (_subjectTypes = {}, _defineProperty(_subjectTypes, subjectTypes.BETA_SUBJECT, 'Betafag'), _defineProperty(_subjectTypes, subjectTypes.SUBJECT, 'Fag'), _defineProperty(_subjectTypes, subjectTypes.RESOURCE_COLLECTION, 'Ressurssamling'), _subjectTypes),
+  subjectCategories: (_subjectCategories = {}, _defineProperty(_subjectCategories, subjectCategories.ACTIVE_SUBJECTS, 'Aktive'), _defineProperty(_subjectCategories, subjectCategories.ARCHIVE_SUBJECTS, 'Utgåtte'), _defineProperty(_subjectCategories, subjectCategories.BETA_SUBJECTS, 'Kommende'), _defineProperty(_subjectCategories, subjectCategories.OTHER, 'Andre ressurser'), _defineProperty(_subjectCategories, subjectTypes.RESOURCE_COLLECTION, 'Ressurssamlinger'), _subjectCategories),
+  subjectTypes: (_subjectTypes = {}, _defineProperty(_subjectTypes, subjectTypes.BETA_SUBJECT, 'Betafag'), _defineProperty(_subjectTypes, subjectTypes.RESOURCE_COLLECTION, 'Ressurssamling'), _defineProperty(_subjectTypes, subjectTypes.SUBJECT, 'Fag'), _subjectTypes),
   searchPage: {
     noHits: 'Ingen artikler samsvarte med søket ditt på: {{query}}',
     noHitsShort: 'Ingen treff på søk: {{query}}',
@@ -317,6 +317,7 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     menu: {
+      goToMainMenu: 'Gå til hovedmeny',
       close: 'Lukk',
       goTo: 'Gå til',
       search: 'Søk',

package/lib/model/SubjectCategories.d.ts

@@ -6,5 +6,6 @@
  *
  */
 export declare const ACTIVE_SUBJECTS = "active";
-export declare const BETA_SUBJECTS = "beta";
 export declare const ARCHIVE_SUBJECTS = "archive";
+export declare const BETA_SUBJECTS = "beta";
+export declare const OTHER = "otherResources";

package/lib/model/SubjectCategories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BETA_SUBJECTS = exports.ARCHIVE_SUBJECTS = exports.ACTIVE_SUBJECTS = void 0;
+exports.OTHER = exports.BETA_SUBJECTS = exports.ARCHIVE_SUBJECTS = exports.ACTIVE_SUBJECTS = void 0;
 /**
  * Copyright (c) 2021-present, NDLA.
  *
@@ -14,7 +14,9 @@ exports.BETA_SUBJECTS = exports.ARCHIVE_SUBJECTS = exports.ACTIVE_SUBJECTS = voi
 
 var ACTIVE_SUBJECTS = 'active';
 exports.ACTIVE_SUBJECTS = ACTIVE_SUBJECTS;
+var ARCHIVE_SUBJECTS = 'archive';
+exports.ARCHIVE_SUBJECTS = ARCHIVE_SUBJECTS;
 var BETA_SUBJECTS = 'beta';
 exports.BETA_SUBJECTS = BETA_SUBJECTS;
-var ARCHIVE_SUBJECTS = 'archive';
-exports.ARCHIVE_SUBJECTS = ARCHIVE_SUBJECTS;
+var OTHER = 'otherResources';
+exports.OTHER = OTHER;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "32.1.0",
+  "version": "33.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -39,8 +39,8 @@
     "@ndla/hooks": "^1.2.0",
     "@ndla/icons": "^2.1.0",
     "@ndla/licenses": "^6.1.0",
-    "@ndla/modal": "^2.2.0",
-    "@ndla/notion": "^4.1.0",
+    "@ndla/modal": "^2.2.1",
+    "@ndla/notion": "^4.1.1",
     "@ndla/safelink": "^3.1.0",
     "@ndla/switch": "^1.0.3",
     "@ndla/tabs": "^2.1.0",
@@ -84,5 +84,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "667f2a7add97ac50ee4e6e7c05f91623715f3ffd"
+  "gitHead": "d34999a576b5dae2af941139a85a712ca2b1e897"
 }

package/src/Article/Article.tsx

@@ -82,10 +82,10 @@ export const ArticleIntroduction = ({
   },
 }: ArticleIntroductionProps) => {
   if (isString(children)) {
-    return <p className="article_introduction">{parse(renderMarkdown(children))}</p>;
+    return <div className="article_introduction">{parse(renderMarkdown(children))}</div>;
   }
   if (children) {
-    return <p className="article_introduction">{children}</p>;
+    return <div className="article_introduction">{children}</div>;
   }
   return null;
 };

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -76,13 +76,11 @@ const MessageBoxWrapper = styled.div`
 
 type subjectProps = {
   name: string;
-  url?: string;
   path?: string;
   id?: string;
 };
 type categoryProps = {
   type?: string;
-  name?: string;
   visible?: boolean;
   message?: string;
   subjects: subjectProps[];
@@ -165,7 +163,7 @@ const renderList = (
                           onNavigate();
                         }
                       }}
-                      to={subject.url || subject.path || ''}>
+                      to={subject.path || ''}>
                       {subject.name}
                     </SafeLink>
                     <StyledSpacingElement />
@@ -213,7 +211,7 @@ const FrontpageAllSubjects = ({
     allSubjects.push(...category.subjects);
     category.visible &&
       data.push({
-        title: category.name || t(`subjectCategories.${category.type}`),
+        title: t(`subjectCategories.${category.type}`),
         content: (
           <>
             {category.message && (
@@ -221,16 +219,6 @@ const FrontpageAllSubjects = ({
                 <MessageBox>{category.message}</MessageBox>
               </MessageBoxWrapper>
             )}
-            {category.name === t('subjectCategories.beta') && (
-              <MessageBoxWrapper>
-                <MessageBox>{t('messageBoxInfo.frontPageBeta')}</MessageBox>
-              </MessageBoxWrapper>
-            )}
-            {category.name === t('subjectCategories.archive') && (
-              <MessageBoxWrapper>
-                <MessageBox>{t('messageBoxInfo.frontPageExpired')}</MessageBox>
-              </MessageBoxWrapper>
-            )}
             {renderList(category.subjects, onNavigate, onToggleSubject, subjectViewType, selectedSubjects)}
           </>
         ),

package/src/Image/Image.tsx

@@ -39,6 +39,8 @@ const getSrcSet = (src: string, crop: ImageCrop | undefined, focalPoint: ImageFo
 
 const StyledImageWrapper = styled.div`
   position: relative;
+  width: 100%;
+  height: 100%;
 `;
 interface Props {
   alt: string;

package/src/Image/ImageLink.tsx

@@ -13,6 +13,8 @@ import { ImageCrop, ImageFocalPoint } from '.';
 
 const StyledLink = styled.a`
   box-shadow: inset 0 0;
+  width: 100%;
+  height: 100%;
 `;
 
 interface Props {

package/src/Image/__tests__/__snapshots__/Image-test.jsx.snap

@@ -3,6 +3,8 @@
 exports[`Image renderers correctly 1`] = `
 .emotion-0 {
   position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 <div
@@ -24,6 +26,8 @@ exports[`Image renderers correctly 1`] = `
 exports[`Image with crop and focalpoint props renderers correctly 1`] = `
 .emotion-0 {
   position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 <div
@@ -45,6 +49,8 @@ exports[`Image with crop and focalpoint props renderers correctly 1`] = `
 exports[`Lazyloaded image renderers correctly 1`] = `
 .emotion-0 {
   position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 <div

package/src/MyNdla/Resource/Folder.stories.mdx

@@ -0,0 +1,52 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { defaultParameters } from '../../../../designmanual/stories/defaults';
+import { Pencil } from '@ndla/icons/action';
+import { DeleteForever } from '@ndla/icons/editor';
+
+import Folder from './Folder';
+import ButtonV2 from '../../../../button/src/ButtonV2';
+
+<Meta
+  title="Enkle komponenter/Mappe"
+  component={Folder}
+  parameters={{
+    ...defaultParameters,
+    docs: {
+      inlineStories: true,
+    },
+    backgrounds: {},
+  }}
+  argTypes={{
+    menuItems: {
+      control: false,
+    },
+  }}
+/>
+
+export const Template = (args) => <Folder {...args} />;
+
+# Mappe
+
+<Canvas>
+  <Story
+    name="Mappe"
+    args={{
+      id: '3d88300c-1186-47f5-a99a-8ea93fa20981',
+      title: 'Dette er min tittel',
+      subFolders: 3,
+      subResources: 3,
+      description: '',
+      link: '',
+      type: 'list',
+      menuItems: [
+        { icon: <Pencil />, text: 'Rediger', onClick: () => {} },
+        { icon: <DeleteForever />, text: 'Slett', onClick: () => {}, type: 'danger' },
+      ],
+    }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable story="Mappe" />

package/src/Resource/BlockResource.stories.mdx

@@ -0,0 +1,58 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { defaultParameters } from '../../../designmanual/stories/defaults';
+import { Pencil } from '@ndla/icons/action';
+import { DeleteForever } from '@ndla/icons/editor';
+
+import BlockResource from './BlockResource';
+
+<Meta
+  title="Enkle komponenter/Ressurser/BlockResource"
+  component={BlockResource}
+  parameters={{
+    ...defaultParameters,
+    docs: {
+      inlineStories: true,
+    },
+    backgrounds: {},
+  }}
+  argTypes={{
+    resourceImage: {
+      control: false,
+    },
+    resourceTypes: {
+      control: false,
+    },
+    headingLevel: {
+      control: false,
+    },
+    menuItems: {
+      control: false,
+    },
+  }}
+/>
+
+export const Template = (args) => <BlockResource {...args} />;
+
+# Blokkressurs
+
+<Canvas>
+  <Story
+    name="BlockResource"
+    args={{
+      id: '1234',
+      link: '',
+      title: 'Tittel til ressurs',
+      resourceImage: {
+        src: '',
+        alt: '',
+      },
+      resourceTypes: [{ id: 'urn:resourcetype:learningPath', name: 'Læringssti' }],
+      tags: ['tag', 'tag', 'tag', 'tag'],
+    }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable story="BlockResource" />

package/src/Resource/Resource.stories.mdx

@@ -0,0 +1,58 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { defaultParameters } from '../../../designmanual/stories/defaults';
+import { Pencil } from '@ndla/icons/action';
+import { DeleteForever } from '@ndla/icons/editor';
+
+import ListResource from './ListResource';
+
+<Meta
+  title="Enkle komponenter/Ressurser/ListResource"
+  component={ListResource}
+  parameters={{
+    ...defaultParameters,
+    docs: {
+      inlineStories: true,
+    },
+    backgrounds: {},
+  }}
+  argTypes={{
+    resourceImage: {
+      control: false,
+    },
+    resourceTypes: {
+      control: false,
+    },
+    headingLevel: {
+      control: false,
+    },
+    menuItems: {
+      control: false,
+    },
+  }}
+/>
+
+export const Template = (args) => <ListResource {...args} />;
+
+# Standard ressurs
+
+<Canvas>
+  <Story
+    name="ListResource"
+    args={{
+      id: '1234',
+      link: '',
+      title: 'Tittel til ressurs',
+      resourceImage: {
+        src: '',
+        alt: '',
+      },
+      resourceTypes: [{ id: 'urn:resourcetype:learningPath', name: 'Læringssti' }],
+      tags: ['tag', 'tag', 'tag', 'tag'],
+    }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Props
+
+<ArgsTable story="ListResource" />

package/src/SearchTypeResult/components/ItemTopicHeader.tsx

@@ -54,6 +54,7 @@ const TopicHeaderVisualElementWrapper = styled.div`
   align-items: center;
   overflow: hidden;
   border-radius: 50%;
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
 `;
 
 const TopicHeaderImage = styled.img`

package/src/index.ts

@@ -128,6 +128,8 @@ export { UserInfo } from './User';
 export { default as AuthModal } from './User';
 export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser } from './User';
 
+export { default as resourceTypeColor } from './utils/resourceTypeColor';
+
 export { default as CreatedBy } from './CreatedBy';
 
 export { default as Breadcrumblist } from './Breadcrumblist';

package/src/locale/messages-en.ts

@@ -110,12 +110,13 @@ const messages = {
     [subjectCategories.ACTIVE_SUBJECTS]: 'Active',
     [subjectCategories.ARCHIVE_SUBJECTS]: 'Expired',
     [subjectCategories.BETA_SUBJECTS]: 'Revised',
-    [subjectTypes.RESOURCE_COLLECTION]: 'Other resources',
+    [subjectCategories.OTHER]: 'Other resources',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Resource collections',
   },
   subjectTypes: {
     [subjectTypes.BETA_SUBJECT]: 'Betafag',
-    [subjectTypes.SUBJECT]: 'Subject',
     [subjectTypes.RESOURCE_COLLECTION]: 'Resource collection',
+    [subjectTypes.SUBJECT]: 'Subject',
   },
   searchPage: {
     noHits: 'Your search - {{query}} - did not match any articles. ',
@@ -327,6 +328,7 @@ const messages = {
       },
     },
     menu: {
+      goToMainMenu: 'Go to main menu',
       close: 'Close',
       goTo: 'Go to',
       search: 'Search',

package/src/locale/messages-nb.ts

@@ -110,12 +110,13 @@ const messages = {
     [subjectCategories.ACTIVE_SUBJECTS]: 'Aktive',
     [subjectCategories.ARCHIVE_SUBJECTS]: 'Utgåtte',
     [subjectCategories.BETA_SUBJECTS]: 'Kommende',
-    [subjectTypes.RESOURCE_COLLECTION]: 'Andre ressurser',
+    [subjectCategories.OTHER]: 'Andre ressurser',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Ressurssamlinger',
   },
   subjectTypes: {
     [subjectTypes.BETA_SUBJECT]: 'Betafag',
-    [subjectTypes.SUBJECT]: 'Fag',
     [subjectTypes.RESOURCE_COLLECTION]: 'Ressurssamling',
+    [subjectTypes.SUBJECT]: 'Fag',
   },
   searchPage: {
     noHits: 'Ingen artikler samsvarte med søket ditt på: {{query}}',
@@ -326,6 +327,7 @@ const messages = {
       },
     },
     menu: {
+      goToMainMenu: 'Gå til hovedmeny',
       close: 'Lukk',
       goTo: 'Gå til',
       search: 'Søk',

package/src/locale/messages-nn.ts

@@ -110,12 +110,13 @@ const messages = {
     [subjectCategories.ACTIVE_SUBJECTS]: 'Aktive',
     [subjectCategories.ARCHIVE_SUBJECTS]: 'Utgåtte',
     [subjectCategories.BETA_SUBJECTS]: 'Kommande',
-    [subjectTypes.RESOURCE_COLLECTION]: 'Andre ressursar',
+    [subjectCategories.OTHER]: 'Andre ressursar',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Ressurssamlingar',
   },
   subjectTypes: {
     [subjectTypes.BETA_SUBJECT]: 'Betafag',
-    [subjectTypes.SUBJECT]: 'Fag',
     [subjectTypes.RESOURCE_COLLECTION]: 'Ressurssamling',
+    [subjectTypes.SUBJECT]: 'Fag',
   },
   searchPage: {
     noHits: 'Ingen artiklar samsvarte med søket ditt på: {{query}}',
@@ -326,6 +327,7 @@ const messages = {
       },
     },
     menu: {
+      goToMainMenu: 'Gå til hovedmeny',
       close: 'Lukk',
       goTo: 'Gå til',
       search: 'Søk',