@ndla/ui 56.0.35-alpha.0 → 56.0.36-alpha.0

package/lib/locale/messages-nb.d.ts

@@ -1384,6 +1384,7 @@ declare const messages: {
             external: string;
             gloss: string;
             copyright: string;
+            code: string;
         };
     };
     gloss: {

package/lib/locale/messages-nb.js

@@ -1400,7 +1400,8 @@ const messages = {
       h5p: "H5P",
       external: "Ekstern ressurs",
       gloss: "Glose",
-      copyright: "Tekst"
+      copyright: "Tekst",
+      code: "Kodeblokk"
     }
   },
   gloss: {

package/lib/locale/messages-nn.d.ts

@@ -1384,6 +1384,7 @@ declare const messages: {
             external: string;
             gloss: string;
             copyright: string;
+            code: string;
         };
     };
     gloss: {

package/lib/locale/messages-nn.js

@@ -1400,7 +1400,8 @@ const messages = {
       h5p: "H5P",
       external: "Ekstern ressurs",
       gloss: "Glose",
-      copyright: "Tekst"
+      copyright: "Tekst",
+      code: "Kodeblokk"
     }
   },
   gloss: {

package/lib/locale/messages-se.d.ts

@@ -1384,6 +1384,7 @@ declare const messages: {
             external: string;
             gloss: string;
             copyright: string;
+            code: string;
         };
     };
     gloss: {

package/lib/locale/messages-se.js

@@ -1400,7 +1400,8 @@ const messages = {
       h5p: "H5P",
       external: "Olgguldas resursa",
       gloss: "Glose",
-      copyright: "Tekst"
+      copyright: "Tekst",
+      code: "Kodeblokk"
     }
   },
   gloss: {

package/lib/locale/messages-sma.d.ts

@@ -1384,6 +1384,7 @@ declare const messages: {
             external: string;
             gloss: string;
             copyright: string;
+            code: string;
         };
     };
     gloss: {

package/lib/locale/messages-sma.js

@@ -1400,7 +1400,8 @@ const messages = {
       h5p: "H5P",
       external: "Ekstern ressurs",
       gloss: "Glosa",
-      copyright: "Tekst"
+      copyright: "Tekst",
+      code: "Kodeblokk"
     }
   },
   gloss: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.35-alpha.0",
+  "version": "56.0.36-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,10 +33,10 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.24-alpha.0",
+    "@ndla/icons": "^8.0.25-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.32-alpha.0",
-    "@ndla/safelink": "^7.0.32-alpha.0",
+    "@ndla/primitives": "^1.0.33-alpha.0",
+    "@ndla/safelink": "^7.0.33-alpha.0",
     "@ndla/styled-system": "^0.0.22",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
@@ -50,7 +50,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.33",
+    "@ndla/preset-panda": "^0.0.34",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.3-alpha.0",
     "@pandacss/dev": "^0.46.0"
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "07ec7465840ff67d4bf2958dab58ead11fac1dee"
+  "gitHead": "183d252ef9c40520099fadd2ee6a48e46eb1c71e"
 }

package/src/CampaignBlock/CampaignBlock.tsx

@@ -10,8 +10,9 @@ import parse from "html-react-parser";
 import { ReactNode } from "react";
 import { ArrowRightLine } from "@ndla/icons/common";
 import { Text } from "@ndla/primitives";
-import { SafeLink } from "@ndla/safelink";
+import { SafeLinkButton } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
+import { CampaignBlockEmbedData } from "@ndla/types-embed";
 import { HeadingLevel } from "../types";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
@@ -29,9 +30,10 @@ interface Props {
     text?: string;
   };
   image?: Image;
-  imageSide?: "left" | "right";
+  imageSide?: CampaignBlockEmbedData["imageSide"];
   className?: string;
   path?: string;
+  background?: CampaignBlockEmbedData["background"];
 }
 
 const Wrapper = styled("div", {
@@ -46,7 +48,6 @@ const Container = styled("div", {
   base: {
     display: "grid",
     gridTemplateColumns: "1fr",
-    gap: "medium",
     border: "1px solid",
     borderColor: "stroke.default",
     backgroundColor: "background.default",
@@ -77,32 +78,19 @@ const Container = styled("div", {
         },
       },
     },
+    background: {
+      neutral: {},
+      brand1: {
+        backgroundColor: "surface.brand.1",
+      },
+      brand3: {
+        backgroundColor: "surface.brand.3",
+      },
+    },
   },
   defaultVariants: {
     imageSide: "left",
-  },
-});
-
-const LinkText = styled(Text, {
-  base: {
-    display: "flex",
-    gap: "xxsmall",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none",
-    },
-    paddingBlock: "xsmall",
-    fontWeight: "bold",
-  },
-});
-
-const LinkHeader = styled(Text, {
-  base: {
-    display: "flex",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none",
-    },
+    background: "neutral",
   },
 });
 
