@ndla/ui 56.0.52-alpha.0 → 56.0.53-alpha.0

package/dist/panda.buildinfo.json

@@ -97,25 +97,6 @@
       "minWidth]___[value:small",
       "paddingInline]___[value:small",
       "srOnly]___[value:true",
-      "backgroundColor]___[value:background.default",
-      "transitionDuration]___[value:fast",
-      "transitionProperty]___[value:background-color, border-color, max-width",
-      "transitionTimingFunction]___[value:default",
-      "height]___[value:100%",
-      "borderColor]___[value:stroke.hover]___[cond:&:hover, &:focus-visible",
-      "backgroundColor]___[value:surface.actionSubtle.hover]___[cond:&:hover, &:focus-visible",
-      "textDecoration]___[value:underline]___[cond:&:hover, &:focus-visible<___>& h1, h2, h3, h4, h5, h6",
-      "maxWidth]___[value:350px]___[cond:tabletWide",
-      "paddingBlock]___[value:xlarge",
-      "paddingInline]___[value:xxlarge",
-      "maxWidth]___[value:532px]___[cond:tabletWide",
-      "textTransform]___[value:uppercase",
-      "textStyle]___[value:body.large",
-      "objectFit]___[value:cover",
-      "border]___[value:0",
-      "display]___[value:inline-block",
-      "width]___[value:fit-content",
-      "maxWidth]___[value:8xl",
       "flexWrap]___[value:wrap",
       "alignItems]___[value:flex-start]___[cond:mobileDown",
       "justifyContent]___[value:center]___[cond:mobileDown",
@@ -128,15 +109,18 @@
       "textDecoration]___[value:none]___[cond:_hover",
       "textDecoration]___[value:none]___[cond:_focusVisible",
       "display]___[value:none]___[cond:tabletDown",
+      "height]___[value:100%",
       "containerType]___[value:inline-size",
       "display]___[value:grid",
       "gridTemplateColumns]___[value:1fr",
+      "backgroundColor]___[value:background.default",
       "gridTemplateColumns]___[value:minmax(230px, 455px) auto]___[cond:@/tablet",
       "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",
       "backgroundColor]___[value:surface.brand.1",
       "backgroundColor]___[value:surface.brand.3",
+      "objectFit]___[value:cover",
       "height]___[value:215px",
       "height]___[value:340px]___[cond:@/tablet",
       "height]___[value:265px]___[cond:@supports not (container-type: inline-size)<___>tablet",
@@ -146,6 +130,8 @@
       "position]___[value:relative]___[cond:tablet",
       "lineClamp]___[value:4]___[cond:tablet",
       "boxOrient]___[value:vertical]___[cond:tablet",
+      "maxWidth]___[value:8xl",
+      "textStyle]___[value:body.large",
       "display]___[value:inline",
       "display]___[value:inline]___[cond:& p",
       "minWidth]___[value:surface.xxsmall",
@@ -211,6 +197,7 @@
       "cursor]___[value:pointer",
       "opacity]___[value:1]___[cond:&:focus, &:focus-visible, &:active",
       "marginInlineStart]___[value:xsmall",
+      "border]___[value:0",
       "height]___[value:auto",
       "textStyle]___[value:label.large",
       "fontWeight]___[value:bold",
@@ -255,6 +242,7 @@
       "borderStyle]___[value:dashed",
       "borderColor]___[value:stroke.hover",
       "paddingBlockStart]___[value:5xsmall",
+      "width]___[value:fit-content",
       "borderColor]___[value:text.link]___[cond:_hover",
       "background]___[value:surface.actionSubtle.hover]___[cond:_hover",
       "borderColor]___[value:text.link]___[cond:_active",
@@ -396,6 +384,10 @@
       "width]___[value:large]___[cond:_hover<___>& [data-forward]",
       "height]___[value:large]___[cond:_hover<___>& [data-forward]",
       "color]___[value:icon.strong",
+      "paddingBlockStart]___[value:medium",
+      "paddingBlockEnd]___[value:medium",
+      "aspectRatio]___[value:16/9",
+      "height]___[value:unset",
       "gridTemplateColumns]___[value:repeat(2, 1fr)",
       "gridTemplateColumns]___[value:1fr]___[cond:tabletDown",
       "marginBlockStart]___[value:xsmall",

