@ndla/ui 53.0.1 → 54.0.0

package/lib/index.d.ts

@@ -44,7 +44,7 @@ export { default as messagesSMA } from "./locale/messages-sma";
 export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./Breadcrumb";
 export { i18nInstance, formatNestedMessages } from "./i18n";
-export { default as LayoutItem, OneColumn, PageContainer, Content } from "./Layout";
+export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
 export { MediaList, MediaListItem, MediaListItemBody, MediaListItemActions, MediaListItemImage, MediaListItemMeta, } from "./MediaList";
 export type { ItemType } from "./MediaList";
 export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, SourceMaterialBadge, ConceptBadge, } from "./ContentTypeBadge";

package/lib/index.js

@@ -171,12 +171,6 @@ Object.defineProperty(exports, "ContactBlock", {
     return _ContactBlock.default;
   }
 });
-Object.defineProperty(exports, "Content", {
-  enumerable: true,
-  get: function () {
-    return _Layout.Content;
-  }
-});
 Object.defineProperty(exports, "ContentLinkEmbed", {
   enumerable: true,
   get: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "53.0.1",
+  "version": "54.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,19 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^4.0.1",
-    "@ndla/button": "^13.0.1",
-    "@ndla/core": "^5.0.0",
-    "@ndla/dropdown-menu": "^1.0.37",
-    "@ndla/forms": "^8.0.1",
+    "@ndla/accordion": "^4.0.2",
+    "@ndla/button": "^13.0.2",
+    "@ndla/core": "^5.0.1",
+    "@ndla/dropdown-menu": "^1.0.38",
+    "@ndla/forms": "^8.0.2",
     "@ndla/hooks": "^2.1.7",
-    "@ndla/icons": "^6.1.4",
+    "@ndla/icons": "^6.1.5",
     "@ndla/licenses": "^7.2.6",
-    "@ndla/modal": "^6.0.0",
-    "@ndla/notion": "^7.0.0",
-    "@ndla/safelink": "^5.1.4",
-    "@ndla/tooltip": "^8.0.0",
-    "@ndla/typography": "^0.4.20",
+    "@ndla/modal": "^6.0.1",
+    "@ndla/notion": "^7.0.1",
+    "@ndla/safelink": "^5.1.5",
+    "@ndla/tooltip": "^8.0.1",
+    "@ndla/typography": "^0.4.21",
     "@ndla/util": "^4.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -51,6 +51,7 @@
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0",
     "lodash.throttle": "^4.1.1",
+    "punycode.js": "^2.3.1",
     "react-device-detect": "^2.2.3",
     "react-select": "^5.8.0",
     "react-swipeable": "^7.0.0"
@@ -65,8 +66,8 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/types-backend": "^0.2.64",
-    "@ndla/types-embed": "^4.1.6",
+    "@ndla/types-backend": "^0.2.82",
+    "@ndla/types-embed": "^4.1.7",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -76,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "974106ddedc78dd285be5b635e3fc534711f57fd"
+  "gitHead": "c778ba48c327f14eaae3e2da21ed24b183719167"
 }

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/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>