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

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

package/src/Gloss/Gloss.stories.tsx

@@ -65,6 +65,32 @@ export const GlossStory: StoryFn<typeof Gloss> = ({ ...args }) => {
   return <Gloss {...args} />;
 };
 
+export const Bordered: StoryObj<typeof Gloss> = {
+  args: {
+    variant: "bordered",
+  },
+};
+
+export const NoExamples: StoryObj<typeof Gloss> = {
+  args: {
+    title: {
+      title: "Å angripe",
+      language: "nb",
+    },
+    glossData: {
+      gloss: "angreifen",
+      wordClass: wordClass.verb,
+      originalLanguage: "de",
+      transcriptions: {},
+      examples: [],
+    },
+    audio: {
+      title: "",
+      src: "",
+    },
+  },
+};
+
 export const GlossChineseStory: StoryObj<typeof Gloss> = {
   args: {
     title: {
@@ -103,6 +129,86 @@ export const GlossChineseStory: StoryObj<typeof Gloss> = {
   },
 };
 
+export const BigExample: StoryObj<typeof Gloss> = {
+  args: {
+    title: {
+      title: "(spørsmålspartikkel); hva med…?",
+      language: "nb",
+    },
+    audio: {
+      src: "https://api.ndla.no/audio/files/ne.mp3",
+      title: "Spill av",
+    },
+    glossData: {
+      gloss: "呢",
+      wordClass: "particle",
+      originalLanguage: "zh",
+      transcriptions: {
+        pinyin: "ne",
+      },
+      examples: [
+        [
+          {
+            example: "我叫马红，你呢？//我叫馬紅，你呢？",
+            language: "zh",
+            transcriptions: {
+              pinyin: "Wǒ jiào Mǎ Hóng, nǐ ne?",
+            },
+          },
+          {
+            example: "Jeg heter Ma Hong, hva med deg?",
+            language: "nb",
+            transcriptions: {},
+          },
+          {
+            example: "Eg heiter Ma Hong, kva med deg?",
+            language: "nn",
+            transcriptions: {},
+          },
+        ],
+        [
+          {
+            example: "我姓王，你呢？",
+            language: "zh",
+            transcriptions: {
+              pinyin: "Wǒ xìng Wáng, nǐ ne?",
+            },
+          },
+          {
+            example: "Jeg heter Wang til etternavn, hva med deg?",
+            language: "nb",
+            transcriptions: {},
+          },
+          {
+            example: "Eg heiter Wang til etternamn, kva med deg?",
+            language: "nn",
+            transcriptions: {},
+          },
+        ],
+        [
+          {
+            example: "我是老师，你呢？//我是老師，你呢？",
+            language: "zh",
+            transcriptions: {
+              pinyin: "Wǒ shì lǎoshī, nǐ ne?",
+            },
+          },
+          {
+            example: "Jeg er lærer, hva med deg?",
+            language: "nb",
+            transcriptions: {},
+          },
+          {
+            example: "Eg er lærar, kva med deg?",
+            language: "nn",
+            transcriptions: {},
+          },
+        ],
+      ],
+    },
+  },
+};
+
 const GlossExampleText = {
   example: "我叫马红",
   language: "zh",
@@ -112,5 +218,5 @@ const GlossExampleText = {
 };
 
 export const GlossExampleStory: StoryFn<typeof Gloss> = () => {
-  return <GlossExample originalLanguage="zh" index={0} example={GlossExampleText} isStandalone />;
+  return <GlossExample originalLanguage="zh" examples={[GlossExampleText]} />;
 };