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

package/lib/ContentTypeBlockQuote/ContentTypeBlockQuote.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentTypeBlockQuote = void 0;
+var _react = require("react");
+var _primitives = require("@ndla/primitives");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const contentTypeToVariantMapping = {
+  "subject-material": "brand1",
+  "source-material": "brand1",
+  concept: "brand1",
+  "tasks-and-activities": "brand2",
+  "assessment-resources": "brand2"
+};
+const ContentTypeBlockQuote = exports.ContentTypeBlockQuote = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    variant,
+    contentType,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.BlockQuote, {
+    ...props,
+    variant: variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined,
+    ref: ref
+  });
+});

package/lib/ContentTypeFramedContent/ContentTypeFramedContent.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/// <reference types="react" />
+import { FramedContentProps } from "@ndla/primitives";
+import { ContentType } from "..";
+export type ContentTypeFramedContentVariant = "colored" | "neutral";
+interface Props extends FramedContentProps {
+    variant?: ContentTypeFramedContentVariant;
+    contentType?: ContentType;
+}
+export declare const ContentTypeFramedContent: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/ContentTypeFramedContent/ContentTypeFramedContent.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentTypeFramedContent = void 0;
+var _react = require("react");
+var _primitives = require("@ndla/primitives");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const contentTypeToVariantMapping = {
+  "subject-material": "brand1",
+  "source-material": "brand1",
+  concept: "brand1",
+  "tasks-and-activities": "brand2",
+  "assessment-resources": "brand2"
+};
+const ContentTypeFramedContent = exports.ContentTypeFramedContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    variant = "neutral",
+    contentType,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.FramedContent, {
+    ...props,
+    colorTheme: variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined,
+    ref: ref
+  });
+});

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/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

@@ -30,8 +30,12 @@ export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./Breadcrumb";
 export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, } from "./i18n";
 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 type { ContentTypeBadgeProps, StrictContentType, ContentType } from "./ContentTypeBadge/ContentTypeBadgeNew";
 export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap, } from "./ContentTypeBadge/ContentTypeBadgeNew";
+export { ContentTypeBlockQuote } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";
+export { type ContentTypeBlockQuoteVariant } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";
+export { ContentTypeFramedContent } from "./ContentTypeFramedContent/ContentTypeFramedContent";
+export { type ContentTypeFramedContentVariant } from "./ContentTypeFramedContent/ContentTypeFramedContent";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput, } from "./TagSelector/TagSelector";
 export { BlogPostV2 } from "./BlogPost";

package/lib/index.js

@@ -171,6 +171,18 @@ Object.defineProperty(exports, "ContentTypeBadgeNew", {
     return _ContentTypeBadgeNew.ContentTypeBadge;
   }
 });
+Object.defineProperty(exports, "ContentTypeBlockQuote", {
+  enumerable: true,
+  get: function () {
+    return _ContentTypeBlockQuote.ContentTypeBlockQuote;
+  }
+});
+Object.defineProperty(exports, "ContentTypeFramedContent", {
+  enumerable: true,
+  get: function () {
+    return _ContentTypeFramedContent.ContentTypeFramedContent;
+  }
+});
 Object.defineProperty(exports, "ContentTypeHero", {
   enumerable: true,
   get: function () {
@@ -633,6 +645,8 @@ var _i18n = require("./i18n");
 var _Layout = require("./Layout");
 var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
 var _ContentTypeBadgeNew = require("./ContentTypeBadge/ContentTypeBadgeNew");
+var _ContentTypeBlockQuote = require("./ContentTypeBlockQuote/ContentTypeBlockQuote");
+var _ContentTypeFramedContent = require("./ContentTypeFramedContent/ContentTypeFramedContent");
 var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
 var _TagSelector = require("./TagSelector/TagSelector");
 var _BlogPost = require("./BlogPost");

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.35-alpha.0",
+  "version": "56.0.37-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,11 +33,11 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.24-alpha.0",
+    "@ndla/icons": "^8.0.26-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.32-alpha.0",
-    "@ndla/safelink": "^7.0.32-alpha.0",
-    "@ndla/styled-system": "^0.0.22",
+    "@ndla/primitives": "^1.0.34-alpha.0",
+    "@ndla/safelink": "^7.0.34-alpha.0",
+    "@ndla/styled-system": "^0.0.23",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
@@ -50,7 +50,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.33",
+    "@ndla/preset-panda": "^0.0.35",
     "@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": "5bad5d1659659f8f6a1a8cb790d43fdbbfcdedbc"
 }

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/ContentTypeBadge/ContentTypeBadgeNew.tsx

@@ -15,7 +15,7 @@ export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
   contentType: ContentType | undefined;
 }
 
-export type ContentType =
+export type StrictContentType =
   | typeof contentTypes.SUBJECT_MATERIAL
   | typeof contentTypes.TASKS_AND_ACTIVITIES
   | typeof contentTypes.ASSESSMENT_RESOURCES
@@ -30,7 +30,10 @@ export type ContentType =
   | typeof contentTypes.AUDIO
   | typeof contentTypes.VIDEO
   | typeof contentTypes.MISSING
-  | typeof contentTypes.PODCAST
+  | typeof contentTypes.PODCAST;
+
+export type ContentType =
+  | StrictContentType
   // This allows for us to fallback to string without getting a ts error, while still keeping intellisense
   | (string & {});
 

package/src/ContentTypeBlockQuote/ContentTypeBlockQuote.tsx

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2024-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 { forwardRef } from "react";
+import { BlockQuote, BlockQuoteProps, BlockQuoteVariantProps } from "@ndla/primitives";
+import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
+
+export type ContentTypeBlockQuoteVariant = "colored" | "neutral";
+
+const contentTypeToVariantMapping = {
+  "subject-material": "brand1",
+  "source-material": "brand1",
+  concept: "brand1",
+  "tasks-and-activities": "brand2",
+  "assessment-resources": "brand2",
+} as Record<ContentType, NonNullable<BlockQuoteVariantProps>["variant"]>;
+
+interface Props extends Omit<BlockQuoteProps, "variant"> {
+  variant?: ContentTypeBlockQuoteVariant;
+  contentType?: ContentType;
+}
+
+export const ContentTypeBlockQuote = forwardRef<HTMLQuoteElement, Props>(({ variant, contentType, ...props }, ref) => {
+  return (
+    <BlockQuote
+      {...props}
+      variant={variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined}
+      ref={ref}
+    />
+  );
+});

package/src/ContentTypeFramedContent/ContentTypeFramedContent.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2024-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 { forwardRef } from "react";
+import { FramedContent, FramedContentProps, FramedContentVariantProps } from "@ndla/primitives";
+import { ContentType } from "..";
+
+const contentTypeToVariantMapping = {
+  "subject-material": "brand1",
+  "source-material": "brand1",
+  concept: "brand1",
+  "tasks-and-activities": "brand2",
+  "assessment-resources": "brand2",
+} as Record<ContentType, NonNullable<FramedContentVariantProps>["colorTheme"]>;
+
+export type ContentTypeFramedContentVariant = "colored" | "neutral";
+
+interface Props extends FramedContentProps {
+  variant?: ContentTypeFramedContentVariant;
+  contentType?: ContentType;
+}
+
+export const ContentTypeFramedContent = forwardRef<HTMLDivElement, Props>(
+  ({ variant = "neutral", contentType, ...props }, ref) => {
+    return (
+      <FramedContent
+        {...props}
+        colorTheme={variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined}
+        ref={ref}
+      />
+    );
+  },
+);

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>
 );