@ndla/ui 34.4.0 → 34.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "34.4.0",
+  "version": "34.6.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,19 +32,19 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.14",
-    "@ndla/button": "^9.1.1",
-    "@ndla/carousel": "^3.0.2",
-    "@ndla/core": "^3.1.1",
-    "@ndla/forms": "^4.2.4",
-    "@ndla/hooks": "^1.2.0",
-    "@ndla/icons": "^2.2.2",
-    "@ndla/licenses": "^7.0.0",
-    "@ndla/modal": "^2.2.6",
-    "@ndla/notion": "^4.2.1",
-    "@ndla/safelink": "^4.0.6",
-    "@ndla/switch": "^1.0.6",
-    "@ndla/tabs": "^2.1.4",
-    "@ndla/tooltip": "^4.0.7",
+    "@ndla/button": "^9.1.3",
+    "@ndla/carousel": "^3.0.3",
+    "@ndla/core": "^3.1.2",
+    "@ndla/forms": "^4.2.6",
+    "@ndla/hooks": "^2.0.1",
+    "@ndla/icons": "^2.2.3",
+    "@ndla/licenses": "^7.0.1",
+    "@ndla/modal": "^2.2.7",
+    "@ndla/notion": "^4.2.3",
+    "@ndla/safelink": "^4.0.8",
+    "@ndla/switch": "^1.0.7",
+    "@ndla/tabs": "^2.1.6",
+    "@ndla/tooltip": "^4.0.9",
     "@ndla/types-learningpath-api": "^0.0.17",
     "@ndla/util": "^3.1.9",
     "@radix-ui/react-dropdown-menu": "2.0.2",
@@ -56,7 +56,7 @@
     "i18next-browser-languagedetector": "^6.1.1",
     "invariant": "^2.2.3",
     "react-bem-helper": "1.4.1",
-    "react-device-detect": "^2.2.2",
+    "react-device-detect": "^2.2.3",
     "react-select": "^5.7.0",
     "react-swipeable": "^7.0.0",
     "remarkable": "^2.0.1",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "42968ec92ec2338e003ffab02476338f380293b3"
+  "gitHead": "50e9e5252247d22709a54d0ad481c10ad62f803b"
 }

package/src/Article/Article.tsx