@@ -122,6 +110,7 @@ const StyledImg = styled("img", {
         height: "340px",
       },
     },
+    backgroundColor: "background.default",
   },
 });
 
@@ -135,6 +124,7 @@ const ContentWrapper = styled("div", {
     justifyContent: "center",
     paddingBlock: "medium",
     paddingInline: "medium",
+    position: "relative",
   },
 });
 
@@ -150,20 +140,32 @@ const StyledText = styled(Text, {
   },
 });
 
-interface MaybeLinkTextProps {
+interface LinkButtonProps {
   url?: string;
   path?: string;
   children: ReactNode;
 }
 
-const StyledSafeLink = styled(SafeLink, {
+const StyledSafeLinkButton = styled(SafeLinkButton, {
   base: {
-    color: "inherit",
+    boxShadow: "full",
+    border: "1px solid",
+    borderColor: "stroke.default",
   },
 });
 
-const MaybeLinkText = ({ url, children, path }: MaybeLinkTextProps) => {
-  if (url) return <StyledSafeLink to={getPossiblyRelativeUrl(url, path)}>{children}</StyledSafeLink>;
+const LinkButton = ({ url, children, path }: LinkButtonProps) => {
+  if (url)
+    return (
+      <StyledSafeLinkButton
+        to={getPossiblyRelativeUrl(url, path)}
+        target="_blank"
+        variant="secondary"
+        rel="noopener noreferrer"
+      >
+        {children}
+      </StyledSafeLinkButton>
+    );
   return children;
 };
 
@@ -176,27 +178,24 @@ const CampaignBlock = ({
   url,
   path,
   className,
+  background,
 }: Props) => {
   const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;
-  const HeaderComponent = url?.url ? LinkHeader : Text;
+
   return (
     <Wrapper>
-      <Container className={className} data-embed-type="campaign-block" imageSide={imageSide}>
+      <Container className={className} data-embed-type="campaign-block" imageSide={imageSide} background={background}>
         {imageSide === "left" && imageComponent}
         <ContentWrapper>
-          <MaybeLinkText url={url?.url} path={path}>
-            <HeaderComponent asChild consumeCss textStyle="heading.small">
-              <InternalHeading>{parse(title)}</InternalHeading>
-            </HeaderComponent>
-          </MaybeLinkText>
+          <Text asChild consumeCss textStyle="heading.small">
+            <InternalHeading>{parse(title)}</InternalHeading>
+          </Text>
           <StyledText textStyle="body.xlarge">{parse(description)}</StyledText>
           {!!url?.url && (
-            <MaybeLinkText url={url.url} path={path}>
-              <LinkText textStyle="body.medium">
-                {parse(url.text ?? "")}
-                <ArrowRightLine />
-              </LinkText>
-            </MaybeLinkText>
+            <LinkButton url={url.url} path={path}>
+              {parse(url.text ?? "")}
+              <ArrowRightLine />
+            </LinkButton>
           )}
         </ContentWrapper>
         {imageSide !== "left" && imageComponent}

package/src/ContentTypeHero/ContentTypeHero.stories.tsx

@@ -7,10 +7,9 @@
  */
 
 import { Meta, StoryFn } from "@storybook/react";
-import { HeroBackground, HeroContent, Text } from "@ndla/primitives";
+import { HeroBackground, HeroContent, PageContent, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { ContentTypeHero } from "./ContentTypeHero";
-import { OneColumn } from "../Layout";
 
 /**
  * A thin wrapper around the `Hero` component that automatically assigns a variant based on the provided content type
@@ -31,7 +30,7 @@ export default {
 export const HeroStory: StoryFn<typeof ContentTypeHero> = ({ ...args }) => (
   <ContentTypeHero {...args}>
     <HeroBackground />
-    <OneColumn>
+    <PageContent>
       <HeroContent>Hello</HeroContent>
 
       <styled.div css={{ background: "surface.default", padding: "medium" }}>
@@ -69,7 +68,7 @@ export const HeroStory: StoryFn<typeof ContentTypeHero> = ({ ...args }) => (
           faucibus ac ut mauris. Fusce facilisis at erat a dignissim.
         </Text>
       </styled.div>
-    </OneColumn>
+    </PageContent>
   </ContentTypeHero>
 );
 

package/src/Embed/AudioEmbed.stories.tsx

@@ -7,10 +7,10 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
+import { PageContent } from "@ndla/primitives";
 import { AudioEmbedData, AudioMeta } from "@ndla/types-embed";
 import AudioEmbed from "./AudioEmbed";
 import { ArticleContent, ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
 
 const embedData: AudioEmbedData = {
   resource: "audio",
@@ -187,13 +187,13 @@ const meta: Meta<typeof AudioEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <OneColumn>
+      <PageContent variant="content" asChild>
         <ArticleWrapper>
           <ArticleContent>
             <Story />
           </ArticleContent>
         </ArticleWrapper>
-      </OneColumn>
+      </PageContent>
     ),
   ],
 };

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -7,10 +7,10 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
+import { PageContent } from "@ndla/primitives";
 import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from "@ndla/types-embed";
 import BrightcoveEmbed from "./BrightcoveEmbed";
 import { ArticleContent, ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
 
 const embedData: BrightcoveEmbedData = {
   resource: "brightcove",
@@ -157,13 +157,13 @@ const meta: Meta<typeof BrightcoveEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <OneColumn>
+      <PageContent variant="content" asChild>
         <ArticleWrapper>
           <ArticleContent>
             <Story />
           </ArticleContent>
         </ArticleWrapper>
-      </OneColumn>
+      </PageContent>
     ),
   ],
 };

package/src/Embed/CodeEmbed.tsx

@@ -14,11 +14,10 @@ import { Button, Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { CodeMetaData } from "@ndla/types-embed";
 import { copyTextToClipboard } from "@ndla/util";
+import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { CodeBlock, codeLanguageOptions } from "../CodeBlock";
 import { ICodeLangugeOption } from "../CodeBlock/codeLanguageOptions";
 
-// TODO: We need an error state for this
-
 interface Props {
   embed: CodeMetaData;
 }
@@ -61,6 +60,10 @@ const CodeEmbed = ({ embed }: Props) => {
     }
   }, [isCopied]);
 
+  if (embed.status === "error") {
+    return <EmbedErrorPlaceholder type="code" />;
+  }
+
   return (
     <StyledFigure data-embed-type="code-block">
       <StyledFigCaption>{embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)}</StyledFigCaption>

package/src/Embed/ConceptEmbed.stories.tsx

@@ -7,10 +7,10 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
+import { PageContent } from "@ndla/primitives";
 import { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
 import { ConceptEmbed } from "./ConceptEmbed";
 import { ArticleContent, ArticleWrapper } from "../Article";
-import { OneColumn } from "../Layout";
 
 const blockEmbedData: ConceptEmbedData = {
   contentId: "35",
@@ -149,13 +149,13 @@ const meta: Meta<typeof ConceptEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <OneColumn>
+      <PageContent variant="content" asChild>
         <ArticleWrapper>
           <ArticleContent>
             <Story />
           </ArticleContent>
         </ArticleWrapper>
-      </OneColumn>
+      </PageContent>
     ),
   ],
 };

package/src/Embed/ConceptEmbed.tsx

@@ -46,6 +46,7 @@ export const ConceptEmbed = ({ embed, renderContext, lang, previewAlt }: Props)
     return <span>{embed.embedData.linkText}</span>;
   }
   if (embed.status === "error") {
+    // TODO: This could be either concept or gloss. We don't know if it errors out. :)
     return <EmbedErrorPlaceholder type="gloss" />;
   }
 

package/src/Embed/EmbedErrorPlaceholder.tsx

@@ -7,7 +7,7 @@
  */
 
 import { ReactNode } from "react";
-import { AlertLine } from "@ndla/icons/common";
+import { Report } from "@ndla/icons/common";
 import { Figure, type FigureFloat, type FigureSize } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { EmbedByline } from "../LicenseByline";
@@ -25,16 +25,15 @@ const ErrorPlaceholder = styled("div", {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "surface.disabled",
+    background: "background.subtle",
     height: "surface.xsmall",
+    border: "1px solid",
+    borderColor: "stroke.default",
     borderRadius: "xsmall",
     "& svg": {
-      fill: "text.subtle",
-      height: "90%",
-      width: "90%",
-    },
-    "&[data-embed-type='audio']": {
-      height: "surface.3xsmall",
+      height: "5xlarge",
+      width: "5xlarge",
+      fill: "stroke.default",
     },
   },
 });
@@ -52,7 +51,7 @@ const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) =>
     <StyledFigure size={figureType} float={float} data-embed-type={type}>
       {children ?? (
         <ErrorPlaceholder data-embed-type={type}>
-          <AlertLine />
+          <Report />
         </ErrorPlaceholder>
       )}
       <EmbedByline error type={type} />

package/src/Embed/ExternalEmbed.stories.tsx

@@ -7,10 +7,10 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
+import { PageContent } from "@ndla/primitives";
 import { OembedEmbedData, OembedData } from "@ndla/types-embed";
 import ExternalEmbed from "./ExternalEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article";
-import { OneColumn } from "../Layout";
 
 const embedData: OembedEmbedData = {
   resource: "external",
@@ -55,7 +55,7 @@ const meta: Meta<typeof ExternalEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <OneColumn>
+      <PageContent variant="content" asChild>
         <ArticleWrapper>
           <ArticleContent>
             <section>
@@ -63,7 +63,7 @@ const meta: Meta<typeof ExternalEmbed> = {
             </section>
           </ArticleContent>
         </ArticleWrapper>
-      </OneColumn>
+      </PageContent>
     ),
   ],
 };

package/src/Embed/H5pEmbed.stories.tsx

@@ -7,10 +7,10 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
+import { PageContent } from "@ndla/primitives";
 import { H5pEmbedData, H5pData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article";
-import { OneColumn } from "../Layout";
 
 const embedData: H5pEmbedData = {
   resource: "h5p",
@@ -52,13 +52,13 @@ const meta: Meta<typeof H5pEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <OneColumn>
+      <PageContent variant="content" asChild>
         <ArticleWrapper>
           <ArticleContent>
             <Story />
           </ArticleContent>
         </ArticleWrapper>
-      </OneColumn>
+      </PageContent>
     ),
   ],
 };

package/src/Embed/IframeEmbed.stories.tsx

@@ -7,10 +7,10 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
+import { PageContent } from "@ndla/primitives";
 import { IframeData, IframeEmbedData } from "@ndla/types-embed";
 import IframeEmbed from "./IframeEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article";
-import { OneColumn } from "../Layout";
 
 const embedData: IframeEmbedData = {
   width: "708px",
@@ -27,13 +27,13 @@ const meta: Meta<typeof IframeEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <OneColumn>
+      <PageContent variant="content" asChild>
         <ArticleWrapper>
           <ArticleContent>
             <Story />
           </ArticleContent>
         </ArticleWrapper>
-      </OneColumn>
+      </PageContent>
     ),
   ],
 };

package/src/Embed/ImageEmbed.stories.tsx

@@ -8,14 +8,13 @@
 
 import { ReactNode } from "react";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { Text } from "@ndla/primitives";
+import { PageContent, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { ImageEmbedData } from "@ndla/types-embed";
 import ImageEmbed from "./ImageEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article";
 import { Grid } from "../Grid";
-import { OneColumn } from "../Layout";
 
 const embedData: ImageEmbedData = {
   resource: "image",
@@ -96,13 +95,13 @@ const meta: Meta<typeof ImageEmbed> = {
   },
   decorators: [
     (Story) => (
-      <OneColumn>
+      <PageContent variant="content" asChild>
         <ArticleWrapper>
           <ArticleContent>
             <Story />
           </ArticleContent>
         </ArticleWrapper>
-      </OneColumn>
+      </PageContent>
     ),
   ],
 };

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -7,10 +7,10 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
+import { PageContent } from "@ndla/primitives";
 import { RelatedContentMetaData } from "@ndla/types-embed";
 import RelatedContentEmbed from "./RelatedContentEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article";
-import { OneColumn } from "../Layout";
 import RelatedArticleList from "../RelatedArticleList";
 
 const filmResourceMeta: RelatedContentMetaData = {
@@ -367,13 +367,13 @@ const meta: Meta<typeof RelatedContentEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <OneColumn>
+      <PageContent variant="content" asChild>
         <ArticleWrapper>
           <ArticleContent>
             <Story />
           </ArticleContent>
         </ArticleWrapper>
-      </OneColumn>
+      </PageContent>
     ),
   ],
 };

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
-import { ExpandableBox, ExpandableBoxSummary, FramedContent } from "@ndla/primitives";
+import { ExpandableBox, ExpandableBoxSummary, FramedContent, PageContent } from "@ndla/primitives";
 import { UuDisclaimerEmbedData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
 import IframeEmbed from "./IframeEmbed";
@@ -15,7 +15,6 @@ import UuDisclaimerEmbed from "./UuDisclaimerEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article";
 import CopyParagraphButton from "../CopyParagraphButton";
 import FactBox from "../FactBox";
-import { OneColumn } from "../Layout";
 
 const embedData: UuDisclaimerEmbedData = {
   resource: "uu-disclaimer",
@@ -29,13 +28,13 @@ const meta: Meta<typeof UuDisclaimerEmbed> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <OneColumn>
+      <PageContent variant="content" asChild>
         <ArticleWrapper>
           <ArticleContent>
             <Story />
           </ArticleContent>
         </ArticleWrapper>
-      </OneColumn>
+      </PageContent>
     ),
   ],
 };