@ndla/ui 34.6.2 → 34.6.4

package/src/FileList/FileListV2.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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 { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  children: ReactNode;
+}
+
+const FileListSection = styled.section`
+  margin: ${spacing.large} 0;
+  padding: ${spacing.small} 0 ${spacing.normal} ${spacing.normal};
+  border-left: 2px solid ${colors.brand.greyLightest};
+  font-family: ${fonts.sans};
+
+  .c-icon {
+    margin-top: 3px;
+    flex-shrink: 0;
+    margin-right: ${spacing.small};
+    height: 18px;
+    width: 18px;
+  }
+`;
+
+const FileListHeading = styled.h3`
+  ${fonts.sizes('16px', '18px')};
+  letter-spacing: 0.05em;
+  margin: 0 0 ${spacing.xsmall} 0;
+  padding-bottom: ${spacing.xsmall};
+  border-bottom: 2px solid ${colors.brand.greyLight};
+  font-weight: ${fonts.weight.bold};
+  text-transform: uppercase;
+`;
+
+const FilesList = styled.ul`
+  margin: 0;
+  padding: 0;
+`;
+
+const FileListV2 = ({ children }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <FileListSection>
+      <FileListHeading>{t('files')}</FileListHeading>
+      <FilesList>{children}</FilesList>
+    </FileListSection>
+  );
+};
+
+export default FileListV2;

package/src/FileList/FileV2.tsx

@@ -0,0 +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 { useTranslation } from 'react-i18next';
+import File from './File';
+
+interface Props {
+  id: string;
+  title: string;
+  url: string;
+  fileExists: boolean;
+  fileType: string;
+}
+
+const FileV2 = ({ title, url, id, fileExists, fileType }: Props) => {
+  const { t } = useTranslation();
+  const tooltip = `${t('download')} ${url.split('/').pop()}`;
+  return (
+    <File
+      id={id}
+      file={{
+        title,
+        fileExists,
+        formats: [{ url, fileType, tooltip }],
+      }}
+    />
+  );
+};
+
+export default FileV2;

package/src/FileList/PdfFile.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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 { Figure } from '../Figure';
+
+interface Props {
+  title: string;
+  url: string;
+}
+
+const PdfFile = ({ title, url }: Props) => {
+  return (
+    <Figure>
+      <h2>{title}</h2>
+      <iframe title={title} height="1050" src={url} />
+    </Figure>
+  );
+};
+
+export default PdfFile;

package/src/FileList/index.ts

@@ -1,5 +1,8 @@
 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/Notion/Notion.tsx

