@ndla/ui 34.6.2 → 34.6.3

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',
   },
@@ -1233,6 +1235,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',
   },
@@ -1230,6 +1232,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',
   },
@@ -1230,6 +1232,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',
   },
@@ -1231,6 +1233,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-sma.ts

@@ -634,6 +634,7 @@ const messages = {
     published: 'Publiseringsdato',
     rightsholder: 'Rettighetshaver',
     source: 'Gaaltije',
+    info: 'Lisensinformasjon',
   },
   errorMessage: {
     title: 'Ovva, mij akt båajhtede sjïdtit',
@@ -768,6 +769,7 @@ const messages = {
     hits: '{{count}} gaavnedimmieh',
   },
   notions: {
+    tags: 'Liste og filter',
     usedIn: 'Brukes i',
     closeNotion: 'Dahph',
   },
@@ -1235,6 +1237,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/types.ts

@@ -48,7 +48,7 @@ export interface License {
 }
 
 export interface Copyright {
-  license: License;
+  license?: License;
   creators: Array<Contributor>;
   rightsholders: Array<Contributor>;
   processors: Array<Contributor>;