@ndla/ui 3.3.6 → 3.3.11

package/src/Programme/Programme.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
 import LayoutItem, { OneColumn } from '../Layout';
-import { NavigationHeading } from '../Navigation';
 import ProgrammeSubjects from './ProgrammeSubjects';
 import { GradesProps } from './ProgrammeSubjects';
-
+import MessageBox from '../MessageBox/MessageBox';
+import { NavigationHeading } from '..';
 const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -63,21 +64,11 @@ const SubjectsWrapper = styled.div`
 type Props = GradesProps & {
   heading?: string;
   image?: string;
+  messageBoxText?: string;
 };
 
-export const Programme = ({ heading, image, grades }: Props) => {
-  const [showGradeIndex, setShowGradeIndex] = useState(0);
-  const isWindowContext = typeof window !== 'undefined';
-
-  useEffect(() => {
-    if (isWindowContext) {
-      const rememberGradeIndex = window.localStorage.getItem('programmeShowGradeIndex') || '0';
-      if (grades.length > Number(rememberGradeIndex)) {
-        setShowGradeIndex(Number(rememberGradeIndex));
-      }
-    }
-  }, [isWindowContext, grades]);
-
+export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade, messageBoxText }: Props) => {
+  const { t } = useTranslation();
   return (
     <StyledWrapper>
       <StyledBackground image={image} />
@@ -86,8 +77,9 @@ export const Programme = ({ heading, image, grades }: Props) => {
           <LayoutItem layout="extend">
             <StyledContentWrapper>
               <NavigationHeading>{heading}</NavigationHeading>
+              {messageBoxText && <MessageBox>{t(messageBoxText)}</MessageBox>}
               <SubjectsWrapper>
-                <ProgrammeSubjects grades={grades} preSelectedGradeIndex={showGradeIndex} />
+                <ProgrammeSubjects grades={grades} selectedGrade={selectedGrade} onChangeGrade={onChangeGrade} />
               </SubjectsWrapper>
             </StyledContentWrapper>
           </LayoutItem>

package/src/Programme/ProgrammeSubjects.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 // @ts-ignore
 import Button from '@ndla/button';
@@ -27,6 +27,8 @@ const GradesMenu = styled.div`
 `;
 
 export type GradesProps = {
+  selectedGrade?: string;
+  onChangeGrade: (newGrade: string) => void;
   grades: {
     name: string;
     categories: {
@@ -40,47 +42,27 @@ export type GradesProps = {
 };
 
 type Props = GradesProps & {
-  preSelectedGradeIndex?: number;
   onNavigate?: () => void;
 };
 
-const ProgrammeSubjects = ({ grades, onNavigate, preSelectedGradeIndex = 0 }: Props) => {
-  const [showGradeIndex, setShowGradeIndex] = useState(preSelectedGradeIndex);
-  const isWindowContext = typeof window !== 'undefined';
-
-  const toggleGradeIndex = (index: number) => {
-    setShowGradeIndex(index);
-    if (isWindowContext) {
-      window.localStorage.setItem('programmeShowGradeIndex', `${index}`);
-    }
-  };
-
-  const selectedGrade = grades[showGradeIndex];
+const ProgrammeSubjects = ({ grades, onNavigate, onChangeGrade, selectedGrade = 'vg1' }: Props) => {
+  const grade = grades.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades[0];
   return (
     <>
       <GradesMenu>
-        {grades.map((item, index) => (
+        {grades.map((item) => (
           <Button
             key={item.name}
-            onClick={() => toggleGradeIndex(index)}
-            lighter={showGradeIndex !== index}
+            onClick={() => onChangeGrade(item.name.toLowerCase())}
+            lighter={item !== grade}
             size="normal"
             borderShape="rounded">
             {item.name}
           </Button>
         ))}
       </GradesMenu>
-      {selectedGrade.categories.map((category) => (
-        <NavigationBox
-          key={category.name}
-          heading={category.name}
-          items={category.subjects}
-          onClick={() => {
-            if (onNavigate) {
-              onNavigate();
-            }
-          }}
-        />
+      {grade.categories.map((category) => (
+        <NavigationBox key={category.name} heading={category.name} items={category.subjects} onClick={onNavigate} />
       ))}
     </>
   );

package/src/SearchTypeResult/SearchNotionItem.tsx

@@ -48,7 +48,6 @@ const ItemWrapper = styled.div<ItemWrapperProps>`
 const TextWrapper = styled.div``;
 const DescriptionWrapper = styled.div`
   ${fonts.sizes('18px', '26px')};
-  font-family: ${fonts.serif};
 `;
 
 const MediaWrapper = styled.div`

package/src/SearchTypeResult/SearchNotionsResult.tsx

@@ -10,7 +10,8 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { fonts, mq, breakpoints, spacing } from '@ndla/core';
 // @ts-ignore
-import Button from '@ndla/button';
+import { ModalCloseButton } from '@ndla/modal';
+// @ts-ignore
 import { withTranslation, WithTranslation } from 'react-i18next';
 import SearchNotionItem, { SearchNotionItemProps } from './SearchNotionItem';
 
@@ -47,10 +48,6 @@ const HeadingCount = styled.span`
   text-transform: lowercase;
 `;
 
-const ButtonRemoveText = styled.span`
-  ${fonts.sizes('18px', '22px')};
-`;
-
 type Props = {
   items: SearchNotionItemProps[];
   totalCount: number;
@@ -65,9 +62,7 @@ const SearchNotionsResult = ({ items, totalCount, onRemove, renderMarkdown, t }:
         {t(`searchPage.resultType.notionsHeading`)}
         <HeadingCount>{t(`searchPage.resultType.hits`, { count: totalCount })}</HeadingCount>
       </Heading>
-      <Button onClick={onRemove} link>
-        <ButtonRemoveText>{t(`searchPage.resultType.notionsRemove`)}</ButtonRemoveText>
-      </Button>
+      <ModalCloseButton onClick={onRemove} />
     </HeadingWrapper>
     {items.map((item) => (
       <SearchNotionItem key={item.id} {...item} renderMarkdown={renderMarkdown} />

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -85,7 +85,7 @@ type Props = {
 const SearchTypeHeader = ({ filters, onFilterClick, totalCount, type, t }: Props & WithTranslation) => (
   <HeaderWrapper>
     <TypeWrapper>
-      {type && <ContentTypeBadge type={type} background size="large" />}
+      {type && <ContentTypeBadge type={type} title={t(`contentTypes.${type}`)} background size="large" />}
       <SubjectName>
         {type && <b>{t(`contentTypes.${type}`)}</b>}{' '}
         {totalCount && <Count>{t(`searchPage.resultType.hits`, { count: totalCount })}</Count>}

package/src/Spinner/Spinner.tsx

@@ -8,23 +8,27 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { spacing, colors, SpacingNames } from '@ndla/core';
+import { colors, spacing, SpacingNames } from '@ndla/core';
 
 interface Props {
+  size?: SpacingNames;
+  margin?: string;
+  inverted?: boolean;
+}
+
+interface StyledProps extends Props {
   size: SpacingNames;
-  margin: string;
-  inverted: boolean;
 }
 
-const SpinnerDiv = styled('div')<Props>`
+const SpinnerDiv = styled('div')<StyledProps>`
   border: calc(${(props) => spacing[props.size]} / 6.5) solid rgba(0, 0, 0, 0.1);
   border-bottom-color: ${(props) => (props.inverted ? '#fff' : colors.brand.primary)};
   border-radius: 50%;
   animation: spinnerAnimation 0.7s linear infinite;
   height: ${(props) => spacing[props.size]};
   width: ${(props) => spacing[props.size]};
-  display: block;
   margin: ${(props) => props.margin};
+  display: block;
   @keyframes spinnerAnimation {
     0% {
       transform: rotate(0deg);

package/src/index.ts

@@ -115,8 +115,9 @@ export { default as CreatedBy } from './CreatedBy';
 
 export { default as Breadcrumblist } from './Breadcrumblist';
 
-export { MessageBox } from './MessageBox';
+export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
 
+export { CloseButton } from './CloseButton';
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
 
 export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Navigation';

package/src/locale/messages-en.ts

@@ -313,6 +313,20 @@ const messages = {
       h5p: 'Interactive',
     },
   },
+  messageBoxInfo: {
+    outdatedCoursePlan:
+      'This course is not updated to the current curriculum. Follow this link to find the updated version of the course: ',
+    updateBrowser:
+      'Your browser is outdated. Update it, or find a safe and updated browser on https://browsehappy.com.',
+    noContent: 'We are sorry, but we do not yet offer any program courses.',
+    feide: 'This resource is accessible only to teachers who are logged in with Feide.',
+    resources:
+      'This is not a complete course produced by NDLA, but a collection of resources we hope you will find useful.',
+    beta: 'This course is in beta.',
+    outdatedSubject: 'This topic is part of a course that is not updated to the current curriculum.',
+    newVersion:
+      'This learning resource is not updated to the current curriculum. You can find an updated version here: ',
+  },
   article: {
     edition: 'Edition',
     publisher: 'Publisher',

package/src/locale/messages-nb.ts

@@ -312,6 +312,20 @@ const messages = {
       h5p: 'Interaktiv',
     },
   },
+  messageBoxInfo: {
+    outdatedCoursePlan:
+      'Dette faget følger en utgått læreplan. Gå til faget som er oppdatert etter gjeldende læreplan:',
+    updateBrowser:
+      'Nettleseren din er utdatert. Oppdater den, eller finn en trygg og oppdatert nettleser på https://browsehappy.com.',
+    noContent: 'Vi har dessverre ikke noen programfag ennå.',
+    feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
+    resources:
+      'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
+    beta: 'Dette faget er i betaversjon.',
+    outdatedSubject: 'Dette emnet hører til et fag som ikke er oppdatert etter gjeldende læreplan.',
+    newVersion:
+      'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
+  },
   article: {
     lastUpdated: 'Sist oppdatert',
     edition: 'Utgave',

package/src/locale/messages-nn.ts

@@ -313,6 +313,20 @@ const messages = {
       h5p: 'Interaktiv',
     },
   },
+  messageBoxInfo: {
+    outdatedCoursePlan:
+      'Dette faget følgjer ein utgått læreplan. Gå til faget som er oppdatert etter gjeldande læreplan: ',
+    updateBrowser:
+      'Nettlesaren din er utdatert. Oppdater han, eller finn ein trygg og oppdatert nettlesar på https://browsehappy.com. ',
+    noContent: 'Vi har dessverre ikkje nokon programfag enno.',
+    feide: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.',
+    resources:
+      'Dette er ikkje eit komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan vere nyttig for deg.',
+    beta: 'Dette faget er i betaversjon.',
+    outdatedSubject: 'Dette emnet høyrer til eit fag som ikkje er oppdatert etter gjeldande læreplan.',
+    newVersion:
+      'Denne læringsressursen er ikkje oppdatert etter gjeldande læreplan. Du finn ein oppdatert versjon her: ',
+  },
   article: {
     lastUpdated: 'Sist oppdatert',
     edition: 'Utgåve',

package/src/MediaList/MediaList.jsx

@@ -1,182 +0,0 @@
-/*
- * Copyright (c) 2016-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 PropTypes from 'prop-types';
-import {
-  LicenseDescription,
-  getLicenseByAbbreviation,
-  resourceTypes,
-  getResourceTypeNamespace,
-  isCreativeCommonsLicense,
-  metaTypes,
-} from '@ndla/licenses';
-import BEMHelper from 'react-bem-helper';
-import { uuid } from '@ndla/util';
-
-const oClasses = new BEMHelper({
-  name: 'media',
-  prefix: 'o-',
-});
-
-const cClasses = new BEMHelper({
-  name: 'medialist',
-  prefix: 'c-',
-});
-
-export const MediaList = ({ children }) => <ul {...cClasses()}>{children}</ul>;
-
-MediaList.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export const MediaListItem = ({ children }) => (
-  <li {...oClasses(null, null, cClasses('item').className)}>{children}</li>
-);
-
-MediaListItem.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export const MediaListItemImage = ({ children }) => (
-  <div {...oClasses('img', null, cClasses('img').className)}>
-    <div>{children}</div>
-  </div>
-);
-
-MediaListItemImage.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export const MediaListCCLink = ({ children, url }) => (
-  <a className="c-figure-license__link" target="_blank" rel="noopener noreferrer license" href={url}>
-    {children}
-  </a>
-);
-
-MediaListCCLink.propTypes = {
-  children: PropTypes.node.isRequired,
-  url: PropTypes.string.isRequired,
-};
-
-MediaListCCLink.defaultProps = {
-  language: 'no',
-};
-
-export const MediaListItemBody = ({
-  children,
-  license: licenseAbbreviation,
-  messages,
-  title,
-  locale,
-  resourceUrl,
-  resourceType,
-}) => {
-  const license = getLicenseByAbbreviation(licenseAbbreviation, locale);
-  const containerProps = isCreativeCommonsLicense(license.rights)
-    ? {
-        ...oClasses('body', null, cClasses('body').className),
-        'xmlns:cc': 'https://creativecommons.org/ns#',
-        'xmlns:dct': 'http://purl.org/dc/terms/',
-        about: resourceUrl,
-      }
-    : {
-        ...oClasses('body', null, cClasses('body').className),
-      };
-
-  const metaResourceType = getResourceTypeNamespace(resourceType);
-
-  return (
-    <div {...containerProps}>
-      {metaResourceType && <span rel="dct:type" href={metaResourceType} style={{ display: 'none' }} />}
-      {title ? <h3 className="c-medialist__title">{title} </h3> : null}
-      <LicenseDescription
-        withDescription
-        locale={locale}
-        messages={messages}
-        licenseRights={license.rights}
-        highlightCC
-      />
-      <MediaListCCLink url={license.url}>{license.linkText}</MediaListCCLink>
-      {children}
-    </div>
-  );
-};
-
-MediaListItemBody.propTypes = {
-  children: PropTypes.node.isRequired,
-  license: PropTypes.string.isRequired,
-  locale: PropTypes.string.isRequired,
-  resourceUrl: PropTypes.string,
-  resourceType: PropTypes.oneOf(Object.keys(resourceTypes).map((key) => resourceTypes[key])),
-  messages: PropTypes.shape({
-    modelPremission: PropTypes.string,
-  }),
-  title: PropTypes.string,
-};
-
-MediaListItemBody.defaultProps = {
-  resourceUrl: '', // defaults to current page
-};
-
-export const MediaListItemActions = ({ children }) => <div {...cClasses('actions')}>{children}</div>;
-
-MediaListItemActions.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-const isLink = (text) => text.startsWith('http') || text.startsWith('https');
-
-export const HandleLink = ({ text, children }) => {
-  if (isLink(text)) {
-    return (
-      <a href={text} target="_blank" rel="noopener noreferrer">
-        {children}
-      </a>
-    );
-  }
-  return <span>{children}</span>;
-};
-
-HandleLink.propTypes = {
-  text: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-};
-
-const attributionTypes = [metaTypes.author, metaTypes.copyrightHolder, metaTypes.contributor];
-
-export const MediaListItemMeta = ({ items }) => {
-  const attributionItems = items.filter((item) => attributionTypes.some((type) => type === item.metaType));
-  const attributionMeta = attributionItems.map((item) => `${item.label}: ${item.description}`).join(', ');
-
-  return (
-    <ul {...cClasses('actions')} property="cc:attributionName" content={attributionMeta}>
-      {items.map((item) => (
-        <li key={uuid()} className="c-medialist__meta-item">
-          {item.label}: <HandleLink text={item.description}>{item.description}</HandleLink>
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-const mediaListItemShape = PropTypes.arrayOf(
-  PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    metaType: PropTypes.oneOf(Object.keys(metaTypes).map((key) => metaTypes[key])).isRequired,
-  }),
-);
-
-MediaListItemMeta.propTypes = {
-  items: mediaListItemShape,
-};
-
-MediaListItemMeta.defaultProps = {
-  items: [],
-};