@ndla/ui 48.0.0 → 49.0.1

package/src/Embed/BrightcoveEmbed.tsx

@@ -18,12 +18,13 @@ import { ButtonV2 } from '@ndla/button';
 import { Figure } from '../Figure';
 import { EmbedByline } from '../LicenseByline';
 import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
-import { HeartButtonType } from './types';
+import { HeartButtonType, RenderContext } from './types';
 
 interface Props {
   embed: BrightcoveMetaData;
   isConcept?: boolean;
   heartButton?: HeartButtonType;
+  renderContext?: RenderContext;
 }
 
 const LinkedVideoButton = styled(ButtonV2)`
@@ -57,19 +58,19 @@ const getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSourc
     width: source?.width ?? '640',
   };
 };
-const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props) => {
+const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton, renderContext = 'article' }: Props) => {
   const [showOriginalVideo, setShowOriginalVideo] = useState(true);
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const { embedData } = embed;
   const fallbackTitle = `${t('embed.type.video')}: ${embedData.videoid}`;
   const parsedDescription = useMemo(() => {
-    if (embed.embedData.caption) {
-      return parse(embed.embedData.caption);
+    if (embed.embedData.caption || renderContext === 'article') {
+      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;
     } else if (embed.status === 'success' && embed.data.description) {
       return parse(embed.data.description);
     }
-  }, [embed]);
+  }, [embed, renderContext]);
 
   useEffect(() => {
     const iframe = iframeRef.current;

package/src/Embed/ImageEmbed.tsx

@@ -19,7 +19,7 @@ import { Figure, FigureType } from '../Figure';
 import Image, { ImageLink } from '../Image';
 import { EmbedByline } from '../LicenseByline';
 import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
-import { HeartButtonType } from './types';
+import { HeartButtonType, RenderContext } from './types';
 
 interface Props {
   embed: ImageMetaData;
@@ -28,6 +28,7 @@ interface Props {
   heartButton?: HeartButtonType;
   inGrid?: boolean;
   lang?: string;
+  renderContext?: RenderContext;
 }
 
 export interface Author {
@@ -105,17 +106,25 @@ export const getCrop = (data: ImageEmbedData) => {
 
 const expandedSizes = '(min-width: 1024px) 1024px, 100vw';
 
-const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid, path, lang }: Props) => {
+const ImageEmbed = ({
+  embed,
+  previewAlt,
+  heartButton: HeartButton,
+  inGrid,
+  path,
+  lang,
+  renderContext = 'article',
+}: Props) => {
   const [isBylineHidden, setIsBylineHidden] = useState(hideByline(embed.embedData.size));
   const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);
 
   const parsedDescription = useMemo(() => {
-    if (embed.embedData.caption) {
-      return parse(embed.embedData.caption);
+    if (embed.embedData.caption || renderContext === 'article') {
+      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;
     } else if (embed.status === 'success' && embed.data.caption.caption) {
       return parse(embed.data.caption.caption);
     }
-  }, [embed]);
+  }, [embed, renderContext]);
 
   if (embed.status === 'error') {
     const { align, size } = embed.embedData;

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -10,7 +10,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { RelatedContentMetaData } from '@ndla/types-embed';
 import { defaultParameters } from '../../../../stories/defaults';
 import RelatedContentEmbed from './RelatedContentEmbed';
-import { RelatedArticleListV2 } from '../RelatedArticleList';
+import RelatedArticleList from '../RelatedArticleList';
 
 const filmResourceMeta: RelatedContentMetaData = {
   resource: 'related-content',
@@ -397,41 +397,41 @@ const linkEmbed2: RelatedContentMetaData = {
 
 export const RelatedContentStory: StoryObj<typeof RelatedContentEmbed> = {
   render: () => (
-    <RelatedArticleListV2>
+    <RelatedArticleList>
       <RelatedContentEmbed embed={learningResourceMeta} />
       <RelatedContentEmbed embed={learningResourceMeta} />
-    </RelatedArticleListV2>
+    </RelatedArticleList>
   ),
 };
 
 export const HideAllAboveTwo: StoryObj<typeof RelatedContentEmbed> = {
   render: () => (
-    <RelatedArticleListV2>
+    <RelatedArticleList>
       <RelatedContentEmbed embed={learningResourceMeta} />
       <RelatedContentEmbed embed={filmResourceMeta} />
       <RelatedContentEmbed embed={learningResourceMeta} />
       <RelatedContentEmbed embed={filmResourceMeta} />
-    </RelatedArticleListV2>
+    </RelatedArticleList>
   ),
 };
 
 export const WithLinks: StoryObj<typeof RelatedContentEmbed> = {
   render: () => (
-    <RelatedArticleListV2>
+    <RelatedArticleList>
       <RelatedContentEmbed embed={linkEmbed1} />
       <RelatedContentEmbed embed={linkEmbed2} />
-    </RelatedArticleListV2>
+    </RelatedArticleList>
   ),
 };
 
 export const Mixed: StoryObj<typeof RelatedContentEmbed> = {
   render: () => (
-    <RelatedArticleListV2>
+    <RelatedArticleList>
       <RelatedContentEmbed embed={linkEmbed1} />
       <RelatedContentEmbed embed={learningResourceMeta} />
       <RelatedContentEmbed embed={filmResourceMeta} />
       <RelatedContentEmbed embed={linkEmbed2} />
-    </RelatedArticleListV2>
+    </RelatedArticleList>
   ),
 };
 

package/src/Embed/RelatedContentEmbed.tsx

@@ -9,7 +9,7 @@
 import { RelatedContentMetaData } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
 import { contentTypeMapping } from '../model/ContentType';
-import { RelatedArticleV2 } from '../RelatedArticleList/RelatedArticleV2';
+import { RelatedArticle } from '../RelatedArticleList/RelatedArticleList';
 
 interface Props {
   embed: RelatedContentMetaData;
@@ -34,7 +34,7 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
       data.resource?.path ??
       `/article/${embedData.articleId}`;
     return (
-      <RelatedArticleV2
+      <RelatedArticle
         title={data.article.title?.title ?? ''}
         introduction={data.article.metaDescription?.metaDescription ?? ''}
         target={isOembed ? '_blank' : undefined}
@@ -44,7 +44,7 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
     );
   } else if (typeof embedData.url === 'string') {
     return (
-      <RelatedArticleV2
+      <RelatedArticle
         title={embedData.title ?? ''}
         introduction=""
         to={embedData.url}

package/src/Embed/index.ts

@@ -20,4 +20,4 @@ export { ConceptNotionV2 } from './conceptComponents';
 export { default as ConceptListEmbed } from './ConceptListEmbed';
 export { default as UnknownEmbed } from './UnknownEmbed';
 export { InlineConcept, BlockConcept } from './ConceptEmbed';
-export type { HeartButtonType } from './types';
+export type { HeartButtonType, RenderContext } from './types';

package/src/Embed/types.ts

@@ -10,3 +10,5 @@ import { ElementType } from 'react';
 import { EmbedMetaData } from '@ndla/types-embed';
 
 export type HeartButtonType = ElementType<{ embed: Extract<EmbedMetaData, { status: 'success' }> }>;
+
+export type RenderContext = 'article' | 'embed';

package/src/FactBox/FactBox.tsx

@@ -6,10 +6,12 @@
  *
  */
 
-import { ReactNode, MouseEvent } from 'react';
+import { ReactNode, useState } from 'react';
 import BEMHelper from 'react-bem-helper';
-import { ButtonV2 } from '@ndla/button';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { IconButtonV2 } from '@ndla/button';
+import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 
 const classes = new BEMHelper({
   name: 'factbox',
@@ -17,26 +19,37 @@ const classes = new BEMHelper({
 });
 
 interface Props {
-  dangerouslySetInnerHTML?: { __html: string };
   children?: ReactNode;
 }
 
-const toggleFactBox = (event: MouseEvent<HTMLButtonElement>) => {
-  const button = event.currentTarget;
-  const aside = button?.previousSibling?.parentElement;
-  aside?.classList?.toggle('expanded');
-};
-const FactBox = ({ children, dangerouslySetInnerHTML }: Props) => {
+const StyledAside = styled.aside`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledDiv = styled.div`
+  width: 100%;
+`;
+
+const StyledIconButton = styled(IconButtonV2)`
+  margin-top: -20px;
+  z-index: 1;
+`;
+
+const FactBox = ({ children }: Props) => {
   const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const additional = isOpen ? 'expanded' : '';
 
   return (
-    <aside {...classes()}>
-      <div {...classes('content')} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
-        {children}
-      </div>
-      <ButtonV2 {...classes('button', 'collapsed')} onClick={toggleFactBox} title={t('factbox.open')} />
-      <ButtonV2 {...classes('button', 'open')} onClick={toggleFactBox} title={t('factbox.close')} />
-    </aside>
+    <StyledAside {...classes(undefined, undefined, additional)}>
+      <StyledDiv {...classes('content')}>{children}</StyledDiv>
+      <StyledIconButton onClick={() => setIsOpen((p) => !p)} aria-label={t(`factbox.${isOpen ? 'close' : 'open'}`)}>
+        {isOpen ? <ChevronUp /> : <ChevronDown />}
+      </StyledIconButton>
+    </StyledAside>
   );
 };
 

