@ndla/ui 55.0.12-alpha.0 → 55.0.13-alpha.0

package/src/BlogPost/BlogPost.tsx

@@ -6,14 +6,12 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
 import parse from "html-react-parser";
 import { useTranslation } from "react-i18next";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, misc, mq, spacing } from "@ndla/core";
+import { Heading } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
-import { HeadingLevel } from "@ndla/typography";
+import { styled } from "@ndla/styled-system/jsx";
+import { HeadingLevel } from "../types";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
 export interface Props {
@@ -29,68 +27,94 @@ export interface Props {
   path?: string;
 }
 
-const Container = styled(SafeLink)`
-  margin: 0 0 ${spacing.normal} 0;
-  display: flex;
-  flex-direction: column;
-  color: ${colors.text.primary};
-  background-color: ${colors.white};
-  gap: ${spacing.nsmall};
-  box-shadow: none;
-  border: 1px solid ${colors.brand.lighter};
-  border-radius: ${misc.borderRadius};
-  padding: ${spacing.normal} ${spacing.medium};
-  height: 100%;
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    max-width: 350px;
-    &[data-size="large"] {
-      max-width: 532px;
-    }
-  }
-  &:hover,
-  &:focus-within {
-    .blog-title {
-      text-decoration: underline;
-    }
-  }
-`;
+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 headingCss = css`
-  display: inline-block;
-  width: fit-content;
-  margin: 0;
-  font-weight: ${fonts.weight.semibold};
-  ${fonts.sizes("26px", "36px")};
-`;
+const AuthorContainer = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "xsmall",
+    textTransform: "uppercase",
+    textStyle: "body.large",
+  },
+});
 
-const AuthorContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${spacing.xsmall};
-  svg {
-    color: rgba(78, 81, 242, 1);
-  }
-  text-transform: uppercase;
-`;
+const StyledImg = styled("img", {
+  base: {
+    borderRadius: "xsmall",
+    flex: "1",
+    objectFit: "cover",
+    width: "100%",
+    height: "100%",
+    border: "0",
+  },
+});
 
-const StyledImg = styled.img`
-  border-radius: ${misc.borderRadius};
-  flex: 1;
-  object-fit: 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}>
-      <Heading className="blog-title" css={headingCss}>
-        {parse(title)}
-      </Heading>
+    <Container data-size={size} to={href} size={size}>
+      <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>

package/src/CodeBlock/CodeBlock.stories.tsx

@@ -7,8 +7,6 @@
  */
 
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { IconButtonV2 } from "@ndla/button";
-import { DeleteForever } from "@ndla/icons/editor";
 import CodeBlock from "./CodeBlock";
 
 export default {
@@ -19,7 +17,6 @@ export default {
     inlineStories: true,
   },
   args: {
-    title: "CodeBlock",
     format: "html",
     highlightedCode: `<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
@@ -36,37 +33,6 @@ export default {
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>is simply dummy text of the printing and typesetting industry<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>`,
-    code: `<div class="demo-content">
-  <h2>Lorem ipsum</h2>
-  <p>
-    <b>Lorem ipsum</b><br/>
-    <span>is simply dummy text of the printing and typesetting industry</span>
-  </p>
-  <p>
-    <b>Lorem ipsum</b><br/>
-    <span>is simply dummy text of the printing and typesetting industry</span>
-  </p>
-  <p>
-    <b>Lorem ipsum</b><br/>
-    <span>is simply dummy text of the printing and typesetting industry</span>
-  </p>
-</div>`,
-    actionButton: (
-      <IconButtonV2 aria-label="Slett" variant="ghost" colorTheme="danger">
-        <DeleteForever />
-      </IconButtonV2>
-    ),
-    showCopy: true,
-  },
-  argTypes: {
-    actionButton: {
-      table: {
-        disable: true,
-        type: {
-          detail: "Takes any ReactNode, but as the name implies: use a button component, preferably an icon-button",
-        },
-      },
-    },
   },
 } as Meta<typeof CodeBlock>;
 
@@ -81,11 +47,6 @@ export const CSS: StoryObj<typeof CodeBlock> = {
   <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span>
   <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode color">#ccc</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>`,
-    code: `body {
-  padding: 20px;
-  margin: 10px;
-  background: #ccc;
-}`,
     format: "css",
   },
 };
@@ -95,9 +56,6 @@ export const JS: StoryObj<typeof CodeBlock> = {
     highlightedCode: `<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"This"</span><span class="token punctuation">,</span> <span class="token string">"Little"</span><span class="token punctuation">,</span> <span class="token string">"Piggy"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
 <span class="token keyword">const</span> first <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token method function property-access">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>first<span class="token punctuation">)</span><span class="token punctuation">;</span>`,
-    code: `const arr = ["This", "Little", "Piggy"];
-const first = arr.shift();
-console.log(first);`,
     format: "js",
   },
 };
