@ndla/ui 50.7.3 → 50.8.1

package/src/LearningPaths/LearningPathSticky.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { ReactNode } from 'react';
-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 { ReactNode } from "react";
+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";
 
-const FOOTER_HEIGHT = '78px';
+const FOOTER_HEIGHT = "78px";
 const FOOTER_HEIGHT_MOBILE = spacing.large;
 const SAFELINK_SIZE_MOBILE = spacing.large;
 
@@ -97,7 +97,7 @@ const StyledTitle = styled.span`
 type PropsSiblings = {
   title: string;
   toLearningPathUrl(pathId: number, stepId: number): string;
-  arrow?: 'left' | 'right';
+  arrow?: "left" | "right";
   pathId: number;
   stepId: number;
 };
@@ -108,13 +108,13 @@ export const LearningPathStickySibling = ({ title, toLearningPathUrl, pathId, st
     <SafeLink
       to={toLearningPathUrl(pathId, stepId)}
       css={SafeLinkCSS}
-      aria-label={arrow === 'left' ? t('learningPath.previousArrow') : t('learningPath.nextArrow')}
+      aria-label={arrow === "left" ? t("learningPath.previousArrow") : t("learningPath.nextArrow")}
     >
-      {arrow === 'left' && <Back size="normal" />}
+      {arrow === "left" && <Back size="normal" />}
       <div>
         <StyledTitle>{title}</StyledTitle>
       </div>
-      {arrow === 'right' && <Forward size="normal" />}
+      {arrow === "right" && <Forward size="normal" />}
     </SafeLink>
   );
 };

package/src/LearningPaths/LearningPathWrapper.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { spacing, spacingUnit, breakpoints, mq } from '@ndla/core';
+import { ReactNode } from "react";
+import styled from "@emotion/styled";
+import { spacing, spacingUnit, breakpoints, mq } from "@ndla/core";
 
 const StyledWrapper = styled.section`
   max-width: ${1402 + spacingUnit}px;
@@ -19,7 +19,7 @@ const StyledWrapper = styled.section`
     padding-left: 0;
   }
 
-  &[data-inverted='true'] {
+  &[data-inverted="true"] {
     ${mq.range({ until: breakpoints.tablet })} {
       background: #fff;
     }

package/src/LearningPaths/index.ts

@@ -6,14 +6,14 @@
  *
  */
 
-import LearningPathLastStepNavigation from './LearningPathLastStepNavigation';
-import LearningPathMenu from './LearningPathMenu';
-import LearningPathMobileHeader from './LearningPathMobileHeader';
-import LearningPathMobileStepInfo from './LearningPathMobileStepInfo';
+import LearningPathLastStepNavigation from "./LearningPathLastStepNavigation";
+import LearningPathMenu from "./LearningPathMenu";
+import LearningPathMobileHeader from "./LearningPathMobileHeader";
+import LearningPathMobileStepInfo from "./LearningPathMobileStepInfo";
 
-export { LearningPathWrapper } from './LearningPathWrapper';
-export { LearningPathContent } from './LearningPathContent';
+export { LearningPathWrapper } from "./LearningPathWrapper";
+export { LearningPathContent } from "./LearningPathContent";
 export { LearningPathMenu, LearningPathLastStepNavigation, LearningPathMobileStepInfo };
-export { LearningPathInformation } from './LearningPathInformation';
-export { LearningPathSticky, LearningPathStickySibling, LearningPathStickyPlaceholder } from './LearningPathSticky';
+export { LearningPathInformation } from "./LearningPathInformation";
+export { LearningPathSticky, LearningPathStickySibling, LearningPathStickyPlaceholder } from "./LearningPathSticky";
 export { LearningPathMobileHeader };

package/src/LetterFilter/LetterFilter.stories.tsx

@@ -6,20 +6,20 @@
  *
  */
 
-import { useArgs } from '@storybook/client-api';
-import { Meta, StoryFn } from '@storybook/react';
-import LetterFilter from './LetterFilter';
-import { defaultParameters } from '../../../../stories/defaults';
+import { useArgs } from "@storybook/client-api";
+import { Meta, StoryFn } from "@storybook/react";
+import LetterFilter from "./LetterFilter";
+import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
-  title: 'Components/LetterFilter',
+  title: "Components/LetterFilter",
   component: LetterFilter,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
   },
   args: {
-    enabledLetters: ['a', 'c'],
+    enabledLetters: ["a", "c"],
     onChange: (value?: string) => {},
   },
 } as Meta<typeof LetterFilter>;
@@ -30,4 +30,4 @@ export const LetterFilterStory: StoryFn<typeof LetterFilter> = (args) => {
   return <LetterFilter {...args} onChange={(val) => updateArgs({ value: val })} />;
 };
 
-LetterFilterStory.storyName = 'LetterFilter';
+LetterFilterStory.storyName = "LetterFilter";

package/src/LetterFilter/LetterFilter.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { useMemo } from 'react';
-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';
+import { useMemo } from "react";
+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`
   list-style: none;
