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

package/src/FileList/FileList.tsx

@@ -8,6 +8,7 @@
 
 import { ComponentPropsWithoutRef } from "react";
 import { useTranslation } from "react-i18next";
+import { ark } from "@ark-ui/react";
 import { Heading } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 
@@ -21,19 +22,24 @@ export const FileListWrapper = styled("div", {
   },
 });
 
-export const FileListItem = styled("li", {
-  base: {
-    background: "surface.infoSubtle",
-    borderBlockEnd: "1px solid",
-    borderColor: "stroke.default",
-    display: "flex",
-    justifyContent: "space-between",
+export const FileListItem = styled(
+  ark.li,
+  {
+    base: {
+      listStyle: "none",
+      background: "surface.infoSubtle",
+      borderBlockEnd: "1px solid",
+      borderColor: "stroke.default",
+      display: "flex",
+      justifyContent: "space-between",
 
-    _hover: {
-      backgroundColor: "surface.infoSubtle.hover",
+      _hover: {
+        backgroundColor: "surface.infoSubtle.hover",
+      },
     },
   },
-});
+  { baseComponent: true },
+);
 
 export const FileListEmbed = ({ children, ...rest }: Props) => {
   const { t } = useTranslation();

package/src/FileList/PdfFile.tsx

@@ -20,6 +20,12 @@ const StyledIframe = styled("iframe", {
   },
 });
 
+const StyledListElement = styled("li", {
+  base: {
+    listStyle: "none",
+  },
+});
+
 const StyledFigure = styled(Figure, {
   base: {
     display: "flex",
@@ -30,13 +36,13 @@ const StyledFigure = styled(Figure, {
 
 export const PdfFile = ({ title, url }: Props) => {
   return (
-    <li>
+    <StyledListElement>
       <StyledFigure>
         <Heading asChild consumeCss textStyle="title.medium">
           <h4>{title}</h4>
         </Heading>
         <StyledIframe title={title} height="1050" src={url} />
       </StyledFigure>
-    </li>
+    </StyledListElement>
   );
 };

package/src/FileList/index.ts

@@ -6,6 +6,6 @@
  *
  */
 
-export { FileListEmbed, FileListItem } from "./FileList";
+export { FileListEmbed, FileListItem, FileListWrapper } from "./FileList";
 export { File, FileListElement } from "./File";
 export { PdfFile } from "./PdfFile";

package/src/Grid/Grid.tsx

@@ -18,7 +18,6 @@ const GridContainer = styled("div", {
     gridColumnGap: "medium",
     width: "100%",
     backgroundColor: "background.subtle",
-    maxWidth: "surface.4xlarge",
     minWidth: "surface.xxsmall",
     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
     tabletDown: {

package/src/LicenseByline/EmbedByline.tsx

@@ -233,7 +233,8 @@ export const LicenseContainerContent = ({ children, copyright, type }: LicenseCo
     <>
       {children}
       {` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`}
-      {captionAuthors.map((author) => author.name).join(", ")}
+      {/*eslint-disable-next-line react/no-unknown-property */}
+      <span property="cc:attributionName">{captionAuthors.map((author) => author.name).join(", ")}</span>
       {license ? (
         <>
           {" / "}

package/src/TreeStructure/TreeStructure.tsx

@@ -293,7 +293,6 @@ const TreeStructureItem = ({ folder, targetResource }: TreeStructureItemProps) =
 
   const FolderIcon = folder.status === "shared" ? StyledFolderUserLine : StyledFolderLine;
 
-  // TODO: Pressing enter selects the item and closes the popover immediately. Do we actually want this? Old behavior.
   const onKeyDown = useCallback(
     (e: KeyboardEvent<HTMLElement>) => {
       if (e.key === "Enter") {

package/src/i18n/index.ts

@@ -13,4 +13,6 @@ export {
   useTagSelectorTranslations,
   useTagsInputTranslations,
   usePaginationTranslations,
+  useAudioSearchTranslations,
+  useImageSearchTranslations,
 } from "./useComponentTranslations";

package/src/i18n/useComponentTranslations.ts

@@ -11,6 +11,10 @@ import type { ComboboxCollectionItem } from "@ark-ui/react";
 import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
 import { TagSelectorRootProps } from "../TagSelector/TagSelector";
 
+type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+
 export const useTagsInputTranslations = (
   translations?: Partial<TagsInputRootProps["translations"]>,
 ): TagsInputRootProps["translations"] => {
@@ -70,3 +74,78 @@ export const usePaginationTranslations = (
     ...translations,
   };
 };
+
+// TODO: Deduplicate this and place it somewhere smart. Maybe core?
+interface AudioSearchTranslations {
+  searchPlaceholder: string;
+  searchButtonTitle: string;
+  useAudio: string;
+  noResults: string;
+  paginationTranslations: PaginationRootProps["translations"];
+}
+
+export interface PreviewTranslations {
+  creatorsLabel: string;
+  license: string;
+  caption: string;
+  altText: string;
+  modelRelease: string;
+  tags: string;
+  close: string;
+  checkboxLabel?: string;
+  missingTitleFallback?: string;
+  useImageTitle: string;
+}
+
+export interface ImageSearchTranslations {
+  searchPlaceholder: string;
+  searchButtonTitle: string;
+  imagePreview: PreviewTranslations;
+  paginationTranslations: PaginationRootProps["translations"];
+}
+
+export const useImageSearchTranslations = (
+  translations: DeepPartial<ImageSearchTranslations> = {},
+): ImageSearchTranslations => {
+  const { t } = useTranslation("translation", { keyPrefix: "component.imageSearch" });
+  const paginationTranslations = usePaginationTranslations();
+
+  const { imagePreview, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;
+
+  return {
+    searchPlaceholder: t("searchPlaceholder"),
+    searchButtonTitle: t("searchButtonTitle"),
+    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,
+  };
+};
+
+export const useAudioSearchTranslations = (
+  translations: DeepPartial<AudioSearchTranslations> = {},
+): AudioSearchTranslations => {
+  const { t } = useTranslation("translation", { keyPrefix: "component.audioSearch" });
+  const paginationTranslations = usePaginationTranslations();
+
+  const { paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;
+
+  return {
+    searchPlaceholder: t("searchPlaceholder"),
+    searchButtonTitle: t("searchButtonTitle"),
+    useAudio: t("useAudio"),
+    noResults: t("noResults"),
+    paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },
+    ...remaining,
+  };
+};

package/src/index.ts

@@ -9,6 +9,8 @@
 // Ignore typescript implicit any warning and export all javascript components
 // Move components to this file when they are migrated to typescript
 
+export { Concept } from "./Concept/Concept";
+
 export {
   ImageEmbed,
   getCrop,
@@ -29,6 +31,7 @@ export {
   UuDisclaimerEmbed,
   CopyrightEmbed,
   CodeEmbed,
+  InlineTriggerButton,
 } from "./Embed";
 
 export { LicenseLink, EmbedByline } from "./LicenseByline";
@@ -39,7 +42,6 @@ export {
   ArticleFootNotes,
   ArticleWrapper,
   Article,
-  ArticleParagraph,
   ArticleFooter,
   ArticleHeader,
   ArticleContent,
@@ -55,7 +57,7 @@ export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleL
 
 export { ErrorResourceAccessDenied, default as ErrorMessage } from "./ErrorMessage";
 
-export { FileListEmbed, File, PdfFile, FileListItem, FileListElement } from "./FileList";
+export { FileListEmbed, File, PdfFile, FileListItem, FileListElement, FileListWrapper } from "./FileList";
 
 export { default as FactBox } from "./FactBox";
 
@@ -84,6 +86,8 @@ export {
   useTagSelectorTranslations,
   useComboboxTranslations,
   usePaginationTranslations,
+  useAudioSearchTranslations,
+  useImageSearchTranslations,
 } from "./i18n";
 
 export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
@@ -141,3 +145,5 @@ export { CodeBlock, codeLanguageOptions } from "./CodeBlock";
 export { ZendeskButton } from "./ZendeskButton/ZendeskButton";
 
 export type { ZendeskButtonProps } from "./ZendeskButton/ZendeskButton";
+
+export { licenseAttributes } from "./utils/licenseAttributes";

package/src/locale/messages-en.ts

@@ -922,6 +922,8 @@ const messages = {
     close: "Close fact box",
   },
   myNdla: {
+    description:
+      "My NDLA: Organize the content your way! Use NDLA’s chat robot (AI). Save and share with colleagues and students.",
     mainMenu: "Main menu",
     myNDLA: "My NDLA",
     myNDLAMenu: "My NDLA menu",
@@ -1012,6 +1014,8 @@ const messages = {
         posts: "post",
         posts_plural: "posts",
         subcategory: "Subcategories",
+        votes: "reaction",
+        votes_plural: "reactions",
       },
       cancel: {
         title: {
@@ -1075,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",
@@ -1105,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",
@@ -1369,7 +1375,7 @@ const messages = {
       dragHandle: "Drag the category {{name}}",
     },
     favoriteSubjects: {
-      title: "My favorite subjects",
+      title: "My subjects",
       subjects: "{{count}} subject",
       subjects_0: "{{count}} subjects",
       subjects_plural: "{{count}} subjects",
@@ -1499,6 +1505,27 @@ const messages = {
       lastPage: "Last page, page {{page}}",
       page: "Page {{page}}",
     },
+    imageSearch: {
+      searchPlaceholder: "Search images",
+      searchButtonTitle: "Search",
+      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: {
+      searchPlaceholder: "Search in audio files",
+      searchButtonTitle: "Search",
+      useAudio: "Chose audio",
+      noResults: "No audio files found",
+    },
   },
 };
 

package/src/locale/messages-nb.ts

@@ -922,6 +922,8 @@ const messages = {
     close: "Lukk faktaboks",
   },
   myNdla: {
+    description:
+      "Min NDLA: Organiser fagstoffet på din måte! Bruk NDLAs praterobot (AI/KI). Lagre og del med kolleger og elever.",
     mainMenu: "Hovedmeny",
     myNDLA: "Min NDLA",
     myNDLAMenu: "Min NDLA meny",
@@ -1012,6 +1014,8 @@ const messages = {
         posts: "innlegg",
         posts_plural: "innlegg",
         subcategory: "Tema",
+        votes: "reaksjon",
+        votes_plural: "reaksjoner",
       },
       publish: "Publiser",
       cancel: {
@@ -1076,6 +1080,8 @@ const messages = {
         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.",
+        votes: "reaksjon",
+        votes_plural: "reaksjoner",
       },
       posts: {
         title: "Innlegg",
@@ -1106,13 +1112,13 @@ 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.",
+          "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",
@@ -1369,7 +1375,7 @@ const messages = {
       dragHandle: "Sorter kategorien {{name}}",
     },
     favoriteSubjects: {
-      title: "Mine favorittfag",
+      title: "Mine fag",
       subjects: "{{count}} fag",
       subjects_0: "{{count}} fag",
       subjects_plural: "{{count}} fag",
@@ -1499,6 +1505,27 @@ const messages = {
       lastPage: "Siste side, side {{page}}",
       page: "Side {{page}}",
     },
+    imageSearch: {
+      searchPlaceholder: "Søk i bilder",
+      searchButtonTitle: "Søk",
+      imagePreview: {
+        creatorsLabel: "Bilde",
+        license: "Lisens",
+        caption: "Bildetekst",
+        altText: "Alt-tekst",
+        modelRelease: "Modellklarert",
+        tags: "Emneknagger",
+        checkboxLabel: "Sett som metabilde",
+        close: "Lukk",
+        useImageTitle: "Bruk bildet",
+      },
+    },
+    audioSearch: {
+      searchPlaceholder: "Søk i lydfiler",
+      searchButtonTitle: "Søk",
+      useAudio: "Velg lyd",
+      noResults: "Ingen resultater funnet",
+    },
   },
 };