@ndla/ui 50.2.2 → 50.4.0

package/src/Filter/FilterButtons.tsx

@@ -6,14 +6,14 @@
  *
  */
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 import { Cross as CrossIcon, Plus as PlusIcon } from '@ndla/icons/action';
 import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';
-import ToggleItem from './ToggleItem';
 import FilterCarousel from './FilterCarousel';
+import ToggleItem from './ToggleItem';
 
 const StyledHeading = styled.h3`
   ${fonts.sizes('16px', '32px')};

package/src/Filter/FilterCarousel.tsx

@@ -8,10 +8,10 @@
 
 import { ReactChild, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
+import { useSwipeable } from 'react-swipeable';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
-import { useSwipeable } from 'react-swipeable';
 
 interface Props {
   children: ReactChild[];

package/src/Filter/FilterList.tsx

@@ -1,9 +1,9 @@
-/*
+/**
  * 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.
- * FRI OG BEGRENSET
+ *
  */
 
 import { ReactNode, useState } from 'react';

package/src/Filter/FilterListPhone.tsx

@@ -1,16 +1,16 @@
-/*
+/**
  * 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.
- * FRI OG BEGRENSET
+ *
  */
 
+import debounce from 'lodash/debounce';
 import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { ButtonV2 } from '@ndla/button';
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';
-import { ButtonV2 } from '@ndla/button';
-import debounce from 'lodash/debounce';
 import { classes } from './filterClasses';
 import ToggleItem from './ToggleItem';
 import ActiveFilters from '../Search/ActiveFilters';

package/src/Filter/ToggleItem.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2017-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the

package/src/Filter/filterClasses.ts

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2018-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the

package/src/Footer/Footer.stories.tsx

@@ -8,10 +8,10 @@
 
 import { Meta, StoryObj } from '@storybook/react';
 import { EmailOutline, Facebook, Instagram, LinkedIn, Share, Youtube } from '@ndla/icons/common';
+import { EditorName } from './EditorName';
 import Footer from './Footer';
-import { defaultParameters } from '../../../../stories/defaults';
 import { FooterText } from './FooterText';
-import { EditorName } from './EditorName';
+import { defaultParameters } from '../../../../stories/defaults';
 import { LanguageSelector } from '../LanguageSelector';
 
 const mockCommonLinks = [

package/src/Footer/Footer.tsx

@@ -7,13 +7,13 @@
  */
 
 import { ReactNode } from 'react';
-import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
 import { colors, spacing, fonts, mq, breakpoints, spacingUnit } from '@ndla/core';
 import { FooterHeaderIcon } from '@ndla/icons/common';
-import { OneColumn } from '../Layout';
 import FooterLinks from './FooterLinks';
 import FooterPrivacy from './FooterPrivacy';
+import { OneColumn } from '../Layout';
 import { Locale } from '../types';
 
 const StyledBackground = styled.div`

package/src/Footer/FooterLinks.tsx

@@ -1,9 +1,17 @@
+/**
+ * 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 { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { spacing, fonts, colors, mq, breakpoints, spacingUnit } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
 import { Forward, Launch } from '@ndla/icons/common';
-import { useTranslation } from 'react-i18next';
+import SafeLink from '@ndla/safelink';
 
 const StyledLinksWrapper = styled.div`
   display: flex;

package/src/Footer/index.ts

@@ -6,8 +6,8 @@
  *
  */
 
+import { EditorName } from './EditorName';
 import Footer from './Footer';
 import { FooterText } from './FooterText';
-import { EditorName } from './EditorName';
 
 export { Footer, FooterText, EditorName };

package/src/FramedContent/FramedContent.stories.tsx

@@ -7,9 +7,9 @@
  */
 
 import { Meta, StoryObj } from '@storybook/react';
-import { defaultParameters } from '../../../../stories/defaults';
 import FramedContent from './FramedContent';
 import FigureImage from '../../../../stories/article/FigureImage';
