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

package/src/LinkBlock/LinkBlock.tsx

@@ -10,69 +10,64 @@ import { format } from "date-fns";
 import { enGB, nb, nn } from "date-fns/locale";
 import parse from "html-react-parser";
 import { useMemo } from "react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, spacing, mq } from "@ndla/core";
 import { Forward, CalendarEd } from "@ndla/icons/common";
+import { Heading } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
 import { LinkBlockEmbedData } from "@ndla/types-embed";
-import { Heading } from "@ndla/typography";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
-const StyledForward = styled(Forward)`
-  margin: 0 ${spacing.nsmall};
-  min-width: ${spacing.normal};
-  min-height: ${spacing.normal};
-`;
+const InfoWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+  },
+});
 
-const InfoWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.small};
-`;
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    background: "surface.default",
+    padding: "medium",
+    border: "1px solid",
+    // TODO: Check if this is correct. Not part of design. Also check if this should have border-radius.
+    borderColor: "stroke.default",
+    "& h3": {
+      textDecoration: "underline",
+    },
+    "& [data-forward]": {
+      transitionProperty: "width, height",
+      transitionTimingFunction: "ease-in-out",
+      transitionDuration: "fast",
+    },
+    _hover: {
+      "& h3": {
+        textDecoration: "none",
+      },
+      "& [data-forward]": {
+        width: "large",
+        height: "large",
+      },
+    },
+  },
+});
 
-const StyledSafeLink = styled(SafeLink)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: none;
-  color: inherit;
-  background-color: ${colors.white};
-  border: 1px solid ${colors.brand.lighter};
-  padding: ${spacing.normal};
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    &:hover {
-      & ${InfoWrapper} :first-child {
-        text-decoration: underline;
-      }
-      & ${StyledForward} {
-        width: 32px;
-        height: 32px;
-      }
-    }
-    &:focus-visible {
-      border: 2px solid ${colors.brand.dark};
-    }
-  }
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    & ${InfoWrapper} :first-child {
-      text-decoration: underline;
-    }
-    :active :first-child {
-      text-decoration: none;
-    }
-  }
-`;
+const StyledDateContainer = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "xxsmall",
+  },
+});
 
-const StyledDateContainer = styled.div`
-  display: flex;
-  align-items: center;
-  padding-top: ${spacing.xsmall};
-  gap: ${spacing.small};
-`;
-
-const StyledCalenderEd = styled(CalendarEd)`
-  color: ${colors.icon.iconBlue};
-`;
+const StyledCalendarEd = styled(CalendarEd, {
+  base: {
+    color: "icon.strong",
+  },
+});
 
 interface Props extends Omit<LinkBlockEmbedData, "resource"> {
   path?: string;
@@ -89,17 +84,17 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {
   return (
     <StyledSafeLink to={href}>
       <InfoWrapper>
-        <Heading element="h3" margin="none" headingStyle="h3">
-          {parse(title)}
+        <Heading asChild consumeCss textStyle="title.medium">
+          <h3 data-heading>{parse(title)}</h3>
         </Heading>
         {date && (
           <StyledDateContainer>
-            <StyledCalenderEd />
+            <StyledCalendarEd />
             {formattedDate}
           </StyledDateContainer>
         )}
       </InfoWrapper>
-      <StyledForward />
+      <Forward data-forward />
     </StyledSafeLink>
   );
 };

package/src/LinkBlock/LinkBlockSection.tsx

@@ -7,23 +7,20 @@
  */
 
 import { Children, HTMLAttributes, ReactNode } from "react";
-import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
+import { styled } from "@ndla/styled-system/jsx";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children: ReactNode;
 }
 
