@ndla/ui 8.0.1 → 8.1.2

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/BannerCard/BannerCard.tsx

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import React from 'react';
+import { colors, fonts, breakpoints, mq } from '@ndla/core';
+import SafeLink from '@ndla/safelink';
+import styled from '@emotion/styled';
+import { Image } from '..';
+
+const BannerWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  max-width: 669px;
+  border-radius: 8px;
+  border: 1px solid ${colors.brand.greyLight};
+  font-family: ${fonts.sans};
+  padding: 30px;
+  gap: 30px;
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    flex-direction: column;
+  }
+`;
+
+const ImageWrapper = styled.div`
+  display: flex;
+  flex: 0 0 40%;
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    display: block;
+    text-align: center;
+    width: 100%;
+  }
+`;
+
+const StyledImage = styled(Image)`
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    max-height: 150px;
+  }
+`;
+
+const TextWrapper = styled.div`
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    margin-left: 0;
+    margin-top: 10px;
+  }
+`;
+
+const ContentText = styled.p`
+  font-size: ${fonts.sizes(16)};
+  color: ${colors.brand.grey};
+  margin: 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
+`;
+const LinkText = styled(SafeLink)`
+  font-size: ${fonts.sizes(16)};
+  color: ${colors.brand.grey};
+`;
+const TitleText = styled.h2`
+  margin-top: 7px;
+  font-size: ${fonts.sizes(22)};
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    margin-top: 0;
+  }
+`;
+
+type ImageProps = {
+  altText: string;
+  imageSrc: string;
+};
+type BannerProps = {
+  link: string;
+  image: ImageProps;
+  title: string;
+  content: string;
+  linkText: string;
+};
+export const BannerCard = ({ link, title, content, linkText, image }: BannerProps) => {
+  return (
+    <BannerWrapper>
+      <ImageWrapper>
+        <StyledImage alt={image.altText} src={image.imageSrc} />
+      </ImageWrapper>
+      <TextWrapper>
+        <TitleText>{title}</TitleText>
+        <ContentText>{content}</ContentText>
+        <LinkText target="_self" to={link}>
+          {linkText}
+        </LinkText>
+      </TextWrapper>
+    </BannerWrapper>
+  );
+};
+
+export default BannerCard;

package/src/BannerCard/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import BannerCard from './BannerCard';
+
+export { BannerCard };

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/ResourceBox/ResourceBox.tsx

@@ -0,0 +1,190 @@
+/**
+ *
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import React from 'react';
+import { breakpoints, fonts, mq, colors } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
+import { Launch } from '@ndla/icons/common';
+import { LicenseByline } from '@ndla/licenses';
+import { SafeLinkButton } from '@ndla/safelink';
+import styled from '@emotion/styled';
+import Image from '../Image';
+
+const BoxWrapper = styled.div`
+  display: flex;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  border-radius: 5px;
+  border: 1px solid ${colors.brand.light};
+  position: relative;
+  left: -16.6666666667%;
+  width: 133.3333333333%;
+  align-items: stretch;
+  margin-bottom: 24px;
+  font-family: ${fonts.sans};
+  box-shadow: 0px 20px 35px -15px rgba(32, 88, 143, 0.15);
+  gap: 40px;
+
+  ${mq.range({ until: breakpoints.desktop })} {
+    gap: 1px;
+    flex-direction: column;
+    margin: 0 auto;
+    width: 80%;
+    left: 0;
+    padding-left: 24px;
+    padding-right: 24px;
+    padding-bottom: 0;
+    margin-bottom: 24px;
+    height: auto;
+    text-align: center;
+  }
+`;
+
+const Boxtitle = styled.h3`
+  font-weight: ${fonts.weight.bold};
+  font-size: ${fonts.sizes(18)};
+  margin-top: 0;
+  ${mq.range({ until: breakpoints.desktop })} {
+    text-align: center;
+    width: 100%;
+  }
+`;
+
+const Boxcaption = styled.p`
+  font-size: ${fonts.sizes(14)};
+
+  ${mq.range({ until: breakpoints.desktop })} {
+    line-height: 22px;
+  }
+`;
+
+const StyledButtonDiv = styled.div`
+  align-items: flex-start;
+  ${mq.range({ until: breakpoints.desktop })} {
+    padding-bottom: 10px;
+    margin: 0 auto;
+  }
+`;
+const ResourceBoxStyledButton = styled(SafeLinkButton)`
+  border: 1px solid ${colors.brand.tertiary};
+  :hover {
+    background-color: ${colors.brand.primary};
+    color: white;
+  }
+  ${mq.range({ until: breakpoints.desktop })} {
+    width: 210px;
+  }
+`;
+const ResourceBoxLaunchIcon = styled(Launch)`
+  margin-left: 8px;
+  height: 15px;
+  width: 15px;
+`;
+
+const BoxImage = styled(Image)`
+  object-fit: cover;
+  width: 134px;
+  height: 134px;
+  border-radius: 5px;
+
+  ${mq.range({ until: breakpoints.desktop })} {
+    width: 200px;
+    height: 200px;
+  }
+`;
+const ImageSectionWrapper = styled.div`
+  align-items: flex-start;
+  display: flex;
+  justify-content: center;
+  margin-left: 20px;
+  ${mq.range({ until: breakpoints.desktop })} {
+    margin: 0 auto;
+    padding-top: 10px;
+  }
+`;
+
+const CaptionSectionWrapper = styled.div`
+  max-width: 600px;
+  ${mq.range({ until: breakpoints.desktop })} {
+    margin: 0 auto;
+  }
+`;
+
+const CenterItems = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex-flow: column;
+  ${mq.range({ until: breakpoints.desktop })} {
+    width: 100%;
+  }
+`;
+
+const TitleAndLicence = styled.div`
+  display: flex;
+  justify-content: space-between;
+  ${mq.range({ until: breakpoints.desktop })} {
+    text-align: center;
+    padding-top: 10px;
+    max-width: 200px;
+    margin: 0 auto;
+  }
+`;
+
+const LincenseWrapper = styled.div`
+  top: 9px;
+  position: absolute;
+  right: 1px;
+  ul {
+    margin-right: 0;
+  }
+`;
+
+type Props = {
+  image: string;
+  title: string;
+  caption: string;
+  licenseRights: string[];
+  authors?: { name: string }[];
+  locale?: string;
+  url: string;
+};
+export const ResourceBox = ({ image, title, caption, licenseRights, locale, authors, url }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <BoxWrapper>
+      <ImageSectionWrapper>
+        <BoxImage alt={title} src={image} sizes="25, 25" />
+      </ImageSectionWrapper>
+      <CenterItems>
+        <CaptionSectionWrapper>
+          <TitleAndLicence>
+            <Boxtitle>{title}</Boxtitle>
+            <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>
+              </LicenseByline>
+            </LincenseWrapper>
+          </TitleAndLicence>
+          <Boxcaption>{caption}</Boxcaption>
+        </CaptionSectionWrapper>
+
+        <StyledButtonDiv>
+          <ResourceBoxStyledButton to={url} target="_blank" outline borderShape="rounded">
+            {t('license.other.itemImage.ariaLabel')}
+            <ResourceBoxLaunchIcon aria-hidden />
+          </ResourceBoxStyledButton>
+        </StyledButtonDiv>
+      </CenterItems>
+    </BoxWrapper>
+  );
+};
+
+export default ResourceBox;

