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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.18-alpha.0",
+  "version": "56.0.19-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.12-alpha.0",
-    "@ndla/licenses": "^8.0.1-alpha.0",
-    "@ndla/primitives": "^1.0.16-alpha.0",
-    "@ndla/safelink": "^7.0.16-alpha.0",
-    "@ndla/styled-system": "^0.0.14",
+    "@ndla/icons": "^8.0.13-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/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.22",
+    "@ndla/preset-panda": "^0.0.23",
     "@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": "77cd2b0c19a7631796405960ebf799f50e93b44c"
+  "gitHead": "58687255a5be26e49b6a21d830cf0af5be37b9fa"
 }

package/src/Article/Article.tsx

@@ -32,7 +32,6 @@ const StyledArticleWrapper = styled(
       background: "background.default",
       display: "flex",
       flexDirection: "column",
-      gap: "xxlarge",
       color: "text.default",
       alignItems: "center",
       width: "100%",
@@ -131,11 +130,13 @@ export const ArticleTitle = ({
   return (
     <ArticleHeader>
       <ArticleHGroup>
-        <StyledStack justify="space-between" align="center" direction="row" gap="small">
-          {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
-          {heartButton}
-        </StyledStack>
-        <Heading textStyle="heading.large" id={id} lang={lang}>
+        {(!!contentType || !!heartButton) && (
+          <StyledStack justify="space-between" align="center" direction="row" gap="small">
+            {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
+            {heartButton}
+          </StyledStack>
+        )}
+        <Heading textStyle="heading.medium" id={id} lang={lang} property="dct:title">
           {title}
         </Heading>
       </ArticleHGroup>

package/src/Article/ArticleByline.tsx

@@ -36,8 +36,6 @@ const Wrapper = styled("div", {
   },
 });
 
-// TODO: This is designed with 24px of inline padding. If you do this, most bylines will break into two lines.
-// Should reconsider.
 const TextWrapper = styled("div", {
   base: {
     display: "flex",
@@ -169,7 +167,8 @@ export const ArticleByline = ({
           <LicenseWrapper>
             {license && <LicenseLink license={license} />}
             {showPrimaryContributors && (
-              <span>
+              //eslint-disable-next-line react/no-unknown-property
+              <span property="cc:attributionName">
                 {authors.length > 0 &&
                   `${t("article.authorsLabel", {
                     names: renderContributors(authors, t),

package/src/Article/index.ts

@@ -18,5 +18,3 @@ export {
 
 export { ArticleByline, ArticleBylineAccordionItem } from "./ArticleByline";
 export { ArticleFootNotes } from "./ArticleFootNotes";
-
-export { ArticleParagraph } from "./ArticleParagraph";

package/src/AudioPlayer/AudioPlayer.tsx

@@ -190,9 +190,11 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
               {showFullDescription || description.length < DESCRIPTION_MAX_LENGTH
                 ? description
                 : `${truncatedDescription}...`}
-              <Button variant="link" onClick={() => setShowFullDescription((p) => !p)}>
-                {t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)}
-              </Button>
+              {description.length > DESCRIPTION_MAX_LENGTH && (
+                <Button variant="link" onClick={() => setShowFullDescription((p) => !p)}>
+                  {t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)}
+                </Button>
+              )}
             </Text>
           )}
           {!!textVersion && !!img && textVersionButton}

package/src/CampaignBlock/CampaignBlock.tsx

@@ -36,21 +36,33 @@ interface Props {
 
 const Container = styled("div", {
   base: {
-    width: "100%",
-    display: "flex",
+    display: "grid",
+    gridTemplateColumns: "1fr",
     gap: "medium",
-    flexDirection: "column",
     border: "1px solid",
     borderColor: "stroke.default",
     backgroundColor: "background.default",
     borderRadius: "xsmall",
     boxShadow: "full",
-    marginBlockEnd: "4xsmall",
     overflow: "hidden",
-    tabletWide: {
-      flexDirection: "row",
+  },
+  variants: {
+    imageSide: {
+      left: {
+        tabletWide: {
+          gridTemplateColumns: "minmax(230px, 455px) auto", //required for campaign block in myNdla
+        },
+      },
+      right: {
+        tabletWide: {
+          gridTemplateColumns: "auto minmax(230px, 455px)", //required for campaign block in myNdla
+        },
+      },
     },
   },
+  defaultVariants: {
+    imageSide: "left",
+  },
 });
 
 const LinkText = styled(Text, {
@@ -78,15 +90,14 @@ const LinkHeader = styled(Text, {
 
 const StyledImg = styled("img", {
   base: {
-    alignSelf: "center",
     objectFit: "cover",
     width: "100%",
     height: "215px",
-    mobileWide: {
-      height: "340px",
+    tablet: {
+      height: "265px",
     },
     tabletWide: {
-      width: "auto",
+      height: "340px",
     },
   },
 });
@@ -94,7 +105,6 @@ const StyledImg = styled("img", {
 const ContentWrapper = styled("div", {
   base: {
     width: "100%",
-    position: "relative",
     display: "flex",
     flexDirection: "column",
     gap: "medium",
@@ -102,6 +112,7 @@ const ContentWrapper = styled("div", {
     justifyContent: "center",
     paddingBlock: "medium",
     paddingInline: "medium",
+    minWidth: "270px", //required for campaign block in myNdla
   },
 });
 
@@ -147,7 +158,7 @@ const CampaignBlock = ({
   const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;
   const HeaderComponent = url?.url ? LinkHeader : Text;
   return (
-    <Container className={className} data-embed-type="campaign-block">
+    <Container className={className} data-embed-type="campaign-block" imageSide={imageSide}>
       {imageSide === "left" && imageComponent}
       <ContentWrapper>
         <MaybeLinkText url={url?.url} path={path}>

package/src/Concept/Concept.tsx

@@ -13,6 +13,7 @@ import { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept
 import { ConceptVisualElementMeta } from "@ndla/types-embed";
 import { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from "../Embed";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
+import { licenseAttributes } from "../utils/licenseAttributes";
 
 export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
   copyright?: ConceptCopyright;
@@ -20,6 +21,7 @@ export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
   lang?: string;
   title?: string;
   children?: ReactNode;
+  source?: string;
 }
 
 const StyledFigure = styled(Figure, {
@@ -43,9 +45,11 @@ const ContentWrapper = styled("div", {
 // TODO: Figure out if we need to support headerButtons.
 
 export const Concept = forwardRef<HTMLElement, ConceptProps>(
-  ({ copyright, visualElement, lang, children, title, ...rest }, ref) => {
+  ({ copyright, visualElement, lang, children, title, source, ...rest }, ref) => {
+    const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);
+
     return (
-      <StyledFigure ref={ref} {...rest}>
+      <StyledFigure ref={ref} {...rest} {...licenseProps}>
         <ContentWrapper lang={lang}>
           {!!title && (
             <>

package/src/ContactBlock/ContactBlock.tsx

@@ -31,7 +31,6 @@ const StyledWrapper = styled("div", {
     alignItems: "center",
     justifyContent: "space-between",
     boxShadow: "full",
-    marginBlockEnd: "4xsmall",
     border: "1px solid",
     gap: "medium",
     position: "relative",

package/src/ContentTypeBadge/ContentTypeBadgeNew.tsx

@@ -42,12 +42,9 @@ export const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant> = {
   [contentTypes.SOURCE_MATERIAL]: "brand1",
   [contentTypes.LEARNING_PATH]: "brand3",
   [contentTypes.TOPIC]: "neutral",
-  // TODO: Verify this color
   [contentTypes.MULTIDISCIPLINARY]: "neutral",
   [contentTypes.CONCEPT]: "brand1",
-  // TODO: Verify this color
   [contentTypes.EXTERNAL]: "brand2",
-  // TODO: Verify resourceEmbedTypeMapping colors
   [contentTypes.IMAGE]: "brand1",
   [contentTypes.AUDIO]: "brand1",
   [contentTypes.PODCAST]: "brand1",

package/src/ContentTypeHero/ContentTypeHero.tsx

@@ -11,23 +11,18 @@ import { Hero, HeroProps, HeroVariant } from "@ndla/primitives";
 import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import * as contentTypes from "../model/ContentType";
 
-// TODO: Figure out what to do with frontpage articles. If anything...
-// Also, verify all of these colors.
 export const contentTypeToHeroMap: Record<ContentType, HeroVariant> = {
   [contentTypes.SUBJECT_MATERIAL]: "primary",
-  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2Strong",
+  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2Bold",
   [contentTypes.ASSESSMENT_RESOURCES]: "brand2",
   // This will never happen
   [contentTypes.SUBJECT]: "primary",
   [contentTypes.SOURCE_MATERIAL]: "brand1",
   // This will never happen
   [contentTypes.LEARNING_PATH]: "primary",
-  // TODO: This needs a color
   [contentTypes.TOPIC]: "neutral",
-  // TODO: This is just taken from thin air.
-  [contentTypes.MULTIDISCIPLINARY]: "brand4",
+  [contentTypes.MULTIDISCIPLINARY]: "primary",
   [contentTypes.CONCEPT]: "brand1Subtle",
-  // TODO: No clue what this'll be. Maybe unused?
   [contentTypes.EXTERNAL]: "primary",
   [contentTypes.IMAGE]: "primary",
   [contentTypes.AUDIO]: "primary",

package/src/Embed/AudioEmbed.tsx

@@ -12,6 +12,7 @@ import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { Author } from "./ImageEmbed";
 import AudioPlayer from "../AudioPlayer";
 import { EmbedByline } from "../LicenseByline";
+import { licenseAttributes } from "../utils/licenseAttributes";
 
 interface Props {
   embed: AudioMetaData;
@@ -42,8 +43,10 @@ const AudioEmbed = ({ embed, lang }: Props) => {
 
   const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };
 
+  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
+
   return (
-    <Figure lang={lang} data-embed-type={type}>
+    <Figure lang={lang} data-embed-type={type} {...licenseProps}>
       <AudioPlayer
         description={data.podcastMeta?.introduction ?? ""}
         img={img}

package/src/Embed/BrightcoveEmbed.tsx

@@ -15,10 +15,12 @@ import { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from "
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { RenderContext } from "./types";
 import { EmbedByline } from "../LicenseByline";
+import { licenseAttributes } from "../utils/licenseAttributes";
 
 interface Props {
   embed: BrightcoveMetaData;
   renderContext?: RenderContext;
+  lang?: string;
 }
 
 const LinkedVideoButton = styled(Button, {
@@ -54,7 +56,7 @@ const getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSourc
     width: source?.width ?? "640",
   };
 };
-const BrightcoveEmbed = ({ embed, renderContext = "article" }: Props) => {
+const BrightcoveEmbed = ({ embed, renderContext = "article", lang }: Props) => {
   const [showOriginalVideo, setShowOriginalVideo] = useState(true);
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -100,8 +102,10 @@ const BrightcoveEmbed = ({ embed, renderContext = "article" }: Props) => {
     ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)
     : undefined;
 
+  const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);
+
   return (
-    <Figure data-embed-type="brightcove">
+    <Figure data-embed-type="brightcove" {...licenseProps}>
       <div className="brightcove-video">
         <BrightcoveIframe
           ref={iframeRef}
@@ -114,7 +118,6 @@ const BrightcoveEmbed = ({ embed, renderContext = "article" }: Props) => {
         />
       </div>
       <EmbedByline type="video" copyright={data.copyright!} description={parsedDescription}>
-        {/* TODO: Figure out if this button should still be here. If yes, figure out what it should look like. */}
         {!!linkedVideoId && (
           <LinkedVideoButton size="small" variant="secondary" onClick={() => setShowOriginalVideo((p) => !p)}>
             {t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)}

package/src/Embed/ConceptEmbed.tsx

@@ -8,6 +8,7 @@
 
 import parse from "html-react-parser";
 import { forwardRef, useMemo } from "react";
+import { Portal } from "@ark-ui/react";
 import { PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { ConceptMetaData } from "@ndla/types-embed";
@@ -29,6 +30,8 @@ interface Props extends BaseProps {
 const StyledPopoverContent = styled(PopoverContent, {
   base: {
     width: "surface.xlarge",
+    maxHeight: "50vh",
+    overflowY: "auto",
   },
 });
 
@@ -60,6 +63,7 @@ export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
         visualElement={visualElement}
         lang={lang}
         title={concept.title.title}
+        source={concept.source}
       >
         {parsedContent}
       </InlineConcept>
@@ -72,6 +76,7 @@ export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
       visualElement={visualElement}
       lang={lang}
       title={renderContext === "embed" ? undefined : concept.title.title}
+      source={concept.source}
     >
       {parsedContent}
     </BlockConcept>
@@ -80,21 +85,23 @@ export const ConceptEmbed = ({ embed, renderContext, lang }: Props) => {
 
 export interface InlineConceptProps extends ConceptProps, BaseProps {
   linkText?: string;
+  source?: string;
 }
 
 export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
-  ({ linkText, copyright, visualElement, lang, children, title, ...rest }, ref) => (
+  ({ linkText, copyright, visualElement, lang, children, title, source, ...rest }, ref) => (
     <PopoverRoot>
-      <PopoverTrigger asChild>
-        <InlineTriggerButton {...rest} ref={ref}>
-          {linkText}
-        </InlineTriggerButton>
+      {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}
+      <PopoverTrigger asChild ref={ref} {...rest}>
+        <InlineTriggerButton>{linkText}</InlineTriggerButton>
       </PopoverTrigger>
-      <StyledPopoverContent>
-        <Concept copyright={copyright} visualElement={visualElement} lang={lang} title={title}>
-          {children}
-        </Concept>
-      </StyledPopoverContent>
+      <Portal>
+        <StyledPopoverContent>
+          <Concept copyright={copyright} visualElement={visualElement} lang={lang} title={title} source={source}>
+            {children}
+          </Concept>
+        </StyledPopoverContent>
+      </Portal>
     </PopoverRoot>
   ),
 );

package/src/Embed/ConceptListEmbed.tsx

@@ -54,6 +54,7 @@ const ConceptListEmbed = ({ embed, lang }: Props) => {
                   copyright={concept.copyright}
                   visualElement={visualElement}
                   lang={lang}
+                  source={concept.source}
                 />
               </li>
             ))}

package/src/Embed/ImageEmbed.tsx

@@ -17,6 +17,7 @@ import { ImageEmbedData, ImageMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { RenderContext } from "./types";
 import { EmbedByline } from "../LicenseByline";
+import { licenseAttributes } from "../utils/licenseAttributes";
 
 interface Props {
   embed: ImageMetaData;
@@ -247,12 +248,15 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
     setImageSizes((sizes) => (!sizes ? expandedSizes : undefined));
   };
 
+  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
+
   // TODO: Check how this works with `children`. Will only be important for ED
   return (
     <StyledFigure
       float={figureProps?.float}
       size={imageSizes ? "full" : figureProps?.size ?? "medium"}
       data-embed-type="image"
+      {...licenseProps}
     >
       {children}
       <ImageWrapper border={embedData.border === "true"} expandable={!!figureProps?.float}>

package/src/Embed/index.ts

@@ -7,6 +7,7 @@
  */
 
 export { default as ImageEmbed, getCrop, getFocalPoint } from "./ImageEmbed";
+export { InlineTriggerButton } from "./InlineTriggerButton";
 export { default as AudioEmbed } from "./AudioEmbed";
 export { default as H5pEmbed } from "./H5pEmbed";
 export { default as ExternalEmbed } from "./ExternalEmbed";

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,77 @@ 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"];
+}
+
+interface MetadataTranslations {
+  creatorsLabel: string;
+  license: string;
+  caption: string;
+  altText: string;
+  modelRelease: string;
+  tags: string;
+}
+
+interface ImageSearchTranslations {
+  searchPlaceholder: string;
+  searchButtonTitle: string;
+  useImageTitle: string;
+  close: string;
+  imageMetadata: MetadataTranslations;
+  paginationTranslations: PaginationRootProps["translations"];
+  missingTitleFallback?: string;
+  checkboxLabel?: string;
+}
+
+export const useImageSearchTranslations = (
+  translations: DeepPartial<ImageSearchTranslations> = {},
+): ImageSearchTranslations => {
+  const { t } = useTranslation("translation", { keyPrefix: "component.imageSearch" });
+  const paginationTranslations = usePaginationTranslations();
+
+  const { imageMetadata, 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,
+    },
+    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,
+  };
+};