@@ -18,7 +18,6 @@ const ContentWrapper = styled.div`
   }
   .c-figure {
     margin: 0;
-    padding: 0 0 0 20px;
     &.expanded {
       width: 100% !important;
       padding: 0;

package/src/Notion/NotionVisualElement.tsx

@@ -21,7 +21,7 @@ const StyledIframe = styled.iframe<{ type: string }>`
 
 export type NotionVisualElementType = {
   element?: ReactNode;
-  type?: 'video' | 'image' | 'h5p';
+  type?: 'video' | 'image' | 'h5p' | 'iframe';
   resource?: string;
   title?: string;
   url?: string;

package/src/RelatedArticleList/RelatedArticleV2.tsx

@@ -0,0 +1,84 @@
+/**
+ * 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, useMemo, useState } from 'react';
+import BEMHelper from 'react-bem-helper';
+import { useTranslation } from 'react-i18next';
+import { ButtonV2 } from '@ndla/button';
+import SafeLink from '@ndla/safelink';
+import SectionHeading from '../SectionHeading';
+import { HeadingLevel } from '../types';
+import ContentTypeBadge from '../ContentTypeBadge';
+import { contentTypes } from '../model/ContentType';
+
+const classes = new BEMHelper({
+  name: 'related-articles',
+  prefix: 'c-',
+});
+
+interface RelatedArticleProps {
+  title: string;
+  introduction: string;
+  to: string;
+  linkInfo?: string;
+  target?: string;
+  type?: string;
+}
+
+export const RelatedArticleV2 = ({
+  title,
+  introduction,
+  to,
+  linkInfo = '',
+  target = '',
+  type = contentTypes.SUBJECT_MATERIAL,
+}: RelatedArticleProps) => {
+  return (
+    <article {...classes('item', type)}>
+      <h3 {...classes('title')}>
+        <ContentTypeBadge type={type} background size="small" />
+        <span {...classes('link-wrapper')}>
+          <SafeLink to={to} {...classes('link')} target={target} rel={linkInfo ? 'noopener noreferrer' : undefined}>
+            {title}
+          </SafeLink>
+        </span>
+      </h3>
+      <p {...classes('description')} dangerouslySetInnerHTML={{ __html: introduction }} />
+      {linkInfo && <p {...classes('link-info')}>{linkInfo}</p>}
+    </article>
+  );
+};
+
+interface Props {
+  children?: JSX.Element[];
+  articleCount?: number;
+  headingLevel?: HeadingLevel;
+}
+export const RelatedArticleListV2 = ({ children = [], articleCount, headingLevel = 'h3' }: 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}>
+        {t('related.title')}
+      </SectionHeading>
+      <div {...classes('articles')}>{childrenToShow}</div>
+      {childCount > 2 ? (
+        <ButtonV2 onClick={() => setExpanded((p) => !p)} variant="outline">
+          {t(`related.show${expanded ? 'Less' : 'More'}`)}
+        </ButtonV2>
+      ) : null}
+    </section>
+  );
+};

package/src/RelatedArticleList/index.ts

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

package/src/Table/Table.tsx

@@ -6,11 +6,18 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import styled from '@emotion/styled';
+import { colors, spacing } from '@ndla/core';
+import throttle from 'lodash/throttle';
+import React, { ReactNode, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import BEMHelper from 'react-bem-helper';
 
+type ScrollPosition = 'start' | 'end' | 'center';
+
 const classes = BEMHelper('c-table');
 
+const MARGIN = 5;
+
 interface Props {
   id?: string;
   children?: ReactNode;
@@ -19,15 +26,81 @@ interface Props {
   };
 }
 
+interface StyledProps {
+  show: boolean;
+}
+
+const ScrollBorder = styled.div<StyledProps>`
+  position: absolute;
+  top: 0;
+  height: calc(100% - ${spacing.mediumlarge});
+  width: 3px;
+  background: ${colors.background.dark};
+  display: ${({ show }) => (show ? 'block' : 'none')};
+`;
+
+const RightScrollBorder = styled(ScrollBorder)`
+  right: 0;
+`;
+
+const LeftScrollBorder = styled(ScrollBorder)`
+  left: 0;
+`;
+
 const Table = ({ children, id, ...rest }: Props) => {
+  const [scrollPosition, setScrollPosition] = useState<ScrollPosition | undefined>(undefined);
+  const tableRef = useRef<HTMLTableElement>(null);
+
+  const checkScrollPosition = useCallback((el: HTMLTableElement) => {
+    const { scrollLeft, offsetWidth, scrollWidth, clientWidth } = el;
+    const hasScrollbar = scrollWidth > clientWidth;
+
+    if (!hasScrollbar) {
+      setScrollPosition(undefined);
+      return;
+    }
+
+    const isStart = scrollLeft <= MARGIN;
+    const isEnd = offsetWidth + scrollLeft >= scrollWidth - MARGIN;
+
+    if (isStart) {
+      setScrollPosition('start');
+    } else if (isEnd) {
+      setScrollPosition('end');
+    } else {
+      setScrollPosition('center');
+    }
+  }, []);
+
+  const onScroll = useMemo(
+    () =>
+      throttle((event: UIEvent<HTMLTableElement>) => {
+        const el = event.target as HTMLTableElement | undefined;
+        if (el) {
+          checkScrollPosition(el);
+        }
+      }, 100),
+    [checkScrollPosition],
+  );
+
+  useEffect(() => {
+    const el = tableRef.current;
+    if (el) {
+      checkScrollPosition(el);
+    }
+  }, [checkScrollPosition]);
+
   return (
     <div {...classes('wrapper')}>
       <div {...classes('content')}>
-        <div {...classes('left-shadow')} />
-        <table id={id} {...classes({ extra: ['o-table'] })} {...rest}>
+        <LeftScrollBorder show={scrollPosition === 'end' || scrollPosition === 'center'} {...classes('left-shadow')} />
+        <table ref={tableRef} id={id} onScroll={onScroll} {...classes({ extra: ['o-table'] })} {...rest}>
           {children}
         </table>
-        <div {...classes('right-shadow')} />
+        <RightScrollBorder
+          show={scrollPosition === 'start' || scrollPosition === 'center'}
+          {...classes('right-shadow')}
+        />
       </div>
     </div>
   );

package/src/index.ts

@@ -10,6 +10,21 @@
 // Move components to this file when they are migrated to typescript
 
 export { default as SectionHeading } from './SectionHeading';
+export {
+  ConceptNotionV2,
+  ImageEmbed,
+  AudioEmbed,
+  H5pEmbed,
+  ExternalEmbed,
+  IframeEmbed,
+  FootnoteEmbed,
+  BrightcoveEmbed,
+  ContentLinkEmbed,
+  RelatedContentEmbed,
+  ConceptEmbed,
+  ConceptListEmbed,
+  UnknownEmbed,
+} from './Embed';
 
 export {
   ArticleByline,
@@ -39,11 +54,11 @@ export { default as Portrait } from './Portrait';
 
 export { default as ContentLoader } from './ContentLoader';
 
-export { default as RelatedArticleList, RelatedArticle } from './RelatedArticleList';
+export { default as RelatedArticleList, RelatedArticle, RelatedArticleListV2 } from './RelatedArticleList';
 
 export { ErrorResourceAccessDenied, default as ErrorMessage } from './ErrorMessage';
 
-export { default as FileList, File } from './FileList';
+export { default as FileList, File, FileListV2, FileV2, PdfFile } from './FileList';
 
 export { BlogPost, BlogPostWrapper } from './BlogPosts';
 
@@ -64,7 +79,7 @@ export {
   FrontpageProgramMenu,
 } from './Frontpage';
 
-export { default as FactBox } from './FactBox';
+export { default as FactBox, FactBoxV2 } from './FactBox';
 
 export { default as Image, ImageLink, makeSrcQueryString } from './Image';
 export type { ImageCrop, ImageFocalPoint } from './Image';
@@ -232,7 +247,7 @@ export {
 
 export { default as ContentCard } from './ContentCard';
 
-export { default as CopyParagraphButton } from './CopyParagraphButton';
+export { default as CopyParagraphButton, CopyParagraphButtonV2 } from './CopyParagraphButton';
 
 export { default as ContentPlaceholder } from './ContentPlaceholder';
 

package/src/locale/messages-en.ts

@@ -631,6 +631,7 @@ const messages = {
     rightsholder: 'Rightsholder',
     source: 'Source',
     published: 'Published',
+    info: 'License information',
   },
   errorMessage: {
     title: 'Oops, something went wrong',
@@ -765,6 +766,7 @@ const messages = {
     hits: '{{count}} hits',
   },
   notions: {
+    tags: 'List and filters',
     usedIn: 'Used in',
     closeNotion: 'Close',
   },
@@ -1112,6 +1114,32 @@ const messages = {
       onDragEndMissingOver: 'The folder {{name}} was dropped',
       onDragCancel: 'Dragging was cancelled. The folder {{name}} was dropped',
       dragHandle: 'Drag the folder {{name}}',
+      sharing: {
+        share: 'Share folder',
+        shared: 'Shared',
+        unShare: 'Sharing is stopped. The folder is no longer shared',
+        link: 'Link is copied',
+        header: {
+          private: 'Do you want to share this folder?',
+          shared: 'This folder is shared',
+          unShare: 'Do you want to stop sharing this folder?',
+        },
+        description: {
+          copy: 'Copy and share this link:',
+          private:
+            'When you share a folder, you create a link which is open to anyone who has the link. You can change the content or stop sharing whenever you want.',
+          shared:
+            'Now you can share this link to students or other teachers. If you make changes in the folder, they become visible to everybody you have shared the link with.',
+          unShare:
+            'When you stop sharing, the link to the shared folder is no longer active. If you have shared the link with someone, they can no longer see the content in the folder.',
+        },
+        button: {
+          share: 'Share folder',
+          preview: 'Preview shared folder',
+          unShare: 'Stop sharing',
+          shareLink: 'Copy link',
+        },
+      },
     },
     tagList: 'Tags',
     tags: '{{count}} tag',
@@ -1233,6 +1261,11 @@ const messages = {
   programme: {
     grades: 'Grades',
   },
+  embed: {
+    conceptListError: 'Failed to show concept list',
+    linkError: 'Failed to show link.',
+    unsupported: `Embed {{type}} not supported.`,
+  },
 };
 
 export default messages;

package/src/locale/messages-nb.ts

@@ -630,6 +630,7 @@ const messages = {
     published: 'Publiseringsdato',
     rightsholder: 'Rettighetshaver',
     source: 'Kilde',
+    info: 'Lisensinformasjon',
   },
   errorMessage: {
     title: 'Ops, noe gikk galt',
@@ -764,6 +765,7 @@ const messages = {
     hits: '{{count}} treff',
   },
   notions: {
+    tags: 'Liste og filter',
     usedIn: 'Brukes i',
     closeNotion: 'Lukk',
   },
@@ -1111,6 +1113,32 @@ const messages = {
       onDragEndMissingOver: 'Mappen {{name}} ble sluppet',
       onDragCancel: 'Flytting avbrutt. Mappen {{name}} ble sluppet',
       dragHandle: 'Sorter mappen {{name}}',
+      sharing: {
+        share: 'Del mappe',
+        shared: 'Delt',
+        unShare: 'Delingen er avsluttet. Mappen er ikke lenger delt.',
+        link: 'Lenken er kopiert',
+        header: {
+          private: 'Vil du dele denne mappen?',
+          shared: 'Denne mappen er delt.',
+          unShare: 'Vil du avslutte deling av denne mappen?',
+        },
+        description: {
+          copy: 'Kopier og del denne lenken:',
+          private:
+            'Når du deler en mappe lager du en lenke som er åpen for alle som har lenken. Du kan endre innholdet eller avslutte delingen når du ønsker.',
+          shared:
+            'Nå kan du dele denne lenken med elever eller andre lærere. Hvis du gjør endringer i mappen vil de bli synlige for alle du har delt lenken med.',
+          unShare:
+            'Når du avslutter deling vil lenken til den delte mappen slutte å virke. Dersom du har delt lenken med noen vil de ikke lengre kunne se innholdet i mappen.',
+        },
+        button: {
+          share: 'Del mappen',
+          preview: 'Forhåndsvis delt mappe',
+          unShare: 'Avslutt deling',
+          shareLink: 'Kopier lenke',
+        },
+      },
     },
     tagList: 'Emneknagger',
     tags: '{{count}} emneknagg',
@@ -1230,6 +1258,11 @@ const messages = {
   programme: {
     grades: 'Trinn',
   },
+  embed: {
+    conceptListError: 'Klarte ikke å vise forklaringsliste',
+    linkError: 'Klarte ikke å vise lenke.',
+    unsupported: `Embed {{type}} er ikke støttet.`,
+  },
 };
 
 export default messages;

package/src/locale/messages-nn.ts

@@ -630,6 +630,7 @@ const messages = {
     rightsholder: 'Rettshavar',
     source: 'Kjelde',
     published: 'Publiseringsdato',
+    info: 'Lisensinformasjon',
   },
   errorMessage: {
     title: 'Ops, noko gjekk gale',
@@ -764,6 +765,7 @@ const messages = {
     hits: '{{count}} treff',
   },
   notions: {
+    tags: 'Liste og filter',
     usedIn: 'Brukast i',
     closeNotion: 'Lukk',
   },
@@ -1111,6 +1113,32 @@ const messages = {
       onDragEndMissingOver: 'Mappa blei sleppt',
       onDragCancel: 'Flytting avbrutt. Mappa {{name}} blei sleppt',
       dragHandle: 'Sorter mappa {{name}}',
+      sharing: {
+        share: 'Del mappe',
+        shared: 'Delt',
+        unShare: 'Delinga er avslutta. Mappa er ikkje lenger delt',
+        link: 'Lenka er kopiert',
+        header: {
+          private: 'Vil du dele denne mappa?',
+          shared: 'Denne mappa er delt',
+          unShare: 'Vil du slutte å dele denne mappa?',
+        },
+        description: {
+          copy: 'Kopier og del denne lenka:',
+          private:
+            'Når du deler ei mappe, lagar du ei lenke som er open for alle som har lenka. Du kan endre innhaldet eller avslutte delinga når du ønsker det.',
+          shared:
+            'No kan du dele denne lenka med elevar eller andre lærarar. Dersom du gjer endringar i mappa, blir dei synlege for alle du har delt lenka med.',
+          unShare:
+            'Når du avsluttar deling, vil lenka til den delte mappa slutte å verke. Dersom du har delt lenka med nokon, kan dei ikkje lenger sjå innhaldet i mappa.',
+        },
+        button: {
+          share: 'Del mappa',
+          preview: 'Førehandsvis delt mappe',
+          unShare: 'Avslutt deling',
+          shareLink: 'Kopier lenke',
+        },
+      },
     },
     tagList: 'Emneknaggar',
     tags: '{{count}} emneknagg',
@@ -1230,6 +1258,11 @@ const messages = {
   programme: {
     grades: 'Trinn',
   },
+  embed: {
+    conceptListError: 'Klarte ikkje å vise forklaringsliste',
+    linkError: 'Klarte ikkje å vise lenke.',
+    unsupported: `Embed {{type}} er ikkje støtta.`,
+  },
 };
 
 export default messages;

package/src/locale/messages-se.ts

@@ -631,6 +631,7 @@ const messages = {
     published: 'Almmuhanbeaivi',
     rightsholder: 'Vuoigatvuođaguoddi',
     source: 'Gáldu',
+    info: 'Lisensinformasjon',
   },
   errorMessage: {
     title: 'Ops, juoga manai boastut',
@@ -765,6 +766,7 @@ const messages = {
     hits: '{{count}} deaivama',
   },
   notions: {
+    tags: 'Liste og filter',
     usedIn: 'Adnojuvvo dás',
     closeNotion: 'Govčča',
   },
@@ -1112,6 +1114,32 @@ const messages = {
       onDragEndMissingOver: 'Máhppa {{name}} lea luitojuvvon',
       onDragCancel: 'Sirdin botkejuvvui. Máhppa {{name}} lea luitojuvvon.',
       dragHandle: 'Ordne máhpa {{name}}',
+      sharing: {
+        share: 'Del mappe',
+        shared: 'Delt',
+        unShare: 'Delingen er avsluttet. Mappen er ikke lenger delt.',
+        link: 'Lenken er kopiert',
+        header: {
+          private: 'Vil du dele denne mappen?',
+          shared: 'Denne mappen er delt.',
+          unShare: 'Vil du avslutte deling av denne mappen?',
+        },
+        description: {
+          copy: 'Kopier og del denne lenken:',
+          private:
+            'Når du deler en mappe lager du en lenke som er åpen for alle som har lenken. Du kan endre innholdet eller avslutte delingen når du ønsker.',
+          shared:
+            'Nå kan du dele denne lenken med elever eller andre lærere. Hvis du gjør endringer i mappen vil de bli synlige for alle du har delt lenken med.',
+          unShare:
+            'Når du avslutter deling vil lenken til den delte mappen slutte å virke. Dersom du har delt lenken med noen vil de ikke lengre kunne se innholdet i mappen.',
+        },
+        button: {
+          share: 'Del mappen',
+          preview: 'Forhåndsvis delt mappe',
+          unShare: 'Avslutt deling',
+          shareLink: 'Kopier lenke',
+        },
+      },
     },
     tagList: 'Fáddágilkor',
     tags: '{{count}} fáddágilkor',
@@ -1231,6 +1259,11 @@ const messages = {
   programme: {
     grades: 'Trinn',
   },
+  embed: {
+    conceptListError: 'Klarte ikkje å vise forklaringsliste',
+    linkError: 'Klarte ikkje å vise lenke.',
+    unsupported: `Embed {{type}} er ikkje støtta.`,
+  },
 };
 
 export default messages;