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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "55.0.16-alpha.0",
+  "version": "55.0.17-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,16 +33,16 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^14.0.7-alpha.0",
+    "@ndla/button": "^14.0.8-alpha.0",
     "@ndla/core": "^5.0.1",
     "@ndla/dropdown-menu": "^1.0.38",
-    "@ndla/forms": "^9.0.8-alpha.0",
+    "@ndla/forms": "^9.0.9-alpha.0",
     "@ndla/hooks": "^2.1.8",
-    "@ndla/icons": "^7.0.8-alpha.0",
+    "@ndla/icons": "^7.0.9-alpha.0",
     "@ndla/licenses": "^8.0.0-alpha.0",
-    "@ndla/modal": "^7.0.7-alpha.0",
-    "@ndla/primitives": "^0.0.19",
-    "@ndla/safelink": "^6.0.2-alpha.0",
+    "@ndla/modal": "^7.0.8-alpha.0",
+    "@ndla/primitives": "^0.0.20",
+    "@ndla/safelink": "^6.0.3-alpha.0",
     "@ndla/styled-system": "^0.0.8",
     "@ndla/tooltip": "^8.0.1",
     "@ndla/typography": "^0.4.23",
@@ -65,9 +65,9 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.11",
+    "@ndla/preset-panda": "^0.0.12",
     "@ndla/types-backend": "^0.2.86",
-    "@ndla/types-embed": "^4.1.8",
+    "@ndla/types-embed": "^5.0.0-alpha.0",
     "@pandacss/dev": "^0.42.0",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
@@ -78,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b05b7016560891b2867811c4420041e6932003cc"
+  "gitHead": "557f718324916e39e3b04d6a7196679d31056e00"
 }

package/src/Article/Article.tsx

