@ndla/ui 8.2.3 → 9.0.0

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>
           )}
         </>

package/src/Notion/Notion.tsx

@@ -5,17 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-
+import React, { Fragment, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import { parseMarkdown } from '@ndla/util';
-import React, { Fragment, ReactNode } from 'react';
-import { keyframes } from '@emotion/core';
-import Button from '@ndla/button';
-import { animations, breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { CursorClick } from '@ndla/icons/action';
-import { Play, ArrowCollapse } from '@ndla/icons/common';
-import { ImageCrop, ImageFocalPoint, makeSrcQueryString } from '../Image';
+import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 
 const NotionContainer = styled.div``;
 
@@ -26,11 +20,7 @@ const ContentWrapper = styled.div`
   }
   .c-figure {
     margin: 0;
-    position: relative !important;
-    left: 0 !important;
-    width: 25% !important;
     padding: 0 0 0 20px;
-    float: right;
     &.expanded {
       width: 100% !important;
       padding: 0;
@@ -44,114 +34,21 @@ const ContentWrapper = styled.div`
 `;
 const TextWrapper = styled.div<{ hasVisualElement: boolean }>`
   width: ${(props) => (props.hasVisualElement ? '75%' : '100%')};
+
   ${mq.range({ until: breakpoints.tabletWide })} {
     width: 100%;
   }
-  font-family: ${fonts.serif};
+  font-family: ${fonts.sans};
   ${fonts.sizes('18px', '28px')};
   ${ContentWrapper} .c-figure.expanded + & {
     width: 100%;
   }
 `;
 
-const ImageElement = styled.img``;
-
-const fadeInMediaKeyframe = keyframes`
-  0% {
-    opacity: 0;
-    height: auto;
-  }
-  100% {
-    opacity: 1;
-  }
-`;
-const fadeOutMediaKeyframe = keyframes`
-  0% {
-    opacity: 1;
-    height: auto;
-  }
-  100% {
-    opacity: 0;
-    height:0;
-    overflow: hidden;
-  }
-`;
-
-const ImageWrapper = styled.div`
-  float: right;
-  width: 25%;
-  padding-left: ${spacing.normal};
-  position: relative;
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    width: 100%;
-    padding-left: 0;
-  }
-`;
-
-const ExpandVisualElementButton = styled(Button)`
-  position: absolute;
-  right: 8px;
-  bottom: 8px;
-  transition: all ${animations.durations.normal};
-  &,
-  &:focus,
-  &:active {
-    background-color: rgba(255, 255, 255, 0.65);
-  }
-
-  color: ${colors.brand.primary};
-  border-radius: 50%;
-  border: 0;
-  width: 40px;
-  height: 40px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-
-  svg {
-    transition: transform ${animations.durations.normal} ease-out;
-  }
-  ${ContentWrapper}:hover & {
-    background-color: #fff;
-    svg {
-      transform: scale(1.2);
-    }
-  }
-`;
-
-const ExpandIcon = styled.span`
-  ${ExpandVisualElementButton}.expanded & {
-    display: none;
-  }
-`;
-const CollapseIcon = styled.span`
-  display: none;
-  ${ExpandVisualElementButton}.expanded & {
-    display: inline-block;
-  }
-`;
-
 const ClearWrapper = styled.div`
   clear: both;
 `;
 
-const MediaContainer = styled.div`
-  opacity: 0;
-  height: 0;
-  overflow: hidden;
-  &.expanded {
-    animation-name: ${fadeInMediaKeyframe};
-    animation-duration: 2.8s;
-    opacity: 1;
-    height: auto;
-  }
-  &.fadeOut {
-    animation-name: ${fadeOutMediaKeyframe};
-    animation-duration: 2.8s;
-  }
-`;
-
 const LabelsContainer = styled.div`
   display: flex;
   align-items: center;
@@ -160,23 +57,12 @@ const LabelsContainer = styled.div`
   margin: ${spacing.small} 0;
 `;
 
-type VisualElementProps = {
-  type: 'video' | 'other';
-  element: ReactNode;
-  metaImage?: {
-    url: string;
-    alt: string;
-    crop?: ImageCrop;
-    focalPoint?: ImageFocalPoint;
-  };
-};
-
 export type NotionProps = {
   id: string | number;
   labels?: string[];
   text: ReactNode;
   title: string;
-  visualElement?: VisualElementProps;
+  visualElement: ReactNode;
   imageElement?: ReactNode;
   children?: ReactNode;
 };
@@ -186,34 +72,10 @@ const Notion = ({ id, labels = [], text, title, visualElement, imageElement, chi
 
   return (
     <NotionContainer>
-      {visualElement && <MediaContainer id={`notion-media-${id}`}>{visualElement.element}</MediaContainer>}
       <ContentWrapper>
         {imageElement}
-        {visualElement && visualElement.metaImage && (
-          <ImageWrapper>
-            <ImageElement
-              src={`${visualElement.metaImage.url}?${makeSrcQueryString(
-                400,
-                visualElement.metaImage.crop,
-                visualElement.metaImage.focalPoint,
-              )}`}
-              alt={visualElement.metaImage.alt}
-            />
-            <ExpandVisualElementButton
-              stripped
-              data-notion-expand-media={true}
-              data-notion-media-id={`notion-media-${id}`}>
-              <ExpandIcon>
-                {visualElement.type === 'video' && <Play style={{ width: '24px', height: '24px' }} />}
-                {visualElement.type === 'other' && <CursorClick style={{ width: '24px', height: '24px' }} />}
-              </ExpandIcon>
-              <CollapseIcon>
-                <ArrowCollapse style={{ width: '24px', height: '24px' }} />
-              </CollapseIcon>
-            </ExpandVisualElementButton>
-          </ImageWrapper>
-        )}
-        <TextWrapper hasVisualElement={!!(imageElement || visualElement?.metaImage)}>
+        {visualElement}
+        <TextWrapper hasVisualElement={!!(imageElement || visualElement)}>
           {parseMarkdown(`**${title}** \u2013 ${text}`, 'body')}
           {!!labels.length && (
             <LabelsContainer>

package/src/Notion/NotionImage.tsx

@@ -6,17 +6,44 @@
  */
 
 import React from 'react';
+import styled from '@emotion/styled';
+import { animations, breakpoints, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
-import { Image, FigureExpandButton } from '..';
+import { Image, FigureOpenDialogButton } from '..';
 import { Copyright } from '../types';
 import FigureNotion from './FigureNotion';
+
+const StyledImageWrapper = styled.div`
+  overflow: hidden;
+  width: 260px;
+  padding-top: ${spacing.small};
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    margin: 0 auto;
+  }
+`;
+
+const StyledImage = styled(Image)`
+  object-fit: cover;
+  max-height: 162px;
+  transition: transform ${animations.durations.fast};
+  &:hover {
+    transform: scale(1.1);
+    opacity: 1.1;
+    transition-duration: 0.5s;
+  }
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    min-width: 260px;
+  }
+`;
+
 interface Props {
+  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';
   id: string;
   src: string;
   alt: string;
   imageCopyright?: Partial<Copyright>;
 }
-export const NotionImage = ({ id, src, alt, imageCopyright }: Props) => {
+export const NotionImage = ({ id, src, alt, imageCopyright, type }: Props) => {
   const { t } = useTranslation();
 
   const imageId = `image-${id}`;
@@ -32,19 +59,21 @@ export const NotionImage = ({ id, src, alt, imageCopyright }: Props) => {
       licenseString={imageCopyright?.license?.license ?? ''}
       type={'image'}>
       {({ typeClass }) => (
-        <Image
-          alt={alt}
-          src={src}
-          expandButton={
-            <FigureExpandButton
-              typeClass={typeClass}
-              messages={{
-                zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
-                zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel'),
-              }}
-            />
-          }
-        />
+        <StyledImageWrapper>
+          <StyledImage
+            alt={alt}
+            src={src}
+            expandButton={
+              <FigureOpenDialogButton
+                type={type}
+                messages={{
+                  zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
+                  zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel'),
+                }}
+              />
+            }
+          />
+        </StyledImageWrapper>
       )}
     </FigureNotion>
   );