@ndla/ui 8.2.5 → 9.0.0

package/lib/index.d.ts

@@ -28,7 +28,7 @@ export { default as Image, ImageLink } from './Image';
 export { makeSrcQueryString } from './Image';
 export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero, } from './Hero';
 export { Footer, EditorName, FooterText, FooterAuth } from './Footer';
-export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton } from './Figure';
+export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton } from './Figure';
 export { LanguageSelector } from './LanguageSelector';
 export { LearningPathWrapper, LearningPathContent, LearningPathMenu, LearningPathSticky, LearningPathInformation, LearningPathStickySibling, LearningPathStickyPlaceholder, LearningPathLastStepNavigation, LearningPathMobileStepInfo, LearningPathMobileHeader, } from './LearningPaths';
 export { Translation, TranslationLine, TranslationBox } from './Translation';
@@ -43,7 +43,6 @@ export { default as CreatedBy } from './CreatedBy';
 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';
 export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Navigation';
 export { default as Programme } from './Programme';

package/lib/index.js

@@ -66,6 +66,7 @@ var _exportNames = {
   FigureCaption: true,
   FigureLicenseDialog: true,
   FigureExpandButton: true,
+  FigureOpenDialogButton: true,
   LanguageSelector: true,
   LearningPathWrapper: true,
   LearningPathContent: true,
@@ -93,7 +94,6 @@ var _exportNames = {
   MessageBoxTag: true,
   MessageBoxType: true,
   ResourceBox: true,
-  CloseButton: true,
   AudioPlayer: true,
   initAudioPlayers: true,
   NavigationHeading: true,
@@ -535,6 +535,12 @@ Object.defineProperty(exports, "FigureExpandButton", {
     return _Figure.FigureExpandButton;
   }
 });
+Object.defineProperty(exports, "FigureOpenDialogButton", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.FigureOpenDialogButton;
+  }
+});
 Object.defineProperty(exports, "LanguageSelector", {
   enumerable: true,
   get: function get() {
@@ -697,12 +703,6 @@ Object.defineProperty(exports, "ResourceBox", {
     return _ResourceBox.ResourceBox;
   }
 });
-Object.defineProperty(exports, "CloseButton", {
-  enumerable: true,
-  get: function get() {
-    return _CloseButton["default"];
-  }
-});
 Object.defineProperty(exports, "AudioPlayer", {
   enumerable: true,
   get: function get() {
@@ -1267,8 +1267,6 @@ var _MessageBox = require("./MessageBox");
 
 var _ResourceBox = require("./ResourceBox");
 
-var _CloseButton = _interopRequireDefault(require("./CloseButton"));
-
 var _AudioPlayer = _interopRequireWildcard(require("./AudioPlayer"));
 
 var _Navigation = require("./Navigation");

package/lib/locale/messages-en.js

@@ -380,7 +380,7 @@ var messages = _objectSpread(_objectSpread({
       images: 'Images',
       audio: 'Audio',
       video: 'Video',
-      h5p: 'H5P',
+      h5p: 'h5p',
       files: 'Files',
       embedlink: 'Embedded link',
       other: 'Other content',

package/lib/locale/messages-nb.js

@@ -395,7 +395,7 @@ var messages = _objectSpread(_objectSpread({
       images: 'Bilder',
       audio: 'Lyd',
       video: 'Video',
-      h5p: 'H5P',
+      h5p: 'h5p',
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       concept: 'Forklaringer',

package/lib/locale/messages-nn.js

@@ -395,7 +395,7 @@ var messages = _objectSpread(_objectSpread({
       images: 'Bilete',
       audio: 'Lyd',
       video: 'Video',
-      h5p: 'H5P',
+      h5p: 'h5p',
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       other: 'Anna innhald',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "8.2.5",
+  "version": "9.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,16 +31,16 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.1.5",
-    "@ndla/carousel": "^1.2.5",
+    "@ndla/button": "^2.2.0",
+    "@ndla/carousel": "^1.2.6",
     "@ndla/core": "^2.1.1",
     "@ndla/hooks": "^1.1.3",
-    "@ndla/icons": "^1.6.1",
-    "@ndla/licenses": "^4.0.5",
-    "@ndla/modal": "^1.2.5",
-    "@ndla/safelink": "^1.1.6",
+    "@ndla/icons": "^1.7.0",
+    "@ndla/licenses": "^4.1.0",
+    "@ndla/modal": "^1.2.6",
+    "@ndla/safelink": "^1.1.7",
     "@ndla/switch": "^0.1.5",
-    "@ndla/tabs": "^1.1.3",
+    "@ndla/tabs": "^1.1.4",
     "@ndla/tooltip": "^0.3.5",
     "@ndla/util": "^2.0.5",
     "@reach/menu-button": "^0.16.2",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9277be43c1524139f9c1fb6282ed1525591e41c3"
+  "gitHead": "76c237a1e2d807c08054f066bbf5b274010c0e02"
 }

package/src/Article/ArticleNotions.tsx

@@ -159,9 +159,10 @@ type ArticleNotionsProps = {
   notions: ConceptNotionType[];
   relatedContent?: NotionRelatedContent[];
   buttonOffsetRight: number;
+  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';
 };
 
-export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight }: ArticleNotionsProps) => {
+export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight, type }: ArticleNotionsProps) => {
   const { t } = useTranslation();
   const leftOffset = `${buttonOffsetRight - 32}px`;
   return (
@@ -188,7 +189,7 @@ export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight
               </ModalHeadingContainer>
               <NotionsContainer>
                 {notions.map((notion) => (
-                  <ConceptNotion key={notion.id} concept={notion} />
+                  <ConceptNotion key={notion.id} concept={notion} type={type} />
                 ))}
               </NotionsContainer>
               {relatedContent.length > 0 && (

package/src/Figure/Figure.tsx

@@ -35,57 +35,64 @@ export const FigureCaption = ({
   link,
   hideFigcaption,
   hasLinkedVideo,
+  hideIconsAndAuthors,
 }: FigureCaptionProps) => {
   const { t } = useTranslation();
+
   return (
-    <figcaption {...classes('caption', hideFigcaption ? 'hidden-caption' : undefined)}>
-      {caption ? <div {...classes('info')}>{parseMarkdown(caption)}</div> : null}
-      <footer {...classes('byline')}>
-        <div {...classes('byline-licenselist')}>
-          <LicenseByline licenseRights={licenseRights} locale={locale} marginRight>
-            <div {...classes('byline-author-buttons')}>
-              <span {...classes('byline-authors')}>{authors?.map((author) => author.name).join(', ')}</span>
-              <div>
-                <Button
-                  borderShape="rounded"
-                  outline
-                  size="small"
-                  type="button"
-                  data-dialog-trigger-id={id}
-                  data-dialog-source-id={figureId}>
-                  {reuseLabel}
-                </Button>
-                {hasLinkedVideo && (
+    <>
+      <figcaption {...classes('caption', hideFigcaption ? 'hidden-caption' : undefined)}>
+        {caption ? <div {...classes('info')}>{parseMarkdown(caption)}</div> : null}
+        <footer {...classes('byline')}>
+          <div {...classes('byline-licenselist')}>
+            <LicenseByline licenseRights={hideIconsAndAuthors ? [] : licenseRights} locale={locale} marginRight>
+              <div {...classes('byline-author-buttons', hideIconsAndAuthors ? 'no-siblings' : undefined)}>
+                {!hideIconsAndAuthors && (
+                  <span {...classes('byline-authors')}>{authors?.map((author) => author.name).join(', ')}</span>
+                )}
+                <div>
                   <Button
                     borderShape="rounded"
                     outline
                     size="small"
                     type="button"
-                    {...classes('toggleAlternativeVideo')}>
-                    <span className="original">{t('figure.button.alternative')}</span>
-                    <span className="alternative hidden">{t('figure.button.original')}</span>
+                    data-dialog-trigger-id={id}
+                    data-dialog-source-id={figureId}>
+                    {reuseLabel}
                   </Button>
-                )}
+                  {hasLinkedVideo && (
+                    <Button
+                      borderShape="rounded"
+                      outline
+                      size="small"
+                      type="button"
+                      {...classes('toggleAlternativeVideo')}>
+                      <span className="original">{t('figure.button.alternative')}</span>
+                      <span className="alternative hidden">{t('figure.button.original')}</span>
+                    </Button>
+                  )}
+                </div>
+                {children}
+              </div>
+            </LicenseByline>
+
+            {link && (
+              <div {...classes('link-wrapper')}>
+                <SafeLink
+                  to={link.url}
+                  {...classes('link')}
+                  target={link.external ? '_blank' : undefined}
+                  rel={link.external ? 'noopener noreferrer' : undefined}>
+                  <span {...classes('link-text')}>{link.text}</span>
+                  <LinkIcon />
+                </SafeLink>
+                {link.description && <p {...classes('link-description')}>{link.description}</p>}
               </div>
-              {children}
-            </div>
-          </LicenseByline>
-          {link && (
-            <div {...classes('link-wrapper')}>
-              <SafeLink
-                to={link.url}
-                {...classes('link')}
-                target={link.external ? '_blank' : undefined}
-                rel={link.external ? 'noopener noreferrer' : undefined}>
-                <span {...classes('link-text')}>{link.text}</span>
-                <LinkIcon />
-              </SafeLink>
-              {link.description && <p {...classes('link-description')}>{link.description}</p>}
-            </div>
-          )}
-        </div>
-      </footer>
-    </figcaption>
+            )}
+          </div>
+        </footer>
+      </figcaption>
+    </>
   );
 };
 
@@ -116,6 +123,7 @@ interface FigureCaptionProps {
   locale?: string;
   hideFigcaption?: boolean;
   hasLinkedVideo?: boolean;
+  hideIconsAndAuthors?: boolean;
 }
 
 const Figure = ({ children, type = 'full', resizeIframe, ...rest }: Props) => {

package/src/Figure/FigureExpandButton.tsx

@@ -15,13 +15,13 @@ export function FigureExpandButton({ messages, typeClass }: Props) {
     <button
       className="c-figure__fullscreen-btn"
       type="button"
-      data-figure-button
-      data-classtype={typeClass}
       data-aria={messages.zoomImageButtonLabel}
       data-ariaexpanded={messages.zoomOutImageButtonLabel}
-      aria-label={messages.zoomImageButtonLabel}>
-      <ArrowCollapse className="expanded-icon" />
+      aria-label={messages.zoomImageButtonLabel}
+      data-figure-button
+      data-classtype={typeClass}>
       <ExpandTwoArrows className="contracted-icon" />
+      <ArrowCollapse className="expanded-icon" />
     </button>
   );
 }

package/src/Figure/FigureOpenDialogButton.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2012-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 { Play } from '@ndla/icons/common';
+import { ExpandTwoArrows } from '@ndla/icons/action';
+import { CursorClick } from '@ndla/icons/action';
+
+interface Props {
+  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';
+  messages: {
+    zoomImageButtonLabel: string;
+    zoomOutImageButtonLabel: string;
+  };
+}
+
+export function FigureOpenDialogButton({ messages, type }: Props) {
+  return (
+    <button
+      className="c-figure__fullscreen-btn"
+      type="button"
+      data-aria={messages.zoomImageButtonLabel}
+      data-ariaexpanded={messages.zoomOutImageButtonLabel}
+      aria-label={messages.zoomImageButtonLabel}>
+      {type === 'image' && <ExpandTwoArrows className="contracted-icon" />}
+      {type === 'h5p' && <CursorClick style={{ width: '24px', height: '24px' }} />}
+      {type === 'iframe' && <CursorClick style={{ width: '24px', height: '24px' }} />}
+      {type === 'external' && <CursorClick style={{ width: '24px', height: '24px' }} />}
+      {type === 'video' && <Play style={{ width: '24px', height: '24px' }} />}
+    </button>
+  );
+}

package/src/Figure/component.figure.scss

@@ -136,6 +136,10 @@
   justify-content: space-between;
   color: $primary-color;
 }
+.c-figure__byline-author-buttons--no-siblings {
+  //styling for button in licensewrapper when there are no other elements in it. Places the button to the right
+  justify-content: flex-end;
+}
 .c-figure__byline-authors {
   @include font-size(14px, 20px);
   margin-right: $spacing--small;

package/src/Figure/index.ts

@@ -11,5 +11,6 @@ export { Figure, FigureCaption };
 export { FigureLicenseDialog } from './FigureLicenseDialog';
 export { FigureExpandButton } from './FigureExpandButton';
 export { FigureBylineExpandButton } from './FigureBylineExpandButton';
+export { FigureOpenDialogButton } from './FigureOpenDialogButton';
 
 export type { FigureType } from './Figure';

package/src/Image/Image.tsx

@@ -9,6 +9,7 @@
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import LazyLoadImage from './LazyLoadImage';
+
 export interface ImageCrop {
   startX: number;
   startY: number;
@@ -39,7 +40,6 @@ const getSrcSet = (src: string, crop: ImageCrop | undefined, focalPoint: ImageFo
 const StyledImageWrapper = styled.div`
   position: relative;
 `;
-
 interface Props {
   alt: string;
   src: string;

package/src/MessageBox/MessageBox.tsx

@@ -14,7 +14,7 @@ import { WithTranslation, withTranslation } from 'react-i18next';
 
 // @ts-ignore
 import { Remarkable } from 'remarkable';
-import { CloseButton } from '../CloseButton';
+import { CloseButton } from '@ndla/button';
 
 export enum MessageBoxType {
   ghost = 'ghost',

package/src/Notion/ConceptNotion.tsx

@@ -4,16 +4,45 @@
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree. *
  */
+import styled from '@emotion/styled';
 
 import React, { useEffect } from 'react';
 //@ts-ignore
 import { initArticleScripts } from '@ndla/article-scripts';
-import { Notion } from '.';
+import { useTranslation } from 'react-i18next';
+import { breakpoints, mq, spacing } from '@ndla/core';
+import Notion, { NotionDialogContent, NotionDialogText, NotionDialogLicenses } from '@ndla/notion';
+import { Notion as UINotion } from '.';
 import { NotionImage } from './NotionImage';
 import NotionVisualElement, { NotionVisualElementType } from './NotionVisualElement';
 import FigureNotion from './FigureNotion';
 import { Copyright } from '../types';
 
+const ContentWrapper = styled.div<{ adjustSizeToFitWiderPage?: boolean }>`
+  position: relative;
+  right: auto;
+  left: ${(props) => (props.adjustSizeToFitWiderPage ? '0%' : '-16.6666666667%')};
+  width: ${(props) => (props.adjustSizeToFitWiderPage ? '100%' : '133.3333333333%')};
+  padding-left: 24px;
+  padding-right: 24px;
+
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    width: 100%;
+    left: 0;
+  }
+`;
+
+const ImageWrapper = styled.div`
+  float: right;
+  padding-left: ${spacing.normal};
+  position: relative;
+
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    width: 100%;
+    padding-left: 0;
+  }
+`;
+
 export interface ConceptNotionType {
   id: number;
   copyright?: Partial<Copyright>;
@@ -21,62 +50,132 @@ export interface ConceptNotionType {
   text: string;
   subjectNames?: string[];
   visualElement?: NotionVisualElementType;
+  authors: string[];
+  source?: string;
   image?: {
     src: string;
     alt: string;
   };
 }
 interface Props {
+  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';
   concept: ConceptNotionType;
   disableScripts?: boolean;
+  hideIconsAndAuthors?: boolean;
+  adjustSizeToFitWiderPage?: boolean;
 }
 
-const ConceptNotion = ({ concept, disableScripts }: Props) => {
+const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, adjustSizeToFitWiderPage }: Props) => {
   const notionId = `notion-${concept.id}`;
   const figureId = `notion-figure-${concept.id}`;
   const visualElementId = `visual-element-${concept.id}`;
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (!disableScripts) {
       initArticleScripts();
     }
   }, [disableScripts]);
+
   return (
-    <FigureNotion
-      id={figureId}
-      figureId={visualElementId}
-      copyright={concept.copyright}
-      title={concept.title}
-      licenseString={concept.copyright?.license?.license ?? ''}
-      type="concept">
-      <Notion
-        id={notionId}
-        title={concept.title}
-        text={concept.text}
-        labels={concept.subjectNames ?? []}
-        imageElement={
-          concept.visualElement?.resource === 'image' && concept.visualElement.image ? (
-            <NotionImage
-              id={visualElementId}
-              src={concept.visualElement.image.src}
-              alt={concept.visualElement.image.alt ?? ''}
-              imageCopyright={concept.visualElement.copyright}
-            />
-          ) : undefined
-        }
-        visualElement={
-          concept.visualElement && concept.visualElement.resource !== 'image' && concept.visualElement.url
-            ? {
-                type: concept.visualElement.resource === 'brightcove' ? 'video' : 'other',
-                metaImage: concept.image && {
-                  url: concept.image.src,
-                  alt: concept.image.alt,
-                },
-                element: <NotionVisualElement visualElement={concept.visualElement} />,
-              }
-            : undefined
-        }></Notion>
-    </FigureNotion>
+    <ContentWrapper adjustSizeToFitWiderPage={adjustSizeToFitWiderPage}>
+      <FigureNotion
+        resizeIframe
+        id={figureId}
+        figureId={visualElementId}
+        copyright={concept.copyright}
+        licenseString={concept.copyright?.license?.license ?? ''}
+        type="concept"
+        hideIconsAndAuthors={hideIconsAndAuthors}>
+        <UINotion
+          id={notionId}
+          title={concept.title}
+          text={concept.text}
+          imageElement={
+            concept.visualElement?.resource === 'image' && concept.visualElement.image ? (
+              <ImageWrapper>
+                <Notion
+                  id={notionId}
+                  ariaLabel={t('factbox.open')}
+                  title={concept.title}
+                  subTitle={t('searchPage.resultType.notionsHeading')}
+                  hideBaselineIcon
+                  content={
+                    <>
+                      <NotionDialogContent>
+                        {concept.visualElement?.resource === 'image' && concept.visualElement.image ? (
+                          <NotionVisualElement
+                            visualElement={concept.visualElement}
+                            id={notionId}
+                            figureId={figureId}
+                          />
+                        ) : undefined}
+                        <NotionDialogText>{concept.text}</NotionDialogText>
+                      </NotionDialogContent>
+                      <NotionDialogLicenses
+                        license={concept.copyright?.license?.license ?? ''}
+                        source={concept.source}
+                      />
+                    </>
+                  }>
+                  {concept.visualElement.image && (
+                    <NotionImage
+                      type={type}
+                      id={visualElementId}
+                      src={concept.visualElement.image.src}
+                      alt={concept.visualElement.image.alt ?? ''}
+                      imageCopyright={concept.visualElement.copyright}
+                    />
+                  )}
+                </Notion>
+              </ImageWrapper>
+            ) : undefined
+          }
+          visualElement={
+            concept.visualElement && concept.visualElement.resource !== 'image' && concept.visualElement.url ? (
+              <ImageWrapper>
+                <Notion
+                  id={notionId}
+                  ariaLabel={t('factbox.open')}
+                  title={concept.title}
+                  hideBaselineIcon
+                  subTitle={t('searchPage.resultType.notionsHeading')}
+                  content={
+                    <>
+                      <NotionDialogContent>
+                        {concept.visualElement &&
+                        concept.visualElement?.resource !== 'image' &&
+                        concept.visualElement.url ? (
+                          <NotionVisualElement
+                            visualElement={concept.visualElement}
+                            id={notionId}
+                            figureId={figureId}
+                          />
+                        ) : undefined}
+
+                        <NotionDialogText>{concept.text}</NotionDialogText>
+                      </NotionDialogContent>
+                      <NotionDialogLicenses
+                        license={concept.copyright?.license?.license ?? ''}
+                        source={concept.source}
+                      />
+                    </>
+                  }>
+                  {concept.image && (
+                    <NotionImage
+                      type={type}
+                      id={visualElementId}
+                      src={concept.image?.src}
+                      alt={concept.image?.alt ?? ''}
+                      imageCopyright={concept.visualElement.copyright}
+                    />
+                  )}
+                </Notion>
+              </ImageWrapper>
+            ) : undefined
+          }></UINotion>
+      </FigureNotion>
+    </ContentWrapper>
   );
 };
 

package/src/Notion/FigureNotion.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree. *
  */
 
-import Button from '@ndla/button';
 import { getGroupedContributorDescriptionList, getLicenseByAbbreviation } from '@ndla/licenses';
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -17,11 +16,12 @@ interface Props {
   figureId: string;
   children: ReactNode | ((params: { typeClass: string }) => ReactNode);
   id: string;
-  title: string;
+  title?: string;
   copyright?: Partial<Copyright>;
   licenseString: string;
   type: 'video' | 'h5p' | 'image' | 'concept';
   hideFigCaption?: boolean;
+  hideIconsAndAuthors?: boolean;
 }
 
 const FigureNotion = ({
@@ -34,6 +34,7 @@ const FigureNotion = ({
   title,
   type,
   hideFigCaption,
+  hideIconsAndAuthors,
 }: Props) => {
   const { t, i18n } = useTranslation();
   const license = getLicenseByAbbreviation(licenseString, i18n.language);
@@ -59,7 +60,8 @@ const FigureNotion = ({
               id={id}
               reuseLabel={t(`${type}.reuse`)}
               authors={contributors}
-              licenseRights={license.rights}>
+              licenseRights={license.rights}
+              hideIconsAndAuthors={hideIconsAndAuthors}>
               <FigureLicenseDialog
                 id={id}
                 authors={contributors}
@@ -73,9 +75,7 @@ const FigureNotion = ({
                   source: t('source'),
                   learnAboutLicenses: t('license.learnMore'),
                   title: t('title'),
-                }}>
-                {type === 'image' && <Button outline>{t('license.copyTitle')}</Button>}
-              </FigureLicenseDialog>
+                }}></FigureLicenseDialog>
             </FigureCaption>
           )}
         </>