@ndla/ui 43.0.2 → 44.0.0

package/src/Hero/Hero.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, mq, spacing, spacingUnit } from '@ndla/core';
 import {

package/src/Image/Image.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { colors } from '@ndla/core';
 import styled from '@emotion/styled';
 import LazyLoadImage from './LazyLoadImage';
@@ -49,7 +49,7 @@ const StyledImageWrapper = styled.div`
     display: flex;
     justify-content: center;
   }
-  &[data-in-grid='true'] {
+  &[data-border='true'] {
     border: 1px solid ${colors.brand.tertiary};
     border-bottom: 0;
     border-radius: 4px;
@@ -59,7 +59,7 @@ const StyledImageWrapper = styled.div`
 `;
 
 const StyledImage = styled.img`
-  &[data-in-grid='true'] {
+  &[data-border='true'] {
     border-radius: 3px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
@@ -78,7 +78,7 @@ interface Props {
   expandButton?: ReactNode;
   crop?: ImageCrop;
   focalPoint?: ImageFocalPoint;
-  inGrid?: boolean;
+  border?: string;
 }
 
 const Image = ({
@@ -92,7 +92,7 @@ const Image = ({
   sizes = '(min-width: 1024px) 1024px, 100vw',
   expandButton,
   fallbackWidth = 1024,
-  inGrid,
+  border,
   ...rest
 }: Props) => {
   const srcSet = rest.srcSet ?? getSrcSet(src, crop, focalPoint);
@@ -100,8 +100,8 @@ const Image = ({
 
   if (contentType && contentType === 'image/gif') {
     return (
-      <StyledImageWrapper data-in-grid={inGrid}>
-        <StyledImage alt={alt} src={`${src}`} {...rest} data-in-grid={inGrid} />
+      <StyledImageWrapper data-border={border}>
+        <StyledImage alt={alt} src={`${src}`} {...rest} data-border={border} />
       </StyledImageWrapper>
     );
   }
@@ -121,10 +121,10 @@ const Image = ({
   }
 
   return (
-    <StyledImageWrapper data-svg={contentType === 'image/svg+xml'} data-in-grid={inGrid}>
+    <StyledImageWrapper data-svg={contentType === 'image/svg+xml'} data-border={border}>
       <picture>
         <source type={contentType} srcSet={srcSet} sizes={sizes} />
-        <StyledImage alt={alt} src={`${src}?${queryString}`} {...rest} data-in-grid={inGrid} />
+        <StyledImage alt={alt} src={`${src}?${queryString}`} {...rest} data-border={border} />
       </picture>
       {expandButton}
     </StyledImageWrapper>

package/src/Image/ImageLink.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { makeSrcQueryString } from './Image';
 import { ImageCrop, ImageFocalPoint } from '.';

package/src/Image/LazyLoadImage.tsx

@@ -6,8 +6,6 @@
  *
  */
 
-import React from 'react';
-
 interface Props {
   alt: string;
   src: string;

package/src/Image/__tests__/Image-test.jsx

@@ -8,7 +8,6 @@
 
 /* eslint-env jest */
 
-import React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Image, { makeSrcQueryString } from '../Image';

package/src/Image/__tests__/__snapshots__/Image-test.jsx.snap

@@ -20,7 +20,7 @@ exports[`Image renderers correctly 1`] = `
   justify-content: center;
 }
 
-.emotion-0[data-in-grid='true'] {
+.emotion-0[data-border='true'] {
   border: 1px solid #a5bcd3;
   border-bottom: 0;
   border-radius: 4px;
@@ -28,7 +28,7 @@ exports[`Image renderers correctly 1`] = `
   border-bottom-right-radius: 0;
 }
 
-.emotion-1[data-in-grid='true'] {
+.emotion-1[data-border='true'] {
   border-radius: 3px;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
@@ -72,7 +72,7 @@ exports[`Image with crop and focalpoint props renderers correctly 1`] = `
   justify-content: center;
 }
 
-.emotion-0[data-in-grid='true'] {
+.emotion-0[data-border='true'] {
   border: 1px solid #a5bcd3;
   border-bottom: 0;
   border-radius: 4px;
@@ -80,7 +80,7 @@ exports[`Image with crop and focalpoint props renderers correctly 1`] = `
   border-bottom-right-radius: 0;
 }
 
-.emotion-1[data-in-grid='true'] {
+.emotion-1[data-border='true'] {
   border-radius: 3px;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
@@ -124,7 +124,7 @@ exports[`Lazyloaded image renderers correctly 1`] = `
   justify-content: center;
 }
 
-.emotion-0[data-in-grid='true'] {
+.emotion-0[data-border='true'] {
   border: 1px solid #a5bcd3;
   border-bottom: 0;
   border-radius: 4px;

package/src/InfoBlock/InfoBlock.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing, fonts, colors } from '@ndla/core';
 

package/src/InfoBox/InfoBox.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 interface Props {
   children?: ReactNode;

package/src/InfoWidget/InfoWidget.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Forward } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import { colors, fonts, spacing } from '@ndla/core';

package/src/KeyFigure/KeyFigure.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { defaultParameters } from '../../../../stories/defaults';
 import KeyFigure from './KeyFigure';

package/src/KeyFigure/KeyFigure.tsx

@@ -16,7 +16,6 @@ const ContentWrapper = styled.div`
   align-items: center;
   padding: ${spacing.small};
   align-items: center;
-  max-width: 215px;
 `;
 
 const StyledImage = styled.img`

package/src/LanguageSelector/LanguageSelector.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { LanguageSelector } from '@ndla/ui';
 import styled from '@emotion/styled';

package/src/LanguageSelector/LanguageSelector.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
 import { ButtonV2 } from '@ndla/button';
 import { useTranslation } from 'react-i18next';

package/src/Layout/Content.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;

package/src/Layout/LayoutItem.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;

package/src/Layout/OneColumn.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 
 const classes = BEMHelper({

package/src/Layout/PageContainer.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 
 const classes = new BEMHelper({

package/src/LearningPaths/LearningPathContent.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { mq, breakpoints, colors, spacing, spacingUnit } from '@ndla/core';
 

package/src/LearningPaths/LearningPathInformation.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { spacing, spacingUnit, breakpoints, mq, colors } from '@ndla/core';
 import { getLicenseByAbbreviation } from '@ndla/licenses';

package/src/LearningPaths/LearningPathLastStepNavigation.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import SafeLink from '@ndla/safelink';

package/src/LearningPaths/LearningPathMenu.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { defaultParameters } from '../../../../stories/defaults';
 import { contentTypes } from '../model/ContentType';

package/src/LearningPaths/LearningPathMenu.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';

package/src/LearningPaths/LearningPathMenuAside.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { Time } from '@ndla/icons/common';

package/src/LearningPaths/LearningPathMenuAsideCopyright.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { User } from '@ndla/icons/common';
 import { spacing, fonts, colors } from '@ndla/core';

package/src/LearningPaths/LearningPathMenuContent.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations, utils } from '@ndla/core';

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, useCallback, useState } from 'react';
+import { ReactNode, useCallback, useState } from 'react';
 import { spacing, mq, breakpoints, colors } from '@ndla/core';
 import { ModalHeader, ModalBody, ModalTrigger, ModalCloseButton, Modal, ModalContent } from '@ndla/modal';
 import { css } from '@emotion/react';

package/src/LearningPaths/LearningPathMobileHeader.tsx

@@ -8,7 +8,6 @@
 
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { LearningPathBadge } from '../ContentTypeBadge';
 

package/src/LearningPaths/LearningPathMobileStepInfo.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { mq, breakpoints, typography } from '@ndla/core';
 import { useTranslation } from 'react-i18next';

package/src/LearningPaths/LearningPathSticky.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { colors, spacing, animations, mq, breakpoints } from '@ndla/core';

package/src/LearningPaths/LearningPathWrapper.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing, spacingUnit, breakpoints, mq } from '@ndla/core';
 

package/src/LetterFilter/LetterFilter.stories.tsx

@@ -8,7 +8,6 @@
 
 import { Meta, StoryFn } from '@storybook/react';
 import { useArgs } from '@storybook/client-api';
-import React from 'react';
 import { defaultParameters } from '../../../../stories/defaults';
 import LetterFilter from './LetterFilter';
 

package/src/LetterFilter/LetterFilter.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { colors, fonts, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { IconButtonV2 as IconButton } from '@ndla/button';

package/src/LicenseByline/EmbedByline.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';

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

@@ -10,15 +10,9 @@ 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 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 +68,7 @@ const StyledCalenderEd = styled(CalendarEd)`
   color: ${colors.icon.iconBlue};
 `;
 
-const LinkBlock = ({ title, language, date, url }: Props) => {
+const LinkBlock = ({ title, language, date, url }: Omit<LinkBlockEmbedData, 'resource'>) => {
   return (
     <StyledSafeLink to={url}>
       <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';

package/src/Logo/Logo.tsx

@@ -7,7 +7,6 @@
  */
 /* eslint-disable max-len */
 
-import React from 'react';
 import BEMHelper from 'react-bem-helper';
 import SafeLink from '@ndla/safelink';
 import SvgLogo from './SvgLogo';

package/src/Logo/SvgLogo.tsx

@@ -7,7 +7,6 @@
  */
 /* eslint-disable max-len */
 
-import React from 'react';
 import { logoClasses } from './Logo';
 
 const LogoText = (locale?: string) => {

package/src/Masthead/Masthead.tsx

@@ -9,7 +9,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { MessageBanner } from '../Messages';
 import SkipToMainContent from './SkipToMainContent';
 

package/src/Masthead/MastheadSearchModal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useState } from 'react';
+import { ReactNode, useCallback, useState } from 'react';
 import { Drawer, Modal, ModalTrigger } from '@ndla/modal';
 import { IconButtonV2 as IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';

package/src/Masthead/SkipToMainContent.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { colors } from '@ndla/core';

package/src/MediaList/MediaList.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import {
   getLicenseByAbbreviation,
   getResourceTypeNamespace,

package/src/Messages/MessageBanner.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { colors, spacing } from '@ndla/core';
 // @ts-ignore

package/src/Messages/MessageBox.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { InformationOutline, HumanMaleBoard, Forward, WarningOutline } from '@ndla/icons/common';

package/src/Messages/MessageBoxTag.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styled from '@emotion/styled';

package/src/MultidisciplinarySubject/List.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, mq } from '@ndla/core';
 

package/src/MultidisciplinarySubject/ListItem.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { colors } from '@ndla/core';
 import SafeLink from '@ndla/safelink';

package/src/MultidisciplinarySubject/MultidisciplinarySubject.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { breakpoints, mq } from '@ndla/core';

package/src/MyNdla/Resource/Folder.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { Pencil } from '@ndla/icons/action';
 import { DeleteForever } from '@ndla/icons/editor';

package/src/MyNdla/Resource/Folder.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { FolderOutlined, FolderShared } from '@ndla/icons/contentType';
 import { FileDocumentOutline, Share } from '@ndla/icons/common';
 import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';