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

package/src/Gloss/Gloss.tsx

@@ -8,102 +8,25 @@
 
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { Trigger } from "@radix-ui/react-accordion";
-import { AccordionRoot, AccordionItem, AccordionContent } from "@ndla/accordion";
-import { colors, spacing, misc, fonts } from "@ndla/core";
+import { AccordionItemTrigger } from "@ark-ui/react";
 import { ChevronDown } from "@ndla/icons/common";
-import { IGlossData, IGlossExample } from "@ndla/types-backend/concept-api";
+import {
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemIndicator,
+  AccordionRoot,
+  IconButton,
+  Text,
+} from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { type StyledVariantProps } from "@ndla/styled-system/types";
+import type { IGlossData, IGlossExample } from "@ndla/types-backend/concept-api";
 import GlossExample from "./GlossExample";
 import SpeechControl from "../AudioPlayer/SpeechControl";
 
-export interface Props {
-  title: {
-    title: string;
-    language: string;
-  };
-  glossData?: IGlossData;
-  audio?: {
-    title: string;
-    src?: string;
-  };
-  exampleIds?: string;
-  exampleLangs?: string;
-}
-
-const StyledAccordionItem = styled(AccordionItem)`
-  background-color: ${colors.background.lightBlue};
-  border: 1px solid ${colors.brand.light};
-  border-radius: ${misc.borderRadius};
-  span {
-    ${fonts.size.text.content}
-    font-family: ${fonts.sans};
-  }
-`;
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  padding: ${spacing.nsmall} ${spacing.normal} 0 ${spacing.normal};
-`;
-
-const GlossContainer = styled.div`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: ${spacing.nsmall};
-  span[data-pinyin] {
-    font-style: italic;
-  }
-`;
-
-const GlossSpan = styled.span`
-  font-weight: ${fonts.weight.bold};
-`;
-
-const StyledWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 ${spacing.normal} ${spacing.nsmall} ${spacing.normal};
-  background-color: ${colors.background.lightBlue};
-  border-radius: ${misc.borderRadius};
-`;
-
-const StyledAccordionContent = styled(AccordionContent)`
-  padding: 0;
-`;
-
-const StyledTrigger = styled(Trigger)`
-  background-color: transparent;
-  cursor: pointer;
-  border: none;
-  padding: ${spacing.xsmall};
-  border-radius: ${misc.borderRadiusLarge};
-  color: ${colors.brand.primary};
-  &:hover,
-  &:focus-visible {
-    color: ${colors.white};
-    background-color: ${colors.brand.primary};
-  }
-  &[data-state="open"] {
-    background-color: ${colors.brand.lighter};
-    &:hover,
-    &:focus-visible {
-      background-color: ${colors.brand.primary};
-    }
-  }
-`;
-
-const StyledChevron = styled(ChevronDown)`
-  transition: all 200ms ease-in-out;
-  [data-styled-trigger][data-state="open"] > & {
-    transform: rotate(180deg);
-  }
-  min-width: ${spacing.normal};
-  min-height: ${spacing.normal};
-`;
+// TODO: Figure out padding between bordered and simple variant.
+// The design says that the content above the accordion content should have enough padding to align with the accordion content.
+// When a gloss is bordered there's way too much padding.
 
 const getFilteredExamples = (
   glossData: IGlossData | undefined,
@@ -127,7 +50,70 @@ const getFilteredExamples = (
   return glossData?.examples ?? [];
 };
 
-const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) => {
+const Container = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+});
+
+const TextWrapper = styled("div", {
+  base: {
+    display: "flex",
+    gap: "small",
+  },
+});
+
+const StyledAccordionItemContent = styled(AccordionItemContent, {
+  base: {
+    paddingInline: "0",
+  },
+});
+
+const StyledContainer = styled(Container, {
+  base: {
+    marginBlockStart: "3xsmall",
+  },
+});
+
+const StyledAccordionItem = styled(AccordionItem, {
+  base: {
+    paddingBlock: "small",
+    paddingInline: "medium",
+  },
+  defaultVariants: {
+    variant: "simple",
+  },
+  variants: {
+    variant: {
+      simple: {},
+      bordered: {
+        border: "1px solid",
+        borderColor: "stroke.subtle",
+        borderRadius: "xsmall",
+      },
+    },
+  },
+});
+
+type GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;
+
+export interface Props {
+  title: {
+    title: string;
+    language: string;
+  };
+  glossData?: IGlossData;
+  audio?: {
+    title: string;
+    src?: string;
+  };
+  exampleIds?: string;
+  exampleLangs?: string;
+}
+
+const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {
   const { t } = useTranslation();
 
   const filteredExamples = useMemo(
@@ -135,71 +121,72 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) =>
     [exampleIds, exampleLangs, glossData],
   );
 
