@ndla/ui 44.0.19 → 44.0.21

package/lib/ResourceGroup/ResourceList.js

@@ -6,14 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = require("@emotion/react");
 var _reactI18next = require("react-i18next");
 var _core = require("@ndla/core");
 var _NoContentBox = _interopRequireDefault(require("../NoContentBox"));
 var _ResourceItem = _interopRequireDefault(require("./ResourceItem"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _excluded = ["id"];
-var _templateObject;
 /**
  * Copyright (c) 2017-present, NDLA.
  *
@@ -29,22 +27,17 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var fakeLoadingAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0.5;\n  }\n  99% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
 var StyledResourceList = /*#__PURE__*/(0, _base.default)("ul", {
   target: "e1uqs7m20",
   label: "StyledResourceList"
-})("list-style:none;margin:0;padding:0;font-family:", _core.fonts.sans, ";", function (_ref) {
-  var showAdditionalResources = _ref.showAdditionalResources;
-  return showAdditionalResources && /*#__PURE__*/(0, _react.css)("animation-name:", fakeLoadingAnimation, ";animation-duration:0.4s;;label:StyledResourceList;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlc291cmNlTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUNPIiwiZmlsZSI6IlJlc291cmNlTGlzdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxNy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCB7IGZvbnRzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgTm9Db250ZW50Qm94IGZyb20gJy4uL05vQ29udGVudEJveCc7XG5pbXBvcnQgUmVzb3VyY2VJdGVtIGZyb20gJy4vUmVzb3VyY2VJdGVtJztcbmltcG9ydCB7IFJlc291cmNlIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCBmYWtlTG9hZGluZ0FuaW1hdGlvbiA9IGtleWZyYW1lc2BcbiAgMCUge1xuICAgIG9wYWNpdHk6IDAuNTtcbiAgfVxuICA5OSUge1xuICAgIG9wYWNpdHk6IDAuNTtcbiAgfVxuICAxMDAlIHtcbiAgICBvcGFjaXR5OiAxO1xuICB9XG5gO1xuXG50eXBlIFN0eWxlZExpc3RQcm9wcyA9IHtcbiAgc2hvd0FkZGl0aW9uYWxSZXNvdXJjZXM/OiBib29sZWFuO1xufTtcbmNvbnN0IFN0eWxlZFJlc291cmNlTGlzdCA9IHN0eWxlZC51bDxTdHlsZWRMaXN0UHJvcHM+YFxuICBsaXN0LXN0eWxlOiBub25lO1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDA7XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICAkeyh7IHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzIH0pID0+XG4gICAgc2hvd0FkZGl0aW9uYWxSZXNvdXJjZXMgJiZcbiAgICBjc3NgXG4gICAgICBhbmltYXRpb24tbmFtZTogJHtmYWtlTG9hZGluZ0FuaW1hdGlvbn07XG4gICAgICBhbmltYXRpb24tZHVyYXRpb246IDAuNHM7XG4gICAgYH1cbmA7XG5cbmV4cG9ydCB0eXBlIFJlc291cmNlTGlzdFByb3BzID0ge1xuICByZXNvdXJjZXM6IFJlc291cmNlW107XG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkO1xuICBjb250ZW50VHlwZT86IHN0cmluZztcbiAgdGl0bGU/OiBzdHJpbmc7XG4gIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzPzogYm9vbGVhbjtcbiAgaGVhcnRCdXR0b24/OiAocGF0aDogc3RyaW5nKSA9PiBSZWFjdE5vZGU7XG59O1xuXG5jb25zdCBSZXNvdXJjZUxpc3QgPSAoe1xuICByZXNvdXJjZXMsXG4gIG9uQ2xpY2ssXG4gIGNvbnRlbnRUeXBlLFxuICB0aXRsZSxcbiAgc2hvd0FkZGl0aW9uYWxSZXNvdXJjZXMsXG4gIGhlYXJ0QnV0dG9uLFxufTogUmVzb3VyY2VMaXN0UHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCByZW5kZXJBZGRpdGlvbmFsUmVzb3VyY2VUcmlnZ2VyID1cbiAgICAhc2hvd0FkZGl0aW9uYWxSZXNvdXJjZXMgJiZcbiAgICByZXNvdXJjZXMuZmlsdGVyKChyZXMpID0+IHJlcy5hZGRpdGlvbmFsKS5sZW5ndGggPiAwICYmXG4gICAgcmVzb3VyY2VzLmZpbHRlcigocmVzKSA9PiAhcmVzLmFkZGl0aW9uYWwpLmxlbmd0aCA9PT0gMDtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8U3R5bGVkUmVzb3VyY2VMaXN0IHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzPXtzaG93QWRkaXRpb25hbFJlc291cmNlc30+XG4gICAgICAgIHtyZXNvdXJjZXMubWFwKCh7IGlkLCAuLi5yZXNvdXJjZSB9KSA9PiAoXG4gICAgICAgICAgPFJlc291cmNlSXRlbVxuICAgICAgICAgICAgaWQ9e2lkfVxuICAgICAgICAgICAga2V5PXtpZH1cbiAgICAgICAgICAgIGNvbnRlbnRUeXBlPXtjb250ZW50VHlwZX1cbiAgICAgICAgICAgIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzPXtzaG93QWRkaXRpb25hbFJlc291cmNlc31cbiAgICAgICAgICAgIGhlYXJ0QnV0dG9uPXtoZWFydEJ1dHRvbn1cbiAgICAgICAgICAgIHsuLi5yZXNvdXJjZX1cbiAgICAgICAgICAgIGNvbnRlbnRUeXBlRGVzY3JpcHRpb249e1xuICAgICAgICAgICAgICByZXNvdXJjZS5hZGRpdGlvbmFsID8gdCgncmVzb3VyY2UudG9vbHRpcEFkZGl0aW9uYWxUb3BpYycpIDogdCgncmVzb3VyY2UudG9vbHRpcENvcmVUb3BpYycpXG4gICAgICAgICAgICB9XG4gICAgICAgICAgLz5cbiAgICAgICAgKSl9XG4gICAgICAgIHtyZW5kZXJBZGRpdGlvbmFsUmVzb3VyY2VUcmlnZ2VyICYmIChcbiAgICAgICAgICA8bGk+XG4gICAgICAgICAgICA8Tm9Db250ZW50Qm94XG4gICAgICAgICAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICAgICAgICAgIGJ1dHRvblRleHQ9e3QoJ3Jlc291cmNlLnRvZ2dsZUZpbHRlckxhYmVsJyl9XG4gICAgICAgICAgICAgIHRleHQ9e1xuICAgICAgICAgICAgICAgIHRpdGxlXG4gICAgICAgICAgICAgICAgICA/IHQoJ3Jlc291cmNlLm5vQ29yZVJlc291cmNlc0F2YWlsYWJsZScsIHtcbiAgICAgICAgICAgICAgICAgICAgICBuYW1lOiB0aXRsZS50b0xvd2VyQ2FzZSgpLFxuICAgICAgICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgICAgICAgOiB0KCdyZXNvdXJjZS5ub0NvcmVSZXNvdXJjZXNBdmFpbGFibGVVbnNwZWNpZmljJylcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L2xpPlxuICAgICAgICApfVxuICAgICAgPC9TdHlsZWRSZXNvdXJjZUxpc3Q+XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBSZXNvdXJjZUxpc3Q7XG4iXX0= */"));
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlc291cmNlTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0NxRCIsImZpbGUiOiJSZXNvdXJjZUxpc3QudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTctcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgeyBmb250cyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IE5vQ29udGVudEJveCBmcm9tICcuLi9Ob0NvbnRlbnRCb3gnO1xuaW1wb3J0IFJlc291cmNlSXRlbSBmcm9tICcuL1Jlc291cmNlSXRlbSc7XG5pbXBvcnQgeyBSZXNvdXJjZSB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgZmFrZUxvYWRpbmdBbmltYXRpb24gPSBrZXlmcmFtZXNgXG4gIDAlIHtcbiAgICBvcGFjaXR5OiAwLjU7XG4gIH1cbiAgOTklIHtcbiAgICBvcGFjaXR5OiAwLjU7XG4gIH1cbiAgMTAwJSB7XG4gICAgb3BhY2l0eTogMTtcbiAgfVxuYDtcblxudHlwZSBTdHlsZWRMaXN0UHJvcHMgPSB7XG4gIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzPzogYm9vbGVhbjtcbn07XG5jb25zdCBTdHlsZWRSZXNvdXJjZUxpc3QgPSBzdHlsZWQudWw8U3R5bGVkTGlzdFByb3BzPmBcbiAgbGlzdC1zdHlsZTogbm9uZTtcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwO1xuICBmb250LWZhbWlseTogJHtmb250cy5zYW5zfTtcbiAgJHsoeyBzaG93QWRkaXRpb25hbFJlc291cmNlcyB9KSA9PlxuICAgIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzICYmXG4gICAgY3NzYFxuICAgICAgYW5pbWF0aW9uLW5hbWU6ICR7ZmFrZUxvYWRpbmdBbmltYXRpb259O1xuICAgICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjRzO1xuICAgIGB9XG5gO1xuXG5leHBvcnQgdHlwZSBSZXNvdXJjZUxpc3RQcm9wcyA9IHtcbiAgcmVzb3VyY2VzOiBSZXNvdXJjZVtdO1xuICBvbkNsaWNrPzogKCkgPT4gdm9pZDtcbiAgY29udGVudFR5cGU/OiBzdHJpbmc7XG4gIHRpdGxlPzogc3RyaW5nO1xuICBzaG93QWRkaXRpb25hbFJlc291cmNlcz86IGJvb2xlYW47XG4gIGhlYXJ0QnV0dG9uPzogKHBhdGg6IHN0cmluZykgPT4gUmVhY3ROb2RlO1xufTtcblxuY29uc3QgUmVzb3VyY2VMaXN0ID0gKHtcbiAgcmVzb3VyY2VzLFxuICBvbkNsaWNrLFxuICBjb250ZW50VHlwZSxcbiAgdGl0bGUsXG4gIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzLFxuICBoZWFydEJ1dHRvbixcbn06IFJlc291cmNlTGlzdFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgcmVuZGVyQWRkaXRpb25hbFJlc291cmNlVHJpZ2dlciA9XG4gICAgIXNob3dBZGRpdGlvbmFsUmVzb3VyY2VzICYmXG4gICAgcmVzb3VyY2VzLmZpbHRlcigocmVzKSA9PiByZXMuYWRkaXRpb25hbCkubGVuZ3RoID4gMCAmJlxuICAgIHJlc291cmNlcy5maWx0ZXIoKHJlcykgPT4gIXJlcy5hZGRpdGlvbmFsKS5sZW5ndGggPT09IDA7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPFN0eWxlZFJlc291cmNlTGlzdCBzaG93QWRkaXRpb25hbFJlc291cmNlcz17c2hvd0FkZGl0aW9uYWxSZXNvdXJjZXN9PlxuICAgICAgICB7cmVzb3VyY2VzLm1hcCgoeyBpZCwgLi4ucmVzb3VyY2UgfSkgPT4gKFxuICAgICAgICAgIDxSZXNvdXJjZUl0ZW1cbiAgICAgICAgICAgIGlkPXtpZH1cbiAgICAgICAgICAgIGtleT17aWR9XG4gICAgICAgICAgICBjb250ZW50VHlwZT17Y29udGVudFR5cGV9XG4gICAgICAgICAgICBzaG93QWRkaXRpb25hbFJlc291cmNlcz17c2hvd0FkZGl0aW9uYWxSZXNvdXJjZXN9XG4gICAgICAgICAgICBoZWFydEJ1dHRvbj17aGVhcnRCdXR0b259XG4gICAgICAgICAgICB7Li4ucmVzb3VyY2V9XG4gICAgICAgICAgICBjb250ZW50VHlwZURlc2NyaXB0aW9uPXtcbiAgICAgICAgICAgICAgcmVzb3VyY2UuYWRkaXRpb25hbCA/IHQoJ3Jlc291cmNlLnRvb2x0aXBBZGRpdGlvbmFsVG9waWMnKSA6IHQoJ3Jlc291cmNlLnRvb2x0aXBDb3JlVG9waWMnKVxuICAgICAgICAgICAgfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgICB7cmVuZGVyQWRkaXRpb25hbFJlc291cmNlVHJpZ2dlciAmJiAoXG4gICAgICAgICAgPGxpPlxuICAgICAgICAgICAgPE5vQ29udGVudEJveFxuICAgICAgICAgICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgICAgICAgICBidXR0b25UZXh0PXt0KCdyZXNvdXJjZS50b2dnbGVGaWx0ZXJMYWJlbCcpfVxuICAgICAgICAgICAgICB0ZXh0PXtcbiAgICAgICAgICAgICAgICB0aXRsZVxuICAgICAgICAgICAgICAgICAgPyB0KCdyZXNvdXJjZS5ub0NvcmVSZXNvdXJjZXNBdmFpbGFibGUnLCB7XG4gICAgICAgICAgICAgICAgICAgICAgbmFtZTogdGl0bGUudG9Mb3dlckNhc2UoKSxcbiAgICAgICAgICAgICAgICAgICAgfSlcbiAgICAgICAgICAgICAgICAgIDogdCgncmVzb3VyY2Uubm9Db3JlUmVzb3VyY2VzQXZhaWxhYmxlVW5zcGVjaWZpYycpXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9saT5cbiAgICAgICAgKX1cbiAgICAgIDwvU3R5bGVkUmVzb3VyY2VMaXN0PlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgUmVzb3VyY2VMaXN0O1xuIl19 */"));
-var ResourceList = function ResourceList(_ref2) {
-  var resources = _ref2.resources,
-    onClick = _ref2.onClick,
-    contentType = _ref2.contentType,
-    title = _ref2.title,
-    showAdditionalResources = _ref2.showAdditionalResources,
-    heartButton = _ref2.heartButton;
+})("list-style:none;margin:0;padding:0;font-family:", _core.fonts.sans, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlc291cmNlTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JvQyIsImZpbGUiOiJSZXNvdXJjZUxpc3QudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTctcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHsgZm9udHMgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCBOb0NvbnRlbnRCb3ggZnJvbSAnLi4vTm9Db250ZW50Qm94JztcbmltcG9ydCBSZXNvdXJjZUl0ZW0gZnJvbSAnLi9SZXNvdXJjZUl0ZW0nO1xuaW1wb3J0IHsgUmVzb3VyY2UgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IFN0eWxlZFJlc291cmNlTGlzdCA9IHN0eWxlZC51bGBcbiAgbGlzdC1zdHlsZTogbm9uZTtcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwO1xuICBmb250LWZhbWlseTogJHtmb250cy5zYW5zfTtcbmA7XG5cbmV4cG9ydCB0eXBlIFJlc291cmNlTGlzdFByb3BzID0ge1xuICByZXNvdXJjZXM6IFJlc291cmNlW107XG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkO1xuICBjb250ZW50VHlwZT86IHN0cmluZztcbiAgdGl0bGU/OiBzdHJpbmc7XG4gIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzPzogYm9vbGVhbjtcbiAgaGVhcnRCdXR0b24/OiAocGF0aDogc3RyaW5nKSA9PiBSZWFjdE5vZGU7XG59O1xuXG5jb25zdCBSZXNvdXJjZUxpc3QgPSAoe1xuICByZXNvdXJjZXMsXG4gIG9uQ2xpY2ssXG4gIGNvbnRlbnRUeXBlLFxuICB0aXRsZSxcbiAgc2hvd0FkZGl0aW9uYWxSZXNvdXJjZXMsXG4gIGhlYXJ0QnV0dG9uLFxufTogUmVzb3VyY2VMaXN0UHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCByZW5kZXJBZGRpdGlvbmFsUmVzb3VyY2VUcmlnZ2VyID1cbiAgICAhc2hvd0FkZGl0aW9uYWxSZXNvdXJjZXMgJiZcbiAgICByZXNvdXJjZXMuZmlsdGVyKChyZXMpID0+IHJlcy5hZGRpdGlvbmFsKS5sZW5ndGggPiAwICYmXG4gICAgcmVzb3VyY2VzLmZpbHRlcigocmVzKSA9PiAhcmVzLmFkZGl0aW9uYWwpLmxlbmd0aCA9PT0gMDtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8U3R5bGVkUmVzb3VyY2VMaXN0PlxuICAgICAgICB7cmVzb3VyY2VzLm1hcCgoeyBpZCwgLi4ucmVzb3VyY2UgfSkgPT4gKFxuICAgICAgICAgIDxSZXNvdXJjZUl0ZW1cbiAgICAgICAgICAgIGlkPXtpZH1cbiAgICAgICAgICAgIGtleT17aWR9XG4gICAgICAgICAgICBjb250ZW50VHlwZT17Y29udGVudFR5cGV9XG4gICAgICAgICAgICBzaG93QWRkaXRpb25hbFJlc291cmNlcz17c2hvd0FkZGl0aW9uYWxSZXNvdXJjZXN9XG4gICAgICAgICAgICBoZWFydEJ1dHRvbj17aGVhcnRCdXR0b259XG4gICAgICAgICAgICB7Li4ucmVzb3VyY2V9XG4gICAgICAgICAgICBjb250ZW50VHlwZURlc2NyaXB0aW9uPXtcbiAgICAgICAgICAgICAgcmVzb3VyY2UuYWRkaXRpb25hbCA/IHQoJ3Jlc291cmNlLnRvb2x0aXBBZGRpdGlvbmFsVG9waWMnKSA6IHQoJ3Jlc291cmNlLnRvb2x0aXBDb3JlVG9waWMnKVxuICAgICAgICAgICAgfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgICB7cmVuZGVyQWRkaXRpb25hbFJlc291cmNlVHJpZ2dlciAmJiAoXG4gICAgICAgICAgPGxpPlxuICAgICAgICAgICAgPE5vQ29udGVudEJveFxuICAgICAgICAgICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgICAgICAgICBidXR0b25UZXh0PXt0KCdyZXNvdXJjZS50b2dnbGVGaWx0ZXJMYWJlbCcpfVxuICAgICAgICAgICAgICB0ZXh0PXtcbiAgICAgICAgICAgICAgICB0aXRsZVxuICAgICAgICAgICAgICAgICAgPyB0KCdyZXNvdXJjZS5ub0NvcmVSZXNvdXJjZXNBdmFpbGFibGUnLCB7XG4gICAgICAgICAgICAgICAgICAgICAgbmFtZTogdGl0bGUudG9Mb3dlckNhc2UoKSxcbiAgICAgICAgICAgICAgICAgICAgfSlcbiAgICAgICAgICAgICAgICAgIDogdCgncmVzb3VyY2Uubm9Db3JlUmVzb3VyY2VzQXZhaWxhYmxlVW5zcGVjaWZpYycpXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9saT5cbiAgICAgICAgKX1cbiAgICAgIDwvU3R5bGVkUmVzb3VyY2VMaXN0PlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgUmVzb3VyY2VMaXN0O1xuIl19 */"));
+var ResourceList = function ResourceList(_ref) {
+  var resources = _ref.resources,
+    onClick = _ref.onClick,
+    contentType = _ref.contentType,
+    title = _ref.title,
+    showAdditionalResources = _ref.showAdditionalResources,
+    heartButton = _ref.heartButton;
   var _useTranslation = (0, _reactI18next.useTranslation)(),
     t = _useTranslation.t;
   var renderAdditionalResourceTrigger = !showAdditionalResources && resources.filter(function (res) {
@@ -54,10 +47,9 @@ var ResourceList = function ResourceList(_ref2) {
   }).length === 0;
   return (0, _jsxRuntime.jsx)("div", {
     children: (0, _jsxRuntime.jsxs)(StyledResourceList, {
-      showAdditionalResources: showAdditionalResources,
-      children: [resources.map(function (_ref3) {
-        var id = _ref3.id,
-          resource = _objectWithoutProperties(_ref3, _excluded);
+      children: [resources.map(function (_ref2) {
+        var id = _ref2.id,
+          resource = _objectWithoutProperties(_ref2, _excluded);
         return (0, _jsxRuntime.jsx)(_ResourceItem.default, _objectSpread(_objectSpread({
           id: id,
           contentType: contentType,

package/lib/locale/messages-en.js

@@ -847,8 +847,8 @@ var messages = _objectSpread(_objectSpread({
     },
     openMenuTooltip: 'Open menu',
     mobileStepInfo: '{{currentPage}} out of {{totalPages}}',
-    nextArrow: 'Next',
-    previousArrow: 'Previous'
+    nextArrow: 'Go to next step',
+    previousArrow: 'Go to previous step'
   },
   dropdown: {
     numberHits: "Search returned {{hits}} hits",

package/lib/locale/messages-nb.js

@@ -845,8 +845,8 @@ var messages = _objectSpread(_objectSpread({
     },
     openMenuTooltip: 'Vis læringssti',
     mobileStepInfo: '{{currentPage}} av {{totalPages}}',
-    nextArrow: 'Neste',
-    previousArrow: 'Forrige'
+    nextArrow: 'Gå til neste steg',
+    previousArrow: 'Gå til forrige steg'
   },
   dropdown: {
     numberHits: "S\xF8ket gav {{hits}} treff",

package/lib/locale/messages-nn.js

@@ -845,8 +845,8 @@ var messages = _objectSpread(_objectSpread({
     },
     openMenuTooltip: 'Vis læringssti',
     mobileStepInfo: '{{currentPage}} av {{totalPages}}',
-    nextArrow: 'Neste',
-    previousArrow: 'Førre'
+    nextArrow: 'Gå til neste steg',
+    previousArrow: 'Gå til førre steg'
   },
   dropdown: {
     numberHits: "S\xF8ket gav {{hits}} treff",

package/lib/locale/messages-se.js

@@ -845,8 +845,8 @@ var messages = _objectSpread(_objectSpread({
     },
     openMenuTooltip: 'Čájet oahppobálgá',
     mobileStepInfo: '{{currentPage}} oktiibuot {{totalPages}} siidduin',
-    nextArrow: 'Boahtte',
-    previousArrow: 'Ovddit'
+    nextArrow: 'Gå til neste steg',
+    previousArrow: 'Gå til førre steg'
   },
   dropdown: {
     numberHits: "Ohcamis ledje {{hits}} deaivama",

package/lib/locale/messages-sma.js

@@ -845,8 +845,8 @@ var messages = _objectSpread(_objectSpread({
     },
     openMenuTooltip: 'Vuesehth lïeremebaalkam',
     mobileStepInfo: '{{currentPage}} ållesth {{totalPages}}:ste',
-    nextArrow: 'Åvtese',
-    previousArrow: 'Övtebe'
+    nextArrow: 'Gå til neste steg',
+    previousArrow: 'Gå til førre steg'
   },
   dropdown: {
     numberHits: "Datne {{hits}} gaavnedimmieh \xE5adtjoejih",

package/lib/utils/relativeUrl.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare const usePossiblyRelativeUrl: (url: string, path?: string) => string;

package/lib/utils/relativeUrl.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePossiblyRelativeUrl = void 0;
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+var ENV_REGEX = /(staging|test)\.?/;
+var NDLA_URL = /(.*\.)?ndla.no.*/;
+var usePossiblyRelativeUrl = function usePossiblyRelativeUrl(url, path) {
+  if (!path) return url;
+  if (!NDLA_URL.test(url) || !NDLA_URL.test(path)) return url;
+  var urlObj = new URL(url.replace(ENV_REGEX, ''));
+  var pathObj = new URL(path.replace(ENV_REGEX, ''));
+  if (urlObj.host === pathObj.host) return urlObj.pathname;
+  return url;
+};
+exports.usePossiblyRelativeUrl = usePossiblyRelativeUrl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "44.0.19",
+  "version": "44.0.21",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,19 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.20",
+    "@ndla/accordion": "^2.2.21",
     "@ndla/article-scripts": "^3.0.20",
-    "@ndla/button": "^11.0.5",
+    "@ndla/button": "^11.0.6",
     "@ndla/carousel": "^3.1.15",
     "@ndla/core": "^4.1.6",
     "@ndla/dropdown-menu": "^1.0.4",
-    "@ndla/forms": "^4.3.20",
+    "@ndla/forms": "^4.3.21",
     "@ndla/hooks": "^2.0.9",
     "@ndla/icons": "^4.0.5",
     "@ndla/licenses": "^7.1.3",
     "@ndla/modal": "^4.0.4",
-    "@ndla/notion": "^5.0.19",
-    "@ndla/safelink": "^4.1.19",
+    "@ndla/notion": "^5.0.20",
+    "@ndla/safelink": "^4.1.20",
     "@ndla/select": "^2.4.11",
     "@ndla/switch": "^1.1.11",
     "@ndla/tabs": "^3.0.7",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b434bf6b25ea0dbd3606bdd6456476cb8e528025"
+  "gitHead": "072f73eedfbdc11fd4a6412b756c3d3d9ca19d6a"
 }

package/src/Article/ArticleByline.tsx

@@ -97,6 +97,12 @@ const StyledAccordionHeader = styled(AccordionHeader)`
   font-size: ${fonts.sizes('16px', '29px')};
   font-weight: ${fonts.weight.semibold};
 
+  &[data-background-color='white'][data-state='closed'] {
+    background-color: ${colors.background.default};
+  }
+`;
+
+const StyledAccordionContent = styled(AccordionContent)`
   &[data-background-color='white'] {
     background-color: ${colors.background.default};
   }
@@ -166,16 +172,16 @@ const ArticleByline = ({
             <StyledAccordionHeader headingLevel="h2" data-background-color={accordionHeaderVariant}>
               {t('article.useContent')}
             </StyledAccordionHeader>
-            <AccordionContent>{licenseBox}</AccordionContent>
+            <StyledAccordionContent data-background-color={accordionHeaderVariant}>{licenseBox}</StyledAccordionContent>
           </AccordionItem>
         )}
 
         {!!footnotes?.length && (
           <AccordionItem value={footnotesAccordionId}>
             <StyledAccordionHeader headingLevel="h2">{t('article.footnotes')}</StyledAccordionHeader>
-            <AccordionContent forceMount>
+            <StyledAccordionContent forceMount data-background-color={accordionHeaderVariant}>
               <ArticleFootNotes footNotes={footnotes} />
-            </AccordionContent>
+            </StyledAccordionContent>
           </AccordionItem>
         )}
       </AccordionRoot>

package/src/BlogPost/BlogPost.tsx

@@ -12,6 +12,7 @@ import SafeLink from '@ndla/safelink';
 import { colors, fonts, misc, spacing } from '@ndla/core';
 import { Quote } from '@ndla/icons/editor';
 import { HeadingLevel } from '../types';
+import { usePossiblyRelativeUrl } from '../utils/relativeUrl';
 
 export interface Props {
   title: {
@@ -26,6 +27,7 @@ export interface Props {
     url: string;
     alt: string;
   };
+  path?: string;
 }
 
 const Container = styled(SafeLink)`
@@ -37,7 +39,7 @@ const Container = styled(SafeLink)`
   max-height: fit-content;
   gap: ${spacing.nsmall};
   box-shadow: none;
-  border: 1px solid ${colors.brand.lightest};
+  border: 1px solid ${colors.brand.lighter};
   border-radius: ${misc.borderRadius};
   padding: ${spacing.normal} ${spacing.medium};
   height: 100%;
@@ -47,7 +49,7 @@ const Container = styled(SafeLink)`
   &:hover,
   &:focus-within {
     .blog-title {
-      box-shadow: inset 0 -1px;
+      text-decoration: underline;
     }
   }
 `;
@@ -79,9 +81,10 @@ const StyledImg = styled.img`
   border: 0;
 `;
 
-const BlogPost = ({ title, author, url, metaImage, headingLevel: Heading = 'h3', size = 'normal' }: Props) => {
+const BlogPost = ({ title, author, url, metaImage, headingLevel: Heading = 'h3', size = 'normal', path }: Props) => {
+  const href = usePossiblyRelativeUrl(url, path);
   return (
-    <Container data-size={size} to={url}>
+    <Container data-size={size} to={href}>
       <Heading className="blog-title" css={headingCss} lang={title.language}>
         {title.title}
       </Heading>

package/src/CampaignBlock/CampaignBlock.tsx

@@ -12,6 +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 '../types';
+import { usePossiblyRelativeUrl } from '../utils/relativeUrl';
 
 interface Image {
   src: string;
@@ -35,6 +36,7 @@ interface Props {
   imageBefore?: Image;
   imageAfter?: Image;
   className?: string;
+  path?: string;
 }
 
 const Container = styled.div`
@@ -91,15 +93,17 @@ const CampaignBlock = ({
   headingLevel: Heading = 'h2',
   imageAfter,
   url,
+  path,
   className,
 }: Props) => {
+  const href = usePossiblyRelativeUrl(url.url, path);
   return (
     <Container className={className} data-type="campaign-block">
       {imageBefore && <StyledImg src={imageBefore.src} height={200} width={240} alt="" />}
       <TextWrapper>
         <Heading css={headingStyle}>{title.title}</Heading>
         <StyledDescription>{description.text}</StyledDescription>
-        <StyledLink to={url.url}>
+        <StyledLink to={href}>
           {url.text}
           <Forward />
         </StyledLink>

package/src/ContactBlock/ContactBlock.tsx

@@ -15,6 +15,8 @@ import { useTranslation } from 'react-i18next';
 import concat from 'lodash/concat';
 import { errorSvgSrc } from '../Embed/ImageEmbed';
 
+const BLOB_WIDTH = 90;
+
 interface Props {
   image?: IImageMetaInformationV3;
   jobTitle: string;
@@ -27,6 +29,7 @@ interface Props {
 }
 const BlockWrapper = styled.div`
   display: flex;
+  position: relative;
   flex-direction: column;
   padding: 0 0 ${spacing.medium} ${spacing.medium};
   font-family: ${fonts.sans};
@@ -54,6 +57,7 @@ const StyledHeader = styled.div`
 
 const StyledText = styled.div`
   display: flex;
+  ${fonts.sizes('16px', '26px')};
   overflow-wrap: anywhere;
   color: ${colors.text.light};
   gap: ${spacing.xxsmall};
@@ -68,13 +72,18 @@ const EmailLink = styled.a`
 `;
 
 const SummaryBlock = styled.p`
-  font-family: ${fonts.serif};
-  padding: 0 ${spacing.medium} 0 0;
+  font-family: ${fonts.sans};
+  padding: 0;
+  max-width: calc(100% - (${BLOB_WIDTH}px / 2));
   ${mq.range({ from: breakpoints.tabletWide })} {
     padding-top: 0;
   }
 `;
 
+const InfoWrapper = styled.div`
+  max-width: calc(100% - ${BLOB_WIDTH}px);
+`;
+
 const TextWrapper = styled.div`
   display: flex;
   overflow: hidden;
@@ -83,13 +92,17 @@ const TextWrapper = styled.div`
 
 const BlobWrapper = styled.div`
   height: 180px;
-  width: 90px;
+  width: ${BLOB_WIDTH}px;
+  position: absolute;
+  overflow: hidden;
+  right: 0px;
 `;
 
 const ImageWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: ${spacing.small};
+  gap: ${spacing.xsmall};
+  ${fonts.sizes('16px', '26px')};
   padding: ${spacing.medium} ${spacing.medium} 0 0;
   ${mq.range({ from: breakpoints.tabletWide })} {
     padding-right: 0;
@@ -102,7 +115,7 @@ const blobStyling = css`
   transform: translate(10%, 0);
 `;
 const Email = styled.div`
-  min-width: 60px;
+  white-space: nowrap;
 `;
 
 const ContentWrapper = styled.div`
@@ -135,14 +148,14 @@ const ContactBlock = ({ image, jobTitle, description, name, email, blobColor = '
       </ImageWrapper>
       <ContentWrapper>
         <TextWrapper>
-          <div>
+          <InfoWrapper>
             <StyledHeader>{name}</StyledHeader>
             <StyledText>{jobTitle}</StyledText>
             <StyledText>
               <Email>{`${t('email')}:`}</Email>
               <EmailLink href={`mailto:${email}?subject=Contact us`}>{email}</EmailLink>
             </StyledText>
-          </div>
+          </InfoWrapper>
           <BlobWrapper>
             <Blob css={blobStyling} color={isGreenBlob ? colors.support.greenLight : colors.support.redLight} />
           </BlobWrapper>

package/src/Footer/FooterPrivacy.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import { spacing, fonts, misc, mq, breakpoints } from '@ndla/core';
+import { spacing, fonts, mq, breakpoints } from '@ndla/core';
 
 type FooterPrivacyProps = {
   privacyLinks: {
@@ -17,60 +17,51 @@ type FooterPrivacyProps = {
 };
 
 const StyledPrivacyLink = styled.a`
-  background: none;
   color: #fff;
-  border: 0;
-  padding: 0;
-  box-shadow: ${misc.textLinkBoxShadow};
-  cursor: pointer;
+  box-shadow: none;
+  text-decoration: underline;
   &:hover,
   &:focus {
-    box-shadow: none;
+    text-decoration: none;
   }
 `;
 
 const StyledLinkSpacer = styled.span`
-  margin-left: ${spacing.xxsmall};
-  margin-right: ${spacing.xxsmall};
-  margin-bottom: ${spacing.large};
-  ${mq.range({ until: breakpoints.mobileWide })} {
-    visibility: hidden;
+  margin: 0 ${spacing.small};
+  ${mq.range({ until: breakpoints.tablet })} {
+    display: none;
   }
 `;
 
 const StyledFooterText = styled.div`
   display: flex;
-  flex-direction: row;
   align-items: center;
   justify-content: center;
-  > span {
-    padding: ${spacing.xsmall} 0;
-    text-align: center;
-  }
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    ${fonts.sizes(16, 1.5)};
-    > span {
-      padding: 0;
-    }
-  }
-  ${mq.range({ until: breakpoints.mobileWide })} {
-    ${fonts.sizes(14, 1.3)};
-    > span {
-      padding-bottom: ${spacing.xsmall};
-    }
+  ${fonts.sizes(16, 1.5)};
+  ${mq.range({ until: breakpoints.tablet })} {
     flex-direction: column;
+    gap: ${spacing.small};
   }
   margin-bottom: ${spacing.large};
 `;
 
+const TextWrapper = styled.div`
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: flex;
+    justify-content: center;
+    align-self: flex-start;
+    text-align: center;
+  }
+`;
+
 const FooterPrivacy = ({ privacyLinks }: FooterPrivacyProps) => {
   return (
     <StyledFooterText>
       {privacyLinks.map((link, index) => (
-        <div key={link.label}>
+        <TextWrapper key={link.label}>
           {index > 0 && <StyledLinkSpacer aria-hidden>|</StyledLinkSpacer>}
           <StyledPrivacyLink href={link.url}>{link.label}</StyledPrivacyLink>
-        </div>
+        </TextWrapper>
       ))}
     </StyledFooterText>
   );

package/src/Grid/Grid.tsx

@@ -60,7 +60,7 @@ const GridContainer = styled.div`
   }
 
   &[data-border='lightBlue'] {
-    border: 1px solid ${colors.brand.light};
+    border: 1px solid ${colors.brand.lighter};
   }
   &[data-background='white'] {
     background-color: ${colors.white};

package/src/KeyFigure/KeyFigure.tsx

@@ -16,10 +16,14 @@ const ContentWrapper = styled.div`
   align-items: center;
   padding: ${spacing.small};
   align-items: center;
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    padding: ${spacing.medium} ${spacing.large};
+  }
 `;
 
 const StyledImage = styled.img`
-  width: 100%;
+  height: 150px;
+  width: 150px;
 `;
 
 const TitleWrapper = styled.div`
@@ -60,7 +64,7 @@ interface Props {
 const KeyFigure = ({ image, title, subtitle }: Props) => {
   return (
     <ContentWrapper>
-      <StyledImage src={image?.src} width={250} height={200} alt={image?.alt} />
+      <StyledImage src={image?.src} width={150} height={150} alt={image?.alt} />
       <TitleWrapper>{title}</TitleWrapper>
       <SubTitleWrapper>{subtitle}</SubTitleWrapper>
     </ContentWrapper>

package/src/LearningPaths/LearningPathSticky.tsx

@@ -12,6 +12,7 @@ import { css } from '@emotion/react';
 import { colors, spacing, animations, mq, breakpoints } from '@ndla/core';
 import { Back, Forward } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
+import { useTranslation } from 'react-i18next';
 
 const FOOTER_HEIGHT = '78px';
 const FOOTER_HEIGHT_MOBILE = spacing.large;
@@ -114,14 +115,21 @@ type PropsSiblings = {
   stepId: number;
 };
 
-export const LearningPathStickySibling = ({ title, toLearningPathUrl, pathId, stepId, arrow }: PropsSiblings) => (
-  <SafeLink to={toLearningPathUrl(pathId, stepId)} css={SafeLinkCSS}>
-    {arrow === 'left' && <Back className="c-icon--medium" />}
-    <div>
-      <StyledTitle>{title}</StyledTitle>
-    </div>
-    {arrow === 'right' && <Forward className="c-icon--medium" />}
-  </SafeLink>
-);
+export const LearningPathStickySibling = ({ title, toLearningPathUrl, pathId, stepId, arrow }: PropsSiblings) => {
+  const { t } = useTranslation();
+  return (
+    <SafeLink
+      to={toLearningPathUrl(pathId, stepId)}
+      css={SafeLinkCSS}
+      aria-label={arrow === 'left' ? t('learningPath.previousArrow') : t('learningPath.nextArrow')}
+    >
+      {arrow === 'left' && <Back className="c-icon--medium" />}
+      <div>
+        <StyledTitle>{title}</StyledTitle>
+      </div>
+      {arrow === 'right' && <Forward className="c-icon--medium" />}
+    </SafeLink>
+  );
+};
 
 export const LearningPathStickyPlaceholder = () => <div css={SafeLinkCSS} />;

package/src/LinkBlock/LinkBlock.tsx

@@ -15,6 +15,7 @@ import { breakpoints, colors, spacing, mq } from '@ndla/core';
 import { LinkBlockEmbedData } from '@ndla/types-embed';
 import { useMemo } from 'react';
 import Heading from '../Typography/Heading';
+import { usePossiblyRelativeUrl } from '../utils/relativeUrl';
 
 const StyledForward = styled(Forward)`
   margin: 0 ${spacing.nsmall};
@@ -72,7 +73,12 @@ const StyledCalenderEd = styled(CalendarEd)`
   color: ${colors.icon.iconBlue};
 `;
 
-const LinkBlock = ({ title, language, date, url }: Omit<LinkBlockEmbedData, 'resource'>) => {
+interface Props extends Omit<LinkBlockEmbedData, 'resource'> {
+  path?: string;
+}
+
+const LinkBlock = ({ title, language, date, url, path }: Props) => {
+  const href = usePossiblyRelativeUrl(url, path);
   const formattedDate = useMemo(() => {
     if (!date) return null;
     const locale = language === 'nb' ? nb : language === 'nn' ? nn : enGB;
@@ -80,7 +86,7 @@ const LinkBlock = ({ title, language, date, url }: Omit<LinkBlockEmbedData, 'res
   }, [date, language]);
 
   return (
-    <StyledSafeLink to={url}>
+    <StyledSafeLink to={href}>
       <InfoWrapper>
         <Heading element="h3" margin="none" headingStyle="h3" lang={language}>
           {title}

package/src/Masthead/MastheadSearchModal.tsx

@@ -71,7 +71,12 @@ const MastheadSearchModal = ({ onClose: onSearchClose, children, ndlaFilm }: Pro
   return (
     <Modal open={isOpen} onOpenChange={setIsOpen}>
       <ModalTrigger>
-        <ToggleSearchButton onClick={() => setIsOpen(true)} ndlaFilm={ndlaFilm}>
+        <ToggleSearchButton
+          onClick={() => setIsOpen(true)}
+          ndlaFilm={ndlaFilm}
+          aria-label={t('masthead.menu.search')}
+          title={t('masthead.menu.search')}
+        >
           {t('masthead.menu.search')}
         </ToggleSearchButton>
       </ModalTrigger>