@ndla/ui 43.0.3 → 44.0.1

package/lib/index.d.ts

@@ -7,7 +7,7 @@
  */
 export { default as SectionHeading } from './SectionHeading';
 export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, } from './Embed';
-export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, default as Article, } from './Article';
+export { ArticleByline, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, default as Article, } from './Article';
 export { default as Table } from './Table';
 export { default as ResourcesWrapper, ResourcesTopicTitle } from './ResourcesWrapper';
 export { createUniversalPortal } from './utils/createUniversalPortal';
@@ -94,7 +94,7 @@ export { KeyFigure } from './KeyFigure';
 export { default as ContactBlock } from './ContactBlock';
 export type { HeartButtonType } from './Embed';
 export { CampaignBlock } from './CampaignBlock';
-export { Grid } from './Grid';
+export { Grid, GridParallaxItem } from './Grid';
 export type { GridType } from './Grid';
 export { Heading } from './Typography';
 export type { HeadingLevel } from './types';
@@ -102,3 +102,4 @@ export { default as FrontpageArticle } from './FrontpageArticle';
 export { DefinitionTerm, DefinitionDescription } from './DefinitionList';
 export type { ProgrammeV2 } from './ProgrammeCard';
 export { Gloss } from './Gloss';
+export { LinkBlock, LinkBlockSection } from './LinkBlock';

package/lib/index.js

@@ -34,12 +34,6 @@ Object.defineProperty(exports, "ArticleByline", {
     return _Article.ArticleByline;
   }
 });
