@ndla/ui 56.0.9-alpha.0 → 56.0.10-alpha.0

package/lib/LinkBlock/LinkBlock.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _dateFns = require("date-fns");
-var _locale = require("date-fns/locale");
 var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
 var _react = require("react");
 var _common = require("@ndla/icons/common");
@@ -83,10 +81,11 @@ const LinkBlock = _ref => {
   const href = (0, _relativeUrl.getPossiblyRelativeUrl)(url, path);
   const formattedDate = (0, _react.useMemo)(() => {
     if (!date) return null;
-    const locale = articleLanguage === "nb" ? _locale.nb : articleLanguage === "nn" ? _locale.nn : _locale.enGB;
-    return (0, _dateFns.format)(new Date(date), "dd. LLLL yyyy", {
-      locale
-    });
+    return new Intl.DateTimeFormat(articleLanguage, {
+      day: "2-digit",
+      month: "long",
+      year: "numeric"
+    }).format(new Date(date));
   }, [date, articleLanguage]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSafeLink, {
     to: href,

package/lib/ResourceBox/ResourceBox.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ResourceBox = void 0;
+var _core = require("@ndla/core");
 var _common = require("@ndla/icons/common");
 var _primitives = require("@ndla/primitives");
 var _safelink = require("@ndla/safelink");
 var _jsx2 = require("@ndla/styled-system/jsx");
-var _tokens = require("@ndla/styled-system/tokens");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2022-present, NDLA.
@@ -79,7 +79,7 @@ const ResourceBox = _ref => {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
       src: image.src,
       alt: image.alt,
-      sizes: `(min-width: ${(0, _tokens.token)("breakpoints.desktop")}) 150px, (max-width: ${(0, _tokens.token)("breakpoints.tablet")} ) 400px, 200px`
+      sizes: `(min-width: ${_core.breakpoints.desktop}) 150px, (max-width: ${_core.breakpoints.tablet} ) 400px, 200px`
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
         textStyle: "label.large",

package/lib/index.d.ts

@@ -32,7 +32,6 @@ export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBa
 export type { ContentTypeBadgeProps, ContentType } from "./ContentTypeBadge/ContentTypeBadgeNew";
 export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap, } from "./ContentTypeBadge/ContentTypeBadgeNew";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
-export { default as ContentPlaceholder } from "./ContentPlaceholder";
 export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput, } from "./TagSelector/TagSelector";
 export { TreeStructure } from "./TreeStructure";
 export type { TreeStructureProps } from "./TreeStructure";
@@ -45,7 +44,6 @@ export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from "./Embed"
 export { CampaignBlock } from "./CampaignBlock";
 export { Grid, GridParallaxItem } from "./Grid";
 export type { GridType } from "./Grid";
-export { default as FrontpageArticle, FRONTPAGE_ARTICLE_MAX_WIDTH, WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH, } from "./FrontpageArticle";
 export type { ProgrammeV2 } from "./ProgrammeCard";
 export { Gloss, GlossExample } from "./Gloss";
 export { LinkBlock, LinkBlockSection } from "./LinkBlock";

package/lib/index.js

@@ -177,12 +177,6 @@ Object.defineProperty(exports, "ContentLoader", {
     return _ContentLoader.default;
   }
 });
-Object.defineProperty(exports, "ContentPlaceholder", {
-  enumerable: true,
-  get: function () {
-    return _ContentPlaceholder.default;
-  }
-});
 Object.defineProperty(exports, "ContentTypeBadge", {
   enumerable: true,
   get: function () {
@@ -237,12 +231,6 @@ Object.defineProperty(exports, "ExternalEmbed", {
     return _Embed.ExternalEmbed;
   }
 });
-Object.defineProperty(exports, "FRONTPAGE_ARTICLE_MAX_WIDTH", {
-  enumerable: true,
-  get: function () {
-    return _FrontpageArticle.FRONTPAGE_ARTICLE_MAX_WIDTH;
-  }
-});
 Object.defineProperty(exports, "FactBox", {
   enumerable: true,
   get: function () {
@@ -279,12 +267,6 @@ Object.defineProperty(exports, "FootnoteEmbed", {
     return _Embed.FootnoteEmbed;
   }
 });
-Object.defineProperty(exports, "FrontpageArticle", {
-  enumerable: true,
-  get: function () {
-    return _FrontpageArticle.default;
-  }
-});
 Object.defineProperty(exports, "Gloss", {
   enumerable: true,
   get: function () {
@@ -513,12 +495,6 @@ Object.defineProperty(exports, "UuDisclaimerEmbed", {
     return _Embed.UuDisclaimerEmbed;
   }
 });
-Object.defineProperty(exports, "WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH", {
-  enumerable: true,
-  get: function () {
-    return _FrontpageArticle.WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH;
-  }
-});
 Object.defineProperty(exports, "ZendeskButton", {
   enumerable: true,
   get: function () {
@@ -657,7 +633,6 @@ var _Layout = _interopRequireWildcard(require("./Layout"));
 var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
 var _ContentTypeBadgeNew = require("./ContentTypeBadge/ContentTypeBadgeNew");
 var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
-var _ContentPlaceholder = _interopRequireDefault(require("./ContentPlaceholder"));
 var _TagSelector = require("./TagSelector/TagSelector");
 var _TreeStructure = require("./TreeStructure");
 var _BlogPost = require("./BlogPost");
@@ -666,7 +641,6 @@ var _KeyFigure = require("./KeyFigure");
 var _ContactBlock = require("./ContactBlock");
 var _CampaignBlock = require("./CampaignBlock");
 var _Grid = require("./Grid");
-var _FrontpageArticle = _interopRequireWildcard(require("./FrontpageArticle"));
 var _Gloss = require("./Gloss");
 var _LinkBlock = require("./LinkBlock");
 var _CodeBlock = require("./CodeBlock");

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

@@ -1086,6 +1086,10 @@ declare const messages: {
                 subscribe: string;
                 unsubscribe: string;
                 commentedOn: string;
+                button: {
+                    show: string;
+                    showNew: string;
+                };
             };
             topicsBy: string;
             admin: {

package/lib/locale/messages-en.js

@@ -1102,7 +1102,11 @@ const messages = {
         markAll: "Mark all as read",
         subscribe: "You will now be notified of new replies to this topic",
         unsubscribe: "You have turned off notification of new replies to this topic",
-        commentedOn: "commented on the post <i>{{title}}</i>"
+        commentedOn: "commented on the post <i>{{title}}</i>",
+        button: {
+          show: "View notifications",
+          showNew: "View {{count}} new notifications"
+        }
       },
       topicsBy: "Topics by",
       admin: {

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

@@ -1086,6 +1086,10 @@ declare const messages: {
                 subscribe: string;
                 unsubscribe: string;
                 commentedOn: string;
+                button: {
+                    show: string;
+                    showNew: string;
+                };
             };
             topicsBy: string;
             admin: {

package/lib/locale/messages-nb.js

@@ -1102,7 +1102,11 @@ const messages = {
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
         unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
-        commentedOn: "svarte på innlegget <i>{{title}}</i>"
+        commentedOn: "svarte på innlegget <i>{{title}}</i>",
+        button: {
+          show: "Vis varslinger",
+          showNew: "Vis {{count}} nye varslinger"
+        }
       },
       topicsBy: "Innlegg av",
       admin: {

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

@@ -1086,6 +1086,10 @@ declare const messages: {
                 subscribe: string;
                 unsubscribe: string;
                 commentedOn: string;
+                button: {
+                    show: string;
+                    showNew: string;
+                };
             };
             topicsBy: string;
             admin: {

package/lib/locale/messages-nn.js

@@ -1102,7 +1102,11 @@ const messages = {
         markAll: "Merk alle som lest",
         subscribe: "Du får no varsling om nye svar på dette innlegget",
         unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
-        commentedOn: "svarte på innlegget <i>{{title}}</i>"
+        commentedOn: "svarte på innlegget <i>{{title}}</i>",
+        button: {
+          show: "Vis varsler",
+          showNew: "Vis {{count}} nye varsler"
+        }
       },
       topicsBy: "Innlegg av",
       admin: {

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

@@ -1086,6 +1086,10 @@ declare const messages: {
                 subscribe: string;
                 unsubscribe: string;
                 commentedOn: string;
+                button: {
+                    show: string;
+                    showNew: string;
+                };
             };
             topicsBy: string;
             admin: {

package/lib/locale/messages-se.js

@@ -1102,7 +1102,11 @@ const messages = {
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
         unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
-        commentedOn: "svarte på innlegget <i>{{title}}</i>"
+        commentedOn: "svarte på innlegget <i>{{title}}</i>",
+        button: {
+          show: "Vis varslinger",
+          showNew: "Vis {{count}} nye varslinger"
+        }
       },
       topicsBy: "Innlegg av",
       admin: {

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

@@ -1086,6 +1086,10 @@ declare const messages: {
                 subscribe: string;
                 unsubscribe: string;
                 commentedOn: string;
+                button: {
+                    show: string;
+                    showNew: string;
+                };
             };
             topicsBy: string;
             admin: {

package/lib/locale/messages-sma.js

@@ -1102,7 +1102,11 @@ const messages = {
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
         unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
-        commentedOn: "svarte på innlegget <i>{{title}}</i>"
+        commentedOn: "svarte på innlegget <i>{{title}}</i>",
+        button: {
+          show: "Vis varslinger",
+          showNew: "Vis {{count}} nye varslinger"
+        }
       },
       topicsBy: "Innlegg av",
       admin: {

package/lib/styles.css

@@ -426,6 +426,14 @@
     border: 2px solid;
 }
 
+  .op_0 {
+    opacity: 0;
+}
+
+  .cursor_pointer {
+    cursor: pointer;
+}
+
   .ms_xsmall {
     margin-inline-start: var(--spacing-xsmall);
 }
@@ -446,10 +454,6 @@
     border-bottom: 0;
 }
 
-  .cursor_pointer {
-    cursor: pointer;
-}
-
   .bg_background\.default\/20 {
     --mix-background: color-mix(in srgb, var(--colors-background-default) 20%, transparent);
     background: var(--mix-background, var(--colors-background-default));
@@ -710,6 +714,14 @@
     background-color: var(--background-color);
 }
 
+  .left_-xxlarge {
+    left: calc(var(--spacing-xxlarge) * -1);
+}
+
+  .top_-4xsmall {
+    top: calc(var(--spacing-4xsmall) * -1);
+}
+
   .fw_bold {
     font-weight: var(--font-weights-bold);
 }
@@ -1294,6 +1306,10 @@
     text-decoration: none;
 }
 
+  .\[\&\:focus\,_\&\:focus-visible\,_\&\:active\]\:op_1:focus,.\[\&\:focus\,_\&\:focus-visible\,_\&\:active\]\:op_1:focus-visible,.\[\&\:focus\,_\&\:focus-visible\,_\&\:active\]\:op_1:active {
+    opacity: 1;
+}
+
   .focusVisible\:ring_none:is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -1391,6 +1407,14 @@
     outline-style: solid;
 }
 
+  .hover\:\[\&_\[data-copy-button\]\]\:op_1:is(:hover, [data-hover]) [data-copy-button] {
+    opacity: 1;
+}
+
+  .hover\:\[\&_\[data-copy-button\]\]\:cursor_pointer:is(:hover, [data-hover]) [data-copy-button] {
+    cursor: pointer;
+}
+
   .hover\:\[\&_\[data-byline-button\]\]\:bg_background\.default:is(:hover, [data-hover]) [data-byline-button] {
     background: var(--colors-background-default);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.9-alpha.0",
+  "version": "56.0.10-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,21 +33,16 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^15.0.8-alpha.0",
-    "@ndla/core": "^5.0.1",
-    "@ndla/hooks": "^2.1.8",
-    "@ndla/icons": "^8.0.8-alpha.0",
-    "@ndla/licenses": "^8.0.0-alpha.0",
-    "@ndla/primitives": "^1.0.8-alpha.0",
-    "@ndla/safelink": "^7.0.8-alpha.0",
-    "@ndla/styled-system": "^0.0.10",
-    "@ndla/typography": "^0.4.23",
+    "@ndla/button": "^15.0.9-alpha.0",
+    "@ndla/core": "^5.0.2",
+    "@ndla/icons": "^8.0.9-alpha.0",
+    "@ndla/licenses": "^8.0.1-alpha.0",
+    "@ndla/primitives": "^1.0.9-alpha.0",
+    "@ndla/safelink": "^7.0.9-alpha.0",
+    "@ndla/styled-system": "^0.0.11",
     "@ndla/util": "^4.1.0",
-    "date-fns": "^2.30.0",
     "html-react-parser": "^5.1.8",
-    "i18next-browser-languagedetector": "^7.1.0",
-    "punycode.js": "^2.3.1",
-    "react-device-detect": "^2.2.3"
+    "i18next-browser-languagedetector": "^7.1.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.4",
@@ -59,9 +54,9 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.18",
+    "@ndla/preset-panda": "^0.0.19",
     "@ndla/types-backend": "^0.2.86",
-    "@ndla/types-embed": "^5.0.0-alpha.0",
+    "@ndla/types-embed": "^5.0.1-alpha.0",
     "@pandacss/dev": "^0.44.0",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
@@ -72,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "82e30dcff9eca54a9d237421f24d22caf177cd09"
+  "gitHead": "62f2145f507c5365f8f5ed452de32ac43b11f155"
 }

package/src/CampaignBlock/CampaignBlock.tsx

@@ -116,8 +116,7 @@ const CampaignBlock = ({
   const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;
   const HeaderComponent = url?.url ? LinkText : Text;
   return (
-    // TODO: Remove data-type
-    <Container className={className} data-type="campaign-block" data-embed-type="campaign-block">
+    <Container className={className} data-embed-type="campaign-block">
       {imageSide === "left" && imageComponent}
       <ContentWrapper>
         <MaybeLinkText url={url?.url} path={path}>

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -8,43 +8,35 @@
 
 import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors, stackOrder } from "@ndla/core";
 import { LinkMedium } from "@ndla/icons/editor";
+import { IconButton } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { copyTextToClipboard } from "@ndla/util";
 
-const ContainerDiv = styled.div`
-  position: relative;
-  &:hover {
-    [data-copy-button] {
-      opacity: 1;
-      cursor: pointer;
-    }
-  }
-`;
-const IconButton = styled.button`
-  position: absolute;
-  left: -3em;
-  top: 0.1em;
-  background: none;
-  border: 0;
-  z-index: ${stackOrder.offsetSingle};
-  transition: 0.2s;
-  opacity: 0;
-  color: ${colors.brand.grey};
-
-  & svg {
-    width: 30px;
-    height: 30px;
-  }
+const ContainerDiv = styled("div", {
+  base: {
+    position: "relative",
+    _hover: {
+      "& [data-copy-button]": {
+        opacity: "1",
+        cursor: "pointer",
+      },
+    },
+  },
+});
 
-  &:focus,
-  &:focus-visible,
-  &:active {
-    cursor: pointer;
-    opacity: 1;
-  }
-`;
+const StyledIconButton = styled(IconButton, {
+  base: {
+    position: "absolute",
+    left: "-xxlarge",
+    top: "-4xsmall",
+    opacity: "0",
+    cursor: "pointer",
+    "&:focus, &:focus-visible, &:active": {
+      opacity: "1",
+    },
+  },
+});
 
 interface Props {
   // What to render within the h2
@@ -76,9 +68,15 @@ const CopyParagraphButton = ({ children, copyText, lang }: Props) => {
   const tooltip = hasCopied ? t("article.copyPageLinkCopied") : t("article.copyHeaderLink");
   return (
     <ContainerDiv data-embed-type="copy-heading">
-      <IconButton data-copy-button="" onClick={onCopyClick} title={tooltip} aria-label={`${tooltip}: ${copyText}`}>
+      <StyledIconButton
+        variant="clear"
+        data-copy-button=""
+        onClick={onCopyClick}
+        title={tooltip}
+        aria-label={`${tooltip}: ${copyText}`}
+      >
         <LinkMedium />
-      </IconButton>
+      </StyledIconButton>
       <h2 id={sanitizedTitle} tabIndex={-1} lang={lang}>
         {children}
       </h2>

package/src/Embed/RelatedContentEmbed.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import punycode from "punycode/";
 import { useTranslation } from "react-i18next";
 import { RelatedContentMetaData } from "@ndla/types-embed";
 import { contentTypeMapping } from "../model/ContentType";
@@ -52,12 +51,7 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
         to={embedData.url}
         target="_blank"
         type={"external"}
-        linkInfo={`${t("related.linkInfo")} ${
-          // Get domain name only from url
-          punycode.toUnicode(
-            embedData.url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im)?.[1] || embedData.url,
-          )
-        }`}
+        linkInfo={`${t("related.linkInfo")} ${embedData.urlDomain}`}
       />
     );
   }

package/src/LinkBlock/LinkBlock.tsx

@@ -6,8 +6,6 @@
  *
  */
 
-import { format } from "date-fns";
-import { enGB, nb, nn } from "date-fns/locale";
 import parse from "html-react-parser";
 import { useMemo } from "react";
 import { ArrowRightLine } from "@ndla/icons/common";
@@ -79,8 +77,11 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {
   const href = getPossiblyRelativeUrl(url, path);
   const formattedDate = useMemo(() => {
     if (!date) return null;
-    const locale = articleLanguage === "nb" ? nb : articleLanguage === "nn" ? nn : enGB;
-    return format(new Date(date), "dd. LLLL yyyy", { locale });
+    return new Intl.DateTimeFormat(articleLanguage, {
+      day: "2-digit",
+      month: "long",
+      year: "numeric",
+    }).format(new Date(date));
   }, [date, articleLanguage]);
   return (
     <StyledSafeLink to={href} data-embed-type="link-block">

package/src/ResourceBox/ResourceBox.tsx

@@ -6,11 +6,11 @@
  *
  */
 
+import { breakpoints } from "@ndla/core";
 import { ShareBoxLine } from "@ndla/icons/common";
 import { Heading, Image, Text } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
-import { token } from "@ndla/styled-system/tokens";
 
 const Container = styled("div", {
   base: {
@@ -84,7 +84,7 @@ export const ResourceBox = ({ image, title, caption, url, buttonText }: Props) =
       <StyledImage
         src={image.src}
         alt={image.alt}
-        sizes={`(min-width: ${token("breakpoints.desktop")}) 150px, (max-width: ${token("breakpoints.tablet")} ) 400px, 200px`}
+        sizes={`(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`}
       />
       <ContentWrapper>
         <Heading textStyle="label.large" fontWeight="bold" asChild consumeCss>

package/src/index.ts

@@ -109,8 +109,6 @@ export {
 
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 
-export { default as ContentPlaceholder } from "./ContentPlaceholder";
-
 export {
   TagSelectorRoot,
   TagSelectorLabel,
@@ -135,11 +133,6 @@ export { CampaignBlock } from "./CampaignBlock";
 export { Grid, GridParallaxItem } from "./Grid";
 export type { GridType } from "./Grid";
 
-export {
-  default as FrontpageArticle,
-  FRONTPAGE_ARTICLE_MAX_WIDTH,
-  WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH,
-} from "./FrontpageArticle";
 export type { ProgrammeV2 } from "./ProgrammeCard";
 
 export { Gloss, GlossExample } from "./Gloss";

package/src/locale/messages-en.ts

@@ -1117,6 +1117,10 @@ const messages = {
         subscribe: "You will now be notified of new replies to this topic",
         unsubscribe: "You have turned off notification of new replies to this topic",
         commentedOn: "commented on the post <i>{{title}}</i>",
+        button: {
+          show: "View notifications",
+          showNew: "View {{count}} new notifications",
+        },
       },
       topicsBy: "Topics by",
       admin: {

package/src/locale/messages-nb.ts

@@ -1118,6 +1118,10 @@ const messages = {
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
         unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
         commentedOn: "svarte på innlegget <i>{{title}}</i>",
+        button: {
+          show: "Vis varslinger",
+          showNew: "Vis {{count}} nye varslinger",
+        },
       },
       topicsBy: "Innlegg av",
       admin: {

package/src/locale/messages-nn.ts

@@ -1118,6 +1118,10 @@ const messages = {
         subscribe: "Du får no varsling om nye svar på dette innlegget",
         unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
         commentedOn: "svarte på innlegget <i>{{title}}</i>",
+        button: {
+          show: "Vis varsler",
+          showNew: "Vis {{count}} nye varsler",
+        },
       },
       topicsBy: "Innlegg av",
       admin: {

package/src/locale/messages-se.ts

@@ -1120,6 +1120,10 @@ const messages = {
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
         unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
         commentedOn: "svarte på innlegget <i>{{title}}</i>",
+        button: {
+          show: "Vis varslinger",
+          showNew: "Vis {{count}} nye varslinger",
+        },
       },
       topicsBy: "Innlegg av",
       admin: {

package/src/locale/messages-sma.ts

@@ -1122,6 +1122,10 @@ const messages = {
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
         unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
         commentedOn: "svarte på innlegget <i>{{title}}</i>",
+        button: {
+          show: "Vis varslinger",
+          showNew: "Vis {{count}} nye varslinger",
+        },
       },
       topicsBy: "Innlegg av",
       admin: {