@@ -105,7 +63,6 @@ console.log(first);`,
 export const Text: StoryObj<typeof CodeBlock> = {
   args: {
     highlightedCode: `Pure text without highlighting and no title`,
-    code: `Pure text without highlighting and no title`,
     format: "text",
   },
 };

package/src/CodeBlock/CodeBlock.tsx

@@ -6,176 +6,93 @@
  *
  */
 
-import { useState, useEffect, ReactNode, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { colors, fonts, spacing } from "@ndla/core";
-import { Copy } from "@ndla/icons/action";
-import { Done } from "@ndla/icons/editor";
-import { copyTextToClipboard } from "@ndla/util";
-import { ICodeLangugeOption, codeLanguageOptions } from "./codeLanguageOptions";
+import { type ComponentPropsWithRef, forwardRef, useMemo } from "react";
+import { cx } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { type JsxStyleProps } from "@ndla/styled-system/types";
 
-const Wrapper = styled.div`
-  margin: 15px 0;
-`;
-
-const TitleBar = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-const Title = styled.h3`
-  font-style: normal;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 32px;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: ${colors.text.primary};
-  margin: 5px 0;
-`;
-
-type Props = {
-  code: string;
+interface Props extends JsxStyleProps, ComponentPropsWithRef<"pre"> {
   highlightedCode: string;
   format: string;
-  title?: string | null;
-  actionButton?: ReactNode;
-  showCopy?: boolean;
-};
-
-const StyledPre = styled.pre`
-  border-left: 4px solid ${colors.brand.dark};
-  background-color: ${colors.brand.greyLighter};
-  box-sizing: border-box;
-  overflow-x: auto;
-  .linenumber {
-    display: inline-block;
-    padding: 0 ${spacing.small};
-    border-right: 1px solid #d8d8d8;
-    margin-right: ${spacing.small};
-    color: #7d8b99;
-    text-align: right;
-    width: 40px;
-  }
-  .linenumber[data-first] {
-    padding-top: ${spacing.small};
-  }
-  .linenumber[data-last] {
-    padding-bottom: ${spacing.small};
-  }
-  code {
-    display: block;
-    ${fonts.sizes("14px", "20px")};
-    font-family:
-      Source Code ProVariable,
-      Monaco;
-    margin: 0;
-    padding: 0;
-    white-space: pre;
-  }
-  code::before {
-    content: none;
-  }
-  &::before,
-  &::after {
-    content: none !important;
-  }
-
-  /* The remaining css is copied from the coy theme in prismjs. A lot of css is omitted due to styling clashes */
-  .token.comment,
-  .token.block-comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: #7d8b99;
-  }
-
-  .token.punctuation {
-    color: #5f6364;
-  }
-
-  .token.property,
-  .token.tag,
-  .token.boolean,
-  .token.number,
-  .token.function-name,
-  .token.constant,
-  .token.symbol,
-  .token.deleted {
-    color: #c92c2c;
-  }
-
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.function,
-  .token.builtin,
-  .token.inserted {
-    color: #2f9c0a;
-  }
-
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .token.variable {
-    color: #a67f59;
-    background: rgba(255, 255, 255, 0.5);
-  }
-
-  .token.atrule,
-  .token.attr-value,
-  .token.keyword,
-  .token.class-name {
-    color: #1990b8;
-  }
-
-  .token.regex,
-  .token.important {
-    color: #e90;
-  }
-
-  .language-css .token.string,
-  .style .token.string {
-    color: #a67f59;
-    background: rgba(255, 255, 255, 0.5);
-  }
-
-  .token.important {
-    font-weight: normal;
-  }
-
-  .token.bold {
-    font-weight: bold;
-  }
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-
-  .token.namespace {
-    opacity: 0.7;
-  }
-`;
-
-const getTitleFromFormat = (format: string) => {
-  const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);
-  if (selectedLanguage) {
-    return selectedLanguage.title;
-  }
-  return;
-};
-
-export const Codeblock = ({ actionButton, code, highlightedCode, format, showCopy = false, title }: Props) => {
-  const { t } = useTranslation();
-  const [isCopied, setIsCopied] = useState(false);
-
+}
+
+const Pre = styled("pre", {
+  base: {
+    border: "1px solid",
+    borderColor: "stroke.subtle",
+    borderLeft: "4px solid",
+    borderLeftColor: "stroke.default",
+    borderRadius: "xsmall",
+    boxSizing: "border-box",
+    overflowX: "auto",
+    textStyle: "label.medium",
+    fontFamily: "code",
+    display: "block",
+    whiteSpace: "pre",
+    "& .linenumber": {
+      display: "inline-block",
+      paddingBlock: "0",
+      paddingInline: "small",
+      borderRight: "1px solid",
+      borderColor: "stroke.subtle",
+      width: "xxlarge",
+      textAlign: "right",
+      marginInlineEnd: "xsmall",
+    },
+    "& .linenumber[data-first]": {
+      paddingBlockStart: "xsmall",
+    },
+    "& .linenumber[data-last]": {
+      paddingBlockEnd: "xsmall",
+    },
+    // The remaining css is copied from the coy theme in prismjs. A lot of css is omitted due to styling clashes
+    "& .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata": {
+      color: "#7d8b99",
+    },
+    "& .token.punctuation": {
+      color: "#5f6364",
+    },
+    "& .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted":
+      {
+        color: "#c92c2c",
+      },
+    "& .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted":
+      {
+        color: "#2f9c0a",
+      },
+    "& .token.operator, .token.entity, .token.url, .token.variable": {
+      color: "#a67f59",
+      background: "rgba(255, 255, 255, 0.5)",
+    },
+    "& .token.atrule, .token.attr-value, .token.keyword, .token.class-name": {
+      color: "#1990b8",
+    },
+    "& .token.regex, .token.important": {
+      color: "#e90",
+    },
+    "& .language-css .token.string, .style .token.string": {
+      color: "#a67f59",
+      background: "rgba(255, 255, 255, 0.5)",
+    },
+    "& .token.important": {
+      fontWeight: "normal",
+    },
+    "& .token.bold": {
+      fontWeight: "bold",
+    },
+    "& .token.italic": {
+      fontStyle: "italic",
+    },
+    "& .token.entity": {
+      cursor: "help",
+    },
+    "& .token.namespace": {
+      opacity: "0.7",
+    },
+  },
+});
+
+export const Codeblock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {
   const codeWithLineNumbers = useMemo(() => {
     return highlightedCode
       .split("\n")
@@ -187,42 +104,14 @@ export const Codeblock = ({ actionButton, code, highlightedCode, format, showCop
       .join("\n");
   }, [highlightedCode]);
 
-  useEffect(() => {
-    if (isCopied) {
-      const timer = setInterval(() => setIsCopied(false), 3000);
-      // ensure interval is cleared - also if unmounted
-      return () => {
-        clearTimeout(timer);
-      };
-    }
-  }, [isCopied]);
-
   return (
-    <Wrapper>
-      <TitleBar>
-        <Title>{title || getTitleFromFormat(format)}</Title>
-        {actionButton}
-      </TitleBar>
-      <StyledPre>
-        <code className={`language-${format}`} dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }} />
-      </StyledPre>
-      {showCopy && (
-        <ButtonV2
-          title={t("codeBlock.copyButton")}
-          disabled={isCopied}
-          data-copied-title={t("codeBlock.copiedCode")}
-          data-copy-string={code}
-          onClick={() => {
-            copyTextToClipboard(code);
-            setIsCopied(true);
-          }}
-        >
-          {isCopied ? <Done aria-hidden="true" /> : <Copy aria-hidden="true" />}{" "}
-          {isCopied ? t("codeBlock.copiedCode") : t("codeBlock.copyCode")}
-        </ButtonV2>
-      )}
-    </Wrapper>
+    <Pre
+      className={cx(`language-${format}`, className)}
+      {...props}
+      dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}
+      ref={ref}
+    />
   );
-};
+});
 
 export default Codeblock;

package/src/ContactBlock/ContactBlock.tsx

@@ -14,10 +14,10 @@ import styled from "@emotion/styled";
 import { spacing, fonts, colors, mq, breakpoints, misc } from "@ndla/core";
 import { BlobPointy as UnstyledBlobPointy, BlobRound as UnstyledBlobRound } from "@ndla/icons/common";
 import { COPYRIGHTED, getLicenseByAbbreviation } from "@ndla/licenses";
+import { Image } from "@ndla/primitives";
 import { IAuthor, IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { CanonicalUrlFuncs } from "../Embed";
 import { errorSvgSrc } from "../Embed/ImageEmbed";
-import Image, { ImageLink } from "../Image";
 import LicenseLink from "../LicenseByline/LicenseLink";
 
 const BLOB_WIDTH = 90;
@@ -150,9 +150,17 @@ interface LinkWrapperProps {
   children: ReactNode;
 }
 
+const StyledLink = styled.a`
+  text-decoration: none;
+`;
+
 const LinkWrapper = ({ src, children }: LinkWrapperProps) => {
   if (src) {
-    return <ImageLink src={src}>{children}</ImageLink>;
+    return (
+      <StyledLink target="_blank" href={src} rel="noopener noreferrer">
+        {children}
+      </StyledLink>
+    );
   }
   return children;
 };