@ndla/ui 3.3.9 → 3.3.11

package/src/MediaList/MediaList.tsx

@@ -0,0 +1,158 @@
+/*
+ * 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, { ReactNode } from 'react';
+import {
+  LicenseDescription,
+  getLicenseByAbbreviation,
+  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-',
+});
+
+interface MediaListProps {
+  children: ReactNode;
+}
+
+export const MediaList = ({ children }: MediaListProps) => <ul {...cClasses()}>{children}</ul>;
+
+interface MediaListItemProps {
+  children: ReactNode;
+}
+export const MediaListItem = ({ children }: MediaListItemProps) => (
+  <li {...oClasses(undefined, undefined, cClasses('item').className)}>{children}</li>
+);
+
+interface MediaListItemImageProps {
+  children: ReactNode;
+}
+export const MediaListItemImage = ({ children }: MediaListItemImageProps) => (
+  <div {...oClasses('img', undefined, cClasses('img').className)}>
+    <div>{children}</div>
+  </div>
+);
+
+interface MediaListCCLinkProps {
+  children: ReactNode;
+  url: string;
+}
+export const MediaListCCLink = ({ children, url }: MediaListCCLinkProps) => (
+  <a className="c-figure-license__link" target="_blank" rel="noopener noreferrer license" href={url}>
+    {children}
+  </a>
+);
+
+interface MediaListItemBodyProps {
+  children: ReactNode;
+  license: string;
+  locale: string;
+  resourceUrl?: string;
+  resourceType?: 'video' | 'image' | 'audio' | 'text' | 'h5p';
+  messages?: {
+    modelPremission?: string;
+  };
+  title?: string;
+}
+
+export const MediaListItemBody = ({
+  children,
+  license: licenseAbbreviation,
+  messages,
+  title,
+  locale,
+  resourceUrl = '', // defaults to current page
+  resourceType,
+}: MediaListItemBodyProps) => {
+  const license = getLicenseByAbbreviation(licenseAbbreviation, locale);
+  const containerProps = isCreativeCommonsLicense(license.rights)
+    ? {
+        ...oClasses('body', undefined, cClasses('body').className),
+        'xmlns:cc': 'https://creativecommons.org/ns#',
+        'xmlns:dct': 'http://purl.org/dc/terms/',
+        about: resourceUrl,
+      }
+    : {
+        ...oClasses('body', undefined, cClasses('body').className),
+      };
+
+  const metaResourceType = getResourceTypeNamespace(resourceType);
+
+  return (
+    <div {...containerProps}>
+      {/* @ts-ignore */}
+      {metaResourceType && <span rel="dct:type" href={metaResourceType} style={{ display: 'none' }} />}
+      {title ? <h3 className="c-medialist__title">{title} </h3> : null}
+      <LicenseDescription locale={locale} messages={messages} licenseRights={license.rights} highlightCC />
+      <MediaListCCLink url={license.url}>{license.linkText}</MediaListCCLink>
+      {children}
+    </div>
+  );
+};
+
+interface MediaListItemActionsProps {
+  children: ReactNode;
+}
+export const MediaListItemActions = ({ children }: MediaListItemActionsProps) => (
+  <div {...cClasses('actions')}>{children}</div>
+);
+
+const isLink = (text: string) => text.startsWith('http') || text.startsWith('https');
+
+interface HandleLinkProps {
+  text: string;
+  children: ReactNode;
+}
+
+export const HandleLink = ({ text, children }: HandleLinkProps) => {
+  if (isLink(text)) {
+    return (
+      <a href={text} target="_blank" rel="noopener noreferrer">
+        {children}
+      </a>
+    );
+  }
+  return <span>{children}</span>;
+};
+
+const attributionTypes = [metaTypes.author, metaTypes.copyrightHolder, metaTypes.contributor];
+
+interface MediaListItemMetaProps {
+  items?: {
+    label: string;
+    description: string;
+    metaType: string;
+  }[];
+}
+
+export const MediaListItemMeta = ({ items = [] }: MediaListItemMetaProps) => {
+  const attributionItems = items.filter((item) => attributionTypes.some((type) => type === item.metaType));
+  const attributionMeta = attributionItems.map((item) => `${item.label}: ${item.description}`).join(', ');
+
+  return (
+    //@ts-ignore
+    <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>
+  );
+};

package/src/MessageBox/MessageBox.tsx