package/src/FactBox/Factbox.stories.tsx

@@ -10,7 +10,7 @@ import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react';
 import { spacing } from '@ndla/core';
 import { Heading, Text } from '@ndla/typography';
-import FactBoxV2 from './FactBoxV2';
+import FactBox from './FactBox';
 import { defaultParameters } from '../../../../stories/defaults';
 
 const Wrapper = styled.div`
@@ -22,7 +22,7 @@ const Wrapper = styled.div`
  */
 export default {
   title: 'Components/FactBox',
-  component: FactBoxV2,
+  component: FactBox,
   tags: ['autodocs'],
   paramemeters: {
     inlineStories: true,
@@ -57,6 +57,6 @@ export default {
       </>
     ),
   },
-} as Meta<typeof FactBoxV2>;
+} as Meta<typeof FactBox>;
 
-export const Default: StoryObj<typeof FactBoxV2> = {};
+export const Default: StoryObj<typeof FactBox> = {};

package/src/FactBox/index.ts

@@ -1,5 +1,3 @@
 import FactBox from './FactBox';
 
-export { default as FactBoxV2 } from './FactBoxV2';
-
 export default FactBox;

package/src/Figure/index.ts

@@ -7,8 +7,6 @@
  */
 
 export { default as Figure } from './Figure';
