@ndla/ui 48.0.0 → 49.0.0

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

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -1,9 +1,21 @@
-import { Children, cloneElement, ReactElement } from 'react';
+/**
+ * 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 { Children, HTMLProps, ReactNode, useMemo, useState } from 'react';
 import BEMHelper from 'react-bem-helper';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
 import SafeLink from '@ndla/safelink';
 import { HeadingLevel } from '@ndla/typography';
 import SectionHeading from '../SectionHeading';
+import ContentTypeBadge from '../ContentTypeBadge';
+import { contentTypes } from '../model/ContentType';
 
 const classes = new BEMHelper({
   name: 'related-articles',
@@ -11,29 +23,26 @@ const classes = new BEMHelper({
 });
 
 interface RelatedArticleProps {
-  icon: ReactElement;
   title: string;
-  modifier?: string;
   introduction: string;
   to: string;
   linkInfo?: string;
   target?: string;
+  type?: string;
 }
 
 export const RelatedArticle = ({
   title,
   introduction,
-  icon,
-  modifier,
   to,
   linkInfo = '',
   target = '',
+  type = contentTypes.SUBJECT_MATERIAL,
 }: RelatedArticleProps) => {
-  const iconWithClass = cloneElement(icon, { className: 'c-icon--medium' });
   return (
-    <article {...classes('item', modifier)}>
+    <article {...classes('item', type)}>
       <h3 {...classes('title')}>
-        {iconWithClass}
+        <ContentTypeBadge type={type} background size="small" />
         <span {...classes('link-wrapper')}>
           <SafeLink to={to} {...classes('link')} target={target} rel={linkInfo ? 'noopener noreferrer' : undefined}>
             {title}
@@ -46,50 +55,47 @@ export const RelatedArticle = ({
   );
 };
 
-interface Props {
-  messages: {
-    title: string;
-    showMore: string;
-    showLess: string;
-  };
-  headingLevel: HeadingLevel;
-  children?: ReactElement;
-  dangerouslySetInnerHTML?: {
-    __html: string;
-  };
+const HeadingWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+interface Props extends HTMLProps<HTMLElement> {
+  children?: JSX.Element[];
   articleCount?: number;
+  headingLevel?: HeadingLevel;
+  headingButtons?: ReactNode;
 }
-const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetInnerHTML, headingLevel }: Props) => {
-  const clonedChildren =
-    !dangerouslySetInnerHTML && children
-      ? Children.map(children, (article, i) =>
-          cloneElement(article, {
-            modifier: i >= 2 ? `${article.props.modifier} hidden` : article.props.modifier,
-          }),
-        )
-      : null;
-  const childrenCount = articleCount || Children.count(children);
+export const RelatedArticleList = ({
+  children = [],
+  articleCount,
+  headingLevel = 'h3',
+  headingButtons,
+  ...rest
+}: Props) => {
+  const [expanded, setExpanded] = useState(false);
+  const { t } = useTranslation();
+  const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);
+  const childrenToShow = useMemo(
+    () => (childCount > 2 && !expanded ? children?.slice(0, 2) : children),
+    [childCount, children, expanded],
+  );
 
   return (
-    <section {...classes('')}>
-      <SectionHeading headingLevel={headingLevel} className={classes('component-title').className}>
-        {messages.title}
-      </SectionHeading>
-      <div {...classes('articles')} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
-        {clonedChildren}
-      </div>
-      {childrenCount > 2 && (
-        <ButtonV2
-          data-type="related-article-button"
-          data-showmore={messages.showMore}
-          data-showless={messages.showLess}
-          variant="outline"
-        >
-          {messages.showMore}
+    <section {...classes('')} {...rest}>
+      <HeadingWrapper>
+        <SectionHeading headingLevel={headingLevel} className={classes('component-title').className}>
+          {t('related.title')}
+        </SectionHeading>
+        {headingButtons}
+      </HeadingWrapper>
+      <div {...classes('articles')}>{childrenToShow}</div>
+      {childCount > 2 ? (
+        <ButtonV2 onClick={() => setExpanded((p) => !p)} variant="outline">
+          {t(`related.show${expanded ? 'Less' : 'More'}`)}
         </ButtonV2>
-      )}
+      ) : null}
     </section>
   );
 };
-
-export default RelatedArticleList;

package/src/RelatedArticleList/index.ts

@@ -6,9 +6,8 @@
  *
  */
 
-import RelatedArticleList, { RelatedArticle } from './RelatedArticleList';
-import { RelatedArticleListV2 } from './RelatedArticleV2';
+import { RelatedArticle, RelatedArticleList } from './RelatedArticleList';
 
-export { RelatedArticle, RelatedArticleListV2 };
+export { RelatedArticle };
 
 export default RelatedArticleList;

package/src/Search/index.ts

@@ -11,6 +11,5 @@ import SearchField from './SearchField';
 import { SearchResultList, SearchResultItem } from './SearchResult';
 
 import ActiveFilters from './ActiveFilters';
-export { default as ToggleSearchButton } from './ToggleSearchButton';
 
 export { SearchField, SearchResultItem, SearchResultList, ActiveFilters };

package/src/i18n/i18n.ts

@@ -21,13 +21,14 @@ const DETECTION_OPTIONS = {
   lookupLocalStorage: 'i18nextLng',
 };
 
+export const supportedTranslationLanguages = ['nb', 'nn', 'en', 'se', 'sma'] as const;
 const i18nInstance = i18n.use(initReactI18next).use(LanguageDetector);
 
 i18nInstance.init({
   compatibilityJSON: 'v3',
   detection: DETECTION_OPTIONS,
   fallbackLng: 'nb',
-  supportedLngs: ['nb', 'nn', 'en', 'se', 'sma'],
+  supportedLngs: supportedTranslationLanguages,
   resources: {
     en: {
       translation: messagesEN,