@ndla/ui 55.0.15-alpha.0 → 55.0.17-alpha.0

package/src/Article/ArticleFootNotes.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import styled from "@emotion/styled";
-import { colors, spacing } from "@ndla/core";
+import { Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { FootNote as FootNoteType } from "../types";
 
 const citeDetailString = (description: string | undefined) => (description ? `${description}. ` : "");
@@ -16,36 +16,32 @@ type FootNoteProps = {
   footNote: FootNoteType;
 };
 
-const Cite = styled.cite`
-  display: flex;
-  gap: ${spacing.small};
-  a {
-    box-shadow: none;
-    text-decoration: underline;
-    text-underline-offset: ${spacing.xxsmall};
-    &:hover,
-    &:focus-visible {
-      text-decoration: none;
-    }
-  }
-`;
+const StyledCite = styled("cite", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "xsmall",
+  },
+});
 
 const FootNote = ({ footNote }: FootNoteProps) => (
   <li>
-    <Cite id={`note${footNote.ref}`}>
-      <a href={`#ref${footNote.ref}`} target="_self">
-        {footNote.ref}
-      </a>
-      {`«${footNote.title}». ${footNote.authors.join(" ")}. ${citeDetailString(footNote.edition)}${citeDetailString(
-        footNote.publisher,
-      )}${footNote.year}. `}
-      {footNote.url ? (
-        <a href={footNote.url}>
-          {footNote.url}
-          {"."}
+    <Text id={`note${footNote.ref}`} asChild consumeCss textStyle="body.medium">
+      <StyledCite>
+        <a href={`#ref${footNote.ref}`} target="_self">
+          {footNote.ref}
         </a>
-      ) : null}
-    </Cite>
+        {`«${footNote.title}». ${footNote.authors.join(" ")}. ${citeDetailString(footNote.edition)}${citeDetailString(
+          footNote.publisher,
+        )}${footNote.year}. `}
+        {footNote.url ? (
+          <a href={footNote.url}>
+            {footNote.url}
+            {"."}
+          </a>
+        ) : null}
+      </StyledCite>
+    </Text>
   </li>
 );
 
@@ -53,14 +49,14 @@ type ArticleFootNotesProps = {
   footNotes: Array<FootNoteType>;
 };
 
