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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "55.0.12-alpha.0",
+  "version": "55.0.13-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -10,7 +10,8 @@
   "scripts": {
     "build": "node ../../scripts/build.js package",
     "build:types": "tsc -p tsconfig.build.json",
-    "prepublish": "concurrently 'yarn build:types' 'yarn build:css'",
+    "prepublish": "concurrently 'yarn build:types' 'yarn build:css' 'yarn build:panda'",
+    "build:panda": "mkdir -p dist && concurrently 'panda cssgen --minimal --outfile dist/styles.css' 'panda ship --outfile dist/panda.buildinfo.json'",
     "build:css": "webpack && cp ./dist/*.css ./es && cp ./dist/*.css ./lib"
   },
   "repository": {
@@ -25,27 +26,29 @@
   ],
   "author": "ndla@knowit.no",
   "files": [
+    "dist",
     "lib",
     "src",
     "es",
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^5.0.5-alpha.0",
-    "@ndla/button": "^14.0.5-alpha.0",
+    "@ndla/accordion": "^5.0.6-alpha.0",
+    "@ndla/button": "^14.0.6-alpha.0",
     "@ndla/core": "^5.0.1",
     "@ndla/dropdown-menu": "^1.0.38",
-    "@ndla/forms": "^9.0.5-alpha.0",
+    "@ndla/forms": "^9.0.6-alpha.0",
     "@ndla/hooks": "^2.1.8",
-    "@ndla/icons": "^7.0.6-alpha.0",
+    "@ndla/icons": "^7.0.7-alpha.0",
     "@ndla/licenses": "^8.0.0-alpha.0",
-    "@ndla/modal": "^7.0.5-alpha.0",
-    "@ndla/safelink": "^5.1.15",
+    "@ndla/modal": "^7.0.6-alpha.0",
+    "@ndla/primitives": "^0.0.17",
+    "@ndla/safelink": "^6.0.0-alpha.0",
+    "@ndla/styled-system": "^0.0.8",
     "@ndla/tooltip": "^8.0.1",
     "@ndla/typography": "^0.4.23",
     "@ndla/util": "^4.1.0",
     "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-slider": "^1.1.2",
     "date-fns": "^2.30.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0",
@@ -59,14 +62,16 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "i18next": "^23.11.5",
-    "react": ">= 16.8.0",
-    "react-dom": ">= 16.8.0",
+    "react": ">= 18",
+    "react-dom": ">= 18",
     "react-i18next": "^14.1.1",
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
+    "@ndla/preset-panda": "^0.0.10",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^4.1.8",
+    "@pandacss/dev": "^0.42.0",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -76,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8c3254246b993068a867ab9ec9594347d5ebf439"
+  "gitHead": "93dde6fe4aaca52642f8fa0a27f4acad359207cb"
 }

package/src/AudioPlayer/AudioPlayer.tsx

@@ -6,141 +6,120 @@
  *
  */
 
