@ndla/ui 20.0.0 → 21.0.0

package/lib/index.d.ts

@@ -88,4 +88,4 @@ export type { SnackBarItem } from './SnackBar';
 export { SnackBar } from './SnackBar';
 export { InfoBlock } from './InfoBlock';
 export { TreeStructure } from './TreeStructure';
-export type { FolderStructureProps, TreeStructureProps } from './TreeStructure';
+export type { FolderType, TreeStructureProps, TreeStructureMenuProps } from './TreeStructure';

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

@@ -94,7 +94,12 @@ declare const messages: {
                 ask: string;
             };
             wishToDelete: string;
-            terms: string;
+            terms: {
+                terms: string;
+                term1: string;
+                term2: string;
+                term3: string;
+            };
             feide: string;
             newFavourite: string;
             storageInfo: {

package/lib/locale/messages-en.js

@@ -989,7 +989,12 @@ var messages = _objectSpread(_objectSpread({
         ask: 'Ask us in the chat'
       },
       wishToDelete: 'Do you wish to delete your account?',
-      terms: 'terms of use',
+      terms: {
+        terms: 'Terms of use',
+        term1: 'Do not write personal or sensitive information in text fields.',
+        term2: 'Do not write offensive statements in text fields.',
+        term3: 'NDLA reserves the right to update or remove resources if they are not up to date.'
+      },
       feide: 'We have retrieved this information from Feide',
       newFavourite: 'Recently favourited',
       storageInfo: {

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

@@ -94,7 +94,12 @@ declare const messages: {
                 ask: string;
             };
             wishToDelete: string;
-            terms: string;
+            terms: {
+                terms: string;
+                term1: string;
+                term2: string;
+                term3: string;
+            };
             newFavourite: string;
             feide: string;
             storageInfo: {

package/lib/locale/messages-nb.js

@@ -989,7 +989,12 @@ var messages = _objectSpread(_objectSpread({
         ask: 'Spør oss i chatten'
       },
       wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
-      terms: 'vilkår for bruk',
+      terms: {
+        terms: 'Vilkår for bruk',
+        term1: 'Ikke skriv personsensitiv informasjon eller persondata i tekstfelt.',
+        term2: 'Ikke skriv noe støtende i tekstfelt.',
+        term3: 'NDLA forbeholder seg retten til å oppdatere eller eventuelt slette ressurser dersom disse blir utdatert.'
+      },
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg fra Feide',
       storageInfo: {

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

@@ -94,7 +94,12 @@ declare const messages: {
                 ask: string;
             };
             wishToDelete: string;
-            terms: string;
+            terms: {
+                terms: string;
+                term1: string;
+                term2: string;
+                term3: string;
+            };
             newFavourite: string;
             feide: string;
             storageInfo: {

package/lib/locale/messages-nn.js

@@ -989,7 +989,12 @@ var messages = _objectSpread(_objectSpread({
         ask: 'Spør oss i chatten'
       },
       wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
-      terms: 'vilkår for bruk',
+      terms: {
+        terms: 'Vilkår for bruk',
+        term1: 'Ikkje skriv personsensitiv informasjon eller persondata i tekstfelt.',
+        term2: 'Ikkje skriv noko støytande i tekstfelt.',
+        term3: 'NDLA atterhald seg retten til å oppdatere eller eventuelt slette ressursar dersom disse blir utdatert.'
+      },
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg fra Feide',
       storageInfo: {

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

@@ -94,7 +94,12 @@ declare const messages: {
                 ask: string;
             };
             wishToDelete: string;
-            terms: string;
+            terms: {
+                terms: string;
+                term1: string;
+                term2: string;
+                term3: string;
+            };
             newFavourite: string;
             feide: string;
             storageInfo: {

package/lib/locale/messages-se.js

@@ -989,7 +989,12 @@ var messages = _objectSpread(_objectSpread({
         ask: 'Spør oss i chatten'
       },
       wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
-      terms: 'vilkår for bruk',
+      terms: {
+        terms: 'Vilkår for bruk',
+        term1: 'Ikke skriv personsensitiv informasjon eller persondata i tekstfelt.',
+        term2: 'Ikke skriv noe støtende i tekstfelt.',
+        term3: 'NDLA forbeholder seg retten til å oppdatere eller eventuelt slette ressurser dersom disse blir utdatert.'
+      },
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg fra Feide',
       storageInfo: {

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

@@ -94,7 +94,12 @@ declare const messages: {
                 ask: string;
             };
             wishToDelete: string;
-            terms: string;
+            terms: {
+                terms: string;
+                term1: string;
+                term2: string;
+                term3: string;
+            };
             newFavourite: string;
             feide: string;
             storageInfo: {

package/lib/locale/messages-sma.js

@@ -989,7 +989,12 @@ var messages = _objectSpread(_objectSpread({
         ask: 'Spør oss i chatten'
       },
       wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
-      terms: 'vilkår for bruk',
+      terms: {
+        terms: 'Vilkår for bruk',
+        term1: 'Ikke skriv personsensitiv informasjon eller persondata i tekstfelt.',
+        term2: 'Ikke skriv noe støtende i tekstfelt.',
+        term3: 'NDLA forbeholder seg retten til å oppdatere eller eventuelt slette ressurser dersom disse blir utdatert.'
+      },
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg fra Feide',
       storageInfo: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "20.0.0",
+  "version": "21.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,19 +31,20 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^3.1.3",
-    "@ndla/carousel": "^1.2.12",
-    "@ndla/core": "^2.3.0",
-    "@ndla/forms": "^3.1.0",
+    "@ndla/button": "^3.1.5",
+    "@ndla/carousel": "^1.2.14",
+    "@ndla/core": "^2.3.2",
+    "@ndla/forms": "^3.1.2",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.11.0",
-    "@ndla/licenses": "^5.0.3",
-    "@ndla/modal": "^1.2.13",
-    "@ndla/notion": "^3.1.23",
-    "@ndla/safelink": "^2.2.1",
-    "@ndla/switch": "^0.1.7",
-    "@ndla/tabs": "^1.1.11",
-    "@ndla/tooltip": "^2.1.2",
+    "@ndla/icons": "^1.11.2",
+    "@ndla/licenses": "^5.0.5",
+    "@ndla/modal": "^1.2.15",
+    "@ndla/notion": "^3.1.25",
+    "@ndla/safelink": "^2.2.3",
+    "@ndla/switch": "^0.1.9",
+    "@ndla/tabs": "^1.1.13",
+    "@ndla/tooltip": "^2.1.4",
+    "@ndla/types-learningpath-api": "^0.0.12",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -82,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "92e4a15ab1e19af2c7b1055f56f90f5c415f87e7"
+  "gitHead": "57a015c6fe4a2106bb88d0f2ebea44592aa4d29e"
 }

package/src/LearningPaths/LearningPathInformation.tsx

@@ -8,7 +8,8 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { fonts, spacing, spacingUnit, breakpoints, mq } from '@ndla/core';
+import { fonts, spacing, spacingUnit, breakpoints, mq, colors } from '@ndla/core';
+import { getLicenseByAbbreviation, LicenseByline } from '@ndla/licenses';
 
 type StyledWrapperProps = {
   invertedStyle?: boolean;
@@ -50,6 +51,17 @@ const StyledWrapper = styled.div<StyledWrapperProps>`
   }
 `;
 
+const LicenseWrapper = styled.div`
+  ul {
+    margin-left: 0;
+    margin-bottom: ${spacing.small};
+  }
+`;
+
+const StyledHeader = styled.h1`
+  margin-bottom: ${spacing.small};
+`;
+
 interface Props {
   description?: string;
   title: string;
@@ -59,14 +71,17 @@ interface Props {
   };
 }
 
-export const LearningPathInformation = ({ description, title, license, invertedStyle }: Props) => (
-  <section className="o-wrapper">
-    <StyledWrapper invertedStyle={invertedStyle} className="c-article">
-      <div>
-        <h1>{title}</h1>
-        {license && license.license}
-      </div>
-      {description && <div dangerouslySetInnerHTML={{ __html: description }} />}
-    </StyledWrapper>
-  </section>
-);
+export const LearningPathInformation = ({ description, title, license, invertedStyle }: Props) => {
+  const { rights } = getLicenseByAbbreviation(license?.license || '', 'nb');
+  return (
+    <section className="o-wrapper">
+      <StyledWrapper invertedStyle={invertedStyle} className="c-article">
+        <LicenseWrapper>
+          <StyledHeader>{title}</StyledHeader>
+          <LicenseByline licenseRights={rights} color={colors.brand.tertiary} />
+        </LicenseWrapper>
+        {description && <div dangerouslySetInnerHTML={{ __html: description }} />}
+      </StyledWrapper>
+    </section>
+  );
+};

package/src/LearningPaths/LearningPathMenu.tsx

@@ -76,6 +76,7 @@ export type StepProps = {
 };
 
 interface Props {
+  onToggleAddToFavorites?: () => void;
   learningsteps: StepProps[];
   name: string;
   lastUpdated: string;
@@ -109,6 +110,7 @@ const LearningPathMenu = ({
   learningPathURL,
   invertedStyle,
   cookies,
+  onToggleAddToFavorites,
 }: Props) => {
   const { t } = useTranslation();
   const [isOpen, toggleOpenState] = useState(false);
@@ -129,7 +131,13 @@ const LearningPathMenu = ({
                 </StyledToggleMenubutton>
               </Tooltip>
             </div>
-            <LearningPathMenuIntro isOpen={isOpen} name={name} invertedStyle={invertedStyle} />
+            <LearningPathMenuIntro
+              isOpen={isOpen}
+              name={name}
+              invertedStyle={invertedStyle}
+              id={learningPathId}
+              onToggleAddToFavorites={onToggleAddToFavorites}
+            />
             <LearningPathMenuContent
               learningsteps={learningsteps}
               learningPathId={learningPathId}

package/src/LearningPaths/LearningPathMenuAsideCopyright.tsx

@@ -9,22 +9,20 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { User } from '@ndla/icons/common';
-import { spacing, fonts } from '@ndla/core';
+import { spacing, fonts, colors } from '@ndla/core';
+import { getLicenseByAbbreviation, LicenseByline } from '@ndla/licenses';
 
 const StyledLearningPathDetails = styled.div`
   ${fonts.sizes(14, 1.1)};
   font-weight: ${fonts.weight.normal};
-  margin: 0;
+`;
+
+const UserLine = styled.div`
   display: flex;
-  align-items: flex-start;
-  justify-items: flex-start;
   margin-bottom: ${spacing.xsmall};
-  p {
-    margin: 0;
-    padding-left: ${spacing.xsmall};
-  }
+
   span {
-    display: block;
+    margin-left: ${spacing.xsmall};
   }
 `;
 
@@ -40,16 +38,20 @@ type Props = {
   };
 };
 
-const LearningPathMenuAsideCopyright = ({ copyright }: Props) => (
-  <StyledLearningPathDetails>
-    <User />
-    <p>
-      {copyright.contributors.map((contributor) => (
-        <span key={contributor.name}>{contributor.name}</span>
-      ))}
-      <span>{copyright.license.license}</span>
-    </p>
-  </StyledLearningPathDetails>
-);
+const LearningPathMenuAsideCopyright = ({ copyright }: Props) => {
+  const { rights } = getLicenseByAbbreviation(copyright.license.license || '', 'nb');
+  return (
+    <StyledLearningPathDetails>
+      <UserLine>
+        <User />
+        {copyright.contributors.map((contributor) => (
+          <span key={contributor.name}>{contributor.name}</span>
+        ))}
+      </UserLine>
+
+      <LicenseByline licenseRights={rights} color={colors.brand.tertiary} />
+    </StyledLearningPathDetails>
+  );
+};
 
 export default LearningPathMenuAsideCopyright;

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -11,6 +11,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { useTranslation } from 'react-i18next';
 import { colors, spacing, spacingUnit, fonts, typography, mq, breakpoints, animations } from '@ndla/core';
+import { ArticleFavoritesButton } from '../Article';
 
 const StyledInfoHeader = styled.p`
   ${typography.smallHeading}
@@ -94,18 +95,30 @@ const StyledIntroHeader = styled.h1`
   margin: ${spacing.small} 0 ${spacing.normal};
 `;
 
+const StyledRow = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+`;
+
 interface Props {
   isOpen: boolean;
   invertedStyle?: boolean;
   name: string;
+  onToggleAddToFavorites?: () => void;
+  id: number;
 }
 
-const LearningPathMenuIntro = ({ isOpen, name, invertedStyle }: Props) => {
+const LearningPathMenuIntro = ({ isOpen, name, invertedStyle, onToggleAddToFavorites, id }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledMenuIntro isOpen={isOpen} invertedStyle={invertedStyle}>
       <div>
-        <StyledInfoHeader>{t('learningPath.youAreInALearningPath')}</StyledInfoHeader>
+        <StyledRow>
+          <StyledInfoHeader>{t('learningPath.youAreInALearningPath')}</StyledInfoHeader>
+          {onToggleAddToFavorites && (
+            <ArticleFavoritesButton onToggleAddToFavorites={onToggleAddToFavorites} articleId={id.toString()} />
+          )}
+        </StyledRow>
         <StyledIntroHeader>{name}</StyledIntroHeader>
       </div>
     </StyledMenuIntro>

package/src/Masthead/Masthead.tsx

@@ -95,7 +95,10 @@ export const Masthead = ({
       )}
       <div id="masthead" {...classes('', { fixed: !!fixed, infoContent: !!infoContent, ndlaFilm: !!ndlaFilm })}>
         {messages?.map((message) => (
-          <MessageBanner showCloseButton={message.closable} onClose={() => onCloseAlert?.(message.number)}>
+          <MessageBanner
+            key={message.number}
+            showCloseButton={message.closable}
+            onClose={() => onCloseAlert?.(message.number)}>
             {message.content}
           </MessageBanner>
         ))}

package/src/Messages/MessageBanner.tsx

@@ -24,7 +24,7 @@ const MessageBannerWrapper = styled.div<WrapperProps>`
   padding: ${({ small }) => (small ? spacing.xxsmall : spacing.small)};
   background: ${colors.support.yellowLight};
   color: ${colors.brand.greyDark};
-  border: none;
+  border-bottom: solid 1px ${colors.white};
 `;
 
 const TextWrapper = styled.div`

package/src/Resource/ListResource.tsx

@@ -88,6 +88,7 @@ const StyledImageWrapper = styled.div<StyledImageProps>`
     width: 54px;
     height: 40px;
   }
+  overflow: hidden;
 `;
 
 const StyledImage = styled(Image)`

package/src/TopicMenu/TopicMenu.jsx

@@ -74,6 +74,7 @@ export const TopicMenu = ({
   currentProgramme,
   initialSelectedMenu,
   messages,
+  closeAlert,
   selectedGrade,
   onGradeChange,
 }) => {
@@ -149,11 +150,15 @@ export const TopicMenu = ({
   const disableSubTopic = disableMain && hasExpandedSubtopics;
 
   const sliderCounter = !expandedTopicId ? 0 : expandedSubtopicsId.length + 1;
-
   return (
     <nav>
       {messages?.map((message) => (
-        <MessageBanner>{message}</MessageBanner>
+        <MessageBanner
+          key={message.number}
+          showCloseButton={message.closable}
+          onClose={() => closeAlert?.(message.number)}>
+          {message.content}
+        </MessageBanner>
       ))}
       <ModalHeader modifier={['white', 'menu']}>
         <div {...classes('masthead-left')}>
@@ -358,6 +363,7 @@ TopicMenu.propTypes = {
   topics: PropTypes.arrayOf(TopicShape).isRequired,
   toFrontpage: PropTypes.func.isRequired,
   toTopic: PropTypes.func,
+  closeAlert: PropTypes.func,
   toSubject: PropTypes.func,
   close: PropTypes.func,
   defaultCount: PropTypes.number,
@@ -369,6 +375,13 @@ TopicMenu.propTypes = {
   hideSearch: PropTypes.bool,
   searchFieldComponent: PropTypes.node,
   locale: PropTypes.string,
+  messages: PropTypes.arrayOf(
+    PropTypes.shape({
+      content: PropTypes.string.isRequired,
+      closable: PropTypes.bool.isRequired,
+      number: PropTypes.number.isRequired,
+    }),
+  ),
   subjectCategories: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,