+  if (!glossData) return null;
+
   return (
-    <>
-      {glossData && (
-        <AccordionRoot type="single" collapsible>
-          <StyledAccordionItem value="1">
-            <Wrapper>
-              <GlossContainer>
-                <GlossSpan lang={glossData.originalLanguage}>{glossData.gloss}</GlossSpan>
-                {glossData.transcriptions.traditional && (
-                  <span
-                    key={t("gloss.transcriptions.traditional")}
-                    aria-label={t("gloss.transcriptions.traditional")}
-                    lang={glossData.originalLanguage}
-                  >
-                    {glossData.transcriptions.traditional}
-                  </span>
-                )}
-                {glossData.transcriptions.pinyin && (
-                  <span
-                    data-pinyin=""
-                    key={t("gloss.transcriptions.pinyin")}
-                    aria-label={t("gloss.transcriptions.pinyin")}
-                    lang={glossData.originalLanguage}
-                  >
-                    {glossData.transcriptions.pinyin}
-                  </span>
-                )}
-                {glossData.wordClass && (
-                  <span aria-label={t("gloss.wordClass")}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</span>
-                )}
-              </GlossContainer>
-              {audio?.src && <SpeechControl src={audio.src} title={audio.title} type="gloss" />}
-            </Wrapper>
-            {filteredExamples.length > 0 ? (
-              <>
-                <StyledWrapper>
-                  <span lang={title.language}>{title.title}</span>
-                  <StyledTrigger data-styled-trigger aria-label={t("gloss.examples")}>
-                    <StyledChevron />
-                  </StyledTrigger>
-                </StyledWrapper>
-                <StyledAccordionContent>
-                  {filteredExamples.map((examples, index) => (
-                    <div key={`gloss-example-${index}`}>
-                      {examples.map((example, innerIndex) => (
-                        <GlossExample
-                          key={`gloss-example-${index}-${innerIndex}`}
-                          example={example}
-                          originalLanguage={glossData.originalLanguage}
-                          index={innerIndex}
-                        />
-                      ))}
-                    </div>
-                  ))}
-                </StyledAccordionContent>
-              </>
-            ) : (
-              <StyledWrapper>
-                <span lang={title.language}>{title.title}</span>
-              </StyledWrapper>
+    <AccordionRoot multiple variant="clean">
+      <StyledAccordionItem value="gloss" variant={variant}>
+        <Container>
+          <TextWrapper>
+            <Text textStyle="label.medium" fontWeight="bold" asChild consumeCss lang={glossData.originalLanguage}>
+              <span>{glossData.gloss}</span>
+            </Text>
+            {glossData.transcriptions.traditional && (
+              <Text textStyle="label.medium" asChild consumeCss>
+                <span
+                  key={t("gloss.transcriptions.traditional")}
+                  aria-label={t("gloss.transcriptions.traditional")}
+                  lang={glossData.originalLanguage}
+                >
+                  {glossData.transcriptions.traditional}
+                </span>
+              </Text>
+            )}
+            {glossData.transcriptions.pinyin && (
+              <Text textStyle="label.medium" asChild consumeCss>
+                <span
+                  data-pinyin=""
+                  key={t("gloss.transcriptions.pinyin")}
+                  aria-label={t("gloss.transcriptions.pinyin")}
+                  lang={glossData.originalLanguage}
+                >
+                  {glossData.transcriptions.pinyin}
+                </span>
+              </Text>
+            )}
+            {glossData.wordClass && (
+              <Text textStyle="label.medium" asChild consumeCss>
+                <span aria-label={t("gloss.wordClass")}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</span>
+              </Text>
             )}
-          </StyledAccordionItem>
-        </AccordionRoot>
-      )}
-    </>
+          </TextWrapper>
+          {audio?.src && <SpeechControl src={audio.src} title={audio.title} type="gloss" />}
+        </Container>
+        <StyledContainer>
+          <Text textStyle="label.medium" asChild consumeCss>
+            <span lang={title.language}>{title.title}</span>
+          </Text>
+          {!!filteredExamples.length && (
+            <AccordionItemTrigger asChild>
+              <IconButton variant="tertiary" aria-label={t("gloss.showExamples")} title={t("gloss.showExamples")}>
+                <AccordionItemIndicator asChild>
+                  <ChevronDown size="medium" />
+                </AccordionItemIndicator>
+              </IconButton>
+            </AccordionItemTrigger>
+          )}
+        </StyledContainer>
+        <StyledAccordionItemContent>
+          {filteredExamples.map((examples, index) => (
+            <GlossExample
+              key={`gloss-example-${index}`}
+              examples={examples}
+              originalLanguage={glossData.originalLanguage}
+            />
+          ))}
+        </StyledAccordionItemContent>
+      </StyledAccordionItem>
+    </AccordionRoot>
   );
 };
 

package/src/Gloss/GlossExample.tsx

@@ -6,91 +6,65 @@
  *
  */
 
-import styled from "@emotion/styled";
-import { colors, spacing, fonts, misc } from "@ndla/core";
+import { Fragment } from "react";
+import { Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { IGlossExample } from "@ndla/types-backend/concept-api";
-import { Text } from "@ndla/typography";
 
-export interface Props {
-  example: IGlossExample;
+interface Props {
+  examples: IGlossExample[];
   originalLanguage: string | undefined;
-  index: number;
-  isStandalone?: boolean;
 }
 
-const StyledGlossExampleWrapper = styled.div`
-  &[data-is-standalone="true"] {
-    &:first-of-type {
-      border-top: 1px solid ${colors.brand.lighter};
-    }
-  }
+const StyledGlossExample = styled("div", {
+  base: {
+    borderTop: "1px solid",
+    borderColor: "stroke.subtle",
+    paddingBlock: "xsmall",
+    paddingInline: "medium",
+    _first: {
+      background: "surface.brand.1.subtle",
+      borderColor: "stroke.default",
+      "& p": {
+        fontWeight: "bold",
+      },
+    },
+  },
+});
 
-  &:first-of-type&:not([data-is-standalone="true"]) {
-    border-top: 1px solid ${colors.brand.primary};
-  }
+const PinyinText = styled(Text, {
+  base: {
+    fontStyle: "italic",
+  },
+});
 
-  &[data-is-standalone="false"] {
-    &:not(:last-child) {
-      div {
-        border-bottom: 1px solid ${colors.brand.lighter};
-        border-radius: 0;
-      }
-    }
-  }
-`;
-
-const StyledGlossExample = styled.div`
-  padding: ${spacing.small} ${spacing.normal};
-  background-color: ${colors.background.default};
-  border: 1px solid ${colors.brand.lighter};
-  border-top: none;
-
-  &[data-is-first="true"] {
-    background-color: ${colors.background.lightBlue};
-  }
-  &[data-is-standalone="false"] {
-    border: none;
-    border-radius: ${misc.borderRadius};
-  }
-`;
-
-const StyledText = styled(Text)`
-  &[data-is-first="true"] {
-    font-weight: ${fonts.weight.bold};
-    color: ${colors.text.primary};
-  }
-  &[data-pinyin] {
-    font-style: italic;
-  }
-`;
-
-const GlossExample = ({ example, originalLanguage, index, isStandalone = false }: Props) => {
+const GlossExample = ({ examples, originalLanguage }: Props) => {
   return (
-    <StyledGlossExampleWrapper data-is-standalone={isStandalone}>
-      <StyledGlossExample data-is-first={index === 0} lang={example.language} data-is-standalone={isStandalone}>
-        <StyledText data-is-first={index === 0} textStyle="meta-text-medium" margin="none">
-          {example.example}
-        </StyledText>
-      </StyledGlossExample>
-      {example.transcriptions.pinyin && (
-        <StyledGlossExample
-          lang={originalLanguage}
-          data-is-standalone={isStandalone}
-          data-is-last={example.transcriptions.traditional?.length === 0}
-        >
-          <StyledText data-pinyin textStyle="meta-text-medium" margin="none">
-            {example.transcriptions?.pinyin}
-          </StyledText>
-        </StyledGlossExample>
-      )}
-      {example.transcriptions.traditional && (
-        <StyledGlossExample lang={originalLanguage} data-is-standalone={isStandalone} data-is-last>
-          <StyledText textStyle="meta-text-medium" margin="none">
-            {example.transcriptions?.traditional}
-          </StyledText>
-        </StyledGlossExample>
-      )}
-    </StyledGlossExampleWrapper>
+    <div>
+      {examples.map((examples, index) => (
+        <Fragment key={index}>
+          <StyledGlossExample lang={examples.language}>
+            <Text textStyle="label.medium" lang={examples.language}>
+              {examples.example}
+            </Text>
+          </StyledGlossExample>
+          {!!examples.transcriptions.pinyin && (
+            <StyledGlossExample>
+              <PinyinText data-pinyin="" lang={originalLanguage} textStyle="label.medium">
+                {examples.transcriptions?.pinyin}
+              </PinyinText>
+            </StyledGlossExample>
+          )}
+          {!!examples.transcriptions?.traditional && (
+            <StyledGlossExample>
+              <Text textStyle="label.medium" lang={originalLanguage}>
+                {examples.transcriptions.traditional}
+              </Text>
+            </StyledGlossExample>
+          )}
+        </Fragment>
+      ))}
+    </div>
   );
 };
 

package/src/LinkBlock/LinkBlock.stories.tsx

@@ -14,19 +14,17 @@ export default {
   title: "Components/Link Block",
   component: LinkBlock,
   tags: ["autodocs"],
-  args: {},
+  args: {
+    title: "Redaksjonell <em>medarbeider</em> i faget spansk 2",
+    articleLanguage: "nb",
+    date: "05. mars 2023",
+    url: "",
+  },
 } as Meta<typeof LinkBlock>;
 
-const args = {
-  title: "Redaksjonell <em>medarbeider</em> i faget spansk 2",
-  articleLanguage: "nb",
-  date: "05. mars 2023",
-  url: "",
-};
+export const AnnouncementExample: StoryObj<typeof LinkBlock> = {};
 
-export const AnnouncementExample: StoryObj<typeof LinkBlock> = { args };
-
-export const LinkList: StoryFn<typeof LinkBlock> = () => (
+export const LinkList: StoryFn<typeof LinkBlock> = (args) => (
   <LinkBlockSection>
     <LinkBlock {...args} />
     <LinkBlock {...args} />

package/src/LinkBlock/LinkBlock.tsx

@@ -10,69 +10,64 @@ import { format } from "date-fns";
 import { enGB, nb, nn } from "date-fns/locale";
 import parse from "html-react-parser";
 import { useMemo } from "react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, spacing, mq } from "@ndla/core";
 import { Forward, CalendarEd } from "@ndla/icons/common";
+import { Heading } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
 import { LinkBlockEmbedData } from "@ndla/types-embed";
-import { Heading } from "@ndla/typography";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
-const StyledForward = styled(Forward)`
-  margin: 0 ${spacing.nsmall};
-  min-width: ${spacing.normal};
-  min-height: ${spacing.normal};
-`;
+const InfoWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+  },
+});
 
-const InfoWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.small};
-`;
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    background: "surface.default",
+    padding: "medium",
+    border: "1px solid",
+    // TODO: Check if this is correct. Not part of design. Also check if this should have border-radius.
+    borderColor: "stroke.default",
+    "& h3": {
+      textDecoration: "underline",
+    },
+    "& [data-forward]": {
+      transitionProperty: "width, height",
+      transitionTimingFunction: "ease-in-out",
+      transitionDuration: "fast",
+    },
+    _hover: {
+      "& h3": {
+        textDecoration: "none",
+      },
+      "& [data-forward]": {
+        width: "large",
+        height: "large",
+      },
+    },
+  },
+});
 
-const StyledSafeLink = styled(SafeLink)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: none;
-  color: inherit;
-  background-color: ${colors.white};
-  border: 1px solid ${colors.brand.lighter};
-  padding: ${spacing.normal};
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    &:hover {
-      & ${InfoWrapper} :first-child {
-        text-decoration: underline;
-      }
-      & ${StyledForward} {
-        width: 32px;
-        height: 32px;
-      }
-    }
-    &:focus-visible {
-      border: 2px solid ${colors.brand.dark};
-    }
-  }
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    & ${InfoWrapper} :first-child {
-      text-decoration: underline;
-    }
-    :active :first-child {
-      text-decoration: none;
-    }
-  }
-`;
+const StyledDateContainer = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "xxsmall",
+  },
+});
 