package/dist/styles.css

@@ -329,42 +329,6 @@
     border-width: 0;
 }
 
-  .h_100\% {
-    height: 100%;
-}
-
-  .py_xlarge {
-    padding-block: var(--spacing-xlarge);
-}
-
-  .px_xxlarge {
-    padding-inline: var(--spacing-xxlarge);
-}
-
-  .tt_uppercase {
-    text-transform: uppercase;
-}
-
-  .obj-f_cover {
-    object-fit: cover;
-}
-
-  .bd_0 {
-    border: 0;
-}
-
-  .d_inline-block {
-    display: inline-block;
-}
-
-  .w_fit-content {
-    width: fit-content;
-}
-
-  .max-w_8xl {
-    max-width: 8xl;
-}
-
   .c_inherit {
     color: inherit;
 }
@@ -373,6 +337,10 @@
     text-decoration: underline;
 }
 
+  .h_100\% {
+    height: 100%;
+}
+
   .cq-t_inline-size {
     container-type: inline-size;
 }
@@ -381,10 +349,18 @@
     display: grid;
 }
 
+  .obj-f_cover {
+    object-fit: cover;
+}
+
   .h_215px {
     height: 215px;
 }
 
+  .max-w_8xl {
+    max-width: 8xl;
+}
+
   .d_inline {
     display: inline;
 }
@@ -469,6 +445,10 @@
     margin-inline-start: var(--spacing-xsmall);
 }
 
+  .bd_0 {
+    border: 0;
+}
+
   .h_auto {
     height: auto;
 }
@@ -529,6 +509,10 @@
     padding-block-start: var(--spacing-5xsmall);
 }
 
+  .w_fit-content {
+    width: fit-content;
+}
+
   .ps_4xsmall {
     padding-inline-start: var(--spacing-4xsmall);
 }
@@ -617,6 +601,22 @@
     color: var(--colors-icon-strong);
 }
 
+  .pbs_medium {
+    padding-block-start: var(--spacing-medium);
+}
+
+  .pbe_medium {
+    padding-block-end: var(--spacing-medium);
+}
+
+  .asp_16\/9 {
+    aspect-ratio: 16/9;
+}
+
+  .h_unset {
+    height: unset;
+}
+
   .mbs_xsmall {
     margin-block-start: var(--spacing-xsmall);
 }
@@ -665,25 +665,6 @@
     justify-content: center;
 }
 
-  .bg-c_background\.default {
-    background-color: var(--colors-background-default);
-}
-
-  .trs-dur_fast {
-    --transition-duration: var(--durations-fast);
-    transition-duration: var(--durations-fast);
-}
-
-  .trs-prop_background-color\,_border-color\,_max-width {
-    --transition-prop: background-color, border-color, max-width;
-    transition-property: background-color, border-color, max-width;
-}
-
-  .trs-tmf_default {
-    --transition-easing: var(--easings-default);
-    transition-timing-function: var(--easings-default);
-}
-
   .flex-wrap_wrap {
     flex-wrap: wrap;
 }
@@ -696,6 +677,10 @@
     grid-template-columns: 1fr;
 }
 
+  .bg-c_background\.default {
+    background-color: var(--colors-background-default);
+}
+
   .bg-c_surface\.brand\.1 {
     background-color: var(--colors-surface-brand-1);
 }
@@ -1229,14 +1214,6 @@
     border-radius: 0;
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\]\:bd-c_stroke\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\]\:bd-c_stroke\.hover:focus-visible {
-    border-color: var(--colors-stroke-hover);
-}
-
-  .\[\&\:hover\,_\&\:focus-visible\]\:bg-c_surface\.actionSubtle\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\]\:bg-c_surface\.actionSubtle\.hover:focus-visible {
-    background-color: var(--colors-surface-action-subtle-hover);
-}
-
   .hover\:td_none:is(:hover, [data-hover]) {
     text-decoration: none;
 }
@@ -1281,10 +1258,6 @@
     font-weight: var(--font-weights-bold);
 }
 
-  .\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h1,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h2,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h3,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h4,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h5,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h6,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h1,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h2,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h3,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h4,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h5,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h6 {
-    text-decoration: underline;
-}
-
   .focusVisible\:after\:pos_absolute:is(:focus-visible, [data-focus-visible])::after {
     position: absolute;
 }
