@ndla/ui 30.0.7 → 30.0.8

package/lib/ResourceGroup/ResourceList.d.ts

@@ -5,15 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import { ReactNode } from 'react';
 import { Resource } from '../types';
 export declare type ResourceListProps = {
     resources: Resource[];
-    onClick: () => void;
+    onClick?: () => void;
     contentType?: string;
     title?: string;
     showAdditionalResources?: boolean;
-    onToggleAddToFavorites: (id: string) => void;
-    showAddToFavoriteButton: boolean;
+    heartButton?: (path: string) => ReactNode;
 };
-declare const ResourceList: ({ resources, onClick, onToggleAddToFavorites, contentType, title, showAdditionalResources, showAddToFavoriteButton, }: ResourceListProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+declare const ResourceList: ({ resources, onClick, contentType, title, showAdditionalResources, heartButton, }: ResourceListProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
 export default ResourceList;

package/lib/ResourceGroup/ResourceList.js

@@ -49,17 +49,16 @@ var StyledResourceList = /*#__PURE__*/(0, _base["default"])("ul", {
   label: "StyledResourceList"
 })("list-style:none;margin:0;padding:0;", function (_ref) {
   var showAdditionalResources = _ref.showAdditionalResources;
-  return showAdditionalResources && /*#__PURE__*/(0, _react2.css)("animation-name:", fakeLoadingAnimation, ";animation-duration:0.4s;;label:StyledResourceList;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlc291cmNlTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0NPIiwiZmlsZSI6IlJlc291cmNlTGlzdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxNy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IE5vQ29udGVudEJveCBmcm9tICcuLi9Ob0NvbnRlbnRCb3gnO1xuaW1wb3J0IFJlc291cmNlSXRlbSBmcm9tICcuL1Jlc291cmNlSXRlbSc7XG5pbXBvcnQgeyBSZXNvdXJjZSB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgZmFrZUxvYWRpbmdBbmltYXRpb24gPSBrZXlmcmFtZXNgXG4gIDAlIHtcbiAgICBvcGFjaXR5OiAwLjU7XG4gIH1cbiAgOTklIHtcbiAgICBvcGFjaXR5OiAwLjU7XG4gIH1cbiAgMTAwJSB7XG4gICAgb3BhY2l0eTogMTtcbiAgfVxuYDtcblxudHlwZSBTdHlsZWRMaXN0UHJvcHMgPSB7XG4gIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzPzogYm9vbGVhbjtcbn07XG5jb25zdCBTdHlsZWRSZXNvdXJjZUxpc3QgPSBzdHlsZWQudWw8U3R5bGVkTGlzdFByb3BzPmBcbiAgbGlzdC1zdHlsZTogbm9uZTtcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwO1xuICAkeyh7IHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzIH0pID0+XG4gICAgc2hvd0FkZGl0aW9uYWxSZXNvdXJjZXMgJiZcbiAgICBjc3NgXG4gICAgICBhbmltYXRpb24tbmFtZTogJHtmYWtlTG9hZGluZ0FuaW1hdGlvbn07XG4gICAgICBhbmltYXRpb24tZHVyYXRpb246IDAuNHM7XG4gICAgYH1cbmA7XG5cbmV4cG9ydCB0eXBlIFJlc291cmNlTGlzdFByb3BzID0ge1xuICByZXNvdXJjZXM6IFJlc291cmNlW107XG4gIG9uQ2xpY2s6ICgpID0+IHZvaWQ7XG4gIGNvbnRlbnRUeXBlPzogc3RyaW5nO1xuICB0aXRsZT86IHN0cmluZztcbiAgc2hvd0FkZGl0aW9uYWxSZXNvdXJjZXM/OiBib29sZWFuO1xuICBvblRvZ2dsZUFkZFRvRmF2b3JpdGVzOiAoaWQ6IHN0cmluZykgPT4gdm9pZDtcbiAgc2hvd0FkZFRvRmF2b3JpdGVCdXR0b246IGJvb2xlYW47XG59O1xuXG5jb25zdCBSZXNvdXJjZUxpc3QgPSAoe1xuICByZXNvdXJjZXMsXG4gIG9uQ2xpY2ssXG4gIG9uVG9nZ2xlQWRkVG9GYXZvcml0ZXMsXG4gIGNvbnRlbnRUeXBlLFxuICB0aXRsZSxcbiAgc2hvd0FkZGl0aW9uYWxSZXNvdXJjZXMsXG4gIHNob3dBZGRUb0Zhdm9yaXRlQnV0dG9uLFxufTogUmVzb3VyY2VMaXN0UHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCByZW5kZXJBZGRpdGlvbmFsUmVzb3VyY2VUcmlnZ2VyID1cbiAgICAhc2hvd0FkZGl0aW9uYWxSZXNvdXJjZXMgJiZcbiAgICByZXNvdXJjZXMuZmlsdGVyKChyZXMpID0+IHJlcy5hZGRpdGlvbmFsKS5sZW5ndGggPiAwICYmXG4gICAgcmVzb3VyY2VzLmZpbHRlcigocmVzKSA9PiAhcmVzLmFkZGl0aW9uYWwpLmxlbmd0aCA9PT0gMDtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8U3R5bGVkUmVzb3VyY2VMaXN0IHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzPXtzaG93QWRkaXRpb25hbFJlc291cmNlc30+XG4gICAgICAgIHtyZXNvdXJjZXMubWFwKCh7IGlkLCAuLi5yZXNvdXJjZSB9KSA9PiAoXG4gICAgICAgICAgPFJlc291cmNlSXRlbVxuICAgICAgICAgICAgaWQ9e2lkfVxuICAgICAgICAgICAga2V5PXtpZH1cbiAgICAgICAgICAgIGNvbnRlbnRUeXBlPXtjb250ZW50VHlwZX1cbiAgICAgICAgICAgIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzPXtzaG93QWRkaXRpb25hbFJlc291cmNlc31cbiAgICAgICAgICAgIHNob3dBZGRUb0Zhdm9yaXRlQnV0dG9uPXtzaG93QWRkVG9GYXZvcml0ZUJ1dHRvbn1cbiAgICAgICAgICAgIG9uVG9nZ2xlQWRkVG9GYXZvcml0ZXM9e29uVG9nZ2xlQWRkVG9GYXZvcml0ZXN9XG4gICAgICAgICAgICB7Li4ucmVzb3VyY2V9XG4gICAgICAgICAgICBjb250ZW50VHlwZURlc2NyaXB0aW9uPXtcbiAgICAgICAgICAgICAgcmVzb3VyY2UuYWRkaXRpb25hbCA/IHQoJ3Jlc291cmNlLnRvb2x0aXBBZGRpdGlvbmFsVG9waWMnKSA6IHQoJ3Jlc291cmNlLnRvb2x0aXBDb3JlVG9waWMnKVxuICAgICAgICAgICAgfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgICB7cmVuZGVyQWRkaXRpb25hbFJlc291cmNlVHJpZ2dlciAmJiAoXG4gICAgICAgICAgPGxpPlxuICAgICAgICAgICAgPE5vQ29udGVudEJveFxuICAgICAgICAgICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgICAgICAgICBidXR0b25UZXh0PXt0KCdyZXNvdXJjZS50b2dnbGVGaWx0ZXJMYWJlbCcpfVxuICAgICAgICAgICAgICB0ZXh0PXtcbiAgICAgICAgICAgICAgICB0aXRsZVxuICAgICAgICAgICAgICAgICAgPyB0KCdyZXNvdXJjZS5ub0NvcmVSZXNvdXJjZXNBdmFpbGFibGUnLCB7XG4gICAgICAgICAgICAgICAgICAgICAgbmFtZTogdGl0bGUudG9Mb3dlckNhc2UoKSxcbiAgICAgICAgICAgICAgICAgICAgfSlcbiAgICAgICAgICAgICAgICAgIDogdCgncmVzb3VyY2Uubm9Db3JlUmVzb3VyY2VzQXZhaWxhYmxlVW5zcGVjaWZpYycpXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9saT5cbiAgICAgICAgKX1cbiAgICAgIDwvU3R5bGVkUmVzb3VyY2VMaXN0PlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgUmVzb3VyY2VMaXN0O1xuIl19 */"));
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlc291cmNlTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0NxRCIsImZpbGUiOiJSZXNvdXJjZUxpc3QudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTctcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBOb0NvbnRlbnRCb3ggZnJvbSAnLi4vTm9Db250ZW50Qm94JztcbmltcG9ydCBSZXNvdXJjZUl0ZW0gZnJvbSAnLi9SZXNvdXJjZUl0ZW0nO1xuaW1wb3J0IHsgUmVzb3VyY2UgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGZha2VMb2FkaW5nQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgb3BhY2l0eTogMC41O1xuICB9XG4gIDk5JSB7XG4gICAgb3BhY2l0eTogMC41O1xuICB9XG4gIDEwMCUge1xuICAgIG9wYWNpdHk6IDE7XG4gIH1cbmA7XG5cbnR5cGUgU3R5bGVkTGlzdFByb3BzID0ge1xuICBzaG93QWRkaXRpb25hbFJlc291cmNlcz86IGJvb2xlYW47XG59O1xuY29uc3QgU3R5bGVkUmVzb3VyY2VMaXN0ID0gc3R5bGVkLnVsPFN0eWxlZExpc3RQcm9wcz5gXG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbiAgJHsoeyBzaG93QWRkaXRpb25hbFJlc291cmNlcyB9KSA9PlxuICAgIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzICYmXG4gICAgY3NzYFxuICAgICAgYW5pbWF0aW9uLW5hbWU6ICR7ZmFrZUxvYWRpbmdBbmltYXRpb259O1xuICAgICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjRzO1xuICAgIGB9XG5gO1xuXG5leHBvcnQgdHlwZSBSZXNvdXJjZUxpc3RQcm9wcyA9IHtcbiAgcmVzb3VyY2VzOiBSZXNvdXJjZVtdO1xuICBvbkNsaWNrOiAoKSA9PiB2b2lkO1xuICBjb250ZW50VHlwZT86IHN0cmluZztcbiAgdGl0bGU/OiBzdHJpbmc7XG4gIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzPzogYm9vbGVhbjtcbiAgb25Ub2dnbGVBZGRUb0Zhdm9yaXRlczogKGlkOiBzdHJpbmcpID0+IHZvaWQ7XG4gIHNob3dBZGRUb0Zhdm9yaXRlQnV0dG9uOiBib29sZWFuO1xufTtcblxuY29uc3QgUmVzb3VyY2VMaXN0ID0gKHtcbiAgcmVzb3VyY2VzLFxuICBvbkNsaWNrLFxuICBvblRvZ2dsZUFkZFRvRmF2b3JpdGVzLFxuICBjb250ZW50VHlwZSxcbiAgdGl0bGUsXG4gIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzLFxuICBzaG93QWRkVG9GYXZvcml0ZUJ1dHRvbixcbn06IFJlc291cmNlTGlzdFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgcmVuZGVyQWRkaXRpb25hbFJlc291cmNlVHJpZ2dlciA9XG4gICAgIXNob3dBZGRpdGlvbmFsUmVzb3VyY2VzICYmXG4gICAgcmVzb3VyY2VzLmZpbHRlcigocmVzKSA9PiByZXMuYWRkaXRpb25hbCkubGVuZ3RoID4gMCAmJlxuICAgIHJlc291cmNlcy5maWx0ZXIoKHJlcykgPT4gIXJlcy5hZGRpdGlvbmFsKS5sZW5ndGggPT09IDA7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPFN0eWxlZFJlc291cmNlTGlzdCBzaG93QWRkaXRpb25hbFJlc291cmNlcz17c2hvd0FkZGl0aW9uYWxSZXNvdXJjZXN9PlxuICAgICAgICB7cmVzb3VyY2VzLm1hcCgoeyBpZCwgLi4ucmVzb3VyY2UgfSkgPT4gKFxuICAgICAgICAgIDxSZXNvdXJjZUl0ZW1cbiAgICAgICAgICAgIGlkPXtpZH1cbiAgICAgICAgICAgIGtleT17aWR9XG4gICAgICAgICAgICBjb250ZW50VHlwZT17Y29udGVudFR5cGV9XG4gICAgICAgICAgICBzaG93QWRkaXRpb25hbFJlc291cmNlcz17c2hvd0FkZGl0aW9uYWxSZXNvdXJjZXN9XG4gICAgICAgICAgICBzaG93QWRkVG9GYXZvcml0ZUJ1dHRvbj17c2hvd0FkZFRvRmF2b3JpdGVCdXR0b259XG4gICAgICAgICAgICBvblRvZ2dsZUFkZFRvRmF2b3JpdGVzPXtvblRvZ2dsZUFkZFRvRmF2b3JpdGVzfVxuICAgICAgICAgICAgey4uLnJlc291cmNlfVxuICAgICAgICAgICAgY29udGVudFR5cGVEZXNjcmlwdGlvbj17XG4gICAgICAgICAgICAgIHJlc291cmNlLmFkZGl0aW9uYWwgPyB0KCdyZXNvdXJjZS50b29sdGlwQWRkaXRpb25hbFRvcGljJykgOiB0KCdyZXNvdXJjZS50b29sdGlwQ29yZVRvcGljJylcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAvPlxuICAgICAgICApKX1cbiAgICAgICAge3JlbmRlckFkZGl0aW9uYWxSZXNvdXJjZVRyaWdnZXIgJiYgKFxuICAgICAgICAgIDxsaT5cbiAgICAgICAgICAgIDxOb0NvbnRlbnRCb3hcbiAgICAgICAgICAgICAgb25DbGljaz17b25DbGlja31cbiAgICAgICAgICAgICAgYnV0dG9uVGV4dD17dCgncmVzb3VyY2UudG9nZ2xlRmlsdGVyTGFiZWwnKX1cbiAgICAgICAgICAgICAgdGV4dD17XG4gICAgICAgICAgICAgICAgdGl0bGVcbiAgICAgICAgICAgICAgICAgID8gdCgncmVzb3VyY2Uubm9Db3JlUmVzb3VyY2VzQXZhaWxhYmxlJywge1xuICAgICAgICAgICAgICAgICAgICAgIG5hbWU6IHRpdGxlLnRvTG93ZXJDYXNlKCksXG4gICAgICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICAgICAgICA6IHQoJ3Jlc291cmNlLm5vQ29yZVJlc291cmNlc0F2YWlsYWJsZVVuc3BlY2lmaWMnKVxuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvbGk+XG4gICAgICAgICl9XG4gICAgICA8L1N0eWxlZFJlc291cmNlTGlzdD5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFJlc291cmNlTGlzdDtcbiJdfQ== */"));
+  return showAdditionalResources && /*#__PURE__*/(0, _react2.css)("animation-name:", fakeLoadingAnimation, ";animation-duration:0.4s;;label:StyledResourceList;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlc291cmNlTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0NPIiwiZmlsZSI6IlJlc291cmNlTGlzdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxNy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IE5vQ29udGVudEJveCBmcm9tICcuLi9Ob0NvbnRlbnRCb3gnO1xuaW1wb3J0IFJlc291cmNlSXRlbSBmcm9tICcuL1Jlc291cmNlSXRlbSc7XG5pbXBvcnQgeyBSZXNvdXJjZSB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgZmFrZUxvYWRpbmdBbmltYXRpb24gPSBrZXlmcmFtZXNgXG4gIDAlIHtcbiAgICBvcGFjaXR5OiAwLjU7XG4gIH1cbiAgOTklIHtcbiAgICBvcGFjaXR5OiAwLjU7XG4gIH1cbiAgMTAwJSB7XG4gICAgb3BhY2l0eTogMTtcbiAgfVxuYDtcblxudHlwZSBTdHlsZWRMaXN0UHJvcHMgPSB7XG4gIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzPzogYm9vbGVhbjtcbn07XG5jb25zdCBTdHlsZWRSZXNvdXJjZUxpc3QgPSBzdHlsZWQudWw8U3R5bGVkTGlzdFByb3BzPmBcbiAgbGlzdC1zdHlsZTogbm9uZTtcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwO1xuICAkeyh7IHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzIH0pID0+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJlc291cmNlTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0NxRCIsImZpbGUiOiJSZXNvdXJjZUxpc3QudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTctcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBOb0NvbnRlbnRCb3ggZnJvbSAnLi4vTm9Db250ZW50Qm94JztcbmltcG9ydCBSZXNvdXJjZUl0ZW0gZnJvbSAnLi9SZXNvdXJjZUl0ZW0nO1xuaW1wb3J0IHsgUmVzb3VyY2UgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGZha2VMb2FkaW5nQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgb3BhY2l0eTogMC41O1xuICB9XG4gIDk5JSB7XG4gICAgb3BhY2l0eTogMC41O1xuICB9XG4gIDEwMCUge1xuICAgIG9wYWNpdHk6IDE7XG4gIH1cbmA7XG5cbnR5cGUgU3R5bGVkTGlzdFByb3BzID0ge1xuICBzaG93QWRkaXRpb25hbFJlc291cmNlcz86IGJvb2xlYW47XG59O1xuY29uc3QgU3R5bGVkUmVzb3VyY2VMaXN0ID0gc3R5bGVkLnVsPFN0eWxlZExpc3RQcm9wcz5gXG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbiAgJHsoeyBzaG93QWRkaXRpb25hbFJlc291cmNlcyB9KSA9PlxuICAgIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzICYmXG4gICAgY3NzYFxuICAgICAgYW5pbWF0aW9uLW5hbWU6ICR7ZmFrZUxvYWRpbmdBbmltYXRpb259O1xuICAgICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjRzO1xuICAgIGB9XG5gO1xuXG5leHBvcnQgdHlwZSBSZXNvdXJjZUxpc3RQcm9wcyA9IHtcbiAgcmVzb3VyY2VzOiBSZXNvdXJjZVtdO1xuICBvbkNsaWNrPzogKCkgPT4gdm9pZDtcbiAgY29udGVudFR5cGU/OiBzdHJpbmc7XG4gIHRpdGxlPzogc3RyaW5nO1xuICBzaG93QWRkaXRpb25hbFJlc291cmNlcz86IGJvb2xlYW47XG4gIGhlYXJ0QnV0dG9uPzogKHBhdGg6IHN0cmluZykgPT4gUmVhY3ROb2RlO1xufTtcblxuY29uc3QgUmVzb3VyY2VMaXN0ID0gKHtcbiAgcmVzb3VyY2VzLFxuICBvbkNsaWNrLFxuICBjb250ZW50VHlwZSxcbiAgdGl0bGUsXG4gIHNob3dBZGRpdGlvbmFsUmVzb3VyY2VzLFxuICBoZWFydEJ1dHRvbixcbn06IFJlc291cmNlTGlzdFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgcmVuZGVyQWRkaXRpb25hbFJlc291cmNlVHJpZ2dlciA9XG4gICAgIXNob3dBZGRpdGlvbmFsUmVzb3VyY2VzICYmXG4gICAgcmVzb3VyY2VzLmZpbHRlcigocmVzKSA9PiByZXMuYWRkaXRpb25hbCkubGVuZ3RoID4gMCAmJlxuICAgIHJlc291cmNlcy5maWx0ZXIoKHJlcykgPT4gIXJlcy5hZGRpdGlvbmFsKS5sZW5ndGggPT09IDA7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPFN0eWxlZFJlc291cmNlTGlzdCBzaG93QWRkaXRpb25hbFJlc291cmNlcz17c2hvd0FkZGl0aW9uYWxSZXNvdXJjZXN9PlxuICAgICAgICB7cmVzb3VyY2VzLm1hcCgoeyBpZCwgLi4ucmVzb3VyY2UgfSkgPT4gKFxuICAgICAgICAgIDxSZXNvdXJjZUl0ZW1cbiAgICAgICAgICAgIGlkPXtpZH1cbiAgICAgICAgICAgIGtleT17aWR9XG4gICAgICAgICAgICBjb250ZW50VHlwZT17Y29udGVudFR5cGV9XG4gICAgICAgICAgICBzaG93QWRkaXRpb25hbFJlc291cmNlcz17c2hvd0FkZGl0aW9uYWxSZXNvdXJjZXN9XG4gICAgICAgICAgICBoZWFydEJ1dHRvbj17aGVhcnRCdXR0b259XG4gICAgICAgICAgICB7Li4ucmVzb3VyY2V9XG4gICAgICAgICAgICBjb250ZW50VHlwZURlc2NyaXB0aW9uPXtcbiAgICAgICAgICAgICAgcmVzb3VyY2UuYWRkaXRpb25hbCA/IHQoJ3Jlc291cmNlLnRvb2x0aXBBZGRpdGlvbmFsVG9waWMnKSA6IHQoJ3Jlc291cmNlLnRvb2x0aXBDb3JlVG9waWMnKVxuICAgICAgICAgICAgfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgICB7cmVuZGVyQWRkaXRpb25hbFJlc291cmNlVHJpZ2dlciAmJiAoXG4gICAgICAgICAgPGxpPlxuICAgICAgICAgICAgPE5vQ29udGVudEJveFxuICAgICAgICAgICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgICAgICAgICBidXR0b25UZXh0PXt0KCdyZXNvdXJjZS50b2dnbGVGaWx0ZXJMYWJlbCcpfVxuICAgICAgICAgICAgICB0ZXh0PXtcbiAgICAgICAgICAgICAgICB0aXRsZVxuICAgICAgICAgICAgICAgICAgPyB0KCdyZXNvdXJjZS5ub0NvcmVSZXNvdXJjZXNBdmFpbGFibGUnLCB7XG4gICAgICAgICAgICAgICAgICAgICAgbmFtZTogdGl0bGUudG9Mb3dlckNhc2UoKSxcbiAgICAgICAgICAgICAgICAgICAgfSlcbiAgICAgICAgICAgICAgICAgIDogdCgncmVzb3VyY2Uubm9Db3JlUmVzb3VyY2VzQXZhaWxhYmxlVW5zcGVjaWZpYycpXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9saT5cbiAgICAgICAgKX1cbiAgICAgIDwvU3R5bGVkUmVzb3VyY2VMaXN0PlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgUmVzb3VyY2VMaXN0O1xuIl19 */"));
 
 var ResourceList = function ResourceList(_ref2) {
   var resources = _ref2.resources,
       onClick = _ref2.onClick,
-      onToggleAddToFavorites = _ref2.onToggleAddToFavorites,
       contentType = _ref2.contentType,
       title = _ref2.title,
       showAdditionalResources = _ref2.showAdditionalResources,
-      showAddToFavoriteButton = _ref2.showAddToFavoriteButton;
+      heartButton = _ref2.heartButton;
 
   var _useTranslation = (0, _reactI18next.useTranslation)(),
       t = _useTranslation.t;
@@ -80,8 +79,7 @@ var ResourceList = function ResourceList(_ref2) {
           id: id,
           contentType: contentType,
           showAdditionalResources: showAdditionalResources,
-          showAddToFavoriteButton: showAddToFavoriteButton,
-          onToggleAddToFavorites: onToggleAddToFavorites
+          heartButton: heartButton
         }, resource), {}, {
           contentTypeDescription: resource.additional ? t('resource.tooltipAdditionalTopic') : t('resource.tooltipCoreTopic')
         }), id);