-import { ReactNode, useMemo, useState } from "react";
+import { ReactNode, useId, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
-import { Cross as CrossIcon } from "@ndla/icons/action";
+import { Heading, Text, Button } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
-import { Heading, Text } from "@ndla/typography";
+import { styled } from "@ndla/styled-system/jsx";
 import Controls from "./Controls";
 import SpeechControl from "./SpeechControl";
 
-const InfoWrapper = styled.div`
-  border: 1px solid ${colors.brand.lighter};
-  border-bottom: 0;
-  display: flex;
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    display: block;
-  }
-`;
-
-const ImageWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  flex: 1 0 auto;
-
-  width: 200px;
-  height: 200px;
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    width: 260px;
-    height: 260px;
-  }
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    max-height: 400px;
-    max-width: 100%;
-    width: 100%;
-    height: auto;
-    img {
-      object-fit: scale-down;
-    }
-  }
-`;
-
-const TextWrapper = styled.div`
-  padding: ${spacing.small};
-  width: 100%;
-  &[data-has-image="true"] {
-    ${mq.range({ from: breakpoints.tablet })} {
-      padding: ${spacing.small} ${spacing.normal};
-    }
-    ${mq.range({ from: breakpoints.tabletWide })} {
-      padding: ${spacing.small} ${spacing.medium};
-    }
-  }
-`;
-
-const TitleWrapper = styled.div`
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    display: flex;
-    justify-content: space-between;
-  }
-`;
-
-const Title = styled(Heading)`
-  &[data-has-desc="true"] {
-    margin: ${spacing.xsmall} 0 ${spacing.small};
-  }
-`;
-
-const LinkToTextVersionWrapper = styled.div`
-  &[data-margin="true"] {
-    margin-top: ${spacing.small};
-  }
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    margin: ${spacing.small} 0;
-  }
-`;
-
-const TextVersionWrapper = styled.div`
-  border: 1px solid ${colors.brand.lighter};
-  border-top: 0;
-  ${fonts.sizes("16px", "30px")};
-  font-family: ${fonts.sans};
-  &.audio-player-text-version-hidden {
-    display: none;
-  }
-  padding: ${spacing.normal} ${spacing.small} ${spacing.small};
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.normal};
-  }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    padding: ${spacing.normal} ${spacing.medium};
-  }
-`;
-
-const TextVersionHeadingWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-`;
-
-const TextVersionHeading = styled(Heading)`
-  font-weight: ${fonts.weight.semibold};
-  margin: ${spacing.small} 0 ${spacing.normal};
-`;
-
-const LinkButton = styled(ButtonV2)`
-  box-shadow: none;
-  padding-left: 0;
-  padding-right: ${spacing.xxsmall};
-  min-height: ${spacing.medium};
-  flex: 0 0 auto;
-  &:hover,
-  &:focus {
-    box-shadow: ${colors.link};
-  }
-`;
-
-const CloseText = styled.span`
-  display: inline-block;
-  margin-left: ${spacing.xsmall};
-`;
-
-const TextVersionText = styled.div`
-  max-width: 670px;
-  & span > * {
-    white-space: pre-wrap;
-  }
-`;
+// TODO: Could the audio metadata be more tightly coupled to the audio player?
+
+const AudioPlayerWrapper = styled("div", {
+  base: {
+    border: "1px solid",
+    borderColor: "stroke.default",
+    borderRadius: "xsmall",
+    boxShadow: "full",
+    overflow: "hidden",
+  },
+});
+
+const InfoWrapper = styled("div", {
+  base: {
+    display: "flex",
+    tabletWideDown: {
+      display: "block",
+    },
+  },
+});
+
+const ImageWrapper = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    flex: "1 0 auto",
+    width: "surface.4xsmall",
+    height: "surface.4xsmall",
+    overflow: "hidden",
+    "& img": {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+    },
+    desktop: {
+      width: "260px",
+      height: "260px",
+    },
+    tabletWideDown: {
+      maxHeight: "surface.small",
+      maxWidth: "100%",
+      width: "100%",
+      height: "auto",
+    },
+  },
+});
+
+const TextWrapper = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "flex-start",
+    flexDirection: "column",
+    gap: "xsmall",
+    padding: "xsmall",
+    width: "100%",
+    "&[data-has-image='true']": {
+      tablet: {
+        paddingBlock: "xsmall",
+        paddingInline: "medium",
+      },
+    },
+  },
+});
+
+const TitleWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+    tabletWide: {
+      width: "100%",
+      flexDirection: "row",
+      justifyContent: "space-between",
+    },
+  },
+});
+
+const TextVersionWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+    borderBlockStart: "1px solid",
+    borderColor: "stroke.default",
+    paddingBlock: "medium",
+    paddingInline: "xsmall",
+    tablet: {
+      paddingInline: "medium",
+    },
+  },
+});
+
+const TextVersionText = styled("div", {
+  base: {
+    maxWidth: "surface.xlarge",
+    "& span > *": {
+      whiteSpace: "pre-wrap",
+    },
+  },
+});
+
+const TextVersionButton = styled(Button, {
+  base: {
+    alignSelf: "flex-start",
+  },
+});
 
 const DESCRIPTION_MAX_LENGTH = 200;
 
@@ -158,40 +137,37 @@ type Props = {
     url: string;
     alt: string;
   };
-  staticRenderId?: string;
 };
 
