@ndla/ui 50.5.4 → 50.6.1

package/lib/index.d.ts

@@ -18,7 +18,7 @@ export { default as Masthead, getMastheadHeight, useMastheadHeight, SkipToMainCo
 export { default as ContentLoader } from './ContentLoader';
 export { default as RelatedArticleList, RelatedArticle } from './RelatedArticleList';
 export { ErrorResourceAccessDenied, default as ErrorMessage } from './ErrorMessage';
-export { default as FileList, File, PdfFile } from './FileList';
+export { default as FileList, File, PdfFile, Format } from './FileList';
 export { default as Logo } from './Logo';
 export { default as FactBox } from './FactBox';
 export { default as Image, ImageLink, makeSrcQueryString } from './Image';

package/lib/index.js

@@ -381,6 +381,12 @@ Object.defineProperty(exports, "FootnoteEmbed", {
     return _Embed.FootnoteEmbed;
   }
 });
+Object.defineProperty(exports, "Format", {
+  enumerable: true,
+  get: function () {
+    return _FileList.Format;
+  }
+});
 Object.defineProperty(exports, "FramedContent", {
   enumerable: true,
   get: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.5.4",
+  "version": "50.6.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.13",
-    "@ndla/button": "^12.0.18",
-    "@ndla/carousel": "^4.0.19",
-    "@ndla/core": "^4.3.0",
-    "@ndla/dropdown-menu": "^1.0.20",
-    "@ndla/forms": "^5.2.8",
+    "@ndla/accordion": "^3.0.15",
+    "@ndla/button": "^12.0.20",
+    "@ndla/carousel": "^4.0.21",
+    "@ndla/core": "^4.3.1",
+    "@ndla/dropdown-menu": "^1.0.21",
+    "@ndla/forms": "^5.2.10",
     "@ndla/hooks": "^2.1.4",
-    "@ndla/icons": "^4.2.5",
+    "@ndla/icons": "^5.0.0",
     "@ndla/licenses": "^7.2.4",
-    "@ndla/modal": "^5.0.18",
-    "@ndla/notion": "^6.0.19",
-    "@ndla/safelink": "^4.1.43",
-    "@ndla/select": "^3.2.5",
-    "@ndla/switch": "^1.1.26",
-    "@ndla/tabs": "^3.2.6",
-    "@ndla/tooltip": "^6.0.8",
-    "@ndla/typography": "^0.4.3",
+    "@ndla/modal": "^5.0.20",
+    "@ndla/notion": "^6.0.21",
+    "@ndla/safelink": "^4.1.45",
+    "@ndla/select": "^3.2.7",
+    "@ndla/switch": "^1.1.27",
+    "@ndla/tabs": "^3.2.7",
+    "@ndla/tooltip": "^6.0.9",
+    "@ndla/typography": "^0.4.4",
     "@ndla/util": "^4.0.3",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "674b17d155fc4c43b541e179821826bea1d47327"
+  "gitHead": "e7999bc4ea44f44a2138566150480fe6c285522f"
 }

package/src/CompetenceGoalTab/SearchButton.tsx

@@ -41,7 +41,7 @@ const SearchButton = ({ url, isOembed, searchText }: SearchButtonProps) => {
   return (
     <GoalSearchWrapper>
       <SafeLinkButton variant="outline" to={url} target={isOembed ? '_blank' : '_self'}>
-        <StyledSearch size="24" />
+        <StyledSearch size="normal" />
         <span>{searchText}</span>
       </SafeLinkButton>
     </GoalSearchWrapper>

package/src/ErrorMessage/ErrorResourceAccessDenied.tsx

@@ -30,12 +30,12 @@ const ErrorResourceAccessDenied = ({ onAuthenticateClick }: Props) => {
         back: t('errorMessage.back'),
         goToFrontPage: t('errorMessage.goToFrontPage'),
       }}
-      illustrationElement={<HumanMaleBoard className="c-icon--large" />}
+      illustrationElement={<HumanMaleBoard size="large" />}
       customElement={
         <ButtonV2 size="medium" onClick={onAuthenticateClick}>
           {t('user.buttonLogIn')}
           <StyledLogInIconWrapper aria-hidden>
-            <LogIn className="c-icon--medium" />
+            <LogIn size="normal" />
           </StyledLogInIconWrapper>
         </ButtonV2>
       }

package/src/Figure/component.figure.scss

@@ -37,7 +37,10 @@
   margin: $spacing 0 $spacing;
   position: relative;
   width: 100%;
-  transition: transform 0.4s, width 0.4s, height 0.4s;
+  transition:
+    transform 0.4s,
+    width 0.4s,
+    height 0.4s;
 
   &--full-column {
     left: auto !important;
@@ -235,7 +238,7 @@
   &__link-wrapper {
     margin-top: $spacing--small;
 
-    .c-icon {
+    [data-icon] {
       margin-left: $spacing--small/2;
       width: 18px;
       height: 18px;

package/src/FileList/File.tsx

@@ -8,9 +8,8 @@
 
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { Download } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
+import { breakpoints, colors, mq, spacing } from '@ndla/core';
+import Format from './Format';
 
 interface Props {
   title: string;
@@ -18,7 +17,6 @@ interface Props {
   fileExists: boolean;
   fileType: string;
 }
-
 export interface FileType {
   title: string;
   formats: FileFormat[];
@@ -31,36 +29,7 @@ export interface FileFormat {
   tooltip: string;
 }
 
-const LinkTextWrapper = styled.div`
-  & > span {
-    box-shadow: inset 0 -1px;
-  }
-`;
-const FileLink = styled(SafeLink)`
-  box-shadow: none;
-  position: relative;
-  color: ${colors.brand.primary};
-  margin-right: ${spacing.normal};
-  display: flex;
-  align-items: center;
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
-    ${LinkTextWrapper} {
-      box-shadow: none;
-    }
-  }
-`;
-
-const FileListItem = styled.li`
-  ${fonts.sizes('18px', '26px')};
-  font-weight: ${fonts.weight.semibold};
-  min-height: 60px;
+const StyledFileItem = styled.li`
   background: ${colors.brand.greyLighter};
   display: flex;
   align-items: center;
@@ -72,43 +41,14 @@ const FileListItem = styled.li`
   }
 `;
 
-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) {
-    return (
-      <span key={format.url}>
-        <Download />
-        <span>{isPrimary ? titleWithFormat : `(${format.fileType.toUpperCase()})`}</span>
-      </span>
-    );
-  }
-
-  return (
-    <FileLink key={format.url} to={format.url} target="_blank" aria-label={titleWithFormat}>
-      <Download />
-      <LinkTextWrapper aria-label={format.tooltip}>
-        <span>{isPrimary ? titleWithFormat : `(${format.fileType.toUpperCase()})`}</span>
-      </LinkTextWrapper>
-    </FileLink>
-  );
-};
-
 const File = ({ title, url, fileExists, fileType }: Props) => {
   const { t } = useTranslation();
   const tooltip = `${t('download')} ${url.split('/').pop()}`;
 
   return (
-    <FileListItem>
+    <StyledFileItem>
       <Format format={{ url, fileType, tooltip }} isPrimary title={title} isDeadLink={!fileExists} />
-    </FileListItem>
+    </StyledFileItem>
   );
 };
 

package/src/FileList/FileList.tsx

@@ -6,22 +6,23 @@
  *
  */
 
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
-
-interface Props {
+import { Heading } from '@ndla/typography';
+interface Props extends ComponentProps<'section'> {
   children: ReactNode;
+  headingButtons?: ReactNode;
 }
 
 const FileListSection = styled.section`
   margin: ${spacing.large} 0;
-  padding: ${spacing.small} 0 ${spacing.normal} ${spacing.normal};
+  padding: 0 0 ${spacing.normal} ${spacing.normal};
   border-left: 2px solid ${colors.brand.greyLightest};
   font-family: ${fonts.sans};
 
-  .c-icon {
+  [data-icon] {
     margin-top: 3px;
     flex-shrink: 0;
     margin-right: ${spacing.small};
@@ -30,14 +31,13 @@ const FileListSection = styled.section`
   }
 `;
 
-const FileListHeading = styled.h3`
-  ${fonts.sizes('16px', '18px')};
-  letter-spacing: 0.05em;
+const FileListHeaderWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   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`
@@ -45,11 +45,16 @@ const FilesList = styled.ul`
   padding: 0;
 `;
 
-const FileList = ({ children }: Props) => {
+const FileList = ({ children, headingButtons, ...rest }: Props) => {
   const { t } = useTranslation();
   return (
-    <FileListSection>
-      <FileListHeading>{t('files')}</FileListHeading>
+    <FileListSection {...rest}>
+      <FileListHeaderWrapper>
+        <Heading element="h3" headingStyle="list-title" margin="none">
+          {t('files')}
+        </Heading>
+        <div>{headingButtons}</div>
+      </FileListHeaderWrapper>
       <FilesList>{children}</FilesList>
     </FileListSection>
   );

package/src/FileList/Format.tsx

@@ -0,0 +1,75 @@
+/**
+ * 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, spacing } from '@ndla/core';
+import { Download } from '@ndla/icons/common';
+import SafeLink from '@ndla/safelink';
+import { Text } from '@ndla/typography';
+import { FileFormat } from './File';
+
+const StyledText = styled(Text)`
+  box-shadow: inset 0 -1px;
+
+  &:hover,
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+`;
+
+const FileLink = styled(SafeLink)`
+  box-shadow: none;
+  position: relative;
+  color: ${colors.brand.primary};
+  display: flex;
+  align-items: center;
+`;
+
+const StyledDownload = styled(Download)`
+  margin-top: 3px;
+  flex-shrink: 0;
+  margin-right: ${spacing.small};
+  height: 18px;
+  width: 18px;
+`;
+
+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) {
+    return (
+      <span key={format.url}>
+        <StyledDownload />
+        <Text element="span" textStyle="label-small" margin="none">
+          {isPrimary ? titleWithFormat : `(${format.fileType.toUpperCase()})`}
+        </Text>
+      </span>
+    );
+  }
+
+  return (
+    <FileLink key={format.url} to={format.url} target="_blank" aria-label={titleWithFormat}>
+      <StyledDownload />
+      <div aria-label={format.tooltip}>
+        <StyledText element="span" textStyle="label-small" margin="none">
+          {isPrimary ? titleWithFormat : `(${format.fileType.toUpperCase()})`}
+        </StyledText>
+      </div>
+    </FileLink>
+  );
+};
+
+export default Format;

package/src/FileList/index.ts

@@ -10,5 +10,6 @@ import FileList from './FileList';
 
 export { default as File } from './File';
 export { default as PdfFile } from './PdfFile';
+export { default as Format } from './Format';
 
 export default FileList;

package/src/Filter/component.filter.scss

@@ -292,7 +292,7 @@
       }
     }
 
-    .c-icon {
+    [data-icon] {
       margin-left: $spacing--small;
     }
 

package/src/LearningPaths/LearningPathSticky.tsx

@@ -63,9 +63,6 @@ const SafeLinkCSS = css`
     padding: 0;
   }
   transition: background 200ms ease;
-  > .c-icon--medium {
-    transition: transform 200ms ease;
-  }
   div {
     display: flex;
     flex-direction: column;
@@ -88,16 +85,6 @@ const SafeLinkCSS = css`
         box-shadow: none;
       }
     }
-    ${mq.range({ from: breakpoints.tablet })} {
-      > .c-icon--medium {
-        transform: translateX(${spacing.xsmall});
-      }
-      &:first-of-type {
-        > .c-icon--medium {
-          transform: translateX(-${spacing.xsmall});
-        }
-      }
-    }
   }
 `;
 
@@ -123,11 +110,11 @@ export const LearningPathStickySibling = ({ title, toLearningPathUrl, pathId, st
       css={SafeLinkCSS}
       aria-label={arrow === 'left' ? t('learningPath.previousArrow') : t('learningPath.nextArrow')}
     >
-      {arrow === 'left' && <Back className="c-icon--medium" />}
+      {arrow === 'left' && <Back size="normal" />}
       <div>
         <StyledTitle>{title}</StyledTitle>
       </div>
-      {arrow === 'right' && <Forward className="c-icon--medium" />}
+      {arrow === 'right' && <Forward size="normal" />}
     </SafeLink>
   );
 };

package/src/LicenseByline/EmbedByline.tsx

@@ -106,6 +106,7 @@ const mobileStyling = css`
 const RightsWrapper = styled.div`
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: ${spacing.nsmall};
 
   &[data-grid='true'] {
@@ -163,7 +164,7 @@ const EmbedByline = ({
         {license ? <LicenseLink license={license} asLink={!!license.url.length} /> : null}
         <LicenseInformationWrapper>
           <span>
-            <b>{t(`embed.type.${type}`)}: </b>
+            <b>{`${t(`embed.type.${type}`)}${captionAuthors.length ? ':' : ''}`} </b>
             {captionAuthors.map((author) => author.name).join(', ')}
           </span>
         </LicenseInformationWrapper>