@ndla/ui 44.0.18 → 44.0.20

package/src/ContactBlock/ContactBlock.tsx

@@ -15,6 +15,8 @@ import { useTranslation } from 'react-i18next';
 import concat from 'lodash/concat';
 import { errorSvgSrc } from '../Embed/ImageEmbed';
 
+const BLOB_WIDTH = 90;
+
 interface Props {
   image?: IImageMetaInformationV3;
   jobTitle: string;
@@ -27,6 +29,7 @@ interface Props {
 }
 const BlockWrapper = styled.div`
   display: flex;
+  position: relative;
   flex-direction: column;
   padding: 0 0 ${spacing.medium} ${spacing.medium};
   font-family: ${fonts.sans};
@@ -54,6 +57,7 @@ const StyledHeader = styled.div`
 
 const StyledText = styled.div`
   display: flex;
+  ${fonts.sizes('16px', '26px')};
   overflow-wrap: anywhere;
   color: ${colors.text.light};
   gap: ${spacing.xxsmall};
@@ -68,13 +72,18 @@ const EmailLink = styled.a`
 `;
 
 const SummaryBlock = styled.p`
-  font-family: ${fonts.serif};
-  padding: 0 ${spacing.medium} 0 0;
+  font-family: ${fonts.sans};
+  padding: 0;
+  max-width: calc(100% - (${BLOB_WIDTH}px / 2));
   ${mq.range({ from: breakpoints.tabletWide })} {
     padding-top: 0;
   }
 `;
 
+const InfoWrapper = styled.div`
+  max-width: calc(100% - ${BLOB_WIDTH}px);
+`;
+
 const TextWrapper = styled.div`
   display: flex;
   overflow: hidden;
@@ -83,13 +92,17 @@ const TextWrapper = styled.div`
 
 const BlobWrapper = styled.div`
   height: 180px;
-  width: 90px;
+  width: ${BLOB_WIDTH}px;
+  position: absolute;
+  overflow: hidden;
+  right: 0px;
 `;
 
 const ImageWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: ${spacing.small};
+  gap: ${spacing.xsmall};
+  ${fonts.sizes('16px', '26px')};
   padding: ${spacing.medium} ${spacing.medium} 0 0;
   ${mq.range({ from: breakpoints.tabletWide })} {
     padding-right: 0;
@@ -102,7 +115,7 @@ const blobStyling = css`
   transform: translate(10%, 0);
 `;
 const Email = styled.div`
-  min-width: 60px;
+  white-space: nowrap;
 `;
 
 const ContentWrapper = styled.div`
@@ -135,14 +148,14 @@ const ContactBlock = ({ image, jobTitle, description, name, email, blobColor = '
       </ImageWrapper>
       <ContentWrapper>
         <TextWrapper>
-          <div>
+          <InfoWrapper>
             <StyledHeader>{name}</StyledHeader>
             <StyledText>{jobTitle}</StyledText>
             <StyledText>
               <Email>{`${t('email')}:`}</Email>
               <EmailLink href={`mailto:${email}?subject=Contact us`}>{email}</EmailLink>
             </StyledText>
-          </div>
+          </InfoWrapper>
           <BlobWrapper>
             <Blob css={blobStyling} color={isGreenBlob ? colors.support.greenLight : colors.support.redLight} />
           </BlobWrapper>

package/src/Embed/AudioEmbed.stories.tsx

@@ -203,7 +203,6 @@ export const AudioEmbedStory: StoryObj<typeof AudioEmbed> = {
     embed: {
       resource: 'audio',
       status: 'success',
-      seq: 1,
       embedData: embedData,
       data: successData,
     },
@@ -216,7 +215,6 @@ export const AudioEmbedFailed: StoryObj<typeof AudioEmbed> = {
     embed: {
       resource: 'audio',
       status: 'error',
-      seq: 1,
       embedData: embedData,
     },
   },
@@ -228,7 +226,6 @@ export const Podcast: StoryObj<typeof AudioEmbed> = {
     embed: {
       resource: 'audio',
       status: 'success',
-      seq: 1,
       embedData: podcastEmbedData,
       data: podcastSuccessData,
     },
@@ -241,7 +238,6 @@ export const PodcastFailed: StoryObj<typeof AudioEmbed> = {
     embed: {
       resource: 'audio',
       status: 'error',
-      seq: 1,
       embedData: podcastEmbedData,
     },
   },

package/src/Embed/AudioEmbed.tsx

@@ -39,8 +39,6 @@ const imageMetaToMockEmbed = (
 ): Extract<ImageMetaData, { status: 'success' }> => ({
   resource: 'image',
   status: 'success',
-  // Make sure the seq is unused. It's rarely used, but it's nice to ensure uniqueness.
-  seq: imageMeta.seq + 0.1,
   // We check that this exists where the function is used.
   data: imageMeta.data.imageMeta!,
   embedData: {
@@ -55,7 +53,7 @@ const AudioEmbed = ({ embed, heartButton: HeartButton }: Props) => {
     return <EmbedErrorPlaceholder type={embed.embedData.type === 'standard' ? 'audio' : 'podcast'} />;
   }
 
-  const { data, embedData, seq } = embed;
+  const { data, embedData } = embed;
 
   if (embedData.type === 'minimal') {
     return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;
@@ -69,10 +67,8 @@ const AudioEmbed = ({ embed, heartButton: HeartButton }: Props) => {
 
   const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };
 
-  const figureId = `figure-${seq}-${data.id}`;
-
   return (
-    <Figure id={figureId} type="full">
+    <Figure type="full">
       <AudioPlayer
         description={data.podcastMeta?.introduction ?? ''}
         img={img}

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -82,7 +82,6 @@ const metaData: BrightcoveData = {
 
 const visuallyInterpretedEmbedMetaData: BrightcoveMetaData = {
   resource: 'brightcove',
-  seq: 3,
   status: 'success',
   embedData: {
     resource: 'brightcove',
@@ -183,7 +182,6 @@ export const BrightcoveEmbedStory: StoryObj<typeof BrightcoveEmbed> = {
     embed: {
       resource: 'brightcove',
       status: 'success',
-      seq: 1,
       embedData: embedData,
       data: metaData,
     },
@@ -203,7 +201,6 @@ export const BrightcoveFailed: StoryObj<typeof BrightcoveEmbed> = {
     embed: {
       resource: 'brightcove',
       status: 'error',
-      seq: 1,
       embedData: embedData,
     },
   },

package/src/Embed/BrightcoveEmbed.tsx

@@ -86,18 +86,17 @@ const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props)
       </EmbedErrorPlaceholder>
     );
   }
-  const { data, seq } = embed;
+  const { data } = embed;
 
   const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;
 
-  const figureId = `figure-${seq}-${data.id}`;
   const originalVideoProps = getIframeProps(embedData, data.sources);
   const alternativeVideoProps = linkedVideoId
     ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)
     : undefined;
 
   return (
-    <Figure id={figureId} type={isConcept ? 'full-column' : 'full'} resizeIframe>
+    <Figure type={isConcept ? 'full-column' : 'full'} resizeIframe>
       <div className="brightcove-video">
         <BrightcoveIframe
           ref={iframeRef}

package/src/Embed/ConceptEmbed.stories.tsx

@@ -72,7 +72,6 @@ const conceptMetaData: ConceptData['concept'] = {
 const visualElementData: ConceptData['visualElement'] = {
   resource: 'image',
   status: 'success',
-  seq: 6,
   embedData: {
     resource: 'image',
     resourceId: '52863',
@@ -170,7 +169,6 @@ export const Block: StoryObj<typeof ConceptEmbed> = {
     embed: {
       resource: 'concept',
       status: 'success',
-      seq: 1,
       embedData: blockEmbedData,
       data: blockMetaData,
     },
@@ -183,7 +181,6 @@ export const BlockFailed: StoryObj<typeof ConceptEmbed> = {
     embed: {
       resource: 'concept',
       status: 'error',
-      seq: 1,
       embedData: blockEmbedData,
     },
   },
@@ -195,7 +192,6 @@ export const Inline: StoryObj<typeof ConceptEmbed> = {
     embed: {
       resource: 'concept',
       status: 'success',
-      seq: 1,
       embedData: inlineEmbedData,
       data: blockMetaData,
     },
@@ -208,7 +204,6 @@ export const InlineFailed: StoryObj<typeof ConceptEmbed> = {
     embed: {
       resource: 'concept',
       status: 'error',
-      seq: 1,
       embedData: inlineEmbedData,
     },
   },

package/src/Embed/ExternalEmbed.stories.tsx

@@ -66,7 +66,6 @@ export const Regular: StoryObj<typeof ExternalEmbed> = {
     embed: {
       resource: 'external',
       status: 'success',
-      seq: 8,
       embedData: embedData,
       data: metaData,
     },
@@ -78,7 +77,6 @@ export const Failed: StoryObj<typeof ExternalEmbed> = {
     embed: {
       resource: 'external',
       status: 'error',
-      seq: 3,
       embedData: embedData,
     },
   },

package/src/Embed/H5pEmbed.stories.tsx

@@ -72,7 +72,6 @@ export const Regular: StoryObj<typeof H5pEmbed> = {
     embed: {
       resource: 'h5p',
       status: 'success',
-      seq: 5,
       embedData: embedData,
       data: metaData,
     },
@@ -84,7 +83,6 @@ export const Failed: StoryObj<typeof H5pEmbed> = {
     embed: {
       resource: 'h5p',
       status: 'error',
-      seq: 3,
       embedData: embedData,
     },
   },

package/src/Embed/IframeEmbed.stories.tsx

@@ -47,7 +47,6 @@ export const Regular: StoryObj<typeof IframeEmbed> = {
     embed: {
       resource: 'iframe',
       status: 'success',
-      seq: 3,
       embedData: embedData,
       data: {},
     },
@@ -59,7 +58,6 @@ export const Failed: StoryObj<typeof IframeEmbed> = {
     embed: {
       resource: 'iframe',
       status: 'error',
-      seq: 3,
       embedData: embedData,
     },
   },
@@ -132,7 +130,6 @@ export const OpensInNewWindow: StoryObj<typeof IframeEmbed> = {
     embed: {
       resource: 'iframe',
       status: 'success',
-      seq: 4,
       embedData: opensInNewEmbedData,
       data: opensInnewMetaData,
     },
@@ -144,7 +141,6 @@ export const OpensInNewWindowFailed: StoryObj<typeof IframeEmbed> = {
     embed: {
       resource: 'iframe',
       status: 'error',
-      seq: 4,
       embedData: opensInNewEmbedData,
     },
   },

package/src/Embed/ImageEmbed.stories.tsx

@@ -111,7 +111,6 @@ export const ImageEmbedStory: StoryObj<typeof ImageEmbed> = {
     embed: {
       resource: 'image',
       status: 'success',
-      seq: 1,
       embedData: embedData,
       data: metaData,
     },
@@ -124,7 +123,6 @@ export const Failed: StoryObj<typeof ImageEmbed> = {
     embed: {
       resource: 'image',
       status: 'error',
-      seq: 1,
       embedData: embedData,
     },
   },

package/src/Embed/ImageEmbed.tsx

@@ -111,7 +111,7 @@ const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid, path
     return <EmbedErrorPlaceholder type={'image'} figureType={figureType} />;
   }
 
-  const { data, embedData, seq } = embed;
+  const { data, embedData } = embed;
 
   const altText = embedData.alt || '';
 
@@ -121,13 +121,10 @@ const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid, path
   const focalPoint = getFocalPoint(embedData);
   const crop = getCrop(embedData);
 
-  const figureId = `figure-${seq}-${data.id}`;
-
   const isCopyrighted = data.copyright.license.license.toLowerCase() === COPYRIGHTED;
 
   return (
     <Figure
-      id={figureId}
       type={imageSizes ? undefined : figureType}
       className={imageSizes ? `c-figure--${embedData.align} expanded` : ''}
     >

package/src/FileList/File.tsx

@@ -31,11 +31,9 @@ const FileLink = styled(SafeLink)`
   }
 `;
 
-const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, id: string, isDeadLink: boolean) => {
+const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, isDeadLink: boolean) => {
   const titleWithFormat = `${title} (${format.fileType.toUpperCase()})`;
 
-  const formatId = `${id}_${format.fileType}`;
-
   if (isDeadLink) {
     return (
       <span key={format.url}>
@@ -46,7 +44,7 @@ const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, id:
   }
 
   return (
-    <FileLink key={format.url} to={format.url} target="_blank" aria-label={titleWithFormat} aria-describedby={formatId}>
+    <FileLink key={format.url} to={format.url} target="_blank" aria-label={titleWithFormat}>
       <Download />
       <Tooltip tooltip={format.tooltip}>
         <LinkTextWrapper>
@@ -58,7 +56,6 @@ const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, id:
 };
 
 interface Props {
-  id: string;
   file: FileType;
 }
 
@@ -77,9 +74,9 @@ const FileListItem = styled.li`
   }
 `;
 
-const File = ({ file, id }: Props) => {
+const File = ({ file }: Props) => {
   const formatLinks = file.formats.map((format, index) =>
-    renderFormat(format, file.title, index === 0, id, !file.fileExists),
+    renderFormat(format, file.title, index === 0, !file.fileExists),
   );
 
   return <FileListItem key={file.title}>{formatLinks}</FileListItem>;

package/src/FileList/FileList.tsx

@@ -55,7 +55,7 @@ const FileList = ({ files, heading, id }: Props) => (
     <FileListHeading>{heading}</FileListHeading>
     <FilesList>
       {files.map((file) => (
-        <File key={`file-${id}-${file.title}`} file={file} id={id} />
+        <File key={`file-${id}-${file.title}`} file={file} />
       ))}
     </FilesList>
   </FileListSection>

package/src/FileList/FileV2.tsx

@@ -10,19 +10,17 @@ 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 FileV2 = ({ title, url, fileExists, fileType }: Props) => {
   const { t } = useTranslation();
   const tooltip = `${t('download')} ${url.split('/').pop()}`;
   return (
     <File
-      id={id}
       file={{
         title,
         fileExists,

package/src/Grid/Grid.tsx

@@ -60,7 +60,7 @@ const GridContainer = styled.div`
   }
 
   &[data-border='lightBlue'] {
-    border: 1px solid ${colors.brand.light};
+    border: 1px solid ${colors.brand.lighter};
   }
   &[data-background='white'] {
     background-color: ${colors.white};

package/src/KeyFigure/KeyFigure.tsx

@@ -16,10 +16,14 @@ const ContentWrapper = styled.div`
   align-items: center;
   padding: ${spacing.small};
   align-items: center;
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    padding: ${spacing.medium} ${spacing.large};
+  }
 `;
 
 const StyledImage = styled.img`
-  width: 100%;
+  height: 150px;
+  width: 150px;
 `;
 
 const TitleWrapper = styled.div`
@@ -60,7 +64,7 @@ interface Props {
 const KeyFigure = ({ image, title, subtitle }: Props) => {
   return (
     <ContentWrapper>
-      <StyledImage src={image?.src} width={250} height={200} alt={image?.alt} />
+      <StyledImage src={image?.src} width={150} height={150} alt={image?.alt} />
       <TitleWrapper>{title}</TitleWrapper>
       <SubTitleWrapper>{subtitle}</SubTitleWrapper>
     </ContentWrapper>

package/src/LinkBlock/LinkBlock.tsx

@@ -15,6 +15,7 @@ import { breakpoints, colors, spacing, mq } from '@ndla/core';
 import { LinkBlockEmbedData } from '@ndla/types-embed';
 import { useMemo } from 'react';
 import Heading from '../Typography/Heading';
+import { usePossiblyRelativeUrl } from '../utils/relativeUrl';
 
 const StyledForward = styled(Forward)`
   margin: 0 ${spacing.nsmall};
@@ -72,7 +73,12 @@ const StyledCalenderEd = styled(CalendarEd)`
   color: ${colors.icon.iconBlue};
 `;
 
-const LinkBlock = ({ title, language, date, url }: Omit<LinkBlockEmbedData, 'resource'>) => {
+interface Props extends Omit<LinkBlockEmbedData, 'resource'> {
+  path?: string;
+}
+
+const LinkBlock = ({ title, language, date, url, path }: Props) => {
+  const href = usePossiblyRelativeUrl(url, path);
   const formattedDate = useMemo(() => {
     if (!date) return null;
     const locale = language === 'nb' ? nb : language === 'nn' ? nn : enGB;
@@ -80,7 +86,7 @@ const LinkBlock = ({ title, language, date, url }: Omit<LinkBlockEmbedData, 'res
   }, [date, language]);
 
   return (
-    <StyledSafeLink to={url}>
+    <StyledSafeLink to={href}>
       <InfoWrapper>
         <Heading element="h3" margin="none" headingStyle="h3" lang={language}>
           {title}

package/src/Table/Table.tsx

@@ -194,6 +194,9 @@ export const TableStyling = css`
 const TableWrapper = styled.div`
   display: flex;
   justify-content: center;
+`;
+
+const OverflowWrapper = styled.div`
   overflow-x: auto;
 `;
 
@@ -242,13 +245,13 @@ const Table = ({ children, id, ...rest }: Props) => {
 
   return (
     <TableWrapper>
-      <div>
+      <OverflowWrapper>
         <LeftScrollBorder data-block={scrollPosition === 'end' || scrollPosition === 'center'} />
         <table ref={tableRef} id={id} onScroll={onScroll} css={TableStyling} {...rest}>
           {children}
         </table>
         <RightScrollBorder data-block={scrollPosition === 'start' || scrollPosition === 'center'} />
-      </div>
+      </OverflowWrapper>
     </TableWrapper>
   );
 };

package/src/utils/relativeUrl.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ *
+ */
+
+const ENV_REGEX = /(staging|test)\.?/;
+
+const NDLA_URL = /(.*\.)?ndla.no.*/;
+
+export const usePossiblyRelativeUrl = (url: string, path?: string) => {
+  if (!path) return url;
+  if (!NDLA_URL.test(url) || !NDLA_URL.test(path)) return url;
+  const urlObj = new URL(url.replace(ENV_REGEX, ''));
+  const pathObj = new URL(path.replace(ENV_REGEX, ''));
+  if (urlObj.host === pathObj.host) return urlObj.pathname;
+  return url;
+};