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

package/lib/CampaignBlock/CampaignBlock.js

@@ -31,7 +31,6 @@ const Container = (0, _jsx2.styled)("div", {
   base: {
     display: "grid",
     gridTemplateColumns: "1fr",
-    gap: "medium",
     border: "1px solid",
     borderColor: "stroke.default",
     backgroundColor: "background.default",
@@ -61,31 +60,20 @@ const Container = (0, _jsx2.styled)("div", {
           }
         }
       }
+    },
+    background: {
+      neutral: {},
+      brand1: {
+        backgroundColor: "surface.brand.1"
+      },
+      brand3: {
+        backgroundColor: "surface.brand.3"
+      }
     }
   },
   defaultVariants: {
-    imageSide: "left"
-  }
-});
-const LinkText = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    display: "flex",
-    gap: "xxsmall",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none"
-    },
-    paddingBlock: "xsmall",
-    fontWeight: "bold"
-  }
-});
-const LinkHeader = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    display: "flex",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none"
-    }
+    imageSide: "left",
+    background: "neutral"
   }
 });
 const StyledImg = (0, _jsx2.styled)("img", {
@@ -103,7 +91,8 @@ const StyledImg = (0, _jsx2.styled)("img", {
       tabletWide: {
         height: "340px"
       }
-    }
+    },
+    backgroundColor: "background.default"
   }
 });
 const ContentWrapper = (0, _jsx2.styled)("div", {
@@ -115,7 +104,8 @@ const ContentWrapper = (0, _jsx2.styled)("div", {
     alignItems: "flex-start",
     justifyContent: "center",
     paddingBlock: "medium",
-    paddingInline: "medium"
+    paddingInline: "medium",
+    position: "relative"
   }
 });
 const StyledText = (0, _jsx2.styled)(_primitives.Text, {
@@ -129,19 +119,24 @@ const StyledText = (0, _jsx2.styled)(_primitives.Text, {
     }
   }
 });
-const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
+const StyledSafeLinkButton = (0, _jsx2.styled)(_safelink.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__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
+  if (url) return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLinkButton, {
     to: (0, _relativeUrl.getPossiblyRelativeUrl)(url, path),
+    target: "_blank",
+    variant: "secondary",
+    rel: "noopener noreferrer",
     children: children
   });
   return children;
@@ -155,7 +150,8 @@ const CampaignBlock = _ref2 => {
     headingLevel: InternalHeading = "h2",
     url,
     path,
-    className
+    className,
+    background
   } = _ref2;
   const imageComponent = image && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImg, {
     src: `${image.src}?width=455`,
@@ -163,34 +159,27 @@ const CampaignBlock = _ref2 => {
     width: 455,
     alt: image.alt
   });
-  const HeaderComponent = url?.url ? LinkHeader : _primitives.Text;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
       className: className,
       "data-embed-type": "campaign-block",
       imageSide: imageSide,
+      background: background,
       children: [imageSide === "left" && imageComponent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
-          url: url?.url,
-          path: path,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderComponent, {
-            asChild: true,
-            consumeCss: true,
-            textStyle: "heading.small",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalHeading, {
-              children: (0, _htmlReactParser.default)(title)
-            })
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
+          asChild: true,
+          consumeCss: true,
+          textStyle: "heading.small",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalHeading, {
+            children: (0, _htmlReactParser.default)(title)
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
           textStyle: "body.xlarge",
           children: (0, _htmlReactParser.default)(description)
-        }), !!url?.url && /*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
+        }), !!url?.url && /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkButton, {
           url: url.url,
           path: path,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkText, {
-            textStyle: "body.medium",
-            children: [(0, _htmlReactParser.default)(url.text ?? ""), /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ArrowRightLine, {})]
-          })
+          children: [(0, _htmlReactParser.default)(url.text ?? ""), /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ArrowRightLine, {})]
         })]
       }), imageSide !== "left" && imageComponent]
     })

package/lib/Embed/CodeEmbed.js

@@ -11,8 +11,10 @@ var _editor = require("@ndla/icons/editor");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _util = require("@ndla/util");
+var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
 var _CodeBlock = require("../CodeBlock");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -21,8 +23,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-// TODO: We need an error state for this
-
 const StyledFigCaption = (0, _jsx2.styled)("figcaption", {
   base: {
     textStyle: "label.large",
@@ -61,6 +61,11 @@ const CodeEmbed = _ref => {
       };
     }
   }, [isCopied]);
+  if (embed.status === "error") {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
+      type: "code"
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
     "data-embed-type": "code-block",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigCaption, {

package/lib/Embed/ConceptEmbed.js

@@ -47,6 +47,7 @@ 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__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
       type: "gloss"
     });

package/lib/Embed/EmbedErrorPlaceholder.js

@@ -22,16 +22,15 @@ const ErrorPlaceholder = (0, _jsx2.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"
     }
   }
 });
@@ -55,7 +54,7 @@ const EmbedErrorPlaceholder = _ref => {
     "data-embed-type": type,
     children: [children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorPlaceholder, {
       "data-embed-type": type,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.AlertLine, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.Report, {})
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
       error: true,
       type: type

package/lib/Layout/index.d.ts

@@ -5,7 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import LayoutItem from "./LayoutItem";
 export { default as OneColumn } from "./OneColumn";
 export { default as PageContainer } from "./PageContainer";
-export default LayoutItem;

package/lib/Layout/index.js

@@ -15,16 +15,6 @@ Object.defineProperty(exports, "PageContainer", {
     return _PageContainer.default;
   }
 });
-exports.default = void 0;
-var _LayoutItem = _interopRequireDefault(require("./LayoutItem"));
 var _OneColumn = _interopRequireDefault(require("./OneColumn"));
 var _PageContainer = _interopRequireDefault(require("./PageContainer"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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.
- *
- */
-var _default = exports.default = _LayoutItem.default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/LicenseByline/EmbedByline.d.ts

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

package/lib/index.d.ts

@@ -28,14 +28,12 @@ export { default as messagesSMA } from "./locale/messages-sma";
 export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } 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 type { ContentTypeBadgeProps, ContentType } from "./ContentTypeBadge/ContentTypeBadgeNew";
 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 type { TreeStructureProps } from "./TreeStructure";
 export { BlogPostV2 } from "./BlogPost";
 export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";

