@ndla/ui 56.0.142-alpha.0 → 56.0.144-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/ui",
   "type": "module",
-  "version": "56.0.142-alpha.0",
+  "version": "56.0.144-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "exports": {
@@ -38,11 +38,11 @@
   "dependencies": {
     "@ark-ui/react": "^5.25.0",
     "@ndla/core": "^6.0.3-alpha.0",
-    "@ndla/icons": "^8.0.67-alpha.0",
-    "@ndla/licenses": "^10.0.0-alpha.0",
-    "@ndla/primitives": "^1.0.99-alpha.0",
-    "@ndla/safelink": "^7.0.102-alpha.0",
-    "@ndla/styled-system": "^0.0.39",
+    "@ndla/icons": "^8.0.68-alpha.0",
+    "@ndla/licenses": "^10.0.2-alpha.0",
+    "@ndla/primitives": "^1.0.101-alpha.0",
+    "@ndla/safelink": "^7.0.104-alpha.0",
+    "@ndla/styled-system": "^0.0.40",
     "@ndla/util": "^5.0.12-alpha.0",
     "html-react-parser": "^5.1.19"
   },
@@ -54,7 +54,7 @@
     "react-router": ">= 7.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.60",
+    "@ndla/preset-panda": "^0.0.61",
     "@ndla/types-backend": "^1.0.50",
     "@ndla/types-embed": "^5.0.16-alpha.0",
     "@pandacss/dev": "^1.3.1"
@@ -62,5 +62,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6fde2ca9ba17fc522610391805f05984bbe630f6"
+  "gitHead": "b1514c3d55474e813dba023e74fca6f81ae15b43"
 }

package/src/Article/Article.tsx

@@ -10,7 +10,7 @@ import { type ComponentPropsWithRef, type ReactNode, forwardRef } from "react";
 import { ark, type HTMLArkProps } from "@ark-ui/react";
 import { Heading, Text } from "@ndla/primitives";
 import { cx } from "@ndla/styled-system/css";
-import { Stack, styled } from "@ndla/styled-system/jsx";
+import { styled } from "@ndla/styled-system/jsx";
 import type { StyledProps } from "@ndla/styled-system/types";
 import { ArticleByline } from "./ArticleByline";
 import { ContentTypeBadge, type ContentType } from "../ContentTypeBadge/ContentTypeBadge";
@@ -101,8 +101,12 @@ export const ArticleFooter = styled(
   { baseComponent: true },
 );
 
