@ndla/ui 9.0.2 → 10.0.0

package/lib/locale/messages-nn.js

@@ -876,6 +876,17 @@ var messages = _objectSpread(_objectSpread({
   factbox: {
     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'
   }
 });
 

package/lib/locale/messages-se.d.ts

@@ -43,6 +43,17 @@ declare const messages: {
         open: string;
         close: string;
     };
+    myNdla: {
+        resources: string;
+        folders: string;
+        folder: string;
+        myFolders: string;
+        myTags: string;
+        newFolder: string;
+        myAccount: string;
+        favourites: string;
+        help: string;
+    };
     htmlTitles: {
         titleTemplate: string;
         welcomePage: string;

package/lib/locale/messages-se.js

@@ -876,6 +876,17 @@ var messages = _objectSpread(_objectSpread({
   factbox: {
     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'
   }
 });
 

package/lib/locale/messages-sma.d.ts

@@ -43,6 +43,17 @@ declare const messages: {
         open: string;
         close: string;
     };
+    myNdla: {
+        resources: string;
+        folders: string;
+        folder: string;
+        myFolders: string;
+        myTags: string;
+        newFolder: string;
+        myAccount: string;
+        favourites: string;
+        help: string;
+    };
     htmlTitles: {
         titleTemplate: string;
         welcomePage: string;

package/lib/locale/messages-sma.js

@@ -876,6 +876,17 @@ var messages = _objectSpread(_objectSpread({
   factbox: {
     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'
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "9.0.2",
+  "version": "10.0.0",
   "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/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": "7280064bc32ec3c1658f903c37493d526a147a89"
 }

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

@@ -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 '../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/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;

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;