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

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,77 +6,63 @@
  *
  */
 
-import styled from "@emotion/styled";
-import { breakpoints, fonts, mq, colors, spacing } from "@ndla/core";
 import { Launch } from "@ndla/icons/common";
+import { Heading, Image, Text } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
-import Image from "../Image";
+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 StyledButton = styled(SafeLinkButton)`
-  display: flex;
-  gap: ${spacing.xxsmall};
-  align-items: center;
-  border: 1px solid ${colors.brand.tertiary};
-  :hover {
-    background-color: ${colors.brand.primary};
-    border: 1px solid ${colors.brand.primary};
-    color: ${colors.white};
-  }
-`;
-
-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;
@@ -93,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>
-        <StyledButton to={url} target="_blank" variant="outline" shape="pill">
+        <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 />
-        </StyledButton>
+          <Launch />
+        </SafeLinkButton>
       </ContentWrapper>
-    </ResourceBoxContainer>
+    </Container>
   );
 };
 

package/src/Search/ContentTypeResult.tsx

@@ -9,6 +9,7 @@
 /** @jsxImportSource @emotion/react */
 import { ReactElement, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
 import { ButtonV2 } from "@ndla/button";
 import { Additional, ChevronDown, ChevronUp } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
@@ -64,6 +65,12 @@ type Props = {
   unGrouped?: boolean;
 };
 
+const StyledSafeLink = styled(SafeLink)`
+  &[data-highlighted="true"] {
+    ${highlightStyle}
+  }
+`;
+
 const ContentTypeResult = ({
   contentTypeResult,
   onNavigate,
@@ -139,8 +146,7 @@ const ContentTypeResult = ({
 
             return (
               <StyledListItem key={path} delayAnimation={delayAnimation}>
-                <SafeLink
-                  css={shouldHighlight && highlightStyle}
+                <StyledSafeLink
                   data-highlighted={shouldHighlight || false}
                   {...linkProps}
                   onClick={() => {
@@ -154,7 +160,7 @@ const ContentTypeResult = ({
                   )}
                   {linkContent}
                   {renderAdditionalIcon(t("resource.additionalTooltip"), additional)}
-                </SafeLink>
+                </StyledSafeLink>
               </StyledListItem>
             );
           })}

package/src/Search/SearchResultSleeve.tsx

@@ -79,6 +79,9 @@ const StyledSearchLink = styled(SafeLink)`
     color: ${colors.text.light};
     padding-left: ${spacing.xsmall};
   }
+  &[data-highlighted="true"] {
+    ${highlightStyle};
+  }
 `;
 
 type WrapperProps = {
@@ -304,7 +307,7 @@ const SearchResultSleeve = ({
         <div>
           <SearchLinkContainer>
             <StyledSearchLink
-              css={keyboardPathNavigation === GO_TO_SEARCHPAGE && highlightStyle}
+              data-highlighted={keyboardPathNavigation === GO_TO_SEARCHPAGE}
               to={allResultUrl}
               tabIndex={-1}
             >
@@ -314,7 +317,7 @@ const SearchResultSleeve = ({
             </StyledSearchLink>
             {suggestion && suggestionUrl && (
               <StyledSearchLink
-                css={keyboardPathNavigation === GO_TO_SUGGESTION && highlightStyle}
+                data-highlighted={keyboardPathNavigation === GO_TO_SUGGESTION}
                 to={suggestionUrl}
                 tabIndex={-1}
               >

package/src/TagSelector/TagSelector.stories.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023-present, NDLA.
+ * 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.
@@ -7,80 +7,104 @@
  */
 
 import { useState } from "react";
-import styled from "@emotion/styled";
+import type { ComboboxInputValueChangeDetails } from "@ark-ui/react";
+
 import { Meta, StoryFn } from "@storybook/react";
-import TagSelector from "./TagSelector";
+import { Cross } from "@ndla/icons/action";
+import { ChevronDown } from "@ndla/icons/common";
+import { Done } from "@ndla/icons/editor";
+import {
+  ComboboxContent,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxPositioner,
+  IconButton,
+  Input,
+  InputContainer,
+} from "@ndla/primitives";
+import { HStack } from "@ndla/styled-system/jsx";
+import {
+  TagSelectorClearTrigger,
+  TagSelectorControl,
+  TagSelectorInput,
+  TagSelectorLabel,
+  TagSelectorRoot,
+  TagSelectorTrigger,
+} from "./TagSelector";
+import { useTagSelectorTranslations } from "../i18n/useComponentTranslations";
 
-/**
- * Komponent for å tagge noe, primært tiltenkt Min NDLA
- */
 export default {
-  title: "Patterns/TagSelector",
-  component: TagSelector,
+  title: "Components/TagSelector",
+  component: TagSelectorRoot,
   tags: ["autodocs"],
-  parameters: {
-    inlineStories: true,
-  },
-  argTypes: {
-    onChange: { control: false },
-    onCreateTag: { control: false },
-    tags: { control: false },
-    selected: { control: false },
-  },
-  args: {
-    label: "Select tags",
-    labelHidden: false,
-  },
-} as Meta<typeof TagSelector>;
+} satisfies Meta<typeof TagSelectorRoot>;
 
-const Container = styled.div`
-  margin: 10px auto;
-  max-width: 600px;
-  max-height: 300px;
-  display: flex;
-  flex-direction: column;
-`;
+const data = [
+  "BackToSchool",
+  "SchoolLife",
+  "Homework",
+  "SchoolDays",
+  "Classroom",
+  "StudyTime",
+  "TeacherLife",
+  "StudentLife",
+  "SchoolSpirit",
+  "Education",
+];
 
-export const TagSelectorStory: StoryFn<typeof TagSelector> = (args) => {
-  const dummyData = [
-    "Cat",
-    "Dog",
-    "Fish",
-    "Dinosaur",
-    "Frog",
-    "Dragon",
-    "Lion",
-    "Snake",
-    "Alligator",
-    "Antelope",
-    "Bear",
-    "Baboon",
-    "Kangaroo",
-    "Scorpion",
-    "Goose",
-    "Fox",
-    "Donkey",
-    "Chicken",
-  ];
-  const [exampleTags, setExampleTags] = useState<string[]>(dummyData);
-  const [exampleTagsSelected, setExampleTagsSelected] = useState<string[]>(dummyData.slice(0, 0));
+export const Default: StoryFn<typeof TagSelectorRoot> = ({ translations, ...args }) => {
+  const [options, setOptions] = useState(data);
+  const [value, setValue] = useState<string[]>([]);
+  const componentTranslations = useTagSelectorTranslations(translations);
+
+  const handleChange = (e: ComboboxInputValueChangeDetails) => {
+    const filtered = data.filter((item) => item.toLowerCase().includes(e.inputValue.toLowerCase()));
+    setOptions(filtered);
+  };
 
   return (
-    <Container>
-      <TagSelector
-        label={args.label}
-        tags={exampleTags}
-        selected={exampleTagsSelected}
-        onChange={(tags: string[]) => {
-          setExampleTagsSelected(tags);
-        }}
-        onCreateTag={(newTagName: string) => {
-          setExampleTags((prevTags) => [...prevTags, newTagName]);
-          setExampleTagsSelected((prevSelectedTags) => [...prevSelectedTags, newTagName]);
-        }}
-      />
-    </Container>
+    <TagSelectorRoot
+      {...args}
+      value={value}
+      items={options}
+      onInputValueChange={handleChange}
+      onValueChange={(details) => setValue(details.value)}
+      translations={componentTranslations}
+    >
+      <TagSelectorLabel>Emneknagger</TagSelectorLabel>
+      <HStack gap="4xsmall">
+        <TagSelectorControl asChild>
+          <InputContainer>
+            <TagSelectorInput asChild>
+              <Input placeholder="Søk etter emneknagger" />
+            </TagSelectorInput>
+
+            <TagSelectorClearTrigger asChild>
+              <IconButton variant="clear">
+                <Cross />
+              </IconButton>
+            </TagSelectorClearTrigger>
+          </InputContainer>
+        </TagSelectorControl>
+        <TagSelectorTrigger asChild>
+          <IconButton variant="secondary">
+            <ChevronDown />
+          </IconButton>
+        </TagSelectorTrigger>
+      </HStack>
+      <ComboboxPositioner>
+        <ComboboxContent>
+          {options.map((item) => (
+            <ComboboxItem key={item} item={item}>
+              <ComboboxItemText>{item}</ComboboxItemText>
+              <ComboboxItemIndicator>
+                <Done />
+              </ComboboxItemIndicator>
+            </ComboboxItem>
+          ))}
+        </ComboboxContent>
+      </ComboboxPositioner>
+    </TagSelectorRoot>
   );
 };
-
-TagSelectorStory.storyName = "TagSelect";