@ndla/ui 9.0.2 → 10.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "9.0.2",
+  "version": "10.1.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,16 +34,16 @@
     "@ndla/button": "^2.2.0",
     "@ndla/carousel": "^1.2.6",
     "@ndla/core": "^2.1.1",
-    "@ndla/hooks": "^1.1.3",
+    "@ndla/hooks": "^1.1.4",
     "@ndla/icons": "^1.7.0",
     "@ndla/licenses": "^4.1.0",
     "@ndla/modal": "^1.2.6",
-    "@ndla/notion": "^3.0.1",
+    "@ndla/notion": "^3.1.0",
     "@ndla/safelink": "^1.1.7",
     "@ndla/switch": "^0.1.5",
-    "@ndla/tabs": "^1.1.4",
+    "@ndla/tabs": "^1.1.5",
     "@ndla/tooltip": "^0.3.5",
-    "@ndla/util": "^2.0.5",
+    "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3ef8cdf3533b3b6efd62f40295d84af55d654fa1"
+  "gitHead": "6c43d6775f6e357cc738d2fac813e6841fe84f10"
 }

package/src/MyNdla/ResourceDash/Breadcrumbs.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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 styled from '@emotion/styled';
+import React from 'react';
+
+const BreadcrumbsWrapper = styled.div``;
+
+type BreadcrumbsProps = {
+  items: {
+    title: string;
+    url: string;
+  }[];
+};
+
+export const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
+  <BreadcrumbsWrapper>
+    {items.map(({ title, url }) => (
+      <a key={url} href={url}>
+        {title}
+      </a>
+    ))}
+  </BreadcrumbsWrapper>;
+};
+
+export default Breadcrumbs;

package/src/MyNdla/ResourceDash/ResourceElement.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 styled from '@emotion/styled';
+import React, { ReactElement } from 'react';
+// import { useTranslation } from 'react-i18next';
+
+type ResourceElementWrapperProp = {
+  type: 'folder' | 'resource';
+};
+
+const ResourceElementWrapper = styled.div<ResourceElementWrapperProp>`
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid rgba(209, 214, 219, 1);
+  border-radius: 2px;
+  background: ${({ type }) => (type === 'folder' ? '#fafaf9' : '#fff')};
+`;
+
+type ResourceElementProps = {
+  type: 'folder' | 'resource';
+  title: string;
+  rightSide?: ReactElement;
+  leftSide?: ReactElement;
+  description?: string;
+  children?: ReactElement;
+};
+
+const ResourceElement = ({ type, title, description, leftSide, rightSide, children }: ResourceElementProps) => {
+  // const { t } = useTranslation();
+  return (
+    <ResourceElementWrapper type={type}>
+      <div>{leftSide}</div>
+      <div>
+        <h1>{title}</h1>
+        <p>{description}</p>
+        {children}
+      </div>
+      <div>{rightSide}</div>
+    </ResourceElementWrapper>
+  );
+};
+
+export default ResourceElement;

package/src/MyNdla/ResourceDash/ResourcesView.tsx

