@ndla/ui 50.5.3 → 50.6.0

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/lib/locale/messages-en.js

@@ -1130,7 +1130,7 @@ const messages = {
       recentArenaTopics: 'New posts in the arena'
     },
     myProfile: {
-      title: 'My Profile',
+      title: 'My profile',
       disclaimerTitle: {
         employee: 'Where is my name used?',
         student: 'Where is my name used?'

package/lib/locale/messages-nb.js

@@ -1130,7 +1130,7 @@ const messages = {
       recentArenaTopics: 'Nye innlegg i arenaen'
     },
     myProfile: {
-      title: 'Min Profil',
+      title: 'Min profil',
       disclaimerTitle: {
         employee: 'Hvor brukes navnet mitt?',
         student: 'Hvor brukes navnet mitt?'

package/lib/locale/messages-nn.js

@@ -1130,7 +1130,7 @@ const messages = {
       recentArenaTopics: 'Nye innlegg i arenaen'
     },
     myProfile: {
-      title: 'Min Profil',
+      title: 'Min profil',
       disclaimerTitle: {
         employee: 'Kvar blir namnet mitt brukt?',
         student: 'Kvar blir namnet mitt brukt?'

package/lib/locale/messages-sma.js

@@ -1130,7 +1130,7 @@ const messages = {
       recentArenaTopics: 'Nye innlegg i arenaen'
     },
     myProfile: {
-      title: 'Mov Profijle',
+      title: 'Mov profijle',
       disclaimerTitle: {
         employee: 'Gusnie mov nomme?',
         student: 'Gusnie mov nomme?'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.5.3",
+  "version": "50.6.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,19 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.13",
-    "@ndla/button": "^12.0.18",
-    "@ndla/carousel": "^4.0.19",
+    "@ndla/accordion": "^3.0.14",
+    "@ndla/button": "^12.0.19",
+    "@ndla/carousel": "^4.0.20",
     "@ndla/core": "^4.3.0",
     "@ndla/dropdown-menu": "^1.0.20",
-    "@ndla/forms": "^5.2.8",
+    "@ndla/forms": "^5.2.9",
     "@ndla/hooks": "^2.1.4",
-    "@ndla/icons": "^4.2.5",
+    "@ndla/icons": "^4.2.6",
     "@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/modal": "^5.0.19",
+    "@ndla/notion": "^6.0.20",
+    "@ndla/safelink": "^4.1.44",
+    "@ndla/select": "^3.2.6",
     "@ndla/switch": "^1.1.26",
     "@ndla/tabs": "^3.2.6",
     "@ndla/tooltip": "^6.0.8",
@@ -71,7 +71,7 @@
   },
   "devDependencies": {
     "@ndla/types-backend": "^0.2.21",
-    "@ndla/types-embed": "^4.0.10",
+    "@ndla/types-embed": "^4.0.11",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a4093aae160a19db04b67403cd9d6ac1c501f1fb"
+  "gitHead": "3930fca2deff61ba578d6c17b8adf89604ccbe7c"
 }

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,38 +6,30 @@
  *
  */
 
-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 {
-    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;
+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 +37,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/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>

package/src/Navigation/NavigationBox.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020-present, NDLA.
+ * Copyright (c) 2019-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,15 +12,16 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
 import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
-import { HumanMaleBoard } from '@ndla/icons/common';
+import { Additional, HumanMaleBoard } from '@ndla/icons/common';
 import { SafeLinkButton } from '@ndla/safelink';
 import { Switch } from '@ndla/switch';
 import { Heading } from '@ndla/typography';
 import { uuid } from '@ndla/util';
 
 const StyledWrapper = styled.nav`
-  margin: 20px 0 34px;
+  margin: ${spacing.normal} 0 ${spacing.mediumlarge};
 `;
+
 const StyledHeadingWrapper = styled.div`
   display: flex;
   justify-content: space-between;
@@ -33,77 +34,37 @@ const StyledHeading = styled(Heading)`
   }
 `;
 
-type listProps = {
-  direction?: 'horizontal' | 'vertical' | 'floating';
-};
-const StyledList = styled.ul<listProps>`
+const StyledList = styled.ul`
   list-style: none;
   margin: 0;
   padding: 0;
-  ${(props) =>
-    props.direction !== 'floating' &&
-    css`
-      ${mq.range({ from: breakpoints.tablet })} {
-        column-count: 2;
-        column-gap: 20px;
-        ${props.direction === 'horizontal' &&
-        css`
-          display: grid;
-          grid-template-columns: repeat(2, 1fr);
-        `}
-      }
-      ${mq.range({ from: breakpoints.tabletWide })} {
-        column-count: 3;
-        column-gap: 20px;
-        ${props.direction === 'horizontal' &&
-        css`
-          grid-template-columns: repeat(3, 1fr);
-        `}
-      }
-    `};
+
+  &[data-direction='horizontal'] {
+    ${mq.range({ from: breakpoints.tablet })} {
+      column-count: 2;
+      column-gap: 20px;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+    }
+    ${mq.range({ from: breakpoints.tabletWide })} {
+      column-count: 3;
+      column-gap: 20px;
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
 `;
-type additionalResourceProps = {
-  isAdditionalResource?: boolean;
-  isRestrictedResource?: boolean;
-  lighter?: boolean;
-  selected?: boolean;
-  listDirection?: listProps['direction'];
-};
 
-const StyledListItem = styled.li<additionalResourceProps>`
+const StyledListItem = styled.li`
   margin-bottom: 0;
   break-inside: avoid;
-  ${(props) =>
-    props.listDirection === 'floating' &&
-    css`
-      display: inline-block;
-      margin: 0 ${spacing.xsmall} ${spacing.xsmall} 0;
-      ${mq.range({ until: breakpoints.mobileWide })} {
-        display: block;
-      }
-    `}
-`;
 
-const StyledListElementWrapper = styled.div<additionalResourceProps>`
-  position: relative;
-  ${(props) =>
-    props.isAdditionalResource &&
-    css`
-      & > * {
-        border: 1px dashed ${props.lighter && !props.selected ? `${colors.brand.tertiary}` : `${colors.brand.dark}`};
-        background-clip: padding-box;
-        :hover,
-        :focus {
-          border: 1px dashed ${colors.brand.dark};
-          background-clip: padding-box;
-          color: ${colors.white};
-          ${StyledAdditionalResourceMark} {
-            color: ${colors.white};
-            border-color: ${colors.white};
-          }
-        }
-      }
-    `}
+  &[data-direction='floating'] {
+    display: inline-block;
+    margin: 0 ${spacing.xsmall} ${spacing.xsmall} 0;
+    ${mq.range({ until: breakpoints.mobileWide })} {
+      display: block;
+    }
+  }
 `;
 
 const StyledSpacingElement = styled.span`
@@ -122,21 +83,22 @@ const StyledButtonContent = styled.span`
   align-items: center;
 `;
 
-const StyledButtonContentText = styled.span<additionalResourceProps>`
-  ${(props) => {
-    if (props.isAdditionalResource && props.isRestrictedResource) {
-      return `padding-left: ${spacing.medium};`;
-    }
-    if (props.isAdditionalResource || props.isRestrictedResource) {
-      return `padding-left: ${spacing.small};`;
-    }
-  }}
+const StyledButtonContentText = styled.span`
+  &[data-additional='true'][data-restricted='true'] {
+    padding-left: ${spacing.medium};
+  }
+  &[data-additional='true'] {
+    padding-left: ${spacing.small};
+  }
+  &[data-restricted='true'] {
+    padding-left: ${spacing.small};
+  }
 `;
 
 const StyledMarksWrapper = styled.span`
   position: absolute;
-  left: 7px;
-  top: 6px;
+  left: ${spacing.xxsmall};
+  top: ${spacing.xsmall};
   display: flex;
   align-items: center;
   & > * {
@@ -146,32 +108,45 @@ const StyledMarksWrapper = styled.span`
     margin-left: 0;
   }
 `;
-const StyledAdditionalResourceMark = styled.span<additionalResourceProps>`
-  color: ${(props) => (props.lighter && !props.selected ? `${colors.brand.dark}` : `${colors.white}`)};
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 18px;
-  text-align: center;
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border: 1px solid ${(props) => (props.lighter && !props.selected ? `${colors.brand.dark}` : `${colors.white}`)};
-  border-radius: 100px;
-  transition: ${misc.transition.default};
+
+const StyledAdditional = styled(Additional)`
+  fill: ${colors.white};
+  width: ${spacing.nsmall};
+  height: ${spacing.nsmall};
 `;
 
 const StyledHumanBoardIconWrapper = styled.span`
   display: flex;
 `;
+
 const StyledButtonContentSelected = styled.span`
   width: 10px;
   height: 10px;
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
   background: ${colors.white};
   flex-shrink: 0;
   margin-left: ${spacing.small};
 `;
 
+const StyledListElementWrapper = styled.div`
+  position: relative;
+  &[data-additional='true'] {
+    & > * {
+      border: 1px dashed ${colors.brand.dark};
+      background-clip: padding-box;
+      :hover,
+      :focus {
+        border: 1px dashed ${colors.brand.dark};
+        background-clip: padding-box;
+        color: ${colors.white};
+      }
+      &[data-color-mode='light'][data-selected='false'] {
+        border: 1px dashed ${colors.brand.tertiary};
+      }
+    }
+  }
+`;
+
 const listElementStyle = css`
   display: flex;
   flex: 1;
@@ -186,6 +161,7 @@ export type ItemProps = {
   isAdditionalResource?: boolean;
   isRestrictedResource?: boolean;
 };
+
 type Props = {
   heading?: string;
   colorMode?: 'primary' | 'darker' | 'light' | 'greyLightest' | 'greyLighter';
@@ -194,7 +170,7 @@ type Props = {
   onClick?: (event: MouseEvent<HTMLElement>, id?: string) => void;
   hasAdditionalResources?: boolean;
   showAdditionalResources?: boolean;
-  listDirection?: listProps['direction'];
+  listDirection?: 'horizontal' | 'floating';
   invertedStyle?: boolean;
   onToggleAdditionalResources?: (checked: boolean) => void;
 };
@@ -231,13 +207,13 @@ export const NavigationBox = ({
           />
         )}
       </StyledHeadingWrapper>
-      <StyledList data-testid="nav-box-list" direction={listDirection}>
+      <StyledList data-testid="nav-box-list" data-direction={listDirection}>
         {items?.map((item: ItemProps) => (
-          <StyledListItem key={item.label} listDirection={listDirection} data-testid="nav-box-item">
+          <StyledListItem key={item.label} data-direction={listDirection} data-testid="nav-box-item">
             <StyledListElementWrapper
-              isAdditionalResource={item.isAdditionalResource}
-              lighter={colorMode === 'light'}
-              selected={item.selected}
+              data-additional={item.isAdditionalResource}
+              data-color-mode={colorMode}
+              data-selected={item.selected}
             >
               <ListElementType
                 to={item.url ?? ''}
@@ -253,16 +229,12 @@ export const NavigationBox = ({
               >
                 <StyledButtonContent>
                   <StyledButtonContentText
-                    isAdditionalResource={item.isAdditionalResource}
-                    isRestrictedResource={item.isRestrictedResource}
-                    lighter={colorMode === 'light'}
+                    data-additional={item.isAdditionalResource}
+                    data-restricted={item.isRestrictedResource}
+                    data-color-mode={colorMode}
                   >
                     <StyledMarksWrapper>
-                      {item.isAdditionalResource && (
-                        <StyledAdditionalResourceMark lighter={colorMode === 'light'} selected={item.selected}>
-                          T
-                        </StyledAdditionalResourceMark>
-                      )}
+                      {item.isAdditionalResource && <StyledAdditional aria-label={t('resource.additionalTooltip')} />}
                       {item.isRestrictedResource && (
                         <StyledHumanBoardIconWrapper>
                           <HumanMaleBoard />

package/src/ResourceGroup/ResourceItem.tsx

@@ -264,12 +264,12 @@ const ResourceItem = ({
           <>
             {additional && (
               <IconWrapper id={additionalId} aria-label={contentTypeDescription} title={contentTypeDescription}>
-                <Additional />
+                <Additional color={colors.brand.dark} />
               </IconWrapper>
             )}
             {!additional && (
               <IconWrapper id={coreId} aria-label={contentTypeDescription} title={contentTypeDescription}>
-                <Core />
+                <Core color={colors.brand.primary} />
               </IconWrapper>
             )}
           </>