package/src/ResourceBox/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import ResourceBox from './ResourceBox';
+
+export { ResourceBox };

package/src/TopicMenu/TopicMenu.jsx

@@ -74,6 +74,8 @@ export const TopicMenu = ({
   currentProgramme,
   initialSelectedMenu,
   messages,
+  selectedGrade,
+  onGradeChange,
 }) => {
   const { t } = useTranslation();
   const [isNarrowScreen, setIsNarrowScreen] = useState(false);
@@ -242,7 +244,8 @@ export const TopicMenu = ({
           <div {...classes('all-subjects')}>
             <ProgrammeSubjects
               grades={currentProgramme.grades}
-              preSelectedGradeIndex={currentProgramme.selectedGradeIndex ? currentProgramme.selectedGradeIndex : 0}
+              selectedGrade={selectedGrade}
+              onChangeGrade={onGradeChange}
               onNavigate={closeMenu}
             />
           </div>

package/src/index.ts

@@ -117,6 +117,8 @@ export { default as Breadcrumblist } from './Breadcrumblist';
 
 export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
 
+export { ResourceBox } from './ResourceBox';
+
 export { default as CloseButton } from './CloseButton';
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
 
@@ -218,3 +220,4 @@ export { default as CopyParagraphButton } from './CopyParagraphButton';
 
 export { default as ContentPlaceholder } from './ContentPlaceholder';
 export { Notion, ConceptNotion } from './Notion';
+export { BannerCard } from './BannerCard';

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',