-const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersion, staticRenderId }: Props) => {
+const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersion }: Props) => {
   const { t } = useTranslation();
   const [showTextVersion, setShowTextVersion] = useState(false);
   const [showFullDescription, setShowFullDescription] = useState(false);
   const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);
+  const textDescriptionId = useId();
 
   if (speech) {
-    return (
-      <div data-audio-player={1} data-speech={1} data-src={src} data-title={title}>
-        <SpeechControl src={src} title={title} />
-      </div>
-    );
+    return <SpeechControl src={src} title={title} />;
   }
 
   const toggleTextVersion = () => {
-    setShowTextVersion(!showTextVersion);
+    setShowTextVersion((curr) => !curr);
   };
 
-  type TextVersionComponentProps = {
-    margin?: boolean;
-  };
-  const TextVersionComponent = ({ margin }: TextVersionComponentProps) => (
-    <LinkToTextVersionWrapper data-margin={margin}>
-      <ButtonV2 size="normal" shape="pill" onClick={toggleTextVersion} data-audio-text-button-id={staticRenderId}>
-        {t("audio.textVersion.heading")}
-      </ButtonV2>
-    </LinkToTextVersionWrapper>
+  const textVersionButton = (
+    <TextVersionButton
+      variant="secondary"
+      aria-expanded={showTextVersion}
+      aria-controls={textDescriptionId}
+      size="small"
+      onClick={toggleTextVersion}
+    >
+      {t(showTextVersion ? "audio.textVersion.close" : "audio.textVersion.heading")}
+    </TextVersionButton>
   );
 
   return (
-    <>
+    <AudioPlayerWrapper>
       <InfoWrapper>
         {img && (
           <ImageWrapper>
@@ -202,48 +178,35 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
           <TitleWrapper>
             <div>
               {subtitle?.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}
-              <Title element="h3" headingStyle="h4" margin="none" data-has-desc={!!description}>
-                {title}
-              </Title>
+              <Heading asChild consumeCss textStyle="title.large">
+                <h3>{title}</h3>
+              </Heading>
             </div>
-            {textVersion && !img && <TextVersionComponent />}
+            {!!textVersion && !img && textVersionButton}
           </TitleWrapper>
           {description && (
-            <Text element="p" textStyle="meta-text-small" margin="none">
+            <Text textStyle="body.medium">
               {showFullDescription || description.length < DESCRIPTION_MAX_LENGTH
                 ? description
                 : `${truncatedDescription}...`}
-              <ButtonV2 variant="link" onClick={() => setShowFullDescription((p) => !p)}>
+              <Button variant="link" onClick={() => setShowFullDescription((p) => !p)}>
                 {t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)}
-              </ButtonV2>
+              </Button>
             </Text>
           )}
-          {textVersion && img && <TextVersionComponent margin />}
+          {!!textVersion && !!img && textVersionButton}
         </TextWrapper>
       </InfoWrapper>
-      <div data-audio-player={1} data-src={src} data-title={title}>
-        <Controls src={src} title={title} />
-      </div>
-      {textVersion && (showTextVersion || staticRenderId) && (
-        <TextVersionWrapper id={staticRenderId} hidden={!!staticRenderId}>
-          <TextVersionHeadingWrapper>
-            <TextVersionHeading element="h3" headingStyle="h2" margin="small">
-              {t("audio.textVersion.heading")}
-            </TextVersionHeading>
-            <LinkButton
-              variant="link"
-              size="normal"
-              onClick={toggleTextVersion}
-              data-audio-text-button-id={staticRenderId}
-            >
-              <CrossIcon style={{ width: "20px", height: "20px" }} />
-              <CloseText>{t("audio.textVersion.close")}</CloseText>
-            </LinkButton>
-          </TextVersionHeadingWrapper>
+      <Controls src={src} title={title} />
+      {!!textVersion && (
+        <TextVersionWrapper id={textDescriptionId} hidden={!showTextVersion}>
+          <Heading asChild textStyle="title.medium" consumeCss>
+            <h3>{t("audio.textVersion.heading")}</h3>
+          </Heading>
           <TextVersionText>{textVersion}</TextVersionText>
         </TextVersionWrapper>
       )}
-    </>
+    </AudioPlayerWrapper>
   );
 };