@ndla/ui 54.0.6 → 55.0.0-alpha.0

package/src/LicenseByline/LicenseDescription.tsx

@@ -6,16 +6,19 @@
  *
  */
 
-import { ReactNode } from "react";
+import { t } from "i18next";
+import { ReactNode, useState } from "react";
 import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
+import { ButtonV2 } from "@ndla/button";
+import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
 
 interface Props {
-  description: ReactNode;
   icon?: ReactNode;
+  children?: ReactNode;
+  warningByline?: boolean;
 }
 
-const StyledFigCaption = styled.figcaption`
+const StyledFigCaption = styled.div`
   display: flex;
   gap: ${spacing.small};
   align-items: center;
@@ -23,18 +26,72 @@ const StyledFigCaption = styled.figcaption`
   padding: unset;
   font-size: unset;
   color: unset;
-  padding-bottom: ${spacing.xsmall};
-  border-bottom: inherit;
   p {
     margin: 0;
   }
 `;
 
-const LicenseDescription = ({ description, icon }: Props) => {
+const StyledDescription = styled.div`
+  display: inline-flex;
+  white-space: pre-wrap;
+  &[data-warning="false"] {
+    ${mq.range({ until: breakpoints.mobileWide })} {
+      &[data-open="true"] {
+        display: inline;
+      }
+      width: 100%;
+    }
+  }
+`;
+
+const TextContent = styled.span`
+  &[data-warning="false"] {
+    ${mq.range({ until: breakpoints.mobileWide })} {
+      white-space: nowrap;
+      max-height: ${spacing.mediumlarge};
+      &[data-open="true"] {
+        white-space: pre-wrap;
+        max-height: none;
+      }
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: max-height 0.7s ease-in;
+      margin: auto 0;
+    }
+  }
+`;
+
+const Button = styled(ButtonV2)`
+  color: ${colors.brand.primary};
+  font-weight: ${fonts.weight.semibold};
+  min-width: fit-content;
+  margin-left: ${spacing.small};
+  ${mq.range({ from: breakpoints.mobileWide })} {
+    display: none;
+  }
+`;
+
+const LicenseDescription = ({ icon, children, warningByline = false }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
   return (
     <StyledFigCaption>
       {icon}
-      <span>{description}</span>
+      <StyledDescription data-open={isOpen} data-warning={warningByline}>
+        <TextContent data-open={isOpen} data-warning={warningByline}>
+          {children}
+        </TextContent>
+        {!warningByline && (
+          <Button variant="link" onClick={handleToggle}>
+            {isOpen ? `${t("audio.readLessDescriptionLabel")}` : `${t("audio.readMoreDescriptionLabel")}`}
+          </Button>
+        )}
+      </StyledDescription>
     </StyledFigCaption>
   );
 };

package/src/LicenseByline/LicenseLink.tsx

@@ -7,18 +7,16 @@
  */
 
 import styled from "@emotion/styled";
-import { colors, fonts } from "@ndla/core";
+import { colors } from "@ndla/core";
+import { LicenseLocaleType } from "@ndla/licenses";
 import { SafeLink } from "@ndla/safelink";
-import { LicenseType } from "./EmbedByline";
 
 interface Props {
-  license: LicenseType;
-  asLink?: boolean;
+  license: LicenseLocaleType;
 }
 
 const StyledSafeLink = styled(SafeLink)`
   color: ${colors.brand.primary};
-  font-weight: ${fonts.weight.bold};
   text-decoration: underline;
   white-space: nowrap;
   box-shadow: none;
@@ -28,22 +26,18 @@ const StyledSafeLink = styled(SafeLink)`
   }
 `;
 
-const StyledSpan = styled.span`
-  font-weight: ${fonts.weight.bold};
-`;
-
-const LicenseLink = ({ license, asLink = true }: Props) => {
+const LicenseLink = ({ license }: Props) => {
   if (license.abbreviation === "unknown") {
     return null;
   }
-  if (asLink) {
+  if (license.url?.length) {
     return (
       <StyledSafeLink to={license.url} rel="license">
         {license.abbreviation}
       </StyledSafeLink>
     );
   }
-  return <StyledSpan>{license.abbreviation}</StyledSpan>;
+  return <span>{license.abbreviation}</span>;
 };
 
 export default LicenseLink;

package/src/Messages/MessageBox.tsx

@@ -63,6 +63,7 @@ const InfoWrapper = styled.div`
 const ChildrenWrapper = styled.div`
   display: flex;
   gap: ${spacing.small};
+  ${fonts.sizes("18px", "24px")};
   svg {
     min-width: 24px;
     min-height: 24px;

package/src/index.ts

@@ -34,7 +34,7 @@ export {
   CodeEmbed,
 } from "./Embed";
 
-export { LicenseLink } from "./LicenseByline";
+export { LicenseLink, EmbedByline } from "./LicenseByline";
 
 export {
   ArticleByline,
@@ -119,17 +119,6 @@ export { i18nInstance, formatNestedMessages } from "./i18n";
 
 export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
 
-export {
-  MediaList,
-  MediaListItem,
-  MediaListItemBody,
-  MediaListItemActions,
-  MediaListItemImage,
-  MediaListItemMeta,
-} from "./MediaList";
-
-export type { ItemType } from "./MediaList";
-
 export {
   default as ContentTypeBadge,
   SubjectMaterialBadge,

package/src/locale/messages-en.ts

@@ -300,7 +300,7 @@ const messages = {
     publisher: "Publisher",
     lastUpdated: "Last revised date",
     closeLabel: "Close",
-    useContent: "Cite or use",
+    useContent: "Cite or reuse?",
     additionalLabel: "Additional content",
     urlContributionsLabel: "See {{name}}`s contributions",
     urlAuthorLabel: "Read more about {{name}}",
