@ndla/ui 3.3.6 → 3.3.11

package/src/Article/ArticleNotions.tsx

@@ -12,8 +12,8 @@ import { useTranslation } from 'react-i18next';
 
 // @ts-ignore
 import Modal, { ModalHeader, ModalCloseButton, ModalBody } from '@ndla/modal';
-import { mq, breakpoints, fonts, colors } from '@ndla/core';
-import { Explanation, NotionFlip } from '@ndla/icons/common';
+import { mq, breakpoints } from '@ndla/core';
+import { Explanation } from '@ndla/icons/common';
 import { Locale } from '../types';
 import { Notion } from '../Notion';
 import { NotionProps } from '../Notion/Notion';
@@ -25,6 +25,7 @@ const ArticleNotionsContainer = styled.div`
     margin-bottom: 0;
   }
 `;
+/* Stored for later 
 
 const NotionsTrigger = styled.div`
   padding: 0 16px;
@@ -33,7 +34,7 @@ const NotionsTrigger = styled.div`
   background-color: ${colors.brand.greyLighter};
   border-radius: 4px;
   cursor: pointer;
-
+ 
   ${mq.range({ from: breakpoints.tablet })} {
     position: fixed;
     border: none;
@@ -81,7 +82,7 @@ const NotionsTrigger = styled.div`
     }
   }
 `;
-
+*/
 const ModalHeadingContainer = styled.div`
   display: flex;
   align-items: center;
@@ -176,17 +177,19 @@ export const ArticleNotions = ({
   buttonOffsetRight,
 }: ArticleNotionsProps) => {
   const { t } = useTranslation();
-  const leftOffset = `${buttonOffsetRight - 32}px`;
+  //const leftOffset = `${buttonOffsetRight - 32}px`;
   return (
     <ArticleNotionsContainer>
       <Modal
-        activateButton={
+        /* Stored for later
+    
+    activateButton={
           <NotionsTrigger role="button" aria-label={t('article.notionsPrompt')} style={{ left: leftOffset }}>
             <NotionFlip />
             <Explanation />
             <span>{t('article.notionsPrompt')}</span>
           </NotionsTrigger>
-        }
+        } */
         size="large"
         backgroundColor="white">
         {(onClose: () => void) => (

package/src/AudioPlayer/Controls.tsx

@@ -415,9 +415,9 @@ const Controls = ({ src, title }: Props) => {
         <PlayButton type="button" onClick={togglePlay} title="play" aria-label="play">
           <span aria-hidden>
             {playing ? (
-              <Pause role="img" aria-label="pause" title="play" />
+              <Pause role="img" aria-label="Pause" title="Pause" />
             ) : (
-              <Play role="img" aria-label="play" title="play" />
+              <Play role="img" aria-label="Play" title="Play" />
             )}
           </span>
         </PlayButton>

package/src/Breadcrumb/Breadcrumb.tsx

@@ -43,7 +43,7 @@ const Breadcrumb: React.FunctionComponent<Props & WithTranslation> = ({ children
           isCurrent={i === items.length - 1}
           to={item.to}
           name={item.name}>
-          {i === 0 ? <Home className="c-icon--20" /> : item.name}
+          {i === 0 ? <Home className="c-icon--20" title={item.name} /> : item.name}
         </BreadcrumbItem>
       ))}
     </ol>

package/src/Breadcrumblist/Breadcrumblist.tsx

@@ -9,7 +9,6 @@
 import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { mq, breakpoints, colors } from '@ndla/core';
-
 import {
   School as SchoolIcon,
   MenuBook as MenuBookIcon,
@@ -20,6 +19,7 @@ import {
 } from '@ndla/icons/action';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
+import MessageBoxTag from '../MessageBox/MessageBoxTag';
 
 type WrapperProps = {
   startOffset?: number;
@@ -51,7 +51,6 @@ const Wrapper = styled.div<WrapperProps>`
     ${(props) =>
       props.startOffset &&
       `
-        position: absolute;
         top: calc(${props.startOffset}px + 85px); 
     `}
   }
@@ -87,7 +86,7 @@ const Heading = styled.div<InvertItProps>`
   font-size: 12px;
   line-height: 15px;
   text-transform: uppercase;
-  padding: 0 0 18px 10px;
+  padding: 0 0 10px 10px;
   ${(props) =>
     props.invertedStyle &&
     `
