@ndla/ui 55.0.12-alpha.0 → 55.0.14-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/CampaignBlock/CampaignBlock.tsx

@@ -6,14 +6,13 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
 import parse from "html-react-parser";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, spacing, mq, misc } from "@ndla/core";
+import { ReactNode } from "react";
 import { Forward } from "@ndla/icons/common";
+import { Text } 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";
 
 interface Image {
@@ -35,74 +34,112 @@ interface Props {
   path?: string;
 }
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.normal};
-  border: 1px ${colors.brand.lighter} solid;
-  border-radius: ${misc.borderRadius};
-  padding: ${spacing.normal};
-  background-color: ${colors.white};
-  &[data-image-side="right"] {
-    flex-direction: column-reverse;
-  }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    max-width: 1100px;
-    flex-direction: row;
-    &[data-image-side="right"] {
-      flex-direction: row-reverse;
-    }
-  }
-`;
+const Container = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    border: "1px solid",
+    borderColor: "stroke.default",
+    backgroundColor: "background.default",
+    borderRadius: "xsmall",
+    boxShadow: "full",
+    maxWidth: "surface.xsmall",
+    overflow: "hidden",
+    mobileWide: {
+      maxWidth: "surface.medium",
+    },
+    tabletWide: {
+      // TODO: This is probably not the correct max-width. And it should be a token
+      maxWidth: "1100px",
+      flexDirection: "row",
+    },
+  },
+});
 
-const headingStyle = css`
-  margin: 0;
-`;
+const LinkText = styled(Text, {
+  base: {
+    display: "flex",
+    gap: "xxsmall",
+    textDecoration: "underline",
+    _hover: {
+      textDecoration: "none",
+    },
+  },
+});
+const StyledImg = styled("img", {
+  base: {
+    alignSelf: "center",
+    objectFit: "cover",
+    width: "100%",
+    height: "215px",
+    desktop: {
+      height: "340px",
+    },
+  },
+});
 
-const StyledDescription = styled.p`
-  font-family: ${fonts.serif};
-  margin: ${spacing.normal} 0 ${spacing.medium};
-`;
+const ContentWrapper = styled("div", {
+  base: {
+    width: "100%",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+    alignItems: "flex-start",
+    paddingBlock: "medium",
+    paddingInline: "medium",
+  },
+});
 
-const StyledImg = styled.img`
-  align-self: center;
-  object-fit: contain;
-`;
+interface MaybeLinkTextProps {
+  url?: string;
+  path?: string;
+  children: ReactNode;
+}
 
-const StyledLink = styled(SafeLink)`
-  display: inline-flex;
-  align-items: center;
-  gap: ${spacing.xxsmall};
-  color: ${colors.brand.primary};
-`;
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    color: "inherit",
+  },
+});
 
-const TextWrapper = styled.div`
-  flex-grow: 1;
-`;
+const MaybeLinkText = ({ url, children, path }: MaybeLinkTextProps) => {
+  if (url) return <StyledSafeLink to={getPossiblyRelativeUrl(url, path)}>{children}</StyledSafeLink>;
+  return children;
+};
 
 const CampaignBlock = ({
   title,
   image,
   imageSide = "left",
   description,
-  headingLevel: Heading = "h2",
+  headingLevel: InternalHeading = "h2",
   url,
   path,
   className,
 }: Props) => {
+  const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;
+  const HeaderComponent = url?.url ? LinkText : Text;
   return (
-    <Container className={className} data-type="campaign-block" data-image-side={imageSide}>
-      {image && <StyledImg src={`${image.src}?width=240`} height={200} width={240} alt={image.alt} />}
-      <TextWrapper>
-        <Heading css={headingStyle}>{parse(title)}</Heading>
-        <StyledDescription>{parse(description)}</StyledDescription>
+    <Container className={className} data-type="campaign-block">
+      {imageSide === "left" && imageComponent}
+      <ContentWrapper>
+        <MaybeLinkText url={url?.url} path={path}>
+          <HeaderComponent asChild consumeCss textStyle="heading.small">
+            <InternalHeading>{parse(title)}</InternalHeading>
+          </HeaderComponent>
+        </MaybeLinkText>
+        <Text textStyle="body.large">{parse(description)}</Text>
         {!!url?.url && (
-          <StyledLink to={getPossiblyRelativeUrl(url.url, path)}>
-            {parse(url.text ?? "")}
-            <Forward />
-          </StyledLink>
+          <MaybeLinkText url={url.url} path={path}>
+            <LinkText textStyle="body.medium">
+              {parse(url.text ?? "")}
+              <Forward />
+            </LinkText>
+          </MaybeLinkText>
         )}
-      </TextWrapper>
+      </ContentWrapper>
+      {imageSide !== "left" && imageComponent}
     </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",
   },
 };