@ndla/ui 50.2.1 → 50.4.0

package/src/FactBox/FactBox.tsx

@@ -6,51 +6,147 @@
  *
  */
 
-import { ReactNode, useState } from 'react';
-import BEMHelper from 'react-bem-helper';
+import { ComponentProps, ReactNode, forwardRef, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconButtonV2 } from '@ndla/button';
+import { breakpoints, colors, mq, spacing } from '@ndla/core';
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 
-const classes = new BEMHelper({
-  name: 'factbox',
-  prefix: 'c-',
-});
-
-interface Props {
+interface Props extends ComponentProps<'aside'> {
   children?: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 const StyledAside = styled.aside`
   display: flex;
   flex-direction: column;
   align-items: center;
+  position: relative;
+  z-index: 1;
+  margin: ${spacing.large} 0 calc(${spacing.large} - ${spacing.nsmall}) 0;
+  overflow: hidden;
+  padding-bottom: ${spacing.nsmall};
+
+  @media print {
+    overflow: visible;
+  }
+
+  h2:first-of-type {
+    border-bottom: 2px solid ${colors.brand.primary};
+    margin-top: 0;
+    margin-bottom: ${spacing.normal};
+  }
+
+  h2,
+  h3,
+  h4,
+  h5 {
+    display: block;
+    margin-top: ${spacing.normal};
+    margin-bottom: ${spacing.small};
+    border-bottom: 1px solid ${colors.brand.light};
+  }
 `;
 
 const StyledDiv = styled.div`
   width: 100%;
+  position: relative;
+  color: ${colors.brand.greyDark};
+  padding: ${spacing.normal} ${spacing.normal} ${spacing.large};
+  border: 1px solid ${colors.brand.greyLight};
+  max-height: 190px;
+  transition: max-height 0.6s ease-in-out;
+  overflow: hidden;
+
+  &:after {
+    content: '';
+    text-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 99%;
+    margin: 0.5% 0.5% 0 0.5%;
+    transition: opacity 0.5s cubic-bezier(0.74, -0.04, 0.96, 0.97);
+    /* The 00 after our color is to set its opacity to 0 */
+    background: linear-gradient(${colors.brand.light}00, ${colors.white});
+    opacity: 1;
+    z-index: 0;
+  }
+
+  @media print {
+    max-height: revert;
+    &:after {
+      display: none;
+    }
+  }
+
+  & > ul:not([class]),
+  :not(li) > ul:not([class]) {
+    ${mq.range({ from: breakpoints.desktop })} {
+      margin-left: ${spacing.normal};
+    }
+  }
+
+  & > ol:not([class]),
+  :not(li) > ol:not([class]) {
+    ${mq.range({ from: breakpoints.desktop })} {
+      margin-left: ${spacing.large};
+    }
+  }
 `;
 
 const StyledIconButton = styled(IconButtonV2)`
   margin-top: -20px;
   z-index: 1;
+
+  @media print {
+    display: none;
+  }
+`;
+
+const expandedStyle = css`
+  max-height: 500vh;
+`;
+
+const expandedContentStyle = css`
+  max-height: 500vh;
+  &:after {
+    opacity: 0;
+    z-index: -1;
+  }
 `;
 
-const FactBox = ({ children }: Props) => {
-  const { t } = useTranslation();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const additional = isOpen ? 'expanded' : '';
-
-  return (
-    <StyledAside {...classes(undefined, undefined, additional)}>
-      <StyledDiv {...classes('content')}>{children}</StyledDiv>
-      <StyledIconButton onClick={() => setIsOpen((p) => !p)} aria-label={t(`factbox.${isOpen ? 'close' : 'open'}`)}>
-        {isOpen ? <ChevronUp /> : <ChevronDown />}
-      </StyledIconButton>
-    </StyledAside>
-  );
-};
+const FactBox = forwardRef<HTMLElement, Props>(
+  ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {
+    const { t } = useTranslation();
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    useEffect(() => {
+      if (open !== undefined) {
+        setIsOpen(open);
+      }
+    }, [open]);
+
+    const onClick = useCallback(() => {
+      const newOpen = !isOpen;
+      setIsOpen(newOpen);
+      onOpenChange?.(newOpen);
+    }, [isOpen, onOpenChange]);
+
+    return (
+      <StyledAside {...rest} css={[isOpen ? expandedStyle : undefined]} ref={ref}>
+        <StyledDiv css={isOpen ? expandedContentStyle : undefined}>{children}</StyledDiv>
+        <StyledIconButton onClick={onClick} aria-label={t(`factbox.${isOpen ? 'close' : 'open'}`)}>
+          {isOpen ? <ChevronUp /> : <ChevronDown />}
+        </StyledIconButton>
+      </StyledAside>
+    );
+  },
+);
 
 export default FactBox;

package/src/FactBox/index.ts

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

package/src/Figure/FigureOpenDialogButton.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import { Play } from '@ndla/icons/common';
 import { ExpandTwoArrows, CursorClick } from '@ndla/icons/action';
+import { Play } from '@ndla/icons/common';
 
 interface Props {
   type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external' | 'audio';

package/src/FileList/File.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-import SafeLink from '@ndla/safelink';
+import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { Download } from '@ndla/icons/common';
+import SafeLink from '@ndla/safelink';
 
 interface Props {
   title: string;

package/src/FileList/FileList.stories.tsx

@@ -8,8 +8,8 @@
 
 import { Meta, StoryObj } from '@storybook/react';
 import File from './File';
-import { defaultParameters } from '../../../../stories/defaults';
 import FileList from './FileList';
+import { defaultParameters } from '../../../../stories/defaults';
 
 export default {
   title: 'Components/FileList',

package/src/FileList/FileList.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { colors, fonts, spacing } from '@ndla/core';
 
 interface Props {
   children: ReactNode;

package/src/FileList/index.ts

@@ -1,3 +1,11 @@
+/**
+ * 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 FileList from './FileList';
 
 export { default as File } from './File';

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