-export { FigureExpandButton } from './FigureExpandButton';
-export { FigureBylineExpandButton } from './FigureBylineExpandButton';
 export { FigureOpenDialogButton } from './FigureOpenDialogButton';
 
 export type { FigureType } from './Figure';

package/src/FileList/File.tsx

@@ -1,9 +1,35 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
+import SafeLink from '@ndla/safelink';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { Download } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import Tooltip from '@ndla/tooltip';
-import { FileFormat, FileType } from './FileList';
+
+interface Props {
+  title: string;
+  url: string;
+  fileExists: boolean;
+  fileType: string;
+}
+
+export interface FileType {
+  title: string;
+  formats: FileFormat[];
+  fileExists?: boolean;
+}
+
+export interface FileFormat {
+  url: string;
+  fileType: string;
+  tooltip: string;
+}
 
 const LinkTextWrapper = styled.div`
   & > span {
@@ -31,7 +57,29 @@ const FileLink = styled(SafeLink)`
   }
 `;
 
-const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, isDeadLink: boolean) => {
+const FileListItem = styled.li`
+  ${fonts.sizes('18px', '26px')};
+  font-weight: ${fonts.weight.semibold};
+  min-height: 60px;
+  background: ${colors.brand.greyLighter};
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: ${spacing.xsmall};
+  padding: ${spacing.small};
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: ${spacing.small} ${spacing.normal};
+  }
+`;
+
+interface FormatProps {
+  format: FileFormat;
+  title: string;
+  isPrimary: boolean;
+  isDeadLink: boolean;
+}
+
+const Format = ({ format, title, isPrimary, isDeadLink }: FormatProps) => {
   const titleWithFormat = `${title} (${format.fileType.toUpperCase()})`;
 
   if (isDeadLink) {
@@ -46,40 +94,22 @@ const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, isD
   return (
     <FileLink key={format.url} to={format.url} target="_blank" aria-label={titleWithFormat}>
       <Download />
-      <Tooltip tooltip={format.tooltip}>
-        <LinkTextWrapper>
-          <span>{isPrimary ? titleWithFormat : `(${format.fileType.toUpperCase()})`}</span>
-        </LinkTextWrapper>
-      </Tooltip>
+      <LinkTextWrapper aria-label={format.tooltip}>
+        <span>{isPrimary ? titleWithFormat : `(${format.fileType.toUpperCase()})`}</span>
+      </LinkTextWrapper>
     </FileLink>
   );
 };
 
-interface Props {
-  file: FileType;
-}
+const File = ({ title, url, fileExists, fileType }: Props) => {
+  const { t } = useTranslation();
+  const tooltip = `${t('download')} ${url.split('/').pop()}`;
 
-const FileListItem = styled.li`
-  ${fonts.sizes('18px', '26px')};
-  font-weight: ${fonts.weight.semibold};
-  min-height: 60px;
-  background: ${colors.brand.greyLighter};
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-bottom: ${spacing.xsmall};
-  padding: ${spacing.small};
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.small} ${spacing.normal};
-  }
-`;
-
-const File = ({ file }: Props) => {
-  const formatLinks = file.formats.map((format, index) =>
-    renderFormat(format, file.title, index === 0, !file.fileExists),
+  return (
+    <FileListItem>
+      <Format format={{ url, fileType, tooltip }} isPrimary title={title} isDeadLink={!fileExists} />
+    </FileListItem>
   );
-
-  return <FileListItem key={file.title}>{formatLinks}</FileListItem>;
 };
 
 export default File;

package/src/FileList/FileList.stories.tsx

@@ -7,14 +7,14 @@
  */
 
 import { Meta, StoryObj } from '@storybook/react';
-import FileV2 from './FileV2';
+import File from './File';
 import { defaultParameters } from '../../../../stories/defaults';
-import FileListV2 from './FileListV2';
+import FileList from './FileList';
 
 export default {
   title: 'Components/FileList',
   tags: ['autodocs'],
-  component: FileV2,
+  component: File,
   parameters: {
     inlineStories: true,
     ...defaultParameters,
@@ -26,23 +26,23 @@ export default {
     fileType: 'pdf',
   },
   render: (args) => (
-    <FileListV2>
-      <FileV2 {...args} />
-    </FileListV2>
+    <FileList>
+      <File {...args} />
+    </FileList>
   ),
-} as Meta<typeof FileV2>;
+} as Meta<typeof File>;
 
-export const FileNotFound: StoryObj<typeof FileV2> = {
+export const FileNotFound: StoryObj<typeof File> = {
   args: { fileExists: false },
 };
 
-export const SeveralFiles: StoryObj<typeof FileV2> = {
+export const SeveralFiles: StoryObj<typeof File> = {
   render: () => (
-    <FileListV2>
-      <FileV2 title="Fil 1" url="https://ndla.no/1" fileExists fileType="mp4" />
-      <FileV2 title="Fil 2" url="https://ndla.no/2" fileExists={false} fileType="pdf" />
-      <FileV2 title="Fil 3" url="https://ndla.no/3" fileExists fileType="docx" />
-      <FileV2 title="Fil 4" url="https://ndla.no/4" fileExists fileType="docx" />
-    </FileListV2>
+    <FileList>
+      <File title="Fil 1" url="https://ndla.no/1" fileExists fileType="mp4" />
+      <File title="Fil 2" url="https://ndla.no/2" fileExists={false} fileType="pdf" />
+      <File title="Fil 3" url="https://ndla.no/3" fileExists fileType="docx" />
+      <File title="Fil 4" url="https://ndla.no/4" fileExists fileType="docx" />
+    </FileList>
   ),
 };

package/src/FileList/FileList.tsx

@@ -1,23 +1,18 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
-import File from './File';
-
-export interface FileType {
-  title: string;
-  formats: FileFormat[];
-  fileExists?: boolean;
-}
-
-export interface FileFormat {
-  url: string;
-  fileType: string;
-  tooltip: string;
-}
+import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
-  id: string;
-  heading: string;
-  files: FileType[];
+  children: ReactNode;
 }
 
 const FileListSection = styled.section`
