@ndla/ui 50.8.0 → 50.8.2

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { Fragment } from 'react';
-import { useTranslation } from 'react-i18next';
-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 { ToggleItem } from '../Filter';
-import { MessageBox } from '../Messages';
+import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+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 { ToggleItem } from "../Filter";
+import { MessageBox } from "../Messages";
 
 const StyledWrapper = styled.nav`
   margin: 32px 0 0;
@@ -44,7 +44,7 @@ const StyledLetterItem = styled.span<{ subjectViewType?: string }>`
   font-weight: ${fonts.weight.bold};
   color: ${colors.brand.primary};
   margin-bottom: 8px;
-  ${(props) => props.subjectViewType === 'checkbox' && `margin-left:37px;`}
+  ${(props) => props.subjectViewType === "checkbox" && `margin-left:37px;`}
 `;
 
 const StyledSpacingElement = styled.span`
@@ -76,7 +76,7 @@ type categoryProps = {
 
 export type subjectsProps = {
   categories: categoryProps[];
-  subjectViewType?: 'link' | 'checkbox';
+  subjectViewType?: "link" | "checkbox";
   onToggleSubject?: (id: string) => void;
   onNavigate?: () => void;
   selectedSubjects?: string[];
@@ -87,10 +87,10 @@ type letterCategories = {
   items: subjectProps[];
 };
 
-const sortAlphabetically = (subjects: subjectProps[], locale: string = 'nb') => {
+const sortAlphabetically = (subjects: subjectProps[], locale: string = "nb") => {
   const subjectsSorted = subjects.sort((a, b) => a.name.localeCompare(b.name, locale));
   const subjectsLetterCategories: letterCategories[] = [];
-  let previousLetter = '';
+  let previousLetter = "";
   let letterItems: subjectProps[] = [];
   subjectsSorted.forEach((subject: subjectProps) => {
     const currentLetter = subject.name.substr(0, 1);
@@ -118,9 +118,9 @@ const sortAlphabetically = (subjects: subjectProps[], locale: string = 'nb') =>
 const renderList = (
   subjects: subjectProps[],
   onNavigate?: () => void,
-  onToggleSubject?: subjectsProps['onToggleSubject'],
-  subjectViewType?: subjectsProps['subjectViewType'],
-  selectedSubjects: subjectsProps['selectedSubjects'] = [],
+  onToggleSubject?: subjectsProps["onToggleSubject"],
+  subjectViewType?: subjectsProps["subjectViewType"],
+  selectedSubjects: subjectsProps["selectedSubjects"] = [],
 ) => (
   <StyledList>
     {sortAlphabetically(subjects).map((letter: any) => {
@@ -130,7 +130,7 @@ const renderList = (
             <Fragment key={subject.name}>
               <StyledListItem>
                 {index === 0 && <StyledLetterItem subjectViewType={subjectViewType}>{letter.letter}</StyledLetterItem>}
-                {subjectViewType === 'checkbox' && subject.id ? (
+                {subjectViewType === "checkbox" && subject.id ? (
                   <ToggleItem
                     id={subject.id}
                     value={subject.id}
@@ -151,7 +151,7 @@ const renderList = (
                           onNavigate();
                         }
                       }}
-                      to={subject.path || ''}
+                      to={subject.path || ""}
                     >
                       {subject.name}
                     </SafeLink>
@@ -216,8 +216,8 @@ const FrontpageAllSubjects = ({
   });
 
   data.push({
-    title: t('frontpageMenu.allsubjects'),
-    id: 'allsubjects',
+    title: t("frontpageMenu.allsubjects"),
+    id: "allsubjects",
     content: renderList(allSubjects, onNavigate, onToggleSubject, subjectViewType, selectedSubjects),
   });
 

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -6,24 +6,24 @@
  *
  */
 
-import { CSSProperties, ReactNode, useMemo } from 'react';
-import styled from '@emotion/styled';
-import { spacing, spacingUnit } from '@ndla/core';
-import { Heading, Text } from '@ndla/typography';
-import { ArticleByline } from '../Article';
-import { useMastheadHeight } from '../Masthead';
-import { Article } from '../types';
+import { CSSProperties, ReactNode, useMemo } from "react";
+import styled from "@emotion/styled";
+import { spacing, spacingUnit } from "@ndla/core";
+import { Heading, Text } from "@ndla/typography";
+import { ArticleByline } from "../Article";
+import { useMastheadHeight } from "../Masthead";
+import { Article } from "../types";
 
 interface Props {
-  article: Omit<Article, 'footNotes'>;
+  article: Omit<Article, "footNotes">;
   id: string;
   isWide?: boolean;
   licenseBox?: ReactNode;
   lang?: string;
 }
 
-export const FRONTPAGE_ARTICLE_MAX_WIDTH = '773px';
-export const WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH = '1100px';
+export const FRONTPAGE_ARTICLE_MAX_WIDTH = "773px";
+export const WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH = "1100px";
 
 const StyledArticle = styled.article`
   width: 100%;
@@ -31,10 +31,10 @@ const StyledArticle = styled.article`
   h2[id] {
     margin-top: ${spacing.large};
   }
-  div[data-type='campaign-block'] {
+  div[data-type="campaign-block"] {
     margin: ${spacing.large} 0px;
   }
-  div[data-type='grid'] {
+  div[data-type="grid"] {
     h2,
     h3,
     h4 {
@@ -42,16 +42,16 @@ const StyledArticle = styled.article`
     }
   }
 
-  div[data-type='grid'] + div[data-type='grid'] {
+  div[data-type="grid"] + div[data-type="grid"] {
     margin-top: ${spacing.xxlarge};
   }
 
-  &[data-wide='true'] {
+  &[data-wide="true"] {
     max-width: 1100px;
     h2[id] {
       margin-top: ${spacing.xxlarge};
     }
-    div[data-type='campaign-block'] {
+    div[data-type="campaign-block"] {
       margin: ${spacing.xxlarge} 0px;
     }
   }
@@ -59,7 +59,7 @@ const StyledArticle = styled.article`
 
 export const FrontpageArticle = ({ article, id, isWide, licenseBox, lang }: Props) => {
   const { height = 0 } = useMastheadHeight();
-  const cssVars = useMemo(() => ({ '--masthead-height': `${height}px` }) as unknown as CSSProperties, [height]);
+  const cssVars = useMemo(() => ({ "--masthead-height": `${height}px` }) as unknown as CSSProperties, [height]);
   const { title, introduction, content } = article;
 
   if (isWide) {
@@ -79,7 +79,7 @@ export const FrontpageArticle = ({ article, id, isWide, licenseBox, lang }: Prop
         {introduction}
       </Text>
       {content}
-      <ArticleByline accordionHeaderVariant={'white'} licenseBox={licenseBox} displayByline={false} />
+      <ArticleByline accordionHeaderVariant={"white"} licenseBox={licenseBox} displayByline={false} />
     </StyledArticle>
   );
 };

package/src/FrontpageArticle/index.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import FrontpageArticle, { FRONTPAGE_ARTICLE_MAX_WIDTH, WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH } from './FrontpageArticle';
+import FrontpageArticle, { FRONTPAGE_ARTICLE_MAX_WIDTH, WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH } from "./FrontpageArticle";
 
 export { FRONTPAGE_ARTICLE_MAX_WIDTH, WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH };
 

package/src/Gloss/Gloss.stories.tsx

@@ -6,58 +6,58 @@
  *
  */
 
-import { Meta, StoryObj, StoryFn } from '@storybook/react';
-import Gloss from './Gloss';
-import { defaultParameters } from '../../../../stories/defaults';
-import { wordClass } from '../model/WordClass';
+import { Meta, StoryObj, StoryFn } from "@storybook/react";
+import Gloss from "./Gloss";
+import { defaultParameters } from "../../../../stories/defaults";
+import { wordClass } from "../model/WordClass";
 
 const meta: Meta<typeof Gloss> = {
-  title: 'Components/Gloss',
+  title: "Components/Gloss",
   component: Gloss,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
   },
   args: {
     title: {
-      title: 'Å angripe',
-      language: 'nb',
+      title: "Å angripe",
+      language: "nb",
     },
     glossData: {
-      gloss: 'angreifen',
+      gloss: "angreifen",
       wordClass: wordClass.verb,
-      originalLanguage: 'de',
+      originalLanguage: "de",
       transcriptions: {},
       examples: [
         [
           {
-            example: 'Hitler greift die Sowjetunion an',
-            language: 'de',
+            example: "Hitler greift die Sowjetunion an",
+            language: "de",
             transcriptions: {},
           },
           {
-            example: 'Hitler angriper Sovjetunionen',
-            language: 'nb',
+            example: "Hitler angriper Sovjetunionen",
+            language: "nb",
             transcriptions: {},
           },
         ],
         [
           {
-            example: 'Ich greife an',
-            language: 'de',
+            example: "Ich greife an",
+            language: "de",
             transcriptions: {},
           },
           {
-            example: 'Jeg griper an',
-            language: 'nb',
+            example: "Jeg griper an",
+            language: "nb",
             transcriptions: {},
           },
         ],
       ],
     },
     audio: {
-      title: '',
-      src: '',
+      title: "",
+      src: "",
     },
   },
 };
@@ -71,37 +71,37 @@ export const GlossStory: StoryFn<typeof Gloss> = ({ ...args }) => {
 export const GlossChineseStory: StoryObj<typeof Gloss> = {
   args: {
     title: {
-      title: 'Ma Hong',
-      language: 'nb',
+      title: "Ma Hong",
+      language: "nb",
     },
     glossData: {
-      gloss: '马红',
+      gloss: "马红",
       wordClass: wordClass.properNoun,
-      originalLanguage: 'zh',
+      originalLanguage: "zh",
       transcriptions: {
-        traditional: '(馬紅)',
-        pinyin: 'Mǎ Hóng',
+        traditional: "(馬紅)",
+        pinyin: "Mǎ Hóng",
       },
       examples: [
         [
           {
-            example: '我叫马红',
-            language: 'zh',
+            example: "我叫马红",
+            language: "zh",
             transcriptions: {
-              pinyin: 'wo jiao ma hong',
+              pinyin: "wo jiao ma hong",
             },
           },
           {
-            example: 'Jeg heter ma hong',
-            language: 'nb',
+            example: "Jeg heter ma hong",
+            language: "nb",
             transcriptions: {},
           },
         ],
       ],
     },
     audio: {
-      title: 'Spill av lyd',
-      src: 'https://api.staging.ndla.no/audio/files/shu3jia4.mp3',
+      title: "Spill av lyd",
+      src: "https://api.staging.ndla.no/audio/files/shu3jia4.mp3",
     },
   },
 };

package/src/Gloss/Gloss.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-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 GlossExample from './GlossExample';
-import SpeechControl from '../AudioPlayer/SpeechControl';
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+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 GlossExample from "./GlossExample";
+import SpeechControl from "../AudioPlayer/SpeechControl";
 
 export interface Props {
   title: {
@@ -53,7 +53,7 @@ const GlossContainer = styled.div`
   flex-wrap: wrap;
   gap: ${spacing.nsmall};
   span {
-    ${fonts.sizes('16px', '24px')};
+    ${fonts.sizes("16px", "24px")};
   }
   span[data-pinyin] {
     font-style: italic;
@@ -66,7 +66,7 @@ const GlossSpan = styled.span`
 
 const StyledAccordionHeader = styled(AccordionHeader)`
   font-family: ${fonts.sans};
-  ${fonts.sizes('16px', '24px')};
+  ${fonts.sizes("16px", "24px")};
   font-weight: ${fonts.weight.semibold};
   background-color: ${colors.background.lightBlue};
 `;
@@ -81,8 +81,8 @@ const getFilteredExamples = (
   exampleLangs: string | undefined,
 ): IGlossExample[][] => {
   if (exampleIds !== undefined || exampleLangs !== undefined) {
-    const exampleIdsList = exampleIds?.toString()?.split(',') ?? [];
-    const exampleLangsList = exampleLangs?.split(',') ?? [];
+    const exampleIdsList = exampleIds?.toString()?.split(",") ?? [];
+    const exampleLangsList = exampleLangs?.split(",") ?? [];
 
     const filteredExamples =
       glossData?.examples?.map((examples, i) => {
@@ -113,8 +113,8 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) =>
                 <GlossSpan lang={glossData.originalLanguage}>{glossData.gloss}</GlossSpan>
                 {glossData.transcriptions.traditional && (
                   <span
-                    key={t('gloss.transcriptions.traditional')}
-                    aria-label={t('gloss.transcriptions.traditional')}
+                    key={t("gloss.transcriptions.traditional")}
+                    aria-label={t("gloss.transcriptions.traditional")}
                     lang={glossData.originalLanguage}
                   >
                     {glossData.transcriptions.traditional}
@@ -123,15 +123,15 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) =>
                 {glossData.transcriptions.pinyin && (
                   <span
                     data-pinyin=""
-                    key={t('gloss.transcriptions.pinyin')}
-                    aria-label={t('gloss.transcriptions.pinyin')}
+                    key={t("gloss.transcriptions.pinyin")}
+                    aria-label={t("gloss.transcriptions.pinyin")}
                     lang={glossData.originalLanguage}
                   >
                     {glossData.transcriptions.pinyin}
                   </span>
                 )}
                 {glossData.wordClass && (
-                  <span aria-label={t('gloss.wordClass')}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</span>
+                  <span aria-label={t("gloss.wordClass")}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</span>
                 )}
               </GlossContainer>
               {audio?.src && <SpeechControl src={audio.src} title={audio.title}></SpeechControl>}
@@ -141,7 +141,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) =>
           {filteredExamples.length > 0 && (
             <AccordionRoot type="single" collapsible>
               <AccordionItem value="1">
-                <StyledAccordionHeader headingLevel="span">{t('gloss.examples')}</StyledAccordionHeader>
+                <StyledAccordionHeader headingLevel="span">{t("gloss.examples")}</StyledAccordionHeader>
                 <StyledAccordionContent>
                   {filteredExamples.map((examples, index) => (
                     <div key={`gloss-example-${index}`}>

package/src/Gloss/GlossExample.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { colors, spacing, fonts } from '@ndla/core';
-import { IGlossExample } from '@ndla/types-backend/concept-api';
-import { Text } from '@ndla/typography';
+import styled from "@emotion/styled";
+import { colors, spacing, fonts } from "@ndla/core";
+import { IGlossExample } from "@ndla/types-backend/concept-api";
+import { Text } from "@ndla/typography";
 
 export interface Props {
   example: IGlossExample;
@@ -19,7 +19,7 @@ export interface Props {
 }
 
 const StyledGlossExampleWrapper = styled.div`
-  &[data-is-standalone='true'] {
+  &[data-is-standalone="true"] {
     &:first-of-type {
       border-top: 1px solid ${colors.brand.lighter};
     }
@@ -31,12 +31,12 @@ const StyledGlossExample = styled.div`
   border: 1px solid ${colors.brand.lighter};
   border-top: none;
 
-  &[data-is-first='true'] {
+  &[data-is-first="true"] {
     background-color: ${colors.background.lightBlue};
   }
 `;
 const StyledText = styled(Text)`
-  &[data-is-first='true'] {
+  &[data-is-first="true"] {
     font-weight: ${fonts.weight.bold};
     color: ${colors.brand.dark};
   }

package/src/Gloss/index.tsx

@@ -6,5 +6,5 @@
  *
  */
 
-export { default as Gloss } from './Gloss';
-export { default as GlossExample } from './GlossExample';
+export { default as Gloss } from "./Gloss";
+export { default as GlossExample } from "./GlossExample";

package/src/Grid/Grid.stories.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-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';
-import { BlogPostStory } from '../BlogPost/BlogPost.stories';
-import { KeyFigureStory } from '../KeyFigure/KeyFigure.stories';
+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";
+import { BlogPostStory } from "../BlogPost/BlogPost.stories";
+import { KeyFigureStory } from "../KeyFigure/KeyFigure.stories";
 
 const GridWrapper = styled.div`
   .docs-story {
@@ -28,25 +28,25 @@ const GridDocsContainer = ({ ...props }: DocsContainerProps) => (
 );
 
 export default {
-  title: 'Components/Grid',
+  title: "Components/Grid",
   component: Grid,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
-    layout: 'centered',
+    layout: "centered",
     docs: {
       container: GridDocsContainer,
     },
   },
   args: {
-    columns: '2',
-    border: 'none',
-    background: 'white',
+    columns: "2",
+    border: "none",
+    background: "white",
   },
 } as Meta<typeof Grid>;
 
 export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
-  const columns = args.columns === '2x2' ? 4 : parseInt(args.columns);
+  const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
   const items = new Array(columns).fill(
     <KeyFigureStory
       title={KeyFigureStory.args?.title!}
@@ -58,7 +58,7 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
 };
 
 export const GridBlogPostStory: StoryFn<typeof Grid> = ({ ...args }) => {
-  const columns = args.columns === '2x2' ? 4 : parseInt(args.columns);
+  const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
   const items = new Array(columns).fill(
     <BlogPostStory
       metaImage={BlogPostStory.args?.metaImage!}

package/src/Grid/Grid.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { HTMLAttributes, ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
+import { HTMLAttributes, ReactNode } from "react";
+import styled from "@emotion/styled";
+import { breakpoints, colors, misc, mq, spacing } from "@ndla/core";
 
 export interface GridProps {
-  columns: '2' | '4' | '2x2';
-  border?: 'none' | 'lightBlue';
-  background?: 'transparent' | 'white';
+  columns: "2" | "4" | "2x2";
+  border?: "none" | "lightBlue";
+  background?: "transparent" | "white";
   size?: boolean;
   children?: ReactNode[];
 }
@@ -26,9 +26,9 @@ const GridContainer = styled.div`
   grid-gap: ${spacing.normal};
 
   ${mq.range({ until: breakpoints.tabletWide })} {
-    &[data-columns='2x2'],
-    &[data-columns='3'],
-    &[data-columns='4'] {
+    &[data-columns="2x2"],
+    &[data-columns="3"],
+    &[data-columns="4"] {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
@@ -46,23 +46,23 @@ const GridContainer = styled.div`
   ${mq.range({ from: breakpoints.tabletWide })} {
     grid-template-columns: repeat(2, minmax(0, 1fr));
 
-    &[data-columns='3'] {
+    &[data-columns="3"] {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 
-    &[data-columns='4'] {
+    &[data-columns="4"] {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
 
-  &[data-frontpage='true'] {
+  &[data-frontpage="true"] {
     grid-gap: ${spacing.large};
   }
 
-  &[data-border='lightBlue'] {
+  &[data-border="lightBlue"] {
     border: 1px solid ${colors.brand.lighter};
   }
-  &[data-background='white'] {
+  &[data-background="white"] {
     background-color: ${colors.white};
   }
 
@@ -72,7 +72,7 @@ const GridContainer = styled.div`
 `;
 
 const Grid = ({ columns, border, children, background, size, ...rest }: GridProps) => {
-  const amountOfColumns = children?.length === 3 ? '3' : columns;
+  const amountOfColumns = children?.length === 3 ? "3" : columns;
 
   return (
     <GridContainer

package/src/Grid/index.ts

@@ -6,5 +6,5 @@
  *
  */
 
-export { default as Grid, GridParallaxItem } from './Grid';
-export type { GridProps as GridType } from './Grid';
+export { default as Grid, GridParallaxItem } from "./Grid";
+export type { GridProps as GridType } from "./Grid";

package/src/Hero/Hero.stories.tsx

@@ -6,25 +6,25 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { Meta, StoryFn } from '@storybook/react';
-import { Hero } from './Hero';
-import { defaultParameters } from '../../../../stories/defaults';
+import styled from "@emotion/styled";
+import { Meta, StoryFn } from "@storybook/react";
+import { Hero } from "./Hero";
+import { defaultParameters } from "../../../../stories/defaults";
 
 const StyledDiv = styled.div`
   width: 1000px;
 `;
 
 export default {
-  title: 'Components/Hero',
+  title: "Components/Hero",
   component: Hero,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
-    layout: 'centered',
+    layout: "centered",
   },
   args: {
-    contentType: 'assessment-resources',
+    contentType: "assessment-resources",
   },
 } as Meta<typeof Hero>;
 
@@ -34,4 +34,4 @@ export const HeroStory: StoryFn<typeof Hero> = ({ ...args }) => (
   </Hero>
 );
 
-HeroStory.storyName = 'Hero';
+HeroStory.storyName = "Hero";