@ndla/ui 43.0.1 → 43.0.3

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

@@ -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,41 +69,21 @@ 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>
   );
 };
 

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';

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';