@@ -35,7 +30,7 @@ const FileListSection = styled.section`
   }
 `;
 
-const FileListHeading = styled.h1`
+const FileListHeading = styled.h3`
   ${fonts.sizes('16px', '18px')};
   letter-spacing: 0.05em;
   margin: 0 0 ${spacing.xsmall} 0;
@@ -50,15 +45,14 @@ const FilesList = styled.ul`
   padding: 0;
 `;
 
-const FileList = ({ files, heading, id }: Props) => (
-  <FileListSection>
-    <FileListHeading>{heading}</FileListHeading>
-    <FilesList>
-      {files.map((file) => (
-        <File key={`file-${id}-${file.title}`} file={file} />
-      ))}
-    </FilesList>
-  </FileListSection>
-);
+const FileList = ({ children }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <FileListSection>
+      <FileListHeading>{t('files')}</FileListHeading>
+      <FilesList>{children}</FilesList>
+    </FileListSection>
+  );
+};
 
 export default FileList;

package/src/FileList/index.ts

@@ -1,8 +1,6 @@
 import FileList from './FileList';
 
 export { default as File } from './File';
-export { default as FileListV2 } from './FileListV2';
 export { default as PdfFile } from './PdfFile';
-export { default as FileV2 } from './FileV2';
 
 export default FileList;

