@ndla/ui 53.0.1 → 54.0.1

package/src/Article/ArticleByline.tsx

@@ -9,6 +9,7 @@
 import { TFunction } from "i18next";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
 import styled from "@emotion/styled";
 import { AccordionRoot, AccordionHeader, AccordionContent, AccordionItem } from "@ndla/accordion";
 import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
@@ -103,7 +104,7 @@ const LicenseWrapper = styled.div`
 
 const StyledAccordionHeader = styled(AccordionHeader)`
   background-color: ${colors.brand.lightest};
-  font-size: ${fonts.sizes("16px", "29px")};
+  ${fonts.sizes("16px", "29px")};
   font-weight: ${fonts.weight.semibold};
 
   &[data-background-color="white"][data-state="closed"] {
@@ -133,7 +134,9 @@ const ArticleByline = ({
   bylineType = "article",
 }: Props) => {
   const { t } = useTranslation();
+  const { pathname } = useLocation();
   const [openAccordions, setOpenAccordions] = useState<string[]>([]);
+  const accordionItemValue = "rulesForUse";
 
   const onHashChange = useCallback(
     (e: HashChangeEvent) => {
@@ -148,6 +151,10 @@ const ArticleByline = ({
     [openAccordions],
   );
 
+  useEffect(() => {
+    setOpenAccordions((prev) => prev.filter((state) => state !== accordionItemValue));
+  }, [pathname]);
+
   useEffect(() => {
     window.addEventListener("hashchange", onHashChange);
     return () => window.removeEventListener("hashchange", onHashChange);
@@ -181,7 +188,7 @@ const ArticleByline = ({
       )}
       <AccordionRoot type="multiple" onValueChange={setOpenAccordions} value={openAccordions}>
         {licenseBox && (
-          <AccordionItem value="rulesForUse">
+          <AccordionItem value={accordionItemValue}>
             <StyledAccordionHeader headingLevel="h2" data-background-color={accordionHeaderVariant}>
               {t("article.useContent")}
             </StyledAccordionHeader>

package/src/Article/ArticleParagraph.tsx

@@ -17,6 +17,9 @@ const StyledParagraph = styled.p`
   &[data-align="center"] {
     text-align: center;
   }
+  &:has(span[dir="rtl"]) {
+    direction: rtl;
+  }
 `;
 
 export const ArticleParagraph = (props: Props) => <StyledParagraph {...props} />;

package/src/BlogPost/BlogPost.tsx

@@ -84,12 +84,13 @@ const StyledImg = styled.img`
 const BlogPost = ({ title, author, url, metaImage, headingLevel: Heading = "h3", size = "normal", path }: Props) => {
   const { t } = useTranslation();
   const href = getPossiblyRelativeUrl(url, path);
+  const imageWidth = size === "large" ? 532 : 350;
   return (
     <Container data-size={size} to={href}>
       <Heading className="blog-title" css={headingCss}>
         {parse(title)}
       </Heading>
-      <StyledImg src={metaImage.url} alt={metaImage.alt} />
+      <StyledImg src={`${metaImage.url}?width=${imageWidth}`} alt={metaImage.alt} />
       {!!author && <AuthorContainer aria-label={t("article.writtenBy", { authors: author })}>{author}</AuthorContainer>}
     </Container>
   );

package/src/CampaignBlock/CampaignBlock.tsx

@@ -91,7 +91,7 @@ const CampaignBlock = ({
 }: Props) => {
   return (
     <Container className={className} data-type="campaign-block" data-image-side={imageSide}>
-      {image && <StyledImg src={image.src} height={200} width={240} alt={image.alt} />}
+      {image && <StyledImg src={`${image.src}?width=240`} height={200} width={240} alt={image.alt} />}
       <TextWrapper>
         <Heading css={headingStyle}>{parse(title)}</Heading>
         <StyledDescription>{parse(description)}</StyledDescription>

package/src/CodeBlock/CodeBlock.tsx

@@ -70,7 +70,7 @@ const StyledPre = styled.pre`
     display: block;
     ${fonts.sizes("14px", "20px")};
     font-family:
-      Source Code Pro,
+      Source Code ProVariable,
       Monaco;
     margin: 0;
     padding: 0;

package/src/Embed/AudioEmbed.stories.tsx

@@ -11,7 +11,7 @@ import { AudioEmbedData, AudioMeta } from "@ndla/types-embed";
 import AudioEmbed from "./AudioEmbed";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: AudioEmbedData = {
   resource: "audio",
@@ -190,11 +190,11 @@ const meta: Meta<typeof AudioEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -11,7 +11,7 @@ import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from "@ndla/t
 import BrightcoveEmbed from "./BrightcoveEmbed";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: BrightcoveEmbedData = {
   resource: "brightcove",
@@ -163,11 +163,11 @@ const meta: Meta<typeof BrightcoveEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/ConceptEmbed.stories.tsx

@@ -11,7 +11,7 @@ import { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
 import ConceptEmbed from "./ConceptEmbed";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const blockEmbedData: ConceptEmbedData = {
   contentId: "35",
@@ -235,11 +235,11 @@ const meta: Meta<typeof ConceptEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/ConceptEmbed.tsx

@@ -177,6 +177,7 @@ interface InlineConceptProps extends ConceptNotionData {
   conceptHeartButton?: ReactNode;
   exampleIds?: string;
   exampleLangs?: string;
+  setSelection?: (e: MouseEvent) => void;
 }
 
 const NotionButton = styled.span`
@@ -238,6 +239,7 @@ export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
       lang,
       exampleIds,
       exampleLangs,
+      setSelection,
       ...rest
     },
     ref,
@@ -258,13 +260,29 @@ export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
       }
     }, []);
 
+    const preventAutoFocusInEditor = useCallback(
+      (e: MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setSelection?.(e);
+      },
+      [setSelection],
+    );
+
     return (
       <Root modal={isMobile} onOpenChange={onOpenChange}>
         <StyledAnchor ref={anchorRef} asChild>
           <StyledAnchorSpan contentEditable={false} />
         </StyledAnchor>
-        <Trigger asChild type={undefined}>
-          <NotionButton role="button" data-open={modalPos !== -9999} tabIndex={0} ref={ref} {...rest}>
+        <Trigger asChild>
+          <NotionButton
+            onMouseDown={(e) => (setSelection ? preventAutoFocusInEditor(e.nativeEvent) : undefined)}
+            data-open={modalPos !== -9999}
+            role="button"
+            tabIndex={0}
+            ref={ref}
+            {...rest}
+          >
             {linkText}
           </NotionButton>
         </Trigger>

package/src/Embed/ExternalEmbed.stories.tsx

@@ -10,7 +10,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { OembedEmbedData, OembedData } from "@ndla/types-embed";
 import ExternalEmbed from "./ExternalEmbed";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: OembedEmbedData = {
   resource: "external",
@@ -57,11 +57,11 @@ const meta: Meta<typeof ExternalEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/H5pEmbed.stories.tsx

@@ -10,7 +10,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { H5pEmbedData, H5pData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: H5pEmbedData = {
   resource: "h5p",
@@ -54,11 +54,11 @@ const meta: Meta<typeof H5pEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/IframeEmbed.stories.tsx

@@ -10,7 +10,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { IframeData, IframeEmbedData } from "@ndla/types-embed";
 import IframeEmbed from "./IframeEmbed";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: IframeEmbedData = {
   width: "708px",
@@ -29,11 +29,11 @@ const meta: Meta<typeof IframeEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/ImageEmbed.stories.tsx

@@ -13,7 +13,7 @@ import { ImageEmbedData } from "@ndla/types-embed";
 import ImageEmbed from "./ImageEmbed";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: ImageEmbedData = {
   resource: "image",
@@ -96,11 +96,11 @@ const meta: Meta<typeof ImageEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -10,7 +10,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { RelatedContentMetaData } from "@ndla/types-embed";
 import RelatedContentEmbed from "./RelatedContentEmbed";
 import { ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 import RelatedArticleList from "../RelatedArticleList";
 
 const filmResourceMeta: RelatedContentMetaData = {
@@ -369,11 +369,11 @@ const meta: Meta<typeof RelatedContentEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),
@@ -404,6 +404,17 @@ const linkEmbed2: RelatedContentMetaData = {
   status: "success",
 };
 
+const linkEmbed3: RelatedContentMetaData = {
+  resource: "related-content",
+  embedData: {
+    resource: "related-content",
+    title: "Valg av tillitselev fra klassen",
+    url: "https://xn--elevrd-mua.no",
+  },
+  data: undefined,
+  status: "success",
+};
+
 export const RelatedContentStory: StoryObj<typeof RelatedContentEmbed> = {
   render: () => (
     <RelatedArticleList>
@@ -429,6 +440,7 @@ export const WithLinks: StoryObj<typeof RelatedContentEmbed> = {
     <RelatedArticleList>
       <RelatedContentEmbed embed={linkEmbed1} />
       <RelatedContentEmbed embed={linkEmbed2} />
+      <RelatedContentEmbed embed={linkEmbed3} />
     </RelatedArticleList>
   ),
 };

package/src/Embed/RelatedContentEmbed.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+import punycode from "punycode/";
 import { useTranslation } from "react-i18next";
 import { RelatedContentMetaData } from "@ndla/types-embed";
 import { contentTypeMapping } from "../model/ContentType";
@@ -53,7 +54,9 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
         type={"external"}
         linkInfo={`${t("related.linkInfo")} ${
           // Get domain name only from url
-          embedData.url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im)?.[1] || embedData.url
+          punycode.toUnicode(
+            embedData.url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im)?.[1] || embedData.url,
+          )
         }`}
       />
     );

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -15,7 +15,7 @@ import { ArticleWrapper } from "../Article";
 import CopyParagraphButton from "../CopyParagraphButton";
 import FactBox from "../FactBox";
 import FramedContent from "../FramedContent";
-import { OneColumn } from "../Layout";
+import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: UuDisclaimerEmbedData = {
   resource: "uu-disclaimer",
@@ -31,11 +31,11 @@ const meta: Meta<typeof UuDisclaimerEmbed> = {
     (Story) => (
       <OneColumn>
         <ArticleWrapper modifier="clean">
-          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+          <LayoutItem layout="center">
             <section>
               <Story />
             </section>
-          </section>
+          </LayoutItem>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/ErrorMessage/ErrorMessage.tsx

@@ -40,6 +40,10 @@ const CustomElementWrapper = styled.div`
   margin: ${spacing.large} 0;
 `;
 
+const MessageWrapper = styled.div`
+  margin-top: ${spacing.xsmall};
+`;
+
 interface Props {
   messages: {
     title: string;
@@ -75,14 +79,14 @@ export const ErrorMessage = ({ children, messages, illustration, illustrationEle
       </SafeLink>
     )}
     {messages.goToFrontPage && (
-      <div css={{ marginTop: spacing.xsmall }}>
+      <MessageWrapper>
         <SafeLink to="/">{messages.goToFrontPage}</SafeLink>
-      </div>
+      </MessageWrapper>
     )}
     {messages.logInFailed && (
-      <div css={{ marginTop: spacing.xsmall }}>
+      <MessageWrapper>
         <SafeLink to="/minndla">{messages.logInFailed}</SafeLink>
-      </div>
+      </MessageWrapper>
     )}
     {children}
   </StyledErrorMessage>

package/src/Figure/Figure.tsx

@@ -9,9 +9,9 @@
 // N.B These components is used to render static markup serverside
 
 import { ComponentPropsWithRef, forwardRef, useMemo } from "react";
-import { css } from "@emotion/react";
+import { SerializedStyles, css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
+import { breakpoints, mq, spacing } from "@ndla/core";
 
 const StyledFigure = styled.figure`
   position: relative;
@@ -35,36 +35,114 @@ const StyledFigure = styled.figure`
   }
 `;
 
-const fullColumnStyle = css`
-  left: auto !important;
-  right: auto !important;
-  width: auto !important;
-  padding-left: 0;
-  padding-right: 0;
-  padding-bottom: ${spacing.large};
-  margin-bottom: 0;
-`;
+const floatSizes: Record<FigureType, SerializedStyles> = {
+  left: css`
+    margin-top: ${spacing.xsmall};
+    --float: left;
+    --width: 50%;
+    --width-desktop: 65%;
+    & {
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding-right: ${spacing.small};
+      }
+    }
+  `,
+  right: css`
+    margin-top: ${spacing.xsmall};
+    --float: right;
+    --width: 50%;
+    --width-desktop: 65%;
+    & {
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding-left: ${spacing.small};
+      }
+    }
+  `,
+  "small-left": css`
+    margin-top: ${spacing.xsmall};
+    --float: left;
+    --width: 25%;
+    --width-desktop: 50%;
+    & {
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding-right: ${spacing.small};
+      }
+    }
+  `,
+  "small-right": css`
+    margin-top: ${spacing.xsmall};
+    --float: right;
+    --width: 25%;
+    --width-desktop: 50%;
+    & {
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding-left: ${spacing.small};
+      }
+    }
+  `,
+  "xsmall-left": css`
+    --float: left;
+    --width: 25%;
+    & {
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding-right: ${spacing.small};
+        margin: ${spacing.xsmall} 0 ${spacing.medium};
+      }
+    }
+  `,
+  "xsmall-right": css`
+    --float: right;
+    --width: 25%;
+    & {
+      ${mq.range({ from: breakpoints.tablet })} {
+        padding-left: ${spacing.small};
+        margin: ${spacing.xsmall} 0 ${spacing.normal} ${spacing.xsmall};
+      }
+    }
+  `,
+  full: css`
+    margin-top: ${spacing.xsmall};
+  `,
+  "full-column": css`
+    left: auto !important;
+    right: auto !important;
+    width: auto !important;
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: ${spacing.large};
+    margin-bottom: 0;
+  `,
+};
 
-const rightStyle = css`
-  float: right;
+const floatStyle = css`
+  ${mq.range({ from: breakpoints.tablet })} {
+    float: var(--float);
+    clear: var(--float);
+    width: var(--width) !important;
+    z-index: 1;
+    left: auto !important;
+    padding: 0;
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    width: var(--width-desktop, var(--width)) !important;
+  }
 `;
 
-const smallTypes = ["small-right", "xsmall-right"];
-
-const Figure = forwardRef<HTMLElement, Props>(({ children, type = "full", className, ...rest }, ref) => {
-  const floatClass = type === "full-column" ? undefined : `u-float-${type}`;
-
+const Figure = forwardRef<HTMLElement, Props>(({ children, type = "full", ...rest }, ref) => {
   const styles = useMemo(() => {
     const styles = [];
-    if (!floatClass) styles.push(fullColumnStyle);
-    if (smallTypes.includes(type)) styles.push(rightStyle);
+    const floatCss = floatSizes[type];
+    if (type !== "full-column" && type !== "full") {
+      styles.push(floatStyle);
+    }
+    if (floatCss) {
+      styles.push(floatCss);
+    }
     return styles;
-  }, [floatClass, type]);
-
-  const classes = floatClass ? `${floatClass} ${className ?? ""}` : className;
+  }, [type]);
 
   return (
-    <StyledFigure data-sizetype={type} css={styles} className={classes} {...rest} ref={ref}>
+    <StyledFigure data-sizetype={type} css={styles} {...rest} ref={ref}>
       {children}
     </StyledFigure>
   );

package/src/KeyFigure/KeyFigure.tsx

@@ -65,7 +65,7 @@ interface Props {
 const KeyFigure = ({ image, title, subtitle }: Props) => {
   return (
     <ContentWrapper>
-      <StyledImage src={image?.src} width={150} height={150} alt={image?.alt} />
+      <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />
       <TitleWrapper>{parse(title)}</TitleWrapper>
       <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>
     </ContentWrapper>

package/src/Layout/LayoutItem.tsx

@@ -7,25 +7,42 @@
  */
 
 import { HTMLAttributes, ReactNode, useMemo } from "react";
+import { css } from "@emotion/react";
+import { mq, breakpoints } from "@ndla/core";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;
   layout?: "extend" | "center";
 }
 
+const centerCss = css`
+  position: relative !important;
+  width: 83.333%;
+  right: auto !important;
+  left: 8.333%;
+`;
+
+const extendCss = css`
+  ${mq.range({ from: breakpoints.tablet })} {
+    position: relative !important;
+    width: 83.333%;
+    right: auto !important;
+    left: 8.333%;
+  }
+`;
+
 export const LayoutItem = ({ children, layout, ...rest }: Props) => {
-  const className = useMemo(() => {
+  const style = useMemo(() => {
     if (layout === "extend") {
-      return "u-10/12@desktop u-push-1/12@desktop u-10/12@tablet u-push-1/12@tablet";
-    }
-    if (layout === "center") {
-      return "u-10/12 u-push-1/12";
+      return extendCss;
+    } else if (layout === "center") {
+      return centerCss;
     }
     return undefined;
   }, [layout]);
 
   return (
-    <section className={className} {...rest}>
+    <section css={style} {...rest}>
       {children}
     </section>
   );

package/src/Layout/index.ts

@@ -10,6 +10,5 @@ import LayoutItem from "./LayoutItem";
 
 export { default as OneColumn } from "./OneColumn";
 export { default as PageContainer } from "./PageContainer";
-export { default as Content } from "./Content";
 
 export default LayoutItem;

package/src/List/OrderedList.stories.tsx

@@ -82,7 +82,7 @@ export const WithNumbersAndLetters: StoryFn = () => (
 );
 
 export const StartingAtFive: StoryFn = () => (
-  <OrderedList start={5} data-type="letters" className="ol-reset-5">
+  <OrderedList start={5} data-type="letters">
     <li>Listepunkt 1</li>
     <li>Listepunkt 2</li>
     <li>
@@ -97,7 +97,7 @@ export const StartingAtFive: StoryFn = () => (
             <li>Listepunkt 2</li>
             <li>
               Listepunkt 3
-              <OrderedList className="ol-reset-5" start={5}>
+              <OrderedList start={5}>
                 <li>Listepunkt 1</li>
                 <li>Listepunkt 2</li>
                 <li>Listepunkt 3</li>