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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "55.0.15-alpha.0",
+  "version": "55.0.17-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,17 +33,16 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^5.0.7-alpha.0",
-    "@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",
@@ -66,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",
@@ -79,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3675a902b9f44f5afb37c648038b8d90f1ccd7d0"
+  "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/ArticleByline.tsx

@@ -10,44 +10,54 @@ import { TFunction } from "i18next";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
-import styled from "@emotion/styled";
-import { AccordionRoot, AccordionHeader, AccordionContent, AccordionItem } from "@ndla/accordion";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { ChevronDown } from "@ndla/icons/common";
 import { getLicenseByAbbreviation } from "@ndla/licenses";
+import {
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemIndicator,
+  AccordionItemTrigger,
+  AccordionRoot,
+  Heading,
+} from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import ArticleFootNotes from "./ArticleFootNotes";
 import { LicenseLink } from "../LicenseByline/LicenseLink";
 import { FootNote } from "../types";
 
-const Wrapper = styled.div`
-  margin-top: ${spacing.normal};
-  padding-top: ${spacing.normal};
-  padding-bottom: ${spacing.xsmall};
-  border-top: 1px solid ${colors.brand.greyLight};
-  ${fonts.sizes("16px", "24px")};
-  font-family: ${fonts.sans};
-  color: ${colors.brand.greyDark};
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  padding-bottom: ${spacing.mediumlarge};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    flex-direction: column;
-    flex-direction: column-reverse;
-    gap: ${spacing.xsmall};
-  }
-  &[data-learning-path="true"] {
-    flex-direction: column;
-    flex-direction: column-reverse;
-    gap: ${spacing.xsmall};
-  }
-`;
-
-const PrimaryContributorsWrapper = styled.span`
-  margin-left: ${spacing.xxsmall};
-`;
+const Wrapper = styled("div", {
+  base: {
+    // TODO: Figure out if we want to remove this margin. It's only here to add some gap between the article content and the byline.
+    marginBlockStart: "medium",
+    paddingBlockStart: "xsmall",
+    borderTop: "1px solid",
+    borderColor: "stroke.subtle",
+  },
+});
+
+// TODO: This is designed with 24px of inline padding. If you do this, most bylines will break into two lines.
+// Should reconsider.
+const TextWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column-reverse",
+    gap: "3xsmall",
+    width: "100%",
+    justifyContent: "space-between",
+    paddingBlock: "xsmall",
+    textStyle: "body.medium",
+  },
+  variants: {
+    learningpath: {
+      true: {},
+      false: {
+        tabletWide: {
+          flexDirection: "row",
+        },
+      },
+    },
+  },
+});
 
 type AuthorProps = {
   name: string;
@@ -57,8 +67,6 @@ type SupplierProps = {
   name: string;
 };
 
-type AccordionHeaderVariants = "white" | "blue";
-
 type Props = {
   authors?: AuthorProps[];
   suppliers?: SupplierProps[];
@@ -67,7 +75,6 @@ type Props = {
   licenseBox?: ReactNode;
   locale?: string;
   footnotes?: FootNote[];
-  accordionHeaderVariant?: AccordionHeaderVariants;
   displayByline?: boolean;
   bylineType?: "article" | "learningPath";
 };
@@ -96,27 +103,18 @@ const getSuppliersText = (suppliers: SupplierProps[], t: TFunction) => {
       });
 };
 
-const LicenseWrapper = styled.div`
-  display: flex;
-  gap: ${spacing.small};
-  padding-right: ${spacing.xsmall};
-`;
+const LicenseWrapper = styled("div", {
+  base: {
+    display: "flex",
+    gap: "xsmall",
+  },
+});
 
-const StyledAccordionHeader = styled(AccordionHeader)`
-  background-color: ${colors.brand.lightest};
-  ${fonts.sizes("16px", "29px")};
-  font-weight: ${fonts.weight.semibold};
-
-  &[data-background-color="white"][data-state="closed"] {
-    background-color: ${colors.background.default};
-  }
-`;
-
-const StyledAccordionContent = styled(AccordionContent)`
-  &[data-background-color="white"] {
-    background-color: ${colors.background.default};
-  }
-`;
+const StyledAccordionRoot = styled(AccordionRoot, {
+  base: {
+    paddingBlockStart: "xxlarge",
+  },
+});
 
 const refRegexp = /note\d/;
 const footnotesAccordionId = "footnotes";
@@ -129,7 +127,6 @@ const ArticleByline = ({
   licenseBox,
   published,
   locale,
-  accordionHeaderVariant = "blue",
   displayByline = true,
   bylineType = "article",
 }: Props) => {
@@ -167,18 +164,18 @@ const ArticleByline = ({
   return (
     <Wrapper>
       {displayByline && (
-        <TextWrapper data-learning-path={bylineType === "learningPath"}>
+        <TextWrapper learningpath={bylineType === "learningPath"}>
           <LicenseWrapper>
             {license && <LicenseLink license={license} />}
             {showPrimaryContributors && (
-              <PrimaryContributorsWrapper>
+              <span>
                 {authors.length > 0 &&
                   `${t("article.authorsLabel", {
                     names: renderContributors(authors, t),
                     interpolation: { escapeValue: false },
                   })}. `}
                 {getSuppliersText(suppliers, t)}
-              </PrimaryContributorsWrapper>
+              </span>
             )}
           </LicenseWrapper>
           <div>
@@ -186,25 +183,41 @@ const ArticleByline = ({
           </div>
         </TextWrapper>
       )}
-      <AccordionRoot type="multiple" onValueChange={setOpenAccordions} value={openAccordions}>
+      <StyledAccordionRoot
+        multiple
+        value={openAccordions}
+        onValueChange={(details) => setOpenAccordions(details.value)}
+      >
         {licenseBox && (
           <AccordionItem value={accordionItemValue}>
-            <StyledAccordionHeader headingLevel="h2" data-background-color={accordionHeaderVariant}>
-              {t("article.useContent")}
-            </StyledAccordionHeader>
-            <StyledAccordionContent data-background-color={accordionHeaderVariant}>{licenseBox}</StyledAccordionContent>
+            <AccordionItemTrigger>
+              <Heading asChild consumeCss textStyle="label.medium" fontWeight="bold">
+                <h2>{t("article.useContent")}</h2>
+              </Heading>
+              <AccordionItemIndicator asChild>
+                <ChevronDown />
+              </AccordionItemIndicator>
+            </AccordionItemTrigger>
+            <AccordionItemContent>{licenseBox}</AccordionItemContent>
           </AccordionItem>
         )}
 
         {!!footnotes?.length && (
           <AccordionItem value={footnotesAccordionId}>
-            <StyledAccordionHeader headingLevel="h2">{t("article.footnotes")}</StyledAccordionHeader>
-            <StyledAccordionContent forceMount data-background-color={accordionHeaderVariant}>
+            <AccordionItemTrigger>
+              <Heading asChild consumeCss textStyle="label.medium" fontWeight="bold">
+                <h2>{t("article.footnotes")}</h2>
+              </Heading>
+              <AccordionItemIndicator asChild>
+                <ChevronDown />
+              </AccordionItemIndicator>
+            </AccordionItemTrigger>
+            <AccordionItemContent>
               <ArticleFootNotes footNotes={footnotes} />
-            </StyledAccordionContent>
+            </AccordionItemContent>
           </AccordionItem>
         )}
-      </AccordionRoot>
+      </StyledAccordionRoot>
     </Wrapper>
   );
 };