@ndla/ui 50.7.3 → 50.8.1

package/src/Navigation/NavigationBox.tsx

@@ -6,17 +6,17 @@
  *
  */
 
-import { MouseEvent } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
-import { Additional, 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';
+import { MouseEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { breakpoints, colors, misc, mq, spacing } from "@ndla/core";
+import { Additional, 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: ${spacing.normal} 0 ${spacing.mediumlarge};
@@ -29,36 +29,38 @@ const StyledHeadingWrapper = styled.div`
 `;
 
 const StyledHeading = styled(Heading)`
-  &[data-inverted='true'] {
+  &[data-inverted="true"] {
     color: ${colors.white};
   }
 `;
 
 const StyledList = styled.ul`
   list-style: none;
-  margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.xxsmall};
 
-  &[data-direction='horizontal'] {
+  &[data-direction="horizontal"] {
     ${mq.range({ from: breakpoints.tablet })} {
       column-count: 2;
-      column-gap: 20px;
+      gap: 20px;
       display: grid;
       grid-template-columns: repeat(2, 1fr);
     }
     ${mq.range({ from: breakpoints.tabletWide })} {
       column-count: 3;
-      column-gap: 20px;
+      gap: 20px;
       grid-template-columns: repeat(3, 1fr);
     }
   }
 `;
 
 const StyledListItem = styled.li`
-  margin-bottom: 0;
+  padding: 0;
   break-inside: avoid;
 
-  &[data-direction='floating'] {
+  &[data-direction="floating"] {
     display: inline-block;
     margin: 0 ${spacing.xsmall} ${spacing.xsmall} 0;
     ${mq.range({ until: breakpoints.mobileWide })} {
@@ -67,15 +69,6 @@ const StyledListItem = styled.li`
   }
 `;
 
-const StyledSpacingElement = styled.span`
-  display: block;
-  width: 100%;
-  height: 2px;
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: 20px;
-  }
-`;
-
 const StyledButtonContent = styled.span`
   display: flex;
   width: 100%;
@@ -84,13 +77,13 @@ const StyledButtonContent = styled.span`
 `;
 
 const StyledButtonContentText = styled.span`
-  &[data-additional='true'][data-restricted='true'] {
+  &[data-additional="true"][data-restricted="true"] {
     padding-left: ${spacing.medium};
   }
-  &[data-additional='true'] {
+  &[data-additional="true"] {
     padding-left: ${spacing.small};
   }
-  &[data-restricted='true'] {
+  &[data-restricted="true"] {
     padding-left: ${spacing.small};
   }
 `;
@@ -130,7 +123,7 @@ const StyledButtonContentSelected = styled.span`
 
 const StyledListElementWrapper = styled.div`
   position: relative;
-  &[data-additional='true'] {
+  &[data-additional="true"] {
     & > * {
       border: 1px dashed ${colors.brand.dark};
       background-clip: padding-box;
@@ -140,7 +133,7 @@ const StyledListElementWrapper = styled.div`
         background-clip: padding-box;
         color: ${colors.white};
       }
-      &[data-color-mode='light'][data-selected='false'] {
+      &[data-color-mode="light"][data-selected="false"] {
         border: 1px dashed ${colors.brand.tertiary};
       }
     }
@@ -164,26 +157,26 @@ export type ItemProps = {
 
 type Props = {
   heading?: string;
-  colorMode?: 'primary' | 'darker' | 'light' | 'greyLightest' | 'greyLighter';
+  colorMode?: "primary" | "darker" | "light" | "greyLightest" | "greyLighter";
   isButtonElements?: boolean;
   items?: ItemProps[];
   onClick?: (event: MouseEvent<HTMLElement>, id?: string) => void;
   hasAdditionalResources?: boolean;
   showAdditionalResources?: boolean;
-  listDirection?: 'horizontal' | 'floating';
+  listDirection?: "horizontal" | "floating";
   invertedStyle?: boolean;
   onToggleAdditionalResources?: (checked: boolean) => void;
 };
 
 export const NavigationBox = ({
   heading,
-  colorMode = 'primary',
+  colorMode = "primary",
   items,
   isButtonElements,
   onClick,
   hasAdditionalResources,
   showAdditionalResources = false,
-  listDirection = 'horizontal',
+  listDirection = "horizontal",
   invertedStyle,
   onToggleAdditionalResources = () => {},
 }: Props) => {
@@ -201,9 +194,9 @@ export const NavigationBox = ({
           <Switch
             id={uuid()}
             checked={showAdditionalResources}
-            label={t('navigation.additionalTopics')}
+            label={t("navigation.additionalTopics")}
             onChange={onToggleAdditionalResources}
-            css={invertedStyle ? { color: '#fff' } : {}}
+            css={invertedStyle ? { color: "#fff" } : {}}
           />
         )}
       </StyledHeadingWrapper>
@@ -216,8 +209,8 @@ export const NavigationBox = ({
               data-selected={item.selected}
             >
               <ListElementType
-                to={item.url ?? ''}
-                colorTheme={item.selected ? 'darker' : colorMode}
+                to={item.url ?? ""}
+                colorTheme={item.selected ? "darker" : colorMode}
                 size="medium"
                 shape="sharp"
                 css={listElementStyle}
@@ -234,7 +227,7 @@ export const NavigationBox = ({
                     data-color-mode={colorMode}
                   >
                     <StyledMarksWrapper>
-                      {item.isAdditionalResource && <StyledAdditional aria-label={t('resource.additionalTooltip')} />}
+                      {item.isAdditionalResource && <StyledAdditional aria-label={t("resource.additionalTooltip")} />}
                       {item.isRestrictedResource && (
                         <StyledHumanBoardIconWrapper>
                           <HumanMaleBoard />
@@ -247,7 +240,6 @@ export const NavigationBox = ({
                 </StyledButtonContent>
               </ListElementType>
             </StyledListElementWrapper>
-            {listDirection !== 'floating' && <StyledSpacingElement />}
           </StyledListItem>
         ))}
       </StyledList>

package/src/Navigation/index.ts

@@ -6,6 +6,6 @@
  *
  */
 
-import NavigationBox from './NavigationBox';
+import NavigationBox from "./NavigationBox";
 
 export { NavigationBox };

package/src/NoContentBox/NoContentBox.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ButtonV2 } from '@ndla/button';
+import { ButtonV2 } from "@ndla/button";
 
 interface Props {
   onClick?: () => void;

package/src/NoContentBox/index.ts

@@ -6,6 +6,6 @@
  *
  */
 
-import NoContentBox from './NoContentBox';
+import NoContentBox from "./NoContentBox";
 
 export default NoContentBox;

package/src/Notion/Notion.tsx

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Fragment, ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { breakpoints, fonts, mq, spacing } from '@ndla/core';
+import { Fragment, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { breakpoints, fonts, mq, spacing } from "@ndla/core";
 
 const ContentWrapper = styled.div`
   ${mq.range({ until: breakpoints.tabletWide })} {
@@ -29,13 +29,13 @@ const ContentWrapper = styled.div`
   }
 `;
 const TextWrapper = styled.div<{ hasVisualElement: boolean }>`
-  width: ${(props) => (props.hasVisualElement ? '75%' : '100%')};
+  width: ${(props) => (props.hasVisualElement ? "75%" : "100%")};
 
   ${mq.range({ until: breakpoints.tabletWide })} {
     width: 100%;
   }
   font-family: ${fonts.sans};
-  ${fonts.sizes('18px', '28px')};
+  ${fonts.sizes("18px", "28px")};
   ${ContentWrapper} .c-figure.expanded + & {
     width: 100%;
   }
@@ -58,7 +58,7 @@ const ClearWrapper = styled.div`
 const LabelsContainer = styled.div`
   display: flex;
   align-items: center;
-  ${fonts.sizes('14px', '24px')};
+  ${fonts.sizes("14px", "24px")};
   font-family: ${fonts.sans};
   margin: ${spacing.small} 0;
 `;
@@ -87,10 +87,10 @@ const Notion = ({ id, labels = [], text, title, visualElement, imageElement, chi
           {text}
           {!!labels.length && (
             <LabelsContainer>
-              {t('searchPage.resultType.notionLabels')}
+              {t("searchPage.resultType.notionLabels")}
               {labels.map((label, i) => (
                 <Fragment key={`notion-${id}-label-${i + 1}`}>
-                  {' '}
+                  {" "}
                   {label}
                   {i < labels?.length - 1 && <> &#8226;</>}
                 </Fragment>

package/src/Notion/NotionImage.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { animations, breakpoints, mq, spacing } from '@ndla/core';
-import { Figure, FigureOpenDialogButton } from '../Figure';
-import Image from '../Image';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { animations, breakpoints, mq, spacing } from "@ndla/core";
+import { Figure, FigureOpenDialogButton } from "../Figure";
+import Image from "../Image";
 
 const StyledImageWrapper = styled.div`
   overflow: hidden;
@@ -38,7 +38,7 @@ const StyledImage = styled(Image)`
 `;
 
 interface Props {
-  type: 'image' | 'video' | 'h5p' | 'iframe' | 'external' | 'audio' | undefined;
+  type: "image" | "video" | "h5p" | "iframe" | "external" | "audio" | undefined;
   id: string;
   src: string;
   alt: string;
@@ -49,7 +49,7 @@ export const NotionImage = ({ id, src, alt, type }: Props) => {
   const imageFigureId = `image-figure-${id}`;
 
   return (
-    <Figure resizeIframe id={imageFigureId} type={'full-column'}>
+    <Figure resizeIframe id={imageFigureId} type={"full-column"}>
       <StyledImageWrapper>
         <StyledImage
           alt={alt}
@@ -58,8 +58,8 @@ export const NotionImage = ({ id, src, alt, type }: Props) => {
             <FigureOpenDialogButton
               type={type}
               messages={{
-                zoomImageButtonLabel: t('license.images.itemImage.zoomImageButtonLabel'),
-                zoomOutImageButtonLabel: t('license.image.itemImage.zoomOutImageButtonLabel'),
+                zoomImageButtonLabel: t("license.images.itemImage.zoomImageButtonLabel"),
+                zoomOutImageButtonLabel: t("license.image.itemImage.zoomOutImageButtonLabel"),
               }}
             />
           }

package/src/Notion/index.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export { default as Notion } from './Notion';
+export { default as Notion } from "./Notion";

package/src/Programme/Programme.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { breakpoints, mq, spacing } from '@ndla/core';
-import { Heading } from '@ndla/typography';
-import ProgrammeSubjects, { GradesProps } from './ProgrammeSubjects';
-import LayoutItem, { OneColumn } from '../Layout';
-import MessageBox from '../Messages/MessageBox';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { breakpoints, mq, spacing } from "@ndla/core";
+import { Heading } from "@ndla/typography";
+import ProgrammeSubjects, { GradesProps } from "./ProgrammeSubjects";
+import LayoutItem, { OneColumn } from "../Layout";
+import MessageBox from "../Messages/MessageBox";
 const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;

package/src/Programme/ProgrammeSubjects.tsx

@@ -6,19 +6,21 @@
  *
  */
 
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { spacing } from '@ndla/core';
-import { SafeLinkButton } from '@ndla/safelink';
-import { MessageBox } from '../Messages';
-import { NavigationBox } from '../Navigation';
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { spacing } from "@ndla/core";
+import { SafeLinkButton } from "@ndla/safelink";
+import { MessageBox } from "../Messages";
+import { NavigationBox } from "../Navigation";
 
 const GradesMenu = styled.ul`
   display: flex;
   gap: ${spacing.small};
+  padding-left: 0;
   li {
     list-style: none;
+    padding: 0;
   }
 `;
 
@@ -41,7 +43,7 @@ type Props = GradesProps & {
   onNavigate?: () => void;
 };
 
-const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props) => {
+const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = "vg1" }: Props) => {
   const { t } = useTranslation();
 
   const grade = useMemo(
@@ -51,14 +53,14 @@ const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props)
 
   return (
     <>
-      <GradesMenu aria-label={t('programmes.grades')}>
+      <GradesMenu aria-label={t("programmes.grades")}>
         {grades?.map((item) => {
           const current = item.name.toLowerCase() === selectedGrade;
           return (
             <li key={item.name}>
               <SafeLinkButton
-                to={current ? '' : item.name.toLowerCase()}
-                colorTheme={item !== grade ? 'lighter' : undefined}
+                to={current ? "" : item.name.toLowerCase()}
+                colorTheme={item !== grade ? "lighter" : undefined}
                 shape="pill"
                 size="normal"
                 aria-current={current}
@@ -69,7 +71,7 @@ const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props)
           );
         })}
       </GradesMenu>
-      {grade?.missingProgrammeSubjects && <MessageBox>{t('messageBoxInfo.noContent')}</MessageBox>}
+      {grade?.missingProgrammeSubjects && <MessageBox>{t("messageBoxInfo.noContent")}</MessageBox>}
       {grade?.categories?.map((category) => (
         <NavigationBox key={category.name} heading={category.name} items={category.subjects} onClick={onNavigate} />
       ))}

package/src/Programme/index.ts

@@ -6,8 +6,8 @@
  *
  */
 
-import Programme from './Programme';
-import ProgrammeSubjects from './ProgrammeSubjects';
+import Programme from "./Programme";
+import ProgrammeSubjects from "./ProgrammeSubjects";
 
 export { ProgrammeSubjects };
 export default Programme;

package/src/ProgrammeCard/ProgrammeCard.stories.tsx

@@ -6,29 +6,29 @@
  *
  */
 
-import { Meta, StoryFn } from '@storybook/react';
-import ProgrammeCard from './ProgrammeCard';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryFn } from "@storybook/react";
+import ProgrammeCard from "./ProgrammeCard";
+import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
-  title: 'Components/ProgrammeCard',
+  title: "Components/ProgrammeCard",
   component: ProgrammeCard,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
   },
   args: {
-    id: 'test ID',
-    title: { title: 'Elektro og datateknologi', language: 'nb' },
+    id: "test ID",
+    title: { title: "Elektro og datateknologi", language: "nb" },
     desktopImage: {
-      src: 'https://api.test.ndla.no/image-api/raw/ajvkVKKR.svg?width=600&ts=1682591987993',
-      alt: '',
+      src: "https://api.test.ndla.no/image-api/raw/ajvkVKKR.svg?width=600&ts=1682591987993",
+      alt: "",
     },
     mobileImage: {
-      src: 'https://api.test.ndla.no/image-api/raw/YIAprLg9.svg?width=600&ts=1682592022017',
-      alt: '',
+      src: "https://api.test.ndla.no/image-api/raw/YIAprLg9.svg?width=600&ts=1682592022017",
+      alt: "",
     },
-    url: '#',
+    url: "#",
   },
 } as Meta<typeof ProgrammeCard>;
 
@@ -36,4 +36,4 @@ export const ProgrammeCardStory: StoryFn<typeof ProgrammeCard> = ({ ...args }) =
   return <ProgrammeCard {...args} />;
 };
 
-ProgrammeCardStory.storyName = 'ProgrammeCard';
+ProgrammeCardStory.storyName = "ProgrammeCard";

package/src/ProgrammeCard/ProgrammeCard.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { spacing, colors, misc, breakpoints, mq, fonts } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
+import styled from "@emotion/styled";
+import { spacing, colors, misc, breakpoints, mq, fonts } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
 
 interface Image {
   src: string;
@@ -58,10 +58,10 @@ const StyledTitle = styled.span`
 
   font-weight: ${fonts.weight.semibold};
   color: ${colors.text.primary};
-  ${fonts.sizes('16px', '24px')};
+  ${fonts.sizes("16px", "24px")};
 
   ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('16px', '18px')};
+    ${fonts.sizes("16px", "18px")};
   }
 `;
 

package/src/ProgrammeCard/index.tsx

@@ -6,5 +6,5 @@
  *
  */
 
-export { default as ProgrammeCard } from './ProgrammeCard';
-export type { Programme as ProgrammeV2 } from './ProgrammeCard';
+export { default as ProgrammeCard } from "./ProgrammeCard";
+export type { Programme as ProgrammeV2 } from "./ProgrammeCard";

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { CSSProperties, Children, ComponentProps, ReactNode, useMemo, 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 SafeLink from '@ndla/safelink';
-import { Heading, HeadingLevel, Text } from '@ndla/typography';
-import ContentTypeBadge from '../ContentTypeBadge';
-import { contentTypes } from '../model/ContentType';
+import { CSSProperties, Children, ComponentProps, ReactNode, useMemo, 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 SafeLink from "@ndla/safelink";
+import { Heading, HeadingLevel, Text } from "@ndla/typography";
+import ContentTypeBadge from "../ContentTypeBadge";
+import { contentTypes } from "../model/ContentType";
 
 interface RelatedArticleProps {
   title: string;
@@ -68,16 +68,16 @@ export const RelatedArticle = ({
   title,
   introduction,
   to,
-  linkInfo = '',
-  target = '',
+  linkInfo = "",
+  target = "",
   type = contentTypes.SUBJECT_MATERIAL,
 }: RelatedArticleProps) => {
   return (
-    <StyledRelatedArticle style={{ '--border-color': colorMap[type] } as CSSProperties}>
+    <StyledRelatedArticle style={{ "--border-color": colorMap[type] } as CSSProperties}>
       <TitleWrapper>
         <ContentTypeBadge type={type} background size="small" />
         <LinkText element="span" textStyle="meta-text-medium" margin="none">
-          <SafeLink to={to} target={target} rel={linkInfo ? 'noopener noreferrer' : undefined}>
+          <SafeLink to={to} target={target} rel={linkInfo ? "noopener noreferrer" : undefined}>
             {title}
           </SafeLink>
         </LinkText>
@@ -108,7 +108,7 @@ const ArticlesWrapper = styled.div`
   }
 `;
 
-interface Props extends ComponentProps<'section'> {
+interface Props extends ComponentProps<"section"> {
   children?: JSX.Element[];
   articleCount?: number;
   headingLevel?: HeadingLevel;
@@ -125,7 +125,7 @@ const StyledSection = styled.section`
 export const RelatedArticleList = ({
   children = [],
   articleCount,
-  headingLevel = 'h3',
+  headingLevel = "h3",
   headingButtons,
   ...rest
 }: Props) => {
@@ -141,14 +141,14 @@ export const RelatedArticleList = ({
     <StyledSection {...rest}>
       <HeadingWrapper>
         <Heading element={headingLevel} margin="none" headingStyle="list-title">
-          {t('related.title')}
+          {t("related.title")}
         </Heading>
         {headingButtons}
       </HeadingWrapper>
       <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>
       {childCount > 2 ? (
         <ButtonV2 onClick={() => setExpanded((p) => !p)} variant="outline">
-          {t(`related.show${expanded ? 'Less' : 'More'}`)}
+          {t(`related.show${expanded ? "Less" : "More"}`)}
         </ButtonV2>
       ) : null}
     </StyledSection>

package/src/RelatedArticleList/index.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import { RelatedArticle, RelatedArticleList } from './RelatedArticleList';
+import { RelatedArticle, RelatedArticleList } from "./RelatedArticleList";
 
 export { RelatedArticle };