@@ -1472,12 +1445,6 @@
   @media screen and (min-width: 48rem) {
     .tabletWide\:w_100\% {
       width: 100%;
-}
-    .tabletWide\:max-w_350px {
-      max-width: 350px;
-}
-    .tabletWide\:max-w_532px {
-      max-width: 532px;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;

package/es/Pitch/Pitch.js

@@ -0,0 +1,83 @@
+/**
+ * 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 parse from "html-react-parser";
+import { CardHeading, CardImage, CardRoot, Text } from "@ndla/primitives";
+import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
+import { linkOverlay } from "@ndla/styled-system/patterns";
+import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledCardHeading = styled(CardHeading, {
+  base: {
+    paddingBlockStart: "medium"
+  }
+});
+const StyledText = styled(Text, {
+  base: {
+    paddingBlockEnd: "medium"
+  }
+});
+const StyledCardRoot = styled(CardRoot, {
+  base: {
+    border: "0",
+    display: "flex",
+    flexDirection: "column",
+    gap: "small"
+  }
+});
+const StyledCardImage = styled(CardImage, {
+  base: {
+    aspectRatio: "16/9",
+    height: "unset"
+  }
+});
+export const Pitch = _ref => {
+  let {
+    title,
+    url,
+    metaImage,
+    path,
+    description
+  } = _ref;
+  const href = getPossiblyRelativeUrl(url, path);
+  return /*#__PURE__*/_jsx(StyledCardRoot, {
+    variant: "subtle",
+    "data-embed-type": "pitch",
+    asChild: true,
+    consumeCss: true,
+    children: /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(StyledCardHeading, {
+        textStyle: "heading.small",
+        asChild: true,
+        consumeCss: true,
+        children: /*#__PURE__*/_jsx(SafeLink, {
+          to: href,
+          unstyled: true,
+          css: linkOverlay.raw(),
+          children: parse(title)
+        })
+      }), !!description && /*#__PURE__*/_jsx(StyledText, {
+        textStyle: "body.xlarge",
+        asChild: true,
+        consumeCss: true,
+        children: /*#__PURE__*/_jsx("div", {
+          children: parse(description)
+        })
+      }), /*#__PURE__*/_jsx(StyledCardImage, {
+        variant: "rounded",
+        src: metaImage.url,
+        alt: metaImage.alt,
+        sizes: "180px",
+        fallbackWidth: 300,
+        width: 550,
+        height: 310
+      })]
+    })
+  });
+};

package/es/{BlogPost → Pitch}/index.js

@@ -6,4 +6,4 @@
  *
  */
 
-export { default as BlogPostV2 } from "./BlogPost";
+export { Pitch } from "./Pitch";

package/es/index.js

@@ -37,7 +37,7 @@ export { ContentTypeBlockQuote } from "./ContentTypeBlockQuote/ContentTypeBlockQ
 export { ContentTypeFramedContent } 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";
+export { Pitch } from "./Pitch";
 export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";
 export { CampaignBlock } from "./CampaignBlock";

