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

package/lib/styles.css

@@ -1,5 +1,17 @@
 @layer utilities {
   @layer compositions {
+    .textStyle_body\.medium {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-small);
+      line-height: var(--line-heights-small);
+}
+
+    .textStyle_body\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-small) * 1.11);
+      line-height: calc(var(--line-heights-small) * 1.11);
+}
+
     .textStyle_body\.large {
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
@@ -36,18 +48,6 @@
       line-height: calc(var(--line-heights-medium) * 1.11);
 }
 
-    .textStyle_body\.medium {
-      font-family: var(--fonts-sans);
-      font-weight: var(--font-weights-normal);
-      font-size: var(--font-sizes-small);
-      line-height: var(--line-heights-small);
-}
-
-    .textStyle_body\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
-      font-size: calc(var(--font-sizes-small) * 1.11);
-      line-height: calc(var(--line-heights-small) * 1.11);
-}
-
     .\[\&_a\]\:textStyle_label\.xsmall a {
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
@@ -61,6 +61,50 @@
 }
 }
 
+  .mbs_medium {
+    margin-block-start: var(--spacing-medium);
+}
+
+  .pbs_xsmall {
+    padding-block-start: var(--spacing-xsmall);
+}
+
+  .bd-t_1px_solid {
+    border-top: 1px solid;
+}
+
+  .d_flex {
+    display: flex;
+}
+
+  .gap_3xsmall {
+    gap: var(--spacing-3xsmall);
+}
+
+  .w_100\% {
+    width: 100%;
+}
+
+  .py_xsmall {
+    padding-block: var(--spacing-xsmall);
+}
+
+  .gap_xsmall {
+    gap: var(--spacing-xsmall);
+}
+
+  .pbs_xxlarge {
+    padding-block-start: var(--spacing-xxlarge);
+}
+
+  .gap_medium {
+    gap: var(--spacing-medium);
+}
+
+  .li-s_none {
+    list-style: none;
+}
+
   .bd_1px_solid {
     border: 1px solid;
 }
@@ -81,10 +125,6 @@
     overflow: hidden;
 }
 
-  .d_flex {
-    display: flex;
-}
-
   .flex_1_0_auto {
     flex: 1 0 auto;
 }
@@ -97,18 +137,10 @@
     height: var(--sizes-surface-4xsmall);
 }
 
-  .gap_xsmall {
-    gap: var(--spacing-xsmall);
-}
-
   .p_xsmall {
     padding: var(--spacing-xsmall);
 }
 
-  .w_100\% {
-    width: 100%;
-}
-
   .bd-bs_1px_solid {
     border-block-start: 1px solid;
 }
@@ -134,10 +166,6 @@
     background: var(--colors-background-default);
 }
 
-  .py_xsmall {
-    padding-block: var(--spacing-xsmall);
-}
-
   .px_medium {
     padding-inline: var(--spacing-medium);
 }
@@ -214,10 +242,6 @@
     color: var(--colors-text-default);
 }
 
-  .gap_medium {
-    gap: var(--spacing-medium);
-}
-
   .h_100\% {
     height: 100%;
 }
@@ -411,10 +435,6 @@
     padding-block: var(--spacing-small);
 }
 
-  .bd-t_1px_solid {
-    border-top: 1px solid;
-}
-
   .bg_surface\.default {
     background: var(--colors-surface-default);
 }
@@ -443,10 +463,6 @@
     color: var(--colors-icon-strong);
 }
 
-  .li-s_none {
-    list-style: none;
-}
-
   .d_grid {
     display: grid;
 }
@@ -459,22 +475,34 @@
     aspect-ratio: 1/1;
 }
 
