@ndla/ui 50.8.0 → 50.8.2

package/lib/model/ContentType.js

@@ -12,15 +12,15 @@ exports.resourceEmbedTypeMapping = exports.contentTypes = exports.contentTypeMap
  *
  */
 
-const SUBJECT_MATERIAL = exports.SUBJECT_MATERIAL = 'subject-material';
-const TASKS_AND_ACTIVITIES = exports.TASKS_AND_ACTIVITIES = 'tasks-and-activities';
-const ASSESSMENT_RESOURCES = exports.ASSESSMENT_RESOURCES = 'assessment-resources';
-const SUBJECT = exports.SUBJECT = 'subject';
-const EXTERNAL_LEARNING_RESOURCES = exports.EXTERNAL_LEARNING_RESOURCES = 'external-learning-resources';
-const SOURCE_MATERIAL = exports.SOURCE_MATERIAL = 'source-material';
-const LEARNING_PATH = exports.LEARNING_PATH = 'learning-path';
-const TOPIC = exports.TOPIC = 'topic';
-const MULTIDISCIPLINARY_TOPIC = exports.MULTIDISCIPLINARY_TOPIC = 'multidisciplinary-topic';
+const SUBJECT_MATERIAL = exports.SUBJECT_MATERIAL = "subject-material";
+const TASKS_AND_ACTIVITIES = exports.TASKS_AND_ACTIVITIES = "tasks-and-activities";
+const ASSESSMENT_RESOURCES = exports.ASSESSMENT_RESOURCES = "assessment-resources";
+const SUBJECT = exports.SUBJECT = "subject";
+const EXTERNAL_LEARNING_RESOURCES = exports.EXTERNAL_LEARNING_RESOURCES = "external-learning-resources";
+const SOURCE_MATERIAL = exports.SOURCE_MATERIAL = "source-material";
+const LEARNING_PATH = exports.LEARNING_PATH = "learning-path";
+const TOPIC = exports.TOPIC = "topic";
+const MULTIDISCIPLINARY_TOPIC = exports.MULTIDISCIPLINARY_TOPIC = "multidisciplinary-topic";
 const contentTypes = exports.contentTypes = {
   SUBJECT_MATERIAL,
   TASKS_AND_ACTIVITIES,
@@ -32,13 +32,13 @@ const contentTypes = exports.contentTypes = {
   TOPIC,
   MULTIDISCIPLINARY_TOPIC
 };
-const RESOURCE_TYPE_LEARNING_PATH = exports.RESOURCE_TYPE_LEARNING_PATH = 'urn:resourcetype:learningPath';
-const RESOURCE_TYPE_SUBJECT_MATERIAL = exports.RESOURCE_TYPE_SUBJECT_MATERIAL = 'urn:resourcetype:subjectMaterial';
-const RESOURCE_TYPE_TASKS_AND_ACTIVITIES = exports.RESOURCE_TYPE_TASKS_AND_ACTIVITIES = 'urn:resourcetype:tasksAndActivities';
-const RESOURCE_TYPE_ASSESSMENT_RESOURCES = exports.RESOURCE_TYPE_ASSESSMENT_RESOURCES = 'urn:resourcetype:reviewResource';
-const RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = exports.RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = 'urn:resourcetype:externalResource';
-const RESOURCE_TYPE_SOURCE_MATERIAL = exports.RESOURCE_TYPE_SOURCE_MATERIAL = 'urn:resourcetype:SourceMaterial';
-const ListOfContentTypes = exports.ListOfContentTypes = ['SUBJECT_MATERIAL', 'TASKS_AND_ACTIVITIES', 'ASSESSMENT_RESOURCES', 'SUBJECT', 'EXTERNAL_LEARNING_RESOURCES', 'SOURCE_MATERIAL', 'LEARNING_PATH', 'TOPIC', 'MULTIDISIPLINARY_TOPIC'];
+const RESOURCE_TYPE_LEARNING_PATH = exports.RESOURCE_TYPE_LEARNING_PATH = "urn:resourcetype:learningPath";
+const RESOURCE_TYPE_SUBJECT_MATERIAL = exports.RESOURCE_TYPE_SUBJECT_MATERIAL = "urn:resourcetype:subjectMaterial";
+const RESOURCE_TYPE_TASKS_AND_ACTIVITIES = exports.RESOURCE_TYPE_TASKS_AND_ACTIVITIES = "urn:resourcetype:tasksAndActivities";
+const RESOURCE_TYPE_ASSESSMENT_RESOURCES = exports.RESOURCE_TYPE_ASSESSMENT_RESOURCES = "urn:resourcetype:reviewResource";
+const RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = exports.RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = "urn:resourcetype:externalResource";
+const RESOURCE_TYPE_SOURCE_MATERIAL = exports.RESOURCE_TYPE_SOURCE_MATERIAL = "urn:resourcetype:SourceMaterial";
+const ListOfContentTypes = exports.ListOfContentTypes = ["SUBJECT_MATERIAL", "TASKS_AND_ACTIVITIES", "ASSESSMENT_RESOURCES", "SUBJECT", "EXTERNAL_LEARNING_RESOURCES", "SOURCE_MATERIAL", "LEARNING_PATH", "TOPIC", "MULTIDISIPLINARY_TOPIC"];
 const contentTypeMapping = exports.contentTypeMapping = {
   [RESOURCE_TYPE_LEARNING_PATH]: LEARNING_PATH,
   [RESOURCE_TYPE_SUBJECT_MATERIAL]: SUBJECT_MATERIAL,
@@ -49,8 +49,8 @@ const contentTypeMapping = exports.contentTypeMapping = {
   default: SUBJECT_MATERIAL
 };
 const resourceEmbedTypeMapping = exports.resourceEmbedTypeMapping = {
-  image: 'image',
-  video: 'video',
-  concept: 'concept',
-  audio: 'audio'
+  image: "image",
+  video: "video",
+  concept: "concept",
+  audio: "audio"
 };

package/lib/model/SubjectCategories.js

@@ -12,7 +12,7 @@ exports.OTHER = exports.BETA_SUBJECTS = exports.ARCHIVE_SUBJECTS = exports.ACTIV
  *
  */
 
-const ACTIVE_SUBJECTS = exports.ACTIVE_SUBJECTS = 'active';
-const ARCHIVE_SUBJECTS = exports.ARCHIVE_SUBJECTS = 'archive';
-const BETA_SUBJECTS = exports.BETA_SUBJECTS = 'beta';
-const OTHER = exports.OTHER = 'otherResources';
+const ACTIVE_SUBJECTS = exports.ACTIVE_SUBJECTS = "active";
+const ARCHIVE_SUBJECTS = exports.ARCHIVE_SUBJECTS = "archive";
+const BETA_SUBJECTS = exports.BETA_SUBJECTS = "beta";
+const OTHER = exports.OTHER = "otherResources";

package/lib/model/SubjectTypes.js

@@ -12,6 +12,6 @@ exports.SUBJECT = exports.RESOURCE_COLLECTION = exports.BETA_SUBJECT = void 0;
  *
  */
 
-const BETA_SUBJECT = exports.BETA_SUBJECT = 'betaSubject';
-const SUBJECT = exports.SUBJECT = 'subject';
-const RESOURCE_COLLECTION = exports.RESOURCE_COLLECTION = 'resourceCollection';
+const BETA_SUBJECT = exports.BETA_SUBJECT = "betaSubject";
+const SUBJECT = exports.SUBJECT = "subject";
+const RESOURCE_COLLECTION = exports.RESOURCE_COLLECTION = "resourceCollection";

package/lib/model/WordClass.d.ts

@@ -20,7 +20,7 @@ export declare const wordClass: {
     modalVerb: string;
     measureWord: string;
     noun: string;
-    'noun-zh': string;
+    "noun-zh": string;
     nounPhrase: string;
     onomatopoeia: string;
     particle: string;

package/lib/model/WordClass.js

@@ -13,39 +13,39 @@ exports.wordClass = void 0;
  */
 
 const wordClass = exports.wordClass = {
-  adjective: 'adjective',
-  adverb: 'adverb',
-  properNoun: 'proper-noun',
-  auxiliary: 'auxiliary',
-  complement: 'complement',
-  conjunction: 'conjunction',
-  coverb: 'coverb',
-  determiner: 'determiner',
-  interjection: 'interjection',
-  quantifier: 'quantifier',
-  marker: 'marker',
-  modalVerb: 'modal-verb',
-  measureWord: 'measure-word',
-  noun: 'noun',
-  'noun-zh': 'noun-zh',
-  nounPhrase: 'noun-phrase',
-  onomatopoeia: 'onomatopoeia',
-  particle: 'particle',
-  demonstrative: 'demonstrative',
-  personalPronoun: 'personal-pronoun',
-  preposition: 'preposition',
-  pronoun: 'pronoun',
-  questionWord: 'question-word',
-  locationWord: 'location-word',
-  suffix: 'suffix',
-  numeral: 'numeral',
-  timeWord: 'time word',
-  timeExpression: 'time-expression',
-  stativeVerb: 'stative-verb',
-  subordinatingConjunction: 'subordinating-conjunction',
-  exclamationWord: 'exclamation-word',
-  expression: 'expression',
-  verb: 'verb',
-  verbComplement: 'verb-complement',
-  verbObject: 'verb-object'
+  adjective: "adjective",
+  adverb: "adverb",
+  properNoun: "proper-noun",
+  auxiliary: "auxiliary",
+  complement: "complement",
+  conjunction: "conjunction",
+  coverb: "coverb",
+  determiner: "determiner",
+  interjection: "interjection",
+  quantifier: "quantifier",
+  marker: "marker",
+  modalVerb: "modal-verb",
+  measureWord: "measure-word",
+  noun: "noun",
+  "noun-zh": "noun-zh",
+  nounPhrase: "noun-phrase",
+  onomatopoeia: "onomatopoeia",
+  particle: "particle",
+  demonstrative: "demonstrative",
+  personalPronoun: "personal-pronoun",
+  preposition: "preposition",
+  pronoun: "pronoun",
+  questionWord: "question-word",
+  locationWord: "location-word",
+  suffix: "suffix",
+  numeral: "numeral",
+  timeWord: "time word",
+  timeExpression: "time-expression",
+  stativeVerb: "stative-verb",
+  subordinatingConjunction: "subordinating-conjunction",
+  exclamationWord: "exclamation-word",
+  expression: "expression",
+  verb: "verb",
+  verbComplement: "verb-complement",
+  verbObject: "verb-object"
 };

package/lib/model/index.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import * as subjectCategories from './SubjectCategories';
-import * as subjectTypes from './SubjectTypes';
-import * as wordClass from './WordClass';
+import * as subjectCategories from "./SubjectCategories";
+import * as subjectTypes from "./SubjectTypes";
+import * as wordClass from "./WordClass";
 declare const model: {
     contentTypes: {
         SUBJECT_MATERIAL: string;

package/lib/types.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 declare const locales: readonly ["nb", "nn", "en", "se", "sma"];
 export type Locale = (typeof locales)[number];
 export type Link = {
@@ -107,7 +107,7 @@ export interface CoreElementsItemType extends GrepCode {
     isOembed?: boolean;
 }
 export type NotionMedia = {
-    type: 'video' | 'other';
+    type: "video" | "other";
     element: ReactNode;
 };
 export {};

package/lib/types.js

@@ -11,4 +11,4 @@ Object.defineProperty(exports, "__esModule", {
  *
  */
 
-const locales = ['nb', 'nn', 'en', 'se', 'sma'];
+const locales = ["nb", "nn", "en", "se", "sma"];

package/lib/utils/relativeUrl.js

@@ -14,24 +14,26 @@ var _i18n = require("../i18n/i18n");
  */
 
 const ENV_REGEX = /(staging|test)\.?/;
-const LANGUAGE_REGEX = new RegExp(`^\\/((?:${_i18n.supportedTranslationLanguages.join('|')})(?:$|\\/))`, '');
+const LANGUAGE_REGEX = new RegExp(`^\\/((?:${_i18n.supportedTranslationLanguages.join("|")})(?:$|\\/))`, "");
 const NDLA_URL = /(.*\.)?ndla.no.*/;
 const REPLACE_WWW = /^www\./;
 const getPossiblyRelativeUrl = (url, path) => {
   if (!path) return url;
+  // If url is a mailto link, return url as is.
+  if (url.startsWith("mailto:")) return url;
   // If not on NDLA, or if url is not a NDLA url, return url as is
   if (!NDLA_URL.test(url) || !NDLA_URL.test(path)) return url;
   //Remove environment info
-  const urlObj = new URL(url.replace(ENV_REGEX, ''));
-  const pathObj = new URL(path.replace(ENV_REGEX, ''));
+  const urlObj = new URL(url.replace(ENV_REGEX, ""));
+  const pathObj = new URL(path.replace(ENV_REGEX, ""));
   // If the host is the same, return the relative path
-  if (urlObj.hostname.replace(REPLACE_WWW, '') === pathObj.hostname.replace(REPLACE_WWW, '')) {
+  if (urlObj.hostname.replace(REPLACE_WWW, "") === pathObj.hostname.replace(REPLACE_WWW, "")) {
     // Replace the language part of the url with the language part of the path
     // If the path language part does not exist, remove it.
     const urlMatch = urlObj.pathname.match(LANGUAGE_REGEX);
     const pathMatch = pathObj.pathname.match(LANGUAGE_REGEX);
     if (urlMatch?.[1] && urlMatch?.[1] !== pathMatch?.[1]) {
-      return urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || '');
+      return urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || "");
     }
     return urlObj.pathname;
   }

package/lib/utils/resourceTypeColor.js

@@ -45,7 +45,7 @@ const resourceTypeColor = type => {
     case _ContentType.resourceEmbedTypeMapping.audio:
       return _core.colors.brand.greyLight;
     default:
-      return '';
+      return "";
   }
 };
 exports.resourceTypeColor = resourceTypeColor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.8.0",
+  "version": "50.8.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,24 +31,24 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.19",
-    "@ndla/button": "^12.0.24",
-    "@ndla/carousel": "^4.0.24",
-    "@ndla/core": "^4.3.3",
-    "@ndla/dropdown-menu": "^1.0.23",
-    "@ndla/forms": "^5.2.14",
-    "@ndla/hooks": "^2.1.4",
-    "@ndla/icons": "^5.0.3",
-    "@ndla/licenses": "^7.2.4",
-    "@ndla/modal": "^5.0.23",
-    "@ndla/notion": "^6.0.24",
-    "@ndla/safelink": "^4.1.49",
-    "@ndla/select": "^3.2.10",
-    "@ndla/switch": "^1.1.29",
-    "@ndla/tabs": "^3.2.9",
-    "@ndla/tooltip": "^6.0.11",
-    "@ndla/typography": "^0.4.6",
-    "@ndla/util": "^4.0.3",
+    "@ndla/accordion": "^3.0.21",
+    "@ndla/button": "^12.0.26",
+    "@ndla/carousel": "^4.0.26",
+    "@ndla/core": "^4.3.5",
+    "@ndla/dropdown-menu": "^1.0.25",
+    "@ndla/forms": "^5.2.16",
+    "@ndla/hooks": "^2.1.5",
+    "@ndla/icons": "^5.0.5",
+    "@ndla/licenses": "^7.2.5",
+    "@ndla/modal": "^5.0.25",
+    "@ndla/notion": "^6.0.26",
+    "@ndla/safelink": "^4.1.51",
+    "@ndla/select": "^3.2.12",
+    "@ndla/switch": "^1.1.31",
+    "@ndla/tabs": "^3.2.11",
+    "@ndla/tooltip": "^6.0.13",
+    "@ndla/typography": "^0.4.8",
+    "@ndla/util": "^4.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
     "date-fns": "^2.30.0",
@@ -71,7 +71,7 @@
   },
   "devDependencies": {
     "@ndla/types-backend": "^0.2.21",
-    "@ndla/types-embed": "^4.0.12",
+    "@ndla/types-embed": "^4.0.13",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e5630a5aabe1bb29936ed0308dc2b8e5620cf8f9"
+  "gitHead": "ca60118709ca3cd878081b8ea0d20d1100b54508"
 }

package/src/Article/Article.tsx

@@ -6,25 +6,25 @@
  *
  */
 
-import { ReactNode, useEffect, useRef, useState, forwardRef } from 'react';
-import BEMHelper from 'react-bem-helper';
-import styled from '@emotion/styled';
-
-import { spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
-import { useIntersectionObserver } from '@ndla/hooks';
-import { Heading, Text } from '@ndla/typography';
-import { resizeObserver } from '@ndla/util';
-import ArticleAccessMessage from './ArticleAccessMessage';
-import ArticleByline from './ArticleByline';
-import ArticleHeaderWrapper from './ArticleHeaderWrapper';
-import ArticleNotions from './ArticleNotions';
-import LayoutItem from '../Layout';
-import MessageBox from '../Messages/MessageBox';
-import { Article as ArticleType } from '../types';
+import { ReactNode, useEffect, useRef, useState, forwardRef } from "react";
+import BEMHelper from "react-bem-helper";
+import styled from "@emotion/styled";
+
+import { spacing, spacingUnit, mq, breakpoints } from "@ndla/core";
+import { useIntersectionObserver } from "@ndla/hooks";
+import { Heading, Text } from "@ndla/typography";
+import { resizeObserver } from "@ndla/util";
+import ArticleAccessMessage from "./ArticleAccessMessage";
+import ArticleByline from "./ArticleByline";
+import ArticleHeaderWrapper from "./ArticleHeaderWrapper";
+import ArticleNotions from "./ArticleNotions";
+import LayoutItem from "../Layout";
+import MessageBox from "../Messages/MessageBox";
+import { Article as ArticleType } from "../types";
 
 const classes = new BEMHelper({
-  name: 'article',
-  prefix: 'c-',
+  name: "article",
+  prefix: "c-",
 });
 
 type ArticleWrapperProps = {
@@ -49,7 +49,7 @@ type ArticleTitleProps = {
 export const ArticleTitle = ({ children, icon, label, id, lang }: ArticleTitleProps) => {
   const modifiers = [];
   if (icon) {
-    modifiers.push('icon');
+    modifiers.push("icon");
   }
 
   let labelView = null;
@@ -59,7 +59,7 @@ export const ArticleTitle = ({ children, icon, label, id, lang }: ArticleTitlePr
   }
 
   return (
-    <div {...classes('title', modifiers)}>
+    <div {...classes("title", modifiers)}>
       {icon}
       {labelView}
       <Heading element="h1" headingStyle="h1-resource" id={id} tabIndex={-1} lang={lang}>
@@ -130,7 +130,7 @@ const getArticleContent = (content: any, contentTransformed?: boolean) => {
     return content;
   }
   switch (typeof content) {
-    case 'function':
+    case "function":
       return content();
     default:
       return content;
@@ -156,7 +156,7 @@ export const Article = ({
   const articleRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const { entry } = useIntersectionObserver({
-    rootMargin: '400px',
+    rootMargin: "400px",
     target: articleRef.current,
     threshold: 0.1,
   });
@@ -216,7 +216,7 @@ export const Article = ({
             authors={authors}
             suppliers={copyright?.rightsholders}
             published={published}
-            license={copyright?.license?.license ?? ''}
+            license={copyright?.license?.license ?? ""}
             licenseBox={licenseBox}
           />
         </LayoutItem>

package/src/Article/ArticleAccessMessage.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import * as React from 'react';
-import styled from '@emotion/styled';
-import { colors, fonts } from '@ndla/core';
-import { HumanMaleBoard } from '@ndla/icons/common';
+import * as React from "react";
+import styled from "@emotion/styled";
+import { colors, fonts } from "@ndla/core";
+import { HumanMaleBoard } from "@ndla/icons/common";
 
 const StyledMessage = styled.span`
   position: absolute;
   top: -50px;
   color: ${colors.text.light};
-  ${fonts.sizes('14px', '18px')};
+  ${fonts.sizes("14px", "18px")};
   font-family: ${fonts.sans};
   display: flex;
   flex-direction: row;

package/src/Article/ArticleByline.stories.tsx

@@ -6,26 +6,26 @@
  *
  */
 
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 
-import ArticleByline from './ArticleByline';
-import { defaultParameters } from '../../../../stories/defaults';
+import ArticleByline from "./ArticleByline";
+import { defaultParameters } from "../../../../stories/defaults";
 
 /**
  * Innholder informasjon om forfatter(e), lisensrettigheter, beskrivelse av regler ved bruk av innhold, ikon hvis artikkel er tilleggsstoff og dato for forrige oppdatering.
  */
 export default {
-  title: 'Patterns/ArticleByline',
+  title: "Patterns/ArticleByline",
   component: ArticleByline,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     inlineStories: true,
     ...defaultParameters,
   },
   args: {
-    authors: [{ name: 'Frida Forfatter' }, { name: 'Fred Forfatter' }],
-    published: '21.06.2018',
-    license: 'CC BY-SA',
+    authors: [{ name: "Frida Forfatter" }, { name: "Fred Forfatter" }],
+    published: "21.06.2018",
+    license: "CC BY-SA",
   },
 } as Meta<typeof ArticleByline>;
 
@@ -33,20 +33,20 @@ export const ArticleBylineStory: StoryFn<typeof ArticleByline> = (args) => {
   return <ArticleByline {...args} />;
 };
 
-ArticleBylineStory.storyName = 'ArticleByline';
+ArticleBylineStory.storyName = "ArticleByline";
 
 export const SeveralAuthors: StoryObj<typeof ArticleByline> = {
   args: {
-    published: '21.06.2018',
-    license: 'CC BY-SA',
-    authors: [{ name: 'Frida Forfatter' }, { name: 'Ida Illustratør' }, { name: 'Fred Forfatter' }],
+    published: "21.06.2018",
+    license: "CC BY-SA",
+    authors: [{ name: "Frida Forfatter" }, { name: "Ida Illustratør" }, { name: "Fred Forfatter" }],
   },
 };
 
 export const WithoutCreators: StoryObj<typeof ArticleByline> = {
   args: {
-    published: '21.06.2018',
-    license: 'CC BY-SA',
+    published: "21.06.2018",
+    license: "CC BY-SA",
     authors: [],
   },
 };