@ndla/ui 27.1.5 → 27.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "27.1.5",
+  "version": "27.1.7",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,16 +32,16 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.2",
-    "@ndla/button": "^3.6.0",
+    "@ndla/button": "^3.6.1",
     "@ndla/carousel": "^1.2.23",
     "@ndla/core": "^2.3.5",
-    "@ndla/forms": "^3.3.4",
+    "@ndla/forms": "^3.3.5",
     "@ndla/hooks": "^1.1.6",
     "@ndla/icons": "^1.13.0",
     "@ndla/licenses": "^5.0.17",
     "@ndla/modal": "^1.5.0",
-    "@ndla/notion": "^3.1.45",
-    "@ndla/safelink": "^2.2.18",
+    "@ndla/notion": "^3.1.46",
+    "@ndla/safelink": "^2.2.19",
     "@ndla/switch": "^0.1.13",
     "@ndla/tabs": "^1.1.22",
     "@ndla/tooltip": "^2.2.1",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ddc7161f7e2bb137fd8912787dd1b6c0b719f751"
+  "gitHead": "a2bbbd2a97f3e3468c06cc1aea9849a24d9e5461"
 }

package/src/Article/ArticleByline.tsx

@@ -59,6 +59,8 @@ type Props = {
   copyPageUrlLink?: string;
   printUrl?: string;
   locale?: string;
+  copyEmbedLink?: string;
+  copySourceReference?: string;
 };
 
 const renderContributors = (contributors: SupplierProps[] | AuthorProps[], t: TFunction) => {
@@ -91,16 +93,29 @@ const ArticleByline = ({
   copyPageUrlLink,
   printUrl,
   locale,
+  copyEmbedLink,
+  copySourceReference,
 }: Props) => {
   const { t } = useTranslation();
+
   const copyLinkHandler = () => {
     if (copyPageUrlLink) {
       copyTextToClipboard(copyPageUrlLink);
     }
   };
-
   const licenseRights = getLicenseByAbbreviation(license, locale).rights;
 
+  const copyLicense = () => {
+    if (copySourceReference) {
+      copyTextToClipboard(copySourceReference);
+    }
+  };
+  const copyEmbededLink = () => {
+    if (copyEmbedLink) {
+      copyTextToClipboard(copyEmbedLink);
+    }
+  };
+
   const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
   const showSecondaryContributors = suppliers.length > 0 && authors.length > 0;
 
@@ -129,6 +144,18 @@ const ArticleByline = ({
       )}
       {showSecondaryContributors && <TextWrapper>{getSuppliersText(suppliers, t)}</TextWrapper>}
       <ButtonWrapper>
+        {copySourceReference && (
+          <CopyButton
+            size="small"
+            borderShape="rounded"
+            outline
+            aria-live="assertive"
+            copyNode={t('license.hasCopiedTitle')}
+            data-copy-string={copySourceReference}
+            onClick={copyLicense}>
+            {`${t('license.copy')} ${t('license.copyTitle').toLowerCase()}`}
+          </CopyButton>
+        )}
         {licenseBox && (
           <Modal
             labelledBy={buttonId}
@@ -162,6 +189,18 @@ const ArticleByline = ({
             {t('article.copyPageLink')}
           </CopyButton>
         )}
+        {copyEmbedLink && (
+          <CopyButton
+            size="small"
+            borderShape="rounded"
+            outline
+            aria-live="assertive"
+            copyNode={t('license.hasCopiedTitle')}
+            data-copy-string={copyEmbedLink}
+            onClick={copyEmbededLink}>
+            {`${t('license.copy')}  ${t('license.tabs.embedlink').toLowerCase()}`}
+          </CopyButton>
+        )}
         {printUrl && (
           <Button size="small" borderShape="rounded" outline onClick={() => printPage(printUrl)}>
             {t('article.printPage')}

package/src/Breadcrumb/ActionBreadcrumb.tsx

@@ -23,7 +23,6 @@ const StyledRightChevron = styled(ChevronRight)`
 `;
 
 const StyledSpan = styled.span`
-  color: ${colors.text.primary};
   font-weight: ${fonts.weight.bold};
 `;
 
@@ -54,7 +53,7 @@ const ActionBreadcrumb = ({ items, actionItems }: Props) => {
     }
     if (item.index === totalCount - 1 && actionItems.length > 0) {
       return (
-        <StyledMenuButton menuItems={actionItems} size="small">
+        <StyledMenuButton menuItems={actionItems} alignRight size="small">
           <StyledSpan title={item.name}>{item.name}</StyledSpan>
         </StyledMenuButton>
       );

package/src/Breadcrumb/Breadcrumb.tsx

@@ -67,7 +67,7 @@ const Breadcrumb = ({
         el.setMaxWidth('40px');
       }
     });
-  }, [size]);
+  }, [size, items]);
 
   return (
     <BreadcrumbNav ref={containerRef} aria-label={t('breadcrumb.breadcrumb')}>
@@ -77,11 +77,20 @@ const Breadcrumb = ({
             autoCollapse={autoCollapse}
             renderItem={renderItem}
             renderSeparator={renderSeparator}
-            ref={(element) =>
-              element === null || (!collapseFirst && index === 0) || (!collapseLast && index === items.length - 1)
-                ? breadcrumbItemRefs.delete(item.to)
-                : breadcrumbItemRefs.set(item.to, element)
-            }
+            ref={(element) => {
+              if (
+                element === null ||
+                (!collapseFirst && index === 0) ||
+                (!collapseLast && index === items.length - 1)
+              ) {
+                if (element) {
+                  element.setMaxWidth('none');
+                }
+                breadcrumbItemRefs.delete(item.to);
+              } else {
+                breadcrumbItemRefs.set(item.to, element);
+              }
+            }}
             key={typeof item.to === 'string' ? item.to : item.to.pathname}
             totalCount={items.length}
             item={{ ...item, index }}

package/src/Resource/BlockResource.tsx

@@ -10,6 +10,7 @@ import styled from '@emotion/styled';
 import React, { useRef } from 'react';
 import { colors, fonts, spacing } from '@ndla/core';
 import { MenuButton, MenuItemProps } from '@ndla/button';
+import ContentTypeBadge from '../ContentTypeBadge';
 import Image from '../Image';
 import {
   CompressedTagList,
@@ -19,6 +20,7 @@ import {
   TopicList,
   ResourceTitleLink,
   LoaderProps,
+  StyledContentIconWrapper,
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 
@@ -34,6 +36,7 @@ interface BlockResourceProps {
   menuItems?: MenuItemProps[];
   isLoading?: boolean;
   targetBlank?: boolean;
+  contentType: string;
 }
 
 const BlockElementWrapper = styled.div`
@@ -92,22 +95,21 @@ const BlockInfoWrapper = styled.div`
 const ImageWrapper = styled.div`
   display: flex;
   width: 100%;
+  justify-content: center;
   overflow: hidden;
   align-items: center;
-  div {
-    min-width: 100%;
-  }
+  aspect-ratio: 3/4;
   img {
     min-width: 100%;
   }
 `;
-
 interface BlockImageProps {
   image: ResourceImageProps;
   loading?: boolean;
+  contentType: string;
 }
 
-const BlockImage = ({ image, loading }: BlockImageProps) => {
+const BlockImage = ({ image, loading, contentType }: BlockImageProps) => {
   if (loading) {
     return (
       <ContentLoader height={'100%'} width={'100%'} viewBox={null} preserveAspectRatio="none">
@@ -115,7 +117,15 @@ const BlockImage = ({ image, loading }: BlockImageProps) => {
       </ContentLoader>
     );
   }
-  return <Image alt={image.alt} src={image.src} fallbackWidth={300} />;
+  if (image.src === '') {
+    return (
+      <StyledContentIconWrapper contentType={contentType}>
+        <ContentTypeBadge type={contentType} size="large" />
+      </StyledContentIconWrapper>
+    );
+  } else {
+    return <Image alt={image.alt} src={image.src} fallbackWidth={300} />;
+  }
 };
 
 const TopicAndTitleLoader = ({ children, loading }: LoaderProps) => {
@@ -143,6 +153,7 @@ const BlockResource = ({
   menuItems,
   isLoading,
   targetBlank,
+  contentType,
 }: BlockResourceProps) => {
   const linkRef = useRef<HTMLAnchorElement>(null);
 
@@ -155,7 +166,7 @@ const BlockResource = ({
   return (
     <BlockElementWrapper onClick={handleClick} id={id}>
       <ImageWrapper>
-        <BlockImage image={resourceImage} loading={isLoading} />
+        <BlockImage image={resourceImage} loading={isLoading} contentType={contentType} />
       </ImageWrapper>
       <BlockInfoWrapper>
         <TopicAndTitleLoader loading={isLoading}>

package/src/Resource/ListResource.tsx

@@ -17,9 +17,11 @@ import {
   ResourceTitle,
   ResourceTitleLink,
   TopicList,
+  StyledContentIconWrapper,
   LoaderProps,
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
+import ContentTypeBadge from '../ContentTypeBadge';
 
 const StyledResourceDescription = styled.p`
   grid-area: description;
@@ -90,18 +92,21 @@ const TagsandActionMenu = styled.div`
 const StyledImageWrapper = styled.div<StyledImageProps>`
   grid-area: image;
   width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
-  height: ${(p) => (p.imageSize === 'normal' ? '96px' : '40px')};
   ${mq.range({ until: breakpoints.mobileWide })} {
     width: 54px;
     height: 40px;
   }
   overflow: hidden;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 4/3;
 `;
 
 const StyledImage = styled(Image)`
-  display: flex;
-  border-radius: 2px;
   object-fit: cover;
+  aspect-ratio: 4/3;
 `;
 
 const TopicAndTitleWrapper = styled.div`
@@ -125,20 +130,31 @@ export interface ListResourceProps {
   menuItems?: MenuItemProps[];
   isLoading?: boolean;
   targetBlank?: boolean;
+  contentType: string;
 }
 
 interface ListResourceImageProps {
   resourceImage: ResourceImageProps;
   loading?: boolean;
   type: 'normal' | 'compact';
+  contentType: string;
 }
 
-const ListResourceImage = ({ resourceImage, loading, type }: ListResourceImageProps) => {
+const ListResourceImage = ({ resourceImage, loading, type, contentType }: ListResourceImageProps) => {
   if (!loading) {
-    return (
-      <StyledImage alt={resourceImage.alt} src={resourceImage.src} fallbackWidth={type === 'compact' ? 56 : 136} />
-    );
+    if (resourceImage.src === '') {
+      return (
+        <StyledContentIconWrapper contentType={contentType}>
+          <ContentTypeBadge type={contentType} size="x-small" />
+        </StyledContentIconWrapper>
+      );
+    } else {
+      return (
+        <StyledImage alt={resourceImage.alt} src={resourceImage.src} fallbackWidth={type === 'compact' ? 56 : 136} />
+      );
+    }
   }
+
   return (
     <ContentLoader height={'100%'} width={'100%'} viewBox={null} preserveAspectRatio="none">
       <rect
@@ -194,6 +210,7 @@ const ListResource = ({
   menuItems,
   isLoading = false,
   targetBlank,
+  contentType,
 }: ListResourceProps) => {
   const showDescription = description !== undefined;
   const imageType = showDescription ? 'normal' : 'compact';
@@ -207,7 +224,12 @@ const ListResource = ({
   return (
     <ResourceWrapper onClick={handleClick} id={id}>
       <StyledImageWrapper imageSize={imageType}>
-        <ListResourceImage resourceImage={resourceImage} loading={isLoading} type={imageType} />
+        <ListResourceImage
+          resourceImage={resourceImage}
+          loading={isLoading}
+          type={imageType}
+          contentType={contentType}
+        />
       </StyledImageWrapper>
       <TopicAndTitleWrapper>
         <TopicAndTitleLoader loading={isLoading}>

package/src/Resource/resourceComponents.tsx

@@ -14,7 +14,7 @@ import { MenuButton } from '@ndla/button';
 import SafeLink from '@ndla/safelink';
 import { useNavigate } from 'react-router-dom';
 import { HashTag } from '@ndla/icons/common';
-
+import resourceTypeColor from '../utils/resourceTypeColor';
 export interface ResourceImageProps {
   alt: string;
   src: string;
@@ -103,6 +103,19 @@ const TagCounterWrapper = styled.span`
   padding: 5px;
 `;
 
+export interface ContentIconProps {
+  contentType: string;
+}
+
+export const StyledContentIconWrapper = styled.span<ContentIconProps>`
+  width: 100%;
+  aspect-ratio: 4/3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ contentType }) => resourceTypeColor(contentType)};
+`;
+
 interface TagListProps {
   tags?: string[];
   tagLinkPrefix?: string;
@@ -146,7 +159,6 @@ const TagMenuButton = styled(MenuButton)`
     background-color: ${colors.brand.light};
   }
 `;
-
 export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProps) => {
   const navigate = useNavigate();
   const { t } = useTranslation();

package/src/SearchTypeResult/SearchItem.tsx

@@ -18,30 +18,8 @@ import constants from '../model';
 import ItemContexts, { ItemContextsType } from './components/ItemContexts';
 import ItemTopicHeader from './components/ItemTopicHeader';
 import ItemResourceHeader from './components/ItemResourceHeader';
-
 const { contentTypes } = constants;
 
-export const resourceTypeColor = (type: string) => {
-  switch (type) {
-    case contentTypes.SUBJECT_MATERIAL:
-      return colors.subjectMaterial.light;
-    case contentTypes.TOPIC:
-      return colors.subject.light;
-    case contentTypes.TASKS_AND_ACTIVITIES:
-      return colors.tasksAndActivities.light;
-    case contentTypes.ASSESSMENT_RESOURCES:
-      return colors.assessmentResource.light;
-    case contentTypes.EXTERNAL_LEARNING_RESOURCES:
-      return colors.externalLearningResource.light;
-    case contentTypes.SOURCE_MATERIAL:
-      return colors.sourceMaterial.light;
-    case contentTypes.LEARNING_PATH:
-      return colors.learningPath.light;
-    default:
-      return '';
-  }
-};
-
 type ItemTypeProps = {
   contentType?: ContentType;
   isTopic?: boolean;

package/src/SearchTypeResult/components/ItemResourceHeader.tsx

@@ -13,7 +13,9 @@ import styled from '@emotion/styled';
 import { animations, fonts, spacing } from '@ndla/core';
 
 import { ContentType } from '../SearchTypeResult';
-import { resourceTypeColor, SearchItemType } from '../SearchItem';
+import { SearchItemType } from '../SearchItem';
+
+import resourceTypeColor from '../../utils/resourceTypeColor';
 import ContentTypeBadge from '../../ContentTypeBadge';
 
 type ItemTypeProps = {

package/src/TreeStructure/TreeStructure.tsx

@@ -148,7 +148,7 @@ const TreeStructure = ({
     _setFocusedFolder(folder);
     setNewFolderParentId(undefined);
 
-    ref.current?.focus();
+    ref.current?.focus({ preventScroll: true });
   };
 
   const onOpenFolder = (id: string) => {
@@ -173,13 +173,13 @@ const TreeStructure = ({
       setFocusedFolder(newFolder);
       setOpenFolders(uniq(openFolders.concat(parentId)));
       setNewFolderParentId?.(undefined);
-      ref.current?.focus();
+      ref.current?.focus({ preventScroll: true });
     }
   };
 
   const onCancelNewFolder = () => {
     setNewFolderParentId?.(undefined);
-    ref.current?.focus();
+    ref.current?.focus({ preventScroll: true });
   };
 
   const canAddFolder = selectedFolder && selectedFolder?.breadcrumbs.length < (maxLevel || 1);

package/src/locale/messages-en.ts

@@ -432,6 +432,7 @@ const messages = {
   },
   license: {
     heading: 'How to reuse content',
+    copy: 'Copy',
     tabs: {
       text: 'Text',
       images: 'Images',
@@ -1048,6 +1049,7 @@ const messages = {
         'Welcome to my NDLA! You can now save your favourite resources from NDLA and organise them in folders with tags',
       read: { our: 'Read our', ours: 'Read our' },
       privacy: 'privacy statement',
+      privacyLink: 'https://om.ndla.no/gdpr',
       questions: { question: 'Any questions?', ask: 'Ask us in the chat' },
       wishToDelete: 'Do you wish to delete your account?',
       terms: {

package/src/locale/messages-nb.ts

@@ -432,6 +432,7 @@ const messages = {
     heading: 'Slik gjenbruker du innhold',
     learnMore: 'Lær mer om åpne lisenser',
     copyTitle: 'Kildehenvisning',
+    copy: 'Kopier',
     hasCopiedTitle: 'Kopiert!',
     embed: 'Bygg inn',
     embedCopied: 'Kopierte innbyggingskode!',
@@ -826,7 +827,7 @@ const messages = {
   },
   frontPageToolbox: {
     heading: 'Verktøykassa',
-    text: 'Har du lyst til å bli god til å presentere, eller vil du lære å studere smartere ved hjelp av riktig studieteknikk? Trenger du råd om hvordan du leser mest mulig effektivt til eksamen? I verktøykassa til NDLA finner du masse gode tips og råd!',
+    text: 'Har du lyst til å bli god til å presentere, eller vil du lære å studere smartere ved hjelp av riktig studieteknikk? Trenger du råd om hvordan du leser mest mulig effektivt til eksamen? I verktøykassa til NDLA finner du mange gode tips og råd!',
     linkTextStudents: 'Se alle tipsene for elever her',
     linkTextTeachers: 'Se alle tipsene for lærere her',
     cursorText: 'Tips',
@@ -1045,6 +1046,7 @@ const messages = {
         'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med emneknagger.',
       read: { our: 'Les vår', ours: 'Les våre' },
       privacy: 'personvernerklæring her',
+      privacyLink: 'https://om.ndla.no/gdpr',
       questions: { question: 'Lurer du på noe?', ask: 'Spør oss i chatten' },
       wishToDelete: 'Vil du ikke ha brukerprofil hos oss lenger?',
       terms: {

package/src/locale/messages-nn.ts

@@ -433,6 +433,7 @@ const messages = {
     heading: 'Slik gjenbruker du innhald',
     learnMore: 'Lær meir om opne lisensar',
     copyTitle: 'Kjeldetilvising',
+    copy: 'Kopier',
     hasCopiedTitle: 'Kopiert!',
     embed: 'Bygg inn',
     embedCopied: 'Kopierte innbyggingskode!',
@@ -827,7 +828,7 @@ const messages = {
   },
   frontPageToolbox: {
     heading: 'Verktøykassa',
-    text: 'Har du lyst til å bli god til å presentere, eller vil du lære å studere smartare ved hjelp av riktig studieteknikk? Treng du råd om korleis du les mest mogleg effektivt til eksamen? I verktøykassa til NDLA finn du masse gode tips og råd!',
+    text: 'Har du lyst til å bli god til å presentere, eller vil du lære å studere smartare ved hjelp av riktig studieteknikk? Treng du råd om korleis du les mest mogleg effektivt til eksamen? I verktøykassa til NDLA finn du mange gode tips og råd!',
     linkTextStudents: 'Sjå alle tipsa for elever her',
     linkTextTeachers: 'Sjå alle tipsa for lærarar her',
     cursorText: 'Tips',
@@ -1043,9 +1044,10 @@ const messages = {
       loginResourcePitch: 'Ønsker du å favorittmerke denne sida?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome:
-        'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med tags.',
+        'Velkommen til Min NDLA! No kan du lagre dine favorittressursar frå NDLA og organisere dei slik du ønsker i mapper og med emneknaggar.',
       read: { our: 'Les vår', ours: 'Les våre' },
       privacy: 'personvernerklæring her',
+      privacyLink: 'https://om.ndla.no/gdpr',
       questions: { question: 'Lurer du på noko?', ask: 'Spør oss i chatten' },
       wishToDelete: 'Vil du ikkje ha brukerprofil hos oss lenger?',
       terms: {