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

package/dist/panda.buildinfo.json

@@ -131,7 +131,8 @@
       "gridTemplateColumns]___[value:minmax(230px, 455px) auto]___[cond:@supports not (container-type: inline-size)<___>tabletWide",
       "gridTemplateColumns]___[value:auto minmax(230px, 455px)]___[cond:@/tablet",
       "gridTemplateColumns]___[value:auto minmax(230px, 455px)]___[cond:@supports not (container-type: inline-size)<___>tabletWide",
-      "fontWeight]___[value:bold",
+      "backgroundColor]___[value:surface.brand.1",
+      "backgroundColor]___[value:surface.brand.3",
       "height]___[value:215px",
       "height]___[value:340px]___[cond:@/tablet",
       "height]___[value:265px]___[cond:@supports not (container-type: inline-size)<___>tablet",
@@ -241,15 +242,15 @@
       "marginInlineStart]___[value:xsmall",
       "height]___[value:auto",
       "textStyle]___[value:label.large",
+      "fontWeight]___[value:bold",
       "marginBlockStart]___[value:xsmall]___[cond:& > *:not(:where(:first-child))",
       "width]___[value:surface.xlarge",
       "maxHeight]___[value:50vh",
       "overflowY]___[value:auto",
-      "backgroundColor]___[value:surface.disabled",
-      "fill]___[value:text.subtle]___[cond:& svg",
-      "height]___[value:90%]___[cond:& svg",
-      "width]___[value:90%]___[cond:& svg",
-      "height]___[value:surface.3xsmall]___[cond:&[data-embed-type='audio']",
+      "background]___[value:background.subtle",
+      "height]___[value:5xlarge]___[cond:& svg",
+      "width]___[value:5xlarge]___[cond:& svg",
+      "fill]___[value:stroke.default]___[cond:& svg",
       "marginBlockStart]___[value:3xsmall]___[cond:& > *:not(:first-child)",
       "height]___[value:auto]___[cond:& iframe",
       "width]___[value:100%]___[cond:& iframe",
@@ -376,14 +377,6 @@
       "width]___[value:surface.3xsmall",
       "textStyle]___[value:heading.large",
       "textStyle]___[value:title.medium",
-      "position]___[value:relative!",
-      "width]___[value:83.333%",
-      "right]___[value:auto !important",
-      "left]___[value:8.333%",
-      "position]___[value:relative!]___[cond:tablet",
-      "width]___[value:83.333%]___[cond:tablet",
-      "right]___[value:auto!]___[cond:tablet",
-      "left]___[value:8.333%]___[cond:tablet",
       "marginLeft]___[value:auto",
       "marginRight]___[value:auto",
       "paddingLeft]___[value:18px",
@@ -438,12 +431,7 @@
       "padding]___[value:xsmall]___[cond:tabletDown",
       "aspectRatio]___[value:1/1",
       "width]___[value:100%]___[cond:tabletDown",
-      "borderRadius]___[value:0]___[cond:tabletDown",
-      "overflow]___[value:hidden]___[cond:& span",
-      "textOverflow]___[value:ellipsis]___[cond:& span",
-      "maxHeight]___[value:inherit",
-      "overflow]___[value:auto",
-      "gap]___[value:10px"
+      "borderRadius]___[value:0]___[cond:tabletDown"
     ],
     "recipes": {}
   }

package/dist/styles.css

@@ -498,6 +498,10 @@
     max-height: 50vh;
 }
 
+  .bg_background\.subtle {
+    background: var(--colors-background-subtle);
+}
+
   .z_docked {
     z-index: var(--z-index-docked);
 }
@@ -590,14 +594,6 @@
     width: var(--sizes-surface-3xsmall);
 }
 
-  .pos_relative\! {
-    position: relative !important;
-}
-
-  .w_83\.333\% {
-    width: 83.333%;
-}
-
   .max-w_1150px {
     max-width: 1150px;
 }