package/lib/Pitch/Pitch.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ *
+ */
+export interface Props {
+    title: string;
+    url: string;
+    description?: string;
+    metaImage: {
+        url: string;
+        alt: string;
+    };
+    path?: string;
+}
+export declare const Pitch: ({ title, url, metaImage, path, description }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/Pitch/Pitch.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pitch = void 0;
+var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
+var _primitives = require("@ndla/primitives");
+var _safelink = require("@ndla/safelink");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _patterns = require("@ndla/styled-system/patterns");
+var _relativeUrl = require("../utils/relativeUrl");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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 StyledCardHeading = (0, _jsx2.styled)(_primitives.CardHeading, {
+  base: {
+    paddingBlockStart: "medium"
+  }
+});
+const StyledText = (0, _jsx2.styled)(_primitives.Text, {
+  base: {
+    paddingBlockEnd: "medium"
+  }
+});
+const StyledCardRoot = (0, _jsx2.styled)(_primitives.CardRoot, {
+  base: {
+    border: "0",
+    display: "flex",
+    flexDirection: "column",
+    gap: "small"
+  }
+});
+const StyledCardImage = (0, _jsx2.styled)(_primitives.CardImage, {
+  base: {
+    aspectRatio: "16/9",
+    height: "unset"
+  }
+});
+const Pitch = _ref => {
+  let {
+    title,
+    url,
+    metaImage,
+    path,
+    description
+  } = _ref;
+  const href = (0, _relativeUrl.getPossiblyRelativeUrl)(url, path);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCardRoot, {
+    variant: "subtle",
+    "data-embed-type": "pitch",
+    asChild: true,
+    consumeCss: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCardHeading, {
+        textStyle: "heading.small",
+        asChild: true,
+        consumeCss: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_safelink.SafeLink, {
+          to: href,
+          unstyled: true,
+          css: _patterns.linkOverlay.raw(),
+          children: (0, _htmlReactParser.default)(title)
+        })
+      }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
+        textStyle: "body.xlarge",
+        asChild: true,
+        consumeCss: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: (0, _htmlReactParser.default)(description)
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCardImage, {
+        variant: "rounded",
+        src: metaImage.url,
+        alt: metaImage.alt,
+        sizes: "180px",
+        fallbackWidth: 300,
+        width: 550,
+        height: 310
+      })]
+    })
+  });
+};
+exports.Pitch = Pitch;

package/lib/{BlogPost → Pitch}/index.d.ts

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export { default as BlogPostV2 } from "./BlogPost";
+export { Pitch } from "./Pitch";

package/lib/Pitch/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Pitch", {
+  enumerable: true,
+  get: function () {
+    return _Pitch.Pitch;
+  }
+});
+var _Pitch = require("./Pitch");

package/lib/index.d.ts

@@ -40,7 +40,7 @@ export { type ContentTypeFramedContentVariant } from "./ContentTypeFramedContent
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 export type { TagSelectorControlProps, TagSelectorInputProps, TagSelectorRootProps } from "./TagSelector/TagSelector";
 export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput, } from "./TagSelector/TagSelector";
-export { BlogPostV2 } from "./BlogPost";
+export { Pitch } from "./Pitch";
 export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";
 export type { ContactBlockBackground } from "./ContactBlock";

package/lib/index.js

@@ -87,12 +87,6 @@ Object.defineProperty(exports, "BlockConcept", {
     return _Embed.BlockConcept;
   }
 });