@@ -167,13 +167,14 @@ export const Article = ({
   heartButton,
   copyText,
 }: Props) => {
-  const [articleRef, { entry }] = useIntersectionObserver({
-    root: null,
+  const articleRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const { entry } = useIntersectionObserver({
     rootMargin: '400px',
+    target: articleRef.current,
     threshold: 0.1,
   });
   const [articlePositionRight, setArticlePositionRight] = useState(0);
-  const wrapperRef = useRef<HTMLDivElement>(null);
 
   const showExplainNotions = entry && entry.isIntersecting;
 

package/src/MyNdla/Resource/Folder.tsx

@@ -26,8 +26,6 @@ const FolderWrapper = styled.div<LayoutProps>`
   position: relative;
   align-items: center;
   justify-content: space-between;
-  padding: ${spacing.nsmall};
-  gap: ${spacing.small};
 
   ${mq.range({ until: breakpoints.mobileWide })} {
     ${({ type }) =>
@@ -56,8 +54,10 @@ const FolderWrapper = styled.div<LayoutProps>`
   }
 `;
 
-const TitleWrapper = styled.div`
+const TitleWrapper = styled.div<LayoutProps>`
   display: flex;
+  margin: ${spacing.nsmall};
+  margin-bottom: ${({ type }) => type === 'block' && 0};
   flex-direction: row;
   align-items: center;
   gap: ${spacing.xsmall};
@@ -94,26 +94,22 @@ const FolderTitle = styled.h2`
   }
 `;
 
-interface MenuWrapperProps {
-  hasMenuButton: boolean;
-}
-
-const MenuWrapper = styled.div<MenuWrapperProps>`
+const MenuWrapper = styled.div`
   overflow: hidden;
   display: flex;
   z-index: 1;
   flex-direction: row;
   align-items: center;
-  gap: ${spacing.xsmall};
   justify-content: space-between;
-  margin: -${spacing.nsmall} -${(props) => (props.hasMenuButton ? spacing.nsmall : 0)} -${spacing.nsmall} 0;
 `;
 
 const CountContainer = styled.div`
   overflow: hidden;
   display: flex;
   flex-direction: row;
+  min-height: 44px;
   gap: ${spacing.small};
+  margin: 0 ${spacing.small} 0 ${spacing.nsmall};
 `;
 
 const IconCountWrapper = styled.div<LayoutProps>`
@@ -171,7 +167,7 @@ const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu
 
   return (
     <FolderWrapper type={type} id={id}>
-      <TitleWrapper>
+      <TitleWrapper type={type}>
         <IconWrapper>
           <FolderOutlined aria-label={t('myNdla.folder.folder')} />
         </IconWrapper>
@@ -179,7 +175,7 @@ const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu
           <FolderTitle title={title}>{title}</FolderTitle>
         </ResourceTitleLink>
       </TitleWrapper>
-      <MenuWrapper hasMenuButton={!!menuItems?.length}>
+      <MenuWrapper>
         <CountContainer>
           <Count layoutType={type} type={'folder'} count={subFolders} />
           <Count layoutType={type} type={'resource'} count={subResources} />

package/src/Resource/BlockResource.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import React, { useRef } from 'react';
+import React from 'react';
 import { colors, fonts, spacing } from '@ndla/core';
 import { MenuButton, MenuItemProps } from '@ndla/button';
 import ContentTypeBadge from '../ContentTypeBadge';
@@ -16,7 +16,6 @@ import {
   CompressedTagList,
   ResourceImageProps,
   ResourceTitle,
-  Row,
   ResourceTypeList,
   ResourceTitleLink,
   LoaderProps,
@@ -67,20 +66,21 @@ const BlockDescription = styled.p`
   }
 `;
 
-const RightRow = styled(Row)`
-  z-index: 1;
+const TagsAndActionMenu = styled.div`
+  display: flex;
+  align-items: center;
   justify-content: flex-end;
-  margin: 0 -${spacing.small} -${spacing.small} 0;
+  z-index: 1;
 `;
 
 const BlockInfoWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  padding: ${spacing.small};
 `;
 
 const ContentWrapper = styled.div`
   display: flex;
+  margin: ${spacing.small} ${spacing.small} 0 ${spacing.small};
   flex-direction: column;
 `;
 
@@ -186,10 +186,10 @@ const BlockResource = ({
           <ResourceTypeList resourceTypes={resourceTypes} />
           <BlockDescription>{description}</BlockDescription>
         </ContentWrapper>
-        <RightRow>
+        <TagsAndActionMenu>
           {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
           {menuItems && menuItems.length > 0 && <MenuButton align="end" size="small" menuItems={menuItems} />}
-        </RightRow>
+        </TagsAndActionMenu>
       </BlockInfoWrapper>
     </BlockElementWrapper>
   );

package/src/Resource/ListResource.tsx

@@ -40,8 +40,6 @@ const ListResourceWrapper = styled.div`
       'tags                 tags';
   }
 
-  padding: ${spacing.small};
-  column-gap: ${spacing.small};
   cursor: pointer;
   border: 1px solid ${colors.brand.neutral7};
   border-radius: 2px;
@@ -65,10 +63,12 @@ const ImageWrapper = styled.div<StyledImageProps>`
   width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
   ${mq.range({ until: breakpoints.mobileWide })} {
     width: 56px;
+    margin-bottom: 0;
   }
   overflow: hidden;
   border-radius: 2px;
   display: flex;
+  margin: ${spacing.small};
   align-items: center;
   justify-content: center;
   aspect-ratio: 4/3;
@@ -84,8 +84,10 @@ const StyledResourceDescription = styled.p`
   line-clamp: 2;
   line-height: 1em;
   height: 3.1em;