-Object.defineProperty(exports, "ArticleContent", {
-  enumerable: true,
-  get: function get() {
-    return _Article.ArticleContent;
-  }
-});
 Object.defineProperty(exports, "ArticleFootNotes", {
   enumerable: true,
   get: function get() {
@@ -502,6 +496,12 @@ Object.defineProperty(exports, "Grid", {
     return _Grid.Grid;
   }
 });
+Object.defineProperty(exports, "GridParallaxItem", {
+  enumerable: true,
+  get: function get() {
+    return _Grid.GridParallaxItem;
+  }
+});
 Object.defineProperty(exports, "H5pEmbed", {
   enumerable: true,
   get: function get() {
@@ -670,6 +670,18 @@ Object.defineProperty(exports, "LetterFilter", {
     return _LetterFilter.default;
   }
 });
+Object.defineProperty(exports, "LinkBlock", {
+  enumerable: true,
+  get: function get() {
+    return _LinkBlock.LinkBlock;
+  }
+});
+Object.defineProperty(exports, "LinkBlockSection", {
+  enumerable: true,
+  get: function get() {
+    return _LinkBlock.LinkBlockSection;
+  }
+});
 Object.defineProperty(exports, "ListResource", {
   enumerable: true,
   get: function get() {
@@ -1334,6 +1346,7 @@ var _Typography = require("./Typography");
 var _FrontpageArticle = _interopRequireDefault(require("./FrontpageArticle"));
 var _DefinitionList = require("./DefinitionList");
 var _Gloss = require("./Gloss");
+var _LinkBlock = require("./LinkBlock");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/types.d.ts

@@ -57,7 +57,7 @@ export interface FootNote {
 export interface Article {
     title: string;
     introduction: string;
-    content: string | ReactNode;
+    content: ReactNode;
     footNotes: Array<FootNote>;
     copyright: Copyright;
     published: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "43.0.3",
+  "version": "44.0.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -40,9 +40,9 @@
     "@ndla/forms": "^4.3.17",
     "@ndla/hooks": "^2.0.9",
     "@ndla/icons": "^4.0.2",
-    "@ndla/licenses": "^7.1.2",
+    "@ndla/licenses": "^7.1.3",
     "@ndla/modal": "^4.0.1",
-    "@ndla/notion": "^5.0.15",
+    "@ndla/notion": "^5.0.16",
     "@ndla/safelink": "^4.1.16",
     "@ndla/select": "^2.4.8",
     "@ndla/switch": "^1.1.9",
@@ -51,6 +51,7 @@
     "@ndla/util": "^3.1.15",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-slider": "^1.1.2",
+    "date-fns": "^2.30.0",
     "framer-motion": "^6.5.1",
     "html-react-parser": "^3.0.8",
     "i18next-browser-languagedetector": "^6.1.1",
@@ -72,7 +73,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@ndla/types-backend": "^0.2.5",
-    "@ndla/types-embed": "^2.0.6",
+    "@ndla/types-embed": "^2.0.7",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -82,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6f18d70d6d1cc3e21697da608ab1f136a1fd53aa"
+  "gitHead": "494677b86370dc86e7642c6c3934435339f87e18"
 }

package/src/Article/Article.tsx

@@ -14,15 +14,13 @@ import styled from '@emotion/styled';
 import { useIntersectionObserver } from '@ndla/hooks';
 import { resizeObserver } from '@ndla/util';
 import { spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
-import { Article as ArticleType, Locale } from '../types';
-import ArticleContent from './ArticleContent';
+import { Article as ArticleType } from '../types';
 import ArticleByline from './ArticleByline';
 import LayoutItem from '../Layout';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
-import ArticleNotions, { NotionRelatedContent } from './ArticleNotions';
+import ArticleNotions from './ArticleNotions';
 import ArticleAccessMessage from './ArticleAccessMessage';
 import MessageBox from '../Messages/MessageBox';
-import { ConceptNotionType } from '../Notion/ConceptNotion';
 import { Heading } from '../Typography';
 
 const classes = new BEMHelper({
@@ -124,22 +122,19 @@ type Props = {
   children?: ReactNode;
   messages: Messages;
   contentTransformed?: boolean;
-  locale: Locale;
   messageBoxLinks?: [];
   competenceGoals?: ReactNode;
   id: string;
   renderMarkdown: (text: string) => string;
-  notions?: { list: ConceptNotionType[]; related: NotionRelatedContent[] };
+  notions?: ReactNode;
   accessMessage?: string;
 };
 
-const getArticleContent = (content: any, locale: Locale, contentTransformed?: boolean) => {
+const getArticleContent = (content: any, contentTransformed?: boolean) => {
   if (contentTransformed) {
     return content;
   }
   switch (typeof content) {
-    case 'string':
-      return <ArticleContent content={content} locale={locale} />;
     case 'function':
       return content();
     default:
@@ -157,7 +152,6 @@ export const Article = ({
   children,
   competenceGoals,
   id,
-  locale,
   notions,
   renderMarkdown,
   accessMessage,
@@ -223,13 +217,9 @@ export const Article = ({
         </LayoutItem>
         <LayoutItem layout="center">
           {notions && showExplainNotions && (
-            <ArticleNotions
-              notions={notions.list}
-              relatedContent={notions.related}
-              buttonOffsetRight={articlePositionRight}
-            />
+            <ArticleNotions buttonOffsetRight={articlePositionRight}>{notions}</ArticleNotions>
           )}
-          {getArticleContent(content, locale, contentTransformed)}
+          {getArticleContent(content, contentTransformed)}
         </LayoutItem>
 
         <LayoutItem layout="center">

package/src/Article/ArticleNotions.tsx

@@ -6,13 +6,12 @@
  *
  */
 
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import { ModalHeader, ModalCloseButton, ModalBody, Modal, ModalTitle, ModalTrigger, ModalContent } from '@ndla/modal';
 import { mq, breakpoints, fonts, colors } from '@ndla/core';
 import { Explanation, NotionFlip } from '@ndla/icons/common';
-import { ConceptNotion } from '../Notion';
-import { ConceptNotionType } from '../Notion/ConceptNotion';
 
 const ArticleNotionsContainer = styled.div`
   margin-bottom: 26px;
@@ -81,14 +80,6 @@ const NotionsTrigger = styled.div`
 const ModalHeadingContainer = styled.div`
   display: flex;
   align-items: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  margin-bottom: 2rem;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding-left: 3.5rem;
-    padding-right: 3.5rem;
-  }
 
   svg {
     display: block;
@@ -103,65 +94,20 @@ const ModalHeadingContainer = styled.div`
       margin: 0 1.5rem 0 -0.5rem;
     }
   }
-
-  h1 {
-    margin: 0;
-  }
-`;
-
-const NotionsContainer = styled.div`
-  padding: 0 20px;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: 0 3.5rem;
-  }
 `;
 
-const RelatedContentContainer = styled.ul`
+const StyledModalHeader = styled(ModalHeader)`
   display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0 0 2rem;
-  padding: 0 20px;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: 0 3.5rem;
-  }
-
-  &:not(:last-child) {
-    margin-bottom: 1.5rem;
-  }
-
-  > li {
-    width: 100%;
-
-    &:not(:nth-child(2n)) {
-      margin-right: 0;
-    }
-
-    ${mq.range({ from: breakpoints.tablet })} {
-      width: calc(100% * (1 / 3));
-
-      &:not(:nth-child(2n)) {
-        margin-right: 0.5rem;
-      }
-    }
-  }
+  justify-content: space-between;
+  align-items: center;
 `;
 
-export type NotionRelatedContent = {
-  url: string;
-  label: string;
-};
-
 type ArticleNotionsProps = {
-  notions: ConceptNotionType[];
-  relatedContent?: NotionRelatedContent[];
+  children?: ReactNode;
   buttonOffsetRight: number;
-  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';
 };
 
-export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight, type }: ArticleNotionsProps) => {
+export const ArticleNotions = ({ buttonOffsetRight, children }: ArticleNotionsProps) => {
   const { t } = useTranslation();
   const leftOffset = `${buttonOffsetRight - 32}px`;
 
@@ -176,29 +122,14 @@ export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight
           </NotionsTrigger>
         </ModalTrigger>
         <ModalContent size="large">
-          <ModalHeader className="no-padding">
+          <StyledModalHeader>
             <ModalHeadingContainer>
               <Explanation />
               <ModalTitle>{t('article.notionsPrompt')}</ModalTitle>
             </ModalHeadingContainer>
             <ModalCloseButton />
-          </ModalHeader>
-          <ModalBody modifier="notions-modal-body no-padding">
-            <NotionsContainer>
-              {notions.map((notion) => (
-                <ConceptNotion key={notion.id} concept={notion} type={type} />
-              ))}
-            </NotionsContainer>
-            {relatedContent.length > 0 && (
-              <RelatedContentContainer>
-                {relatedContent.map((content, i) => (
-                  <li key={`notion-related-item-${i + 1}`}>
-                    <a href={content.url}>{content.label}</a>
-                  </li>
-                ))}
-              </RelatedContentContainer>
-            )}
-          </ModalBody>
+          </StyledModalHeader>
+          <ModalBody modifier="notions-modal-body no-padding">{children}</ModalBody>
         </ModalContent>
       </Modal>
     </ArticleNotionsContainer>

package/src/Article/index.ts

@@ -8,17 +8,8 @@
 
 import Article, { ArticleTitle, ArticleIntroduction, ArticleWrapper } from './Article';
 import ArticleByline from './ArticleByline';
-import ArticleContent from './ArticleContent';
 import ArticleFootNotes from './ArticleFootNotes';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 
-export {
-  ArticleByline,
-  ArticleContent,
-  ArticleFootNotes,
-  ArticleHeaderWrapper,
-  ArticleTitle,
-  ArticleIntroduction,
-  ArticleWrapper,
-};
+export { ArticleByline, ArticleFootNotes, ArticleHeaderWrapper, ArticleTitle, ArticleIntroduction, ArticleWrapper };
 export default Article;

package/src/ContactBlock/ContactBlock.tsx

@@ -33,6 +33,9 @@ const BlockWrapper = styled.div`
   border-radius: ${misc.borderRadius};
   border: 1px solid ${colors.brand.lighter};
   max-width: 348px;
+  & ~ & {
+    margin-top: ${spacing.medium};
+  }
   ${mq.range({ from: breakpoints.tabletWide })} {
     max-width: 773px;
     flex-direction: row;

package/src/Embed/ImageEmbed.tsx

@@ -73,14 +73,14 @@ const getSizes = (size?: string, align?: string) => {
   return '(min-width: 1024px) 1024px, 100vw';
 };
 
-const getFocalPoint = (data: ImageEmbedData) => {
+export const getFocalPoint = (data: ImageEmbedData) => {
   if (typeof data.focalX === 'number' && typeof data.focalY === 'number') {
     return { x: data.focalX, y: data.focalY };
   }
   return undefined;
 };
 
-const getCrop = (data: ImageEmbedData) => {
+export const getCrop = (data: ImageEmbedData) => {
   if (
     typeof data.lowerRightX === 'number' &&
     typeof data.lowerRightY === 'number' &&

package/src/Grid/Grid.tsx

@@ -8,7 +8,7 @@
 
 import styled from '@emotion/styled';
 import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
-import { ReactNode } from 'react';
+import { Children, ReactNode } from 'react';
 
 export interface GridProps {
   columns: '2' | '4' | '2x2';
@@ -87,4 +87,12 @@ const Grid = ({ columns, border, children, background, size, ...rest }: GridProp
   );
 };
 
+export const GridParallaxItem = styled.div`
+  position: relative;
+  > div {
+    top: 0px;
+    position: sticky;
+  }
+`;
+
 export default Grid;

package/src/Grid/index.ts

@@ -6,5 +6,5 @@
  *
  */
 
-export { default as Grid } from './Grid';
+export { default as Grid, GridParallaxItem } from './Grid';
 export type { GridProps as GridType } from './Grid';

package/src/LinkBlock/LinkBlock.stories.tsx

@@ -6,9 +6,10 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj, StoryFn } from '@storybook/react';
 import LinkBlock from './LinkBlock';
 import { defaultParameters } from '../../../../stories/defaults';
+import { LinkBlockSection } from '.';
 
 export default {
   title: 'Components/Link Block',
@@ -20,11 +21,20 @@ export default {
   args: {},
 } as Meta<typeof LinkBlock>;
 
-export const AnnouncementExample: StoryObj<typeof LinkBlock> = {
-  args: {
-    title: 'Redaksjonell medarbeider i faget spansk 2',
-    language: 'nb',
-    date: '05. mars 2023',
-    url: '',
-  },
+const args = {
+  title: 'Redaksjonell medarbeider i faget spansk 2',
+  language: 'nb',
+  date: '05. mars 2023',
+  url: '',
 };
+
+export const AnnouncementExample: StoryObj<typeof LinkBlock> = { args };
+
+export const LinkList: StoryFn<typeof LinkBlock> = () => (
+  <LinkBlockSection>
+    <LinkBlock {...args} />
+    <LinkBlock {...args} />
+    <LinkBlock {...args} />
+    <LinkBlock {...args} />
+  </LinkBlockSection>
+);

package/src/LinkBlock/LinkBlock.tsx

@@ -6,19 +6,16 @@
  *
  */
 
+import { format } from 'date-fns';
+import { enGB, nb, nn } from 'date-fns/locale';
 import styled from '@emotion/styled';
 import SafeLink from '@ndla/safelink';
 import { Forward, CalendarEd } from '@ndla/icons/common';
 import { breakpoints, colors, spacing, mq } from '@ndla/core';
+import { LinkBlockEmbedData } from '@ndla/types-embed';
+import { useMemo } from 'react';
 import Heading from '../Typography/Heading';
 
-interface Props {
-  title: string;
-  language: string;
-  date: string;
-  url: string;
-}
-
 const StyledForward = styled(Forward)`
   margin: 0 ${spacing.nsmall};
   min-width: ${spacing.normal};
@@ -74,7 +71,13 @@ const StyledCalenderEd = styled(CalendarEd)`
   color: ${colors.icon.iconBlue};
 `;
 
-const LinkBlock = ({ title, language, date, url }: Props) => {
+const LinkBlock = ({ title, language, date, url }: Omit<LinkBlockEmbedData, 'resource'>) => {
+  const formattedDate = useMemo(() => {
+    if (!date) return null;
+    const locale = language === 'nb' ? nb : language === 'nn' ? nn : enGB;
+    return format(new Date(date), 'dd. LLLL. yyyy', { locale });
+  }, [date, language]);
+
   return (
     <StyledSafeLink to={url}>
       <InfoWrapper>
@@ -84,7 +87,7 @@ const LinkBlock = ({ title, language, date, url }: Props) => {
         {date && (
           <StyledDateContainer>
             <StyledCalenderEd />
-            {date}
+            {formattedDate}
           </StyledDateContainer>
         )}
       </InfoWrapper>

package/src/LinkBlock/LinkBlockSection.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-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 { spacing } from '@ndla/core';
+import { Children, HTMLAttributes, ReactNode } from 'react';
+
+interface Props extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+}
+
+const StyledList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.small};
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+  li {
+    padding: 0px;
+    margin: 0px;
+  }
+`;
+
+const LinkBlockSection = ({ children, ...rest }: Props) => {
+  return (
+    <nav {...rest}>
+      <StyledList>
+        {Children.map(children, (child) => (
+          <li>{child}</li>
+        ))}
+      </StyledList>
+    </nav>
+  );
+};
+
+export default LinkBlockSection;

package/src/LinkBlock/index.ts

@@ -7,3 +7,4 @@
  */
 
 export { default as LinkBlock } from './LinkBlock';
+export { default as LinkBlockSection } from './LinkBlockSection';