@ndla/ui 8.1.0 → 8.2.0

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

@@ -382,6 +382,7 @@ declare const messages: {
         access: {
             onlyTeacher: string;
         };
+        possiblyOutdated: string;
     };
     competenceGoals: {
         competenceGoal: string;

package/lib/locale/messages-en.js

@@ -333,7 +333,8 @@ var messages = _objectSpread(_objectSpread({
     printPage: 'Print',
     access: {
       onlyTeacher: 'This resource is accessible only to teachers who are logged in with Feide.'
-    }
+    },
+    possiblyOutdated: 'The article is outdated'
   },
   competenceGoals: {
     competenceGoal: 'competence-goal',

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

@@ -382,6 +382,7 @@ declare const messages: {
         access: {
             onlyTeacher: string;
         };
+        possiblyOutdated: string;
     };
     competenceGoals: {
         competenceGoal: string;

package/lib/locale/messages-nb.js

@@ -333,7 +333,8 @@ var messages = _objectSpread(_objectSpread({
     printPage: 'Skriv ut',
     access: {
       onlyTeacher: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.'
-    }
+    },
+    possiblyOutdated: 'Artikkelen er foreldet.'
   },
   competenceGoals: {
     competenceGoal: 'kompetansemål',

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

@@ -382,6 +382,7 @@ declare const messages: {
         access: {
             onlyTeacher: string;
         };
+        possiblyOutdated: string;
     };
     competenceGoals: {
         competenceGoal: string;

package/lib/locale/messages-nn.js

@@ -333,7 +333,8 @@ var messages = _objectSpread(_objectSpread({
     printPage: 'Skriv ut',
     access: {
       onlyTeacher: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.'
-    }
+    },
+    possiblyOutdated: 'Artikkelen er foreldet.'
   },
   competenceGoals: {
     competenceGoal: 'kompetansemål',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -54,7 +54,6 @@
     "lodash": "^4.17.20",
     "react-bem-helper": "1.4.1",
     "react-device-detect": "^2.1.2",
-    "react-sticky-el": "^2.0.6",
     "react-swipeable": "^6.2.0",
     "react-transition-group": "^2.5.3",
     "remarkable": "^2.0.1",
@@ -71,7 +70,6 @@
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@types/reach__dialog": "^0.1.0",
-    "@types/react-sticky-el": "^1.0.2",
     "@types/react-transition-group": "^4.4.2",
     "css-loader": "^2.1.0",
     "mini-css-extract-plugin": "^0.5.0",
@@ -82,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "46dc3d930947a1a3102ce6b005d9aaffab2e2aa2"
+  "gitHead": "76d43c9fc110d7dcd1ab0f46e0f3c7ddd3d313b2"
 }

package/src/Article/Article.tsx

@@ -191,9 +191,7 @@ export const Article = ({
 
           {messages.messageBox && (
             <MSGboxWrapper>
-              <MessageBox links={messageBoxLinks} showCloseButton>
-                {messages.messageBox}
-              </MessageBox>
+              <MessageBox links={messageBoxLinks}>{messages.messageBox}</MessageBox>
             </MSGboxWrapper>
           )}
           <ArticleHeaderWrapper competenceGoals={competenceGoals} competenceGoalTypes={competenceGoalTypes}>

package/src/MessageBox/MessageBox.tsx

@@ -8,7 +8,6 @@
 
 import React, { HTMLAttributes, useState } from 'react';
 import styled from '@emotion/styled';
-import Sticky from 'react-sticky-el';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import { InformationOutline, HumanMaleBoard } from '@ndla/icons/common';
 import { WithTranslation, withTranslation } from 'react-i18next';
@@ -82,7 +81,6 @@ const Wrapper = styled.div<WrapperProps>`
   border-radius: ${(props) => StyleByType(props.boxType).borderRadius};
   transform: ${(props) => StyleByType(props.boxType).transform};
   left: ${(props) => StyleByType(props.boxType).left};
-  z-index: 10;
   width: ${(props) => StyleByType(props.boxType).width};
 `;
 
@@ -155,7 +153,6 @@ type LinkProps = {
 };
 type Props = {
   type?: WrapperProps['boxType'];
-  sticky?: boolean;
   children?: string;
   links?: LinkProps[];
   showCloseButton?: boolean;
@@ -166,14 +163,7 @@ const markdown = new Remarkable({ breaks: true });
 markdown.inline.ruler.enable(['sub', 'sup']);
 markdown.block.ruler.disable(['list', 'table']);
 
-export const MessageBox = ({
-  type,
-  sticky = false,
-  children = '',
-  links,
-  showCloseButton,
-  onClose,
-}: Props & WithTranslation) => {
+export const MessageBox = ({ type, children = '', links, showCloseButton, onClose }: Props & WithTranslation) => {
   const [hideMessageBox, setHideMessageBox] = useState(false);
   const onCloseMessageBox = () => {
     setHideMessageBox(true);
@@ -181,8 +171,7 @@ export const MessageBox = ({
   };
   const Icon = type === 'ghost' ? HumanMaleBoard : InformationOutline;
   return (
-    //StickyStyle top:84 makes sure that the messagebox sits beneath the masthead (header ) and the topOffsett sets it so that it applies when reaching the top of the messagebox
-    <Sticky disabled={!sticky} stickyStyle={{ zIndex: 9998, top: 84 }} topOffset={-84}>
+    <>
       <Wrapper boxType={type} style={{ display: hideMessageBox ? 'none' : 'flex' }}>
         <InfoWrapper boxType={type}>
           <IconWrapper boxType={type}>
@@ -205,7 +194,7 @@ export const MessageBox = ({
           ))}
         </LinkWrapper>
       )}
-    </Sticky>
+    </>
   );
 };
 

package/src/Programme/ProgrammeSubjects.tsx

@@ -7,10 +7,12 @@
  */
 
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import Button from '@ndla/button';
 import { breakpoints, mq } from '@ndla/core';
 import { NavigationBox } from '../Navigation';
+import { MessageBox } from '../MessageBox';
 
 const GradesMenu = styled.div`
   margin-bottom: 28px;
@@ -29,6 +31,7 @@ export type GradesProps = {
   selectedGrade?: string;
   onChangeGrade: (newGrade: string) => void;
   grades: {
+    missingProgrammeSubjects?: boolean;
     name: string;
     categories: {
       name: string;
@@ -45,6 +48,7 @@ type Props = GradesProps & {
 };
 
 const ProgrammeSubjects = ({ grades, onNavigate, onChangeGrade, selectedGrade = 'vg1' }: Props) => {
+  const { t } = useTranslation();
   const grade = grades.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades[0];
   return (
     <>
@@ -60,6 +64,7 @@ const ProgrammeSubjects = ({ grades, onNavigate, onChangeGrade, selectedGrade =
           </Button>
         ))}
       </GradesMenu>
+      {grade.missingProgrammeSubjects && <MessageBox>{t('messageBoxInfo.noContent')}</MessageBox>}
       {grade.categories.map((category) => (
         <NavigationBox key={category.name} heading={category.name} items={category.subjects} onClick={onNavigate} />
       ))}

package/src/Topic/Topic.tsx

@@ -21,6 +21,7 @@ import Loader from './Loader';
 import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
 import { makeSrcQueryString, ImageCrop, ImageFocalPoint } from '../Image';
+import { MessageBox, MessageBoxType } from '../MessageBox';
 
 type InvertItProps = {
   invertedStyle?: boolean;
@@ -235,6 +236,7 @@ export type TopicProps = {
   showContent?: boolean;
   isAdditionalTopic?: boolean;
   frame?: boolean;
+  messageBox?: string;
   children?: ReactNode;
 };
 
@@ -249,6 +251,7 @@ const Topic = ({
   showContent,
   isAdditionalTopic,
   frame,
+  messageBox,
   children,
 }: TopicProps) => {
   const { t } = useTranslation();
@@ -328,6 +331,7 @@ const Topic = ({
                   </StyledAdditionalResource>
                 )}
               </TopicHeading>
+              {messageBox && <MessageBox type={MessageBoxType.medium}>{messageBox}</MessageBox>}
               <TopicIntroduction invertedStyle={invertedStyle}>
                 {renderMarkdown ? parse(renderMarkdown(topic.introduction)) : topic.introduction}
               </TopicIntroduction>

package/src/locale/messages-en.ts

@@ -366,6 +366,7 @@ const messages = {
     access: {
       onlyTeacher: 'This resource is accessible only to teachers who are logged in with Feide.',
     },
+    possiblyOutdated: 'The article is outdated',
   },
   competenceGoals: {
     competenceGoal: 'competence-goal',

package/src/locale/messages-nb.ts

@@ -364,6 +364,7 @@ const messages = {
     access: {
       onlyTeacher: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
     },
+    possiblyOutdated: 'Artikkelen er foreldet.',
   },
   competenceGoals: {
     competenceGoal: 'kompetansemål',

package/src/locale/messages-nn.ts

@@ -365,6 +365,7 @@ const messages = {
     access: {
       onlyTeacher: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.',
     },
+    possiblyOutdated: 'Artikkelen er foreldet.',
   },
   competenceGoals: {
     competenceGoal: 'kompetansemål',