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

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -7,6 +7,7 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
+import { ExpandableBox, ExpandableBoxSummary, FramedContent } from "@ndla/primitives";
 import { UuDisclaimerEmbedData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
 import IframeEmbed from "./IframeEmbed";
@@ -14,7 +15,6 @@ import UuDisclaimerEmbed from "./UuDisclaimerEmbed";
 import { ArticleWrapper } from "../Article";
 import CopyParagraphButton from "../CopyParagraphButton";
 import FactBox from "../FactBox";
-import FramedContent from "../FramedContent";
 import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: UuDisclaimerEmbedData = {
@@ -143,10 +143,10 @@ export const WithHtml: StoryObj<typeof UuDisclaimerEmbed> = {
     children: (
       <>
         <p>Dette er html med en ekspanderboks</p>
-        <details>
-          <summary>Tittel</summary>
+        <ExpandableBox>
+          <ExpandableBoxSummary>Tittel</ExpandableBoxSummary>
           <p>innhold</p>
-        </details>
+        </ExpandableBox>
       </>
     ),
   },

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -8,36 +8,28 @@
 
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { fonts, spacing } from "@ndla/core";
 import { InformationOutline } from "@ndla/icons/common";
+import { MessageBox } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
 import { UuDisclaimerMetaData } from "@ndla/types-embed";
-import { MessageBox } from "../Messages";
+
 interface Props {
   embed: UuDisclaimerMetaData;
   children?: ReactNode;
 }
 
-const StyledMessageBox = styled(MessageBox)`
-  display: flex;
-  flex-align: center;
-`;
-
-const Disclaimer = styled.div`
-  display: flow;
-  ${fonts.sizes("18px", "24px")};
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-`;
-
-const DisclaimerWrapper = styled.div`
-  > :nth-child(2) {
-    margin-top: ${spacing.xsmall};
-  }
-`;
+const StyledMessageBox = styled(MessageBox, {
+  base: {
+    display: "flex",
+    alignItems: "center",
+  },
+});
+const Disclaimer = styled("div", {
+  base: {
+    textStyle: "body.medium",
+  },
+});
 
 const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   const { t } = useTranslation();
@@ -58,8 +50,8 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   ) : null;
 
   return (
-    <DisclaimerWrapper role="region">
-      <StyledMessageBox type="info" contentEditable={false}>
+    <div role="region">
+      <StyledMessageBox variant="warning" contentEditable={false}>
         <InformationOutline />
         <Disclaimer>
           {embedData.disclaimer}
@@ -67,7 +59,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
         </Disclaimer>
       </StyledMessageBox>
       {children}
-    </DisclaimerWrapper>
+    </div>
   );
 };
 

package/src/Embed/index.ts

@@ -15,11 +15,10 @@ export { default as FootnoteEmbed } from "./FootnoteEmbed";
 export { default as BrightcoveEmbed } from "./BrightcoveEmbed";
 export { default as ContentLinkEmbed } from "./ContentLinkEmbed";
 export { default as RelatedContentEmbed } from "./RelatedContentEmbed";
-export { default as ConceptEmbed } from "./ConceptEmbed";
-export { ConceptNotionV2 } from "./conceptComponents";
+export { ConceptEmbed, InlineConcept, BlockConcept } from "./ConceptEmbed";
+export type { InlineConceptProps, BlockConceptProps } from "./ConceptEmbed";
 export { default as ConceptListEmbed } from "./ConceptListEmbed";
 export { default as UnknownEmbed } from "./UnknownEmbed";
-export { InlineConcept, BlockConcept } from "./ConceptEmbed";
 export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export { default as CopyrightEmbed } from "./CopyrightEmbed";
 export { default as CodeEmbed } from "./CodeEmbed";

package/src/ErrorMessage/ErrorMessage.tsx

@@ -7,42 +7,53 @@
  */
 
 import { ReactNode } from "react";
-import styled from "@emotion/styled";
-import { colors, spacing, breakpoints } from "@ndla/core";
+import { Text } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
 
-const StyledErrorMessage = styled.article`
-  text-align: center;
-  a {
-    color: ${colors.brand.primary};
-  }
+// TODO: This has not been redesignet yet. This is just a rewrite of the previous design in panda
 
-  h1 {
-    margin-top: 0;
-  }
-`;
+const StyledErrorMessage = styled("article", {
+  base: {
+    textAlign: "center",
+    "& a": {
+      color: "text.strong",
+    },
+    "& h1": {
+      marginTop: "0",
+    },
+  },
+});
 
-const IllustrationWrapper = styled("div")`
-  margin-bottom: ${spacing.normal};
-  @media (min-width: ${breakpoints.tablet}) {
-    margin-top: ${spacing.large};
-  }
-`;
+const IllustrationWrapper = styled("div", {
+  base: {
+    marginBottom: "medium",
+    tablet: {
+      marginTop: "xxlarge",
+    },
+  },
+});
 
