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

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]} />;
 };

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} />