-const StyledStack = styled(Stack, {
+const InfoWrapper = styled("div", {
   base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "small",
     width: "100%",
     minHeight: "xxlarge",
   },
@@ -144,10 +148,10 @@ export const ArticleTitle = ({
     <ArticleHeader>
       <ArticleHGroup>
         {(!!contentType || !!heartButton) && (
-          <StyledStack justify="space-between" align="center" direction="row" gap="small">
+          <InfoWrapper>
             {!!contentType && <ContentTypeBadge contentType={contentType}>{contentTypeLabel}</ContentTypeBadge>}
             {heartButton}
-          </StyledStack>
+          </InfoWrapper>
         )}
         <Heading textStyle="heading.medium" id={id} lang={lang} property="dct:title">
           {title}

package/src/Breadcrumb/Breadcrumb.stories.tsx

@@ -40,28 +40,13 @@ export default {
   },
 } as Meta<typeof Breadcrumb>;
 
-export const Defalt: StoryObj<typeof Breadcrumb> = {};
-
-export const CollapseFirst: StoryObj<typeof Breadcrumb> = {
-  args: { collapseFirst: true },
-};
-
-export const CollapseLast: StoryObj<typeof Breadcrumb> = {
-  args: { collapseLast: true },
-};
-
-export const CustomSeparator: StoryObj<typeof Breadcrumb> = {
+export const Defalt: StoryObj<typeof Breadcrumb> = {
   args: {
     renderSeparator: (item, totalCount) => (
       <div style={{ padding: "0px 12px" }}>
         {item.index}/{totalCount}
       </div>
     ),
-  },
-};
-
-export const CustomItem: StoryObj<typeof Breadcrumb> = {
-  args: {
     renderItem: (item) => (
       <div>
         {item.index}:{item.name}

package/src/Breadcrumb/Breadcrumb.tsx

@@ -13,10 +13,8 @@ import BreadcrumbItem, { type IndexedBreadcrumbItem, type SimpleBreadcrumbItem }
 
 interface Props {
   items: SimpleBreadcrumbItem[];
-  collapseFirst?: boolean;
-  collapseLast?: boolean;
-  renderItem?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
-  renderSeparator?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
+  renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
+  renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
 }
 
 const StyledList = styled("ol", {
@@ -34,7 +32,7 @@ const StyledList = styled("ol", {
   },
 });
 
-const Breadcrumb = ({ items, renderItem, renderSeparator, collapseFirst, collapseLast = true }: Props) => {
+const Breadcrumb = ({ items, renderItem, renderSeparator }: Props) => {
   const { t } = useTranslation();
 
   return (
@@ -44,17 +42,6 @@ const Breadcrumb = ({ items, renderItem, renderSeparator, collapseFirst, collaps
           <BreadcrumbItem
             renderItem={renderItem}
             renderSeparator={renderSeparator}
-            ref={(element) => {
-              if (
-                element === null ||
-                (!collapseFirst && index === 0) ||
-                (!collapseLast && index === items.length - 1)
-              ) {
-                if (element) {
-                  element.setMaxWidth("none");
-                }
-              }
-            }}
             key={typeof item.to === "string" ? item.to : item.to.pathname}
             totalCount={items.length}
             item={{ ...item, index }}

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -6,9 +6,7 @@
  *
  */
 
-import { useRef, useImperativeHandle, type ReactNode, forwardRef } from "react";
-import { ArrowRightShortLine } from "@ndla/icons";
-import { SafeLink } from "@ndla/safelink";
+import { type ReactNode } from "react";
 import { styled } from "@ndla/styled-system/jsx";
 
 export interface SimpleBreadcrumbItem {
@@ -46,35 +44,18 @@ interface Props {
   item: IndexedBreadcrumbItem;
   autoCollapse?: boolean;
   totalCount: number;
-  renderItem?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
-  renderSeparator?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
+  renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
+  renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
 }
 
-const BreadcrumbItem = forwardRef<any, Props>(({ renderItem, renderSeparator, item, totalCount }, ref) => {
-  const liRef = useRef<any>(null);
-
-  useImperativeHandle(ref, () => ({
-    setMaxWidth: (maxWidth: number) => {
-      liRef.current.children[0].style.maxWidth = maxWidth;
-    },
-  }));
-
-  const { to, name, index } = item;
-  const isLast = index === totalCount - 1;
+const BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }: Props) => {
+  const isLast = item.index === totalCount - 1;
   return (
-    <StyledListItem ref={liRef} aria-current={isLast ? "page" : undefined}>
-      {renderItem ? (
-        renderItem(item, totalCount)
-      ) : isLast ? (
-        <span>{name}</span>
-      ) : (
-        <SafeLink to={to}>
-          <span>{name}</span>
-        </SafeLink>
-      )}
-      {renderSeparator ? renderSeparator(item, totalCount) : !isLast && <ArrowRightShortLine />}
+    <StyledListItem aria-current={isLast ? "page" : undefined}>
+      {renderItem(item, totalCount)}
+      {renderSeparator(item, totalCount)}
     </StyledListItem>
   );
-});
+};
 
 export default BreadcrumbItem;

package/src/Breadcrumb/HomeBreadcrumb.tsx

@@ -63,9 +63,9 @@ const HomeBreadcrumb = ({ items }: Props) => {
       return null;
     }
     if (item.index === 0) {
-      return <StyledArrowRight />;
+      return <StyledArrowRight aria-hidden />;
     }
-    return <ArrowRightShortLine />;
+    return <ArrowRightShortLine aria-hidden />;
   };
 
   return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;

package/src/Concept/Concept.tsx

@@ -11,7 +11,11 @@ import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { IDraftCopyrightDTO as ConceptCopyright } from "@ndla/types-backend/concept-api";
 import type { ConceptVisualElementMeta } from "@ndla/types-embed";
-import { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from "../Embed";
+import BrightcoveEmbed from "../Embed/BrightcoveEmbed";
+import ExternalEmbed from "../Embed/ExternalEmbed";
+import H5pEmbed from "../Embed/H5pEmbed";
+import IframeEmbed from "../Embed/IframeEmbed";
+import ImageEmbed from "../Embed/ImageEmbed";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
 

package/src/Embed/AudioEmbed.stories.tsx

@@ -10,7 +10,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { AudioEmbedData, AudioMeta } from "@ndla/types-embed";
 import AudioEmbed from "./AudioEmbed";
-import { ArticleContent, ArticleWrapper } from "../Article";
+import { ArticleContent, ArticleWrapper } from "../Article/Article";
 
 const embedData: AudioEmbedData = {
   resource: "audio",

package/src/Embed/AudioEmbed.tsx

@@ -11,8 +11,8 @@ import { styled } from "@ndla/styled-system/jsx";
 import type { AudioMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import type { Author } from "./ImageEmbed";
-import AudioPlayer from "../AudioPlayer";
-import { EmbedByline } from "../LicenseByline";
+import AudioPlayer from "../AudioPlayer/AudioPlayer";
+import { EmbedByline } from "../LicenseByline/EmbedByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
 
 const StyledFigure = styled(Figure, {

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -10,7 +10,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from "@ndla/types-embed";
 import BrightcoveEmbed from "./BrightcoveEmbed";
-import { ArticleContent, ArticleWrapper } from "../Article";
+import { ArticleContent, ArticleWrapper } from "../Article/Article";
 
 const embedData: BrightcoveEmbedData = {
   resource: "brightcove",

package/src/Embed/BrightcoveEmbed.tsx

@@ -14,7 +14,7 @@ import { styled } from "@ndla/styled-system/jsx";
 import type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import type { RenderContext } from "./types";
-import { EmbedByline } from "../LicenseByline";
+import { EmbedByline } from "../LicenseByline/EmbedByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
 
 interface Props {

package/src/Embed/CodeEmbed.tsx

@@ -13,8 +13,8 @@ import { Button, Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { CodeMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { CodeBlock, codeLanguageOptions } from "../CodeBlock";
-import type { ICodeLangugeOption } from "../CodeBlock/codeLanguageOptions";
+import CodeBlock from "../CodeBlock/CodeBlock";
+import { codeLanguageOptions, type ICodeLangugeOption } from "../CodeBlock/codeLanguageOptions";
 
 interface Props {
   embed: CodeMetaData;

package/src/Embed/ConceptEmbed.stories.tsx

@@ -10,7 +10,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
 import { ConceptEmbed } from "./ConceptEmbed";
-import { ArticleContent, ArticleWrapper } from "../Article";
+import { ArticleContent, ArticleWrapper } from "../Article/Article";
 
 const blockEmbedData: ConceptEmbedData = {
   contentId: "35",

package/src/Embed/CopyrightEmbed.tsx

@@ -9,7 +9,7 @@
 import type { ReactNode } from "react";
 import { styled } from "@ndla/styled-system/jsx";
 import type { CopyrightMetaData } from "@ndla/types-embed";
-import { EmbedByline } from "../LicenseByline";
+import { EmbedByline } from "../LicenseByline/EmbedByline";
 
 interface Props {
   embed: CopyrightMetaData;

package/src/Embed/EmbedErrorPlaceholder.tsx

@@ -10,8 +10,7 @@ import { type ReactNode } from "react";
 import { ErrorWarningLine } from "@ndla/icons";
 import { Figure, type FigureFloat, type FigureSize } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { EmbedByline } from "../LicenseByline";
-import { type EmbedBylineErrorProps } from "../LicenseByline/EmbedByline";
+import { EmbedByline, type EmbedBylineErrorProps } from "../LicenseByline/EmbedByline";
 
 interface Props {
   type: EmbedBylineErrorProps["type"];

package/src/Embed/ExternalEmbed.stories.tsx

@@ -10,7 +10,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { OembedEmbedData, OembedData } from "@ndla/types-embed";
 import ExternalEmbed from "./ExternalEmbed";
-import { ArticleWrapper, ArticleContent } from "../Article";
+import { ArticleWrapper, ArticleContent } from "../Article/Article";
 
 const embedData: OembedEmbedData = {
   resource: "external",

package/src/Embed/ExternalEmbed.tsx

@@ -12,7 +12,7 @@ import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { OembedMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { ResourceBox } from "../ResourceBox";
+import ResourceBox from "../ResourceBox/ResourceBox";
 
 interface Props {
   embed: OembedMetaData;

package/src/Embed/FootnoteEmbed.stories.tsx

@@ -9,7 +9,7 @@
 import type { Meta, StoryFn, StoryObj } from "@storybook/react";
 import type { FootnoteData, FootnoteEmbedData } from "@ndla/types-embed";
 import FootnoteEmbed from "./FootnoteEmbed";
-import { ArticleByline } from "../Article";
+import { ArticleByline } from "../Article/ArticleByline";
 
 /**
  * Kildehenvisninger benytter [APA-stilen](https://sokogskriv.no/kildebruk-og-referanser/referansestiler/apa-6th/) for utlistning nederst på siden.

package/src/Embed/GlossEmbed.tsx

@@ -13,7 +13,7 @@ import { styled } from "@ndla/styled-system/jsx";
 import type { ConceptMetaData } from "@ndla/types-embed";
 import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { Gloss } from "../Gloss";
+import Gloss from "../Gloss/Gloss";
 
 interface Props {
   embed: ConceptMetaData;

package/src/Embed/H5pEmbed.stories.tsx

@@ -10,7 +10,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { H5pEmbedData, H5pData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
-import { ArticleWrapper, ArticleContent } from "../Article";
+import { ArticleWrapper, ArticleContent } from "../Article/Article";
 
 const embedData: H5pEmbedData = {
   resource: "h5p",

package/src/Embed/IframeEmbed.stories.tsx

@@ -10,7 +10,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { IframeData, IframeEmbedData } from "@ndla/types-embed";
 import IframeEmbed from "./IframeEmbed";
-import { ArticleWrapper, ArticleContent } from "../Article";
+import { ArticleWrapper, ArticleContent } from "../Article/Article";
 
 const embedData: IframeEmbedData = {
   width: "708px",

package/src/Embed/IframeEmbed.tsx

@@ -12,7 +12,7 @@ import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { IframeMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { ResourceBox } from "../ResourceBox";
+import ResourceBox from "../ResourceBox/ResourceBox";
 
 interface Props {
   embed: IframeMetaData;

package/src/Embed/ImageEmbed.stories.tsx

@@ -13,8 +13,8 @@ import { styled } from "@ndla/styled-system/jsx";
 import type { IImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
 import type { ImageEmbedData } from "@ndla/types-embed";
 import ImageEmbed from "./ImageEmbed";
-import { ArticleWrapper, ArticleContent } from "../Article";
-import { Grid } from "../Grid";
+import { ArticleWrapper, ArticleContent } from "../Article/Article";
+import { Grid } from "../Grid/Grid";
 
 const embedData: ImageEmbedData = {
   resource: "image",

package/src/Embed/ImageEmbed.tsx

@@ -15,7 +15,7 @@ import { styled } from "@ndla/styled-system/jsx";
 import type { ImageEmbedData, ImageMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import type { RenderContext } from "./types";
-import { EmbedByline } from "../LicenseByline";
+import { EmbedByline } from "../LicenseByline/EmbedByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
 
 interface Props {

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -10,8 +10,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { RelatedContentMetaData } from "@ndla/types-embed";
 import RelatedContentEmbed from "./RelatedContentEmbed";
-import { ArticleWrapper, ArticleContent } from "../Article";
-import RelatedArticleList from "../RelatedArticleList";
+import { ArticleWrapper, ArticleContent } from "../Article/Article";
+import { RelatedArticleList } from "../RelatedArticleList/RelatedArticleList";
 
 const filmResourceMeta: RelatedContentMetaData = {
   resource: "related-content",

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -12,9 +12,9 @@ import type { UUDisclaimerData, UuDisclaimerEmbedData } from "@ndla/types-embed"
 import H5pEmbed from "./H5pEmbed";
 import IframeEmbed from "./IframeEmbed";
 import UuDisclaimerEmbed from "./UuDisclaimerEmbed";
-import { ArticleWrapper, ArticleContent } from "../Article";
-import CopyParagraphButton from "../CopyParagraphButton";
-import FactBox from "../FactBox";
+import { ArticleWrapper, ArticleContent } from "../Article/Article";
+import CopyParagraphButton from "../CopyParagraphButton/CopyParagraphButton";
+import FactBox from "../FactBox/FactBox";
 
 const embedData: UuDisclaimerEmbedData = {
   resource: "uu-disclaimer",

package/src/FileList/File.tsx

@@ -11,9 +11,9 @@ import { useTranslation } from "react-i18next";
 import { DownloadLine } from "@ndla/icons";
 import { Text } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
-import { HStack, styled } from "@ndla/styled-system/jsx";
+import { styled } from "@ndla/styled-system/jsx";
 import { linkOverlay } from "@ndla/styled-system/patterns";
-import { FileListItem } from ".";
+import { FileListItem } from "./FileList";
 
 export interface FileProps extends ComponentPropsWithRef<"div"> {
   title: string;
@@ -45,8 +45,11 @@ const StyledSafeLink = styled(SafeLink, {
   },
 });
 
-const StyledHStack = styled(HStack, {
+const FileContainer = styled("div", {
   base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
     position: "relative",
     paddingBlock: "small",
     paddingInlineEnd: "medium",
@@ -55,6 +58,14 @@ const StyledHStack = styled(HStack, {
   },
 });
 
+const InfoContainer = styled("div", {
+  base: {
+    display: "flex",
+    gap: "xxsmall",
+    alignItems: "center",
+  },
+});
+
 export const File = forwardRef<HTMLDivElement, FileProps>(
   ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {
     const { t } = useTranslation();
@@ -63,8 +74,8 @@ export const File = forwardRef<HTMLDivElement, FileProps>(
     const tooltip = `${t("download")} ${filename}`;
 
     return (
-      <StyledHStack justify="space-between" ref={ref} {...rest}>
-        <HStack gap="xxsmall">
+      <FileContainer ref={ref} {...rest}>
+        <InfoContainer>
           <DownloadLine />
           {fileExists ? (
             <StyledSafeLink unstyled css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>
@@ -76,11 +87,11 @@ export const File = forwardRef<HTMLDivElement, FileProps>(
           <Text textStyle="label.large" asChild consumeCss>
             <span>({fileType?.toUpperCase()})</span>
           </Text>
-        </HStack>
+        </InfoContainer>
         <Text textStyle="label.large" asChild consumeCss>
           <span>{fileSize}</span>
         </Text>
-      </StyledHStack>
+      </FileContainer>
     );
   },
 );

package/src/LinkBlock/LinkBlock.stories.tsx

@@ -7,8 +7,8 @@
  */
 
 import type { Meta, StoryObj, StoryFn } from "@storybook/react";
-import { LinkBlockSection } from ".";
 import LinkBlock from "./LinkBlock";
+import LinkBlockSection from "./LinkBlockSection";
 
 export default {
   title: "Components/Link Block",

package/src/Pitch/Pitch.stories.tsx

@@ -9,8 +9,8 @@
 import type { Meta } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import { Pitch, type Props } from "./Pitch";
-import { ArticleContent, ArticleWrapper } from "../Article";
-import { Grid } from "../Grid";
+import { ArticleContent, ArticleWrapper } from "../Article/Article";
+import { Grid } from "../Grid/Grid";
 
 const args: Props = {
   title: "Min pitch",