@ndla/ui 47.4.1 → 49.0.0

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -6,19 +6,17 @@
  *
  */
 
-import { useEffect, useState, MouseEvent } from 'react';
-
-import styled from '@emotion/styled';
-import { Link } from '@ndla/icons/common';
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { colors } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
+import { Link } from '@ndla/icons/common';
 import { copyTextToClipboard } from '@ndla/util';
-import { colors } from '@ndla/core';
 
 const ContainerDiv = styled.div`
   position: relative;
 `;
-
 const IconButton = styled.button`
   position: absolute;
   left: -3em;
@@ -43,63 +41,43 @@ const IconButton = styled.button`
 `;
 
 interface Props {
-  title?: string | null;
-  content?: string | null;
-  hydrate?: boolean;
-}
-
-interface CopyButtonProps {
-  title: string;
-  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-  tooltip: string;
-  content?: string | null;
+  // What to render within the h2
+  children: ReactNode;
+  copyText: string;
+  lang?: string;
 }
-
-const CopyButton = ({ onClick, title, tooltip, content }: CopyButtonProps) => {
-  return (
-    <div>
-      <Tooltip tooltip={tooltip}>
-        <IconButton onClick={onClick} data-title={title} aria-label={`${tooltip}: ${content}`}>
-          <Link title={''} />
-        </IconButton>
-      </Tooltip>
-      <h2 id={title} tabIndex={-1} dangerouslySetInnerHTML={{ __html: content || '' }} />
-    </div>
-  );
-};
-
-const CopyParagraphButton = ({ title, content, hydrate }: Props) => {
-  const { t } = useTranslation();
+const CopyParagraphButton = ({ children, copyText, lang }: Props) => {
   const [hasCopied, setHasCopied] = useState(false);
+  const { t } = useTranslation();
+  const sanitizedTitle = useMemo(() => encodeURIComponent(copyText.replace(/ /g, '-')), [copyText]);
+
   useEffect(() => {
     if (hasCopied) {
       setTimeout(() => setHasCopied(false), 3000);
     }
   }, [hasCopied]);
 
-  if (!title) return null;
-
-  const onCopyClick = (event: MouseEvent<HTMLButtonElement>): void => {
+  const onCopyClick = useCallback(() => {
     setHasCopied(true);
-    const copyId = event.currentTarget.getAttribute('data-title');
     const { location } = window;
-    const newHash = `#${copyId}`;
+    const newHash = `#${sanitizedTitle}`;
     const port = location.port ? `:${location.port}` : '';
     const urlToCopy = `${location.protocol}//${location.hostname}${port}${location.pathname}${location.search}${newHash}`;
 
     copyTextToClipboard(urlToCopy);
-  };
+  }, [sanitizedTitle]);
 
-  const sanitizedTitle = encodeURIComponent(title.replace(/ /g, '-'));
   const tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
-
-  if (hydrate) {
-    return <CopyButton onClick={onCopyClick} title={sanitizedTitle} tooltip={tooltip} content={content} />;
-  }
-
   return (
-    <ContainerDiv data-header-copy-container data-title={title}>
-      <CopyButton onClick={onCopyClick} title={sanitizedTitle} tooltip={tooltip} content={content} />
+    <ContainerDiv>
+      <Tooltip tooltip={tooltip}>
+        <IconButton onClick={onCopyClick} aria-label={`${tooltip}: ${copyText}`}>
+          <Link />
+        </IconButton>
+      </Tooltip>
+      <h2 id={sanitizedTitle} tabIndex={-1} lang={lang}>
+        {children}
+      </h2>
     </ContainerDiv>
   );
 };

package/src/CopyParagraphButton/index.tsx

@@ -7,8 +7,6 @@
  */
 
 import CopyParagraphButton from './CopyParagraphButton';
-import CopyParagraphButtonV2 from './CopyParagraphButtonV2';
-import initCopyParagraphButtons from './initCopyParagraphButtons';
 
-export { CopyParagraphButton, initCopyParagraphButtons, CopyParagraphButtonV2 };
+export { CopyParagraphButton };
 export default CopyParagraphButton;

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/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 };