@ndla/ui 55.0.14-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;
 }
@@ -73,12 +117,12 @@
     box-shadow: var(--shadows-full);
 }
 
-  .ov_hidden {
-    overflow: hidden;
+  .mbe_4xsmall {
+    margin-block-end: var(--spacing-4xsmall);
 }
 
-  .d_flex {
-    display: flex;
+  .ov_hidden {
+    overflow: hidden;
 }
 
   .flex_1_0_auto {
@@ -93,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;
 }
@@ -130,10 +166,6 @@
     background: var(--colors-background-default);
 }
 
-  .py_xsmall {
-    padding-block: var(--spacing-xsmall);
-}
-
   .px_medium {
     padding-inline: var(--spacing-medium);
 }
@@ -210,10 +242,6 @@
     color: var(--colors-text-default);
 }
 
-  .gap_medium {
-    gap: var(--spacing-medium);
-}
-
   .h_100\% {
     height: 100%;
 }
@@ -407,20 +435,32 @@
     padding-block: var(--spacing-small);
 }
 
-  .bd-t_1px_solid {
-    border-top: 1px solid;
-}
-
   .bg_surface\.default {
     background: var(--colors-surface-default);
 }
 
-  .c_icon\.strong {
-    color: var(--colors-icon-strong);
+  .bg_surface\.dangerSubtle {
+    background: var(--colors-surface-danger-subtle);
 }
 
-  .li-s_none {
-    list-style: none;
+  .d_inline-flex {
+    display: inline-flex;
+}
+
+  .white-space_pre-wrap {
+    white-space: pre-wrap;
+}
+
+  .c_primary {
+    color: var(--colors-primary);
+}
+
+  .white-space_nowrap {
+    white-space: nowrap;
+}
+
+  .c_icon\.strong {
+    color: var(--colors-icon-strong);
 }
 
   .d_grid {
@@ -435,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;
 }
@@ -463,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);
@@ -596,14 +644,14 @@
     bottom: calc(var(--spacing-medium) * -1);
 }
 
-  .jc_space-between {
-    justify-content: space-between;
-}
-
   .font-style_italic {
     font-style: italic;
 }
 
+  .bd-c_stroke\.error {
+    border-color: var(--colors-stroke-error);
+}
+
   .grid-tc_repeat\(2\,_1fr\) {
     grid-template-columns: repeat(2, 1fr);
 }
@@ -926,6 +974,10 @@
     content: "";
 }
 
+  .focusWithin\:td_none:focus-within {
+    text-decoration: none;
+}
+
   .focusVisible\:ring_none:is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -1042,6 +1094,9 @@
   @media screen and (min-width: 29.75rem) {
     .mobileWide\:max-w_surface\.medium {
       max-width: var(--sizes-surface-medium);
+}
+    .mobileWide\:d_none {
+      display: none;
 }
 }
 
@@ -1157,8 +1212,59 @@
 }
 
   @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:d_grid {
+      display: grid;
+}
+    .mobileWideDown\:ov_hidden {
+      overflow: hidden;
+}
+    .mobileWideDown\:white-space_nowrap {
+      white-space: nowrap;
+}
+    .mobileWideDown\:max-h_large {
+      max-height: var(--sizes-large);
+}
+    .mobileWideDown\:tov_ellipsis {
+      text-overflow: ellipsis;
+}
     .mobileWideDown\:cg_3xsmall {
       column-gap: var(--spacing-3xsmall);
+}
+    .mobileWideDown\:grid-tc_1fr_auto {
+      grid-template-columns: 1fr auto;
+}
+    .mobileWideDown\:ai_center {
+      align-items: center;
+}
+    .mobileWideDown\:trs-prop_max-height {
+      --transition-prop: max-height;
+      transition-property: max-height;
+}
+    .mobileWideDown\:trs-dur_slow {
+      --transition-duration: var(--durations-slow);
+      transition-duration: var(--durations-slow);
+}
+    .mobileWideDown\:trs-tmf_ease-in {
+      --transition-easing: ease-in;
+      transition-timing-function: ease-in;
+}
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:open\:d_inline:is([open], [data-open], [data-state="open"]) {
+      display: inline;
+}
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:open\:white-space_pre-wrap:is([open], [data-open], [data-state="open"]) {
+      white-space: pre-wrap;
+}
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:open\:max-h_none:is([open], [data-open], [data-state="open"]) {
+      max-height: none;
 }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "55.0.14-alpha.0",
+  "version": "55.0.16-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,17 +33,16 @@
     "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",
-    "@ndla/forms": "^9.0.7-alpha.0",
+    "@ndla/forms": "^9.0.8-alpha.0",
     "@ndla/hooks": "^2.1.8",
     "@ndla/icons": "^7.0.8-alpha.0",
     "@ndla/licenses": "^8.0.0-alpha.0",
     "@ndla/modal": "^7.0.7-alpha.0",
-    "@ndla/primitives": "^0.0.18",
-    "@ndla/safelink": "^6.0.1-alpha.0",
+    "@ndla/primitives": "^0.0.19",
+    "@ndla/safelink": "^6.0.2-alpha.0",
     "@ndla/styled-system": "^0.0.8",
     "@ndla/tooltip": "^8.0.1",
     "@ndla/typography": "^0.4.23",
@@ -79,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6fdfbed9f18bbd725c837fb74de2f093e80d5605"
+  "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 { 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/AudioPlayer/AudioPlayer.tsx

@@ -22,6 +22,7 @@ const AudioPlayerWrapper = styled("div", {
     borderColor: "stroke.default",
     borderRadius: "xsmall",
     boxShadow: "full",
+    marginBlockEnd: "4xsmall",
     overflow: "hidden",
   },
 });