@ndla/ui 9.0.0 → 10.0.0

package/src/Notion/ConceptNotion.tsx

@@ -18,20 +18,6 @@ import NotionVisualElement, { NotionVisualElementType } from './NotionVisualElem
 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};
@@ -48,9 +34,7 @@ export interface ConceptNotionType {
   copyright?: Partial<Copyright>;
   title: string;
   text: string;
-  subjectNames?: string[];
   visualElement?: NotionVisualElementType;
-  authors: string[];
   source?: string;
   image?: {
     src: string;
@@ -62,10 +46,9 @@ interface Props {
   concept: ConceptNotionType;
   disableScripts?: boolean;
   hideIconsAndAuthors?: boolean;
-  adjustSizeToFitWiderPage?: boolean;
 }
 
-const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, adjustSizeToFitWiderPage }: Props) => {
+const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors }: Props) => {
   const notionId = `notion-${concept.id}`;
   const figureId = `notion-figure-${concept.id}`;
   const visualElementId = `visual-element-${concept.id}`;
@@ -78,104 +61,88 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, adj
   }, [disableScripts]);
 
   return (
-    <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}
+    <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>
+                      <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>
   );
 };
 

package/src/Notion/FigureNotion.tsx

@@ -5,12 +5,19 @@
  * LICENSE file in the root directory of this source tree. *
  */
 
+import styled from '@emotion/styled';
+import { colors, spacing } from '@ndla/core';
 import { getGroupedContributorDescriptionList, getLicenseByAbbreviation } from '@ndla/licenses';
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Figure, FigureCaption, FigureLicenseDialog } from '..';
+import { Figure, FigureCaption, FigureLicenseDialog } from '../Figure';
 import { Copyright } from '../types';
 
+const BottomBorder = styled.div`
+  margin-top: ${spacing.normal};
+  border-bottom: 1px solid ${colors.brand.greyLight};
+`;
+
 interface Props {
   resizeIframe?: boolean;
   figureId: string;
@@ -53,7 +60,7 @@ const FigureNotion = ({
       {({ typeClass }) => (
         <>
           {typeof children === 'function' ? children({ typeClass }) : children}
-          {copyright?.license?.license && (
+          {copyright?.license?.license ? (
             <FigureCaption
               hideFigcaption={hideFigCaption}
               figureId={figureId}
@@ -77,6 +84,8 @@ const FigureNotion = ({
                   title: t('title'),
                 }}></FigureLicenseDialog>
             </FigureCaption>
+          ) : (
+            <BottomBorder />
           )}
         </>
       )}

package/src/Notion/Notion.tsx

@@ -43,6 +43,16 @@ const TextWrapper = styled.div<{ hasVisualElement: boolean }>`
   ${ContentWrapper} .c-figure.expanded + & {
     width: 100%;
   }
+  ${mq.range({ from: breakpoints.desktop })} {
+    ul,
+    ol {
+      margin: 12px 0;
+      padding: 0 1rem 0 2rem;
+    }
+    ol > li {
+      margin-left: 24px;
+    }
+  }
 `;
 
 const ClearWrapper = styled.div`

package/src/Notion/NotionImage.tsx

@@ -9,7 +9,8 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { animations, breakpoints, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
-import { Image, FigureOpenDialogButton } from '..';
+import Image from '../Image';
+import { FigureOpenDialogButton } from '../Figure';
 import { Copyright } from '../types';
 import FigureNotion from './FigureNotion';
 

package/src/index.ts

@@ -65,8 +65,7 @@ export {
 
 export { default as FactBox } from './FactBox';
 
-export { default as Image, ImageLink } from './Image';
-export { makeSrcQueryString } from './Image';
+export { default as Image, ImageLink, makeSrcQueryString } from './Image';
 
 export {
   SubjectMaterialHero,
@@ -221,3 +220,5 @@ export { default as ContentPlaceholder } from './ContentPlaceholder';
 export { Notion, ConceptNotion } from './Notion';
 
 export { BannerCard } from './BannerCard';
+
+export { ResourcesView, ResourceElement, Breadcrumbs } from './MyNdla';

package/src/locale/messages-en.ts

@@ -915,6 +915,17 @@ const messages = {
     open: 'Open fact box',
     close: 'Close fact box',
   },
+  myNdla: {
+    resources: 'resources',
+    folders: 'folders',
+    folder: 'folder',
+    myFolders: 'My folders',
+    myTags: 'My tags',
+    newFolder: 'New folder',
+    myAccount: 'My account',
+    favourites: 'Favourites',
+    help: 'Help',
+  },
 };
 
 export default messages;

package/src/locale/messages-nb.ts

@@ -913,6 +913,17 @@ const messages = {
     open: 'Åpne faktaboks',
     close: 'Lukk faktaboks',
   },
+  myNdla: {
+    resources: 'Ressurser',
+    folders: 'Mapper',
+    folder: 'Mappe',
+    myFolders: 'Mine mapper',
+    myTags: 'Mine tags',
+    newFolder: 'Ny mappe',
+    myAccount: 'Min konto',
+    favourites: 'Favoritter',
+    help: 'Hjelp',
+  },
 };
 
 export default messages;

package/src/locale/messages-nn.ts

@@ -914,6 +914,17 @@ const messages = {
     open: 'Åpne faktaboks',
     close: 'Lukk faktaboks',
   },
+  myNdla: {
+    resources: 'Ressursar',
+    folders: 'Mapper',
+    folder: 'Mappe',
+    myFolders: 'Mine mapper',
+    myTags: 'Mine tags',
+    newFolder: 'Ny mappe',
+    myAccount: 'Min konto',
+    favourites: 'Favorittar',
+    help: 'Hjelp',
+  },
 };
 
 export default messages;

package/src/locale/messages-se.ts

@@ -913,6 +913,17 @@ const messages = {
     open: 'Åpne faktaboks',
     close: 'Lukk faktaboks',
   },
+  myNdla: {
+    resources: 'Ressurser',
+    folders: 'Mapper',
+    folder: 'Mappe',
+    myFolders: 'Mine mapper',
+    myTags: 'Mine tags',
+    newFolder: 'Ny mappe',
+    myAccount: 'Min konto',
+    favourites: 'Favoritter',
+    help: 'Hjelp',
+  },
 };
 
 export default messages;

package/src/locale/messages-sma.ts

@@ -913,6 +913,17 @@ const messages = {
     open: 'Åpne faktaboks',
     close: 'Lukk faktaboks',
   },
+  myNdla: {
+    resources: 'Ressurser',
+    folders: 'Mapper',
+    folder: 'Mappe',
+    myFolders: 'Mine mapper',
+    myTags: 'Mine tags',
+    newFolder: 'Ny mappe',
+    myAccount: 'Min konto',
+    favourites: 'Favoritter',
+    help: 'Hjelp',
+  },
 };
 
 export default messages;