package/lib/index.js

@@ -321,12 +321,6 @@ Object.defineProperty(exports, "KeyFigure", {
     return _KeyFigure.KeyFigure;
   }
 });
-Object.defineProperty(exports, "LayoutItem", {
-  enumerable: true,
-  get: function () {
-    return _Layout.default;
-  }
-});
 Object.defineProperty(exports, "LearningPathBadge", {
   enumerable: true,
   get: function () {
@@ -465,12 +459,6 @@ Object.defineProperty(exports, "TasksAndActivitiesBadge", {
     return _ContentTypeBadge.TasksAndActivitiesBadge;
   }
 });
-Object.defineProperty(exports, "TreeStructure", {
-  enumerable: true,
-  get: function () {
-    return _TreeStructure.TreeStructure;
-  }
-});
 Object.defineProperty(exports, "UnknownEmbed", {
   enumerable: true,
   get: function () {
@@ -642,12 +630,11 @@ var _messagesSe = _interopRequireDefault(require("./locale/messages-se"));
 var _messagesSma = _interopRequireDefault(require("./locale/messages-sma"));
 var _Breadcrumb = _interopRequireWildcard(require("./Breadcrumb"));
 var _i18n = require("./i18n");
-var _Layout = _interopRequireWildcard(require("./Layout"));
+var _Layout = require("./Layout");
 var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
 var _ContentTypeBadgeNew = require("./ContentTypeBadge/ContentTypeBadgeNew");
 var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
 var _TagSelector = require("./TagSelector/TagSelector");
-var _TreeStructure = require("./TreeStructure");
 var _BlogPost = require("./BlogPost");
 var _KeyFigure = require("./KeyFigure");
 var _ContactBlock = require("./ContactBlock");

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

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

package/lib/locale/messages-en.js

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

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.34-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.23-alpha.0",
+    "@ndla/icons": "^8.0.25-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.31-alpha.0",
-    "@ndla/safelink": "^7.0.31-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": "bedff84c8034cb9016d300a3d270d14a49accfff"
+  "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>
 );