@ndla/ui 56.0.38-alpha.0 → 56.0.40-alpha.0

package/src/LicenseByline/EmbedByline.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ReactNode, useState } from "react";
+import { Dispatch, ReactNode, SetStateAction, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AlertLine } from "@ndla/icons/common";
 import { getLicenseByAbbreviation, getLicenseCredits } from "@ndla/licenses";
@@ -78,7 +78,6 @@ const BylineWrapper = styled("figcaption", {
     display: "flex",
     flexDirection: "column",
     paddingBlock: "xsmall",
-    background: "surface.default",
     textStyle: "label.medium",
     color: "text.subtle",
   },
@@ -216,10 +215,11 @@ const StyledButton = styled(Button, {
 
 interface LicenseDescriptionProps {
   children?: ReactNode;
+  isOpen: Boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-const LicenseDescription = ({ children }: LicenseDescriptionProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+const LicenseDescription = ({ children, isOpen, setIsOpen }: LicenseDescriptionProps) => {
   const open = isOpen ? { "data-open": "" } : {};
   const { t } = useTranslation();
 
@@ -244,6 +244,7 @@ export const LicenseContainerContent = ({ children, copyright, type }: LicenseCo
   const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? "", i18n.language) : undefined;
   const authors = getLicenseCredits(copyright);
   const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const content = (
     <>
@@ -254,14 +255,18 @@ export const LicenseContainerContent = ({ children, copyright, type }: LicenseCo
       {license ? (
         <>
           {" / "}
-          <LicenseLink license={license} />
+          {<LicenseLink license={license} hideLink={!isOpen && !!children} />}
         </>
       ) : null}
     </>
   );
 
   if (children) {
-    return <LicenseDescription>{content}</LicenseDescription>;
+    return (
+      <LicenseDescription isOpen={isOpen} setIsOpen={setIsOpen}>
+        {content}
+      </LicenseDescription>
+    );
   }
 
   return (

package/src/LicenseByline/LicenseLink.tsx

@@ -12,6 +12,7 @@ import { styled } from "@ndla/styled-system/jsx";
 
 interface Props {
   license: LicenseLocaleType;
+  hideLink?: boolean;
 }
 
 const StyledSafeLink = styled(SafeLink, {
@@ -25,16 +26,22 @@ const StyledSafeLink = styled(SafeLink, {
     _focusWithin: {
       textDecoration: "none",
     },
+    mobileWideDown: {
+      _disabled: {
+        display: "none",
+      },
+    },
   },
 });
 
-export const LicenseLink = ({ license }: Props) => {
+export const LicenseLink = ({ license, hideLink }: Props) => {
+  const disabled = hideLink ? { "data-disabled": "" } : {};
   if (license.abbreviation === "unknown") {
     return null;
   }
   if (license.url?.length) {
     return (
-      <StyledSafeLink to={license.url} rel="license">
+      <StyledSafeLink to={license.url} rel="license" {...disabled}>
         {license.abbreviation}
       </StyledSafeLink>
     );

package/src/index.ts

@@ -31,6 +31,7 @@ export {
   CopyrightEmbed,
   CodeEmbed,
   InlineTriggerButton,
+  EmbedWrapper,
 } from "./Embed";
 
 export { LicenseLink, EmbedByline } from "./LicenseByline";

package/src/locale/messages-en.ts

@@ -1247,11 +1247,8 @@ const messages = {
         "Learning paths and multidisciplinary cases cannot be shown directly in a shared folder. You can open the learning path in a new tab by clicking the link in the navigation menu to the left.",
       drawerButton: "Show folders and resources",
       drawerTitle: "Folders and resources",
-      description: {
-        all: "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.\n\nYou can use the menu to navigate through the articles.",
-        info1:
-          "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.",
-      },
+      description:
+        "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.",
       willOpenInNewTab: "Opens in a new tab.",
     },
     myPage: {
@@ -1440,9 +1437,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "You can find alternative content in the article",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjective",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-nb.ts

@@ -1247,11 +1247,8 @@ const messages = {
         "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1:
-          "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
-      },
+      description:
+        "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane.",
     },
     myPage: {
@@ -1440,9 +1437,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-nn.ts

@@ -1247,11 +1247,8 @@ const messages = {
       drawerTitle: "Mapper og ressursar",
       learningpathUnsupported:
         "Læringsstiar og tverrfaglege caser kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.",
-      description: {
-        all: "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.\n\nDu kan bla i artiklane ved å bruke menyen.",
-        info1:
-          "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.",
-      },
+      description:
+        "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.",
       willOpenInNewTab: "Blir opna i ny fane.",
     },
     myPage: {
@@ -1439,9 +1436,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhald i artikkelen",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-se.ts

@@ -1249,11 +1249,8 @@ const messages = {
         "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1:
-          "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
-      },
+      description:
+        "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane.",
     },
     myPage: {
@@ -1442,9 +1439,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiivvat",
     [wordClass.wordClass.adverb]: "Advearba",

package/src/locale/messages-sma.ts

@@ -1251,11 +1251,8 @@ const messages = {
         "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1:
-          "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
-      },
+      description:
+        "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane.",
     },
     myPage: {
@@ -1444,9 +1441,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",