+import { defaultParameters } from '../../../../stories/defaults';
 
 export default {
   title: 'Components/FramedContent',

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -1,12 +1,20 @@
+/**
+ * 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 { Fragment } from 'react';
-import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-import Tabs from '@ndla/tabs';
-import SafeLink from '@ndla/safelink';
+import styled from '@emotion/styled';
 import { colors, fonts, mq, breakpoints } from '@ndla/core';
+import SafeLink from '@ndla/safelink';
+import Tabs from '@ndla/tabs';
 import ContentLoader from '../ContentLoader';
-import { MessageBox } from '../Messages';
 import { ToggleItem } from '../Filter';
+import { MessageBox } from '../Messages';
 
 const StyledWrapper = styled.nav`
   margin: 32px 0 0;

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -7,12 +7,12 @@
  */
 
 import { CSSProperties, ReactNode, useMemo } from 'react';
-import { spacing, spacingUnit } from '@ndla/core';
 import styled from '@emotion/styled';
+import { spacing, spacingUnit } from '@ndla/core';
 import { Heading, Text } from '@ndla/typography';
-import { Article } from '../types';
 import { ArticleByline } from '../Article';
 import { useMastheadHeight } from '../Masthead';
+import { Article } from '../types';
 
 interface Props {
   article: Omit<Article, 'footNotes'>;

package/src/Gloss/Gloss.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import styled from '@emotion/styled';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { colors, spacing, misc, fonts } from '@ndla/core';
+import styled from '@emotion/styled';
 import { AccordionRoot, AccordionItem, AccordionHeader, AccordionContent } from '@ndla/accordion';
+import { colors, spacing, misc, fonts } from '@ndla/core';
 import { IGlossData, IGlossExample } from '@ndla/types-backend/concept-api';
-import { useMemo } from 'react';
-import SpeechControl from '../AudioPlayer/SpeechControl';
 import GlossExample from './GlossExample';
+import SpeechControl from '../AudioPlayer/SpeechControl';
 
 export interface Props {
   title: {

package/src/Grid/Grid.stories.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { Meta, StoryFn } from '@storybook/react';
 import styled from '@emotion/styled';
 import { DocsContainer, DocsContainerProps } from '@storybook/addon-docs';
+import { Meta, StoryFn } from '@storybook/react';
 import { colors } from '@ndla/core';
 import Grid from './Grid';
 import { defaultParameters } from '../../../../stories/defaults';

package/src/Grid/Grid.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { HTMLAttributes, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
-import { HTMLAttributes, ReactNode } from 'react';
 
 export interface GridProps {
   columns: '2' | '4' | '2x2';

package/src/Hero/Hero.stories.tsx

@@ -8,8 +8,8 @@
 
 import styled from '@emotion/styled';
 import { Meta, StoryFn } from '@storybook/react';
-import { defaultParameters } from '../../../../stories/defaults';
 import { Hero } from './Hero';
+import { defaultParameters } from '../../../../stories/defaults';
 
 const StyledDiv = styled.div`
   width: 1000px;

package/src/Image/Image.tsx

@@ -7,8 +7,8 @@
  */
 
 import { ReactNode } from 'react';
-import { colors } from '@ndla/core';
 import styled from '@emotion/styled';
+import { colors } from '@ndla/core';
 
 export interface ImageCrop {
   startX: number;

package/src/Image/ImageLink.tsx

@@ -8,8 +8,8 @@
 
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { makeSrcQueryString } from './Image';
 import { ImageCrop, ImageFocalPoint } from '.';
+import { makeSrcQueryString } from './Image';
 
 const StyledLink = styled.a`
   box-shadow: inset 0 0;

package/src/KeyFigure/KeyFigure.stories.tsx

@@ -7,8 +7,8 @@
  */
 
 import { Meta, StoryFn } from '@storybook/react';
-import { defaultParameters } from '../../../../stories/defaults';
 import KeyFigure from './KeyFigure';
+import { defaultParameters } from '../../../../stories/defaults';
 const args = {
   title: '500',
   subtitle: 'TVERRFAGLIGE RESSURSER',

package/src/KeyFigure/KeyFigure.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the

package/src/KeyFigure/index.ts

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2023-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the

package/src/LanguageSelector/LanguageSelector.stories.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { Meta, StoryFn } from '@storybook/react';
-import { LanguageSelector } from '@ndla/ui';
 import styled from '@emotion/styled';
+import { Meta, StoryFn } from '@storybook/react';
 import { colors, spacing } from '@ndla/core';
+import { LanguageSelector } from '@ndla/ui';
 import { defaultParameters } from '../../../../stories/defaults';
 export default {
   title: 'Components/LanguageSelector',

package/src/LanguageSelector/LanguageSelector.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
-import { ButtonV2 } from '@ndla/button';
 import { useTranslation } from 'react-i18next';
-import { ChevronDown } from '@ndla/icons/common';
 import styled from '@emotion/styled';
+import { ButtonV2 } from '@ndla/button';
 import { colors, fonts, spacing } from '@ndla/core';
+import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
+import { ChevronDown } from '@ndla/icons/common';
 
 interface Props<T extends string> {
   locales: T[];

package/src/LanguageSelector/index.ts

@@ -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 LanguageSelector from './LanguageSelector';
 
 export { LanguageSelector };

package/src/LearningPaths/LearningPathLastStepNavigation.tsx

@@ -7,11 +7,11 @@
  */
 
 import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { fonts, spacing, spacingUnit } from '@ndla/core';
+import SafeLink from '@ndla/safelink';
 import { OneColumn, LayoutItem } from '../index';
 
 const TextWrapper = styled.div`

package/src/LearningPaths/LearningPathMenu.stories.tsx

@@ -7,9 +7,9 @@
  */
 
 import { Meta, StoryFn } from '@storybook/react';
+import LearningPathMenu from './LearningPathMenu';
 import { defaultParameters } from '../../../../stories/defaults';
 import { contentTypes } from '../model/ContentType';
-import LearningPathMenu from './LearningPathMenu';
 const args = {
   name: 'Læringssti',
   LearningPathId: 1,

package/src/LearningPaths/LearningPathMenu.tsx

@@ -7,17 +7,17 @@
  */
 
 import { ReactNode, useState } from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
-import Tooltip from '@ndla/tooltip';
-import { useWindowSize } from '@ndla/hooks';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { colors, spacing, misc, mq, breakpoints } from '@ndla/core';
+import { useWindowSize } from '@ndla/hooks';
 import { ArrowExpandRight, ArrowExpandLeft } from '@ndla/icons/action';
-import LearningPathMenuModalWrapper from './LearningPathMenuModalWrapper';
+import Tooltip from '@ndla/tooltip';
 import LearningPathMenuAside from './LearningPathMenuAside';
-import LearningPathMenuIntro from './LearningPathMenuIntro';
 import LearningPathMenuContent from './LearningPathMenuContent';
+import LearningPathMenuIntro from './LearningPathMenuIntro';
+import LearningPathMenuModalWrapper from './LearningPathMenuModalWrapper';
 
 const SIDE_NAV_WIDTH = '372px';
 

package/src/LearningPaths/LearningPathMenuAside.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations } from '@ndla/core';
 import { Time } from '@ndla/icons/common';
 import { SafeLinkButton } from '@ndla/safelink';
-import { useTranslation } from 'react-i18next';
-import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations } from '@ndla/core';
 import LearningPathMenuAsideCopyright from './LearningPathMenuAsideCopyright';
 
 const infoTextCSS = css`

package/src/LearningPaths/LearningPathMenuAsideCopyright.tsx

@@ -7,8 +7,8 @@
  */
 
 import styled from '@emotion/styled';
-import { User } from '@ndla/icons/common';
 import { spacing, fonts, colors } from '@ndla/core';
+import { User } from '@ndla/icons/common';
 import { getLicenseByAbbreviation } from '@ndla/licenses';
 import { LicenseByline } from '@ndla/notion';
 

package/src/LearningPaths/LearningPathMenuContent.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations, utils } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
 import { LearningPathRead } from '@ndla/icons/contentType';
+import SafeLink from '@ndla/safelink';
 import { StepProps } from './LearningPathMenu';
 import ContentTypeBadge from '../ContentTypeBadge';
 import constants from '../model';

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -7,9 +7,9 @@
  */
 
 import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { colors, spacing, spacingUnit, fonts, typography, mq, breakpoints, animations } from '@ndla/core';
 
 const StyledInfoHeader = styled.p`

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -7,13 +7,13 @@
  */
 
 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 { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
+import { spacing, mq, breakpoints, colors } from '@ndla/core';
 import { LearningPath } from '@ndla/icons/contentType';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
+import { ModalHeader, ModalBody, ModalTrigger, ModalCloseButton, Modal, ModalContent } from '@ndla/modal';
 
 const buttonToggleCss = css`
   ${mq.range({ from: breakpoints.tablet })} {

package/src/LearningPaths/LearningPathMobileHeader.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 import { LearningPathBadge } from '../ContentTypeBadge';
 
 const StyledWrapper = styled.div`

package/src/LearningPaths/LearningPathMobileStepInfo.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { mq, breakpoints, typography } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 
 const StyledInfo = styled.div`
   ${typography.smallHeading}

package/src/LearningPaths/LearningPathSticky.tsx

@@ -7,12 +7,12 @@
  */
 
 import { ReactNode } from 'react';
-import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { colors, spacing, animations, mq, breakpoints } from '@ndla/core';
 import { Back, Forward } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
-import { useTranslation } from 'react-i18next';
 
 const FOOTER_HEIGHT = '78px';
 const FOOTER_HEIGHT_MOBILE = spacing.large;

package/src/LearningPaths/index.ts

@@ -6,10 +6,10 @@
  *
  */
 
-import LearningPathMenu from './LearningPathMenu';
 import LearningPathLastStepNavigation from './LearningPathLastStepNavigation';
-import LearningPathMobileStepInfo from './LearningPathMobileStepInfo';
+import LearningPathMenu from './LearningPathMenu';
 import LearningPathMobileHeader from './LearningPathMobileHeader';
+import LearningPathMobileStepInfo from './LearningPathMobileStepInfo';
 
 export { LearningPathWrapper } from './LearningPathWrapper';
 export { LearningPathContent } from './LearningPathContent';

package/src/LetterFilter/LetterFilter.stories.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { Meta, StoryFn } from '@storybook/react';
 import { useArgs } from '@storybook/client-api';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryFn } from '@storybook/react';
 import LetterFilter from './LetterFilter';
+import { defaultParameters } from '../../../../stories/defaults';
 
 export default {
   title: 'Components/LetterFilter',

package/src/LetterFilter/LetterFilter.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import styled from '@emotion/styled';
 import { useMemo } from 'react';
-import { colors, fonts, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
 import { IconButtonV2 as IconButton } from '@ndla/button';
+import { colors, fonts, spacing } from '@ndla/core';
 import { alphabet } from './alphabet';
 
 const StyledUL = styled.ul`

package/src/LicenseByline/EmbedByline.stories.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { Meta, StoryFn } from '@storybook/react';
 import styled from '@emotion/styled';
-import { breakpoints, mq, spacing } from '@ndla/core';
+import { Meta, StoryFn } from '@storybook/react';
 import { IconButtonV2 } from '@ndla/button';
-import { Switch } from '@ndla/switch';
+import { breakpoints, mq, spacing } from '@ndla/core';
 import { HeartOutline } from '@ndla/icons/action';
+import { Switch } from '@ndla/switch';
 import EmbedByline from './EmbedByline';
 import { defaultParameters } from '../../../../stories/defaults';
 

package/src/LicenseByline/EmbedByline.tsx

@@ -8,17 +8,17 @@
 
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
+import { WarningOutline } from '@ndla/icons/common';
 import { getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
-import { ICopyright as ImageCopyright } from '@ndla/types-backend/image-api';
 import { ICopyright as AudioCopyright } from '@ndla/types-backend/audio-api';
 import { IDraftCopyright as ConceptCopyright } from '@ndla/types-backend/concept-api';
+import { ICopyright as ImageCopyright } from '@ndla/types-backend/image-api';
 import { BrightcoveCopyright } from '@ndla/types-embed';
-import { WarningOutline } from '@ndla/icons/common';
-import LicenseLink from './LicenseLink';
 import LicenseDescription from './LicenseDescription';
+import LicenseLink from './LicenseLink';
 
 interface BaseProps {
   topRounded?: boolean;

package/src/LicenseByline/LicenseDescription.tsx

@@ -6,9 +6,9 @@
  *
  */
 
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
-import { ReactNode } from 'react';
 
 interface Props {
   description: ReactNode;

package/src/LicenseByline/LicenseLink.tsx

@@ -7,8 +7,8 @@
  */
 
 import styled from '@emotion/styled';
-import SafeLink from '@ndla/safelink';
 import { colors, fonts } from '@ndla/core';
+import SafeLink from '@ndla/safelink';
 import { LicenseType } from './EmbedByline';
 
 interface Props {

package/src/LicenseByline/index.tsx

@@ -1 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
 export { default as EmbedByline } from './EmbedByline';

package/src/LinkBlock/LinkBlock.stories.tsx

@@ -7,9 +7,9 @@
  */
 
 import { Meta, StoryObj, StoryFn } from '@storybook/react';
+import { LinkBlockSection } from '.';
 import LinkBlock from './LinkBlock';
 import { defaultParameters } from '../../../../stories/defaults';
-import { LinkBlockSection } from '.';
 
 export default {
   title: 'Components/Link Block',