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

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>
     ),
   ],
 };

package/src/Grid/Grid.stories.tsx

@@ -7,7 +7,8 @@
  */
 
 import { Meta, StoryFn } from "@storybook/react";
-import { ArticleContent, ArticleWrapper, OneColumn } from "@ndla/ui";
+import { PageContent } from "@ndla/primitives";
+import { ArticleContent, ArticleWrapper } from "@ndla/ui";
 import { Grid } from "./Grid";
 import { BlogPostStory } from "../BlogPost/BlogPost.stories";
 import { Plain } from "../KeyFigure/KeyFigure.stories";
@@ -27,13 +28,13 @@ export default {
   },
   decorators: [
     (Story) => (
-      <OneColumn wide>
+      <PageContent asChild>
         <ArticleWrapper>
           <ArticleContent>
             <Story />
           </ArticleContent>
         </ArticleWrapper>
-      </OneColumn>
+      </PageContent>
     ),
   ],
 } as Meta<typeof Grid>;

package/src/Layout/index.ts

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

package/src/LicenseByline/EmbedByline.tsx

@@ -29,7 +29,7 @@ interface BaseProps {
 }
 
 export interface EmbedBylineErrorProps extends BaseProps {
-  type: EmbedBylineTypeProps["type"] | "h5p" | "external";
+  type: EmbedBylineTypeProps["type"] | "h5p" | "external" | "code";
   error: true;
 }
 

package/src/index.ts

@@ -90,7 +90,7 @@ export {
   useVideoSearchTranslations,
 } from "./i18n";
 
-export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
+export { OneColumn, PageContainer } from "./Layout";
 
 export {
   default as ContentTypeBadge,
@@ -122,9 +122,6 @@ export {
   TagSelectorInput,
 } from "./TagSelector/TagSelector";
 
-export { TreeStructure } from "./TreeStructure";
-export type { TreeStructureProps } from "./TreeStructure";
-
 export { BlogPostV2 } from "./BlogPost";
 export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";

package/src/locale/messages-en.ts

@@ -1427,6 +1427,7 @@ const messages = {
       external: "External resource",
       gloss: "Gloss",
       copyright: "Text",
+      code: "Code block",
     },
   },
   gloss: {

package/src/locale/messages-nb.ts

@@ -1427,6 +1427,7 @@ const messages = {
       external: "Ekstern ressurs",
       gloss: "Glose",
       copyright: "Tekst",
+      code: "Kodeblokk",
     },
   },
   gloss: {

package/src/locale/messages-nn.ts

@@ -1426,6 +1426,7 @@ const messages = {
       external: "Ekstern ressurs",
       gloss: "Glose",
       copyright: "Tekst",
+      code: "Kodeblokk",
     },
   },
   gloss: {

package/src/locale/messages-se.ts

@@ -1429,6 +1429,7 @@ const messages = {
       external: "Olgguldas resursa",
       gloss: "Glose",
       copyright: "Tekst",
+      code: "Kodeblokk",
     },
   },
   gloss: {

package/src/locale/messages-sma.ts

@@ -1431,6 +1431,7 @@ const messages = {
       external: "Ekstern ressurs",
       gloss: "Glosa",
       copyright: "Tekst",
+      code: "Kodeblokk",
     },
   },
   gloss: {

package/es/Layout/LayoutItem.js

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { styled } from "@ndla/styled-system/jsx";
-
-// TODO: Refactor this. This is a copy of our old layout.
-export const LayoutItem = styled("section", {
-  defaultVariants: {
-    layout: "center"
-  },
-  variants: {
-    layout: {
-      center: {
-        position: "relative!",
-        width: "83.333%",
-        right: "auto !important",
-        left: "8.333%"
-      },
-      extend: {
-        tablet: {
-          position: "relative!",
-          width: "83.333%",
-          right: "auto!",
-          left: "8.333%"
-        }
-      }
-    }
-  }
-});
-export default LayoutItem;