@ndla/ui 48.0.0 → 49.0.1

package/lib/i18n/i18n.d.ts

@@ -1,2 +1,3 @@
+export declare const supportedTranslationLanguages: readonly ["nb", "nn", "en", "se", "sma"];
 declare const i18nInstance: import("i18next").i18n;
 export { i18nInstance };

package/lib/i18n/i18n.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.i18nInstance = void 0;
+exports.supportedTranslationLanguages = exports.i18nInstance = void 0;
 var _i18next = _interopRequireDefault(require("i18next"));
 var _reactI18next = require("react-i18next");
 var _i18nextBrowserLanguagedetector = _interopRequireDefault(require("i18next-browser-languagedetector"));
@@ -26,13 +26,15 @@ var DETECTION_OPTIONS = {
   caches: ['localStorage'],
   lookupLocalStorage: 'i18nextLng'
 };
+var supportedTranslationLanguages = ['nb', 'nn', 'en', 'se', 'sma'];
+exports.supportedTranslationLanguages = supportedTranslationLanguages;
 var i18nInstance = _i18next.default.use(_reactI18next.initReactI18next).use(_i18nextBrowserLanguagedetector.default);
 exports.i18nInstance = i18nInstance;
 i18nInstance.init({
   compatibilityJSON: 'v3',
   detection: DETECTION_OPTIONS,
   fallbackLng: 'nb',
-  supportedLngs: ['nb', 'nn', 'en', 'se', 'sma'],
+  supportedLngs: supportedTranslationLanguages,
   resources: {
     en: {
       translation: _messagesEn.default

package/lib/index.d.ts

@@ -10,40 +10,38 @@ export { default as FramedContent } from './FramedContent';
 export { default as SectionHeading } from './SectionHeading';
 export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, } from './Embed';
 export { ArticleByline, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, default as Article, } from './Article';
+export { getPossiblyRelativeUrl } from './utils/relativeUrl';
 export { default as Table, TableStyling } from './Table';
 export { default as ResourcesWrapper, ResourcesTopicTitle } from './ResourcesWrapper';
 export { default as NoContentBox } from './NoContentBox';
 export { default as Masthead, getMastheadHeight, useMastheadHeight, SkipToMainContent } from './Masthead';
 export { default as ContentLoader } from './ContentLoader';
-export { default as RelatedArticleList, RelatedArticle, RelatedArticleListV2 } from './RelatedArticleList';
+export { default as RelatedArticleList, RelatedArticle } from './RelatedArticleList';
 export { ErrorResourceAccessDenied, default as ErrorMessage } from './ErrorMessage';
-export { default as FileList, File, FileListV2, FileV2, PdfFile } from './FileList';
+export { default as FileList, File, PdfFile } from './FileList';
 export { default as Logo } from './Logo';
-export { default as FactBox, FactBoxV2 } from './FactBox';
+export { default as FactBox } from './FactBox';
 export { default as Image, ImageLink, makeSrcQueryString } from './Image';
 export type { ImageCrop, ImageFocalPoint } from './Image';
 export type { HeroContentType } from './Hero';
 export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero, HeroContent, } from './Hero';
 export { FilterList, FilterListPhone, FilterButtons, ToggleItem } from './Filter';
 export { Footer, EditorName, FooterText } from './Footer';
-export { Figure, FigureExpandButton, FigureOpenDialogButton, FigureBylineExpandButton } from './Figure';
+export { Figure, FigureOpenDialogButton } from './Figure';
 export type { FigureType } from './Figure';
 export { LanguageSelector } from './LanguageSelector';
 export { LearningPathWrapper, LearningPathContent, LearningPathMenu, LearningPathSticky, LearningPathInformation, LearningPathStickySibling, LearningPathStickyPlaceholder, LearningPathLastStepNavigation, LearningPathMobileStepInfo, LearningPathMobileHeader, } from './LearningPaths';
-export { Translation, TranslationLine } from './Translation';
 export { default as SearchResultSleeve } from './Search/SearchResultSleeve';
 export { default as ContentTypeResult } from './Search/ContentTypeResult';
 export { SearchFieldForm } from './Search/SearchFieldForm';
-export { default as MastheadSearchModal } from './Masthead/MastheadSearchModal';
 export { default as resourceTypeColor } from './utils/resourceTypeColor';
 export { default as CreatedBy } from './CreatedBy';
-export { MessageBox, MessageBoxTag, MessageBanner } from './Messages';
+export { MessageBox, MessageBanner } from './Messages';
 export { ResourceBox } from './ResourceBox';
 export { default as AudioPlayer } from './AudioPlayer';
-export { NavigationBox, NavigationTopicAbout } from './Navigation';
+export { NavigationBox } from './Navigation';
 export { default as Programme } from './Programme';
 export { default as CompetenceGoalTab } from './CompetenceGoalTab';
-export { default as MultidisciplinarySubject } from './MultidisciplinarySubject';
 export { SearchTypeResult, SearchHeader, SearchFieldHeader, SearchNotionsResult, SearchSubjectResult, SearchFilterContent, } from './SearchTypeResult';
 export { default as constants } from './model';
 export { default as messagesNB } from './locale/messages-nb';
@@ -66,7 +64,7 @@ export { MediaList, MediaListItem, MediaListItemBody, MediaListItemActions, Medi
 export type { ItemType } from './MediaList';
 export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, ExternalLearningResourcesBadge, SourceMaterialBadge, } from './ContentTypeBadge';
 export { SubjectHeader, SubjectBanner } from './Subject';
-export { default as CopyParagraphButton, CopyParagraphButtonV2 } from './CopyParagraphButton';
+export { default as CopyParagraphButton } from './CopyParagraphButton';
 export { default as ContentPlaceholder } from './ContentPlaceholder';
 export { Notion } from './Notion';
 export { BannerCard } from './BannerCard';
@@ -79,14 +77,14 @@ export { SnackbarProvider, useSnack, BaseSnack, DefaultSnackbar } from './SnackB
 export type { Snack, SnackContext } from './SnackBar';
 export { TreeStructure } from './TreeStructure';
 export type { TreeStructureProps } from './TreeStructure';
-export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';
+export { SearchField, SearchResultList, SearchResultItem, ActiveFilters } from './Search';
 export { default as LetterFilter } from './LetterFilter';
 export { OrderedList, UnOrderedList } from './List';
 export { BlogPostV2 } from './BlogPost';
 export { ProgrammeCard } from './ProgrammeCard';
 export { KeyFigure } from './KeyFigure';
 export { default as ContactBlock } from './ContactBlock';
-export type { HeartButtonType } from './Embed';
+export type { HeartButtonType, RenderContext } from './Embed';
 export { CampaignBlock } from './CampaignBlock';
 export { Grid, GridParallaxItem } from './Grid';
 export type { GridType } from './Grid';

package/lib/index.js

@@ -214,12 +214,6 @@ Object.defineProperty(exports, "CopyParagraphButton", {
     return _CopyParagraphButton.default;
   }
 });
-Object.defineProperty(exports, "CopyParagraphButtonV2", {
-  enumerable: true,
-  get: function get() {
-    return _CopyParagraphButton.CopyParagraphButtonV2;
-  }
-});
 Object.defineProperty(exports, "CreatedBy", {
   enumerable: true,
   get: function get() {
@@ -304,30 +298,12 @@ Object.defineProperty(exports, "FactBox", {
     return _FactBox.default;
   }
 });
-Object.defineProperty(exports, "FactBoxV2", {
-  enumerable: true,
-  get: function get() {
-    return _FactBox.FactBoxV2;
-  }
-});
 Object.defineProperty(exports, "Figure", {
   enumerable: true,
   get: function get() {
     return _Figure.Figure;
   }
 });
-Object.defineProperty(exports, "FigureBylineExpandButton", {
-  enumerable: true,
-  get: function get() {
-    return _Figure.FigureBylineExpandButton;
-  }
-});
-Object.defineProperty(exports, "FigureExpandButton", {
-  enumerable: true,
-  get: function get() {
-    return _Figure.FigureExpandButton;
-  }
-});
 Object.defineProperty(exports, "FigureOpenDialogButton", {
   enumerable: true,
   get: function get() {
@@ -346,18 +322,6 @@ Object.defineProperty(exports, "FileList", {
     return _FileList.default;
   }
 });
-Object.defineProperty(exports, "FileListV2", {
-  enumerable: true,
-  get: function get() {
-    return _FileList.FileListV2;
-  }
-});
-Object.defineProperty(exports, "FileV2", {
-  enumerable: true,
-  get: function get() {
-    return _FileList.FileV2;
-  }
-});
 Object.defineProperty(exports, "FilmMovieList", {
   enumerable: true,
   get: function get() {
@@ -634,12 +598,6 @@ Object.defineProperty(exports, "Masthead", {
     return _Masthead.default;
   }
 });
-Object.defineProperty(exports, "MastheadSearchModal", {
-  enumerable: true,
-  get: function get() {
-    return _MastheadSearchModal.default;
-  }
-});
 Object.defineProperty(exports, "MediaList", {
   enumerable: true,
   get: function get() {
@@ -688,36 +646,18 @@ Object.defineProperty(exports, "MessageBox", {
     return _Messages.MessageBox;
   }
 });
-Object.defineProperty(exports, "MessageBoxTag", {
-  enumerable: true,
-  get: function get() {
-    return _Messages.MessageBoxTag;
-  }
-});
 Object.defineProperty(exports, "MovieGrid", {
   enumerable: true,
   get: function get() {
     return _NDLAFilm.MovieGrid;
   }
 });
-Object.defineProperty(exports, "MultidisciplinarySubject", {
-  enumerable: true,
-  get: function get() {
-    return _MultidisciplinarySubject.default;
-  }
-});
 Object.defineProperty(exports, "NavigationBox", {
   enumerable: true,
   get: function get() {
     return _Navigation.NavigationBox;
   }
 });
-Object.defineProperty(exports, "NavigationTopicAbout", {
-  enumerable: true,
-  get: function get() {
-    return _Navigation.NavigationTopicAbout;
-  }
-});
 Object.defineProperty(exports, "NdlaFilmHero", {
   enumerable: true,
   get: function get() {
@@ -790,12 +730,6 @@ Object.defineProperty(exports, "RelatedArticleList", {
     return _RelatedArticleList.default;
   }
 });
-Object.defineProperty(exports, "RelatedArticleListV2", {
-  enumerable: true,
-  get: function get() {
-    return _RelatedArticleList.RelatedArticleListV2;
-  }
-});
 Object.defineProperty(exports, "RelatedContentEmbed", {
   enumerable: true,
   get: function get() {
@@ -994,12 +928,6 @@ Object.defineProperty(exports, "ToggleItem", {
     return _Filter.ToggleItem;
   }
 });
-Object.defineProperty(exports, "ToggleSearchButton", {
-  enumerable: true,
-  get: function get() {
-    return _Search.ToggleSearchButton;
-  }
-});
 Object.defineProperty(exports, "ToolboxInfo", {
   enumerable: true,
   get: function get() {
@@ -1012,18 +940,6 @@ Object.defineProperty(exports, "Topic", {
     return _Topic.default;
   }
 });
-Object.defineProperty(exports, "Translation", {
-  enumerable: true,
-  get: function get() {
-    return _Translation.Translation;
-  }
-});
-Object.defineProperty(exports, "TranslationLine", {
-  enumerable: true,
-  get: function get() {
-    return _Translation.TranslationLine;
-  }
-});
 Object.defineProperty(exports, "TreeStructure", {
   enumerable: true,
   get: function get() {
@@ -1066,6 +982,12 @@ Object.defineProperty(exports, "getMastheadHeight", {
     return _Masthead.getMastheadHeight;
   }
 });
+Object.defineProperty(exports, "getPossiblyRelativeUrl", {
+  enumerable: true,
+  get: function get() {
+    return _relativeUrl.getPossiblyRelativeUrl;
+  }
+});
 Object.defineProperty(exports, "i18nInstance", {
   enumerable: true,
   get: function get() {
@@ -1131,6 +1053,7 @@ var _FramedContent = _interopRequireDefault(require("./FramedContent"));
 var _SectionHeading = _interopRequireDefault(require("./SectionHeading"));
 var _Embed = require("./Embed");
 var _Article = _interopRequireWildcard(require("./Article"));
+var _relativeUrl = require("./utils/relativeUrl");
 var _Table = _interopRequireWildcard(require("./Table"));
 var _ResourcesWrapper = _interopRequireWildcard(require("./ResourcesWrapper"));
 var _NoContentBox = _interopRequireDefault(require("./NoContentBox"));
@@ -1140,7 +1063,7 @@ var _RelatedArticleList = _interopRequireWildcard(require("./RelatedArticleList"
 var _ErrorMessage = _interopRequireWildcard(require("./ErrorMessage"));
 var _FileList = _interopRequireWildcard(require("./FileList"));
 var _Logo = _interopRequireDefault(require("./Logo"));
-var _FactBox = _interopRequireWildcard(require("./FactBox"));
+var _FactBox = _interopRequireDefault(require("./FactBox"));
 var _Image = _interopRequireWildcard(require("./Image"));
 var _Hero = require("./Hero");
 var _Filter = require("./Filter");
@@ -1148,11 +1071,9 @@ var _Footer = require("./Footer");
 var _Figure = require("./Figure");
 var _LanguageSelector = require("./LanguageSelector");
 var _LearningPaths = require("./LearningPaths");
-var _Translation = require("./Translation");
 var _SearchResultSleeve = _interopRequireDefault(require("./Search/SearchResultSleeve"));
 var _ContentTypeResult = _interopRequireDefault(require("./Search/ContentTypeResult"));
 var _SearchFieldForm = require("./Search/SearchFieldForm");
-var _MastheadSearchModal = _interopRequireDefault(require("./Masthead/MastheadSearchModal"));
 var _resourceTypeColor = _interopRequireDefault(require("./utils/resourceTypeColor"));
 var _CreatedBy = _interopRequireDefault(require("./CreatedBy"));
 var _Messages = require("./Messages");
@@ -1161,7 +1082,6 @@ var _AudioPlayer = _interopRequireDefault(require("./AudioPlayer"));
 var _Navigation = require("./Navigation");
 var _Programme = _interopRequireDefault(require("./Programme"));
 var _CompetenceGoalTab = _interopRequireDefault(require("./CompetenceGoalTab"));
-var _MultidisciplinarySubject = _interopRequireDefault(require("./MultidisciplinarySubject"));
 var _SearchTypeResult = require("./SearchTypeResult");
 var _model = _interopRequireDefault(require("./model"));
 var _messagesNb = _interopRequireDefault(require("./locale/messages-nb"));
@@ -1181,7 +1101,7 @@ var _NDLAFilm = require("./NDLAFilm");
 var _MediaList = require("./MediaList");
 var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
 var _Subject = require("./Subject");
-var _CopyParagraphButton = _interopRequireWildcard(require("./CopyParagraphButton"));
+var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
 var _ContentPlaceholder = _interopRequireDefault(require("./ContentPlaceholder"));
 var _Notion = require("./Notion");
 var _BannerCard = require("./BannerCard");

package/lib/utils/relativeUrl.d.ts

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export declare const usePossiblyRelativeUrl: (url: string, path?: string) => string;
+export declare const getPossiblyRelativeUrl: (url: string, path?: string) => string;

package/lib/utils/relativeUrl.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.usePossiblyRelativeUrl = void 0;
+exports.getPossiblyRelativeUrl = void 0;
+var _i18n = require("../i18n/i18n");
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -13,13 +14,27 @@ exports.usePossiblyRelativeUrl = void 0;
  */
 
 var ENV_REGEX = /(staging|test)\.?/;
+var LANGUAGE_REGEX = new RegExp("^\\/((?:".concat(_i18n.supportedTranslationLanguages.join('|'), ")(?:$|\\/))"), '');
 var NDLA_URL = /(.*\.)?ndla.no.*/;
-var usePossiblyRelativeUrl = function usePossiblyRelativeUrl(url, path) {
+var REPLACE_WWW = /^www\./;
+var getPossiblyRelativeUrl = function getPossiblyRelativeUrl(url, path) {
   if (!path) 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
   var urlObj = new URL(url.replace(ENV_REGEX, ''));
   var pathObj = new URL(path.replace(ENV_REGEX, ''));
-  if (urlObj.host === pathObj.host) return urlObj.pathname;
+  // If the host is the same, return the relative path
+  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.
+    var urlMatch = urlObj.pathname.match(LANGUAGE_REGEX);
+    var pathMatch = pathObj.pathname.match(LANGUAGE_REGEX);
+    if (urlMatch !== null && urlMatch !== void 0 && urlMatch[1] && (urlMatch === null || urlMatch === void 0 ? void 0 : urlMatch[1]) !== (pathMatch === null || pathMatch === void 0 ? void 0 : pathMatch[1])) {
+      return urlObj.pathname.replace(urlMatch[1], (pathMatch === null || pathMatch === void 0 ? void 0 : pathMatch[1]) || '');
+    }
+    return urlObj.pathname;
+  }
   return url;
 };
-exports.usePossiblyRelativeUrl = usePossiblyRelativeUrl;
+exports.getPossiblyRelativeUrl = getPossiblyRelativeUrl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "48.0.0",
+  "version": "49.0.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.0",
-    "@ndla/button": "^12.0.6",
-    "@ndla/carousel": "^4.0.9",
-    "@ndla/core": "^4.2.3",
-    "@ndla/dropdown-menu": "^1.0.12",
-    "@ndla/forms": "^5.0.8",
+    "@ndla/accordion": "^3.0.2",
+    "@ndla/button": "^12.0.8",
+    "@ndla/carousel": "^4.0.10",
+    "@ndla/core": "^4.2.4",
+    "@ndla/dropdown-menu": "^1.0.13",
+    "@ndla/forms": "^5.0.10",
     "@ndla/hooks": "^2.1.1",
-    "@ndla/icons": "^4.1.4",
+    "@ndla/icons": "^4.1.5",
     "@ndla/licenses": "^7.2.2",
-    "@ndla/modal": "^5.0.6",
-    "@ndla/notion": "^6.0.8",
-    "@ndla/safelink": "^4.1.31",
-    "@ndla/select": "^3.1.4",
-    "@ndla/switch": "^1.1.18",
-    "@ndla/tabs": "^3.1.3",
-    "@ndla/tooltip": "^5.0.6",
-    "@ndla/typography": "^0.2.5",
+    "@ndla/modal": "^5.0.7",
+    "@ndla/notion": "^6.0.10",
+    "@ndla/safelink": "^4.1.33",
+    "@ndla/select": "^3.1.5",
+    "@ndla/switch": "^1.1.19",
+    "@ndla/tabs": "^3.1.4",
+    "@ndla/tooltip": "^6.0.1",
+    "@ndla/typography": "^0.2.6",
     "@ndla/util": "^4.0.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ed966f21f13cb62868b6aa70406c9acf8234bc75"
+  "gitHead": "613a1b7bd697142fdcee7cca42c743f4c2431a40"
 }

package/src/BlogPost/BlogPost.tsx

@@ -12,7 +12,7 @@ import SafeLink from '@ndla/safelink';
 import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
 import { HeadingLevel } from '@ndla/typography';
 import { useTranslation } from 'react-i18next';
-import { usePossiblyRelativeUrl } from '../utils/relativeUrl';
+import { getPossiblyRelativeUrl } from '../utils/relativeUrl';
 
 export interface Props {
   title: {
@@ -84,7 +84,7 @@ const StyledImg = styled.img`
 
 const BlogPost = ({ title, author, url, metaImage, headingLevel: Heading = 'h3', size = 'normal', path }: Props) => {
   const { t } = useTranslation();
-  const href = usePossiblyRelativeUrl(url, path);
+  const href = getPossiblyRelativeUrl(url, path);
   return (
     <Container data-size={size} to={href}>
       <Heading className="blog-title" css={headingCss} lang={title.language}>

package/src/CampaignBlock/CampaignBlock.tsx

@@ -12,7 +12,7 @@ import SafeLink from '@ndla/safelink';
 import { Forward } from '@ndla/icons/common';
 import { breakpoints, colors, fonts, spacing, mq, misc } from '@ndla/core';
 import { HeadingLevel } from '@ndla/typography';
-import { usePossiblyRelativeUrl } from '../utils/relativeUrl';
+import { getPossiblyRelativeUrl } from '../utils/relativeUrl';
 
 interface Image {
   src: string;
@@ -94,7 +94,7 @@ const CampaignBlock = ({
   path,
   className,
 }: Props) => {
-  const href = usePossiblyRelativeUrl(url.url, path);
+  const href = getPossiblyRelativeUrl(url.url, path);
   return (
     <Container className={className} data-type="campaign-block" data-image-side={imageSide}>
       {image && <StyledImg src={image.src} height={200} width={240} alt={image.alt} />}

package/src/ContactBlock/ContactBlock.tsx

@@ -6,15 +6,17 @@
  *
  */
 
+import { useTranslation } from 'react-i18next';
+import concat from 'lodash/concat';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IImageMetaInformationV3 } from '@ndla/types-backend/image-api';
 import { spacing, fonts, colors, mq, breakpoints, misc } from '@ndla/core';
 import { BlobPointy, BlobRound } from '@ndla/icons/common';
-import { useTranslation } from 'react-i18next';
-import concat from 'lodash/concat';
+import { getLicenseByAbbreviation } from '@ndla/licenses';
 import { errorSvgSrc } from '../Embed/ImageEmbed';
 import Image from '../Image';
+import LicenseLink from '../LicenseByline/LicenseLink';
 
 const BLOB_WIDTH = 90;
 
@@ -137,10 +139,13 @@ const ContactBlock = ({
   blob = 'pointy',
   lang,
 }: Props) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const isGreenBlob = blobColor === 'green';
   const Blob = blob === 'pointy' ? BlobPointy : BlobRound;
   const authors = concat(image?.copyright.processors, image?.copyright.creators, image?.copyright.rightsholders);
+  const license = image?.copyright
+    ? getLicenseByAbbreviation(image.copyright.license.license, i18n.language)
+    : undefined;
 
   return (
     <BlockWrapper>
@@ -152,9 +157,10 @@ const ContactBlock = ({
               src={image.image.imageUrl}
               sizes={`(min-width: ${breakpoints.tablet}) 240px, (max-width: ${breakpoints.tablet}) 500px`}
             />
-            {`${t('photo')}: ${authors.reduce((acc, name) => (acc = `${acc} ${name?.name}`), '')}  ${
-              image.copyright.license.license
-            }`}
+            <span>
+              {`${t('photo')}: ${authors.reduce((acc, name) => (acc = `${acc} ${name?.name}`), '')} `}
+              {!!license && <LicenseLink license={license} asLink={!!license.url.length} />}
+            </span>
           </>
         ) : (
           <img alt={t('image.error.url')} src={errorSvgSrc} />

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -6,19 +6,17 @@
  *
  */
 
-import { useEffect, useState, MouseEvent } from 'react';
-
-import styled from '@emotion/styled';
-import { Link } from '@ndla/icons/common';
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { colors } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
+import { Link } from '@ndla/icons/common';
 import { copyTextToClipboard } from '@ndla/util';
-import { colors } from '@ndla/core';
 
 const ContainerDiv = styled.div`
   position: relative;
 `;
-
 const IconButton = styled.button`
   position: absolute;
   left: -3em;
@@ -43,63 +41,43 @@ const IconButton = styled.button`
 `;
 
 interface Props {
-  title?: string | null;
-  content?: string | null;
-  hydrate?: boolean;
-}
-
-interface CopyButtonProps {
-  title: string;
-  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-  tooltip: string;
-  content?: string | null;
+  // What to render within the h2
+  children: ReactNode;
+  copyText: string;
+  lang?: string;
 }
-
-const CopyButton = ({ onClick, title, tooltip, content }: CopyButtonProps) => {
-  return (
-    <div>
-      <Tooltip tooltip={tooltip}>
-        <IconButton onClick={onClick} data-title={title} aria-label={`${tooltip}: ${content}`}>
-          <Link title={''} />
-        </IconButton>
-      </Tooltip>
-      <h2 id={title} tabIndex={-1} dangerouslySetInnerHTML={{ __html: content || '' }} />
-    </div>
-  );
-};
-
-const CopyParagraphButton = ({ title, content, hydrate }: Props) => {
-  const { t } = useTranslation();
+const CopyParagraphButton = ({ children, copyText, lang }: Props) => {
   const [hasCopied, setHasCopied] = useState(false);
+  const { t } = useTranslation();
+  const sanitizedTitle = useMemo(() => encodeURIComponent(copyText.replace(/ /g, '-')), [copyText]);
+
   useEffect(() => {
     if (hasCopied) {
       setTimeout(() => setHasCopied(false), 3000);
     }
   }, [hasCopied]);
 
-  if (!title) return null;
-
-  const onCopyClick = (event: MouseEvent<HTMLButtonElement>): void => {
+  const onCopyClick = useCallback(() => {
     setHasCopied(true);
-    const copyId = event.currentTarget.getAttribute('data-title');
     const { location } = window;
-    const newHash = `#${copyId}`;
+    const newHash = `#${sanitizedTitle}`;
     const port = location.port ? `:${location.port}` : '';
     const urlToCopy = `${location.protocol}//${location.hostname}${port}${location.pathname}${location.search}${newHash}`;
 
     copyTextToClipboard(urlToCopy);
-  };
+  }, [sanitizedTitle]);
 
-  const sanitizedTitle = encodeURIComponent(title.replace(/ /g, '-'));
   const tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
-
-  if (hydrate) {
-    return <CopyButton onClick={onCopyClick} title={sanitizedTitle} tooltip={tooltip} content={content} />;
-  }
-
   return (
-    <ContainerDiv data-header-copy-container data-title={title}>
-      <CopyButton onClick={onCopyClick} title={sanitizedTitle} tooltip={tooltip} content={content} />
+    <ContainerDiv>
+      <Tooltip tooltip={tooltip}>
+        <IconButton onClick={onCopyClick} aria-label={`${tooltip}: ${copyText}`}>
+          <Link />
+        </IconButton>
+      </Tooltip>
+      <h2 id={sanitizedTitle} tabIndex={-1} lang={lang}>
+        {children}
+      </h2>
     </ContainerDiv>
   );
 };

package/src/CopyParagraphButton/index.tsx

@@ -7,8 +7,6 @@
  */
 
 import CopyParagraphButton from './CopyParagraphButton';
-import CopyParagraphButtonV2 from './CopyParagraphButtonV2';
-import initCopyParagraphButtons from './initCopyParagraphButtons';
 
-export { CopyParagraphButton, initCopyParagraphButtons, CopyParagraphButtonV2 };
+export { CopyParagraphButton };
 export default CopyParagraphButton;