-Object.defineProperty(exports, "BlogPostV2", {
-  enumerable: true,
-  get: function () {
-    return _BlogPost.BlogPostV2;
-  }
-});
 Object.defineProperty(exports, "Breadcrumb", {
   enumerable: true,
   get: function () {
@@ -381,6 +375,12 @@ Object.defineProperty(exports, "PdfFile", {
     return _FileList.PdfFile;
   }
 });
+Object.defineProperty(exports, "Pitch", {
+  enumerable: true,
+  get: function () {
+    return _Pitch.Pitch;
+  }
+});
 Object.defineProperty(exports, "RelatedArticle", {
   enumerable: true,
   get: function () {
@@ -655,7 +655,7 @@ var _ContentTypeBlockQuote = require("./ContentTypeBlockQuote/ContentTypeBlockQu
 var _ContentTypeFramedContent = require("./ContentTypeFramedContent/ContentTypeFramedContent");
 var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
 var _TagSelector = require("./TagSelector/TagSelector");
-var _BlogPost = require("./BlogPost");
+var _Pitch = require("./Pitch");
 var _KeyFigure = require("./KeyFigure");
 var _ContactBlock = require("./ContactBlock");
 var _CampaignBlock = require("./CampaignBlock");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.52-alpha.0",
+  "version": "56.0.53-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.31-alpha.0",
+    "@ndla/icons": "^8.0.32-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.46-alpha.0",
-    "@ndla/safelink": "^7.0.46-alpha.0",
+    "@ndla/primitives": "^1.0.47-alpha.0",
+    "@ndla/safelink": "^7.0.47-alpha.0",
     "@ndla/styled-system": "^0.0.24",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
@@ -50,13 +50,13 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.40",
+    "@ndla/preset-panda": "^0.0.41",
     "@ndla/types-backend": "^0.2.86",
-    "@ndla/types-embed": "^5.0.3-alpha.0",
+    "@ndla/types-embed": "^5.0.4-alpha.0",
     "@pandacss/dev": "^0.46.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2277fee3427d8c14db9b299485dc57f2779af69f"
+  "gitHead": "1566b12dac651e40b3300afe8f41080649a9eed5"
 }

package/src/Grid/Grid.stories.tsx

@@ -10,8 +10,8 @@ import { Meta, StoryFn } from "@storybook/react";
 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";
+import { Default as PitchStory } from "../Pitch/Pitch.stories";
 
 export default {
   title: "Components/Grid",
@@ -59,17 +59,15 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
   return <Grid {...args}>{items}</Grid>;
 };
 
-export const GridBlogPostStory: StoryFn<typeof Grid> = ({ ...args }) => {
+export const GridPitchStory: StoryFn<typeof Grid> = ({ ...args }) => {
   const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
   const items = new Array(columns).fill(
     <div data-type="grid-cell" data-parallax-cell="false">
-      <BlogPostStory
-        metaImage={BlogPostStory.args?.metaImage!}
-        title={BlogPostStory.args?.title!}
-        size={"normal"}
-        headingLevel={BlogPostStory.args?.headingLevel}
-        url={BlogPostStory.args?.url!}
-        author={BlogPostStory.args?.author}
+      <PitchStory
+        metaImage={PitchStory.args?.metaImage!}
+        title={PitchStory.args?.title!}
+        url={PitchStory.args?.url!}
+        description={PitchStory.args?.description}
       />
     </div>,
   );

package/src/Pitch/Pitch.stories.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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 { Meta, StoryFn } from "@storybook/react";
+import { PageContent } from "@ndla/primitives";
+import { Pitch } from "./Pitch";
+import { ArticleContent, ArticleWrapper } from "../Article";
+import { Grid } from "../Grid";
+
+export default {
+  title: "Components/Pitch",
+  component: Pitch,
+  tags: ["autodocs"],
+  args: {
+    title: "Min bloggpost",
+    description:
+      "Vil du øve på spansk? Kunne du tenke deg hjelp til naturfag? Drømmer du om en prat med Mandela? Lag din egen praterobot!",
+    url: "#",
+    metaImage: {
+      alt: "Yonghetempelet i Beijing. Foto.",
+      url: "https://api.test.ndla.no/image-api/raw/id//62870",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <PageContent variant="page" asChild>
+        <ArticleWrapper>
+          <ArticleContent>
+            <Story />
+          </ArticleContent>
+        </ArticleWrapper>
+      </PageContent>
+    ),
+  ],
+} as Meta<typeof Pitch>;
+
+export const Default: StoryFn<typeof Pitch> = ({ ...args }) => {
+  return (
+    <Grid columns="2" background="transparent">
+      <Pitch {...args} />
+      <Pitch {...args} />
+    </Grid>
+  );
+};

package/src/Pitch/Pitch.tsx

@@ -0,0 +1,83 @@
+/**
+ * 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 parse from "html-react-parser";
+import { CardHeading, CardImage, CardRoot, Text } from "@ndla/primitives";
+import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
+import { linkOverlay } from "@ndla/styled-system/patterns";
+import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
+
+export interface Props {
+  title: string;
+  url: string;
+  description?: string;
+  metaImage: {
+    url: string;
+    alt: string;
+  };
+  path?: string;
+}
+
+const StyledCardHeading = styled(CardHeading, {
+  base: {
+    paddingBlockStart: "medium",
+  },
+});
+
+const StyledText = styled(Text, {
+  base: {
+    paddingBlockEnd: "medium",
+  },
+});
+
+const StyledCardRoot = styled(CardRoot, {
+  base: {
+    border: "0",
+    display: "flex",
+    flexDirection: "column",
+    gap: "small",
+  },
+});
+
+const StyledCardImage = styled(CardImage, {
+  base: {
+    aspectRatio: "16/9",
+    height: "unset",
+  },
+});
+
+export const Pitch = ({ title, url, metaImage, path, description }: Props) => {
+  const href = getPossiblyRelativeUrl(url, path);
+
+  return (
+    <StyledCardRoot variant="subtle" data-embed-type="pitch" asChild consumeCss>
+      <div>
+        <StyledCardHeading textStyle="heading.small" asChild consumeCss>
+          <SafeLink to={href} unstyled css={linkOverlay.raw()}>
+            {parse(title)}
+          </SafeLink>
+        </StyledCardHeading>
+        {!!description && (
+          <StyledText textStyle="body.xlarge" asChild consumeCss>
+            <div>{parse(description)}</div>
+          </StyledText>
+        )}
+        <StyledCardImage
+          variant="rounded"
+          src={metaImage.url}
+          alt={metaImage.alt}
+          sizes="180px"
+          fallbackWidth={300}
+          width={550}
+          height={310}
+        />
+      </div>
+    </StyledCardRoot>
+  );
+};

package/src/{BlogPost → Pitch}/index.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export { default as BlogPostV2 } from "./BlogPost";
+export { Pitch } from "./Pitch";

package/src/index.ts

@@ -133,7 +133,7 @@ export {
   TagSelectorInput,
 } from "./TagSelector/TagSelector";
 
-export { BlogPostV2 } from "./BlogPost";
+export { Pitch } from "./Pitch";
 export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";
 export type { ContactBlockBackground } from "./ContactBlock";

package/es/BlogPost/BlogPost.js

@@ -1,129 +0,0 @@
-/**
- * Copyright (c) 2023-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 parse from "html-react-parser";
-import { useTranslation } from "react-i18next";
-import { Heading } from "@ndla/primitives";
-import { SafeLink } 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";
-const Container = styled(SafeLink, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    color: "text.default",
-    backgroundColor: "background.default",
-    gap: "medium",
-    border: "1px solid",
-    borderColor: "stroke.subtle",
-    borderRadius: "xsmall",
-    transitionDuration: "fast",
-    transitionProperty: "background-color, border-color, max-width",
-    transitionTimingFunction: "default",
-    height: "100%",
-    "&:hover, &:focus-visible": {
-      borderColor: "stroke.hover",
-      backgroundColor: "surface.actionSubtle.hover",
-      "& h1, h2, h3, h4, h5, h6": {
-        textDecoration: "underline"
-      }
-    }
-  },
-  defaultVariants: {
-    size: "normal"
-  },
-  variants: {
-    // TODO: Reconsider these sizes. Maybe they should match up with surface?
-    size: {
-      normal: {
-        paddingBlock: "medium",
-        paddingInline: "medium",
-        tabletWide: {
-          maxWidth: "350px"
-        }
-      },
-      large: {
-        paddingBlock: "xlarge",
-        paddingInline: "xxlarge",
-        tabletWide: {
-          maxWidth: "532px"
-        }
-      }
-    }
-  }
-},
-// TODO: Reconsider this once we handle SafeLink
-{
-  baseComponent: true
-});
-const AuthorContainer = styled("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    gap: "xsmall",
-    textTransform: "uppercase",
-    textStyle: "body.large"
-  }
-});
-const StyledImg = styled("img", {
-  base: {
-    borderRadius: "xsmall",
-    flex: "1",
-    objectFit: "cover",
-    width: "100%",
-    height: "100%",
-    border: "0"
-  }
-});
-const StyledHeading = styled(Heading, {
-  base: {
-    display: "inline-block",
-    width: "fit-content"
-  }
-});
-const BlogPost = _ref => {
-  let {
-    title,
-    author,
-    url,
-    metaImage,
-    headingLevel: Heading = "h3",
-    size = "normal",
-    path
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const href = getPossiblyRelativeUrl(url, path);
-  const imageWidth = size === "large" ? 532 : 350;
-  return /*#__PURE__*/_jsxs(Container, {
-    "data-size": size,
-    to: href,
-    size: size,
-    "data-embed-type": "blog-post",
-    children: [/*#__PURE__*/_jsx(StyledHeading, {
-      className: "blog-title",
-      asChild: true,
-      consumeCss: true,
-      textStyle: "title.large",
-      children: /*#__PURE__*/_jsx(Heading, {
-        children: parse(title)
-      })
-    }), /*#__PURE__*/_jsx(StyledImg, {
-      src: `${metaImage.url}?width=${imageWidth}`,
-      alt: metaImage.alt
-    }), !!author && /*#__PURE__*/_jsx(AuthorContainer, {
-      "aria-label": t("article.writtenBy", {
-        authors: author
-      }),
-      children: author
-    })]
-  });
-};
-export default BlogPost;

package/lib/BlogPost/BlogPost.d.ts

@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2023-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 { HeadingLevel } from "../types";
-export interface Props {
-    title: string;
-    author?: string;
-    url: string;
-    headingLevel?: HeadingLevel;
-    size?: "normal" | "large";
-    metaImage: {
-        url: string;
-        alt: string;
-    };
-    path?: string;
-}
-declare const BlogPost: ({ title, author, url, metaImage, headingLevel: Heading, size, path }: Props) => import("react/jsx-runtime").JSX.Element;
-export default BlogPost;

package/lib/BlogPost/BlogPost.js

@@ -1,136 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
-var _reactI18next = require("react-i18next");
-var _primitives = require("@ndla/primitives");
-var _safelink = require("@ndla/safelink");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _relativeUrl = require("../utils/relativeUrl");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2023-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 Container = (0, _jsx2.styled)(_safelink.SafeLink, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    color: "text.default",
-    backgroundColor: "background.default",
-    gap: "medium",
-    border: "1px solid",
-    borderColor: "stroke.subtle",
-    borderRadius: "xsmall",
-    transitionDuration: "fast",
-    transitionProperty: "background-color, border-color, max-width",
-    transitionTimingFunction: "default",
-    height: "100%",
-    "&:hover, &:focus-visible": {
-      borderColor: "stroke.hover",
-      backgroundColor: "surface.actionSubtle.hover",
-      "& h1, h2, h3, h4, h5, h6": {
-        textDecoration: "underline"
-      }
-    }
-  },
-  defaultVariants: {
-    size: "normal"
-  },
-  variants: {
-    // TODO: Reconsider these sizes. Maybe they should match up with surface?
-    size: {
-      normal: {
-        paddingBlock: "medium",
-        paddingInline: "medium",
-        tabletWide: {
-          maxWidth: "350px"
-        }
-      },
-      large: {
-        paddingBlock: "xlarge",
-        paddingInline: "xxlarge",
-        tabletWide: {
-          maxWidth: "532px"
-        }
-      }
-    }
-  }
-},
-// TODO: Reconsider this once we handle SafeLink
-{
-  baseComponent: true
-});
-const AuthorContainer = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    gap: "xsmall",
-    textTransform: "uppercase",
-    textStyle: "body.large"
-  }
-});
-const StyledImg = (0, _jsx2.styled)("img", {
-  base: {
-    borderRadius: "xsmall",
-    flex: "1",
-    objectFit: "cover",
-    width: "100%",
-    height: "100%",
-    border: "0"
-  }
-});
-const StyledHeading = (0, _jsx2.styled)(_primitives.Heading, {
-  base: {
-    display: "inline-block",
-    width: "fit-content"
-  }
-});
-const BlogPost = _ref => {
-  let {
-    title,
-    author,
-    url,
-    metaImage,
-    headingLevel: Heading = "h3",
-    size = "normal",
-    path
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const href = (0, _relativeUrl.getPossiblyRelativeUrl)(url, path);
-  const imageWidth = size === "large" ? 532 : 350;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    "data-size": size,
-    to: href,
-    size: size,
-    "data-embed-type": "blog-post",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeading, {
-      className: "blog-title",
-      asChild: true,
-      consumeCss: true,
-      textStyle: "title.large",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
-        children: (0, _htmlReactParser.default)(title)
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImg, {
-      src: `${metaImage.url}?width=${imageWidth}`,
-      alt: metaImage.alt
-    }), !!author && /*#__PURE__*/(0, _jsxRuntime.jsx)(AuthorContainer, {
-      "aria-label": t("article.writtenBy", {
-        authors: author
-      }),
-      children: author
-    })]
-  });
-};
-var _default = exports.default = BlogPost;