-const StyledList = styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.small};
-  list-style: none;
-  padding: 0px;
-  li {
-    padding: 0px;
-  }
-`;
+const StyledList = styled("ul", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+    listStyle: "none",
+  },
+});
 
 const LinkBlockSection = ({ children, ...rest }: Props) => {
   return (

package/src/Logo/Logo.stories.tsx

@@ -24,7 +24,6 @@ export default {
     inlineStories: true,
   },
   args: {
-    cssModifier: "large",
     name: true,
     label: "Nasjonal digital læringsarena",
   },

package/src/Logo/Logo.tsx

@@ -6,11 +6,7 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
-import { useMemo } from "react";
-import { SerializedStyles, css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
 import { SafeLink } from "@ndla/safelink";
 import SvgLogo from "./SvgLogo";
 
@@ -24,8 +20,6 @@ interface Props {
       };
   label: string;
   locale?: string;
-  cssModifier?: string;
-  large?: boolean;
   name?: boolean;
   color?: string;
 }
@@ -39,29 +33,7 @@ const StyledLogoWrapper = styled.div`
   position: relative;
 `;
 
-const modifierStyles: Record<string, SerializedStyles> = {
-  large: css`
-    width: 287px;
-  `,
-  white: css`
-    svg {
-      fill: ${colors.white};
-    }
-  `,
-};
-
-export const Logo = ({ name = true, to, cssModifier, color, large = false, locale, label }: Props) => {
-  const modifiers = useMemo(() => {
-    const mods = [];
-    if (large) {
-      mods.push(modifierStyles.large);
-    }
-    if (cssModifier && modifierStyles[cssModifier]) {
-      mods.push(modifierStyles[cssModifier]);
-    }
-    return mods;
-  }, [large, cssModifier]);
-
+export const Logo = ({ name = true, to, color, locale, label }: Props) => {
   const logo = to ? (
     <SafeLink to={to} aria-label={label} title={label}>
       <SvgLogo name={name} color={color} locale={locale} />
@@ -69,7 +41,7 @@ export const Logo = ({ name = true, to, cssModifier, color, large = false, local
   ) : (
     <SvgLogo name={name} color={color} locale={locale} />
   );
-  return <StyledLogoWrapper css={modifiers}>{logo}</StyledLogoWrapper>;
+  return <StyledLogoWrapper>{logo}</StyledLogoWrapper>;
 };
 
 export default Logo;

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { CSSProperties, Children, ComponentProps, ReactNode, useMemo, useState } from "react";
+import { Children, ComponentPropsWithoutRef, ReactNode, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { CardContent, CardHeading, CardRoot, Text, Heading, Button } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
-import { Heading, HeadingLevel, Text } from "@ndla/typography";
-import ContentTypeBadge from "../ContentTypeBadge";
+import { styled } from "@ndla/styled-system/jsx";
+import { linkOverlay } from "@ndla/styled-system/patterns";
+import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import { contentTypes } from "../model/ContentType";
+import { HeadingLevel } from "../types";
 
 interface RelatedArticleProps {
   title: string;
@@ -25,45 +25,6 @@ interface RelatedArticleProps {
   type?: string;
 }
 
-const TitleWrapper = styled.div`
-  display: flex;
-  gap: ${spacing.small};
-  align-items: flex-start;
-  div {
-    min-width: 34px;
-    min-height: 34px;
-    max-width: 34px;
-    max-height: 34px;
-  }
-`;
-
-const StyledRelatedArticle = styled.article`
-  border-left: 6px solid var(--border-color, ${colors.brand.greyLight});
-  flex-grow: 0;
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.xsmall};
-  padding: 0px ${spacing.normal} 0px ${spacing.normal};
-`;
-
-const LinkInfo = styled(Text)`
-  font-weight: ${fonts.weight.bold};
-`;
-
-const LinkText = styled(Text)`
-  font-weight: ${fonts.weight.semibold};
-`;
-
-const colorMap = {
-  [contentTypes.SUBJECT_MATERIAL]: colors.subjectMaterial.light,
-  [contentTypes.TASKS_AND_ACTIVITIES]: colors.tasksAndActivities.background,
-  [contentTypes.ASSESSMENT_RESOURCES]: colors.assessmentResource.background,
-  [contentTypes.CONCEPT]: colors.concept.light,
-  [contentTypes.SOURCE_MATERIAL]: colors.sourceMaterial.light,
-  [contentTypes.LEARNING_PATH]: colors.learningPath.background,
-  [contentTypes.SUBJECT]: colors.subject.light,
-};
-
 export const RelatedArticle = ({
   title,
   introduction,
@@ -73,59 +34,79 @@ export const RelatedArticle = ({
   type = contentTypes.SUBJECT_MATERIAL,
 }: RelatedArticleProps) => {
   return (
-    <StyledRelatedArticle style={{ "--border-color": colorMap[type] } as CSSProperties}>
-      <TitleWrapper>
-        <ContentTypeBadge type={type} background size="small" />
-        <LinkText element="span" textStyle="meta-text-medium" margin="none">
-          <SafeLink to={to} target={target} rel={linkInfo ? "noopener noreferrer" : undefined}>
-            {title}
-          </SafeLink>
-        </LinkText>
-      </TitleWrapper>
-      <Text textStyle="meta-text-small" margin="none" dangerouslySetInnerHTML={{ __html: introduction }} />
-      <LinkInfo textStyle="content" margin="none">
-        {linkInfo}
-      </LinkInfo>
-    </StyledRelatedArticle>
+    <CardRoot>
+      <CardContent>
+        <ContentTypeBadge contentType={type} />
+        <CardHeading asChild consumeCss>
+          <span>
+            <SafeLink
+              unstyled
+              to={to}
+              target={target}
+              rel={linkInfo ? "noopener noreferrer" : undefined}
+              css={linkOverlay.raw()}
+            >
+              {title}
+            </SafeLink>
+          </span>
+        </CardHeading>
+        <Text dangerouslySetInnerHTML={{ __html: introduction }} />
+        <Text color="text.subtle" textStyle="label.small">
+          {linkInfo}
+        </Text>
+      </CardContent>
+    </CardRoot>
   );
 };
 
-const HeadingWrapper = styled.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  align-self: flex-start;
-`;
+const HeadingWrapper = styled("div", {
+  base: {
+    display: "flex",
+    width: "100%",
+    justifyContent: "space-between",
+    alignItems: "center",
+    alignSelf: "flex-start",
+  },
+});
+
+const ArticlesWrapper = styled("div", {
+  base: {
+    display: "grid",
+    width: "100%",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "medium",
+    tabletDown: {
+      gridTemplateColumns: "1fr",
+    },
+  },
+});
 
