@ndla/ui 34.1.2 → 34.3.0

package/lib/types.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import { ReactNode } from 'react';
-declare const locales: readonly ["nb", "nn", "en", "se"];
+declare const locales: readonly ["nb", "nn", "en", "se", "sma"];
 export type Locale = typeof locales[number];
 export type Link = {
     text: string;

package/lib/types.js

@@ -11,4 +11,4 @@ Object.defineProperty(exports, "__esModule", {
  *
  */
 
-var locales = ['nb', 'nn', 'en', 'se'];
+var locales = ['nb', 'nn', 'en', 'se', 'sma'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "34.1.2",
+  "version": "34.3.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,16 +32,16 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.14",
-    "@ndla/button": "^9.0.2",
+    "@ndla/button": "^9.1.0",
     "@ndla/carousel": "^3.0.1",
     "@ndla/core": "^3.1.0",
-    "@ndla/forms": "^4.2.1",
+    "@ndla/forms": "^4.2.2",
     "@ndla/hooks": "^1.2.0",
     "@ndla/icons": "^2.2.1",
-    "@ndla/licenses": "^6.1.8",
+    "@ndla/licenses": "^6.2.0",
     "@ndla/modal": "^2.2.4",
-    "@ndla/notion": "^4.1.15",
-    "@ndla/safelink": "^4.0.4",
+    "@ndla/notion": "^4.1.17",
+    "@ndla/safelink": "^4.0.5",
     "@ndla/switch": "^1.0.4",
     "@ndla/tabs": "^2.1.3",
     "@ndla/tooltip": "^4.0.6",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c03740b19d3cf843eea428b205d514fa38cc1298"
+  "gitHead": "088cbb476fa7226e798f349b6bdf8396cb81c6c9"
 }

package/src/Footer/EditorName.tsx

@@ -15,6 +15,7 @@ type EditorNameProps = {
 
 export const EditorName = ({ title, name }: EditorNameProps) => (
   <span>
-    <strong>{title}</strong> {name}
+    <strong>{title}</strong>
+    {` ${name}`}
   </span>
 );

package/src/MyNdla/Resource/Folder.tsx

@@ -13,8 +13,8 @@ import { FileDocumentOutline } from '@ndla/icons/common';
 import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
 import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
-import SafeLink from '@ndla/safelink';
 import { MenuButton, MenuItemProps } from '@ndla/button';
+import { ResourceTitleLink } from '../../Resource/resourceComponents';
 
 type LayoutType = 'list' | 'listLarger' | 'block';
 interface LayoutProps {
@@ -23,6 +23,7 @@ interface LayoutProps {
 
 const FolderWrapper = styled.div<LayoutProps>`
   display: flex;
+  position: relative;
   align-items: center;
   justify-content: space-between;
   padding: ${spacing.nsmall};
@@ -73,12 +74,6 @@ const IconWrapper = styled.div`
   }
 `;
 
-const StyledLink = styled(SafeLink)`
-  box-shadow: none;
-  color: ${colors.brand.primary};
-  flex: 1;
-`;
-
 const FolderTitle = styled.h2`
   ${fonts.sizes('16px', '20px')};
   font-weight: ${fonts.weight.semibold};
@@ -106,6 +101,7 @@ interface MenuWrapperProps {
 const MenuWrapper = styled.div<MenuWrapperProps>`
   overflow: hidden;
   display: flex;
+  z-index: 1;
   flex-direction: row;
   align-items: center;
   gap: ${spacing.xsmall};
@@ -172,21 +168,16 @@ interface Props {
 
 const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menuItems }: Props) => {
   const { t } = useTranslation();
-  const linkRef = useRef<HTMLAnchorElement | null>(null);
-
-  const onClick = () => {
-    linkRef?.current?.click();
-  };
 
   return (
-    <FolderWrapper type={type} onClick={onClick} id={id}>
+    <FolderWrapper type={type} id={id}>
       <TitleWrapper>
         <IconWrapper>
           <FolderOutlined aria-label={t('myNdla.folder.folder')} />
         </IconWrapper>
-        <StyledLink to={link} ref={linkRef}>
+        <ResourceTitleLink to={link}>
           <FolderTitle title={title}>{title}</FolderTitle>
-        </StyledLink>
+        </ResourceTitleLink>
       </TitleWrapper>
       <MenuWrapper hasMenuButton={!!menuItems?.length}>
         <CountContainer>

package/src/Resource/BlockResource.tsx

@@ -27,6 +27,7 @@ import { contentTypeMapping } from '../model/ContentType';
 
 const BlockElementWrapper = styled.div`
   display: flex;
+  position: relative;
   text-decoration: none;
   box-shadow: none;
   flex-direction: column;
@@ -67,6 +68,7 @@ const BlockDescription = styled.p`
 `;
 
 const RightRow = styled(Row)`
+  z-index: 1;
   justify-content: flex-end;
   margin: 0 -${spacing.small} -${spacing.small} 0;
 `;
@@ -162,18 +164,11 @@ const BlockResource = ({
   targetBlank,
   resourceTypes,
 }: Props) => {
-  const linkRef = useRef<HTMLAnchorElement>(null);
   const firstResourceType = resourceTypes?.[0]?.id ?? '';
   const Title = ResourceTitle.withComponent(headingLevel);
 
-  const handleClick = () => {
-    if (linkRef.current) {
-      linkRef.current.click();
-    }
-  };
-
   return (
-    <BlockElementWrapper onClick={handleClick} id={id}>
+    <BlockElementWrapper id={id}>
       <ImageWrapper>
         <BlockImage
           image={resourceImage}
@@ -184,7 +179,7 @@ const BlockResource = ({
       <BlockInfoWrapper>
         <ContentWrapper>
           <ResourceTypeAndTitleLoader loading={isLoading}>
-            <ResourceTitleLink title={title} target={targetBlank ? '_blank' : undefined} to={link} ref={linkRef}>
+            <ResourceTitleLink title={title} target={targetBlank ? '_blank' : undefined} to={link}>
               <Title>{title}</Title>
             </ResourceTitleLink>
           </ResourceTypeAndTitleLoader>

package/src/Resource/ListResource.tsx

@@ -27,6 +27,7 @@ import { contentTypeMapping } from '../model/ContentType';
 const ListResourceWrapper = styled.div`
   flex: 1;
   display: grid;
+  position: relative;
   grid-template-columns: auto minmax(50px, 1fr) auto;
   grid-template-areas:
     'image  topicAndTitle   tags'
@@ -101,6 +102,7 @@ interface TagsAndActionProps {
 
 const TagsandActionMenu = styled.div<TagsAndActionProps>`
   grid-area: tags;
+  z-index: 1;
   box-sizing: content-box;
   display: grid;
   grid-template-columns: 1fr auto auto;
@@ -217,17 +219,11 @@ const ListResource = ({
 }: ListResourceProps) => {
   const showDescription = description !== undefined;
   const imageType = showDescription ? 'normal' : 'compact';
-  const linkRef = useRef<HTMLAnchorElement>(null);
   const firstContentType = resourceTypes?.[0]?.id ?? '';
   const Title = ResourceTitle.withComponent(headingLevel);
-  const handleClick = () => {
-    if (linkRef.current) {
-      linkRef.current.click();
-    }
-  };
 
   return (
-    <ListResourceWrapper onClick={handleClick} id={id}>
+    <ListResourceWrapper id={id}>
       <ImageWrapper imageSize={imageType}>
         <ListResourceImage
           resourceImage={resourceImage}
@@ -238,7 +234,7 @@ const ListResource = ({
       </ImageWrapper>
       <TopicAndTitleWrapper>
         <TypeAndTitleLoader loading={isLoading}>
-          <StyledLink to={link} target={targetBlank ? '_blank' : undefined} ref={linkRef}>
+          <StyledLink to={link} target={targetBlank ? '_blank' : undefined}>
             <Title title={title}>{title}</Title>
           </StyledLink>
           <ResourceTypeList resourceTypes={resourceTypes} />

package/src/Resource/resourceComponents.tsx

@@ -23,6 +23,16 @@ export interface ResourceImageProps {
 export const ResourceTitleLink = styled(SafeLink)`
   box-shadow: none;
   color: ${colors.brand.primary};
+  flex: 1;
+  :after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
 `;
 
 export const ResourceTitle = styled.h2`
@@ -131,9 +141,7 @@ export const TagList = ({ tags, tagLinkPrefix }: TagListProps) => {
     <StyledTagList aria-label={t('myNdla.tagList')}>
       {tags.map((tag, i) => (
         <StyledTagListElement key={`tag-${i}`}>
-          <StyledSafeLink
-            onClick={(e: MouseEvent<HTMLAnchorElement | HTMLElement>) => e.stopPropagation()}
-            to={`${tagLinkPrefix ? tagLinkPrefix : ''}/${encodeURIComponent(tag)}`}>
+          <StyledSafeLink to={`${tagLinkPrefix ? tagLinkPrefix : ''}/${encodeURIComponent(tag)}`}>
             <HashTag />
             {tag}
           </StyledSafeLink>

package/src/i18n/i18n.ts

@@ -13,6 +13,7 @@ import messagesEN from '../locale/messages-en';
 import messagesNN from '../locale/messages-nn';
 import messagesNB from '../locale/messages-nb';
 import messagesSE from '../locale/messages-se';
+import messagesSMA from '../locale/messages-sma';
 
 const DETECTION_OPTIONS = {
   order: ['path', 'localStorage', 'htmlTag'],
@@ -26,7 +27,7 @@ i18nInstance.init({
   compatibilityJSON: 'v3',
   detection: DETECTION_OPTIONS,
   fallbackLng: 'nb',
-  supportedLngs: ['nb', 'nn', 'en', 'se'],
+  supportedLngs: ['nb', 'nn', 'en', 'se', 'sma'],
   resources: {
     en: {
       translation: messagesEN,
@@ -40,6 +41,9 @@ i18nInstance.init({
     se: {
       translation: messagesSE,
     },
+    sma: {
+      translation: messagesSMA,
+    },
   },
 });
 

package/src/locale/messages-en.ts

@@ -14,6 +14,10 @@ export const { contentTypes, subjectCategories, subjectTypes } = constants;
 const titleTemplate = ' - NDLA';
 
 const messages = {
+  common: {
+    subject: 'Subject',
+    subject_plural: 'Subjects',
+  },
   treeStructure: {
     folderChildOptions: {
       edit: 'Edit foldername',
@@ -638,9 +642,9 @@ const messages = {
     socialMedia: 'Social media',
     selectLanguage: 'Choose language (språk): ',
     info: 'This webapplication is developed by NDLA as Open Source code.',
-    editorInChief: 'Editor in chief: ',
-    managingEditor: 'Managing editor: ',
+    editorInChief: 'Editor in chief:',
     linksHeader: 'Other NDLA sites',
+    availabilityLink: 'Availability statement',
     privacyLink: 'Privacy statement',
     cookiesLink: 'Statement about cookies',
     vision: 'We create the learning of the future together',
@@ -702,12 +706,14 @@ const messages = {
     nb: 'Endre språk til bokmål',
     nn: 'Endre språk til nynorsk',
     se: 'Rievdat giela davvisámegiella',
+    sma: 'Jarkelh åarjelsaemiene',
     en: 'Change language to English',
   },
   currentLanguageText: {
     nb: 'Sidene vises på bokmål',
     nn: 'Sidene vises på nynorsk',
     se: 'Siiddut leat davvisámegiellii',
+    sma: 'Sæjroeh åarjelsaemiene',
     en: 'Not all pages are available in English. These will be shown in Norwegian',
   },
   breadcrumb: {

package/src/locale/messages-nb.ts

@@ -14,6 +14,10 @@ export const { contentTypes, subjectCategories, subjectTypes } = constants;
 const titleTemplate = ' - NDLA';
 
 const messages = {
+  common: {
+    subject: 'Fag',
+    subject_plural: 'Fag',
+  },
   treeStructure: {
     folderChildOptions: {
       edit: 'Endre mappenavn',
@@ -639,8 +643,8 @@ const messages = {
     vision: 'Sammen skaper vi framtidas læring',
     linksHeader: 'Andre NDLA-nettsteder',
     info: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
-    editorInChief: 'Ansvarlig redaktør: ',
-    managingEditor: 'Utgaveansvarlig: ',
+    editorInChief: 'Ansvarlig redaktør:',
+    availabilityLink: 'Tilgjengelighetserklæring',
     privacyLink: 'Personvernerklæring',
     cookiesLink: 'Erklæring om informasjonskapsler',
     socialMediaLinks: {
@@ -701,12 +705,14 @@ const messages = {
     nb: 'Endre språk til bokmål',
     nn: 'Endre språk til nynorsk',
     se: 'Rievdat giela davvisámegiella',
+    sma: 'Jarkelh åarjelsaemiene',
     en: 'Change language to English',
   },
   currentLanguageText: {
     nb: 'Sidene vises på bokmål',
     nn: 'Sidene vises på nynorsk',
     se: 'Siiddut leat davvisámegiellii',
+    sma: 'Sæjroeh åarjelsaemiene',
     en: 'Not all pages are available in English. These will be shown in Norwegian',
   },
   breadcrumb: {
@@ -1154,7 +1160,7 @@ const messages = {
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg gjennom Feide',
       feideWrongInfo:
-        'Dersom informasjon er feil, så må dette oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: feide.no/brukerstøtte',
+        'Dersom informasjon er feil, så må dette oppdateres av vertsorganisasjon/skoleeier som brukeren tilhører. Oversikt over brukerstøtte finnes her: feide.no/brukerstotte',
       storageInfo: {
         title: 'Slik lagrer du favorittressursene dine fra NDLA',
         text: 'Klikk på hjerteknappen for å lagre en ressurs. Du vil da få mulighet til å lagre ressursen i ei mappe.',

package/src/locale/messages-nn.ts

@@ -14,6 +14,10 @@ export const { contentTypes, subjectCategories, subjectTypes } = constants;
 const titleTemplate = ' - NDLA';
 
 const messages = {
+  common: {
+    subject: 'Fag',
+    subject_plural: 'Fag',
+  },
   treeStructure: {
     folderChildOptions: {
       edit: 'Endre mappenamn',
@@ -639,8 +643,8 @@ const messages = {
     vision: 'Saman skapar vi framtidas læring',
     linksHeader: 'Andre NDLA-nettstader',
     info: 'Nettstaden er utarbeida av NDLA med open kjeldekode.',
-    editorInChief: 'Ansvarleg redaktør: ',
-    managingEditor: 'Utgåveansvarleg: ',
+    editorInChief: 'Ansvarleg redaktør:',
+    availabilityLink: 'Tilgjengelegheitserklæring',
     privacyLink: 'Personvernerklæring',
     cookiesLink: 'Erklæring om informasjonskapslar',
     socialMediaLinks: {
@@ -701,12 +705,14 @@ const messages = {
     nb: 'Endre språk til bokmål',
     nn: 'Endre språk til nynorsk',
     se: 'Rievdat giela davvisámegiella',
+    sma: 'Jarkelh åarjelsaemiene',
     en: 'Change language to English',
   },
   currentLanguageText: {
     nb: 'Sidene blir viste på bokmål',
     nn: 'Sidene blir viste på nynorsk',
     se: 'Siiddut leat davvisámegiellii',
+    sma: 'Sæjroeh åarjelsaemiene',
     en: 'Not all pages are available in English. These will be shown in Norwegian',
   },
   breadcrumb: {
@@ -1154,7 +1160,7 @@ const messages = {
       newFavourite: 'Nyleg lagt til',
       feide: 'Dette hentar vi om deg gjennom Feide',
       feideWrongInfo:
-        'Dersom informasjon er feil, så må dette oppdaterast av vertsorganisasjon/skuleeigar som brukaren tilhøyrer. Oversyn over brukartrygd finst her: feide.no/brukartrygd',
+        'Dersom informasjon er feil, så må dette oppdaterast av vertsorganisasjon/skuleeigar som brukaren tilhøyrer. Oversyn over brukarstøtte finst her: feide.no/brukerstotte',
       storageInfo: {
         title: 'Slik lagrar du favorittressursane dine frå NDLA',
         text: 'Klikk på hjarteknappen for å lagre ein ressurs. Du vil då få høve til å lagre ressursen i ei mappe.',

package/src/locale/messages-se.ts

@@ -14,6 +14,10 @@ export const { contentTypes, subjectCategories, subjectTypes } = constants;
 const titleTemplate = ' - NDLA';
 
 const messages = {
+  common: {
+    subject: 'Fága',
+    subject_plural: 'Fágat',
+  },
   treeStructure: {
     folderChildOptions: {
       edit: 'Rievdat máhpa nama',
@@ -640,8 +644,8 @@ const messages = {
     vision: 'Ovttas hábmet boahtteáiggi oahppama',
     linksHeader: 'Eará NDLA neahttabáikkit',
     info: 'Neahttabáiki lea ráhkaduvvon NDLA bokte rabas gáldokodain.',
-    editorInChief: 'Vásttolaš doaimmaheaddji: ',
-    managingEditor: 'Almmuhusa vásttolaš: ',
+    editorInChief: 'Vásttolaš doaimmaheaddji:',
+    availabilityLink: 'Tilgjengelighetserklæring',
     privacyLink: 'Persovdnasuodjalusjulggaštus ja diehtočoahkku (gáhkožat)',
     cookiesLink: 'Julggaštus birra diehtočoahkku (gáhkožat)',
     socialMediaLinks: {
@@ -699,15 +703,17 @@ const messages = {
     prefixChangeLanguage: 'Vállje giela',
   },
   changeLanguage: {
-    nb: 'Rievdat giela girjedárogiellan',
-    nn: 'Rievdat giela ođđadárogiellan',
-    se: 'Rievdat giela davvisámegiellan',
-    en: 'Rievdat giela eŋgelasgiellan',
+    nb: 'Endre språk til bokmål',
+    nn: 'Endre språk til nynorsk',
+    se: 'Rievdat giela davvisámegiella',
+    sma: 'Jarkelh åarjelsaemiene',
+    en: 'Change language to English',
   },
   currentLanguageText: {
     nb: 'Sidene vises på bokmål',
     nn: 'Sidene vises på nynorsk',
     se: 'Siiddut leat davvisámegillii',
+    sma: 'Sæjroeh åarjelsaemiene',
     en: 'Not all pages are available in English. These will be shown in Norwegian',
   },
   breadcrumb: {
@@ -1156,7 +1162,7 @@ const messages = {
       newFavourite: 'Aitto lasihuvvon',
       feide: 'Dát vižžojuvvo du birra Feide:s',
       feideWrongInfo:
-        'Jus leat boasttudieđut, de fertejit dat ođasmahttojuvvot organisašuvnna/skuvlaeaiggáda bokte gosa geavaheaddji gullá. Visogova geavaheaddjidoarjagis gávnnat dáppe: feide.no/brukerstøtte',
+        'Jus leat boasttudieđut, de fertejit dat ođasmahttojuvvot organisašuvnna/skuvlaeaiggáda bokte gosa geavaheaddji gullá. Visogova geavaheaddjidoarjagis gávnnat dáppe: feide.no/brukerstotte',
       storageInfo: {
         title: 'Ná vurket iežat oiddotresurssaid NDLA:s',
         text: 'Deaddil váibmoboalu vurken dihtii resurssa.',