@ndla/ui 44.0.18 → 44.0.19

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