-const Description = styled("p")`
-  margin-bottom: ${spacing.normal};
-  @media (min-width: ${breakpoints.tablet}) {
-    margin-bottom: ${spacing.large};
-  }
-`;
+const Description = styled(Text, {
+  base: {
+    marginBottom: "medium",
+    tablet: {
+      marginBottom: "xxlarge",
+    },
+  },
+});
 
-const CustomElementWrapper = styled.div`
-  margin: ${spacing.large} 0;
-`;
+const CustomElementWrapper = styled("div", {
+  base: {
+    marginBlock: "xxlarge",
+  },
+});
 
-const MessageWrapper = styled.div`
-  margin-top: ${spacing.xsmall};
-`;
+const MessageWrapper = styled("div", {
+  base: {
+    marginTop: "3xsmall",
+  },
+});
 
 interface Props {
   messages: {

package/src/ErrorMessage/ErrorResourceAccessDenied.tsx

@@ -7,16 +7,18 @@
  */
 
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
 import { ButtonV2 } from "@ndla/button";
-import { spacing } from "@ndla/core";
 import { HumanMaleBoard, LogIn } from "@ndla/icons/common";
-
+import { styled } from "@ndla/styled-system/jsx";
 import ErrorMessage from "./ErrorMessage";
 
-const StyledLogInIconWrapper = styled.span`
-  margin-left: ${spacing.xsmall};
-`;
+// TODO: This has not been redesignet yet. This is just a rewrite of the previous design in panda
+
+const StyledLogInIconWrapper = styled("span", {
+  base: {
+    marginLeft: "3xsmall",
+  },
+});
 
 type Props = {
   onAuthenticateClick: () => void;

package/src/FactBox/FactBox.tsx

@@ -6,14 +6,11 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
-import { ComponentProps, ReactNode, forwardRef, useCallback, useEffect, useState } from "react";
+import { ComponentProps, ReactNode, forwardRef, useCallback, useEffect, useId, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
-import { breakpoints, colors, mq, spacing, stackOrder } from "@ndla/core";
-import { ChevronDown, ChevronUp } from "@ndla/icons/common";
+import { ChevronDown } from "@ndla/icons/common";
+import { IconButton } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 
 interface Props extends ComponentProps<"aside"> {
   children?: ReactNode;
@@ -22,129 +19,132 @@ interface Props extends ComponentProps<"aside"> {
   onOpenChange?: (open: boolean) => void;
 }
 
-const StyledAside = styled.aside`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  z-index: ${stackOrder.offsetSingle};
-  margin: ${spacing.large} 0 calc(${spacing.large} - ${spacing.nsmall}) 0;
-  overflow: hidden;
-  padding-bottom: ${spacing.nsmall};
-
-  @media print {
-    overflow: visible;
-  }
-
-  h2:first-of-type {
-    border-bottom: 2px solid ${colors.brand.primary};
-    margin-top: 0;
-    margin-bottom: ${spacing.normal};
-  }
-
-  h2,
-  h3,
-  h4,
-  h5 {
-    display: block;
-    margin-top: ${spacing.normal};
-    margin-bottom: ${spacing.small};
-    border-bottom: 1px solid ${colors.brand.light};
-  }
-`;
-
-const StyledDiv = styled.div`
-  width: 100%;
-  position: relative;
-  color: ${colors.brand.greyDark};
-  padding: ${spacing.normal} ${spacing.normal} ${spacing.large};
-  border: 1px solid ${colors.brand.greyLight};
-  max-height: 190px;
-  transition: max-height 0.6s ease-in-out;
-  overflow: hidden;
-
-  &:after {
-    content: "";
-    text-align: center;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    width: 99%;
-    margin: 0.5% 0.5% 0 0.5%;
-    transition: opacity 0.5s cubic-bezier(0.74, -0.04, 0.96, 0.97);
-    /* The 00 after our color is to set its opacity to 0 */
-    background: linear-gradient(${colors.brand.light}00, ${colors.white});
-    opacity: 1;
-    z-index: ${stackOrder.base};
-  }
-
-  @media print {
-    max-height: revert;
-    &:after {
-      display: none;
-    }
-  }
-
-  & > ul:not([class]),
-  :not(li) > ul:not([class]) {
-    ${mq.range({ from: breakpoints.desktop })} {
-      margin-left: ${spacing.normal};
-    }
-  }
-
-  & > ol:not([class]),
-  :not(li) > ol:not([class]) {
-    ${mq.range({ from: breakpoints.desktop })} {
-      margin-left: ${spacing.large};
-    }
-  }
-`;
-
-const StyledIconButton = styled(IconButtonV2)`
-  margin-top: -20px;
-  z-index: ${stackOrder.offsetSingle};
-
-  @media print {
-    display: none;
-  }
-`;
-
-const expandedStyle = css`
-  max-height: 500vh;
-`;
+const StyledAside = styled("aside", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    position: "relative",
+    padding: "medium",
+    transitionProperty: "max-height",
+    transitionDuration: "slow",
+    transitionTimingFunction: "ease-in-out",
+    border: "1px solid",
+    borderColor: "stroke.default",
+    borderRadius: "xsmall",
+    maxHeight: "surface.xxsmall",
+    _closed: {
+      _print: {
+        overflow: "visible",
+        maxHeight: "500vh",
+      },
+    },
+    _open: {
+      maxHeight: "500vh",
+    },
+  },
+});
+
+const StyledContent = styled("div", {
+  base: {
+    position: "relative",
+    width: "100%",
+    overflow: "hidden",
+    // Reset the top margin of the very first child.
+    "& :first-child": {
+      marginBlockStart: "0",
+    },
+    _after: {
+      content: '""',
+      textAlign: "center",
+      position: "absolute",
+      inset: "0",
+      transitionProperty: "opacity",
+      transitionDuration: "slow",
+      transitionTimingFunction: "ease-out",
+      // TODO: Consider improving this gradient. It's a little light up top.
+      gradientFrom: "surface.default/00",
+      gradientTo: "surface.default",
+      backgroundGradient: "to-b",
+      opacity: "1",
+      zIndex: "base",
+    },
+    _print: {
+      overflow: "visible",
+      _after: {
+        display: "none",
+      },
+    },
+    _open: {
+      paddingBlockEnd: "xsmall",
+      _after: {
+        opacity: "0",
+        zIndex: "hide",
+      },
+    },
+  },
+});
+
+const StyledIconButton = styled(IconButton, {
+  base: {
+    position: "absolute",
+    bottom: "-medium",
+    zIndex: "base",
+    "& svg": {
+      transitionProperty: "transform",
+      transitionTimingFunction: "ease-in-out",
+      transitionDuration: "fast",
+    },
+    _open: {
+      "& svg": {
+        transform: "rotate(180deg)",
+      },
+    },
+    _print: {
+      display: "none",
+    },
+  },
+});
 
-const expandedContentStyle = css`
-  max-height: 500vh;
-  &:after {
-    opacity: 0;
-    z-index: ${stackOrder.hide};
-  }
-`;
+// TODO: Consider moving the open trigger depending on whether the content is open or closed.
 
 const FactBox = forwardRef<HTMLElement, Props>(
   ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {
     const { t } = useTranslation();
-    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const [state, setState] = useState<"open" | "closed">(defaultOpen ? "open" : "closed");
+    const contentId = useId();
+    // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
+    // TODO: Remove this hack when we upgrade to React 19.
+    const inertAttribute = useMemo(() => {
+      return state === "closed" ? { inert: "" } : {};
+    }, [state]);
 
     useEffect(() => {
       if (open !== undefined) {
-        setIsOpen(open);
+        setState(open ? "open" : "closed");
       }
     }, [open]);
 
     const onClick = useCallback(() => {
-      const newOpen = !isOpen;
-      setIsOpen(newOpen);
-      onOpenChange?.(newOpen);
-    }, [isOpen, onOpenChange]);
+      const newState = state === "open" ? "closed" : "open";
+      setState(newState);
+      onOpenChange?.(newState === "open");
+    }, [state, onOpenChange]);
 
     return (
-      <StyledAside {...rest} css={[isOpen ? expandedStyle : undefined]} ref={ref}>
-        <StyledDiv css={isOpen ? expandedContentStyle : undefined}>{children}</StyledDiv>
-        <StyledIconButton onClick={onClick} aria-label={t(`factbox.${isOpen ? "close" : "open"}`)}>
-          {isOpen ? <ChevronUp /> : <ChevronDown />}
+      <StyledAside data-state={state} {...rest} ref={ref}>
+        <StyledIconButton
+          data-state={state}
+          onClick={onClick}
+          aria-expanded={state === "open"}
+          aria-controls={contentId}
+          aria-label={t(`factbox.${state === "open" ? "close" : "open"}`)}
+        >
+          <ChevronDown />
         </StyledIconButton>
+        <StyledContent id={contentId} data-state={state} aria-hidden={state === "closed"} {...inertAttribute}>
+          {children}
+        </StyledContent>
       </StyledAside>
     );
   },

package/src/FactBox/Factbox.stories.tsx

@@ -6,16 +6,10 @@
  *
  */
 
-import styled from "@emotion/styled";
 import { Meta, StoryObj } from "@storybook/react";
-import { spacing } from "@ndla/core";
-import { Heading, Text } from "@ndla/typography";
+import { Button, UnOrderedList, OrderedList } from "@ndla/primitives";
 import FactBox from "./FactBox";
 
-const Wrapper = styled.div`
-  padding: ${spacing.normal};
-`;
-
 /**
  *For alt nytt innhold på ndla.no skal ikke flytende høyrespalte benyttes. I stedet benytter vi faktabokser innenfor innholdsspalten.
  */
@@ -26,32 +20,54 @@ export default {
   paramemeters: {
     inlineStories: true,
   },
-  decorators: [
-    (Story) => (
-      <Wrapper>
-        <Story />
-      </Wrapper>
-    ),
-  ],
+  decorators: [(Story) => <Story />],
   args: {
     children: (
       <>
-        <Heading element="h2" headingStyle="h2">
-          Faktaboks
-        </Heading>
-        <Text textStyle="content">
-          En faktaboks kan inneholde punktlister eller korte fakta som er relevant for artikkelens innhold.
-        </Text>
-        <Text textStyle="content">
+        <h2>Faktaboks</h2>
+        <p>Innhold kan først nås etter at boksen er åpnet.</p>
+        <Button>Klikk meg</Button>
+        <p>En faktaboks kan inneholde punktlister eller korte fakta som er relevant for artikkelens innhold.</p>
+        <p>
           Det anbefales å ikke ha for mye innhold i faktaboks, slik at lese-konteksten i størst mulig grad beholdes.
-        </Text>
-        <Heading element="h2" headingStyle="h2">
-          Enkel tittel
-        </Heading>
-        <Text textStyle="content">
+        </p>
+        <h2>Enkel tittel</h2>
+        <p>
           Faktaboksen kan også brukes til å oppsummere innhold i slutten av en artikkel, og den kan inneholde
           lisensiering om eksternt innhold er brukt.
-        </Text>
+        </p>
+        <UnOrderedList>
+          <li>Punkt 1</li>
+          <li>Punkt 2</li>
+          <li>
+            <UnOrderedList>
+              <li>Punkt 1.1</li>
+              <li>Punkt 1.2</li>
+              <li>
+                <UnOrderedList>
+                  <li>Punkt 1.1.1</li>
+                  <li>Punkt 1.2.1</li>
+                </UnOrderedList>
+              </li>
+            </UnOrderedList>
+          </li>
+        </UnOrderedList>
+        <OrderedList>
+          <li>Punkt 1</li>
+          <li>Punkt 2</li>
+          <li>
+            <OrderedList>
+              <li>Punkt 1.1</li>
+              <li>Punkt 1.2</li>
+              <li>
+                <OrderedList>
+                  <li>Punkt 1.1.1</li>
+                  <li>Punkt 1.2.1</li>
+                </OrderedList>
+              </li>
+            </OrderedList>
+          </li>
+        </OrderedList>
       </>
     ),
   },

package/src/FileList/FileList.stories.tsx

@@ -9,6 +9,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import File from "./File";
 import FileList from "./FileList";
+import PdfFile from "./PdfFile";
 
 export default {
   title: "Components/FileList",
@@ -38,7 +39,11 @@ export const SeveralFiles: StoryObj<typeof File> = {
   render: () => (
     <FileList>
       <File title="Fil 1" url="https://ndla.no/1" fileExists fileType="mp4" />
-      <File title="Fil 2" url="https://ndla.no/2" fileExists={false} fileType="pdf" />
+      <File title="Fil 2" url="https://ndla.no/2" fileExists={false} fileType="png" />
+      <PdfFile
+        title="Fil 3"
+        url="https://api.test.ndla.no/files/131789/krypteringsaktivitet_-_til_fiendegruppe_bm.pdf"
+      />
       <File title="Fil 3" url="https://ndla.no/3" fileExists fileType="docx" />
       <File title="Fil 4" url="https://ndla.no/4" fileExists fileType="docx" />
     </FileList>

package/src/FileList/PdfFile.tsx

@@ -6,19 +6,36 @@
  *
  */
 
-import { Figure } from "../Figure";
+import { Heading, Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 
 interface Props {
   title: string;
   url: string;
 }
 
+const StyledIframe = styled("iframe", {
+  base: {
+    width: "100%",
+  },
+});
+
+const StyledFigure = styled(Figure, {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+  },
+});
+
 const PdfFile = ({ title, url }: Props) => {
   return (
-    <Figure>
-      <h2>{title}</h2>
-      <iframe title={title} height="1050" src={url} />
-    </Figure>
+    <StyledFigure>
+      <Heading asChild consumeCss textStyle="title.medium">
+        <h4>{title}</h4>
+      </Heading>
+      <StyledIframe title={title} height="1050" src={url} />
+    </StyledFigure>
   );
 };