package/src/LinkBlock/LinkBlock.tsx

@@ -15,7 +15,7 @@ import { breakpoints, colors, spacing, mq } from '@ndla/core';
 import { LinkBlockEmbedData } from '@ndla/types-embed';
 import { useMemo } from 'react';
 import { Heading } from '@ndla/typography';
-import { usePossiblyRelativeUrl } from '../utils/relativeUrl';
+import { getPossiblyRelativeUrl } from '../utils/relativeUrl';
 
 const StyledForward = styled(Forward)`
   margin: 0 ${spacing.nsmall};
@@ -78,7 +78,7 @@ interface Props extends Omit<LinkBlockEmbedData, 'resource'> {
 }
 
 const LinkBlock = ({ title, language, date, url, path }: Props) => {
-  const href = usePossiblyRelativeUrl(url, path);
+  const href = getPossiblyRelativeUrl(url, path);
   const formattedDate = useMemo(() => {
     if (!date) return null;
     const locale = language === 'nb' ? nb : language === 'nn' ? nn : enGB;

package/src/Messages/index.ts

@@ -6,8 +6,7 @@
  *
  */
 
-import MessageBoxTag from './MessageBoxTag';
 import MessageBox from './MessageBox';
 import MessageBanner from './MessageBanner';
 
-export { MessageBox, MessageBoxTag, MessageBanner };
+export { MessageBox, MessageBanner };

package/src/Navigation/index.ts

@@ -7,6 +7,5 @@
  */
 
 import NavigationBox from './NavigationBox';
-import NavigationTopicAbout from './NavigationTopicAbout';
 
-export { NavigationBox, NavigationTopicAbout };
+export { NavigationBox };