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

package/src/CodeBlock/CodeBlock.tsx

@@ -6,176 +6,93 @@
  *
  */
 
-import { useState, useEffect, ReactNode, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { colors, fonts, spacing } from "@ndla/core";
-import { Copy } from "@ndla/icons/action";
-import { Done } from "@ndla/icons/editor";
-import { copyTextToClipboard } from "@ndla/util";
-import { ICodeLangugeOption, codeLanguageOptions } from "./codeLanguageOptions";
+import { type ComponentPropsWithRef, forwardRef, useMemo } from "react";
+import { cx } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { type JsxStyleProps } from "@ndla/styled-system/types";
 
-const Wrapper = styled.div`
-  margin: 15px 0;
-`;
-
-const TitleBar = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-const Title = styled.h3`
-  font-style: normal;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 32px;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: ${colors.text.primary};
-  margin: 5px 0;
-`;
-
-type Props = {
-  code: string;
+interface Props extends JsxStyleProps, ComponentPropsWithRef<"pre"> {
   highlightedCode: string;
   format: string;
-  title?: string | null;
-  actionButton?: ReactNode;
-  showCopy?: boolean;
-};
-
-const StyledPre = styled.pre`
-  border-left: 4px solid ${colors.brand.dark};
-  background-color: ${colors.brand.greyLighter};
-  box-sizing: border-box;
-  overflow-x: auto;
-  .linenumber {
-    display: inline-block;
-    padding: 0 ${spacing.small};
-    border-right: 1px solid #d8d8d8;
-    margin-right: ${spacing.small};
-    color: #7d8b99;
-    text-align: right;
-    width: 40px;
-  }
-  .linenumber[data-first] {
-    padding-top: ${spacing.small};
-  }
-  .linenumber[data-last] {
-    padding-bottom: ${spacing.small};
-  }
-  code {
-    display: block;
-    ${fonts.sizes("14px", "20px")};
-    font-family:
-      Source Code ProVariable,
-      Monaco;
-    margin: 0;
-    padding: 0;
-    white-space: pre;
-  }
-  code::before {
-    content: none;
-  }
-  &::before,
-  &::after {
-    content: none !important;
-  }
-
-  /* The remaining css is copied from the coy theme in prismjs. A lot of css is omitted due to styling clashes */
-  .token.comment,
-  .token.block-comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: #7d8b99;
-  }
-
-  .token.punctuation {
-    color: #5f6364;
-  }
-
-  .token.property,
-  .token.tag,
-  .token.boolean,
-  .token.number,
-  .token.function-name,
-  .token.constant,
-  .token.symbol,
-  .token.deleted {
-    color: #c92c2c;
-  }
-
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.function,
-  .token.builtin,
-  .token.inserted {
-    color: #2f9c0a;
-  }
-
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .token.variable {
-    color: #a67f59;
-    background: rgba(255, 255, 255, 0.5);
-  }
-
-  .token.atrule,
-  .token.attr-value,
-  .token.keyword,
-  .token.class-name {
-    color: #1990b8;
-  }
-
-  .token.regex,
-  .token.important {
-    color: #e90;
-  }
-
-  .language-css .token.string,
-  .style .token.string {
-    color: #a67f59;
-    background: rgba(255, 255, 255, 0.5);
-  }
-
-  .token.important {
-    font-weight: normal;
-  }
-
-  .token.bold {
-    font-weight: bold;
-  }
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-
-  .token.namespace {
-    opacity: 0.7;
-  }
-`;
-
-const getTitleFromFormat = (format: string) => {
-  const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);
-  if (selectedLanguage) {
-    return selectedLanguage.title;
-  }
-  return;
-};
-
-export const Codeblock = ({ actionButton, code, highlightedCode, format, showCopy = false, title }: Props) => {
-  const { t } = useTranslation();
-  const [isCopied, setIsCopied] = useState(false);
-
+}
+
+const Pre = styled("pre", {
+  base: {
+    border: "1px solid",
+    borderColor: "stroke.subtle",
+    borderLeft: "4px solid",
+    borderLeftColor: "stroke.default",
+    borderRadius: "xsmall",
+    boxSizing: "border-box",
+    overflowX: "auto",
+    textStyle: "label.medium",
+    fontFamily: "code",
+    display: "block",
+    whiteSpace: "pre",
+    "& .linenumber": {
+      display: "inline-block",
+      paddingBlock: "0",
+      paddingInline: "small",
+      borderRight: "1px solid",
+      borderColor: "stroke.subtle",
+      width: "xxlarge",
+      textAlign: "right",
+      marginInlineEnd: "xsmall",
+    },
+    "& .linenumber[data-first]": {
+      paddingBlockStart: "xsmall",
+    },
+    "& .linenumber[data-last]": {
+      paddingBlockEnd: "xsmall",
+    },
+    // The remaining css is copied from the coy theme in prismjs. A lot of css is omitted due to styling clashes
+    "& .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata": {
+      color: "#7d8b99",
+    },
+    "& .token.punctuation": {
+      color: "#5f6364",
+    },
+    "& .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted":
+      {
+        color: "#c92c2c",
+      },
+    "& .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted":
+      {
+        color: "#2f9c0a",
+      },
+    "& .token.operator, .token.entity, .token.url, .token.variable": {
+      color: "#a67f59",
+      background: "rgba(255, 255, 255, 0.5)",
+    },
+    "& .token.atrule, .token.attr-value, .token.keyword, .token.class-name": {
+      color: "#1990b8",
+    },
+    "& .token.regex, .token.important": {
+      color: "#e90",
+    },
+    "& .language-css .token.string, .style .token.string": {
+      color: "#a67f59",
+      background: "rgba(255, 255, 255, 0.5)",
+    },
+    "& .token.important": {
+      fontWeight: "normal",
+    },
+    "& .token.bold": {
+      fontWeight: "bold",
+    },
+    "& .token.italic": {
+      fontStyle: "italic",
+    },
+    "& .token.entity": {
+      cursor: "help",
+    },
+    "& .token.namespace": {
+      opacity: "0.7",
+    },
+  },
+});
+
+export const Codeblock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {
   const codeWithLineNumbers = useMemo(() => {
     return highlightedCode
       .split("\n")
@@ -187,42 +104,14 @@ export const Codeblock = ({ actionButton, code, highlightedCode, format, showCop
       .join("\n");
   }, [highlightedCode]);
 
-  useEffect(() => {
-    if (isCopied) {
-      const timer = setInterval(() => setIsCopied(false), 3000);
-      // ensure interval is cleared - also if unmounted
-      return () => {
-        clearTimeout(timer);
-      };
-    }
-  }, [isCopied]);
-
   return (
-    <Wrapper>
-      <TitleBar>
-        <Title>{title || getTitleFromFormat(format)}</Title>
-        {actionButton}
-      </TitleBar>
-      <StyledPre>
-        <code className={`language-${format}`} dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }} />
-      </StyledPre>
-      {showCopy && (
-        <ButtonV2
-          title={t("codeBlock.copyButton")}
-          disabled={isCopied}
-          data-copied-title={t("codeBlock.copiedCode")}
-          data-copy-string={code}
-          onClick={() => {
-            copyTextToClipboard(code);
-            setIsCopied(true);
-          }}
-        >
-          {isCopied ? <Done aria-hidden="true" /> : <Copy aria-hidden="true" />}{" "}
-          {isCopied ? t("codeBlock.copiedCode") : t("codeBlock.copyCode")}
-        </ButtonV2>
-      )}
-    </Wrapper>
+    <Pre
+      className={cx(`language-${format}`, className)}
+      {...props}
+      dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}
+      ref={ref}
+    />
   );
-};
+});
 
 export default Codeblock;

