@ndla/ui 3.3.9 → 3.3.14

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

@@ -121,8 +121,9 @@ interface FigureCaptionProps {
 
 const Figure = ({ children, type = 'full', resizeIframe, ...rest }: Props) => {
   const typeClass = type === 'full-column' ? 'c-figure--full-column' : `u-float-${type}`;
+  const right = ['small-right', 'xsmall-right'].includes(type);
   return (
-    <figure data-sizetype={type} {...classes('', { resize: !!resizeIframe }, typeClass)} {...rest}>
+    <figure data-sizetype={type} {...classes('', { resize: !!resizeIframe, right }, typeClass)} {...rest}>
       {isFunction(children) ? children({ typeClass }) : children}
     </figure>
   );

package/src/Figure/component.figure.scss

@@ -17,6 +17,25 @@
 **/
 
 /* 1. */
+
+@keyframes rightFloatTransition {
+  0% {
+    left: 75%;
+  }
+  100% {
+    left: -16.6%;
+  }
+}
+
+@keyframes smallRightFloatTransition {
+  0% {
+    left: 78.5%;
+  }
+  100% {
+    left: -16.6%;
+  }
+}
+
 .c-figure {
   img {
     width: 100%;
@@ -51,6 +70,21 @@
     padding-bottom: $spacing--large;
     margin-bottom: 0;
   }
+  &--right {
+    &.expanded {
+      @include mq($from: desktop) {
+        animation-name: rightFloatTransition;
+        animation-duration: 0.4s;
+      }
+
+      &[data-sizetype='xsmall-right'] {
+        @include mq($from: desktop) {
+          animation-name: smallRightFloatTransition;
+          animation-duration: 0.4s;
+        }
+      }
+    }
+  }
   &.expanded {
     .c-figure__caption--hidden-caption {
       display: block;
@@ -74,7 +108,7 @@
   background-color: $white;
   padding: $spacing--small 0;
   display: block;
-  border-bottom: 1px solid #D1D6DB;
+  border-bottom: 1px solid #d1d6db;
 }
 
 .c-figure__caption--hidden-caption {
@@ -119,7 +153,7 @@
     margin-bottom: $spacing--small;
   }
   p {
-    margin:0;
+    margin: 0;
   }
 }
 
@@ -179,7 +213,7 @@
   padding: $spacing--small;
   transition: all 0.3s ease-out;
   background: rgba($white, 0.2);
-  border:0;
+  border: 0;
 
   .expanded-icon {
     display: none;

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -73,7 +73,7 @@ const StyledLetterSpacing = styled.span`
 type subjectProps = {
   name: string;
   url?: string;
-  path: string;
+  path?: string;
   id?: string;
 };
 type categoryProps = {
@@ -160,7 +160,7 @@ const renderList = (
                           onNavigate();
                         }
                       }}
-                      to={subject.url || subject.path}>
+                      to={subject.url || subject.path || ''}>
                       {subject.name}
                     </SafeLink>
                     <StyledSpacingElement />

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/Frontpage/FrontpageSearch.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { isIE, browserVersion, isMobileSafari } from 'react-device-detect';
 import styled from '@emotion/styled';
-import { History } from 'history';
 import { colors, spacing, mq, breakpoints, animations } from '@ndla/core';
 // @ts-ignore
 import { noScroll } from '@ndla/util';
@@ -54,11 +53,10 @@ type Props = {
   };
   onSearch: (event: React.FormEvent) => void;
   allResultUrl: string;
-  searchResult: Array<ContentTypeResultType>;
+  searchResult?: Array<ContentTypeResultType>;
   loading: boolean;
-  history: History;
-  suggestion: string;
-  suggestionUrl: string;
+  suggestion?: string;
+  suggestionUrl?: string;
 };
 
 const FrontpageSearch: React.FunctionComponent<Props> = ({
@@ -73,7 +71,6 @@ const FrontpageSearch: React.FunctionComponent<Props> = ({
   allResultUrl,
   searchResult,
   loading,
-  history,
   suggestion,
   suggestionUrl,
 }) => {
@@ -190,7 +187,6 @@ const FrontpageSearch: React.FunctionComponent<Props> = ({
               allResultUrl={allResultUrl}
               resourceToLinkProps={resourceToLinkProps}
               infoText={t('welcomePage.searchDisclaimer')}
-              history={history}
               suggestion={suggestion}
               suggestionUrl={suggestionUrl}
             />

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