@@ -317,7 +317,7 @@ const messages = {
     cite: "Cite content",
     notionsPrompt: "Do you know the notions?",
     citeNotion: "Cite this explanation",
-    printPage: "Print",
+    printPage: "Print text",
     access: {
       onlyTeacher: "This resource is accessible only to teachers who are logged in with Feide.",
     },
@@ -393,7 +393,7 @@ const messages = {
     images: {
       heading: "How to reuse images",
       description: "Remember to copy the text to be attached to the image where you use it.",
-      rules: "Rules for use of image:",
+      rules: "Rules for use of image",
       itemImage: {
         ariaLabel: "Open image in new window",
         zoomImageButtonLabel: "Expand image",
@@ -401,32 +401,40 @@ const messages = {
         expandByline: "Show byline",
         minimizeByline: "Hide byline",
       },
-      source: "Source",
-      title: "Title",
+      licenseText: "This image has the license",
+      restrictedUseText: "This image has",
     },
     text: {
       heading: "How to reuse the text",
       description: "Remember to refer to the source when reusing text.",
-      rules: "Rules for use of text:",
+      rules: "Rules for use of text",
       published: "Published",
+      licenseText: "This text has the license",
+      restrictedUseText: "This text has",
     },
     audio: {
       heading: "How to reuse audio files",
       description: "Remember to copy the text to be attached to the audio where you use it.",
-      rules: "Rules for use of audio file:",
+      rules: "Rules for use of audio file",
+      licenseText: "This audio file has the license",
+      restrictedUseText: "This audio file has",
     },
     podcast: {
       heading: "How to reuse podcasts",
       description: "Remember to copy the text to be attached to the podcast where you use it.",
-      rules: "Rules for use of podcast:",
+      rules: "Rules for use of podcast",
+      licenseText: "This podcast has the license",
+      restrictedUseText: "This podcast has",
     },
     video: {
       heading: "How to reuse videos",
       description: "Remember to copy the text to be attached to the video where you use it.",
-      rules: "Rules for use of video files:",
+      rules: "Rules for use of video files",
       itemImage: {
         ariaLabel: "Open video in new window",
       },
+      licenseText: "This video has the license",
+      restrictedUseText: "This video has",
     },
     other: {
       heading: "How to reuse other content",
@@ -438,25 +446,27 @@ const messages = {
     h5p: {
       heading: "How to reuse H5P content",
       description: "You will find guidelines for use of H5P content in the asset",
-      rules: "Rules for use of H5P:",
+      rules: "Rules for use of H5P",
+      licenseText: "This interactive task (H5P) is licensed",
+      restrictedUseText: "This interactive task (H5P) has",
     },
     concept: {
       heading: "How to reuse concept content",
       description: "Remember that built-in content might have a different license than the explanation text",
-      rules: "Rules for use of concept:",
-      title: "Title",
+      rules: "Rules for use of concept",
       embedlink: {
         heading: "How to show the concept in other content",
         description: "This url shows the concept without menu and footer",
         copyTitle: "Copy embed link",
         hasCopiedTitle: "Embed link copied",
       },
+      licenseText: "This concept has the license",
+      restrictedUseText: "This concept has",
     },
     gloss: {
       heading: "How to reuse gloss content",
       description: "Remember that built-in content might have a different license than the gloss text",
-      rules: "Rules for use of gloss:",
-      title: "Title",
+      rules: "Rules for use of gloss",
       showOrHideExamples: "Show or hide examples",
       embedlink: {
         heading: "How to show the gloss in other content",
@@ -464,17 +474,19 @@ const messages = {
         copyTitle: "Copy embed link",
         hasCopiedTitle: "Embed link copied",
       },
+      licenseText: "This gloss has the license",
+      restrictedUseText: "This gloss has",
     },
     files: {
       heading: "How to reuse files",
       description: "Remember to copy the text to be attached to the file where you use it.",
-      rules: "Rules for use of file:",
+      rules: "Rules for use of file",
       itemImage: {
         ariaLabel: "Open video in new window",
       },
     },
     learnMore: "Learn more about open licenses",
-    copyTitle: "Source reference",
+    copyTitle: "Copy source reference",
     embed: "Embed",
     embedCopied: "Copied embed code!",
     copyText: {
@@ -488,11 +500,11 @@ const messages = {
     },
     hasCopiedTitle: "Copied!",
     download: "Download",
+    openLink: "Open in new tab",
     title: "Title",
     originator: "Originator",
     rightsholder: "Rightsholder",
     processed: "The content has been processed",
-    source: "Source",
     published: "Published",
     info: "License information",
   },

package/src/locale/messages-nb.ts

@@ -299,7 +299,7 @@ const messages = {
     lastUpdated: "Sist faglig oppdatert",
     edition: "Utgave",
     publisher: "Utgiver",
-    useContent: "Regler for bruk",
+    useContent: "Sitere eller gjenbruke?",
     closeLabel: "Lukk",
     additionalLabel: "Tilleggsstoff",
     urlContributionsLabel: "Se hva {{name}} har bidratt med",
@@ -317,7 +317,7 @@ const messages = {
     cite: "Bruk innhold",
     notionsPrompt: "Kan du begrepene?",
     citeNotion: "Bruk forklaringen",
-    printPage: "Skriv ut",
+    printPage: "Skriv ut teksten",
     access: {
       onlyTeacher: "Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.",
     },
@@ -368,7 +368,7 @@ const messages = {
   license: {
     heading: "Slik gjenbruker du innhold",
     learnMore: "Lær mer om åpne lisenser",
-    copyTitle: "Kildehenvisning",
+    copyTitle: "Kopier kildehenvisning",
     copy: "Kopier",
     hasCopiedTitle: "Kopiert!",
     embed: "Bygg inn",
@@ -383,6 +383,7 @@ const messages = {
       readDate: "Lest: ",
     },
     download: "Last ned",
+    openLink: "Åpne i ny fane",
     tabs: {
       text: "Tekst",
       images: "Bilder",
@@ -408,7 +409,7 @@ const messages = {
     images: {
       heading: "Slik gjenbruker du bilder",
       description: "Husk å kopiere teksten som skal legges ved bildet der du bruker det.",
-      rules: "Regler for bruk av bildet:",
+      rules: "Regler for bruk av bildet",
       itemImage: {
         ariaLabel: "Åpne bilde i et nytt vindu",
         zoomImageButtonLabel: "Forstørr bilde",
@@ -416,32 +417,40 @@ const messages = {
         expandByline: "Vis byline",
         minimizeByline: "Skjul byline",
       },
-      source: "Kilde",
-      title: "Tittel",
+      licenseText: "Dette bildet har lisensen",
+      restrictedUseText: "Dette bildet har",
     },
     text: {
       heading: "Slik gjenbruker du teksten",
       description: "Husk å henvise til kilden når du gjenbruker tekst.",
-      rules: "Regler for bruk av teksten:",
+      rules: "Regler for bruk av teksten",
       published: "Publiseringsdato",
+      licenseText: "Denne teksten har lisensen",
+      restrictedUseText: "Denne teksten har",
     },
     audio: {
       heading: "Slik gjenbruker du lydfiler",
       description: "Husk å kopiere teksten som skal legges ved lydfilen der du bruker den.",
-      rules: "Regler for bruk av lydfilen:",
+      rules: "Regler for bruk av lydfilen",
+      licenseText: "Denne lydfilen har lisensen",
+      restrictedUseText: "Denne lydfilen har",
     },
     podcast: {
       heading: "Slik gjenbruker du podkaster",
       description: "Husk å kopiere teksten som skal legges ved podkasten der du bruker den.",
-      rules: "Regler for bruk av podkasten:",
+      rules: "Regler for bruk av podkasten",
+      licenseText: "Denne podkasten har lisensen",
+      restrictedUseText: "Denne podkasten har",
     },
     video: {
       heading: "Slik gjenbruker du videoer",
       description: "Husk å kopiere teksten som skal legges ved videoen der du bruker den.",
-      rules: "Regler for bruk av videoen:",
+      rules: "Regler for bruk av videoen",
       itemImage: {
         ariaLabel: "Åpne video i et nytt vindu",
       },
+      licenseText: "Denne videoen har lisensen",
+      restrictedUseText: "Denne videoen har",
     },
     other: {
       heading: "Slik gjenbruker du annet innhold",
@@ -453,25 +462,27 @@ const messages = {
     h5p: {
       heading: "Slik gjenbruker du H5P-innhold",
       description: "Du finner retningslinjene for bruk av innholdet i H5P-elementet",
-      rules: "Regler for bruk av H5P:",
+      rules: "Regler for bruk av H5P",
+      licenseText: "Denne interaktive oppgaven (H5P) har lisensen",
+      restrictedUseText: "Denne interaktive oppgaven (H5P) har",
     },
     concept: {
       heading: "Slik gjenbruker du forklaringer",
       description: "Husk at innebygd innhold i en forklaring kan ha en annen lisens enn selve forklaringsteksten",
-      rules: "Regler for bruk av forklaring:",
-      title: "Tittel",
+      rules: "Regler for bruk av forklaring",
       embedlink: {
         heading: "Slik viser du forklaringen i annet innhold",
         description: "Denne lenken viser forklaringen uten kontekst (meny og bunntekst)",
         copyTitle: "Kopier innbyggingslenke",
         hasCopiedTitle: "Innbyggingslenke kopiert",
       },
+      licenseText: "Denne forklaringen har lisensen",
+      restrictedUseText: "Denne forklaringen har",
     },
     gloss: {
       heading: "Slik gjenbruker du gloser",
       description: "Husk at innebygd innhold i en glose kan ha en annen lisens enn selve gloseteksten",
-      rules: "Regler for bruk av glose:",
-      title: "Tittel",
+      rules: "Regler for bruk av glose",
       showOrHideExamples: "Vis eller skjul eksempler",
       embedlink: {
         heading: "Slik viser du glosen i annet innhold",
@@ -479,11 +490,13 @@ const messages = {
         copyTitle: "Kopier innbyggingslenke",
         hasCopiedTitle: "Innbyggingslenke kopiert",
       },
+      licenseText: "Denne glosen har lisensen",
+      restrictedUseText: "Denne glosen har",
     },
     files: {
       heading: "Slik gjenbruker du filer",
       description: "Husk å kopier teksten som skal legges ved filen der du bruker den.",
-      rules: "Regler for bruk av filen:",
+      rules: "Regler for bruk av filen",
       itemImage: {
         ariaLabel: "Åpne i nytt vindu",
       },
@@ -493,7 +506,6 @@ const messages = {
     published: "Publiseringsdato",
     processed: "Innholdet har blitt bearbeidet",
     rightsholder: "Rettighetshaver",
-    source: "Kilde",
     info: "Lisensinformasjon",
   },
   errorMessage: {

package/src/locale/messages-nn.ts

@@ -300,7 +300,7 @@ const messages = {
     edition: "Utgåve",
     publisher: "Utgjevar",
     closeLabel: "Lukk",
-    useContent: "Reglar for bruk",
+    useContent: "Sitere eller gjenbruke?",
     additionalLabel: "Tilleggsstoff",
     urlContributionsLabel: "Sjå kva {{name}} har bidratt med",
     urlAuthorLabel: "Les meir om {{name}}",
@@ -317,7 +317,7 @@ const messages = {
     cite: "Bruk innhald",
     notionsPrompt: "Kan du begrepa?",
     citeNotion: "Bruk forklaringa",
-    printPage: "Skriv ut",
+    printPage: "Skriv ut teksten",
     access: {
       onlyTeacher: "Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.",
     },
@@ -368,7 +368,7 @@ const messages = {
   license: {
     heading: "Slik gjenbruker du innhald",
     learnMore: "Lær meir om opne lisensar",
-    copyTitle: "Kjeldetilvising",
+    copyTitle: "Kopier kjeldetilvising",
     copy: "Kopier",
     hasCopiedTitle: "Kopiert!",
     embed: "Bygg inn",
@@ -383,6 +383,7 @@ const messages = {
       readDate: "Lese: ",
     },
     download: "Last ned",
+    openLink: "Åpne i ny fane",
     tabs: {
       text: "Tekst",
       images: "Bilete",
@@ -408,7 +409,7 @@ const messages = {
     images: {
       heading: "Slik gjenbruker du bileta",
       description: "Hugs å kopiere teksten som skal leggjast ved biletet der du bruker det.",
-      rules: "Reglar for bruk av biletet:",
+      rules: "Reglar for bruk av biletet",
       itemImage: {
         ariaLabel: "Opne bilete i eit nytt vindauge",
         zoomImageButtonLabel: "Forstørr bilete",
@@ -416,32 +417,40 @@ const messages = {
         expandByline: "Vis byline",
         minimizeByline: "Skjul byline",
       },
-      source: "Kjelde",
-      title: "Tittel",
+      licenseText: "Dette biletet har lisensen",
+      restrictedUseText: "Dette biletet har",
     },
     text: {
       heading: "Slik gjenbruker du teksten",
       description: "Hugs å vise til kjelda når du gjenbruker tekst.",
-      rules: "Reglar for bruk av teksten:",
+      rules: "Reglar for bruk av teksten",
       published: "Publiseringsdato",
+      licenseText: "Denne teksten har lisensen",
+      restrictedUseText: "Denne teksten har",
     },
     audio: {
       heading: "Slik gjenbruker du lydfiler",
       description: "Hugs å kopiera teksten som skal leggjast ved lydfila der du bruker ho.",
-      rules: "Reglar for bruk av lydfila:",
+      rules: "Reglar for bruk av lydfila",
+      licenseText: "Denne lydfila har lisensen",
+      restrictedUseText: "Denne lydfila har",
     },
     podcast: {
       heading: "Slik gjenbruker du podkaster",
       description: "Hugs å kopiera teksten som skal leggjast ved podkasten der du bruker ho.",
-      rules: "Reglar for bruk av podkasten:",
+      rules: "Reglar for bruk av podkasten",
+      licenseText: "Denne podkasten har lisensen",
+      restrictedUseText: "Denne podkasten har",
     },
     video: {
       heading: "Slik gjenbruker du videoar",
       description: "Hugs å kopiera teksten som skal leggjast ved videoen der du bruker han.",
-      rules: "Reglar for bruk av videoen:",
+      rules: "Reglar for bruk av videoen",
       itemImage: {
         ariaLabel: "Opne video i eit nytt vindauge",
       },
+      licenseText: "Denne videoen har lisensen",
+      restrictedUseText: "Denne videoen har",
     },
     other: {
       heading: "Slik gjenbruker du anna innhald",
@@ -453,7 +462,9 @@ const messages = {
     h5p: {
       heading: "Slik gjenbruker du H5P-innhald",
       description: "Du finn retningslinjene for bruk av innhaldet i H5P-elementet.",
-      rules: "Reglar for bruk av H5P:",
+      rules: "Reglar for bruk av H5P",
+      licenseText: "Denne interaktive oppgåva (H5p) har lisensen",
+      restrictedUseText: "Denne interaktive oppgåva (H5p) har",
     },
     concept: {
       embedlink: {
@@ -464,8 +475,9 @@ const messages = {
       },
       heading: "Slik gjenbruker du forklaringar",
       description: "Husk at innebygd innhald i ei forklaring kan ha ein anna lisens enn sjølve forklaringsteksten",
-      rules: "Reglar for bruk av forklaring:",
-      title: "Tittel",
+      rules: "Reglar for bruk av forklaring",
+      licenseText: "Denne forklaringa har lisensen",
+      restrictedUseText: "Denne forklaringa har",
     },
     gloss: {
       embedlink: {
@@ -476,14 +488,15 @@ const messages = {
       },
       heading: "Slik gjenbruker du gloser",
       description: "Husk at innebygd innhald i ei glose kan ha ein anna lisens enn sjølve gloseteksten",
-      rules: "Regler for bruk av glose:",
-      title: "Tittel",
+      rules: "Regler for bruk av glose",
       showOrHideExamples: "Vis eller skjul eksempler",
+      licenseText: "Denne glosa har lisensen",
+      restrictedUseText: "Denne glosa har",
     },
     files: {
       heading: "Slik gjenbruker du filer",
       description: "Hugs å kopiere teksten som skal leggjast ved fila der du bruker ho.",
-      rules: "Regler for bruk av fila:",
+      rules: "Regler for bruk av fila",
       itemImage: {
         ariaLabel: "Opne i nytt vindauge",
       },
@@ -492,7 +505,6 @@ const messages = {
     originator: "Opphavar",
     processed: "Innhaldet har vorte omarbeidd",
     rightsholder: "Rettshavar",
-    source: "Kjelde",
     published: "Publiseringsdato",
     info: "Lisensinformasjon",
   },