package/lib/index.d.ts

@@ -8,7 +8,7 @@
 /** @ts-ignore */
 export * from './index-javascript';
 export { default as SectionHeading } from './SectionHeading';
-export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, ArticleSideBar, default as Article, ArticleFavoritesButton, } from './Article';
+export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, ArticleSideBar, default as Article, } from './Article';
 export { CompetenceGoalsDialog } from './CompetenceGoals';
 export { default as TopicIntroductionList } from './TopicIntroductionList';
 export { default as Table } from './Table';

package/lib/index.js

@@ -16,7 +16,6 @@ var _exportNames = {
   ArticleHeaderWrapper: true,
   ArticleSideBar: true,
   Article: true,
-  ArticleFavoritesButton: true,
   CompetenceGoalsDialog: true,
   TopicIntroductionList: true,
   Table: true,
@@ -262,12 +261,6 @@ Object.defineProperty(exports, "Article", {
     return _Article["default"];
   }
 });
-Object.defineProperty(exports, "ArticleFavoritesButton", {
-  enumerable: true,
-  get: function get() {
-    return _Article.ArticleFavoritesButton;
-  }
-});
 Object.defineProperty(exports, "CompetenceGoalsDialog", {
   enumerable: true,
   get: function get() {

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

@@ -96,6 +96,7 @@ declare const messages: {
         addToFavourites: string;
         alreadyFavourited: string;
         alreadyInFolder: string;
+        noFolderSelected: string;
         help: string;
         more: string;
         listView: string;

package/lib/locale/messages-en.js

@@ -1024,7 +1024,8 @@ var messages = _objectSpread(_objectSpread({
     favourites: 'Favourites',
     addToFavourites: 'Add to my favourites',
     alreadyFavourited: 'Already in my favourites',
-    alreadyInFolder: 'Already in folder',
+    alreadyInFolder: 'Already in folder. You can still save new tags.',
+    noFolderSelected: 'Select or create a new folder to save the resource.',
     help: 'Help',
     more: 'More options',
     listView: 'List view',

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

@@ -96,6 +96,7 @@ declare const messages: {
         addToFavourites: string;
         alreadyFavourited: string;
         alreadyInFolder: string;
+        noFolderSelected: string;
         help: string;
         more: string;
         listView: string;

package/lib/locale/messages-nb.js

@@ -1024,7 +1024,8 @@ var messages = _objectSpread(_objectSpread({
     favourites: 'Favoritter',
     addToFavourites: 'Legg til i mine favoritter',
     alreadyFavourited: 'Allerede lagt til i mine favoritter',
-    alreadyInFolder: 'Finnes allerede i mappen',
+    alreadyInFolder: 'Finnes allerede i mappen. Du kan fortsatt lagre nye emneknagger.',
+    noFolderSelected: 'Velg eller opprett ny mappe for å lagre ressursen',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',

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

@@ -96,6 +96,7 @@ declare const messages: {
         addToFavourites: string;
         alreadyFavourited: string;
         alreadyInFolder: string;
+        noFolderSelected: string;
         help: string;
         more: string;
         listView: string;

package/lib/locale/messages-nn.js

@@ -1024,7 +1024,8 @@ var messages = _objectSpread(_objectSpread({
     favourites: 'Favorittar',
     addToFavourites: 'Legg til i mine favorittar',
     alreadyFavourited: 'Allereie lagt til i mine favorittar',
-    alreadyInFolder: 'Finst allereie i mappa',
+    alreadyInFolder: 'Finst allereie i mappa. Du kan fortsatt lagre nye emneknaggar.',
+    noFolderSelected: 'Velg eller opprett ny mappe for å lagre ressursen',
     help: 'Hjelp',
     more: 'Fleire val',
     listView: 'Listevisning',

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

@@ -96,6 +96,7 @@ declare const messages: {
         addToFavourites: string;
         alreadyFavourited: string;
         alreadyInFolder: string;
+        noFolderSelected: string;
         help: string;
         more: string;
         listView: string;

package/lib/locale/messages-se.js

@@ -1024,7 +1024,8 @@ var messages = _objectSpread(_objectSpread({
     favourites: 'Oiddohat',
     addToFavourites: 'Bija mu oiddohiid searvái',
     alreadyFavourited: 'Lea juo biddjon oiddohin',
-    alreadyInFolder: 'Gávdno juo máhpas',
+    alreadyInFolder: 'Finnes allerede i mappen. Du kan fortsatt lagre nye emneknagger.',
+    noFolderSelected: 'Velg eller opprett ny mappe for å lagre ressursen',
     help: 'Veahkki',
     more: 'Eanet válljejumit',
     listView: 'Oppalašlistu',

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

@@ -96,6 +96,7 @@ declare const messages: {
         addToFavourites: string;
         alreadyFavourited: string;
         alreadyInFolder: string;
+        noFolderSelected: string;
         help: string;
         more: string;
         listView: string;

package/lib/locale/messages-sma.js

@@ -1024,7 +1024,8 @@ var messages = _objectSpread(_objectSpread({
     favourites: 'Favoritter',
     addToFavourites: 'Legg til i mine favoritter',
     alreadyFavourited: 'Allerede lagt til i mine favoritter',
-    alreadyInFolder: 'Finnes allerede i mappen',
+    alreadyInFolder: 'Finnes allerede i mappen. Du kan fortsatt lagre nye emneknagger.',
+    noFolderSelected: 'Velg eller opprett ny mappe for å lagre ressursen',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "30.0.7",
+  "version": "30.0.8",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,22 +31,22 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/article-scripts": "^3.0.7",
-    "@ndla/button": "^4.0.5",
+    "@ndla/article-scripts": "^3.0.8",
+    "@ndla/button": "^5.0.0",
     "@ndla/carousel": "^2.0.5",
     "@ndla/core": "^3.0.0",
-    "@ndla/forms": "^4.0.5",
-    "@ndla/hooks": "^1.1.11",
+    "@ndla/forms": "^4.0.6",
+    "@ndla/hooks": "^1.1.12",
     "@ndla/icons": "^2.0.5",
     "@ndla/licenses": "^6.0.5",
     "@ndla/modal": "^2.0.5",
-    "@ndla/notion": "^4.0.5",
-    "@ndla/safelink": "^3.0.5",
+    "@ndla/notion": "^4.0.6",
+    "@ndla/safelink": "^3.0.6",
     "@ndla/switch": "^1.0.0",
-    "@ndla/tabs": "^2.0.5",
+    "@ndla/tabs": "^2.0.6",
     "@ndla/tooltip": "^3.0.1",
     "@ndla/types-learningpath-api": "^0.0.13",
-    "@ndla/util": "^3.1.5",
+    "@ndla/util": "^3.1.6",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6651947fc0ddd857cffd4c7139c2e7ac91b44d58"
+  "gitHead": "5cb8d6b7fce98737fda299e7f52b70bc3af35d1d"
 }

package/src/Article/Article.tsx

@@ -19,7 +19,6 @@ import { Article as ArticleType, Locale } from '../types';
 import ArticleFootNotes from './ArticleFootNotes';
 import ArticleContent from './ArticleContent';
 import ArticleByline from './ArticleByline';
-import ArticleFavoritesButton from './ArticleFavoritesButton';
 import LayoutItem from '../Layout';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 import ArticleNotions, { NotionRelatedContent } from './ArticleNotions';
@@ -116,6 +115,7 @@ const ArticleFavoritesButtonWrapper = styled.div`
 `;
 
 type Props = {
+  heartButton?: ReactNode;
   article: ArticleType;
   icon?: ReactNode;
   licenseBox?: ReactNode;
@@ -135,8 +135,6 @@ type Props = {
   printUrl?: string;
   notions?: { list: ConceptNotionType[]; related: NotionRelatedContent[] };
   accessMessage?: string;
-  isFavorite?: boolean;
-  onToggleAddToFavorites?: (id: string, add: boolean) => void;
 };
 
 const getArticleContent = (content: any, locale: Locale) => {
@@ -167,8 +165,7 @@ export const Article = ({
   printUrl,
   renderMarkdown,
   accessMessage,
-  onToggleAddToFavorites,
-  isFavorite,
+  heartButton,
 }: Props) => {
   const [articleRef, { entry }] = useIntersectionObserver({
     root: null,
@@ -218,15 +215,8 @@ export const Article = ({
             </MSGboxWrapper>
           )}
           <ArticleHeaderWrapper competenceGoals={competenceGoals} competenceGoalTypes={competenceGoalTypes}>
-            {onToggleAddToFavorites && (
-              <ArticleFavoritesButtonWrapper>
-                <ArticleFavoritesButton
-                  articleId={id}
-                  isFavorite={isFavorite}
-                  onToggleAddToFavorites={onToggleAddToFavorites}
-                />
-              </ArticleFavoritesButtonWrapper>
-            )}
+            {heartButton ? <ArticleFavoritesButtonWrapper>{heartButton}</ArticleFavoritesButtonWrapper> : null}
+
             <ArticleTitle icon={icon} label={messages.label}>
               {title}
             </ArticleTitle>

package/src/Article/index.ts

@@ -12,7 +12,6 @@ import ArticleContent from './ArticleContent';
 import ArticleFootNotes from './ArticleFootNotes';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 import ArticleSideBar from './ArticleSideBar';
-import ArticleFavoritesButton from './ArticleFavoritesButton';
 
 export {
   ArticleByline,
@@ -23,6 +22,5 @@ export {
   ArticleTitle,
   ArticleIntroduction,
   ArticleWrapper,
-  ArticleFavoritesButton,
 };
 export default Article;

package/src/LearningPaths/LearningPathMenu.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
@@ -76,7 +76,7 @@ export type StepProps = {
 };
 
 interface Props {
-  onToggleAddToFavorites?: () => void;
+  heartButton?: ReactNode;
   learningsteps: StepProps[];
   name: string;
   lastUpdated: string;
@@ -110,7 +110,7 @@ const LearningPathMenu = ({
   learningPathURL,
   invertedStyle,
   cookies,
-  onToggleAddToFavorites,
+  heartButton,
 }: Props) => {
   const { t } = useTranslation();
   const [isOpen, toggleOpenState] = useState(false);
@@ -136,7 +136,7 @@ const LearningPathMenu = ({
               name={name}
               invertedStyle={invertedStyle}
               id={learningPathId}
-              onToggleAddToFavorites={onToggleAddToFavorites}
+              heartButton={heartButton}
             />
             <LearningPathMenuContent
               learningsteps={learningsteps}

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -6,12 +6,11 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
 import { colors, spacing, spacingUnit, fonts, typography, mq, breakpoints, animations } from '@ndla/core';
-import { ArticleFavoritesButton } from '../Article';
 
 const StyledInfoHeader = styled.p`
   ${typography.smallHeading}
@@ -104,20 +103,18 @@ interface Props {
   isOpen: boolean;
   invertedStyle?: boolean;
   name: string;
-  onToggleAddToFavorites?: () => void;
   id: number;
+  heartButton?: ReactNode;
 }
 
-const LearningPathMenuIntro = ({ isOpen, name, invertedStyle, onToggleAddToFavorites, id }: Props) => {
+const LearningPathMenuIntro = ({ isOpen, name, invertedStyle, heartButton }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledMenuIntro isOpen={isOpen} invertedStyle={invertedStyle}>
       <div>
         <StyledRow>
           <StyledInfoHeader>{t('learningPath.youAreInALearningPath')}</StyledInfoHeader>
-          {onToggleAddToFavorites && (
-            <ArticleFavoritesButton onToggleAddToFavorites={onToggleAddToFavorites} articleId={id.toString()} />
-          )}
+          {heartButton}
         </StyledRow>
         <StyledIntroHeader>{name}</StyledIntroHeader>
       </div>

package/src/ResourceGroup/ResourceGroup.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { fonts, spacing } from '@ndla/core';
 
@@ -36,8 +36,7 @@ const StyledHeading = styled.h1`
 type Props = {
   invertedStyle?: boolean;
   toggleAdditionalResources: () => void;
-  onToggleAddToFavorites: (id: string) => void;
-  showAddToFavoriteButton: boolean;
+  heartButton?: (path: string) => ReactNode;
 };
 
 const ResourceGroup = ({
@@ -47,8 +46,7 @@ const ResourceGroup = ({
   toggleAdditionalResources,
   contentType,
   invertedStyle,
-  onToggleAddToFavorites,
-  showAddToFavoriteButton = false,
+  heartButton,
 }: Props & ResourceListProps) => (
   <Wrapper>
     {title && (
@@ -63,8 +61,7 @@ const ResourceGroup = ({
         showAdditionalResources={showAdditionalResources}
         contentType={contentType}
         resources={resources}
-        onToggleAddToFavorites={onToggleAddToFavorites}
-        showAddToFavoriteButton={showAddToFavoriteButton}
+        heartButton={heartButton}
       />
     ) : null}
   </Wrapper>

package/src/ResourceGroup/ResourceItem.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
@@ -15,7 +15,6 @@ import SafeLink from '@ndla/safelink';
 import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
-import { ArticleFavoritesButton } from '../Article';
 import { Resource } from '../types';
 import ContentTypeBadge from '../ContentTypeBadge';
 import * as contentTypes from '../model/ContentType';
@@ -228,9 +227,7 @@ type Props = {
   extraBottomMargin?: boolean;
   showAdditionalResources?: boolean;
   access?: 'teacher';
-  isFavorite?: boolean;
-  onToggleAddToFavorites: (id: string) => void;
-  showAddToFavoriteButton: boolean;
+  heartButton?: (path: string) => ReactNode;
 };
 
 const ResourceItem = ({
@@ -245,9 +242,7 @@ const ResourceItem = ({
   extraBottomMargin,
   showAdditionalResources,
   access,
-  onToggleAddToFavorites,
-  isFavorite,
-  showAddToFavoriteButton,
+  heartButton,
 }: Props & Resource) => {
   const { t } = useTranslation();
   const hidden = additional ? !showAdditionalResources : false;
@@ -310,13 +305,7 @@ const ResourceItem = ({
             )}
           </>
         )}
-        {showAddToFavoriteButton && (
-          <ArticleFavoritesButton
-            isFavorite={isFavorite}
-            articleId={id}
-            onToggleAddToFavorites={() => onToggleAddToFavorites(id)}
-          />
-        )}
+        {heartButton?.(path)}
       </TypeWrapper>
     </ListElement>
   );

package/src/ResourceGroup/ResourceList.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { keyframes } from '@emotion/react';
@@ -44,22 +44,20 @@ const StyledResourceList = styled.ul<StyledListProps>`
 
 export type ResourceListProps = {
   resources: Resource[];
-  onClick: () => void;
+  onClick?: () => void;
   contentType?: string;
   title?: string;
   showAdditionalResources?: boolean;
-  onToggleAddToFavorites: (id: string) => void;
-  showAddToFavoriteButton: boolean;
+  heartButton?: (path: string) => ReactNode;
 };
 
 const ResourceList = ({
   resources,
   onClick,
-  onToggleAddToFavorites,
   contentType,
   title,
   showAdditionalResources,
-  showAddToFavoriteButton,
+  heartButton,
 }: ResourceListProps) => {
   const { t } = useTranslation();
   const renderAdditionalResourceTrigger =
@@ -76,8 +74,7 @@ const ResourceList = ({
             key={id}
             contentType={contentType}
             showAdditionalResources={showAdditionalResources}
-            showAddToFavoriteButton={showAddToFavoriteButton}
-            onToggleAddToFavorites={onToggleAddToFavorites}
+            heartButton={heartButton}
             {...resource}
             contentTypeDescription={
               resource.additional ? t('resource.tooltipAdditionalTopic') : t('resource.tooltipCoreTopic')

package/src/index.ts

@@ -24,7 +24,6 @@ export {
   ArticleHeaderWrapper,
   ArticleSideBar,
   default as Article,
-  ArticleFavoritesButton,
 } from './Article';
 
 export { CompetenceGoalsDialog } from './CompetenceGoals';

package/src/locale/messages-en.ts

@@ -1065,7 +1065,8 @@ const messages = {
     favourites: 'Favourites',
     addToFavourites: 'Add to my favourites',
     alreadyFavourited: 'Already in my favourites',
-    alreadyInFolder: 'Already in folder',
+    alreadyInFolder: 'Already in folder. You can still save new tags.',
+    noFolderSelected: 'Select or create a new folder to save the resource.',
     help: 'Help',
     more: 'More options',
     listView: 'List view',

package/src/locale/messages-nb.ts

@@ -1062,14 +1062,16 @@ const messages = {
     favourites: 'Favoritter',
     addToFavourites: 'Legg til i mine favoritter',
     alreadyFavourited: 'Allerede lagt til i mine favoritter',
-    alreadyInFolder: 'Finnes allerede i mappen',
+    alreadyInFolder: 'Finnes allerede i mappen. Du kan fortsatt lagre nye emneknagger.',
+    noFolderSelected: 'Velg eller opprett ny mappe for å lagre ressursen',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',
     detailView: 'Detaljert listevisning',
     shortView: 'Kort visning',
     myPage: {
-      imageAlt: 'Halvnært bilde av jente som holder et nettbrett i hendene. Oppå nettbrettet ligger det ei samling fargeprøver i ulike former og farger. Grafikk.',
+      imageAlt:
+        'Halvnært bilde av jente som holder et nettbrett i hendene. Oppå nettbrettet ligger det ei samling fargeprøver i ulike former og farger. Grafikk.',
       confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
       confirmDeleteAccountButton: 'Slett konto',
       myPage: 'Min side',

package/src/locale/messages-nn.ts

@@ -1063,7 +1063,8 @@ const messages = {
     favourites: 'Favorittar',
     addToFavourites: 'Legg til i mine favorittar',
     alreadyFavourited: 'Allereie lagt til i mine favorittar',
-    alreadyInFolder: 'Finst allereie i mappa',
+    alreadyInFolder: 'Finst allereie i mappa. Du kan fortsatt lagre nye emneknaggar.',
+    noFolderSelected: 'Velg eller opprett ny mappe for å lagre ressursen',
     help: 'Hjelp',
     more: 'Fleire val',
     listView: 'Listevisning',

package/src/locale/messages-se.ts

@@ -1063,7 +1063,8 @@ const messages = {
     favourites: 'Oiddohat',
     addToFavourites: 'Bija mu oiddohiid searvái',
     alreadyFavourited: 'Lea juo biddjon oiddohin',
-    alreadyInFolder: 'Gávdno juo máhpas',
+    alreadyInFolder: 'Finnes allerede i mappen. Du kan fortsatt lagre nye emneknagger.',
+    noFolderSelected: 'Velg eller opprett ny mappe for å lagre ressursen',
     help: 'Veahkki',
     more: 'Eanet válljejumit',
     listView: 'Oppalašlistu',

package/src/locale/messages-sma.ts

@@ -1064,7 +1064,8 @@ const messages = {
     favourites: 'Favoritter',
     addToFavourites: 'Legg til i mine favoritter',
     alreadyFavourited: 'Allerede lagt til i mine favoritter',
-    alreadyInFolder: 'Finnes allerede i mappen',
+    alreadyInFolder: 'Finnes allerede i mappen. Du kan fortsatt lagre nye emneknagger.',
+    noFolderSelected: 'Velg eller opprett ny mappe for å lagre ressursen',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',