@ndla/ui 50.2.2 → 50.4.1

package/src/LinkBlock/LinkBlock.tsx

@@ -8,12 +8,12 @@
 
 import { format } from 'date-fns';
 import { enGB, nb, nn } from 'date-fns/locale';
+import { useMemo } from 'react';
 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 { Forward, CalendarEd } from '@ndla/icons/common';
+import SafeLink from '@ndla/safelink';
 import { LinkBlockEmbedData } from '@ndla/types-embed';
-import { useMemo } from 'react';
 import { Heading } from '@ndla/typography';
 import { getPossiblyRelativeUrl } from '../utils/relativeUrl';
 

package/src/LinkBlock/LinkBlockSection.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { Children, HTMLAttributes, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
-import { Children, HTMLAttributes, ReactNode } from 'react';
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children: ReactNode;

package/src/List/OrderedList.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { forwardRef, HTMLAttributes } from 'react';
 import styled from '@emotion/styled';
 import { fonts, spacing } from '@ndla/core';
-import { forwardRef, HTMLAttributes } from 'react';
 
 export const generateListResets = (counterName: string) => {
   let styles = '';

package/src/List/UnOrderedList.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { forwardRef, HTMLAttributes } from 'react';
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
-import { forwardRef, HTMLAttributes } from 'react';
 
 const StyledUl = styled.ul`
   padding-left: ${spacing.nsmall} !important;

package/src/Masthead/Masthead.tsx

@@ -6,12 +6,12 @@
  *
  */
 
+import { ReactNode } from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { ReactNode } from 'react';
-import { MessageBanner } from '../Messages';
 import SkipToMainContent from './SkipToMainContent';
+import { MessageBanner } from '../Messages';
 
 const MastheadContent = styled.div`
   justify-content: center;

package/src/Masthead/SkipToMainContent.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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 { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { colors } from '@ndla/core';

package/src/Masthead/index.ts

@@ -8,8 +8,8 @@
 
 import Masthead from './Masthead';
 
-import { getMastheadHeight, useMastheadHeight } from './utils';
 import { default as SkipToMainContent } from './SkipToMainContent';
+import { getMastheadHeight, useMastheadHeight } from './utils';
 
 export { getMastheadHeight, useMastheadHeight, SkipToMainContent };
 

package/src/MediaList/MediaList.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2016-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
@@ -7,6 +7,10 @@
  */
 
 import { ReactNode } from 'react';
+import BEMHelper from 'react-bem-helper';
+import styled from '@emotion/styled';
+import { breakpoints, colors, mq, spacing } from '@ndla/core';
+import { Launch } from '@ndla/icons/common';
 import {
   getLicenseByAbbreviation,
   getResourceTypeNamespace,
@@ -15,11 +19,7 @@ import {
 } from '@ndla/licenses';
 import type { MetaType } from '@ndla/licenses';
 import { LicenseDescription } from '@ndla/notion';
-import BEMHelper from 'react-bem-helper';
 import { uuid } from '@ndla/util';
-import styled from '@emotion/styled';
-import { breakpoints, colors, mq, spacing } from '@ndla/core';
-import { Launch } from '@ndla/icons/common';
 
 const oClasses = new BEMHelper({
   name: 'media',

package/src/Messages/MessageBanner.tsx

@@ -6,10 +6,10 @@
  *
  */
 
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { colors, spacing } from '@ndla/core';
 import { CloseButton } from '@ndla/button';
-import { ReactNode } from 'react';
+import { colors, spacing } from '@ndla/core';
 
 interface WrapperProps {
   small?: boolean;

package/src/Messages/MessageBox.tsx

@@ -6,12 +6,12 @@
  *
  */
 
+import { ReactNode } from 'react';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { CloseButton } from '@ndla/button';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { Forward } from '@ndla/icons/common';
-import { CloseButton } from '@ndla/button';
-import { css } from '@emotion/react';
-import { ReactNode } from 'react';
 
 type MessageBoxType = 'ghost' | 'danger';
 

package/src/Messages/index.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import MessageBox from './MessageBox';
 import MessageBanner from './MessageBanner';
+import MessageBox from './MessageBox';
 
 export { MessageBox, MessageBanner };

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

@@ -8,15 +8,14 @@
 
 import styled from '@emotion/styled';
 import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { ButtonV2, IconButtonV2 } from '@ndla/button';
 import { spacing } from '@ndla/core';
-import { Pencil } from '@ndla/icons/action';
-import { DeleteForever } from '@ndla/icons/editor';
 import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
-import { ButtonV2, IconButtonV2 } from '@ndla/button';
+import { Pencil } from '@ndla/icons/action';
 import { HorizontalMenu } from '@ndla/icons/contentType';
-import { defaultParameters } from '../../../../../stories/defaults';
-
+import { DeleteForever } from '@ndla/icons/editor';
 import Folder from './Folder';
+import { defaultParameters } from '../../../../../stories/defaults';
 
 export default {
   title: 'My NDLA/Folder',

package/src/MyNdla/Resource/Folder.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import styled from '@emotion/styled';
 import { ReactNode } from 'react';
-import { FolderOutlined, FolderSharedOutlined } from '@ndla/icons/contentType';
-import { FileDocumentOutline, Share } from '@ndla/icons/common';
-import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
+import { FileDocumentOutline, Share } from '@ndla/icons/common';
+import { FolderOutlined, FolderSharedOutlined } from '@ndla/icons/contentType';
 import { ResourceTitleLink } from '../../Resource/resourceComponents';
 
 export type LayoutType = 'list' | 'listLarger' | 'block';

package/src/MyNdla/Resource/FolderInput.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { IconButtonV2 } from '@ndla/button';
-import { Cross } from '@ndla/icons/action';
 import { ComponentPropsWithRef, forwardRef, useEffect, useRef } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { IconButtonV2 } from '@ndla/button';
 import { colors, spacing } from '@ndla/core';
 import { InputContainer, FieldErrorMessage, InputV3, FieldHelper, FormControl, Label } from '@ndla/forms';
-import { Done } from '@ndla/icons/editor';
 import { Spinner } from '@ndla/icons';
+import { Cross } from '@ndla/icons/action';
+import { Done } from '@ndla/icons/editor';
 import { composeRefs } from '@ndla/util';
 
 interface Props {

package/src/MyNdla/index.ts

@@ -1,3 +1,11 @@
+/**
+ * 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 Folder from './Resource/Folder';
 import FolderInput from './Resource/FolderInput';
 export { Folder, FolderInput };

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -6,15 +6,15 @@
  *
  */
 
+import groupBy from 'lodash/groupBy';
+import sortBy from 'lodash/sortBy';
 import { RefObject, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing, spacingUnit, colors } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-import groupBy from 'lodash/groupBy';
-import sortBy from 'lodash/sortBy';
-import { useTranslation } from 'react-i18next';
-import { makeSrcQueryString } from '../Image';
 import { MovieType } from './types';
+import { makeSrcQueryString } from '../Image';
 
 const IMAGE_WIDTH = 143;
 

package/src/NDLAFilm/FilmContentCard.tsx

@@ -7,12 +7,12 @@
  */
 
 import { HTMLAttributes } from 'react';
+import styled from '@emotion/styled';
 import { spacing, colors, fonts, breakpoints, misc, mq } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-import styled from '@emotion/styled';
-import { makeSrcQueryString } from '../Image';
 import FilmContentCardTags from './FilmContentCardTags';
 import { MovieResourceType, MovieType } from './types';
+import { makeSrcQueryString } from '../Image';
 
 interface Props extends HTMLAttributes<HTMLElement> {
   movie: MovieType;

package/src/NDLAFilm/FilmContentCardTags.tsx

@@ -1,5 +1,13 @@
-import { spacing, spacingUnit, colors, fonts, misc } from '@ndla/core';
+/**
+ * Copyright (c) 2019-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, spacingUnit, colors, fonts, misc } from '@ndla/core';
 import { MovieResourceType } from './types';
 
 const StyledWrapperDiv = styled.div`

package/src/NDLAFilm/FilmMovieList.tsx

@@ -1,18 +1,19 @@
-/** * Copyright (c) 2016-present, NDLA.
+/**
+ * Copyright (c) 2016-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 { Carousel } from '@ndla/carousel';
 import styled from '@emotion/styled';
 import { IconButtonV2 } from '@ndla/button';
-import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
+import { Carousel } from '@ndla/carousel';
 import { breakpoints, mq, spacing } from '@ndla/core';
+import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
 import FilmContentCard from './FilmContentCard';
-import { MovieResourceType, MovieType } from './types';
 import { StyledHeadingH2 } from './filmStyles';
+import { MovieResourceType, MovieType } from './types';
 
 interface Props {
   movies: MovieType[];

package/src/NDLAFilm/FilmMovieSearch.tsx

@@ -7,14 +7,14 @@
  */
 
 import { useCallback, useMemo } from 'react';
-import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { spacing, mq, breakpoints, colors } from '@ndla/core';
+import SafeLink from '@ndla/safelink';
 import { Option, Select, SingleValue } from '@ndla/select';
+import { StyledHeadingH2 } from './filmStyles';
 import { MovieResourceType } from './types';
 import { OneColumn } from '..';
-import { StyledHeadingH2 } from './filmStyles';
 
 const FilmMovieSearchContainer = styled.div`
   margin: ${spacing.normal} 0 ${spacing.large};

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -8,11 +8,11 @@
 
 import { useCallback, useState } from 'react';
 import styled from '@emotion/styled';
+import { IconButtonV2 } from '@ndla/button';
 import { Carousel } from '@ndla/carousel';
 import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import { IconButtonV2 } from '@ndla/button';
 import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
+import SafeLink from '@ndla/safelink';
 import FilmContentCard from './FilmContentCard';
 import { MovieType } from './types';
 import Image from '../Image';

package/src/NDLAFilm/MovieGrid.tsx

@@ -1,9 +1,17 @@
+/**
+ * Copyright (c) 2018-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 { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing, spacingUnit } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 import FilmContentCard from './FilmContentCard';
-import { MovieResourceType, MovieType } from './types';
 import { setAnimations, StyledHeadingH1 } from './filmStyles';
+import { MovieResourceType, MovieType } from './types';
 
 interface MovieListingProps {
   marginLeft?: number;

package/src/NDLAFilm/filmStyles.ts

@@ -1,3 +1,11 @@
+/**
+ * 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 { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { fonts, spacing, colors, mq, breakpoints, spacingUnit } from '@ndla/core';

package/src/NDLAFilm/index.ts

@@ -6,11 +6,10 @@
  *
  */
 
+import AllMoviesAlphabetically from './AllMoviesAlphabetically';
+import FilmMovieList from './FilmMovieList';
+import FilmMovieSearch from './FilmMovieSearch';
 import FilmSlideshow from './FilmSlideshow';
 import MovieGrid from './MovieGrid';
-import AboutNdlaFilm from './AboutNdlaFilm';
-import FilmMovieSearch from './FilmMovieSearch';
-import FilmMovieList from './FilmMovieList';
-import AllMoviesAlphabetically from './AllMoviesAlphabetically';
 
-export { FilmSlideshow, MovieGrid, AboutNdlaFilm, FilmMovieSearch, FilmMovieList, AllMoviesAlphabetically };
+export { FilmSlideshow, MovieGrid, FilmMovieSearch, FilmMovieList, AllMoviesAlphabetically };

package/src/NDLAFilm/types.ts

@@ -1,3 +1,11 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 export interface MovieType {
   id: number | string;
   metaDescription: string;

package/src/Navigation/NavigationBox.tsx

@@ -1,14 +1,22 @@
+/**
+ * Copyright (c) 2020-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 { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { SafeLinkButton } from '@ndla/safelink';
 import { ButtonV2 } from '@ndla/button';
 import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
-import { css } from '@emotion/react';
-import { Switch } from '@ndla/switch';
-import { uuid } from '@ndla/util';
-import { useTranslation } from 'react-i18next';
 import { HumanMaleBoard } from '@ndla/icons/common';
+import { SafeLinkButton } from '@ndla/safelink';
+import { Switch } from '@ndla/switch';
 import { Heading } from '@ndla/typography';
+import { uuid } from '@ndla/util';
 
 const StyledWrapper = styled.nav`
   margin: 20px 0 34px;

package/src/Notion/Notion.tsx

@@ -6,8 +6,8 @@
  *
  */
 import { Fragment, ReactNode } from 'react';
-import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 
 const ContentWrapper = styled.div`

package/src/Notion/NotionImage.tsx

@@ -2,14 +2,15 @@
  * 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. *
+ * LICENSE file in the root directory of this source tree.
+ *
  */
 
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { animations, breakpoints, mq, spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
-import Image from '../Image';
 import { Figure, FigureOpenDialogButton } from '../Figure';
+import Image from '../Image';
 
 const StyledImageWrapper = styled.div`
   overflow: hidden;

package/src/Notion/index.ts

@@ -1 +1,9 @@
+/**
+ * Copyright (c) 2021-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 export { default as Notion } from './Notion';

package/src/Programme/Programme.tsx

@@ -1,9 +1,17 @@
+/**
+ * Copyright (c) 2020-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 { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 import { Heading } from '@ndla/typography';
-import LayoutItem, { OneColumn } from '../Layout';
 import ProgrammeSubjects, { GradesProps } from './ProgrammeSubjects';
+import LayoutItem, { OneColumn } from '../Layout';
 import MessageBox from '../Messages/MessageBox';
 const StyledWrapper = styled.div`
   display: flex;

package/src/Programme/ProgrammeSubjects.tsx

@@ -11,8 +11,8 @@ import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import { SafeLinkButton } from '@ndla/safelink';
-import { NavigationBox } from '../Navigation';
 import { MessageBox } from '../Messages';
+import { NavigationBox } from '../Navigation';
 
 const GradesMenu = styled.ul`
   display: flex;

package/src/ProgrammeCard/ProgrammeCard.tsx

@@ -7,8 +7,8 @@
  */
 
 import styled from '@emotion/styled';
-import SafeLink from '@ndla/safelink';
 import { spacing, colors, misc, breakpoints, mq, fonts } from '@ndla/core';
+import SafeLink from '@ndla/safelink';
 
 interface Image {
   src: string;