-const ArticlesWrapper = styled.div`
-  display: grid;
-  width: 100%;
-  grid-template-columns: repeat(2, 1fr);
-  row-gap: ${spacing.large};
-  ${mq.range({ until: breakpoints.tablet })} {
-    grid-template-columns: 1fr;
-  }
-`;
+const StyledSection = styled("section", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "xsmall",
+  },
+});
 
-interface Props extends ComponentProps<"section"> {
+const StyledButton = styled(Button, {
+  base: {
+    marginBlockStart: "xsmall",
+  },
+});
+
+interface Props extends ComponentPropsWithoutRef<"section"> {
   children?: JSX.Element[];
   articleCount?: number;
   headingLevel?: HeadingLevel;
   headingButtons?: ReactNode;
 }
 
-const StyledSection = styled.section`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: ${spacing.normal};
-`;
-
 export const RelatedArticleList = ({
   children = [],
   articleCount,
-  headingLevel = "h2",
+  headingLevel: HeadingElement = "h2",
   headingButtons,
   ...rest
 }: Props) => {
@@ -140,16 +121,16 @@ export const RelatedArticleList = ({
   return (
     <StyledSection {...rest}>
       <HeadingWrapper>
-        <Heading element={headingLevel} margin="none" headingStyle="list-title">
-          {t("related.title")}
+        <Heading asChild consumeCss textStyle="title.large" fontWeight="bold">
+          <HeadingElement>{t("related.title")}</HeadingElement>
         </Heading>
         {headingButtons}
       </HeadingWrapper>
       <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>
       {childCount > 2 ? (
-        <ButtonV2 onClick={() => setExpanded((p) => !p)} variant="outline">
+        <StyledButton variant="secondary" onClick={() => setExpanded((p) => !p)}>
           {t(`related.show${expanded ? "Less" : "More"}`)}
-        </ButtonV2>
+        </StyledButton>
       ) : null}
     </StyledSection>
   );

package/src/ResourceBox/ResourceBox.tsx

@@ -6,65 +6,63 @@
  *
  */
 
-import styled from "@emotion/styled";
-import { breakpoints, fonts, mq, colors, spacing } from "@ndla/core";
 import { Launch } from "@ndla/icons/common";
-import { Image } from "@ndla/primitives";
+import { Heading, Image, Text } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
+import { token } from "@ndla/styled-system/tokens";
 
-const ResourceBoxContainer = styled.div`
-  display: flex;
-  position: relative;
-  padding: ${spacing.nsmall};
-  border-radius: 5px;
-  border: 1px solid ${colors.brand.light};
-  font-family: ${fonts.sans};
-  box-shadow: 0px 20px 35px -15px rgba(32, 88, 143, 0.15);
-  gap: ${spacing.medium};
+const Container = styled("div", {
+  base: {
+    display: "flex",
+    padding: "medium",
+    borderRadius: "xsmall",
+    border: "1px solid",
+    borderColor: "stroke.default",
+    boxShadow: "full",
+    gap: "medium",
+    tabletWideDown: {
+      padding: "xsmall",
+    },
+    tabletDown: {
+      flexDirection: "column",
+      gap: "0",
+      padding: "0",
+    },
+  },
+});
 
-  ${mq.range({ until: breakpoints.desktop })} {
-    gap: 0;
-    flex-direction: column;
-    padding-top: ${spacing.medium};
-    text-align: center;
-  }
-`;
+const ContentWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "xsmall",
+    flex: "1",
+    tabletDown: {
+      padding: "xsmall",
+    },
+  },
+});
 
-const Title = styled.h3`
-  font-weight: ${fonts.weight.bold};
-  ${fonts.sizes(18)};
-  margin-top: 0;
-`;
+const StyledImage = styled(Image, {
+  base: {
+    objectFit: "cover",
+    borderRadius: "xsmall",
+    width: "fit-content",
+    aspectRatio: "1/1",
+    tabletDown: {
+      width: "100%",
+      borderRadius: "0",
+    },
+  },
+});
 
-const Caption = styled.p`
-  ${fonts.sizes(14)};
-`;
-
-const ContentWrapper = styled.div`
-  flex-basis: 0;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  ${mq.range({ until: breakpoints.desktop })} {
-    align-items: center;
-    padding-top: ${spacing.small};
-  }
-`;
-
-const StyledImage = styled(Image)`
-  && {
-    object-fit: cover;
-    width: 134px;
-    height: 134px;
-    border-radius: 5px;
-
-    ${mq.range({ until: breakpoints.desktop })} {
-      width: 200px;
-      height: 200px;
-    }
-  }
-`;
+const StyledText = styled(Text, {
+  base: {
+    flex: "1",
+  },
+});
 
 interface ImageMeta {
   src: string;
@@ -81,17 +79,23 @@ interface Props {
 
 export const ResourceBox = ({ image, title, caption, url, buttonText }: Props) => {
   return (
-    <ResourceBoxContainer>
-      <StyledImage src={image.src} alt={image.alt} />
+    <Container>
+      <StyledImage
+        src={image.src}
+        alt={image.alt}
+        sizes={`(min-width: ${token("breakpoints.desktop")}) 150px, (max-width: ${token("breakpoints.tablet")} ) 400px, 200px`}
+      />
       <ContentWrapper>
-        <Title>{title}</Title>
-        <Caption>{caption}</Caption>
+        <Heading textStyle="label.large" fontWeight="bold" asChild consumeCss>
+          <h3>{title}</h3>
+        </Heading>
+        <StyledText textStyle="body.medium">{caption}</StyledText>
         <SafeLinkButton to={url} target="_blank" variant="secondary">
           {buttonText}
-          <Launch aria-hidden />
+          <Launch />
         </SafeLinkButton>
       </ContentWrapper>
-    </ResourceBoxContainer>
+    </Container>
   );
 };