@ndla/ui 54.0.0 → 54.0.1

package/lib/locale/messages-nb.js

@@ -107,6 +107,10 @@ const messages = {
   movedResourcePage: {
     title: "Siden har flyttet, men du kan finne den her:"
   },
+  unpublishedResourcePage: {
+    title: "Ressursen er avpublisert",
+    errorDescription: "Beklager, ressursen du prøvde komme til er avpublisert."
+  },
   lti: {
     embed: "Sett inn",
     notSupported: "Det fungerte ikke å sette inn innholdet automatisk. Kopier kildekoden under for å sette inn på din side."
@@ -936,11 +940,15 @@ const messages = {
       sharing: {
         share: "Del mappe",
         shared: "Delt",
+        sharedBy: "Delt av ",
+        sharedByAnonymous: "anonym lærer",
         sharedFolder: "Delt mappe",
         unShare: "Delingen er avsluttet. Mappen er ikke lenger delt.",
         copyLink: "Kopier lenke til mappa",
+        removeLink: "Fjern lenke til mappe",
         link: "Lenken er kopiert",
         savedLink: "Lenke til  {{ name }} er lagt til i Mine mapper.",
+        unSavedLink: "Lenke til  {{ name }} er fjernet fra Mine mapper.",
         header: {
           shared: "Denne mappa er delt"
         },
@@ -961,7 +969,8 @@ const messages = {
           goTo: "Gå til delt mappe",
           unShare: "Avslutt deling",
           shareLink: "Kopier lenke",
-          saveLink: "Lagre lenken"
+          saveLink: "Lagre lenken",
+          unSaveLink: "Fjern lenken"
         },
         save: {
           warning: "Dette lager en lenke til mappen i Mine mapper. Du kan enkelt finne den igjen ved å gå til Mine mapper i menyen i Min NDLA.",
@@ -1050,7 +1059,9 @@ const messages = {
           delete: "Slett innlegget"
         },
         fetchMore: "Hent flere svar",
-        deleted: "Dette innlegget er slettet av forfatteren."
+        deleted: "Dette innlegget er slettet av forfatteren.",
+        upvote: "Stem opp",
+        removeUpvote: "Fjern stemme"
       },
       flag: {
         title: "Rapporter innlegg / kommentar",
@@ -1337,7 +1348,10 @@ const messages = {
     loadMore: "Last mer"
   },
   siteNav: {
-    search: "Søk"
+    search: "Søk",
+    navigate: "Naviger med piltastene",
+    select: "Velg",
+    close: "Lukk søk"
   },
   programmes: {
     header: "Hva vil du lære om i dag?",

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

@@ -90,6 +90,10 @@ declare const messages: {
     movedResourcePage: {
         title: string;
     };
+    unpublishedResourcePage: {
+        title: string;
+        errorDescription: string;
+    };
     lti: {
         embed: string;
         notSupported: string;
@@ -919,11 +923,15 @@ declare const messages: {
             sharing: {
                 share: string;
                 shared: string;
+                sharedBy: string;
+                sharedByAnonymous: string;
                 sharedFolder: string;
                 unShare: string;
                 link: string;
-                savedLink: string;
                 copyLink: string;
+                removeLink: string;
+                savedLink: string;
+                unSavedLink: string;
                 header: {
                     shared: string;
                 };
@@ -945,6 +953,7 @@ declare const messages: {
                     unShare: string;
                     shareLink: string;
                     saveLink: string;
+                    unSaveLink: string;
                 };
                 save: {
                     warning: string;
@@ -1034,6 +1043,8 @@ declare const messages: {
                 };
                 fetchMore: string;
                 deleted: string;
+                upvote: string;
+                removeUpvote: string;
             };
             flag: {
                 title: string;
@@ -1321,6 +1332,9 @@ declare const messages: {
     };
     siteNav: {
         search: string;
+        navigate: string;
+        select: string;
+        close: string;
     };
     programmes: {
         header: string;

package/lib/locale/messages-nn.js

@@ -107,6 +107,10 @@ const messages = {
   movedResourcePage: {
     title: "Sida har flytta, men du kan finne den her:"
   },
+  unpublishedResourcePage: {
+    title: "Ressursen er avpublisert",
+    errorDescription: "Orsak, ressursen du prøvde komme til er avpublisert."
+  },
   lti: {
     embed: "Sett inn",
     notSupported: "Det fungerte ikkje å setje inn innhaldet automatisk. Kopier kjeldekoden under for å setje han inn på sida di."
@@ -936,11 +940,15 @@ const messages = {
       sharing: {
         share: "Del mappe",
         shared: "Delt",
+        sharedBy: "Delt av ",
+        sharedByAnonymous: "anonym lærar",
         sharedFolder: "Delt mappe",
         unShare: "Delinga er avslutta. Mappa er ikkje lenger delt",
         link: "Lenka er kopiert",
-        savedLink: "Lenka til  {{ name }} er lagt til i Mine mapper.",
         copyLink: "Kopier lenke til mappa",
+        removeLink: "Fjern lenke til mappe",
+        savedLink: "Lenka til  {{ name }} er lagt til i Mine mapper.",
+        unSavedLink: "Lenka til  {{ name }} er fjernet fra Mine mapper.",
         header: {
           shared: "Denne mappa er delt"
         },
@@ -961,7 +969,8 @@ const messages = {
           goTo: "Gå til delt mappe",
           unShare: "Avslutt deling",
           shareLink: "Kopier lenke",
-          saveLink: "Lagre lenka"
+          saveLink: "Lagre lenka",
+          unSaveLink: "Fjern lenken"
         },
         save: {
           warning: "Dette lagar ei lenke til mappa i Mine mapper. Du kan enkelt finne ho att ved å gå til Mine mapper i menyen i Min NDLA.",
@@ -1050,7 +1059,9 @@ const messages = {
           delete: "Slett innlegget"
         },
         fetchMore: "Hent fleire svar",
-        deleted: "Dette innlegget er sletta av forfatteren."
+        deleted: "Dette innlegget er sletta av forfatteren.",
+        upvote: "Stem opp",
+        removeUpvote: "Fjern stemme"
       },
       flag: {
         title: "Rapporter innlegg / kommentar",
@@ -1337,7 +1348,10 @@ const messages = {
     loadMore: "Last meir"
   },
   siteNav: {
-    search: "Søk"
+    search: "Søk",
+    navigate: "Naviger med piltastane",
+    select: "Velg",
+    close: "Lukk søk"
   },
   programmes: {
     header: "Kva vil du lære om i dag?",

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

@@ -90,6 +90,10 @@ declare const messages: {
     movedResourcePage: {
         title: string;
     };
+    unpublishedResourcePage: {
+        title: string;
+        errorDescription: string;
+    };
     lti: {
         embed: string;
         notSupported: string;
@@ -919,11 +923,15 @@ declare const messages: {
             sharing: {
                 share: string;
                 shared: string;
+                sharedBy: string;
+                sharedByAnonymous: string;
                 sharedFolder: string;
                 unShare: string;
                 copyLink: string;
+                removeLink: string;
                 link: string;
                 savedLink: string;
+                unSavedLink: string;
                 header: {
                     shared: string;
                 };
@@ -945,6 +953,7 @@ declare const messages: {
                     unShare: string;
                     shareLink: string;
                     saveLink: string;
+                    unSaveLink: string;
                 };
                 save: {
                     warning: string;
@@ -1034,6 +1043,8 @@ declare const messages: {
                 };
                 fetchMore: string;
                 deleted: string;
+                upvote: string;
+                removeUpvote: string;
             };
             flag: {
                 title: string;
@@ -1321,6 +1332,9 @@ declare const messages: {
     };
     siteNav: {
         search: string;
+        navigate: string;
+        select: string;
+        close: string;
     };
     programmes: {
         header: string;

package/lib/locale/messages-se.js

@@ -107,6 +107,10 @@ const messages = {
   movedResourcePage: {
     title: "Siidu lea sirdojuvvon, muhto gávnnat dan dás:"
   },
+  unpublishedResourcePage: {
+    title: "Ressursen er avpublisert",
+    errorDescription: "Beklager, ressursen du prøvde komme til er avpublisert."
+  },
   lti: {
     embed: "Deavdde",
     notSupported: "Ii lean vejolaš bidjat sisdoalu sisa automáhtalaččat. Kopiere gáldokoda vulobealde ja bija iežat siidui."
@@ -936,11 +940,15 @@ const messages = {
       sharing: {
         share: "Del mappe",
         shared: "Delt",
+        sharedBy: "Delt av ",
+        sharedByAnonymous: "anonym lærer",
         sharedFolder: "Delt mappe",
         unShare: "Delingen er avsluttet. Mappen er ikke lenger delt.",
         copyLink: "Kopier lenke til mappa",
+        removeLink: "Fjern lenke til mappe",
         link: "Lenken er kopiert",
         savedLink: "Lenke til  {{ name }} er lagt til i Mine mapper.",
+        unSavedLink: "Lenke til  {{ name }} er fjernet fra Mine mapper.",
         header: {
           shared: "Denne mappa er delt"
         },
@@ -961,7 +969,8 @@ const messages = {
           goTo: "Gå til delt mappe",
           unShare: "Avslutt deling",
           shareLink: "Kopier lenke",
-          saveLink: "Lagre lenken"
+          saveLink: "Lagre lenken",
+          unSaveLink: "Fjern lenken"
         },
         save: {
           warning: "Dette lager en lenke til mappen i Mine mapper. Du kan enkelt finne den igjen ved å gå til Mine mapper i menyen i Min NDLA.",
@@ -1050,7 +1059,9 @@ const messages = {
           delete: "Slett innlegget"
         },
         fetchMore: "Hent flere svar",
-        deleted: "Dette innlegget er slettet av forfatteren."
+        deleted: "Dette innlegget er slettet av forfatteren.",
+        upvote: "Stem opp",
+        removeUpvote: "Fjern stemme"
       },
       flag: {
         title: "Rapporter innlegg / kommentar",
@@ -1337,7 +1348,10 @@ const messages = {
     loadMore: "Viečča eanet"
   },
   siteNav: {
-    search: "Oza"
+    search: "Oza",
+    navigate: "Naviger med piltastene",
+    select: "Velg",
+    close: "Lukk søk"
   },
   programmes: {
     header: "Maid háliidat oahppat odne?",

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

@@ -90,6 +90,10 @@ declare const messages: {
     movedResourcePage: {
         title: string;
     };
+    unpublishedResourcePage: {
+        title: string;
+        errorDescription: string;
+    };
     lti: {
         embed: string;
         notSupported: string;
@@ -919,11 +923,15 @@ declare const messages: {
             sharing: {
                 share: string;
                 shared: string;
+                sharedBy: string;
+                sharedByAnonymous: string;
                 sharedFolder: string;
                 unShare: string;
                 copyLink: string;
+                removeLink: string;
                 link: string;
                 savedLink: string;
+                unSavedLink: string;
                 header: {
                     shared: string;
                 };
@@ -945,6 +953,7 @@ declare const messages: {
                     unShare: string;
                     shareLink: string;
                     saveLink: string;
+                    unSaveLink: string;
                 };
                 save: {
                     warning: string;
@@ -1034,6 +1043,8 @@ declare const messages: {
                 };
                 fetchMore: string;
                 deleted: string;
+                upvote: string;
+                removeUpvote: string;
             };
             flag: {
                 title: string;
@@ -1321,6 +1332,9 @@ declare const messages: {
     };
     siteNav: {
         search: string;
+        navigate: string;
+        select: string;
+        close: string;
     };
     programmes: {
         header: string;

package/lib/locale/messages-sma.js

@@ -107,6 +107,10 @@ const messages = {
   movedResourcePage: {
     title: "Sæjroe ij leah daesnie, men maahtah dam daesnie gaavnedh:"
   },
+  unpublishedResourcePage: {
+    title: "Ressursen er avpublisert",
+    errorDescription: "Beklager, ressursen du prøvde komme til er avpublisert."
+  },
   lti: {
     embed: "Lissehth",
     notSupported: "Idtji gåaredh sisvegem lissiehtidh. Vaeltieh kopijem gaaltijekodeste vuelielistie juktie dam dov sæjrose lissiehtidh."
@@ -936,11 +940,15 @@ const messages = {
       sharing: {
         share: "Del mappe",
         shared: "Delt",
+        sharedBy: "Delt av ",
+        sharedByAnonymous: "anonym lærer",
         sharedFolder: "Delt mappe",
         unShare: "Delingen er avsluttet. Mappen er ikke lenger delt.",
         copyLink: "Kopier lenke til mappa",
+        removeLink: "Fjern lenke til mappe",
         link: "Lenken er kopiert",
         savedLink: "Lenke til  {{ name }} er lagt til i Mine mapper.",
+        unSavedLink: "Lenke til  {{ name }} er fjernet fra Mine mapper.",
         header: {
           shared: "Denne mappa er delt"
         },
@@ -961,7 +969,8 @@ const messages = {
           goTo: "Gå til delt mappe",
           unShare: "Avslutt deling",
           shareLink: "Kopier lenke",
-          saveLink: "Lagre lenken"
+          saveLink: "Lagre lenken",
+          unSaveLink: "Fjern lenken"
         },
         save: {
           warning: "Dette lager en lenke til mappen i Mine mapper. Du kan enkelt finne den igjen ved å gå til Mine mapper i menyen i Min NDLA.",
@@ -1050,7 +1059,9 @@ const messages = {
           delete: "Slett innlegget"
         },
         fetchMore: "Hent flere svar",
-        deleted: "Dette innlegget er slettet av forfatteren."
+        deleted: "Dette innlegget er slettet av forfatteren.",
+        upvote: "Stem opp",
+        removeUpvote: "Fjern stemme"
       },
       flag: {
         title: "Rapporter innlegg / kommentar",
@@ -1337,7 +1348,10 @@ const messages = {
     loadMore: "Last mer"
   },
   siteNav: {
-    search: "Ohtsh"
+    search: "Ohtsh",
+    navigate: "Naviger med piltastene",
+    select: "Velg",
+    close: "Lukk søk"
   },
   programmes: {
     header: "Maam sïjhth daan biejjien lïeredh ?",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "54.0.0",
+  "version": "54.0.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,19 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^4.0.2",
-    "@ndla/button": "^13.0.2",
+    "@ndla/accordion": "^4.0.3",
+    "@ndla/button": "^13.0.3",
     "@ndla/core": "^5.0.1",
     "@ndla/dropdown-menu": "^1.0.38",
-    "@ndla/forms": "^8.0.2",
+    "@ndla/forms": "^8.0.3",
     "@ndla/hooks": "^2.1.7",
-    "@ndla/icons": "^6.1.5",
+    "@ndla/icons": "^6.1.6",
     "@ndla/licenses": "^7.2.6",
-    "@ndla/modal": "^6.0.1",
-    "@ndla/notion": "^7.0.1",
-    "@ndla/safelink": "^5.1.5",
+    "@ndla/modal": "^6.0.2",
+    "@ndla/notion": "^7.0.2",
+    "@ndla/safelink": "^5.1.6",
     "@ndla/tooltip": "^8.0.1",
-    "@ndla/typography": "^0.4.21",
+    "@ndla/typography": "^0.4.22",
     "@ndla/util": "^4.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c778ba48c327f14eaae3e2da21ed24b183719167"
+  "gitHead": "06462ea8a1e84faedef361152994b7d48d4cd6e3"
 }

package/src/Article/ArticleByline.tsx

@@ -9,6 +9,7 @@
 import { TFunction } from "i18next";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
 import styled from "@emotion/styled";
 import { AccordionRoot, AccordionHeader, AccordionContent, AccordionItem } from "@ndla/accordion";
 import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
@@ -103,7 +104,7 @@ const LicenseWrapper = styled.div`
 
 const StyledAccordionHeader = styled(AccordionHeader)`
   background-color: ${colors.brand.lightest};
-  font-size: ${fonts.sizes("16px", "29px")};
+  ${fonts.sizes("16px", "29px")};
   font-weight: ${fonts.weight.semibold};
 
   &[data-background-color="white"][data-state="closed"] {
@@ -133,7 +134,9 @@ const ArticleByline = ({
   bylineType = "article",
 }: Props) => {
   const { t } = useTranslation();
+  const { pathname } = useLocation();
   const [openAccordions, setOpenAccordions] = useState<string[]>([]);
+  const accordionItemValue = "rulesForUse";
 
   const onHashChange = useCallback(
     (e: HashChangeEvent) => {
@@ -148,6 +151,10 @@ const ArticleByline = ({
     [openAccordions],
   );
 
+  useEffect(() => {
+    setOpenAccordions((prev) => prev.filter((state) => state !== accordionItemValue));
+  }, [pathname]);
+
   useEffect(() => {
     window.addEventListener("hashchange", onHashChange);
     return () => window.removeEventListener("hashchange", onHashChange);
@@ -181,7 +188,7 @@ const ArticleByline = ({
       )}
       <AccordionRoot type="multiple" onValueChange={setOpenAccordions} value={openAccordions}>
         {licenseBox && (
-          <AccordionItem value="rulesForUse">
+          <AccordionItem value={accordionItemValue}>
             <StyledAccordionHeader headingLevel="h2" data-background-color={accordionHeaderVariant}>
               {t("article.useContent")}
             </StyledAccordionHeader>

package/src/Article/ArticleParagraph.tsx

@@ -17,6 +17,9 @@ const StyledParagraph = styled.p`
   &[data-align="center"] {
     text-align: center;
   }
+  &:has(span[dir="rtl"]) {
+    direction: rtl;
+  }
 `;
 
 export const ArticleParagraph = (props: Props) => <StyledParagraph {...props} />;

package/src/BlogPost/BlogPost.tsx

@@ -84,12 +84,13 @@ const StyledImg = styled.img`
 const BlogPost = ({ title, author, url, metaImage, headingLevel: Heading = "h3", size = "normal", path }: Props) => {
   const { t } = useTranslation();
   const href = getPossiblyRelativeUrl(url, path);
+  const imageWidth = size === "large" ? 532 : 350;
   return (
     <Container data-size={size} to={href}>
       <Heading className="blog-title" css={headingCss}>
         {parse(title)}
       </Heading>
-      <StyledImg src={metaImage.url} alt={metaImage.alt} />
+      <StyledImg src={`${metaImage.url}?width=${imageWidth}`} alt={metaImage.alt} />
       {!!author && <AuthorContainer aria-label={t("article.writtenBy", { authors: author })}>{author}</AuthorContainer>}
     </Container>
   );

package/src/CampaignBlock/CampaignBlock.tsx

@@ -91,7 +91,7 @@ const CampaignBlock = ({
 }: Props) => {
   return (
     <Container className={className} data-type="campaign-block" data-image-side={imageSide}>
-      {image && <StyledImg src={image.src} height={200} width={240} alt={image.alt} />}
+      {image && <StyledImg src={`${image.src}?width=240`} height={200} width={240} alt={image.alt} />}
       <TextWrapper>
         <Heading css={headingStyle}>{parse(title)}</Heading>
         <StyledDescription>{parse(description)}</StyledDescription>

package/src/CodeBlock/CodeBlock.tsx

@@ -70,7 +70,7 @@ const StyledPre = styled.pre`
     display: block;
     ${fonts.sizes("14px", "20px")};
     font-family:
-      Source Code Pro,
+      Source Code ProVariable,
       Monaco;
     margin: 0;
     padding: 0;

package/src/KeyFigure/KeyFigure.tsx

@@ -65,7 +65,7 @@ interface Props {
 const KeyFigure = ({ image, title, subtitle }: Props) => {
   return (
     <ContentWrapper>
-      <StyledImage src={image?.src} width={150} height={150} alt={image?.alt} />
+      <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />
       <TitleWrapper>{parse(title)}</TitleWrapper>
       <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>
     </ContentWrapper>

package/src/MyNdla/Resource/Folder.stories.tsx

@@ -57,6 +57,7 @@ export default {
       </DropdownMenu>
     ),
     isShared: true,
+    isOwner: true,
   },
 } as Meta<typeof Folder>;
 
@@ -66,6 +67,10 @@ export const WithoutMenu: StoryObj<typeof Folder> = {
   args: { menu: undefined },
 };
 
+export const SharedByOthers: StoryObj<typeof Folder> = {
+  args: { author: "Lise Lærer", isOwner: false },
+};
+
 const BlockWrapper = styled.div`
   display: flex;
   gap: ${spacing.small};

package/src/MyNdla/Resource/Folder.tsx

@@ -10,7 +10,7 @@ import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { fonts, spacing, colors, mq, breakpoints, stackOrder } from "@ndla/core";
-import { FileDocumentOutline, Share } from "@ndla/icons/common";
+import { FileDocumentOutline, Share, Link } from "@ndla/icons/common";
 import { FolderOutlined, FolderSharedOutlined } from "@ndla/icons/contentType";
 import { ResourceTitleLink } from "../../Resource/resourceComponents";
 
@@ -147,6 +147,7 @@ const Count = ({ type, count, layoutType }: IconCountProps) => {
 interface Props {
   id: string;
   title: string;
+  author?: string;
   subFolders?: number;
   subResources?: number;
   description?: string;
@@ -154,11 +155,33 @@ interface Props {
   type?: LayoutType;
   menu?: ReactNode;
   isShared?: boolean;
+  isOwner?: boolean;
 }
 
-const Folder = ({ id, link, title, subFolders, subResources, type = "list", menu, isShared }: Props) => {
+const getIcon = (isOwner: boolean, isShared?: boolean) => {
+  if (!isOwner) {
+    return Link;
+  } else if (isShared) {
+    return FolderSharedOutlined;
+  } else {
+    return FolderOutlined;
+  }
+};
+
+const Folder = ({
+  id,
+  link,
+  title,
+  author,
+  subFolders,
+  subResources,
+  type = "list",
+  menu,
+  isShared,
+  isOwner = true,
+}: Props) => {
   const { t } = useTranslation();
-  const Icon = isShared ? FolderSharedOutlined : FolderOutlined;
+  const Icon = getIcon(isOwner, isShared);
 
   return (
     <FolderWrapper data-type={type} id={id}>
@@ -177,14 +200,24 @@ const Folder = ({ id, link, title, subFolders, subResources, type = "list", menu
       <MenuWrapper>
         <CountContainer data-type={type}>
           {isShared && (
-            // Information regarding the shared status of a folder is read previously, ignore this
-            <IconTextWrapper aria-hidden>
+            <IconTextWrapper>
               <Share />
-              <span>{t("myNdla.folder.sharing.shared")}</span>
+              {!isOwner ? (
+                <span>
+                  {t("myNdla.folder.sharing.sharedBy")}
+                  {author ? `${author}` : t("myNdla.folder.sharing.sharedByAnonymous")}
+                </span>
+              ) : (
+                <span aria-hidden>{t("myNdla.folder.sharing.shared")}</span>
+              )}
             </IconTextWrapper>
           )}
-          <Count layoutType={type} type={"folder"} count={subFolders} />
-          <Count layoutType={type} type={"resource"} count={subResources} />
+          {isOwner && (
+            <>
+              <Count layoutType={type} type={"folder"} count={subFolders} />
+              <Count layoutType={type} type={"resource"} count={subResources} />
+            </>
+          )}
         </CountContainer>
         {menu}
       </MenuWrapper>

package/src/ResourceBox/ResourceBox.tsx

@@ -32,12 +32,12 @@ const ResourceBoxContainer = styled.div`
 
 const Title = styled.h3`
   font-weight: ${fonts.weight.bold};
-  font-size: ${fonts.sizes(18)};
+  ${fonts.sizes(18)};
   margin-top: 0;
 `;
 
 const Caption = styled.p`
-  font-size: ${fonts.sizes(14)};
+  ${fonts.sizes(14)};
 `;
 
 const ContentWrapper = styled.div`