@ndla/ui 11.2.0 → 12.0.2

package/lib/locale/messages-nn.d.ts

@@ -559,8 +559,10 @@ declare const messages: {
             newsletterAria: string;
             youtube: string;
             youtubeAria: string;
-            twitter: string;
-            twitterAria: string;
+            linkedin: string;
+            linkedinAria: string;
+            instagram: string;
+            instagramAria: string;
             sharePage: string;
             sharePageAria: string;
         };

package/lib/locale/messages-nn.js

@@ -487,7 +487,7 @@ var messages = _objectSpread(_objectSpread({
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Vel språk (language): ',
     vision: 'Saman skapar vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettstader',
+    footerLinksHeader: 'Andre NDLA-nettstader',
     footerInfo: 'Nettstaden er utarbeida av NDLA med open kjeldekode.',
     footerEditiorInChief: 'Ansvarleg redaktør: ',
     footerManagingEditor: 'Utgåveansvarleg: ',
@@ -499,8 +499,10 @@ var messages = _objectSpread(_objectSpread({
       newsletterAria: 'Meld deg på vårt nyheitsbrev',
       youtube: 'NDLA på YouTube',
       youtubeAria: 'NDLA på YouTube',
-      twitter: 'NDLA på Twitter',
-      twitterAria: 'Besøk NDLA på Twitter',
+      linkedin: 'NDLA på LinkedIn',
+      linkedinAria: 'Besøk NDLA på LinkedIn',
+      instagram: 'NDLA på Instagram',
+      instagramAria: 'Besøk NDLA på Instagram',
       sharePage: 'Del denne sida',
       sharePageAria: 'Del denne sida'
     },

package/lib/locale/messages-se.d.ts

@@ -559,8 +559,10 @@ declare const messages: {
             newsletterAria: string;
             youtube: string;
             youtubeAria: string;
-            twitter: string;
-            twitterAria: string;
+            linkedin: string;
+            linkedinAria: string;
+            instagram: string;
+            instagramAria: string;
             sharePage: string;
             sharePageAria: string;
         };

package/lib/locale/messages-se.js

@@ -487,7 +487,7 @@ var messages = _objectSpread(_objectSpread({
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettsteder',
+    footerLinksHeader: 'Andre NDLA-nettsteder',
     footerInfo: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
     footerEditiorInChief: 'Ansvarlig redaktør: ',
     footerManagingEditor: 'Utgaveansvarlig: ',
@@ -499,8 +499,10 @@ var messages = _objectSpread(_objectSpread({
       newsletterAria: 'Meld deg på vårt nyhetsbrev',
       youtube: 'NDLA på YouTube',
       youtubeAria: 'NDLA på YouTube',
-      twitter: 'NDLA på Twitter',
-      twitterAria: 'Besøk NDLA på Twitter',
+      linkedin: 'NDLA på LinkedIn',
+      linkedinAria: 'Besøk NDLA på LinkedIn',
+      instagram: 'NDLA på Instagram',
+      instagramAria: 'Besøk NDLA på Instagram',
       sharePage: 'Del denne siden',
       sharePageAria: 'Del denne siden'
     },

package/lib/locale/messages-sma.d.ts

@@ -559,8 +559,10 @@ declare const messages: {
             newsletterAria: string;
             youtube: string;
             youtubeAria: string;
-            twitter: string;
-            twitterAria: string;
+            linkedin: string;
+            linkedinAria: string;
+            instagram: string;
+            instagramAria: string;
             sharePage: string;
             sharePageAria: string;
         };

package/lib/locale/messages-sma.js

@@ -487,7 +487,7 @@ var messages = _objectSpread(_objectSpread({
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettsteder',
+    footerLinksHeader: 'Andre NDLA-nettsteder',
     footerInfo: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
     footerEditiorInChief: 'Ansvarlig redaktør: ',
     footerManagingEditor: 'Utgaveansvarlig: ',
@@ -499,8 +499,10 @@ var messages = _objectSpread(_objectSpread({
       newsletterAria: 'Meld deg på vårt nyhetsbrev',
       youtube: 'NDLA på YouTube',
       youtubeAria: 'NDLA på YouTube',
-      twitter: 'NDLA på Twitter',
-      twitterAria: 'Besøk NDLA på Twitter',
+      linkedin: 'NDLA på LinkedIn',
+      linkedinAria: 'Besøk NDLA på LinkedIn',
+      instagram: 'NDLA på Instagram',
+      instagramAria: 'Besøk NDLA på Instagram',
       sharePage: 'Del denne siden',
       sharePageAria: 'Del denne siden'
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "11.2.0",
+  "version": "12.0.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,17 +31,17 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.2.0",
-    "@ndla/carousel": "^1.2.6",
+    "@ndla/button": "^2.2.1",
+    "@ndla/carousel": "^1.2.7",
     "@ndla/core": "^2.1.1",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.7.0",
-    "@ndla/licenses": "^4.1.0",
-    "@ndla/modal": "^1.2.7",
-    "@ndla/notion": "^3.1.4",
-    "@ndla/safelink": "^1.1.7",
+    "@ndla/icons": "^1.7.1",
+    "@ndla/licenses": "^4.1.2",
+    "@ndla/modal": "^1.2.8",
+    "@ndla/notion": "^3.1.7",
+    "@ndla/safelink": "^2.0.1",
     "@ndla/switch": "^0.1.5",
-    "@ndla/tabs": "^1.1.5",
+    "@ndla/tabs": "^1.1.6",
     "@ndla/tooltip": "^0.3.5",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4f4f1e2e973a94db7d3c2ea08d66bacbcde29d3e"
+  "gitHead": "2a89165f344afbdf06308822742315d9e84e4a41"
 }

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -10,13 +10,12 @@ import React, { useRef, useImperativeHandle, ReactNode, forwardRef } from 'react
 import { ChevronRight } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import BEMHelper, { ReturnObject } from 'react-bem-helper';
-import * as H from 'history';
 
 interface Props {
   classes: BEMHelper<ReturnObject>;
   isCurrent: boolean;
   children: ReactNode;
-  to: H.LocationDescriptor;
+  to: string | Partial<Location>;
   home: boolean;
   name: string;
   invertedStyle: boolean;

package/src/ResourceBox/ResourceBox.tsx

@@ -7,7 +7,7 @@
  *
  */
 import React from 'react';
-import { breakpoints, fonts, mq, colors } from '@ndla/core';
+import { breakpoints, fonts, mq, colors, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { Launch } from '@ndla/icons/common';
 import { LicenseByline } from '@ndla/licenses';
@@ -17,18 +17,18 @@ import Image from '../Image';
 
 const ResourceBoxContainer = styled.div`
   display: flex;
-  padding: 20px;
+  position: relative;
+  padding: ${spacing.nsmall};
   border-radius: 5px;
   border: 1px solid ${colors.brand.light};
-  position: relative;
   font-family: ${fonts.sans};
   box-shadow: 0px 20px 35px -15px rgba(32, 88, 143, 0.15);
-  gap: 40px;
+  gap: ${spacing.medium};
 
   ${mq.range({ until: breakpoints.desktop })} {
     gap: 0;
     flex-direction: column;
-    padding-top: 30px;
+    padding-top: ${spacing.medium};
     text-align: center;
   }
 `;
@@ -41,40 +41,34 @@ const Title = styled.h3`
 
 const Caption = styled.p`
   font-size: ${fonts.sizes(14)};
-  max-width: 600px;
-
-  ${mq.range({ until: breakpoints.desktop })} {
-    line-height: 22px;
-  }
 `;
 
-const TextWrapper = styled.div`
+const ContentWrapper = styled.div`
+  flex-basis: 0;
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   ${mq.range({ until: breakpoints.desktop })} {
     align-items: center;
-    padding-top: 10px;
+    padding-top: ${spacing.small};
   }
 `;
 
 const StyledButton = styled(SafeLinkButton)`
+  display: flex;
+  gap: ${spacing.xxsmall};
+  align-items: center;
   border: 1px solid ${colors.brand.tertiary};
   :hover {
     background-color: ${colors.brand.primary};
     border: 1px solid ${colors.brand.primary};
-    color: white;
+    color: ${colors.white};
   }
 `;
 
-const StyledLaunchIcon = styled(Launch)`
-  margin-left: 8px;
-  height: 15px;
-  width: 15px;
-`;
-
-const ImageWrapper = styled.div`
-  img {
+const StyledImage = styled(Image)`
+  && {
     object-fit: cover;
     width: 134px;
     height: 134px;
@@ -88,46 +82,49 @@ const ImageWrapper = styled.div`
 `;
 
 const LincenseWrapper = styled.div`
-  top: 9px;
   position: absolute;
-  right: 1px;
-  ul {
-    margin-right: 0;
-  }
+  top: 9px;
+  right: 0;
 `;
 
-type Props = {
-  image: string;
+interface ImageMeta {
+  src: string;
+  alt: string;
+}
+
+interface Props {
+  image: ImageMeta;
   title: string;
   caption: string;
   licenseRights: string[];
-  authors?: { name: string }[];
+  authors?: string[];
   locale?: string;
   url: string;
-};
+}
+
 export const ResourceBox = ({ image, title, caption, licenseRights, locale, authors, url }: Props) => {
   const { t } = useTranslation();
   return (
     <ResourceBoxContainer>
       <LincenseWrapper>
         <LicenseByline licenseRights={licenseRights} locale={locale} marginRight color={colors.brand.tertiary}>
-          <div className="c-figure__byline-author-buttons">
-            <span className="c-figure__byline-authors">{authors?.map((author) => author.name).join(' ')}</span>
-          </div>
+          {authors && authors.length > 0 && (
+            <div className="c-figure__byline-author-buttons">
+              <span className="c-figure__byline-authors">{authors.join(' ')}</span>
+            </div>
+          )}
         </LicenseByline>
       </LincenseWrapper>
-      <ImageWrapper>
-        <Image alt={title} src={image} />
-      </ImageWrapper>
-      <TextWrapper>
+      <StyledImage src={image.src} alt={image.alt} />
+      <ContentWrapper>
         <Title>{title}</Title>
         <Caption>{caption}</Caption>
 
         <StyledButton to={url} target="_blank" outline borderShape="rounded">
           {t('license.other.itemImage.ariaLabel')}
-          <StyledLaunchIcon aria-hidden />
+          <Launch aria-hidden />
         </StyledButton>
-      </TextWrapper>
+      </ContentWrapper>
     </ResourceBoxContainer>
   );
 };

package/src/Search/ContentTypeResult.tsx

@@ -47,8 +47,8 @@ type Props = {
     showLessResultLabel?: string;
     noHit: string;
   };
-  ignoreContentTypeBadge: boolean;
-  keyboardPathNavigation: HTMLElement | string | null;
+  ignoreContentTypeBadge?: boolean;
+  keyboardPathNavigation?: HTMLElement | string | null;
   inMenu?: boolean;
   animateList?: number;
   unGrouped?: boolean;

package/src/locale/messages-en.ts

@@ -532,8 +532,10 @@ const messages = {
       newsletterAria: 'Sign up for our Newsletter',
       youtube: 'NDLA on YouTube',
       youtubeAria: 'NDLA on YouTube',
-      twitter: 'NDLA on Twitter',
-      twitterAria: 'Follow NDLA on Twitter',
+      linkedin: 'NDLA on LinkedIn',
+      linkedinAria: 'Visit NDLA on LinkedIn',
+      instagram: 'NDLA on Instagram',
+      instagramAria: 'Visit NDLA on Instagram',
       sharePage: 'Share this page',
       sharePageAria: 'Share this page',
     },

package/src/locale/messages-nb.ts

@@ -518,7 +518,7 @@ const messages = {
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettsteder',
+    footerLinksHeader: 'Andre NDLA-nettsteder',
     footerInfo: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
     footerEditiorInChief: 'Ansvarlig redaktør: ',
     footerManagingEditor: 'Utgaveansvarlig: ',
@@ -530,8 +530,10 @@ const messages = {
       newsletterAria: 'Meld deg på vårt nyhetsbrev',
       youtube: 'NDLA på YouTube',
       youtubeAria: 'NDLA på YouTube',
-      twitter: 'NDLA på Twitter',
-      twitterAria: 'Besøk NDLA på Twitter',
+      linkedin: 'NDLA på LinkedIn',
+      linkedinAria: 'Besøk NDLA på LinkedIn',
+      instagram: 'NDLA på Instagram',
+      instagramAria: 'Besøk NDLA på Instagram',
       sharePage: 'Del denne siden',
       sharePageAria: 'Del denne siden',
     },

package/src/locale/messages-nn.ts

@@ -519,7 +519,7 @@ const messages = {
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Vel språk (language): ',
     vision: 'Saman skapar vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettstader',
+    footerLinksHeader: 'Andre NDLA-nettstader',
     footerInfo: 'Nettstaden er utarbeida av NDLA med open kjeldekode.',
     footerEditiorInChief: 'Ansvarleg redaktør: ',
     footerManagingEditor: 'Utgåveansvarleg: ',
@@ -531,8 +531,10 @@ const messages = {
       newsletterAria: 'Meld deg på vårt nyheitsbrev',
       youtube: 'NDLA på YouTube',
       youtubeAria: 'NDLA på YouTube',
-      twitter: 'NDLA på Twitter',
-      twitterAria: 'Besøk NDLA på Twitter',
+      linkedin: 'NDLA på LinkedIn',
+      linkedinAria: 'Besøk NDLA på LinkedIn',
+      instagram: 'NDLA på Instagram',
+      instagramAria: 'Besøk NDLA på Instagram',
       sharePage: 'Del denne sida',
       sharePageAria: 'Del denne sida',
     },

package/src/locale/messages-se.ts

@@ -518,7 +518,7 @@ const messages = {
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettsteder',
+    footerLinksHeader: 'Andre NDLA-nettsteder',
     footerInfo: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
     footerEditiorInChief: 'Ansvarlig redaktør: ',
     footerManagingEditor: 'Utgaveansvarlig: ',
@@ -530,8 +530,10 @@ const messages = {
       newsletterAria: 'Meld deg på vårt nyhetsbrev',
       youtube: 'NDLA på YouTube',
       youtubeAria: 'NDLA på YouTube',
-      twitter: 'NDLA på Twitter',
-      twitterAria: 'Besøk NDLA på Twitter',
+      linkedin: 'NDLA på LinkedIn',
+      linkedinAria: 'Besøk NDLA på LinkedIn',
+      instagram: 'NDLA på Instagram',
+      instagramAria: 'Besøk NDLA på Instagram',
       sharePage: 'Del denne siden',
       sharePageAria: 'Del denne siden',
     },

package/src/locale/messages-sma.ts

@@ -518,7 +518,7 @@ const messages = {
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettsteder',
+    footerLinksHeader: 'Andre NDLA-nettsteder',
     footerInfo: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
     footerEditiorInChief: 'Ansvarlig redaktør: ',
     footerManagingEditor: 'Utgaveansvarlig: ',
@@ -530,8 +530,10 @@ const messages = {
       newsletterAria: 'Meld deg på vårt nyhetsbrev',
       youtube: 'NDLA på YouTube',
       youtubeAria: 'NDLA på YouTube',
-      twitter: 'NDLA på Twitter',
-      twitterAria: 'Besøk NDLA på Twitter',
+      linkedin: 'NDLA på LinkedIn',
+      linkedinAria: 'Besøk NDLA på LinkedIn',
+      instagram: 'NDLA på Instagram',
+      instagramAria: 'Besøk NDLA på Instagram',
       sharePage: 'Del denne siden',
       sharePageAria: 'Del denne siden',
     },