@@ -214,6 +213,7 @@ type BreadCrumbProps = {
   leftAlign?: boolean;
   hideOnNarrow?: boolean;
   onNav?: (e: React.MouseEvent<HTMLElement>, item: BreadcrumbItemProps) => void;
+  messageBoxTagMessage?: string;
 };
 
 const Breadcrumblist = ({
@@ -225,6 +225,7 @@ const Breadcrumblist = ({
   leftAlign,
   hideOnNarrow,
   onNav,
+  messageBoxTagMessage,
 }: BreadCrumbProps) => {
   const { t } = useTranslation();
   const [wrapperOffset, setWrapperOffset] = useState(startOffset);
@@ -274,6 +275,7 @@ const Breadcrumblist = ({
         {items.length > 0 && (
           <>
             <Heading invertedStyle={invertedStyle}>{t('breadcrumb.youAreHere')}</Heading>
+            {messageBoxTagMessage && <MessageBoxTag tagMessage={messageBoxTagMessage} />}
             <List data-testid="breadcrumb-list">
               {items.map((item: BreadcrumbItemProps) => {
                 const { id, label, url, typename, icon, isCurrent = false } = item;

package/src/CloseButton/CloseButton.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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 styled from '@emotion/styled';
+import { Cross } from '@ndla/icons/action';
+import { useTranslation } from 'react-i18next';
+const CloseButtonWrapper = styled.div`
+  position: relative;
+  top: 1px;
+  right: 1px;
+`;
+
+const CloseBut = styled.button`
+  background-color: transparent;
+  border: none;
+  display: flex;
+`;
+
+type Props = {
+  onClick: () => void;
+  color: string;
+};
+
+export const CloseButton = ({ onClick, color }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <CloseButtonWrapper aria-label={t('lukk')}>
+      <CloseBut onClick={onClick}>
+        <Cross style={{ width: '24px', height: '24px', color: color }} />
+      </CloseBut>
+    </CloseButtonWrapper>
+  );
+};
+
+export default CloseButton;

package/src/CloseButton/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2019-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 CloseButton from './CloseButton';
+
+export { CloseButton };

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -26,11 +26,12 @@ const classes = new BEMHelper({
 interface Props {
   size: 'xx-small' | 'x-small' | 'small' | 'large';
   type: string;
+  title?: string;
   background?: boolean;
   border?: boolean;
 }
 
-export const ContentTypeBadge = ({ type, background, size, border }: Props) => {
+export const ContentTypeBadge = ({ type, background, title, size = 'small', border = true }: Props) => {
   const modifiers = [type, size];
 
   if (background) {
@@ -43,28 +44,28 @@ export const ContentTypeBadge = ({ type, background, size, border }: Props) => {
   let icon = null;
   switch (type) {
     case contentTypes.SUBJECT_MATERIAL:
-      icon = <SubjectMaterial />;
+      icon = <SubjectMaterial title={title} />;
       break;
     case contentTypes.TASKS_AND_ACTIVITIES:
-      icon = <TasksAndActivities />;
+      icon = <TasksAndActivities title={title} />;
       break;
     case contentTypes.ASSESSMENT_RESOURCES:
-      icon = <AssessmentResource />;
+      icon = <AssessmentResource title={title} />;
       break;
     case contentTypes.SUBJECT:
-      icon = <MenuBook />;
+      icon = <MenuBook title={title} />;
       break;
     case contentTypes.EXTERNAL_LEARNING_RESOURCES:
-      icon = <ExternalLearningResource />;
+      icon = <ExternalLearningResource title={title} />;
       break;
     case contentTypes.SOURCE_MATERIAL:
-      icon = <SharedResource />;
+      icon = <SharedResource title={title} />;
       break;
     case contentTypes.LEARNING_PATH:
-      icon = <LearningPath />;
+      icon = <LearningPath title={title} />;
       break;
     case contentTypes.TOPIC:
-      icon = <Subject />;
+      icon = <Subject title={title} />;
       break;
     default:
       break;
@@ -75,6 +76,7 @@ export const ContentTypeBadge = ({ type, background, size, border }: Props) => {
 ContentTypeBadge.propTypes = {
   size: PropTypes.oneOf(['xx-small', 'x-small', 'small', 'large']),
   type: ContentTypeShape,
+  title: PropTypes.string,
   background: PropTypes.bool,
   border: PropTypes.bool,
 };

package/src/Frontpage/FrontpageProgramMenu.tsx

@@ -120,6 +120,7 @@ const FrontpageProgramMenu = ({ programItems, subjectCategories, showBetaCursor
         <Button onClick={() => toggleSubjects(true)} lighter={!showSubjects} size="medium" borderShape="rounded">
           <StyledMenuItem>{t('frontpageMenu.allsubjects')}</StyledMenuItem>
         </Button>
+
         {showBetaCursor && (
           <CursorPlaceholder>
             <CursorWrapper>

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>
+  );
+};