@@ -646,18 +642,6 @@
     aspect-ratio: 1/1;
 }
 
-  .max-h_inherit {
-    max-height: inherit;
-}
-
-  .ov_auto {
-    overflow: auto;
-}
-
-  .gap_10px {
-    gap: 10px;
-}
-
   .flex-d_column {
     flex-direction: column;
 }
@@ -725,8 +709,12 @@
     grid-template-columns: 1fr;
 }
 
-  .fw_bold {
-    font-weight: var(--font-weights-bold);
+  .bg-c_surface\.brand\.1 {
+    background-color: var(--colors-surface-brand-1);
+}
+
+  .bg-c_surface\.brand\.3 {
+    background-color: var(--colors-surface-brand-3);
 }
 
   .bd-l-c_stroke\.default {
@@ -765,12 +753,12 @@
     top: calc(var(--spacing-4xsmall) * -1);
 }
 
-  .ov-y_auto {
-    overflow-y: auto;
+  .fw_bold {
+    font-weight: var(--font-weights-bold);
 }
 
-  .bg-c_surface\.disabled {
-    background-color: var(--colors-surface-disabled);
+  .ov-y_auto {
+    overflow-y: auto;
 }
 
   .top_xsmall {
@@ -887,14 +875,6 @@
     border-color: var(--colors-surface-brand-2);
 }
 
-  .right_auto\! {
-    right: auto !important;
-}
-
-  .left_8\.333\% {
-    left: 8.333%;
-}
-
   .ml_auto {
     margin-left: auto;
 }
@@ -1087,20 +1067,16 @@
     margin-block-start: var(--spacing-xsmall);
 }
 
-  .\[\&_svg\]\:fill_text\.subtle svg {
-    fill: var(--colors-text-subtle);
+  .\[\&_svg\]\:h_5xlarge svg {
+    height: var(--sizes-5xlarge);
 }
 
-  .\[\&_svg\]\:h_90\% svg {
-    height: 90%;
+  .\[\&_svg\]\:w_5xlarge svg {
+    width: var(--sizes-5xlarge);
 }
 
-  .\[\&_svg\]\:w_90\% svg {
-    width: 90%;
-}
-
-  .\[\&\[data-embed-type\=\'audio\'\]\]\:h_surface\.3xsmall[data-embed-type='audio'] {
-    height: var(--sizes-surface-3xsmall);
+  .\[\&_svg\]\:fill_stroke\.default svg {
+    fill: var(--colors-stroke-default);
 }
 
   .\[\&_\>_\*\:not\(\:first-child\)\]\:mbs_3xsmall > *:not(:first-child) {
@@ -1211,14 +1187,6 @@
     text-decoration: underline;
 }
 
-  .\[\&_span\]\:ov_hidden span {
-    overflow: hidden;
-}
-
-  .\[\&_span\]\:tov_ellipsis span {
-    text-overflow: ellipsis;
-}
-
   .after\:content_0::after {
     content: 0;
 }
@@ -1551,12 +1519,6 @@
 }
     .tablet\:w_26px {
       width: 26px;
-}
-    .tablet\:pos_relative\! {
-      position: relative !important;
-}
-    .tablet\:w_83\.333\% {
-      width: 83.333%;
 }
     .tablet\:ai_unset {
       align-items: unset;
@@ -1569,12 +1531,6 @@
 }
     .tablet\:mb_xxlarge {
       margin-bottom: var(--spacing-xxlarge);
-}
-    .tablet\:right_auto\! {
-      right: auto !important;
-}
-    .tablet\:left_8\.333\% {
-      left: 8.333%;
 }
     .tablet\:bg-c_\#f8f8f8 {
       background-color: #f8f8f8;

package/es/CampaignBlock/CampaignBlock.js

@@ -9,7 +9,7 @@
 import parse from "html-react-parser";
 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 { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,7 +24,6 @@ const Container = styled("div", {
   base: {
     display: "grid",
     gridTemplateColumns: "1fr",
-    gap: "medium",
     border: "1px solid",
     borderColor: "stroke.default",
     backgroundColor: "background.default",
@@ -54,31 +53,20 @@ 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"
-    }
+    imageSide: "left",
+    background: "neutral"
   }
 });
 const StyledImg = styled("img", {
@@ -96,7 +84,8 @@ const StyledImg = styled("img", {
       tabletWide: {
         height: "340px"
       }
-    }
+    },
+    backgroundColor: "background.default"
   }
 });
 const ContentWrapper = styled("div", {
@@ -108,7 +97,8 @@ const ContentWrapper = styled("div", {
     alignItems: "flex-start",
     justifyContent: "center",
     paddingBlock: "medium",
-    paddingInline: "medium"
+    paddingInline: "medium",
+    position: "relative"
   }
 });
 const StyledText = styled(Text, {
@@ -122,19 +112,24 @@ const StyledText = styled(Text, {
     }
   }
 });
-const StyledSafeLink = styled(SafeLink, {
+const StyledSafeLinkButton = styled(SafeLinkButton, {
   base: {
-    color: "inherit"
+    boxShadow: "full",
+    border: "1px solid",
+    borderColor: "stroke.default"
   }
 });
-const MaybeLinkText = _ref => {
+const LinkButton = _ref => {
   let {
     url,
     children,
     path
   } = _ref;
-  if (url) return /*#__PURE__*/_jsx(StyledSafeLink, {
+  if (url) return /*#__PURE__*/_jsx(StyledSafeLinkButton, {
     to: getPossiblyRelativeUrl(url, path),
+    target: "_blank",
+    variant: "secondary",
+    rel: "noopener noreferrer",
     children: children
   });
   return children;
@@ -148,7 +143,8 @@ const CampaignBlock = _ref2 => {
     headingLevel: InternalHeading = "h2",
     url,
     path,
-    className
+    className,
+    background
   } = _ref2;
   const imageComponent = image && /*#__PURE__*/_jsx(StyledImg, {
     src: `${image.src}?width=455`,
@@ -156,34 +152,27 @@ const CampaignBlock = _ref2 => {
     width: 455,
     alt: image.alt
   });
-  const HeaderComponent = url?.url ? LinkHeader : Text;
   return /*#__PURE__*/_jsx(Wrapper, {
     children: /*#__PURE__*/_jsxs(Container, {
       className: className,
       "data-embed-type": "campaign-block",
       imageSide: imageSide,
+      background: background,
       children: [imageSide === "left" && imageComponent, /*#__PURE__*/_jsxs(ContentWrapper, {
-        children: [/*#__PURE__*/_jsx(MaybeLinkText, {
-          url: url?.url,
-          path: path,
-          children: /*#__PURE__*/_jsx(HeaderComponent, {
-            asChild: true,
-            consumeCss: true,
-            textStyle: "heading.small",
-            children: /*#__PURE__*/_jsx(InternalHeading, {
-              children: parse(title)
-            })
+        children: [/*#__PURE__*/_jsx(Text, {
+          asChild: true,
+          consumeCss: true,
+          textStyle: "heading.small",
+          children: /*#__PURE__*/_jsx(InternalHeading, {
+            children: parse(title)
           })
         }), /*#__PURE__*/_jsx(StyledText, {
           textStyle: "body.xlarge",
           children: parse(description)
-        }), !!url?.url && /*#__PURE__*/_jsx(MaybeLinkText, {
+        }), !!url?.url && /*#__PURE__*/_jsxs(LinkButton, {
           url: url.url,
           path: path,
-          children: /*#__PURE__*/_jsxs(LinkText, {
-            textStyle: "body.medium",
-            children: [parse(url.text ?? ""), /*#__PURE__*/_jsx(ArrowRightLine, {})]
-          })
+          children: [parse(url.text ?? ""), /*#__PURE__*/_jsx(ArrowRightLine, {})]
         })]
       }), imageSide !== "left" && imageComponent]
     })

package/es/Embed/CodeEmbed.js

@@ -13,9 +13,8 @@ import { CheckLine } from "@ndla/icons/editor";
 import { Button, Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { copyTextToClipboard } from "@ndla/util";
+import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { CodeBlock, codeLanguageOptions } from "../CodeBlock";
-
-// TODO: We need an error state for this
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledFigCaption = styled("figcaption", {
   base: {
@@ -55,6 +54,11 @@ const CodeEmbed = _ref => {
       };
     }
   }, [isCopied]);
+  if (embed.status === "error") {
+    return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
+      type: "code"
+    });
+  }
   return /*#__PURE__*/_jsxs(StyledFigure, {
     "data-embed-type": "code-block",
     children: [/*#__PURE__*/_jsx(StyledFigCaption, {

package/es/Embed/ConceptEmbed.js

@@ -40,6 +40,7 @@ export const ConceptEmbed = _ref => {
     });
   }
   if (embed.status === "error") {
+    // TODO: This could be either concept or gloss. We don't know if it errors out. :)
     return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
       type: "gloss"
     });

package/es/Embed/EmbedErrorPlaceholder.js

@@ -6,7 +6,7 @@
  *
  */
 
-import { AlertLine } from "@ndla/icons/common";
+import { Report } from "@ndla/icons/common";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { EmbedByline } from "../LicenseByline";
@@ -16,16 +16,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"
     }
   }
 });
@@ -49,7 +48,7 @@ const EmbedErrorPlaceholder = _ref => {
     "data-embed-type": type,
     children: [children ?? /*#__PURE__*/_jsx(ErrorPlaceholder, {
       "data-embed-type": type,
-      children: /*#__PURE__*/_jsx(AlertLine, {})
+      children: /*#__PURE__*/_jsx(Report, {})
     }), /*#__PURE__*/_jsx(EmbedByline, {
       error: true,
       type: type

package/es/Layout/index.js

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

package/es/index.js

@@ -30,12 +30,11 @@ export { default as messagesSE } from "./locale/messages-se";
 export { default as messagesSMA } from "./locale/messages-sma";
 export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
 export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations } from "./i18n";
-export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
+export { OneColumn, PageContainer } from "./Layout";
 export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, SourceMaterialBadge, ConceptBadge } from "./ContentTypeBadge";
 export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadgeNew";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput } from "./TagSelector/TagSelector";
-export { TreeStructure } from "./TreeStructure";
 export { BlogPostV2 } from "./BlogPost";
 export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";

package/es/locale/messages-en.js

@@ -1393,7 +1393,8 @@ const messages = {
       h5p: "H5P",
       external: "External resource",
       gloss: "Gloss",
-      copyright: "Text"
+      copyright: "Text",
+      code: "Code block"
     }
   },
   gloss: {

package/es/locale/messages-nb.js

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

package/es/locale/messages-nn.js

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

package/es/locale/messages-se.js

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

package/es/locale/messages-sma.js

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

package/lib/CampaignBlock/CampaignBlock.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import { CampaignBlockEmbedData } from "@ndla/types-embed";
 import { HeadingLevel } from "../types";
 interface Image {
     src: string;
@@ -19,9 +20,10 @@ interface Props {
         text?: string;
     };
     image?: Image;
-    imageSide?: "left" | "right";
+    imageSide?: CampaignBlockEmbedData["imageSide"];
     className?: string;
     path?: string;
+    background?: CampaignBlockEmbedData["background"];
 }
-declare const CampaignBlock: ({ title, image, imageSide, description, headingLevel: InternalHeading, url, path, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const CampaignBlock: ({ title, image, imageSide, description, headingLevel: InternalHeading, url, path, className, background, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default CampaignBlock;