@ndla/ui 43.0.2 → 44.0.0

package/src/Embed/IframeEmbed.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { IframeData, IframeEmbedData } from '@ndla/types-embed';
 import IframeEmbed from './IframeEmbed';
@@ -78,14 +77,20 @@ const opensInNewEmbedData: IframeEmbedData = {
 const opensInnewMetaData: IframeData = {
   iframeImage: {
     id: '65086',
-    metaUrl: 'https://api.test.ndla.no/image-api/v2/images/65086',
-    title: { title: '\nSamtale ', language: 'nb' },
-    alttext: { alttext: ' To ungdommer sitter og snakker. Foto. ', language: 'nb' },
-    imageUrl: 'https://api.test.ndla.no/image-api/raw/IgOjO6og.jpg',
-    size: 176667,
-    contentType: 'image/jpeg',
+    metaUrl: 'https://api.test.ndla.no/image-api/v3/images/65086',
+    title: {
+      title: '\nSamtale ',
+      language: 'nb',
+    },
+    alttext: {
+      alttext: ' To ungdommer sitter og snakker. Foto. ',
+      language: 'nb',
+    },
     copyright: {
-      license: { license: 'COPYRIGHTED', description: 'Copyrighted' },
+      license: {
+        license: 'COPYRIGHTED',
+        description: 'Copyrighted',
+      },
       origin: '',
       creators: [],
       processors: [],
@@ -96,13 +101,29 @@ const opensInnewMetaData: IframeData = {
         },
       ],
     },
-    tags: { tags: ['samtale', 'Dialog', 'gutter'], language: 'nb' },
-    caption: { caption: 'Dette bildet skal bare brukes i casen "Livet på sosiale medier". ', language: 'nb' },
+    tags: {
+      tags: ['samtale', 'Dialog', 'gutter'],
+      language: 'nb',
+    },
+    caption: {
+      caption: 'Dette bildet skal bare brukes i casen "Livet på sosiale medier". ',
+      language: 'nb',
+    },
     supportedLanguages: ['nb'],
     created: '2022-12-02T14:24:19Z',
     createdBy: 'oltQx44eGQp0DwkiR1NRo5qE',
     modelRelease: 'yes',
-    imageDimensions: { width: 1920, height: 804 },
+    image: {
+      fileName: 'IgOjO6og.jpg',
+      size: 176667,
+      contentType: 'image/jpeg',
+      imageUrl: 'https://api.test.ndla.no/image-api/raw/IgOjO6og.jpg',
+      dimensions: {
+        width: 1920,
+        height: 804,
+      },
+      language: 'nb',
+    },
   },
 };
 

package/src/Embed/ImageEmbed.stories.tsx

@@ -6,10 +6,9 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { ImageEmbedData } from '@ndla/types-embed';
-import { IImageMetaInformationV2 } from '@ndla/types-backend/build/image-api';
+import { IImageMetaInformationV3 } from '@ndla/types-backend/build/image-api';
 import ImageEmbed from './ImageEmbed';
 import { defaultParameters } from '../../../../stories/defaults';
 import StoryFavoriteButton from '../../../../stories/StoryFavoriteButton';
@@ -24,17 +23,17 @@ const embedData: ImageEmbedData = {
   url: 'https://api.test.ndla.no/image-api/v2/images/61181',
 };
 