-const StyledDateContainer = styled.div`
-  display: flex;
-  align-items: center;
-  padding-top: ${spacing.xsmall};
-  gap: ${spacing.small};
-`;
-
-const StyledCalenderEd = styled(CalendarEd)`
-  color: ${colors.icon.iconBlue};
-`;
+const StyledCalendarEd = styled(CalendarEd, {
+  base: {
+    color: "icon.strong",
+  },
+});
 
 interface Props extends Omit<LinkBlockEmbedData, "resource"> {
   path?: string;
@@ -89,17 +84,17 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {
   return (
     <StyledSafeLink to={href}>
       <InfoWrapper>
-        <Heading element="h3" margin="none" headingStyle="h3">
-          {parse(title)}
+        <Heading asChild consumeCss textStyle="title.medium">
+          <h3 data-heading>{parse(title)}</h3>
         </Heading>
         {date && (
           <StyledDateContainer>
-            <StyledCalenderEd />
+            <StyledCalendarEd />
             {formattedDate}
           </StyledDateContainer>
         )}
       </InfoWrapper>
-      <StyledForward />
+      <Forward data-forward />
     </StyledSafeLink>
   );
 };

package/src/LinkBlock/LinkBlockSection.tsx

@@ -7,23 +7,20 @@
  */
 
 import { Children, HTMLAttributes, ReactNode } from "react";
-import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
+import { styled } from "@ndla/styled-system/jsx";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children: ReactNode;
 }
 
-const StyledList = styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.small};
-  list-style: none;
-  padding: 0px;
-  li {
-    padding: 0px;
-  }
-`;
+const StyledList = styled("ul", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+    listStyle: "none",
+  },
+});
 
 const LinkBlockSection = ({ children, ...rest }: Props) => {
   return (

package/src/Logo/Logo.stories.tsx

@@ -24,7 +24,6 @@ export default {
     inlineStories: true,
   },
   args: {
-    cssModifier: "large",
     name: true,
     label: "Nasjonal digital læringsarena",
   },