@ndla/ui 56.0.19-alpha.0 → 56.0.20-alpha.0

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

@@ -986,6 +986,8 @@ declare const messages: {
                 posts: string;
                 posts_plural: string;
                 subcategory: string;
+                votes: string;
+                votes_plural: string;
             };
             publish: string;
             cancel: {
@@ -1048,6 +1050,8 @@ declare const messages: {
                 unlock: string;
                 lockDescription: string;
                 unlockDescription: string;
+                votes: string;
+                votes_plural: string;
             };
             posts: {
                 title: string;
@@ -1425,18 +1429,18 @@ declare const messages: {
             page: string;
         };
         imageSearch: {
-            close: string;
             searchPlaceholder: string;
             searchButtonTitle: string;
-            useImageTitle: string;
-            checkboxLabel: string;
-            imageMetadata: {
+            imagePreview: {
                 creatorsLabel: string;
                 license: string;
                 caption: string;
                 altText: string;
                 modelRelease: string;
                 tags: string;
+                checkboxLabel: string;
+                close: string;
+                useImageTitle: string;
             };
         };
         audioSearch: {

package/lib/locale/messages-nb.js

@@ -1002,7 +1002,9 @@ const messages = {
         title: "Kategorier",
         posts: "innlegg",
         posts_plural: "innlegg",
-        subcategory: "Tema"
+        subcategory: "Tema",
+        votes: "reaksjon",
+        votes_plural: "reaksjoner"
       },
       publish: "Publiser",
       cancel: {
@@ -1064,7 +1066,9 @@ const messages = {
         locked: "Lås innlegg",
         unlock: "Lås opp innlegg",
         lockDescription: "Vil du låse dette innlegget? Dette vil gjøre at innlegget ikke kan få flere kommentarer, og vil vises som låst.",
-        unlockDescription: "Vil du låse opp dette innlegget? Dette vil gjøre at innlegget kan få flere kommentarer."
+        unlockDescription: "Vil du låse opp dette innlegget? Dette vil gjøre at innlegget kan få flere kommentarer.",
+        votes: "reaksjon",
+        votes_plural: "reaksjoner"
       },
       posts: {
         title: "Innlegg",
@@ -1093,12 +1097,12 @@ const messages = {
         maxLength: "Maksimal lengde for tekstfeltet er nådd",
         error: "Feltet er påkrevd"
       },
-      bottomText: "Savner du en kategori? Gi vår moderator beskjed på ",
+      bottomText: "Savner du en kategori? Du kan be om nye kategorier. Bruk 'Spør NDLA' eller send en epost til ",
       moderatorEmail: "moderator@ndla.no",
       notification: {
         title: "Varslinger",
         showAll: "Se alle varslinger",
-        description: "Velkommen inn i arenaen for lærere i videregående opplæring! Dette er <em>din</em> arena: et faglig møtested for diskusjon, inspirasjon, deling og utviklende samarbeid.",
+        description: "Velkommen til NDLAs Arena. Her kan du diskutere, dele og samarbeide med andre lærere fra hele Norge.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
@@ -1476,18 +1480,18 @@ const messages = {
       page: "Side {{page}}"
     },
     imageSearch: {
-      close: "Lukk",
       searchPlaceholder: "Søk i bilder",
       searchButtonTitle: "Søk",
-      useImageTitle: "Bruk bildet",
-      checkboxLabel: "Sett som metabilde",
-      imageMetadata: {
+      imagePreview: {
         creatorsLabel: "Bilde",
         license: "Lisens",
         caption: "Bildetekst",
         altText: "Alt-tekst",
         modelRelease: "Modellklarert",
-        tags: "Emneknagger"
+        tags: "Emneknagger",
+        checkboxLabel: "Sett som metabilde",
+        close: "Lukk",
+        useImageTitle: "Bruk bildet"
       }
     },
     audioSearch: {

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

@@ -986,6 +986,8 @@ declare const messages: {
                 posts: string;
                 posts_plural: string;
                 subcategory: string;
+                votes: string;
+                votes_plural: string;
             };
             publish: string;
             cancel: {
@@ -1040,6 +1042,8 @@ declare const messages: {
                 unlock: string;
                 lockDescription: string;
                 unlockDescription: string;
+                votes: string;
+                votes_plural: string;
             };
             deleted: {
                 post: string;
@@ -1425,18 +1429,18 @@ declare const messages: {
             page: string;
         };
         imageSearch: {
-            close: string;
             searchPlaceholder: string;
             searchButtonTitle: string;
-            useImageTitle: string;
-            checkboxLabel: string;
-            imageMetadata: {
+            imagePreview: {
                 creatorsLabel: string;
                 license: string;
                 caption: string;
                 altText: string;
                 modelRelease: string;
                 tags: string;
+                checkboxLabel: string;
+                close: string;
+                useImageTitle: string;
             };
         };
         audioSearch: {

package/lib/locale/messages-nn.js

@@ -1002,7 +1002,9 @@ const messages = {
         title: "Kategoriar",
         posts: "innlegg",
         posts_plural: "innlegg",
-        subcategory: "Tema"
+        subcategory: "Tema",
+        votes: "reaksjon",
+        votes_plural: "reaksjonar"
       },
       publish: "Publiser",
       cancel: {
@@ -1056,7 +1058,9 @@ const messages = {
         locked: "Lås innlegg",
         unlock: "Lås opp innlegg",
         lockDescription: "Vil du låse dette innlegget? Dette vil gjera at innlegget ikkje kan få fleire kommentarar, og vil visast som låst.",
-        unlockDescription: "Vil du låse opp dette innlegget? Dette vil gjera at innlegget kan få fleire kommentarar."
+        unlockDescription: "Vil du låse opp dette innlegget? Dette vil gjera at innlegget kan få fleire kommentarar.",
+        votes: "reaksjon",
+        votes_plural: "reaksjonar"
       },
       deleted: {
         post: "Kommentaren din har blitt sletta.",
@@ -1093,12 +1097,12 @@ const messages = {
         maxLength: "Maksimal lengd for tekstfeltet er nådd",
         error: "Feltet er påkravd"
       },
-      bottomText: "Saknar du ein kategori? Gi moderatoren vår beskjed på ",
+      bottomText: "Saknar du ein kategori? Du kan be om nye kategoriar. Bruk 'Spør NDLA' eller send ein epost til ",
       moderatorEmail: "moderator@ndla.no",
       notification: {
         title: "Varslingar",
         showAll: "Sjå alle varslingar",
-        description: "Velkommen inn i arenaen for lærarar i vidaregåande opplæring! Dette er <em>din</em> arena: ein fagleg møtestad for diskusjon, inspirasjon, deling og utviklande samarbeid.",
+        description: "Velkommen til NDLA sin Arena. Her kan du diskutere, dele og samarbeide med andre lærarar frå heile Noreg.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får no varsling om nye svar på dette innlegget",
@@ -1476,18 +1480,18 @@ const messages = {
       page: "Side {{page}}"
     },
     imageSearch: {
-      close: "Lukk",
       searchPlaceholder: "Søk i bilete",
       searchButtonTitle: "Søk",
-      useImageTitle: "Bruk biletet",
-      checkboxLabel: "Sett som metabilete",
-      imageMetadata: {
+      imagePreview: {
         creatorsLabel: "Bilete",
         license: "Lisens",
         caption: "Bildetekst",
         altText: "Alt-tekst",
         modelRelease: "Modellklarert",
-        tags: "Emneknaggar"
+        tags: "Emneknaggar",
+        checkboxLabel: "Sett som metabilete",
+        close: "Lukk",
+        useImageTitle: "Bruk biletet"
       }
     },
     audioSearch: {

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

@@ -986,6 +986,8 @@ declare const messages: {
                 posts: string;
                 posts_plural: string;
                 subcategory: string;
+                votes: string;
+                votes_plural: string;
             };
             publish: string;
             cancel: {
@@ -1048,6 +1050,8 @@ declare const messages: {
                 unlock: string;
                 lockDescription: string;
                 unlockDescription: string;
+                votes: string;
+                votes_plural: string;
             };
             posts: {
                 title: string;
@@ -1425,18 +1429,18 @@ declare const messages: {
             page: string;
         };
         imageSearch: {
-            close: string;
             searchPlaceholder: string;
             searchButtonTitle: string;
-            useImageTitle: string;
-            checkboxLabel: string;
-            imageMetadata: {
+            imagePreview: {
                 creatorsLabel: string;
                 license: string;
                 caption: string;
                 altText: string;
                 modelRelease: string;
                 tags: string;
+                checkboxLabel: string;
+                close: string;
+                useImageTitle: string;
             };
         };
         audioSearch: {

package/lib/locale/messages-se.js

@@ -1002,7 +1002,9 @@ const messages = {
         title: "Kategorier",
         posts: "innlegg",
         posts_plural: "innlegg",
-        subcategory: "Tema"
+        subcategory: "Tema",
+        votes: "reaksjon",
+        votes_plural: "reaksjoner"
       },
       publish: "Publiser",
       cancel: {
@@ -1064,7 +1066,9 @@ const messages = {
         locked: "Lås innlegg",
         unlock: "Lås opp innlegg",
         lockDescription: "Vil du låse dette innlegget? Dette vil gjøre at innlegget ikke kan få flere kommentarer, og vil vises som låst.",
-        unlockDescription: "Vil du låse opp dette innlegget? Dette vil gjøre at innlegget kan få flere kommentarer."
+        unlockDescription: "Vil du låse opp dette innlegget? Dette vil gjøre at innlegget kan få flere kommentarer.",
+        votes: "reaksjon",
+        votes_plural: "reaksjoner"
       },
       posts: {
         title: "Innlegg",
@@ -1093,12 +1097,12 @@ const messages = {
         maxLength: "Maksimal lengde for tekstfeltet er nådd",
         error: "Feltet er påkrevd"
       },
-      bottomText: "Savner du en kategori? Gi vår moderator beskjed på ",
+      bottomText: "Savner du en kategori? Du kan be om nye kategorier. Bruk 'Spør NDLA' eller send en epost til ",
       moderatorEmail: "moderator@ndla.no",
       notification: {
         title: "Varslinger",
         showAll: "Se alle varslinger",
-        description: "Velkommen inn i arenaen for lærere i videregående opplæring! Dette er <em>din</em> arena: et faglig møtested for diskusjon, inspirasjon, deling og utviklende samarbeid.",
+        description: "Velkommen til NDLAs Arena. Her kan du diskutere, dele og samarbeide med andre lærere fra hele Norge.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
@@ -1476,18 +1480,18 @@ const messages = {
       page: "Side {{page}}"
     },
     imageSearch: {
-      close: "Lukk",
       searchPlaceholder: "Søk i bilder",
       searchButtonTitle: "Søk",
-      useImageTitle: "Bruk bildet",
-      checkboxLabel: "Sett som metabilde",
-      imageMetadata: {
+      imagePreview: {
         creatorsLabel: "Bilde",
         license: "Lisens",
         caption: "Bildetekst",
         altText: "Alt-tekst",
         modelRelease: "Modellklarert",
-        tags: "Emneknagger"
+        tags: "Emneknagger",
+        checkboxLabel: "Sett som metabilde",
+        close: "Lukk",
+        useImageTitle: "Bruk bildet"
       }
     },
     audioSearch: {

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

@@ -986,6 +986,8 @@ declare const messages: {
                 posts: string;
                 posts_plural: string;
                 subcategory: string;
+                votes: string;
+                votes_plural: string;
             };
             publish: string;
             cancel: {
@@ -1048,6 +1050,8 @@ declare const messages: {
                 unlock: string;
                 lockDescription: string;
                 unlockDescription: string;
+                votes: string;
+                votes_plural: string;
             };
             posts: {
                 title: string;
@@ -1425,18 +1429,18 @@ declare const messages: {
             page: string;
         };
         imageSearch: {
-            close: string;
             searchPlaceholder: string;
             searchButtonTitle: string;
-            useImageTitle: string;
-            checkboxLabel: string;
-            imageMetadata: {
+            imagePreview: {
                 creatorsLabel: string;
                 license: string;
                 caption: string;
                 altText: string;
                 modelRelease: string;
                 tags: string;
+                checkboxLabel: string;
+                close: string;
+                useImageTitle: string;
             };
         };
         audioSearch: {

package/lib/locale/messages-sma.js

@@ -1002,7 +1002,9 @@ const messages = {
         title: "Kategorier",
         posts: "innlegg",
         posts_plural: "innlegg",
-        subcategory: "Tema"
+        subcategory: "Tema",
+        votes: "reaksjon",
+        votes_plural: "reaksjoner"
       },
       publish: "Publiser",
       cancel: {
@@ -1064,7 +1066,9 @@ const messages = {
         locked: "Lås innlegg",
         unlock: "Lås opp innlegg",
         lockDescription: "Vil du låse dette innlegget? Dette vil gjøre at innlegget ikke kan få flere kommentarer, og vil vises som låst.",
-        unlockDescription: "Vil du låse opp dette innlegget? Dette vil gjøre at innlegget kan få flere kommentarer."
+        unlockDescription: "Vil du låse opp dette innlegget? Dette vil gjøre at innlegget kan få flere kommentarer.",
+        votes: "reaksjon",
+        votes_plural: "reaksjoner"
       },
       posts: {
         title: "Innlegg",
@@ -1093,12 +1097,12 @@ const messages = {
         maxLength: "Maksimal lengde for tekstfeltet er nådd",
         error: "Feltet er påkrevd"
       },
-      bottomText: "Savner du en kategori? Gi vår moderator beskjed på ",
+      bottomText: "Savner du en kategori? Du kan be om nye kategorier. Bruk 'Spør NDLA' eller send en epost til ",
       moderatorEmail: "moderator@ndla.no",
       notification: {
         title: "Varslinger",
         showAll: "Se alle varslinger",
-        description: "Velkommen inn i arenaen for lærere i videregående opplæring! Dette er <em>din</em> arena: et faglig møtested for diskusjon, inspirasjon, deling og utviklende samarbeid.",
+        description: "Velkommen til NDLAs Arena. Her kan du diskutere, dele og samarbeide med andre lærere fra hele Norge.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
@@ -1476,18 +1480,18 @@ const messages = {
       page: "Side {{page}}"
     },
     imageSearch: {
-      close: "Lukk",
       searchPlaceholder: "Søk i bilder",
       searchButtonTitle: "Søk",
-      useImageTitle: "Bruk bildet",
-      checkboxLabel: "Sett som metabilde",
-      imageMetadata: {
+      imagePreview: {
         creatorsLabel: "Bilde",
         license: "Lisens",
         caption: "Bildetekst",
         altText: "Alt-tekst",
         modelRelease: "Modellklarert",
-        tags: "Emneknagger"
+        tags: "Emneknagger",
+        checkboxLabel: "Sett som metabilde",
+        close: "Lukk",
+        useImageTitle: "Bruk bildet"
       }
     },
     audioSearch: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.19-alpha.0",
+  "version": "56.0.20-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,11 +34,11 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.13-alpha.0",
+    "@ndla/icons": "^8.0.14-alpha.0",
     "@ndla/licenses": "^8.0.2-alpha.0",
-    "@ndla/primitives": "^1.0.17-alpha.0",
-    "@ndla/safelink": "^7.0.17-alpha.0",
-    "@ndla/styled-system": "^0.0.15",
+    "@ndla/primitives": "^1.0.18-alpha.0",
+    "@ndla/safelink": "^7.0.18-alpha.0",
+    "@ndla/styled-system": "^0.0.16",
     "@ndla/util": "^4.1.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
@@ -53,7 +53,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.23",
+    "@ndla/preset-panda": "^0.0.24",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.1-alpha.0",
     "@pandacss/dev": "^0.45.2",
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "58687255a5be26e49b6a21d830cf0af5be37b9fa"
+  "gitHead": "66b3b382188ec1730fa409d4adb3672942f00670"
 }

package/src/Concept/Concept.tsx

@@ -22,6 +22,7 @@ export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
   title?: string;
   children?: ReactNode;
   source?: string;
+  previewAlt?: boolean;
 }
 
 const StyledFigure = styled(Figure, {
@@ -45,7 +46,7 @@ const ContentWrapper = styled("div", {
 // TODO: Figure out if we need to support headerButtons.
 
 export const Concept = forwardRef<HTMLElement, ConceptProps>(
-  ({ copyright, visualElement, lang, children, title, source, ...rest }, ref) => {
+  ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {
     const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);
 
     return (
@@ -60,7 +61,7 @@ export const Concept = forwardRef<HTMLElement, ConceptProps>(
           {children}
         </ContentWrapper>
         {visualElement?.resource === "image" ? (
-          <ImageEmbed embed={visualElement} lang={lang} />
+          <ImageEmbed embed={visualElement} lang={lang} previewAlt={previewAlt} />
         ) : visualElement?.resource === "brightcove" ? (
           <BrightcoveEmbed embed={visualElement} />
         ) : visualElement?.resource === "h5p" ? (

package/src/Embed/ConceptEmbed.tsx

@@ -21,6 +21,7 @@ import { Concept, ConceptProps } from "../Concept/Concept";
 interface BaseProps {
   renderContext?: RenderContext;
   lang?: string;
+  previewAlt?: boolean;
 }
 
 interface Props extends BaseProps {
@@ -35,7 +36,7 @@ const StyledPopoverContent = styled(PopoverContent, {
   },
 });
 
-export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
+export const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }: Props) => {
   const parsedContent = useMemo(() => {
     if (embed.status === "error" || !embed.data.concept.content) return undefined;
     return parse(embed.data.concept.content.htmlContent);
@@ -58,6 +59,7 @@ export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
   if (embed.embedData.type === "inline") {
     return (
       <InlineConcept
+        previewAlt={previewAlt}
         linkText={embed.embedData.linkText}
         copyright={concept.copyright}
         visualElement={visualElement}
@@ -72,6 +74,7 @@ export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
 
   return (
     <BlockConcept
+      previewAlt={previewAlt}
       copyright={concept.copyright}
       visualElement={visualElement}
       lang={lang}

package/src/i18n/useComponentTranslations.ts

@@ -84,24 +84,24 @@ interface AudioSearchTranslations {
   paginationTranslations: PaginationRootProps["translations"];
 }
 
-interface MetadataTranslations {
+export interface PreviewTranslations {
   creatorsLabel: string;
   license: string;
   caption: string;
   altText: string;
   modelRelease: string;
   tags: string;
+  close: string;
+  checkboxLabel?: string;
+  missingTitleFallback?: string;
+  useImageTitle: string;
 }
 
-interface ImageSearchTranslations {
+export interface ImageSearchTranslations {
   searchPlaceholder: string;
   searchButtonTitle: string;
-  useImageTitle: string;
-  close: string;
-  imageMetadata: MetadataTranslations;
+  imagePreview: PreviewTranslations;
   paginationTranslations: PaginationRootProps["translations"];
-  missingTitleFallback?: string;
-  checkboxLabel?: string;
 }
 
 export const useImageSearchTranslations = (
@@ -110,21 +110,22 @@ export const useImageSearchTranslations = (
   const { t } = useTranslation("translation", { keyPrefix: "component.imageSearch" });
   const paginationTranslations = usePaginationTranslations();
 
-  const { imageMetadata, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;
+  const { imagePreview, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;
 
   return {
-    close: t("close"),
     searchPlaceholder: t("searchPlaceholder"),
     searchButtonTitle: t("searchButtonTitle"),
-    useImageTitle: t("useImageTitle"),
-    imageMetadata: {
-      creatorsLabel: t("imageMetadata.creatorsLabel"),
-      license: t("imageMetadata.license"),
-      caption: t("imageMetadata.caption"),
-      altText: t("imageMetadata.altText"),
-      modelRelease: t("imageMetadata.modelRelease"),
-      tags: t("imageMetadata.tags"),
-      ...imageMetadata,
+    imagePreview: {
+      creatorsLabel: t("imagePreview.creatorsLabel"),
+      license: t("imagePreview.license"),
+      caption: t("imagePreview.caption"),
+      altText: t("imagePreview.altText"),
+      modelRelease: t("imagePreview.modelRelease"),
+      tags: t("imagePreview.tags"),
+      close: t("close"),
+      checkboxLabel: t("imagePreview.checkboxLabel"),
+      useImageTitle: t("imagePreview.useImageTitle"),
+      ...imagePreview,
     },
     paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },
     ...remaining,

package/src/locale/messages-en.ts

@@ -1014,6 +1014,8 @@ const messages = {
         posts: "post",
         posts_plural: "posts",
         subcategory: "Subcategories",
+        votes: "reaction",
+        votes_plural: "reactions",
       },
       cancel: {
         title: {
@@ -1077,6 +1079,8 @@ const messages = {
         unlock: "Unlock topic",
         lockDescription: "Do you want do lock this topic? This will prevent this topic from getting more posts.",
         unlockDescription: "Do you want do unlock this topic? This will prevent this topic from getting more posts.",
+        votes: "reaction",
+        votes_plural: "reactions",
       },
       posts: {
         title: "Posts",
@@ -1107,13 +1111,13 @@ const messages = {
         maxLength: "The maximum length for the text field is reached",
         error: "The field is required",
       },
-      bottomText: "Are you missing a category? Let our moderator know at ",
+      bottomText: "Are you missing a category? You can request new categories. Use 'Ask NDLA' or send an email to ",
       moderatorEmail: "moderator@ndla.no",
       notification: {
         title: "Notifications",
         showAll: "View all notifications",
         description:
-          "Welcome to the arena for teachers in upper secondary education. This is <em>your</em> arena: a professional meeting place for discussion, inspiration, sharing, development, and collaboration.",
+          "Welcome to NDLAs Arena. Here, you can discuss, share and cooperate with other teachers from all over Norway.",
         myNotification: "My notifications",
         markAll: "Mark all as read",
         subscribe: "You will now be notified of new replies to this topic",
@@ -1502,18 +1506,18 @@ const messages = {
       page: "Page {{page}}",
     },
     imageSearch: {
-      close: "Close",
       searchPlaceholder: "Search images",
       searchButtonTitle: "Search",
-      useImageTitle: "Use image",
-      checkboxLabel: "Set as meta image",
-      imageMetadata: {
+      imagePreview: {
         creatorsLabel: "Image",
         license: "License",
         caption: "Caption",
         altText: "Alt-text",
         modelRelease: "Model released",
         tags: "Tags",
+        checkboxLabel: "Set as meta image",
+        close: "Close",
+        useImageTitle: "Use image",
       },
     },
     audioSearch: {