-  margin: 0;
-  margin-top: ${spacing.xxsmall};
+  margin: 0 ${spacing.small} ${spacing.small} 0;
+  ${mq.range({ until: breakpoints.mobileWide })} {
+    margin: 0 ${spacing.small};
+  }
   overflow: hidden;
   ${fonts.sizes(16)};
   text-overflow: ellipsis;
@@ -96,11 +98,7 @@ const StyledResourceDescription = styled.p`
   -webkit-box-orient: vertical;
 `;
 
-interface TagsAndActionProps {
-  hasMenuButton: boolean;
-}
-
-const TagsandActionMenu = styled.div<TagsAndActionProps>`
+const TagsandActionMenu = styled.div`
   grid-area: tags;
   z-index: 1;
   box-sizing: content-box;
@@ -109,18 +107,22 @@ const TagsandActionMenu = styled.div<TagsAndActionProps>`
   align-items: center;
   align-self: flex-start;
   justify-items: flex-end;
-  margin: -${spacing.small} -${(props) => (props.hasMenuButton ? spacing.small : 0)} 0 0;
+  overflow: hidden;
   ${mq.range({ until: breakpoints.mobileWide })} {
-    margin: 0 -${(props) => (props.hasMenuButton ? spacing.small : 0)} -${spacing.small} 0;
+    min-height: ${spacing.small};
   }
-  overflow: hidden;
 `;
 
 const TopicAndTitleWrapper = styled.div`
   grid-area: topicAndTitle;
   display: flex;
+  margin: ${spacing.small} 0;
   flex-direction: column;
   overflow: hidden;
+  margin-right: ${spacing.small};
+  ${mq.range({ until: breakpoints.mobileWide })} {
+    margin-bottom: 0;
+  }
 `;
 
 interface ListResourceImageProps {
@@ -241,7 +243,7 @@ const ListResource = ({
         </TypeAndTitleLoader>
       </TopicAndTitleWrapper>
       {showDescription && <Description description={description} loading={isLoading} />}
-      <TagsandActionMenu hasMenuButton={!!(tags && tags.length > 3) || !!(menuItems && menuItems.length)}>
+      <TagsandActionMenu>
         {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
         {menuItems && menuItems.length > 0 && <MenuButton align="end" size="small" menuItems={menuItems} />}
       </TagsandActionMenu>

package/src/Resource/resourceComponents.tsx

@@ -53,9 +53,13 @@ const StyledTagList = styled.ul`
   list-style: none;
   display: flex;
   margin: 0;
+  margin-left: ${spacing.small};
   padding: 2px;
   gap: ${spacing.xsmall};
   overflow: hidden;
+  :last-child {
+    margin-right: ${spacing.small};
+  }
 `;
 
 const StyledTagListElement = styled.li`
@@ -71,6 +75,7 @@ const StyledSafeLink = styled(SafeLink)`
   color: ${colors.brand.grey};
   min-height: 44px;
   min-width: 44px;
+  white-space: nowrap;
   &:hover {
     color: ${colors.brand.primary};
   }
@@ -99,12 +104,6 @@ const StyledResourceListElement = styled.li`
   align-items: center;
 `;
 
-export const Row = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${spacing.xsmall};
-`;
-
 const TagCounterWrapper = styled.span`
   display: flex;
   font-weight: ${fonts.weight.semibold};

package/src/User/__tests__/parseUserObject-test.ts

@@ -70,7 +70,7 @@ const feideUserLaerer: FeideUserApiType = {
       parent: 'fc:org:spusers.feide.no:unit:NO856326501',
       membership: {
         basic: 'member',
-        affiliation: 'employee',
+        affiliation: ['employee'],
         displayName: 'Ansatt',
       },
       go_type_displayName: 'basisgruppe',
@@ -85,7 +85,7 @@ const feideUserLaerer: FeideUserApiType = {
       parent: 'fc:org:spusers.feide.no:unit:NO856326501',
       membership: {
         basic: 'member',
-        affiliation: 'employee',
+        affiliation: ['employee'],
         displayName: 'Ansatt',
       },
       go_type_displayName: 'other groups',
@@ -100,7 +100,7 @@ const feideUserLaerer: FeideUserApiType = {
       parent: 'fc:org:spusers.feide.no:unit:NO856326501',
       membership: {
         basic: 'member',
-        affiliation: 'employee',
+        affiliation: ['employee'],
         displayName: 'Ansatt',
       },
       go_type_displayName: 'other groups',
@@ -115,7 +115,7 @@ const feideUserLaerer: FeideUserApiType = {
       parent: 'fc:org:spusers.feide.no:unit:NO856326501',
       membership: {
         basic: 'member',
-        affiliation: 'employee',
+        affiliation: ['employee'],
         displayName: 'Ansatt',
       },
       go_type_displayName: 'undervisningsgruppe',
@@ -134,7 +134,7 @@ const feideUserLaerer: FeideUserApiType = {
       parent: 'fc:org:spusers.feide.no:unit:NO856326501',
       membership: {
         basic: 'member',
-        affiliation: 'employee',
+        affiliation: ['employee'],
         displayName: 'Ansatt',
       },
       go_type_displayName: 'undervisningsgruppe',
@@ -228,7 +228,7 @@ describe('parseUserObject', () => {
                 parent: 'fc:org:spusers.feide.no:unit:NO856326501',
                 membership: {
                   basic: 'member',
-                  affiliation: 'employee',
+                  affiliation: ['employee'],
                   displayName: 'Ansatt',
                 },
                 go_type_displayName: 'basisgruppe',
@@ -245,7 +245,7 @@ describe('parseUserObject', () => {
                 parent: 'fc:org:spusers.feide.no:unit:NO856326501',
                 membership: {
                   basic: 'member',
-                  affiliation: 'employee',
+                  affiliation: ['employee'],
                   displayName: 'Ansatt',
                 },
                 go_type_displayName: 'undervisningsgruppe',
@@ -264,7 +264,7 @@ describe('parseUserObject', () => {
                 parent: 'fc:org:spusers.feide.no:unit:NO856326501',
                 membership: {
                   basic: 'member',
-                  affiliation: 'employee',
+                  affiliation: ['employee'],
                   displayName: 'Ansatt',
                 },
                 go_type_displayName: 'undervisningsgruppe',
@@ -285,7 +285,7 @@ describe('parseUserObject', () => {
                 parent: 'fc:org:spusers.feide.no:unit:NO856326501',
                 membership: {
                   basic: 'member',
-                  affiliation: 'employee',
+                  affiliation: ['employee'],
                   displayName: 'Ansatt',
                 },
                 go_type_displayName: 'other groups',
@@ -300,7 +300,7 @@ describe('parseUserObject', () => {
                 parent: 'fc:org:spusers.feide.no:unit:NO856326501',
                 membership: {
                   basic: 'member',
-                  affiliation: 'employee',
+                  affiliation: ['employee'],
                   displayName: 'Ansatt',
                 },
                 go_type_displayName: 'other groups',

package/src/User/apiTypes.ts

@@ -13,11 +13,11 @@ type OrgType =
   | 'upper_secondary'
   | 'upper_secondary_owner';
 
-type AffiliationType = 'member' | 'student' | 'faculty' | 'staff' | 'affiliate' | 'employee';
+export type AffiliationType = 'member' | 'student' | 'faculty' | 'staff' | 'affiliate' | 'employee';
 
 export interface FeideMembershipType {
   basic: 'member' | 'admin' | 'owner'; // Basic membership role of user.
-  affiliation?: AffiliationType[] | AffiliationType;
+  affiliation?: AffiliationType[];
   primarySchool?: boolean;
   primaryAffiliation?: AffiliationType;
   displayName?: string;
@@ -65,7 +65,7 @@ export type FeideGroup = FeideOrg | FeideGoGroup | FeideGrep;
 export interface FeideUser {
   cn: string[];
   displayName: string;
-  eduPersonAffiliation: AffiliationType[] | AffiliationType;
+  eduPersonAffiliation: AffiliationType[];
   eduPersonPrimaryAffiliation: string;
   eduPersonPrincipalName: string;
   givenName: string[];

package/src/locale/messages-en.ts

@@ -335,7 +335,7 @@ const messages = {
       multidisciplinarySubjects: 'Multidisciplinary subjects',
       toolboxStudents: 'Toolbox - for students',
       toolboxTeachers: 'Toolbox - for teachers',
-      film: 'NDLA Film',
+      film: 'NDLA film',
       about: {
         title: 'About NDLA',
         numbers: 'Numbers and reports',
@@ -793,7 +793,7 @@ const messages = {
     loadingMovies: 'Loading movies..',
     subjectsInMovies: 'Subjects in film',
     about: {
-      heading: 'About NDLA Film',
+      heading: 'About NDLA film',
       more: 'Read more about NDLA film',
       text: 'Ndla film er ei nettbasert filmtjeneste for elever og lærere i videregående skole. Her finn du spillefilmer, kortfilmer, dokumentarfilmer og TV-serier.',
     },
@@ -835,7 +835,7 @@ const messages = {
     },
     allMovieGroupTitleLabel: 'Movies starting with {{letter}}',
     moreAboutNdlaFilm: {
-      header: 'NDLA Film',
+      header: 'NDLA film',
       firstParagraph:
         "The films in the film service are taken from Norwegian and international film heritage and are linked to curricula in several subjects. They have been selected by NDLA's editors in collaboration with Norgesfilm AS.",
       secondParagraph:

package/src/locale/messages-nb.ts

@@ -334,7 +334,7 @@ const messages = {
       multidisciplinarySubjects: 'Tverrfaglige tema',
       toolboxStudents: 'Verktøykassa - for elever',
       toolboxTeachers: 'Verktøykassa - for lærere',
-      film: 'NDLA Film',
+      film: 'NDLA film',
       about: {
         title: 'Om NDLA',
         numbers: 'Tall og rapporter',
@@ -792,7 +792,7 @@ const messages = {
     loadingMovies: 'Henter filmer...',
     subjectsInMovies: 'Emner i film',
     about: {
-      heading: 'Om NDLA Film',
+      heading: 'Om NDLA film',
       more: 'Les mer om NDLA film',
       text: 'Ndla film er en nettbasert filmtjeneste for elever og lærere i videregående skole. Her funner du spillefilmer, kortfilmer, dokumentarfilmer og TV-serier.',
     },
@@ -834,7 +834,7 @@ const messages = {
     },
     allMovieGroupTitleLabel: 'Filmer som starter på {{letter}}',
     moreAboutNdlaFilm: {
-      header: 'NDLA Film',
+      header: 'NDLA film',
       firstParagraph:
         'Filmene i filmtjenesten er hentet fra norsk og internasjonal filmarv og kobles mot læreplaner i flere fag. De er valgt ut av NDLAs redaksjoner i samarbeid med Norgesfilm AS.',
       secondParagraph:

package/src/locale/messages-nn.ts

@@ -334,7 +334,7 @@ const messages = {
       multidisciplinarySubjects: 'Tverrfaglege tema',
       toolboxStudents: 'Verktøykassa - for elevar',
       toolboxTeachers: 'Verktøykassa - for lærarar',
-      film: 'NDLA Film',
+      film: 'NDLA film',
       about: {
         title: 'Om NDLA',
         numbers: 'Tall og rapporter',
@@ -792,7 +792,7 @@ const messages = {
     loadingMovies: 'Hentar filmar...',
     subjectsInMovies: 'Emne i film',
     about: {
-      heading: 'Om NDLA Film',
+      heading: 'Om NDLA film',
       more: 'Les meir om NDLA film',
       text: 'NDLA film er ei nettbasert filmteneste for elevar og lærarar i vidaregåande skule. Her finn du spelefilmar, kortfilmar, dokumentarfilmar og TV-seriar.',
     },
@@ -834,7 +834,7 @@ const messages = {
     },
     allMovieGroupTitleLabel: 'Filmar som startar på {{letter}}',
     moreAboutNdlaFilm: {
-      header: 'NDLA Film',
+      header: 'NDLA film',
       firstParagraph:
         'Filmane i filmtenesta er henta frå norsk og internasjonal filmarv og er kopla mot læreplanar i fleire fag. Dei er valde av redaksjonane til NDLA i samarbeid med Norgesfilm AS.',
       secondParagraph:

package/src/locale/messages-sma.ts

@@ -311,8 +311,8 @@ const messages = {
     },
     errorDescription: 'Gaatesjen, fiejlie sjïdti faage-veedtjemisnie.',
     film: {
-      header: 'NDLA Film',
-      text: 'NDLA Film lea dïenesje laavenjostosne Norgesfilmine. Dïenesje baaja datnem gellie spïelefilmh, åenehks filmh, dokumentaarh jïh raajroeh vuejnedh. Maahtah aaj ööhpehtimmiefilmh jïh filmebietskieh vuejnedh. Buerie båeteme filmen veartenen sïjse!',
+      header: 'NDLA film',
+      text: 'NDLA film lea dïenesje laavenjostosne Norgesfilmine. Dïenesje baaja datnem gellie spïelefilmh, åenehks filmh, dokumentaarh jïh raajroeh vuejnedh. Maahtah aaj ööhpehtimmiefilmh jïh filmebietskieh vuejnedh. Buerie båeteme filmen veartenen sïjse!',
       textShort: 'Buerie båeteme filmen veartenasse!',
       linkLabel: 'Mïnnh NDLA filmese',
     },
@@ -334,7 +334,7 @@ const messages = {
       multidisciplinarySubjects: 'Tverrfaglege tema',
       toolboxStudents: 'Verktøykassa - for elever',
       toolboxTeachers: 'Verktøykassa - for lærere',
-      film: 'NDLA Film',
+      film: 'NDLA film',
       about: {
         title: 'Om NDLA',
         numbers: 'Tall og rapporter',
@@ -789,15 +789,15 @@ const messages = {
     copyCode: 'Vaeltieh kopijem kodeste bietskiedimmietaavlese',
   },
   ndlaFilm: {
-    heading: 'NDLA Filmen',
+    heading: 'NDLA filmen',
     slideBackwardsLabel: 'Scroll bååstede',
     slideForwardsLabel: 'Scroll åvtese',
     movieMatchInCategory: 'Gaavnoeh',
     loadingMovies: 'Filmh veedtjeminie...',
     subjectsInMovies: 'Teemah filmesne',
     about: {
-      heading: 'NDLA Filmen bïjre',
-      more: 'Lohkh vielie NDLA Filmen bïjre',
+      heading: 'NDLA filmen bïjre',
+      more: 'Lohkh vielie NDLA filmen bïjre',
       text: 'Ndla Film lea filmedïenesje nedtesne learoehkidie jïh lohkehtæjjide jåarhkeskuvlesne. Daesnie spïelefilmh, åenehks filmh, dokumentaarefilmh jïh TV-raajroh gaavnh.',
     },
     search: {
@@ -838,7 +838,7 @@ const messages = {
     },
     allMovieGroupTitleLabel: 'Filmar som startar på {{letter}}',
     moreAboutNdlaFilm: {
-      header: 'NDLA Film',
+      header: 'NDLA film',
       firstParagraph:
         'Filmh, filmedïenesjisnie, leah nöörjen jïh gaskenasjonaale filme-aerpeste veedtjeme, jïh learoesoejkesjidie ektiedamme jieniebinie faagine. NDLA:n redaksjovnh jïh Norgesfilm AS leah dejtie ektesne veeljeme.',
       secondParagraph: