@ndla/ui 30.7.0 → 30.8.0

package/es/Figure/Figure.js

@@ -12,13 +12,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  *
  */
 
-// N.B These component is used to render static markup serverside
+// N.B These components is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
 import React from 'react';
 import BEMHelper from 'react-bem-helper';
 import { isFunction as isFunctionHelper, parseMarkdown } from '@ndla/util';
-import { useTranslation } from 'react-i18next';
 import { Link as LinkIcon } from '@ndla/icons/common';
 import { LicenseByline } from '@ndla/licenses';
 import SafeLink from '@ndla/safelink';
@@ -42,9 +41,8 @@ export var FigureCaption = function FigureCaption(_ref) {
     link = _ref.link,
     hideFigcaption = _ref.hideFigcaption,
     hasLinkedVideo = _ref.hasLinkedVideo,
-    hideIconsAndAuthors = _ref.hideIconsAndAuthors;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+    hideIconsAndAuthors = _ref.hideIconsAndAuthors,
+    linkedVideoMessages = _ref.linkedVideoMessages;
   return _jsxs("figcaption", _objectSpread(_objectSpread({}, classes('caption', hideFigcaption && !isMobile ? 'hidden-caption' : undefined)), {}, {
     children: [caption ? _jsx("div", _objectSpread(_objectSpread({}, classes('info')), {}, {
       children: parseMarkdown(caption)
@@ -76,10 +74,10 @@ export var FigureCaption = function FigureCaption(_ref) {
               }, classes('toggleAlternativeVideo')), {}, {
                 children: [_jsx("span", {
                   className: "original",
-                  children: t('figure.button.alternative')
+                  children: linkedVideoMessages === null || linkedVideoMessages === void 0 ? void 0 : linkedVideoMessages.alternative
                 }), _jsx("span", {
                   className: "alternative hidden",
-                  children: t('figure.button.original')
+                  children: linkedVideoMessages === null || linkedVideoMessages === void 0 ? void 0 : linkedVideoMessages.original
                 })]
               }))]
             }), children]

package/lib/Figure/Figure.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import { ReactNode } from 'react';
-export declare const FigureCaption: ({ figureId, id, children, caption, authors, reuseLabel, licenseRights, locale, link, hideFigcaption, hasLinkedVideo, hideIconsAndAuthors, }: FigureCaptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const FigureCaption: ({ figureId, id, children, caption, authors, reuseLabel, licenseRights, locale, link, hideFigcaption, hasLinkedVideo, hideIconsAndAuthors, linkedVideoMessages, }: FigureCaptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export interface FigureLicense {
     short: string;
     title: string;
@@ -36,6 +36,10 @@ interface FigureCaptionProps {
     hideFigcaption?: boolean;
     hasLinkedVideo?: boolean;
     hideIconsAndAuthors?: boolean;
+    linkedVideoMessages?: {
+        original: string;
+        alternative: string;
+    };
 }
 declare const Figure: ({ children, type, resizeIframe, ...rest }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare type FigureType = 'full' | 'full-column' | 'left' | 'small-left' | 'right' | 'small-right' | 'xsmall-right' | 'xsmall-left';

package/lib/Figure/Figure.js

@@ -7,7 +7,6 @@ exports["default"] = exports.FigureCaption = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
 var _util = require("@ndla/util");
-var _reactI18next = require("react-i18next");
 var _common = require("@ndla/icons/common");
 var _licenses = require("@ndla/licenses");
 var _safelink = _interopRequireDefault(require("@ndla/safelink"));
@@ -37,9 +36,8 @@ var FigureCaption = function FigureCaption(_ref) {
     link = _ref.link,
     hideFigcaption = _ref.hideFigcaption,
     hasLinkedVideo = _ref.hasLinkedVideo,
-    hideIconsAndAuthors = _ref.hideIconsAndAuthors;
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-    t = _useTranslation.t;
+    hideIconsAndAuthors = _ref.hideIconsAndAuthors,
+    linkedVideoMessages = _ref.linkedVideoMessages;
   return (0, _jsxRuntime.jsxs)("figcaption", _objectSpread(_objectSpread({}, classes('caption', hideFigcaption && !_reactDeviceDetect.isMobile ? 'hidden-caption' : undefined)), {}, {
     children: [caption ? (0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, classes('info')), {}, {
       children: (0, _util.parseMarkdown)(caption)
@@ -71,10 +69,10 @@ var FigureCaption = function FigureCaption(_ref) {
               }, classes('toggleAlternativeVideo')), {}, {
                 children: [(0, _jsxRuntime.jsx)("span", {
                   className: "original",
-                  children: t('figure.button.alternative')
+                  children: linkedVideoMessages === null || linkedVideoMessages === void 0 ? void 0 : linkedVideoMessages.alternative
                 }), (0, _jsxRuntime.jsx)("span", {
                   className: "alternative hidden",
-                  children: t('figure.button.original')
+                  children: linkedVideoMessages === null || linkedVideoMessages === void 0 ? void 0 : linkedVideoMessages.original
                 })]
               }))]
             }), children]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "30.7.0",
+  "version": "30.8.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -38,13 +38,13 @@
     "@ndla/forms": "^4.0.12",
     "@ndla/hooks": "^1.1.13",
     "@ndla/icons": "^2.0.6",
-    "@ndla/licenses": "^6.0.6",
+    "@ndla/licenses": "^6.0.7",
     "@ndla/modal": "^2.1.1",
-    "@ndla/notion": "^4.0.13",
+    "@ndla/notion": "^4.0.14",
     "@ndla/safelink": "^3.0.12",
     "@ndla/switch": "^1.0.1",
     "@ndla/tabs": "^2.0.8",
-    "@ndla/tooltip": "^3.0.2",
+    "@ndla/tooltip": "^3.0.3",
     "@ndla/types-learningpath-api": "^0.0.13",
     "@ndla/util": "^3.1.7",
     "@reach/menu-button": "^0.16.2",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ca95292ccece036a5da6c3d4b5c494b35171a71f"
+  "gitHead": "d915f0ffc2983d60515a14ee674f88d74e401a8b"
 }

package/src/Figure/Figure.tsx

@@ -6,13 +6,12 @@
  *
  */
 
-// N.B These component is used to render static markup serverside
+// N.B These components is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
 import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { isFunction as isFunctionHelper, parseMarkdown } from '@ndla/util';
-import { useTranslation } from 'react-i18next';
 import { Link as LinkIcon } from '@ndla/icons/common';
 import { LicenseByline } from '@ndla/licenses';
 import SafeLink from '@ndla/safelink';
@@ -36,9 +35,8 @@ export const FigureCaption = ({
   hideFigcaption,
   hasLinkedVideo,
   hideIconsAndAuthors,
+  linkedVideoMessages,
 }: FigureCaptionProps) => {
-  const { t } = useTranslation();
-
   return (
     <figcaption {...classes('caption', hideFigcaption && !isMobile ? 'hidden-caption' : undefined)}>
       {caption ? <div {...classes('info')}>{parseMarkdown(caption)}</div> : null}
@@ -66,8 +64,8 @@ export const FigureCaption = ({
                     size="small"
                     type="button"
                     {...classes('toggleAlternativeVideo')}>
-                    <span className="original">{t('figure.button.alternative')}</span>
-                    <span className="alternative hidden">{t('figure.button.original')}</span>
+                    <span className="original">{linkedVideoMessages?.alternative}</span>
+                    <span className="alternative hidden">{linkedVideoMessages?.original}</span>
                   </Button>
                 )}
               </div>
@@ -122,6 +120,10 @@ interface FigureCaptionProps {
   hideFigcaption?: boolean;
   hasLinkedVideo?: boolean;
   hideIconsAndAuthors?: boolean;
+  linkedVideoMessages?: {
+    original: string;
+    alternative: string;
+  };
 }
 
 const Figure = ({ children, type = 'full', resizeIframe, ...rest }: Props) => {