@@ -1,63 +1,92 @@
-import React from 'react';
+/**
+ * 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, { useState } from 'react';
 import styled from '@emotion/styled';
 import Sticky from 'react-sticky-el';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
-// @ts-ignore
-import Button from '@ndla/button';
-import { Cross } from '@ndla/icons/action';
-import { InformationOutline } from '@ndla/icons/common';
+import { InformationOutline, HumanMaleBoard } from '@ndla/icons/common';
 import { WithTranslation, withTranslation } from 'react-i18next';
+import { CloseButton } from '../CloseButton';
 
+export enum MessageBoxType {
+  ghost = 'ghost',
+  fullpage = 'fullpage',
+  medium = 'medium',
+}
 type WrapperProps = {
-  boxType?: 'info';
+  boxType?: MessageBoxType;
 };
 
-const colorsByType = (type: WrapperProps['boxType']) => {
-  const colors = {
-    color: '#551700',
-    backgroundColor: '#FEEFB3',
-  };
+const StyleByType = (type: WrapperProps['boxType']) => {
+  const styles = {
+    margin: '1px',
+    color: '#444444',
+    backgroundColor: '#f9f4c8',
+    border: 'none',
+    display: 'flex',
+    width: 'auto',
+    position: 'relative',
+    transform: 'auto',
+    left: 'auto',
+  }; //Different CSS properties for different types of message-boxes
   switch (type) {
-    case 'info':
-    default:
+    case 'fullpage':
+      styles.margin = '0 auto';
+      styles.display = 'none';
+      styles.width = '100vw';
+      styles.position = 'relative';
+      styles.left = '50%';
+      styles.transform = 'translateX(-50%)';
+      break;
+    case 'medium':
+      styles.margin = '0px';
+      break;
+    case 'ghost':
+      styles.backgroundColor = 'transparent';
+      styles.border = '1px solid #D1D6DB';
+      styles.color = '#444444';
+
       break;
   }
-  return colors;
+  return styles;
 };
 
 const Wrapper = styled.div<WrapperProps>`
-  background: ${(props) => colorsByType(props.boxType).backgroundColor};
-  color: ${(props) => colorsByType(props.boxType).color};
+  background: ${(props) => StyleByType(props.boxType).backgroundColor};
+  color: ${(props) => StyleByType(props.boxType).color};
   font-size: 18px;
   line-height: 32px;
-  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
+  font-family: ${fonts.sans};
   display: flex;
   padding: ${spacing.small};
-  position: relative;
+  position: ${(props) => StyleByType(props.boxType).position};
+  border: ${(props) => StyleByType(props.boxType).border};
+  border-radius: 5px;
+  transform: ${(props) => StyleByType(props.boxType).transform};
+  left: ${(props) => StyleByType(props.boxType).left};
+  z-index: 10;
+  width: ${(props) => StyleByType(props.boxType).width};
 `;
 
-const Label = styled.label`
-  font-weight: ${fonts.weight.bold};
-  display: inline-block;
-  margin-right: ${spacing.small};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    font-size: 18px;
-    font-weight: ${fonts.weight.semibold};
-  }
-`;
-
-const InfoWrapper = styled.div`
-  margin: 0 auto;
-  padding: 0 100px;
+const InfoWrapper = styled.div<WrapperProps>`
+  margin: ${(props) => StyleByType(props.boxType).margin};
+  padding: 10px;
   display: flex;
   ${mq.range({ until: breakpoints.tabletWide })} {
     padding: 0 90px 0 0;
   }
   ${mq.range({ until: breakpoints.mobileWide })} {
-    padding: 0 50px 0 0;
+    padding: 0 5px 0 0;
+    font-size: 16px;
   }
 `;
-const TextWrapper = styled.div`
+const TextWrapper = styled.div<WrapperProps>`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -67,88 +96,80 @@ const TextWrapper = styled.div`
   }
 `;
 
-const IconWrapper = styled.div`
+const IconWrapper = styled.div<WrapperProps>`
   padding-right: ${spacing.small};
-  display: flex;
+  display: ${(props) => StyleByType(props.boxType).display};
   align-items: flex-start;
   ${mq.range({ from: breakpoints.tabletWide })} {
     padding-top: 4px;
   }
 `;
 
-const CloseButtonWrapper = styled.div`
-  position: absolute;
-  top: 13px;
-  right: ${spacing.small};
-  display: flex;
-  justify-content: flex-end;
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    top: 16px;
-  }
-`;
-
-const CloseButton = styled(Button)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: ${fonts.weight.semibold};
-  font-size: 16px;
-  color: ${(props) => colorsByType(props.boxType).color};
-  &:hover {
-    color: ${(props) => colorsByType(props.boxType).color};
-  }
+const LinkWrapper = styled.div`
+  display: block;
+  width: 100%;
+  background-color: #f9f4c8;
+  padding-bottom: 20px;
+  margin-top: -2px;
+  padding-left: 58px;
+  border-radius: 0px 0px 5px 5px;
   ${mq.range({ until: breakpoints.mobileWide })} {
-    flex-direction: column-reverse;
+    padding-left: 45px;
   }
 `;
-
-const CloseButtonText = styled.span`
-  margin-right: ${spacing.small};
-  line-height: 1;
+const Link = styled.a`
+  color: #20588f;
+  font-size: 16px;
+  padding-bottom: 1px;
+  margin: 0px 40px 1px 2px;
+  font-family: ${fonts.sans};
   ${mq.range({ until: breakpoints.mobileWide })} {
-    margin-right: 0;
-    ${fonts.sizes('14px', '18px')};
-    font-weight: ${fonts.weight.normal};
+    margin: 0px 15px 1px 5px;
+    box-shadow: none;
   }
 `;
 
+type LinkProps = {
+  href?: string;
+  text?: string;
+};
 type Props = {
   type?: WrapperProps['boxType'];
-  heading?: string;
   sticky?: boolean;
-  onClose?: () => void;
-  children: React.ReactNode;
+  onClose?: boolean;
+  children?: string;
+  links?: LinkProps[];
 };
 
-export const MessageBox = ({
-  heading,
-  type = 'info',
-  sticky = true,
-  onClose,
-  children,
-  t,
-}: Props & WithTranslation) => (
-  <Sticky disabled={!sticky} stickyStyle={{ zIndex: 9999 }}>
-    <Wrapper boxType={type}>
-      <InfoWrapper>
-        <IconWrapper>
-          <InformationOutline style={{ width: '24px', height: '24px' }} />
-        </IconWrapper>
-        <TextWrapper>
-          {heading && <Label>{heading}</Label>}
-          {children}
-        </TextWrapper>
-      </InfoWrapper>
-      {onClose && (
-        <CloseButtonWrapper>
-          <CloseButton link onClick={onClose}>
-            <CloseButtonText>{t('close')}</CloseButtonText>
-            <Cross style={{ width: '24px', height: '24px' }} />
-          </CloseButton>
-        </CloseButtonWrapper>
+export const MessageBox = ({ type, sticky = false, onClose, children, links, t }: Props & WithTranslation) => {
+  const [hideMessageBox, setHideMessageBox] = useState(false);
+  const onCloseMessageBox = () => {
+    setHideMessageBox(true);
+  };
+  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}>
+            <Icon style={{ width: '24px', height: '24px' }} />
+          </IconWrapper>
+          <TextWrapper>{children}</TextWrapper>
+        </InfoWrapper>
+        {onClose && <CloseButton onClick={onCloseMessageBox} color="#444444" />}
+      </Wrapper>
+
+      {links && (
+        //loops through the links passed in as properties if there are any and creates a working link for each of them
+        <LinkWrapper style={{ display: hideMessageBox ? 'none' : 'flex' }}>
+          {links.map((x) => (
+            <Link href={x.href}>{x.text}</Link>
+          ))}
+        </LinkWrapper>
       )}
-    </Wrapper>
-  </Sticky>
-);
+    </Sticky>
+  );
+};
 
 export default withTranslation()(MessageBox);

package/src/MessageBox/MessageBoxTag.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 { useTranslation } from 'react-i18next';
+
+import styled from '@emotion/styled';
+
+const MiniMesssage = styled.div`
+  background-color: #f9f4c8;
+  text-align: center;
+  display: inline-block;
+  padding: 5px;
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 14px;
+  margin-left: 10px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+`;
+
+type Props = {
+  tagMessage: string;
+};
+export const MessageBoxTag = ({ tagMessage }: Props) => {
+  const { t } = useTranslation();
+  return <MiniMesssage>{t(tagMessage)}</MiniMesssage>;
+};
+
+export default MessageBoxTag;

package/src/MessageBox/index.ts

@@ -7,5 +7,7 @@
  */
 
 import MessageBox from './MessageBox';