-const metaData: IImageMetaInformationV2 = {
+const metaData: IImageMetaInformationV3 = {
   id: '61181',
-  metaUrl: 'https://api.test.ndla.no/image-api/v2/images/61181',
+  metaUrl: 'https://api.test.ndla.no/image-api/v3/images/61181',
   title: {
     title: '\nHigh angle view of teenage girl with tousled dyed hair dancing at skateboard park\n',
     language: 'nb',
   },
-  alttext: { alttext: 'Tenåringsjente med lyse fletter slenger på håret. Foto. ', language: 'nb' },
-  imageUrl: 'https://api.test.ndla.no/image-api/raw/S81WiNgl.jpg',
-  size: 1685455,
-  contentType: 'image/jpeg',
+  alttext: {
+    alttext: 'Tenåringsjente med lyse fletter slenger på håret. Foto. ',
+    language: 'nb',
+  },
   copyright: {
     license: {
       license: 'CC-BY-NC-4.0',
@@ -42,17 +41,43 @@ const metaData: IImageMetaInformationV2 = {
       url: 'https://creativecommons.org/licenses/by-nc/4.0/',
     },
     origin: 'https://bilder.ntb.no/r/preview/creative/EXuziiZGWno',
-    creators: [{ type: 'photographer', name: 'Maskot' }],
+    creators: [
+      {
+        type: 'photographer',
+        name: 'Maskot',
+      },
+    ],
     processors: [],
-    rightsholders: [{ type: 'rightsholder', name: 'NTB' }],
+    rightsholders: [
+      {
+        type: 'rightsholder',
+        name: 'NTB',
+      },
+    ],
+  },
+  tags: {
+    tags: ['danser', 'kultur', 'identitet'],
+    language: 'nb',
+  },
+  caption: {
+    caption: 'Modellklarert.',
+    language: 'nb',
   },
-  tags: { tags: ['danser', 'kultur', 'identitet'], language: 'nb' },
-  caption: { caption: 'Modellklarert.', language: 'nb' },
   supportedLanguages: ['nb'],
   created: '2022-01-07T08:26:01Z',
   createdBy: 'lA2KgVfhY-fpmgHCYAy5W1DX',
   modelRelease: 'yes',
-  imageDimensions: { width: 2000, height: 1333 },
+  image: {
+    fileName: 'S81WiNgl.jpg',
+    size: 1685455,
+    contentType: 'image/jpeg',
+    imageUrl: 'https://api.test.ndla.no/image-api/raw/S81WiNgl.jpg',
+    dimensions: {
+      width: 2000,
+      height: 1333,
+    },
+    language: 'nb',
+  },
 };
 
 const meta: Meta<typeof ImageEmbed> = {

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' &&
@@ -140,7 +140,7 @@ const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid }: Pro
           sizes={imageSizes ?? sizes}
           alt={altText}
           src={data.image.imageUrl}
-          inGrid={inGrid}
+          border={embedData.border}
           expandButton={
             <ExpandButton
               size={embedData.size}

package/src/ErrorMessage/ErrorMessage.tsx

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

package/src/ErrorMessage/ErrorResourceAccessDenied.tsx

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

package/src/FactBox/FactBox.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, MouseEvent } from 'react';
+import { ReactNode, MouseEvent } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { ButtonV2 } from '@ndla/button';
 import { useTranslation } from 'react-i18next';

package/src/FactBox/FactBoxV2.tsx

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

package/src/Figure/Figure.tsx

@@ -9,7 +9,7 @@
 // N.B These components is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { isFunction as isFunctionHelper, parseMarkdown } from '@ndla/util';
 import { Link as LinkIcon } from '@ndla/icons/common';

package/src/Figure/FigureBylineExpandButton.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { ChevronUp, ChevronDown } from '@ndla/icons/common';
 
 interface Props {

package/src/Figure/FigureExpandButton.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { ArrowCollapse } from '@ndla/icons/common';
 import { ExpandTwoArrows } from '@ndla/icons/action';
 

package/src/Figure/FigureLicense.tsx

@@ -9,7 +9,7 @@
 // N.B This component is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { uuid } from '@ndla/util';
 import { LicenseDescription } from '@ndla/notion';

package/src/Figure/FigureLicenseDialog.tsx

@@ -9,7 +9,7 @@
 // N.B This component is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import Dialog from '../Dialog';
 import { classLicenses, FigureLicenseByline, FigureLicenseCta } from './FigureLicense';
 import { FigureLicense } from './Figure';

package/src/Figure/FigureOpenDialogButton.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Play } from '@ndla/icons/common';
 import { ExpandTwoArrows, CursorClick } from '@ndla/icons/action';
 

package/src/FileList/File.tsx

@@ -3,7 +3,6 @@ import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { Download } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import Tooltip from '@ndla/tooltip';
-import React from 'react';
 import { FileFormat, FileType } from './FileList';
 
 const LinkTextWrapper = styled.div`

package/src/FileList/FileList.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 import File from './File';

package/src/Filter/FilterButtons.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';

package/src/Filter/FilterCarousel.tsx

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

package/src/Filter/FilterList.tsx

@@ -6,7 +6,7 @@
  * FRI OG BEGRENSET
  */
 
-import React, { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 
 import { classes } from './filterClasses';

package/src/Filter/FilterListPhone.tsx

@@ -6,7 +6,7 @@
  * FRI OG BEGRENSET
  */
 
-import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';
 import { ButtonV2 } from '@ndla/button';

package/src/Filter/ToggleItem.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ChangeEvent, ElementType } from 'react';
+import { ChangeEvent, ElementType } from 'react';
 import { classes } from './filterClasses';
 
 interface Props {

package/src/Footer/EditorName.tsx

@@ -6,8 +6,6 @@
  *
  */
 
-import React from 'react';
-
 type EditorNameProps = {
   title: string;
   name: string;

package/src/Footer/Footer.tsx

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

package/src/Footer/FooterLinks.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing, fonts, colors, mq, breakpoints, spacingUnit } from '@ndla/core';
 import SafeLink from '@ndla/safelink';

package/src/Footer/FooterPrivacy.tsx

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

package/src/Footer/FooterText.tsx

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

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import Tabs from '@ndla/tabs';

package/src/Frontpage/FrontpageFilm.tsx

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

package/src/Frontpage/FrontpageHeader.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { colors, spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
 import SafeLink from '@ndla/safelink';

package/src/Frontpage/FrontpageInfo.tsx

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

package/src/Frontpage/FrontpageMultidisciplinarySubject.tsx

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

package/src/Frontpage/FrontpageProgramMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
 import { fonts, breakpoints, mq } from '@ndla/core';

package/src/Frontpage/FrontpageSearch.tsx

@@ -1,4 +1,4 @@
-import React, { FormEvent, useEffect, useRef } from 'react';
+import { FormEvent, useEffect, useRef } from 'react';
 import { isIE, browserVersion, isMobileSafari } from 'react-device-detect';
 import styled from '@emotion/styled';
 import { colors, spacing, mq, breakpoints, animations } from '@ndla/core';

package/src/Frontpage/FrontpageToolbox.tsx

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

package/src/Frontpage/illustrations/Fellesfag.tsx

@@ -6,8 +6,6 @@
  *
  */
 
-import React from 'react';
-
 const Illustration = () => (
   <svg width="90px" height="90px" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

package/src/Frontpage/illustrations/FrontpageHeaderIllustration.tsx

@@ -6,8 +6,6 @@
  *
  */
 
-import React from 'react';
-
 const FrontpageHeaderIllustration = () => (
   <svg width="482" height="68" viewBox="68 48 779 100" xmlns="http://www.w3.org/2000/svg">
     <style>

package/src/Frontpage/illustrations/FrontpageSubjectIllustration.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { css } from '@emotion/react';
 
 const cssStyle = css`

package/src/Frontpage/illustrations/MenuFellesfag.tsx

@@ -6,8 +6,6 @@
  *
  */
 
-import React from 'react';
-
 const Illustration = () => (
   <svg width="940px" height="175px" viewBox="0 0 940 175" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="MenuOpen3" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

package/src/Frontpage/illustrations/MenuStudiespesialiserende.tsx

@@ -6,8 +6,6 @@
  *
  */
 
-import React from 'react';
-
 const Illustration = () => (
   <svg width="940px" height="175px" viewBox="0 0 940 175" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="MenuOpen1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

package/src/Frontpage/illustrations/MenuYrkesfag.tsx

@@ -6,8 +6,6 @@
  *
  */
 
-import React from 'react';
-
 const Illustration = () => (
   <svg width="940px" height="175px" viewBox="0 0 940 175" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="MenuOpen2" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

package/src/Frontpage/illustrations/Studiespesialiserende.tsx

@@ -6,8 +6,6 @@
  *
  */
 
-import React from 'react';
-
 const Illustration = () => (
   <svg width="90px" height="90px" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

package/src/Frontpage/illustrations/Yrkesfag.tsx

@@ -6,8 +6,6 @@
  *
  */
 
-import React from 'react';
-
 const Illustration = () => (
   <svg width="90px" height="90px" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

package/src/Gloss/Gloss.stories.tsx

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

package/src/Grid/Grid.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import styled from '@emotion/styled';
 import { DocsContainer, DocsContainerProps } from '@storybook/addon-docs';

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';
@@ -29,7 +29,6 @@ const GridContainer = styled.div`
     &[data-columns='2x2'],
     &[data-columns='3'],
     &[data-columns='4'] {
-      padding: ${spacing.normal};
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
@@ -46,7 +45,6 @@ const GridContainer = styled.div`
 
   ${mq.range({ from: breakpoints.tabletWide })} {
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    padding: ${spacing.medium};
 
     &[data-columns='3'] {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -71,42 +69,30 @@ const GridContainer = styled.div`
   p {
     word-break: break-word;
   }
-
-  /** The styling here is to handle figures/text until a new figure element is developed */
-  figure,
-  iframe {
-    inset: 0;
-    width: 100% !important;
-    padding: 0;
-  }
-`;
-
-const OuterContainer = styled.div`
-  display: flex;
-  width: 100%;
-  align-items: center;
-
-  &[data-columns='2x2'] {
-    justify-content: center;
-  }
 `;
 
 const Grid = ({ columns, border, children, background, size, ...rest }: GridProps) => {
   const amountOfColumns = children?.length === 3 ? '3' : columns;
 
   return (
-    <OuterContainer>
-      <GridContainer
-        data-frontpage={size}
-        data-border={border}
-        data-columns={amountOfColumns}
-        data-background={background}
-        {...rest}
-      >
-        {children}
-      </GridContainer>
-    </OuterContainer>
+    <GridContainer
+      data-frontpage={size}
+      data-border={border}
+      data-columns={amountOfColumns}
+      data-background={background}
+      {...rest}
+    >
+      {children}
+    </GridContainer>
   );
 };
 
+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/Hero/Hero.stories.tsx

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