package/lib/BlogPost/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BlogPostV2", {
-  enumerable: true,
-  get: function () {
-    return _BlogPost.default;
-  }
-});
-var _BlogPost = _interopRequireDefault(require("./BlogPost"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/src/BlogPost/BlogPost.stories.tsx

@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2023-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 { Meta, StoryFn } from "@storybook/react";
-import BlogPost, { Props } from "./BlogPost";
-
-const args: Props = {
-  title: "Min bloggpost",
-  author: "Ola Nordmann",
-  url: "#",
-  headingLevel: "h3",
-  size: "large",
-  metaImage: {
-    alt: "Yonghetempelet i Beijing. Foto.",
-    url: "https://api.test.ndla.no/image-api/raw/id//62870",
-  },
-};
-
-export default {
-  title: "Components/Blog Post",
-  component: BlogPost,
-  tags: ["autodocs"],
-  args: args,
-} as Meta<typeof BlogPost>;
-
-export const BlogPostStory: StoryFn<typeof BlogPost> = ({ ...args }) => {
-  return <BlogPost {...args} />;
-};
-
-BlogPostStory.args = args;
-BlogPostStory.storyName = "BlogPost";

package/src/BlogPost/BlogPost.tsx

@@ -1,124 +0,0 @@
-/**
- * Copyright (c) 2023-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 parse from "html-react-parser";
-import { useTranslation } from "react-i18next";
-import { Heading } from "@ndla/primitives";
-import { SafeLink } from "@ndla/safelink";
-import { styled } from "@ndla/styled-system/jsx";
-import { HeadingLevel } from "../types";
-import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
-
-export interface Props {
-  title: string;
-  author?: string;
-  url: string;
-  headingLevel?: HeadingLevel;
-  size?: "normal" | "large";
-  metaImage: {
-    url: string;
-    alt: string;
-  };
-  path?: string;
-}
-
-const Container = styled(
-  SafeLink,
-  {
-    base: {
-      display: "flex",
-      flexDirection: "column",
-      color: "text.default",
-      backgroundColor: "background.default",
-      gap: "medium",
-      border: "1px solid",
-      borderColor: "stroke.subtle",
-      borderRadius: "xsmall",
-      transitionDuration: "fast",
-      transitionProperty: "background-color, border-color, max-width",
-      transitionTimingFunction: "default",
-      height: "100%",
-      "&:hover, &:focus-visible": {
-        borderColor: "stroke.hover",
-        backgroundColor: "surface.actionSubtle.hover",
-        "& h1, h2, h3, h4, h5, h6": {
-          textDecoration: "underline",
-        },
-      },
-    },
-    defaultVariants: {
-      size: "normal",
-    },
-    variants: {
-      // TODO: Reconsider these sizes. Maybe they should match up with surface?
-      size: {
-        normal: {
-          paddingBlock: "medium",
-          paddingInline: "medium",
-          tabletWide: {
-            maxWidth: "350px",
-          },
-        },
-        large: {
-          paddingBlock: "xlarge",
-          paddingInline: "xxlarge",
-          tabletWide: {
-            maxWidth: "532px",
-          },
-        },
-      },
-    },
-  },
-  // TODO: Reconsider this once we handle SafeLink
-  { baseComponent: true },
-);
-
-const AuthorContainer = styled("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    gap: "xsmall",
-    textTransform: "uppercase",
-    textStyle: "body.large",
-  },
-});
-
-const StyledImg = styled("img", {
-  base: {
-    borderRadius: "xsmall",
-    flex: "1",
-    objectFit: "cover",
-    width: "100%",
-    height: "100%",
-    border: "0",
-  },
-});
-
-const StyledHeading = styled(Heading, {
-  base: {
-    display: "inline-block",
-    width: "fit-content",
-  },
-});
-
-const BlogPost = ({ title, author, url, metaImage, headingLevel: Heading = "h3", size = "normal", path }: Props) => {
-  const { t } = useTranslation();
-  const href = getPossiblyRelativeUrl(url, path);
-  const imageWidth = size === "large" ? 532 : 350;
-  return (
-    <Container data-size={size} to={href} size={size} data-embed-type="blog-post">
-      <StyledHeading className="blog-title" asChild consumeCss textStyle="title.large">
-        <Heading>{parse(title)}</Heading>
-      </StyledHeading>
-      <StyledImg src={`${metaImage.url}?width=${imageWidth}`} alt={metaImage.alt} />
-      {!!author && <AuthorContainer aria-label={t("article.writtenBy", { authors: author })}>{author}</AuthorContainer>}
-    </Container>
-  );
-};
-
-export default BlogPost;