+import MessageBoxTag from './MessageBoxTag';
+import { MessageBoxType } from './MessageBox';
 
-export { MessageBox };
+export { MessageBox, MessageBoxTag, MessageBoxType };

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+// @ts-ignore
 import { SwipeEventData, useSwipeable } from 'react-swipeable';
 import BEMHelper from 'react-bem-helper';
 import SafeLink from '@ndla/safelink';

package/src/Programme/Programme.tsx

@@ -1,11 +1,12 @@
 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,9 +64,11 @@ const SubjectsWrapper = styled.div`
 type Props = GradesProps & {
   heading?: string;
   image?: string;
+  messageBoxText?: string;
 };
 
-export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade }: Props) => {
+export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade, messageBoxText }: Props) => {
+  const { t } = useTranslation();
   return (
     <StyledWrapper>
       <StyledBackground image={image} />
@@ -74,6 +77,7 @@ export const Programme = ({ heading, image, grades, selectedGrade, onChangeGrade
           <LayoutItem layout="extend">
             <StyledContentWrapper>
               <NavigationHeading>{heading}</NavigationHeading>
+              {messageBoxText && <MessageBox>{t(messageBoxText)}</MessageBox>}
               <SubjectsWrapper>
                 <ProgrammeSubjects grades={grades} selectedGrade={selectedGrade} onChangeGrade={onChangeGrade} />
               </SubjectsWrapper>

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