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

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/src/locale/messages-en.ts

@@ -233,7 +233,7 @@ const messages = {
       "What will it mean to work exploratory? How can you learn better? What is needed in order to make group work function? In the toolbox both students and teach find resources that are current for every subject, and that support learning work and development of knowledge, skills and understanding.",
   },
   meta: {
-    description: "Norwegian Digital Learning Arena, Open Educational Resources",
+    description: "Norwegian Digital Learning Arena, Open Educational Resources for upper secondary education.",
     keywords: "open educational resources,teaching,learning",
   },
   masthead: {

package/src/locale/messages-nb.ts

@@ -233,7 +233,8 @@ const messages = {
       "Hva vil det si å arbeide utforskende? Hvordan kan du lære bedre? Hva skal til for å få gruppearbeid til å fungere? I Verktøykassa finner både elever og lærere ressurser som er aktuelle for alle fag, og som støtter opp under læringsarbeid og utvikling av kunnskap, ferdigheter og forståelse.",
   },
   meta: {
-    description: "Kvalitetssikrede og fritt tilgjengelige nettbaserte læremidler for videregående opplæring",
+    description:
+      "Åpne og fritt tilgjengelige ressurser for videregående opplæring. Utviklet og oppdatert i samarbeid med dyktige lærere og elever.",
     keywords: "læremiddel,fag,skole,videregående,lærling,pensum,fagstoff",
   },
   masthead: {

package/src/locale/messages-nn.ts

@@ -233,7 +233,8 @@ const messages = {
       "Kva vil det seie å arbeide utforskande? Korleis kan du lære betre? Kva skal til for å få gruppearbeid til å fungere? I Verktøykassa finn både elevar og lærerar ressursar som er aktuelle for alle fag, og som støtter opp under læringsarbeid og utvikling av kunnskap, ferdigheter og forståing.",
   },
   meta: {
-    description: "Kvalitetssikra og fritt tilgjengelege nettbaserte læremiddel for vidaregåande opplæring",
+    description:
+      "Opne og fritt tilgjengelege ressursar for vidaregåande opplæring. Utvikla og oppdaterte i samarbeid med dyktige lærarar og elevar.",
     keywords: "læremiddel,fag,skole,skule,vidaregåande,lærling,pensum,fagstoff, ",
   },
   masthead: {

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;