-  .bd-c_stroke\.default {
-    border-color: var(--colors-stroke-default);
+  .bd-c_stroke\.subtle {
+    border-color: var(--colors-stroke-subtle);
 }
 
-  .ai_center {
-    align-items: center;
+  .flex-d_column-reverse {
+    flex-direction: column-reverse;
 }
 
-  .ai_flex-start {
-    align-items: flex-start;
+  .jc_space-between {
+    justify-content: space-between;
+}
+
+  .ai_center {
+    align-items: center;
 }
 
   .flex-d_column {
     flex-direction: column;
 }
 
+  .bd-c_stroke\.default {
+    border-color: var(--colors-stroke-default);
+}
+
+  .ai_flex-start {
+    align-items: flex-start;
+}
+
   .as_flex-start {
     align-self: flex-start;
 }
@@ -487,10 +515,6 @@
     background-color: var(--colors-background-default);
 }
 
-  .bd-c_stroke\.subtle {
-    border-color: var(--colors-stroke-subtle);
-}
-
   .trs-dur_fast {
     --transition-duration: var(--durations-fast);
     transition-duration: var(--durations-fast);
@@ -620,10 +644,6 @@
     bottom: calc(var(--spacing-medium) * -1);
 }
 
-  .jc_space-between {
-    justify-content: space-between;
-}
-
   .font-style_italic {
     font-style: italic;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "55.0.15-alpha.0",
+  "version": "55.0.16-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,7 +33,6 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^5.0.7-alpha.0",
     "@ndla/button": "^14.0.7-alpha.0",
     "@ndla/core": "^5.0.1",
     "@ndla/dropdown-menu": "^1.0.38",
@@ -79,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3675a902b9f44f5afb37c648038b8d90f1ccd7d0"
+  "gitHead": "b05b7016560891b2867811c4420041e6932003cc"
 }

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

package/src/Article/ArticleFootNotes.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import styled from "@emotion/styled";
-import { colors, spacing } from "@ndla/core";
+import { Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { FootNote as FootNoteType } from "../types";
 
 const citeDetailString = (description: string | undefined) => (description ? `${description}. ` : "");
@@ -16,36 +16,32 @@ type FootNoteProps = {
   footNote: FootNoteType;
 };
 
-const Cite = styled.cite`
-  display: flex;
-  gap: ${spacing.small};
-  a {
-    box-shadow: none;
-    text-decoration: underline;
-    text-underline-offset: ${spacing.xxsmall};
-    &:hover,
-    &:focus-visible {
-      text-decoration: none;
-    }
-  }
-`;
+const StyledCite = styled("cite", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "xsmall",
+  },
+});
 
 const FootNote = ({ footNote }: FootNoteProps) => (
   <li>
-    <Cite id={`note${footNote.ref}`}>
-      <a href={`#ref${footNote.ref}`} target="_self">
-        {footNote.ref}
-      </a>
-      {`«${footNote.title}». ${footNote.authors.join(" ")}. ${citeDetailString(footNote.edition)}${citeDetailString(
-        footNote.publisher,
-      )}${footNote.year}. `}
-      {footNote.url ? (
-        <a href={footNote.url}>
-          {footNote.url}
-          {"."}
+    <Text id={`note${footNote.ref}`} asChild consumeCss textStyle="body.medium">
+      <StyledCite>
+        <a href={`#ref${footNote.ref}`} target="_self">
+          {footNote.ref}
         </a>
-      ) : null}
-    </Cite>
+        {`«${footNote.title}». ${footNote.authors.join(" ")}. ${citeDetailString(footNote.edition)}${citeDetailString(
+          footNote.publisher,
+        )}${footNote.year}. `}
+        {footNote.url ? (
+          <a href={footNote.url}>
+            {footNote.url}
+            {"."}
+          </a>
+        ) : null}
+      </StyledCite>
+    </Text>
   </li>
 );
 
@@ -53,14 +49,14 @@ type ArticleFootNotesProps = {
   footNotes: Array<FootNoteType>;
 };
 
-const FootnoteList = styled.ol`
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  padding: ${spacing.small};
-  color: ${colors.text.light};
-`;
+const FootnoteList = styled("ol", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "medium",
+    listStyle: "none",
+  },
+});
 
 const ArticleFootNotes = ({ footNotes }: ArticleFootNotesProps) => (
   <FootnoteList>

package/src/ContentTypeBadge/ContentTypeBadgeNew.tsx

@@ -15,7 +15,7 @@ export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
   contentType: ContentType | undefined;
 }
 
-type ContentType =
+export type ContentType =
   | typeof contentTypes.SUBJECT_MATERIAL
   | typeof contentTypes.TASKS_AND_ACTIVITIES
   | typeof contentTypes.ASSESSMENT_RESOURCES
@@ -30,6 +30,7 @@ type ContentType =
   | typeof contentTypes.AUDIO
   | typeof contentTypes.VIDEO
   | typeof contentTypes.MISSING
+  | typeof contentTypes.PODCAST
   // This allows for us to fallback to string without getting a ts error, while still keeping intellisense
   | (string & {});
 
@@ -49,6 +50,7 @@ export const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant> = {
   // TODO: Verify resourceEmbedTypeMapping colors
   [contentTypes.IMAGE]: "brand1",
   [contentTypes.AUDIO]: "brand1",
+  [contentTypes.PODCAST]: "brand1",
   [contentTypes.VIDEO]: "brand1",
   [contentTypes.MISSING]: "neutral",
 };

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -79,7 +79,7 @@ export const FrontpageArticle = ({ article, id, isWide, licenseBox, lang }: Prop
         {introduction}
       </Text>
       {content}
-      <ArticleByline accordionHeaderVariant={"white"} licenseBox={licenseBox} displayByline={false} />
+      <ArticleByline licenseBox={licenseBox} displayByline={false} />
     </StyledArticle>
   );
 };

package/src/index.ts

@@ -85,8 +85,6 @@ export { SearchFieldForm } from "./Search/SearchFieldForm";
 
 export { default as resourceTypeColor } from "./utils/resourceTypeColor";
 
-export { default as CreatedBy } from "./CreatedBy";
-
 export { MessageBox, MessageBanner } from "./Messages";
 
 export { ResourceBox } from "./ResourceBox";

package/src/model/ContentType.ts

@@ -20,6 +20,7 @@ export const MISSING = "missing";
 export const IMAGE = "image";
 export const VIDEO = "video";
 export const AUDIO = "audio";
+export const PODCAST = "podcast";
 
 export const contentTypes = {
   SUBJECT_MATERIAL,
@@ -71,4 +72,5 @@ export const resourceEmbedTypeMapping: Record<string, string> = {
   video: "video",
   concept: "concept",
   audio: "audio",
+  podcast: "podcast",
 };