package/src/Concept/Concept.stories.tsx

@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryObj } from "@storybook/react";
+import { ConceptData } from "@ndla/types-embed";
+import { Concept } from "./Concept";
+
+const visualElementData: ConceptData["visualElement"] = {
+  resource: "image",
+  status: "success",
+  embedData: {
+    resource: "image",
+    resourceId: "61181",
+    size: "full",
+    align: "",
+    alt: "Tenåringsjente med lyse fletter slenger på håret. Foto. ",
+    caption:
+      "Den østerrikske tronfølgeren Franz Ferdinand og hans hustru Sophie var på besøk i Sarajevo i 1914. Begge ble skutt og drept av nasjonalisten Gavrilo Princip i det som er kjent som <em>skuddene i Sarajevo</em>. Denne hendelsen var den utløsende årsaken til første verdenskrig.",
+    url: "https://api.test.ndla.no/image-api/v2/images/61181",
+  },
+  data: {
+    id: "61181",
+    metaUrl: "https://api.test.ndla.no/image-api/v3/images/61181",
+    title: {
+      title: "\nHigh angle view of teenage girl with tousled dyed hair dancing at skateboard park\n",
+      language: "nb",
+    },
+    alttext: {
+      alttext: "Tenåringsjente med lyse fletter slenger på håret. Foto. ",
+      language: "nb",
+    },
+    copyright: {
+      license: {
+        license: "CC-BY-NC-4.0",
+        description: "Creative Commons Attribution-NonCommercial 4.0 International",
+        url: "https://creativecommons.org/licenses/by-nc/4.0/",
+      },
+      origin: "https://bilder.ntb.no/r/preview/creative/EXuziiZGWno",
+      creators: [
+        {
+          type: "photographer",
+          name: "Maskot",
+        },
+      ],
+      processors: [],
+      rightsholders: [
+        {
+          type: "rightsholder",
+          name: "NTB",
+        },
+      ],
+      processed: false,
+    },
+    tags: {
+      tags: ["danser", "kultur", "identitet"],
+      language: "nb",
+    },
+    caption: {
+      caption: "Modellklarert.",
+      language: "nb",
+    },
+    supportedLanguages: ["nb"],
+    created: "2022-01-07T08:26:01Z",
+    createdBy: "lA2KgVfhY-fpmgHCYAy5W1DX",
+    modelRelease: "yes",
+    image: {
+      fileName: "S81WiNgl.jpg",
+      size: 1685455,
+      contentType: "image/jpeg",
+      imageUrl: "https://api.test.ndla.no/image-api/raw/S81WiNgl.jpg",
+      dimensions: {
+        width: 2000,
+        height: 1333,
+      },
+      language: "nb",
+    },
+  },
+};
+
+export default {
+  title: "Components/Concept",
+  component: Concept,
+  tags: ["autodocs"],
+  args: {
+    title: "skin - formasjonsskade",
+    lang: "nb",
+    visualElement: visualElementData,
+    copyright: {
+      license: {
+        license: "CC-BY-SA-4.0",
+        description: "Creative Commons Attribution-ShareAlike 4.0 International",
+        url: "https://creativecommons.org/licenses/by-sa/4.0/",
+      },
+      creators: [{ type: "Writer", name: "Sissel Paaske" }],
+      processors: [
+        { type: "Processor", name: "Totaltekst" },
+        { type: "Correction", name: "Arbeidets art" },
+      ],
+      rightsholders: [],
+      processed: false,
+    },
+    children: (
+      <>
+        <p>
+          Ordet «skin» er engelsk og brukes om formasjonsskade som oppstår i boreprosessen i området som grenser inn til
+          brønnen. Skaden er størst i området nærmest hullet, men den kan bre seg utover et stykke fra brønnen. Skin
+          forteller om bergartens permeabilitet i reservoarsonen.
+        </p>
+        <p>Hullveggen skades både av borekronen, små partikler og væsken som brukes i brønnen.</p>
+        <p>
+          Skaden i bergarten gir dårligere forhold for oljen som skal strømme til brønnen. Gangene i bergarten plugges,
+          og det oppstår et trykkfall som reduserer produksjonstrykket i brønnen.
+        </p>
+        <p>
+          Det er viktig å redusere omfanget av skaden ved å velge væsker som passer godt til bergartsegenskapene, og å
+          bore med en borekrone som skader minst mulig.
+        </p>
+        <p>Skader som er dannet av borevæske, kan repareres ved å syrebehandle hullets overflate.</p>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Concept>;
+
+export const Default: StoryObj<typeof Concept> = {};
+
+export const WithoutVisualElement: StoryObj<typeof Concept> = {
+  args: {
+    visualElement: undefined,
+  },
+};
+
+export const WithoutLicenseAndVisualElement: StoryObj<typeof Concept> = {
+  args: {
+    visualElement: undefined,
+    copyright: undefined,
+  },
+};

package/src/Concept/Concept.tsx

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { ComponentPropsWithRef, ReactNode, forwardRef } from "react";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept-api";
+import { ConceptVisualElementMeta } from "@ndla/types-embed";
+import { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from "../Embed";
+import { LicenseContainerContent } from "../LicenseByline/EmbedByline";
+
+export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
+  copyright?: ConceptCopyright;
+  visualElement?: ConceptVisualElementMeta;
+  lang?: string;
+  title?: string;
+  children?: ReactNode;
+}
+
+const StyledFigure = styled(Figure, {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "medium",
+  },
+});
+
+const ContentWrapper = styled("div", {
+  base: {
+    textStyle: "body.large",
+    display: "inline",
+    "& p": {
+      display: "inline",
+    },
+  },
+});
+
+// TODO: Figure out if we need to support tags, subjects and headerButtons.
+
+export const Concept = forwardRef<HTMLElement, ConceptProps>(
+  ({ copyright, visualElement, lang, children, title, ...rest }, ref) => {
+    return (
+      <StyledFigure ref={ref} {...rest}>
+        <ContentWrapper lang={lang}>
+          {!!title && (
+            <>
+              <b>{title}</b>
+              {` – `}
+            </>
+          )}
+          {children}
+        </ContentWrapper>
+        {visualElement?.resource === "image" ? (
+          <ImageEmbed embed={visualElement} lang={lang} />
+        ) : visualElement?.resource === "brightcove" ? (
+          <BrightcoveEmbed embed={visualElement} />
+        ) : visualElement?.resource === "h5p" ? (
+          <H5pEmbed embed={visualElement} />
+        ) : visualElement?.resource === "iframe" ? (
+          <IframeEmbed embed={visualElement} />
+        ) : visualElement?.resource === "external" ? (
+          <ExternalEmbed embed={visualElement} />
+        ) : null}
+        {copyright && <LicenseContainerContent copyright={copyright} type="concept" />}
+      </StyledFigure>
+    );
+  },
+);

package/src/ContactBlock/ContactBlock.tsx

@@ -14,10 +14,10 @@ import styled from "@emotion/styled";
 import { spacing, fonts, colors, mq, breakpoints, misc } from "@ndla/core";
 import { BlobPointy as UnstyledBlobPointy, BlobRound as UnstyledBlobRound } from "@ndla/icons/common";
 import { COPYRIGHTED, getLicenseByAbbreviation } from "@ndla/licenses";
+import { Image } from "@ndla/primitives";
 import { IAuthor, IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { CanonicalUrlFuncs } from "../Embed";
 import { errorSvgSrc } from "../Embed/ImageEmbed";
-import Image, { ImageLink } from "../Image";
 import LicenseLink from "../LicenseByline/LicenseLink";
 
 const BLOB_WIDTH = 90;
@@ -150,9 +150,17 @@ interface LinkWrapperProps {
   children: ReactNode;
 }
 
+const StyledLink = styled.a`
+  text-decoration: none;
+`;
+
 const LinkWrapper = ({ src, children }: LinkWrapperProps) => {
   if (src) {
-    return <ImageLink src={src}>{children}</ImageLink>;
+    return (
+      <StyledLink target="_blank" href={src} rel="noopener noreferrer">
+        {children}
+      </StyledLink>
+    );
   }
   return children;
 };

package/src/ContentTypeBadge/ContentTypeBadgeNew.stories.tsx

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useTranslation } from "react-i18next";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { Video } from "@ndla/icons/editor";
+import { HStack, styled } from "@ndla/styled-system/jsx";
+import { ContentTypeBadge } from "./ContentTypeBadgeNew";
+
+export default {
+  title: "Components/ContentTypeBadgeNew",
+  component: ContentTypeBadge,
+  tags: ["autodocs"],
+  parameters: {
+    inlineStories: true,
+  },
+  args: {
+    contentType: "subject-material",
+  },
+} satisfies Meta<typeof ContentTypeBadge>;
+
+export const Default: StoryObj<typeof ContentTypeBadge> = {};
+
+const StyledHStack = styled(HStack, {
+  base: {
+    flexWrap: "wrap",
+  },
+});
+
+export const AllBadges: StoryFn<typeof ContentTypeBadge> = () => (
+  <StyledHStack gap="3xsmall">
+    <ContentTypeBadge contentType="subject-material" />
+    <ContentTypeBadge contentType="tasks-and-activities" />
+    <ContentTypeBadge contentType="assessment-resources" />
+    <ContentTypeBadge contentType="subject" />
+    <ContentTypeBadge contentType="source-material" />
+    <ContentTypeBadge contentType="learning-path" />
+    <ContentTypeBadge contentType="topic" />
+    <ContentTypeBadge contentType="multidisciplinary-topic" />
+    <ContentTypeBadge contentType="concept" />
+    <ContentTypeBadge contentType="external" />
+    <ContentTypeBadge contentType="image" />
+    <ContentTypeBadge contentType="audio" />
+    <ContentTypeBadge contentType="video" />
+    <ContentTypeBadge contentType="missing" />
+  </StyledHStack>
+);
+
+const StyledContentTypeBadge = styled(ContentTypeBadge, {
+  base: {
+    display: "flex",
+    gap: "4xsmall",
+    alignItems: "center",
+  },
+});
+
+export const ContentOverride: StoryFn<typeof ContentTypeBadge> = () => {
+  const { t } = useTranslation();
+  return (
+    <StyledContentTypeBadge contentType="video">
+      <Video size="small" />
+      {t("contentTypes.video")}
+    </StyledContentTypeBadge>
+  );
+};