-const FootnoteList = styled.ol`
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  padding: ${spacing.small};
-  color: ${colors.text.light};
-`;
+const FootnoteList = styled("ol", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "medium",
+    listStyle: "none",
+  },
+});
 
 const ArticleFootNotes = ({ footNotes }: ArticleFootNotesProps) => (
   <FootnoteList>

package/src/Article/index.ts

@@ -6,14 +6,10 @@
  *
  */
 
-import Article, { ArticleTitle, ArticleIntroduction, ArticleWrapper } from "./Article";
 import ArticleByline from "./ArticleByline";
 import ArticleFootNotes from "./ArticleFootNotes";
-import ArticleHeaderWrapper from "./ArticleHeaderWrapper";
 
-export { ArticleByline, ArticleFootNotes, ArticleHeaderWrapper, ArticleTitle, ArticleIntroduction, ArticleWrapper };
-export { ArticleParagraph } from "./ArticleParagraph";
-
-export type { ArticleModifier } from "./Article";
+export { Article, ArticleContent, ArticleWrapper, ArticleHeader, ArticleFooter } from "./Article";
 
-export default Article;
+export { ArticleByline, ArticleFootNotes };
+export { ArticleParagraph } from "./ArticleParagraph";

package/src/Breadcrumb/Breadcrumb.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { ReactNode, useRef } from "react";
+import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
+import { styled } from "@ndla/styled-system/jsx";
 import BreadcrumbItem, { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
 
 interface Props {
@@ -19,26 +19,28 @@ interface Props {
   renderSeparator?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
 }
 
-const BreadcrumbNav = styled.nav``;
-
-const StyledList = styled.ol`
-  display: inline-block;
-  padding-left: 0;
-  margin-bottom: 0;
-  margin-top: 0;
-  list-style: none;
-`;
+const StyledList = styled("ol", {
+  base: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    listStyle: "none",
+    gap: "xsmall",
+    mobileDown: {
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+      gap: "xxsmall",
+    },
+  },
+});
 
 const Breadcrumb = ({ items, renderItem, renderSeparator, collapseFirst, collapseLast = true }: Props) => {
   const { t } = useTranslation();
-  const olRef = useRef<any>();
-  const containerRef = useRef<HTMLDivElement>(null);
-  // No idiomatic way of dealing with sets of refs yet
-  // See: https://github.com/facebook/react/issues/14072#issuecomment-446777406
 
   return (
-    <BreadcrumbNav ref={containerRef} aria-label={t("breadcrumb.breadcrumb")}>
-      <StyledList ref={olRef}>
+    <nav aria-label={t("breadcrumb.breadcrumb")}>
+      <StyledList>
         {items.map((item, index) => (
           <BreadcrumbItem
             renderItem={renderItem}
@@ -60,7 +62,7 @@ const Breadcrumb = ({ items, renderItem, renderSeparator, collapseFirst, collaps
           />
         ))}
       </StyledList>
-    </BreadcrumbNav>
+    </nav>
   );
 };
 

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -7,10 +7,9 @@
  */
 
 import { useRef, useImperativeHandle, ReactNode, forwardRef } from "react";
-import styled from "@emotion/styled";
-import { mq, spacing, breakpoints } from "@ndla/core";
 import { ChevronRight } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
 
 export interface SimpleBreadcrumbItem {
   to: string | Partial<Location>;
@@ -26,35 +25,17 @@ export interface BreadcrumbRenderProps {
   totalCount: number;
 }
 
-interface AutoCollapseProps {
-  autoCollapse?: boolean;
-}
-
-const StyledListItem = styled.li<AutoCollapseProps>`
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  :before {
-    display: none;
-  }
-  ${mq.range({ until: breakpoints.tablet })} {
-    display: block;
-  }
-`;
-
-const CollapseContainer = styled.div`
-  display: inline-block;
-  color: inherit;
-`;
-
-const StyledChevron = styled(ChevronRight)`
-  margin: ${spacing.xxsmall};
-  color: inherit;
-`;
-
-const StyledSafeLink = styled(SafeLink)`
-  color: inherit;
-`;
+const StyledListItem = styled("li", {
+  base: {
+    display: "flex",
+    color: "inherit",
+    gap: "4xsmall",
+    alignItems: "flex-end",
+    tabletDown: {
+      display: "block",
+    },
+  },
+});
 
 interface Props {
   item: IndexedBreadcrumbItem;
@@ -64,35 +45,31 @@ interface Props {
   renderSeparator?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
 }
 
-const BreadcrumbItem = forwardRef<any, Props>(
-  ({ renderItem, renderSeparator, item, totalCount, autoCollapse }, ref) => {
-    const liRef = useRef<any>();
+const BreadcrumbItem = forwardRef<any, Props>(({ renderItem, renderSeparator, item, totalCount }, ref) => {
+  const liRef = useRef<any>();
 
-    useImperativeHandle(ref, () => ({
-      setMaxWidth: (maxWidth: number) => {
-        liRef.current.children[0].style.maxWidth = maxWidth;
-      },
-    }));
+  useImperativeHandle(ref, () => ({
+    setMaxWidth: (maxWidth: number) => {
+      liRef.current.children[0].style.maxWidth = maxWidth;
+    },
+  }));
 
-    const { to, name, index } = item;
-    const isLast = index === totalCount - 1;
-    return (
-      <StyledListItem ref={liRef} autoCollapse={autoCollapse} aria-current={isLast ? "page" : undefined}>
-        <CollapseContainer>
-          {renderItem ? (
-            renderItem(item, totalCount)
-          ) : isLast ? (
-            <span>{name}</span>
-          ) : (
-            <StyledSafeLink to={to}>
-              <span>{name}</span>
-            </StyledSafeLink>
-          )}
-        </CollapseContainer>
-        {renderSeparator ? renderSeparator(item, totalCount) : !isLast && <StyledChevron />}
-      </StyledListItem>
-    );
-  },
-);
+  const { to, name, index } = item;
+  const isLast = index === totalCount - 1;
+  return (
+    <StyledListItem ref={liRef} aria-current={isLast ? "page" : undefined}>
+      {renderItem ? (
+        renderItem(item, totalCount)
+      ) : isLast ? (
+        <span>{name}</span>
+      ) : (
+        <SafeLink to={to}>
+          <span>{name}</span>
+        </SafeLink>
+      )}
+      {renderSeparator ? renderSeparator(item, totalCount) : !isLast && <ChevronRight />}
+    </StyledListItem>
+  );
+});
 
 export default BreadcrumbItem;

package/src/Breadcrumb/HomeBreadcrumb.stories.tsx

@@ -7,7 +7,6 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
-import { colors } from "@ndla/core";
 import HomeBreadcrumb from "./HomeBreadcrumb";
 
 const items = [
@@ -42,14 +41,3 @@ export default {
 } as Meta<typeof HomeBreadcrumb>;
 
 export const Default: StoryObj<typeof HomeBreadcrumb> = {};
-
-export const Light: StoryObj<typeof HomeBreadcrumb> = {
-  args: { light: true },
-  decorators: [
-    (Story) => (
-      <div style={{ backgroundColor: colors.brand.primary }}>
-        <Story />
-      </div>
-    ),
-  ],
-};

package/src/Breadcrumb/HomeBreadcrumb.tsx

@@ -6,69 +6,56 @@
  *
  */
 
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
 import { ChevronRight, Home } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
 import Breadcrumb from "./Breadcrumb";
 import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
 
-interface ThemeProps {
-  light: boolean | undefined;
-}
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    color: "inherit",
+    textDecoration: "underline",
+    _hover: {
+      textDecoration: "none",
+    },
+    _focusVisible: {
+      textDecoration: "none",
+    },
+  },
+});
 
-const StyledSeparator = styled.div<ThemeProps>`
-  ${fonts.sizes("14px")};
-  margin: 0 ${spacing.small};
-  user-select: none;
-  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
-  ${mq.range({ until: breakpoints.tablet })} {
-    display: none;
-  }
-`;
+const StyledChevronRight = styled(ChevronRight, {
+  base: {
+    tabletDown: {
+      display: "none",
+    },
+  },
+});
 
-const StyledIconSafeLink = styled(SafeLink)`
-  box-shadow: none;
-  border-bottom: none;
-`;
-const StyledHome = styled(Home)<ThemeProps>`
-  width: 20px;
-  height: 20px;
-  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
-`;
-const StyledRightChevron = styled(ChevronRight)<ThemeProps>`
-  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
-  margin: ${spacing.xxsmall};
-`;
-const StyledSpan = styled.span<ThemeProps>`
-  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
-`;
-const StyledSafeLink = styled(SafeLink)<ThemeProps>`
-  color: ${({ light }) => (light ? colors.white : colors.text.primary)};
-`;
+const IconSafeLink = styled(SafeLink, {
+  base: {
+    color: "inherit",
+  },
+});
 
 interface Props {
   items: SimpleBreadcrumbItem[];
-  light?: boolean;
 }
 
-const HomeBreadcrumb = ({ items, light }: Props) => {
+const HomeBreadcrumb = ({ items }: Props) => {
   const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {
     if (item.index === totalCount - 1) {
-      return <StyledSpan light={light}>{item.name}</StyledSpan>;
+      return <span>{item.name}</span>;
     }
     if (item.index === 0 && typeof item.name === "string") {
       return (
-        <StyledIconSafeLink aria-label={item.name} to={item.to}>
-          <StyledHome title={item.name} light={light} />
-        </StyledIconSafeLink>
+        <IconSafeLink aria-label={item.name} to={item.to}>
+          <Home title={item.name} />
+        </IconSafeLink>
       );
     }
-    return (
-      <StyledSafeLink light={light} to={item.to}>
-        {item.name}
-      </StyledSafeLink>
-    );
+    return <StyledSafeLink to={item.to}>{item.name}</StyledSafeLink>;
   };
 
   const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {
@@ -76,9 +63,9 @@ const HomeBreadcrumb = ({ items, light }: Props) => {
       return null;
     }
     if (item.index === 0) {
-      return <StyledSeparator light={light}>|</StyledSeparator>;
+      return <StyledChevronRight />;
     }
-    return <StyledRightChevron light={light} />;
+    return <ChevronRight />;
   };
 
   return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;

package/src/ContactBlock/{Contactblock.stories.tsx → ContactBlock.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,7 +7,7 @@
  */
 
 import { Meta, StoryFn } from "@storybook/react";
-import ContactBlock from "./ContactBlock";
+import { ContactBlock } from "./ContactBlock";
 
 export default {
   title: "Components/Contact block",
@@ -76,8 +76,7 @@ export default {
       "Sigurd har variert ledererfaring fra utdanningssektoren, både fra videregående skole, nasjonalt senter og fra universitets/høgskolesektoren. Ansvarsområdene dekker bl.a. utdanning/opplæring/studiekvalitet, økonomi, HR, stratgi og IT-utvikling/-drift.",
     name: "Sigurd Trageton",
     email: "sigurd@ndla.no",
-    blobColor: "green",
-    blob: "pointy",
+    backgroundColor: "strong",
   },
 } as Meta<typeof ContactBlock>;