@@ -0,0 +1,42 @@
+/**
+ * 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 styled from '@emotion/styled';
+import React from 'react';
+import ResourceElement from './ResourceElement';
+
+const ResourcesWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem; 0;
+`;
+
+export const ResourcesView = () => {
+  return (
+    <ResourcesWrapper>
+      <ResourceElement
+        type="folder"
+        title="Example folder"
+        leftSide={<img src="http://placekitten.com/200/200" alt="Mjaoo" />}
+        rightSide={<span>#tag</span>}
+        description="some description">
+        <p>Im a child.. insert content</p>
+      </ResourceElement>
+      <ResourceElement
+        type="resource"
+        title="Example Resource"
+        leftSide={<img src="http://placekitten.com/200/200" alt="Brrr" />}
+        rightSide={<span>#tag</span>}
+        description="some description">
+        <p>Im a child.. insert content</p>
+      </ResourceElement>
+    </ResourcesWrapper>
+  );
+};
+
+export default ResourcesView;

package/src/MyNdla/ResourceDash/index.ts

@@ -0,0 +1,5 @@
+import Breadcrumbs from './Breadcrumbs';
+import ResourceElement from './ResourceElement';
+import ResourcesView from './ResourcesView';
+
+export { ResourcesView, ResourceElement, Breadcrumbs };

package/src/MyNdla/index.ts

@@ -0,0 +1,5 @@
+import { ResourceElement } from './ResourceDash';
+import { ResourcesView } from './ResourceDash';
+import { Breadcrumbs } from './ResourceDash';
+
+export { ResourceElement, ResourcesView, Breadcrumbs };

package/src/Notion/ConceptNotion.tsx

@@ -11,6 +11,7 @@ import React, { useEffect } from 'react';
 import { initArticleScripts } from '@ndla/article-scripts';
 import { useTranslation } from 'react-i18next';
 import { breakpoints, mq, spacing } from '@ndla/core';
+import { parseMarkdown } from '@ndla/util';
 import Notion, { NotionDialogContent, NotionDialogText, NotionDialogLicenses } from '@ndla/notion';
 import { Notion as UINotion } from '.';
 import { NotionImage } from './NotionImage';
@@ -18,20 +19,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 +35,7 @@ export interface ConceptNotionType {
   copyright?: Partial<Copyright>;
   title: string;
   text: string;
-  subjectNames?: string[];
   visualElement?: NotionVisualElementType;
-  authors: string[];
   source?: string;
   image?: {
     src: string;
@@ -62,10 +47,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 +62,86 @@ 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>{parseMarkdown(concept.text, 'body')}</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 ?? ''}
+                  />
+                )}
+              </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>{parseMarkdown(concept.text, 'body')}</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 ?? ''}
+                  />
+                )}
+              </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 '../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;
@@ -19,7 +26,7 @@ interface Props {
   title?: string;
   copyright?: Partial<Copyright>;
   licenseString: string;
-  type: 'video' | 'h5p' | 'image' | 'concept';
+  type: 'video' | 'h5p' | 'image' | 'concept' | 'other';
   hideFigCaption?: boolean;
   hideIconsAndAuthors?: boolean;
 }
@@ -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

@@ -11,8 +11,6 @@ import { useTranslation } from 'react-i18next';
 import { parseMarkdown } from '@ndla/util';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 
-const NotionContainer = styled.div``;
-
 const ContentWrapper = styled.div`
   ${mq.range({ until: breakpoints.tabletWide })} {
     display: flex;
@@ -43,6 +41,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`
@@ -71,7 +79,7 @@ const Notion = ({ id, labels = [], text, title, visualElement, imageElement, chi
   const { t } = useTranslation();
 
   return (
-    <NotionContainer>
+    <div>
       <ContentWrapper>
         {imageElement}
         {visualElement}
@@ -93,7 +101,7 @@ const Notion = ({ id, labels = [], text, title, visualElement, imageElement, chi
         <ClearWrapper />
       </ContentWrapper>
       {children}
-    </NotionContainer>
+    </div>
   );
 };
 

package/src/Notion/NotionImage.tsx

@@ -10,9 +10,7 @@ import styled from '@emotion/styled';
 import { animations, breakpoints, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import Image from '../Image';
-import { FigureOpenDialogButton } from '../Figure';
-import { Copyright } from '../types';
-import FigureNotion from './FigureNotion';
+import { Figure, FigureOpenDialogButton } from '../Figure';
 
 const StyledImageWrapper = styled.div`
   overflow: hidden;
@@ -38,44 +36,33 @@ const StyledImage = styled(Image)`
 `;
 
 interface Props {
-  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';
+  type: 'image' | 'video' | 'h5p' | 'iframe' | 'external' | undefined;
   id: string;
   src: string;
   alt: string;
-  imageCopyright?: Partial<Copyright>;
 }
-export const NotionImage = ({ id, src, alt, imageCopyright, type }: Props) => {
+export const NotionImage = ({ id, src, alt, type }: Props) => {
   const { t } = useTranslation();
 
-  const imageId = `image-${id}`;
   const imageFigureId = `image-figure-${id}`;
 
   return (
-    <FigureNotion
-      hideFigCaption
-      figureId={imageFigureId}
-      id={imageId}
-      title={alt}
-      copyright={imageCopyright}
-      licenseString={imageCopyright?.license?.license ?? ''}
-      type={'image'}>
-      {({ typeClass }) => (
-        <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>
+    <Figure resizeIframe id={imageFigureId} type={'full-column'}>
+      <StyledImageWrapper>
+        <StyledImage
+          alt={alt}
+          src={src}
+          expandButton={
+            <FigureOpenDialogButton
+              type={type}
+              messages={{
+                zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
+                zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel'),
+              }}
+            />
+          }
+        />
+      </StyledImageWrapper>
+    </Figure>
   );
 };

package/src/Notion/NotionVisualElement.tsx

@@ -43,10 +43,10 @@ const getType = (resource: string) => {
   if (resource === 'brightcove') {
     return 'video';
   }
-  if (resource === 'image') {
-    return 'image';
+  if (resource === 'image' || resource === 'h5p') {
+    return resource;
   }
-  return 'h5p';
+  return 'other';
 };
 
 const NotionVisualElement = ({ visualElement, id, figureId }: Props) => {

package/src/index.ts

@@ -220,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;