@@ -6,226 +6,102 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
-import { ReactNode, forwardRef, ComponentPropsWithRef, useMemo, CSSProperties } from "react";
-import { SerializedStyles, css } from "@emotion/react";
-import styled from "@emotion/styled";
-
-import { spacing, mq, breakpoints, fonts, colors, spacingUnit } from "@ndla/core";
-import { Heading, Text } from "@ndla/typography";
+import { ReactNode } from "react";
+import { Heading, Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import ArticleByline from "./ArticleByline";
-import ArticleHeaderWrapper from "./ArticleHeaderWrapper";
-import LayoutItem from "../Layout";
-import MessageBox from "../Messages/MessageBox";
+import { ContentTypeBadgeNew } from "..";
+import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import { Article as ArticleType } from "../types";
 
-export type ArticleModifier =
-  | "clean"
-  | "in-topic"
-  | "subject-material"
-  | "assessment-resources"
-  | "tasks-and-activities"
-  | "concept"
-  | "source-material";
-
-interface ArticleWrapperProps extends ComponentPropsWithRef<"article"> {
-  modifier?: ArticleModifier;
-}
-
-const StyledArticle = styled.article`
-  font-family: ${fonts.serif};
-  background: ${colors.white};
-  margin-top: ${spacing.large};
-  margin-right: auto;
-  margin-bottom: ${spacing.normal};
-  margin-left: auto;
-  overflow-wrap: break-word;
-  ${fonts.sizes("18px", "29px")};
-  position: relative;
-
-  mjx-stretchy-v > mjx-ext > mjx-c {
-    transform: scaleY(100) translateY(0.075em);
-  }
-
-  > section > p {
-    &:not([class]) {
-      margin-bottom: 29px;
-    }
-  }
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes("18px", "29px")}; //This is probably not needed, but it's here to be sure.
-
-    > section > p {
-      &:not([class]) {
-        margin-bottom: 35px;
-      }
-    }
-    padding: 0 ${spacing.normal} ${spacing.normal};
-    margin-bottom: ${spacing.large};
-    margin-top: -${spacingUnit * 6}px;
-    padding-top: ${spacing.xlarge};
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    padding-bottom: ${spacing.large};
-    margin-bottom: ${spacing.large};
-  }
-
-  &::after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-  p {
-    margin-top: 0;
-  }
-`;
-
-// Make sure to wrap modifiers in & {} to avoid specificity issues
-const articleModifiers: Partial<Record<ArticleModifier, SerializedStyles>> = {
-  clean: css`
-    & {
-      margin-top: ${spacing.normal} !important;
-      padding: ${spacing.small} !important;
-      ${mq.range({ from: breakpoints.tablet })} {
-        padding: 0 !important;
-      }
-      border: none;
-    }
-  `,
-  "in-topic": css`
-    & {
-      margin-top: 0 !important;
-      padding: 0 !important;
-      padding-left: ${spacing.medium} !important;
-    }
-  `,
-};
-
-const borderCss = css`
-  ${mq.range({ from: breakpoints.tablet })} {
-    border: 2px solid var(--color);
-  }
-`;
-
-export const ArticleWrapper = forwardRef<HTMLElement, ArticleWrapperProps>(({ children, modifier, ...rest }, ref) => {
-  const borderColor = useMemo(() => {
-    let color = undefined;
-    if (modifier === "subject-material") {
-      color = colors.subjectMaterial.light;
-    } else if (modifier === "assessment-resources") {
-      color = colors.assessmentResource.background;
-    } else if (modifier === "tasks-and-activities") {
-      color = colors.tasksAndActivities.background;
-    } else if (modifier === "concept") {
-      color = colors.concept.light;
-    } else if (modifier === "source-material") {
-      color = colors.sourceMaterial.light;
-    }
-    if (color) {
-      return { "--color": color } as CSSProperties;
-    }
-    return undefined;
-  }, [modifier]);
-
-  return (
-    <StyledArticle
-      css={[borderColor ? borderCss : undefined, modifier ? articleModifiers[modifier] : undefined]}
-      style={borderColor}
-      {...rest}
-      ref={ref}
-    >
-      {children}
-    </StyledArticle>
-  );
+export const ArticleContent = styled("section", {
+  base: {
+    width: "100%",
+  },
 });
 
-type ArticleTitleProps = {
-  icon?: ReactNode;
-  label?: string;
-  children: ReactNode;
-  id: string;
-  lang?: string;
-};
-
-const TitleLabelText = styled(Text)`
-  color: #757575;
-  text-transform: uppercase;
-  font-family: ${fonts.sans};
-`;
-
-const ArticleTitleWrapper = styled.div`
-  display: flex;
-  gap: ${spacing.normal};
-  align-items: flex-start;
-  h1 {
-    overflow-wrap: anywhere;
-  }
-  padding-bottom: ${spacing.medium};
-  [data-badge] {
-    flex-shrink: 0;
-  }
-`;
-
-export const ArticleTitle = ({ children, icon, label, id, lang }: ArticleTitleProps) => (
-  <ArticleTitleWrapper>
-    {icon}
-    <hgroup>
-      {!!label && (
-        <TitleLabelText textStyle="meta-text-medium" margin="none">
-          {label}
-        </TitleLabelText>
-      )}
-      <Heading element="h1" margin="none" headingStyle="h1-resource" id={id} tabIndex={-1} lang={lang}>
-        {children}
-      </Heading>
-    </hgroup>
-  </ArticleTitleWrapper>
-);
+export const ArticleWrapper = styled("article", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    color: "text.default",
+    gap: "xxlarge",
+    background: "surface.default",
+    paddingBlock: "xsmall",
+    paddingInline: "8%",
+    alignItems: "center",
+    width: "100%",
+    overflowWrap: "break-word",
+    position: "relative",
+    tablet: {
+      paddingBlock: "medium",
+    },
+    desktop: {
+      paddingBlock: "xxlarge",
+    },
+    "& mjx-stretchy-v > mjx-ext > mjx-c": {
+      transform: "scaleY(100) translateY(0.075em)",
+    },
+    _after: {
+      content: "",
+      display: "table",
+      clear: "both",
+    },
+  },
+});
 
-type ArticleIntroductionProps = {
-  children: ReactNode;
-  lang?: string;
-};
+const ArticleTitleWrapper = styled("hgroup", {
+  base: {
+    display: "flex",
+    width: "100%",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "xsmall",
+    "& h1": {
+      overflowWrap: "anywhere",
+    },
+  },
+});
 
-export const ArticleIntroduction = ({ children, lang }: ArticleIntroductionProps) => {
-  if (children) {
-    return (
-      <Text textStyle="ingress" element="div" lang={lang}>
-        {children}
-      </Text>
-    );
-  }
-  return null;
-};
+const ArticleFavoritesButtonWrapper = styled("div", {
+  base: {
+    position: "absolute",
+    right: "8%",
+    top: "xsmall",
+    tablet: {
+      top: "medium",
+    },
+    desktop: {
+      top: "xxlarge",
+    },
+  },
+});
 
-type Messages = {
-  label: string;
-  messageBox?: string;
-};
-const MSGboxWrapper = styled.div`
-  margin-bottom: 50px;
-`;
+export const ArticleHeader = styled("header", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "medium",
+    alignItems: "flex-start",
+    width: "100%",
+  },
+});
 
-const ArticleFavoritesButtonWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  transform: translate(${spacing.xsmall}, -${spacing.normal});
-  ${mq.range({ from: breakpoints.tablet })} {
-    transform: translate(${spacing.normal}, -${spacing.medium});
-  }
-`;
+export const ArticleFooter = styled("footer", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xxlarge",
+    width: "100%",
+  },
+});
 
 type Props = {
   heartButton?: ReactNode;
   article: ArticleType;
-  icon?: ReactNode;
   licenseBox?: ReactNode;
-  modifier?: ArticleModifier;
+  contentType?: ContentType;
   children?: ReactNode;
-  messages: Messages;
-  messageBoxLinks?: [];
   competenceGoals?: ReactNode;
   id: string;
   lang?: string;
@@ -233,11 +109,8 @@ type Props = {
 
 export const Article = ({
   article,
-  icon,
+  contentType,
   licenseBox,
-  modifier,
-  messages,
-  messageBoxLinks,
   children,
   competenceGoals,
   id,
@@ -250,23 +123,24 @@ export const Article = ({
     copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
 
   return (
-    <ArticleWrapper modifier={modifier} data-ndla-article="">
-      <LayoutItem layout="center">
-        {messages.messageBox && (
-          <MSGboxWrapper>
-            <MessageBox links={messageBoxLinks}>{messages.messageBox}</MessageBox>
-          </MSGboxWrapper>
-        )}
-        <ArticleHeaderWrapper competenceGoals={competenceGoals}>
-          {heartButton ? <ArticleFavoritesButtonWrapper>{heartButton}</ArticleFavoritesButtonWrapper> : null}
-          <ArticleTitle id={id} icon={icon} label={messages.label} lang={lang}>
+    <ArticleWrapper data-ndla-article="">
+      <ArticleHeader>
+        <ArticleTitleWrapper>
+          {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
+          {!!heartButton && <ArticleFavoritesButtonWrapper>{heartButton}</ArticleFavoritesButtonWrapper>}
+          <Heading textStyle="heading.large" id={id} tabIndex={-1} lang={lang}>
             {title}
-          </ArticleTitle>
-          <ArticleIntroduction lang={lang}>{introduction}</ArticleIntroduction>
-        </ArticleHeaderWrapper>
-      </LayoutItem>
-      <LayoutItem layout="center">{content}</LayoutItem>
-      <LayoutItem layout="center">
+          </Heading>
+        </ArticleTitleWrapper>
+        {!!introduction && (
+          <Text lang={lang} textStyle="body.xlarge" asChild consumeCss>
+            <div>{introduction}</div>
+          </Text>
+        )}
+        {competenceGoals}
+      </ArticleHeader>
+      <ArticleContent>{content}</ArticleContent>
+      <ArticleFooter>
         <ArticleByline
           footnotes={footNotes}
           authors={authors}
@@ -275,10 +149,8 @@ export const Article = ({
           license={copyright?.license?.license ?? ""}
           licenseBox={licenseBox}
         />
-      </LayoutItem>
-      <LayoutItem layout="extend">{children}</LayoutItem>
+        {children}
+      </ArticleFooter>
     </ArticleWrapper>
   );
 };
-
-export default Article;

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>
-    ),
-  ],
-};