@ndla/ui 50.2.2 → 50.4.0

package/src/SearchTypeResult/SearchItem.tsx

@@ -6,18 +6,18 @@
  *
  */
 
+import parse from 'html-react-parser';
 import { ReactNode, useRef } from 'react';
 import styled from '@emotion/styled';
-import parse from 'html-react-parser';
 
-import SafeLink from '@ndla/safelink';
 import { animations, colors, fonts, spacing } from '@ndla/core';
+import SafeLink from '@ndla/safelink';
 
-import { ContentType } from './SearchTypeResult';
-import constants from '../model';
 import ItemContexts, { ItemContextsType } from './components/ItemContexts';
-import ItemTopicHeader from './components/ItemTopicHeader';
 import ItemResourceHeader from './components/ItemResourceHeader';
+import ItemTopicHeader from './components/ItemTopicHeader';
+import { ContentType } from './SearchTypeResult';
+import constants from '../model';
 const { contentTypes } = constants;
 
 interface ItemTypeProps {

package/src/SearchTypeResult/SearchItemList.tsx

@@ -6,17 +6,17 @@
  *
  */
 
+import parse from 'html-react-parser';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-import parse from 'html-react-parser';
 import styled from '@emotion/styled';
 
 import { animations, colors, fonts, spacing } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 
-import ContentTypeBadge from '../ContentTypeBadge';
 import ItemContexts from './components/ItemContexts';
 import { SearchItemType } from './SearchItem';
+import ContentTypeBadge from '../ContentTypeBadge';
 import constants from '../model';
 const { contentTypes } = constants;
 

package/src/SearchTypeResult/SearchItems.tsx

@@ -7,12 +7,12 @@
  */
 
 import { memo } from 'react';
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import SearchItem, { SearchItemProps } from './SearchItem';
-import { ContentType } from './SearchTypeResult';
 import SearchItemList from './SearchItemList';
+import { ContentType } from './SearchTypeResult';
 
 const Wrapper = styled.div`
   width: 100%;

package/src/SearchTypeResult/SearchNotionsResult.tsx

@@ -9,8 +9,8 @@
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { fonts, mq, breakpoints, spacing, colors } from '@ndla/core';
 import { IconButtonV2 } from '@ndla/button';
+import { fonts, mq, breakpoints, spacing, colors } from '@ndla/core';
 import { Cross } from '@ndla/icons/action';
 
 const Wrapper = styled.div`

package/src/SearchTypeResult/SearchSubjectItem.tsx

@@ -6,10 +6,10 @@
  *
  */
 
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import SafeLink from '@ndla/safelink';
 import { spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
+import SafeLink from '@ndla/safelink';
 
 type ItemWrapperProps = {
   backgroundImage?: string;

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -7,13 +7,13 @@
  */
 
 import { MouseEvent, memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 import { Cross } from '@ndla/icons/action';
-import ContentTypeBadge from '../ContentTypeBadge';
 import { ContentType } from './SearchTypeResult';
+import ContentTypeBadge from '../ContentTypeBadge';
 
 const Wrapper = styled.div`
   margin: ${spacing.small} 0;

package/src/SearchTypeResult/SearchTypeResult.tsx

@@ -10,11 +10,11 @@ import { memo, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import { Spinner } from '@ndla/icons';
-import constants from '../model';
-import SearchTypeHeader, { FilterOptionsType } from './SearchTypeHeader';
-import SearchItems from './SearchItems';
-import { SearchItemProps } from './SearchItem';
 import ResultNavigation, { PaginationType } from './ResultNavigation';
+import { SearchItemProps } from './SearchItem';
+import SearchItems from './SearchItems';
+import SearchTypeHeader, { FilterOptionsType } from './SearchTypeHeader';
+import constants from '../model';
 
 const Wrapper = styled.section`
   display: flex;

package/src/SearchTypeResult/SearchViewType.tsx

@@ -6,12 +6,12 @@
  *
  */
 
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
+import { animations, breakpoints, colors, mq } from '@ndla/core';
 import { Grid } from '@ndla/icons/common';
 import { ListCircle } from '@ndla/icons/editor';
-import { animations, breakpoints, colors, mq } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 
 const Wrapper = styled.div`
   display: inline-flex;

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -7,13 +7,13 @@
  */
 
 import { ReactNode, Fragment } from 'react';
-import SafeLink from '@ndla/safelink';
-import { Additional, Core } from '@ndla/icons/common';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { ButtonV2 } from '@ndla/button';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
+import { Additional, Core } from '@ndla/icons/common';
 import { Modal, ModalCloseButton, ModalContent, ModalHeader, ModalTitle, ModalTrigger } from '@ndla/modal';
-import { useTranslation } from 'react-i18next';
+import SafeLink from '@ndla/safelink';
 
 const BreadcrumbPath = styled.div`
   color: ${colors.text.light};

package/src/SearchTypeResult/components/ItemResourceHeader.tsx

@@ -12,11 +12,10 @@ import styled from '@emotion/styled';
 
 import { fonts, spacing } from '@ndla/core';
 
-import { ContentType } from '../SearchTypeResult';
-import { SearchItemType } from '../SearchItem';
-
-import resourceTypeColor from '../../utils/resourceTypeColor';
 import ContentTypeBadge from '../../ContentTypeBadge';
+import resourceTypeColor from '../../utils/resourceTypeColor';
+import { SearchItemType } from '../SearchItem';
+import { ContentType } from '../SearchTypeResult';
 
 interface ItemTypeProps {
   contentType?: ContentType;

package/src/SearchTypeResult/components/ItemTopicHeader.tsx

@@ -11,8 +11,8 @@ import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 
-import { SearchItemType } from '../SearchItem';
 import ContentTypeBadge from '../../ContentTypeBadge';
+import { SearchItemType } from '../SearchItem';
 import { ContentType } from '../SearchTypeResult';
 
 const Wrapper = styled.header`

package/src/SearchTypeResult/components/SubjectFilters.tsx

@@ -13,9 +13,9 @@ import { ButtonV2 } from '@ndla/button';
 import { Plus as PlusIcon } from '@ndla/icons/action';
 
 import { Modal, ModalTrigger } from '@ndla/modal';
-import PopupFilter, { PopupFilterProps } from '../PopupFilter';
-import ActiveFilters from '../ActiveFilters';
 import { FilterProps } from '../ActiveFilterContent';
+import ActiveFilters from '../ActiveFilters';
+import PopupFilter, { PopupFilterProps } from '../PopupFilter';
 
 const FilterButtonText = styled.span`
   display: inline-block;

package/src/SearchTypeResult/index.ts

@@ -6,12 +6,12 @@
  *
  */
 
-import SearchTypeResult from './SearchTypeResult';
-import SearchHeader from './SearchHeader';
 import SearchFieldHeader from './SearchFieldHeader';
+import SearchFilterContent from './SearchFilterContent';
+import SearchHeader from './SearchHeader';
 import SearchNotionsResult from './SearchNotionsResult';
 import SearchSubjectResult from './SearchSubjectResult';
-import SearchFilterContent from './SearchFilterContent';
+import SearchTypeResult from './SearchTypeResult';
 
 export type { ContentType } from './SearchTypeResult';
 

package/src/SectionHeading/SectionHeading.tsx

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

package/src/SectionHeading/index.ts

@@ -1,3 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
 import SectionHeading from './SectionHeading';
 
 export default SectionHeading;

package/src/Subject/SubjectBanner.tsx

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

package/src/Subject/SubjectHeader.tsx

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

package/src/Subject/index.ts

@@ -1,2 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
 export { default as SubjectHeader } from './SubjectHeader';
 export { default as SubjectBanner } from './SubjectBanner';

package/src/Table/Table.stories.tsx

@@ -7,8 +7,8 @@
  */
 
 import { Meta, StoryFn } from '@storybook/react';
-import { defaultParameters } from '../../../../stories/defaults';
 import Table from './Table';
+import { defaultParameters } from '../../../../stories/defaults';
 
 /**
  * Tabeller skal brukes til å presentere data (tabulære data), ikke til utforming. Det anbefales å holde tabellene så enkle som mulig. Ved mer kompleksitet kan data heller deles opp i flere tabeller.

package/src/Table/Table.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2016-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
@@ -6,11 +6,11 @@
  *
  */
 
+import throttle from 'lodash/throttle';
+import { ReactNode, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import throttle from 'lodash/throttle';
-import { ReactNode, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 type ScrollPosition = 'start' | 'end' | 'center';
 

package/src/TagSelector/Control.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { ControlProps } from 'react-select';
 import styled from '@emotion/styled';
 import { spacing, utils } from '@ndla/core';
-import { ControlProps } from 'react-select';
 import { TagType } from './types';
 
 const StyledTagSelectorControl = styled.div`

package/src/TagSelector/DropdownIndicator.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import { useMemo } from 'react';
-import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import { DropdownIndicatorProps, components } from 'react-select';
+import styled from '@emotion/styled';
 import { iconButtonStyle } from '@ndla/button';
+import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import { TagType } from './types';
 
 const StyledIconWrapper = styled.span`

package/src/TagSelector/Input.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { components, InputProps } from 'react-select';
 import { css } from '@emotion/react';
 import { colors, spacing } from '@ndla/core';
-import { components, InputProps } from 'react-select';
 import { TagType } from './types';
 import { StyledValueButton } from './ValueButton';
 

package/src/TagSelector/Menu.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { MenuProps, components } from 'react-select';
 import { css } from '@emotion/react';
 import { colors } from '@ndla/core';
-import { MenuProps, components } from 'react-select';
 import { StyledMenuList } from './MenuList';
 import { TagType } from './types';
 

package/src/TagSelector/MenuList.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { MenuListProps } from 'react-select';
 import styled from '@emotion/styled';
 import { utils } from '@ndla/core';
-import { MenuListProps } from 'react-select';
 import { TagType } from './types';
 
 export const StyledMenuList = styled.div`

package/src/TagSelector/Option.tsx

@@ -7,8 +7,8 @@
  */
 
 import { OptionProps } from 'react-select';
-import { buttonStyleV2 as buttonStyle } from '@ndla/button';
 import styled from '@emotion/styled';
+import { buttonStyleV2 as buttonStyle } from '@ndla/button';
 import { colors, fonts } from '@ndla/core';
 import { Done } from '@ndla/icons/editor';
 import { TagType } from './types';

package/src/TagSelector/SelectContainer.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { ContainerProps } from 'react-select';
 import styled from '@emotion/styled';
 import { colors, fonts, misc } from '@ndla/core';
-import { ContainerProps } from 'react-select';
 import { TagType } from './types';
 
 const StyledContainer = styled.div`

package/src/TagSelector/TagSelector.stories.tsx

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

package/src/TagSelector/TagSelector.tsx

@@ -7,21 +7,21 @@
  */
 
 import { KeyboardEvent, useMemo, useState } from 'react';
-import CreatableSelect from 'react-select/creatable';
+import { useTranslation } from 'react-i18next';
 import { MultiValue, StylesConfig } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
 import styled from '@emotion/styled';
 import { colors, fonts, spacing, utils } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
-import { TagType } from './types';
-import ValueButton from './ValueButton';
+import { createAriaMessages } from './ariaMessages';
+import Control from './Control';
 import DropdownIndicator from './DropdownIndicator';
-import SelectContainer from './SelectContainer';
+import Input from './Input';
+import Menu from './Menu';
 import MenuList from './MenuList';
-import Control from './Control';
 import Option from './Option';
-import Menu from './Menu';
-import { createAriaMessages } from './ariaMessages';
-import Input from './Input';
+import SelectContainer from './SelectContainer';
+import { TagType } from './types';
+import ValueButton from './ValueButton';
 
 const styles: StylesConfig<TagType, true> = {
   menu: () => ({}),

package/src/TagSelector/ValueButton.tsx

@@ -7,8 +7,8 @@
  */
 
 import { MultiValueProps } from 'react-select';
-import { buttonStyleV2 as buttonStyle } from '@ndla/button';
 import styled from '@emotion/styled';
+import { buttonStyleV2 as buttonStyle } from '@ndla/button';
 import { colors, spacing } from '@ndla/core';
 import { Cross } from '@ndla/icons/action';
 import { TagType } from './types';

package/src/TagSelector/ariaMessages.ts

@@ -6,6 +6,7 @@
  *
  */
 
+import { TFunction } from 'i18next';
 import {
   AriaGuidanceProps,
   AriaOnChangeProps,
@@ -14,7 +15,6 @@ import {
   GroupBase,
   OptionsOrGroups,
 } from 'react-select';
-import { TFunction } from 'i18next';
 import { TagType } from './types';
 
 export const createAriaMessages = (t: TFunction) => ({

package/src/ToolboxPage/ToolboxInfo.tsx

@@ -9,8 +9,8 @@
 import { MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Heading, Text } from '@ndla/typography';
-import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
+import { ItemProps } from '../Navigation/NavigationBox';
 
 interface Props {
   id?: string;

package/src/Topic/Loader.tsx

@@ -1,3 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
 import ContentLoader from '../ContentLoader';
 
 const Loader = () => (

package/src/Topic/Topic.tsx

@@ -7,23 +7,23 @@
  */
 
 import { ReactNode, MouseEvent, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { ButtonV2 } from '@ndla/button';
 import { animations, breakpoints, colors, mq, spacing } from '@ndla/core';
-import { Text, Heading } from '@ndla/typography';
-
+import { CursorClick, ExpandTwoArrows } from '@ndla/icons/action';
 import { ChevronDown, ChevronUp, PlayCircleFilled } from '@ndla/icons/common';
+
 import { ModalCloseButton, ModalContent, Modal, ModalHeader, ModalTrigger } from '@ndla/modal';
-import { ButtonV2 } from '@ndla/button';
-import { CursorClick, ExpandTwoArrows } from '@ndla/icons/action';
-import { css } from '@emotion/react';
-import { useTranslation } from 'react-i18next';
 import { EmbedMetaData } from '@ndla/types-embed';
+import { Text, Heading } from '@ndla/typography';
 import Loader from './Loader';
-import { ItemProps } from '../Navigation/NavigationBox';
-import { NavigationBox } from '../Navigation';
+import { getCrop, getFocalPoint } from '../Embed/ImageEmbed';
 import { makeSrcQueryString, ImageCrop, ImageFocalPoint } from '../Image';
 import { MessageBox } from '../Messages';
-import { getCrop, getFocalPoint } from '../Embed/ImageEmbed';
+import { NavigationBox } from '../Navigation';
+import { ItemProps } from '../Navigation/NavigationBox';
 
 type InvertItProps = {
   invertedStyle?: boolean;

package/src/TreeStructure/AddFolderButton.tsx

@@ -8,10 +8,10 @@
 
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import Tooltip from '@ndla/tooltip';
 import styled from '@emotion/styled';
 import { ButtonV2 as Button } from '@ndla/button';
 import { Plus } from '@ndla/icons/action';
+import Tooltip from '@ndla/tooltip';
 import { IFolder } from '@ndla/types-backend/learningpath-api';
 
 interface AddFolderButtonProps {

package/src/TreeStructure/ComboboxButton.tsx

@@ -8,14 +8,14 @@
 
 import { KeyboardEvent, forwardRef } from 'react';
 import styled from '@emotion/styled';
-import { useForwardedRef } from '@ndla/util';
+import { ButtonV2 as Button, IconButtonV2 as IconButton } from '@ndla/button';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';
 import { ChevronUp, ChevronDown } from '@ndla/icons/common';
 import { IFolder } from '@ndla/types-backend/learningpath-api';
-import { ButtonV2 as Button, IconButtonV2 as IconButton } from '@ndla/button';
+import { useForwardedRef } from '@ndla/util';
+import { arrowNavigation } from './arrowNavigation';
 import { treestructureId } from './helperFunctions';
 import { TreeStructureType } from './types';
-import { arrowNavigation } from './arrowNavigation';
 import ContentLoader from '../ContentLoader';
 
 const StyledRow = styled.div`

package/src/TreeStructure/FolderItem.tsx

@@ -9,16 +9,16 @@
 import { CSSProperties, KeyboardEvent, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
+import { ButtonV2 as Button } from '@ndla/button';
+import { colors, spacing, animations, misc, fonts } from '@ndla/core';
 import { ArrowDropDownRounded } from '@ndla/icons/common';
 import { FolderOutlined, FolderShared } from '@ndla/icons/contentType';
 import { Done } from '@ndla/icons/editor';
-import { ButtonV2 as Button } from '@ndla/button';
-import { colors, spacing, animations, misc, fonts } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { IFolder } from '@ndla/types-backend/learningpath-api';
-import { CommonFolderItemsProps } from './types';
 import { arrowNavigation } from './arrowNavigation';
 import { treestructureId } from './helperFunctions';
+import { CommonFolderItemsProps } from './types';
 
 const OpenButton = styled.span`
   display: flex;

package/src/TreeStructure/FolderItems.tsx

@@ -11,8 +11,8 @@ import styled from '@emotion/styled';
 import { animations } from '@ndla/core';
 import { IFolder } from '@ndla/types-backend/learningpath-api';
 import FolderItem from './FolderItem';
-import { CommonFolderItemsProps, NewFolderInputFunc, OnCreatedFunc } from './types';
 import { treestructureId } from './helperFunctions';
+import { CommonFolderItemsProps, NewFolderInputFunc, OnCreatedFunc } from './types';
 
 const StyledUL = styled.ul`
   ${animations.fadeInLeft(animations.durations.fast)};

package/src/TreeStructure/TreeStructure.stories.tsx

@@ -7,13 +7,13 @@
  */
 
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { Meta, StoryFn } from '@storybook/react';
 import styled from '@emotion/styled';
+import { Meta, StoryFn } from '@storybook/react';
 import { IFolder } from '@ndla/types-backend/learningpath-api';
 import { uuid } from '@ndla/util';
+import { flattenFolders } from './helperFunctions';
 import TreeStructure, { TreeStructureProps } from './TreeStructure';
 import { defaultParameters } from '../../../../stories/defaults';
-import { flattenFolders } from './helperFunctions';
 import { FolderInput } from '../MyNdla';
 
 const MY_FOLDERS_ID = 'folders';

package/src/TreeStructure/TreeStructure.tsx

@@ -6,16 +6,16 @@
  *
  */
 
+import uniq from 'lodash/uniq';
 import { useEffect, useState, useMemo, useRef } from 'react';
 import styled from '@emotion/styled';
 import { colors, fonts, misc, utils } from '@ndla/core';
-import uniq from 'lodash/uniq';
 import { IFolder } from '@ndla/types-backend/learningpath-api';
+import AddFolderButton from './AddFolderButton';
+import ComboboxButton from './ComboboxButton';
 import FolderItems from './FolderItems';
 import { flattenFolders, treestructureId } from './helperFunctions';
 import { CommonTreeStructureProps, NewFolderInputFunc } from './types';
-import ComboboxButton from './ComboboxButton';
-import AddFolderButton from './AddFolderButton';
 
 export const MAX_LEVEL_FOR_FOLDERS = 5;
 

package/src/TreeStructure/arrowNavigation.ts

@@ -6,8 +6,8 @@
  *
  */
 
-import { IFolder } from '@ndla/types-backend/learningpath-api';
 import { KeyboardEvent } from 'react';
+import { IFolder } from '@ndla/types-backend/learningpath-api';
 
 const navigateVertical = (
   visibleFolders: IFolder[],