@@ -58,9 +58,11 @@ const LetterFilter = ({ value, onChange, enabledLetters }: Props) => {
           <li key={letter}>
             <StyledButton
               onClick={() => (selected ? onChange(undefined) : onChange(letter))}
-              aria-label={t('listview.filters.alphabet.letterFilter', { letter })}
-              variant={!selected ? 'ghost' : undefined}
-              colorTheme={!selected ? 'lighter' : 'primary'}
+              aria-label={t("listview.filters.alphabet.letterFilter", {
+                letter,
+              })}
+              variant={!selected ? "ghost" : undefined}
+              colorTheme={!selected ? "lighter" : "primary"}
               disabled={disabled}
               size="xsmall"
             >

package/src/LetterFilter/alphabet.ts

@@ -7,33 +7,33 @@
  */
 
 export const alphabet = [
-  'A',
-  'B',
-  'C',
-  'D',
-  'E',
-  'F',
-  'G',
-  'H',
-  'I',
-  'J',
-  'K',
-  'L',
-  'M',
-  'N',
-  'O',
-  'P',
-  'Q',
-  'R',
-  'S',
-  'T',
-  'U',
-  'V',
-  'W',
-  'X',
-  'Y',
-  'Z',
-  'Æ',
-  'Ø',
-  'Å',
+  "A",
+  "B",
+  "C",
+  "D",
+  "E",
+  "F",
+  "G",
+  "H",
+  "I",
+  "J",
+  "K",
+  "L",
+  "M",
+  "N",
+  "O",
+  "P",
+  "Q",
+  "R",
+  "S",
+  "T",
+  "U",
+  "V",
+  "W",
+  "X",
+  "Y",
+  "Z",
+  "Æ",
+  "Ø",
+  "Å",
 ];

package/src/LetterFilter/index.ts

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

package/src/LicenseByline/EmbedByline.stories.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { Meta, StoryFn } from '@storybook/react';
-import { IconButtonV2 } from '@ndla/button';
-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';
+import styled from "@emotion/styled";
+import { Meta, StoryFn } from "@storybook/react";
+import { IconButtonV2 } from "@ndla/button";
+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";
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -27,17 +27,17 @@ const ButtonWrapper = styled.div`
 `;
 
 export default {
-  title: 'Components/EmbedByline',
+  title: "Components/EmbedByline",
   component: EmbedByline,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
   },
   args: {
     topRounded: true,
     bottomRounded: true,
-    visibleAlt: 'Synlig alt-tekst kan legges her, eller fjernes helt',
-    type: 'image',
+    visibleAlt: "Synlig alt-tekst kan legges her, eller fjernes helt",
+    type: "image",
     children: (
       <ButtonWrapper>
         <Switch checked={false} label="Bytt til synstolket video" onChange={() => {}} id="switch" />
@@ -47,20 +47,20 @@ export default {
       </ButtonWrapper>
     ),
     description:
-      'Bildetekst som kan være ganske lang. Denne roboten er laget av DALLE2, en helt vaskeekte AI. Hvis denne teksten blir veldig lang kommer den på flere linjer.',
+      "Bildetekst som kan være ganske lang. Denne roboten er laget av DALLE2, en helt vaskeekte AI. Hvis denne teksten blir veldig lang kommer den på flere linjer.",
     copyright: {
       license: {
-        license: 'CC-BY-SA-4.0',
-        description: 'Creative Commons Attribution-ShareAlike 4.0 International',
-        url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+        license: "CC-BY-SA-4.0",
+        description: "Creative Commons Attribution-ShareAlike 4.0 International",
+        url: "https://creativecommons.org/licenses/by-sa/4.0/",
       },
-      origin: 'http://floradania.dk/forside/',
+      origin: "http://floradania.dk/forside/",
       creators: [],
       processors: [],
       rightsholders: [
         {
-          type: 'Supplier',
-          name: 'Floradania',
+          type: "Supplier",
+          name: "Floradania",
         },
       ],
     },
@@ -79,4 +79,4 @@ export const EmbedBylineStory: StoryFn<typeof EmbedByline> = (args) => {
   return <EmbedByline {...rest}>{children}</EmbedByline>;
 };
 
-EmbedBylineStory.storyName = 'EmbedByline';
+EmbedBylineStory.storyName = "EmbedByline";

package/src/LicenseByline/EmbedByline.tsx

@@ -6,19 +6,19 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-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 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 LicenseDescription from './LicenseDescription';
-import LicenseLink from './LicenseLink';
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+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 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 LicenseDescription from "./LicenseDescription";
+import LicenseLink from "./LicenseLink";
 
 interface BaseProps {
   topRounded?: boolean;
@@ -32,32 +32,32 @@ interface BaseProps {
 }
 
 export interface EmbedBylineErrorProps extends BaseProps {
-  type: EmbedBylineTypeProps['type'] | 'h5p' | 'external';
+  type: EmbedBylineTypeProps["type"] | "h5p" | "external";
   error: true;
 }
 
 interface ImageProps extends BaseProps {
-  type: 'image';
+  type: "image";
   copyright: ImageCopyright | undefined;
 }
 
 interface BrightcoveProps extends BaseProps {
-  type: 'video';
+  type: "video";
   copyright: BrightcoveCopyright | undefined;
 }
 
 interface AudioProps extends BaseProps {
-  type: 'audio';
+  type: "audio";
   copyright: AudioCopyright | undefined;
 }
 
 interface PodcastProps extends BaseProps {
-  type: 'podcast';
+  type: "podcast";
   copyright: AudioCopyright | undefined;
 }
 
 interface ConceptProps extends BaseProps {
-  type: 'concept' | 'gloss';
+  type: "concept" | "gloss";
   copyright: ConceptCopyright | undefined;
 }
 
@@ -72,27 +72,27 @@ const BylineWrapper = styled.div`
   flex-direction: column;
   gap: ${spacing.small};
   font-family: ${fonts.sans};
-  ${fonts.sizes('18px', '24px')};
+  ${fonts.sizes("18px", "24px")};
   background-color: ${colors.brand.lightest};
   padding: ${spacing.nsmall} ${spacing.normal};
   border: 1px solid ${colors.brand.light};
   border-top: none;
 
-  &[data-top-rounded='true'] {
+  &[data-top-rounded="true"] {
     border-top-right-radius: ${misc.borderRadius};
     border-top-left-radius: ${misc.borderRadius};
   }
 
-  &[data-bottom-rounded='true'] {
+  &[data-bottom-rounded="true"] {
     border-bottom-right-radius: ${misc.borderRadius};
     border-bottom-left-radius: ${misc.borderRadius};
   }
 
-  &[data-error='true'] {
+  &[data-error="true"] {
     border: none;
     background-color: ${colors.support.redLightest};
   }
-  &[data-first='true'] {
+  &[data-first="true"] {
     border-top: 1px solid ${colors.brand.light};
   }
 `;
@@ -109,7 +109,7 @@ const RightsWrapper = styled.div`
   flex-wrap: wrap;
   gap: ${spacing.nsmall};
 
-  &[data-grid='true'] {
+  &[data-grid="true"] {
     ${mobileStyling}
   }
 
@@ -142,17 +142,17 @@ const EmbedByline = ({
   const { t, i18n } = useTranslation();
 
   if (props.error) {
-    const typeString = type === 'h5p' ? 'H5P' : t(`embed.type.${type}`).toLowerCase();
+    const typeString = type === "h5p" ? "H5P" : t(`embed.type.${type}`).toLowerCase();
     return (
       <BylineWrapper data-top-rounded={topRounded} data-bottom-rounded={bottomRounded} data-error={true}>
-        <LicenseDescription description={t('embed.embedError', { type: typeString })} icon={<WarningOutline />} />
+        <LicenseDescription description={t("embed.embedError", { type: typeString })} icon={<WarningOutline />} />
       </BylineWrapper>
     );
   }
 
   const { copyright } = props;
 
-  const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? '', i18n.language) : undefined;
+  const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? "", i18n.language) : undefined;
   const authors = getLicenseCredits(copyright);
   const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];
 
@@ -164,8 +164,8 @@ const EmbedByline = ({
         {license ? <LicenseLink license={license} asLink={!!license.url.length} /> : null}
         <LicenseInformationWrapper>
           <span>
-            <b>{`${t(`embed.type.${type}`)}${captionAuthors.length ? ':' : ''}`} </b>
-            {captionAuthors.map((author) => author.name).join(', ')}
+            <b>{`${t(`embed.type.${type}`)}${captionAuthors.length ? ":" : ""}`} </b>
+            {captionAuthors.map((author) => author.name).join(", ")}
           </span>
         </LicenseInformationWrapper>
         {children}

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";
+import styled from "@emotion/styled";
+import { spacing } from "@ndla/core";
 
 interface Props {
   description: ReactNode;

package/src/LicenseByline/LicenseLink.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { colors, fonts } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import { LicenseType } from './EmbedByline';
+import styled from "@emotion/styled";
+import { colors, fonts } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
+import { LicenseType } from "./EmbedByline";
 
 interface Props {
   license: LicenseType;
@@ -33,7 +33,7 @@ const StyledSpan = styled.span`
 `;
 
 const LicenseLink = ({ license, asLink = true }: Props) => {
-  if (license.abbreviation === 'unknown') {
+  if (license.abbreviation === "unknown") {
     return null;
   }
   if (asLink) {

package/src/LicenseByline/index.tsx

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

package/src/LinkBlock/LinkBlock.stories.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { Meta, StoryObj, StoryFn } from '@storybook/react';
-import { LinkBlockSection } from '.';
-import LinkBlock from './LinkBlock';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { LinkBlockSection } from ".";
+import LinkBlock from "./LinkBlock";
+import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
-  title: 'Components/Link Block',
+  title: "Components/Link Block",
   component: LinkBlock,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
   },
@@ -22,10 +22,10 @@ export default {
 } as Meta<typeof LinkBlock>;
 
 const args = {
-  title: 'Redaksjonell medarbeider i faget spansk 2',
-  language: 'nb',
-  date: '05. mars 2023',
-  url: '',
+  title: "Redaksjonell medarbeider i faget spansk 2",
+  language: "nb",
+  date: "05. mars 2023",
+  url: "",
 };
 
 export const AnnouncementExample: StoryObj<typeof LinkBlock> = { args };

package/src/LinkBlock/LinkBlock.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import { format } from 'date-fns';
-import { enGB, nb, nn } from 'date-fns/locale';
-import { useMemo } from 'react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, spacing, mq } from '@ndla/core';
-import { Forward, CalendarEd } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import { LinkBlockEmbedData } from '@ndla/types-embed';
-import { Heading } from '@ndla/typography';
-import { getPossiblyRelativeUrl } from '../utils/relativeUrl';
+import { format } from "date-fns";
+import { enGB, nb, nn } from "date-fns/locale";
+import { useMemo } from "react";
+import styled from "@emotion/styled";
+import { breakpoints, colors, spacing, mq } from "@ndla/core";
+import { Forward, CalendarEd } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
+import { LinkBlockEmbedData } from "@ndla/types-embed";
+import { Heading } from "@ndla/typography";
+import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
 const StyledForward = styled(Forward)`
   margin: 0 ${spacing.nsmall};
@@ -73,7 +73,7 @@ const StyledCalenderEd = styled(CalendarEd)`
   color: ${colors.icon.iconBlue};
 `;
 
-interface Props extends Omit<LinkBlockEmbedData, 'resource'> {
+interface Props extends Omit<LinkBlockEmbedData, "resource"> {
   path?: string;
 }
 
@@ -81,13 +81,13 @@ const LinkBlock = ({ title, language, date, url, path }: Props) => {
   const href = getPossiblyRelativeUrl(url, path);
   const formattedDate = useMemo(() => {
     if (!date) return null;
-    const locale = language === 'nb' ? nb : language === 'nn' ? nn : enGB;
-    return format(new Date(date), 'dd. LLLL yyyy', { locale });
+    const locale = language === "nb" ? nb : language === "nn" ? nn : enGB;
+    return format(new Date(date), "dd. LLLL yyyy", { locale });
   }, [date, language]);
   return (
     <StyledSafeLink to={href}>
       <InfoWrapper>
-        <Heading element="h3" margin="none" headingStyle="h3" lang={language === 'nb' ? 'no' : language}>
+        <Heading element="h3" margin="none" headingStyle="h3" lang={language === "nb" ? "no" : language}>
           {title}
         </Heading>
         {date && (

package/src/LinkBlock/LinkBlockSection.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { Children, HTMLAttributes, ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { spacing } from '@ndla/core';
+import { Children, HTMLAttributes, ReactNode } from "react";
+import styled from "@emotion/styled";
+import { spacing } from "@ndla/core";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children: ReactNode;
@@ -20,10 +20,8 @@ const StyledList = styled.ul`
   gap: ${spacing.small};
   list-style: none;
   padding: 0px;
-  margin: 0px;
   li {
     padding: 0px;
-    margin: 0px;
   }
 `;
 

package/src/LinkBlock/index.ts

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