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

package/src/Embed/ImageEmbed.tsx

@@ -6,26 +6,21 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
 import parse from "html-react-parser";
-import { MouseEventHandler, ReactNode, useMemo, useState } from "react";
+import { ReactNode, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors, misc, spacing } from "@ndla/core";
 import { Plus } from "@ndla/icons/action";
 import { ChevronDown, ChevronUp } from "@ndla/icons/common";
-import { COPYRIGHTED } from "@ndla/licenses";
+import { Figure, FigureSize, FigureVariantProps, Image } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { ImageEmbedData, ImageMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { RenderContext } from "./types";
-import { Figure, FigureType } from "../Figure";
-import Image from "../Image";
 import { EmbedByline } from "../LicenseByline";
 
 interface Props {
   embed: ImageMetaData;
   previewAlt?: boolean;
-  inGrid?: boolean;
   lang?: string;
   renderContext?: RenderContext;
   children?: ReactNode;
@@ -49,21 +44,15 @@ export const getLicenseCredits = (copyright?: {
 };
 
 export const errorSvgSrc = `data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E`;
-const isSmall = (size?: string): size is "xsmall" | "small" => size === "xsmall" || size === "small";
 
-const isAlign = (align?: string): align is "left" | "right" => align === "left" || align === "right";
-
-const getFigureType = (size?: string, align?: string): FigureType => {
-  if (size && isSmall(size) && align && isAlign(align)) {
-    return `${size}-${align}`;
-  }
-  if (size && isSmall(size) && !align) {
-    return size as FigureType;
-  }
-  if (align && isAlign(align)) {
-    return align;
-  }
-  return "full";
+const getFigureProps = (size?: string, float?: string): FigureVariantProps => {
+  const actualFloat = float === "left" ? "left" : float === "right" ? "right" : undefined;
+  const replacedSize: FigureSize = (size?.replace("-hide-byline", "") ?? "full") as FigureSize;
+  return {
+    float: actualFloat,
+    // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.
+    size: replacedSize === "full" && float ? "medium" : replacedSize,
+  };
 };
 
 const getSizes = (size?: string, align?: string) => {
@@ -111,36 +100,127 @@ export const getCrop = (data: ImageEmbedData) => {
 
 const expandedSizes = "(min-width: 1024px) 1024px, 100vw";
 
-const StyledFigure = styled(Figure)`
-  &:hover {
-    [data-byline-button] {
-      background: ${colors.white};
-    }
-    button[data-expanded] {
-      transform: scale(1.2);
-    }
-  }
-  button[data-expanded="true"] {
-    svg {
-      transform: rotate(-45deg);
-    }
-  }
-  &[data-float="right"] {
-    float: right;
-  }
-  &[data-float="left"] {
-    float: left;
-  }
-`;
+const ImageWrapper = styled("div", {
+  base: {
+    overflow: "hidden",
+    position: "relative",
+    width: "100%",
+    "& img": {
+      width: "100%",
+    },
+  },
+  variants: {
+    svg: {
+      true: {
+        display: "flex",
+        justifyContent: "center",
+      },
+      false: {},
+    },
+    border: {
+      true: {
+        border: "1px solid",
+        // TODO: Not sure if we want this color.
+        borderColor: "surface.brand.1.strong",
+        borderBottom: "0",
+        borderRadius: "xsmall",
+        borderBottomLeftRadius: "0",
+        borderBottomRightRadius: "0",
+      },
+      false: {},
+    },
+    expandable: {
+      true: {
+        cursor: "pointer",
+      },
+      false: {},
+    },
+  },
+});
 
-const ImageEmbed = ({ embed, previewAlt, inGrid, lang, renderContext = "article", children }: Props) => {
+const StyledFigure = styled(Figure, {
+  base: {
+    _hover: {
+      "& [data-byline-button]": {
+        background: "background.default",
+      },
+      "& button[data-expanded]": {
+        transform: "scale(1.2)",
+      },
+    },
+    "& button[data-expanded='true']": {
+      "& svg": {
+        transform: "rotate(-45deg)",
+      },
+    },
+  },
+});
+
+// TODO: Ask about BylineButton styling. Not included in design
+const BylineButton = styled(
+  "button",
+  {
+    base: {
+      cursor: "pointer",
+      position: "absolute",
+      zIndex: "base",
+      bottom: "0",
+      right: "0",
+      paddingBlock: "xsmall",
+      paddingInline: "xsmall",
+      transitionProperty: "transform, background-color, color",
+      transitionDuration: "normal",
+      transitionTimingFunction: "ease-out",
+      background: "background.default/20",
+      border: "0",
+      "& svg": {
+        transitionProperty: "transform",
+        transitionDuration: "normal",
+        transitionTimingFunction: "ease-out",
+        fill: "primary",
+      },
+    },
+  },
+  { defaultProps: { type: "button" } },
+);
+
+const ExpandButton = styled(
+  "button",
+  {
+    base: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      position: "absolute",
+      padding: "0",
+      top: "xsmall",
+      right: "xsmall",
+      width: "medium",
+      height: "medium",
+      border: "2px solid",
+      borderColor: "background.default",
+      transitionProperty: "transform, background-color, color",
+      transitionDuration: "normal",
+      transitionTimingFunction: "ease-out",
+      color: "background.default",
+      backgroundColor: "surface.action",
+      borderRadius: "large",
+      "& svg": {
+        transitionProperty: "transform",
+        transitionDuration: "normal",
+        transitionTimingFunction: "ease-out",
+      },
+    },
+  },
+  { defaultProps: { type: "button" } },
+);
+
+const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", children }: Props) => {
   const [isBylineHidden, setIsBylineHidden] = useState(hideByline(embed.embedData));
   const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);
-  // Full-size figures automatically get a margin of {spacing.normal} on its y-axis if a float is not set (or if float is an empty string).
-  // This adds some margin to normal figures within an article, but should not happen for figures in a grid.
-  const [floatAttr, setFloatAttr] = useState<{ "data-float"?: string }>(() =>
-    inGrid && !embed.embedData.align ? {} : { "data-float": embed.embedData.align },
-  );
+  const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);
+  const { t } = useTranslation();
 
   const parsedDescription = useMemo(() => {
     if (embed.embedData.caption || renderContext === "article") {
@@ -152,60 +232,56 @@ const ImageEmbed = ({ embed, previewAlt, inGrid, lang, renderContext = "article"
   }, [embed, renderContext]);
 
   if (embed.status === "error") {
-    const { align, size } = embed.embedData;
-    const figureType = getFigureType(size, align);
-    return <EmbedErrorPlaceholder type={"image"} figureType={figureType} />;
+    return <EmbedErrorPlaceholder type={"image"} figureType={figureProps?.size} float={figureProps?.float} />;
   }
 
   const { data, embedData } = embed;
 
   const altText = embedData.alt || "";
 
-  const figureType = getFigureType(embedData.size, embedData.align);
   const sizes = getSizes(embedData.size, embedData.align);
 
   const focalPoint = getFocalPoint(embedData);
   const crop = getCrop(embedData);
 
-  const isCopyrighted = data.copyright.license.license.toLowerCase() === COPYRIGHTED;
-
   const toggleImageSize = () => {
-    if (!imageSizes) {
-      setImageSizes(expandedSizes);
-      setTimeout(() => {
-        setFloatAttr({});
-      }, 400); //Removing the float parameter too quickly causes the image to be resized from left regardless
-    } else {
-      setImageSizes(undefined);
-      setFloatAttr({ "data-float": embedData.align });
-    }
+    setImageSizes((sizes) => (!sizes ? expandedSizes : undefined));
   };
 
+  // TODO: Check how this works with `children`. Will only be important for ED
   return (
-    <StyledFigure type={imageSizes ? undefined : figureType} {...floatAttr}>
+    <StyledFigure float={figureProps?.float} size={imageSizes ? "full" : figureProps?.size ?? "medium"}>
       {children}
-      <Image
-        focalPoint={focalPoint}
-        contentType={data.image.contentType}
-        crop={crop}
-        sizes={imageSizes ?? sizes}
-        alt={altText}
-        src={data.image.imageUrl}
-        border={embedData.border}
-        onExpand={isAlign(embedData.align) ? toggleImageSize : undefined}
-        expanded={!!imageSizes}
-        expandButton={
+      <ImageWrapper border={embedData.border === "true"} expandable={!!figureProps?.float}>
+        <Image
+          focalPoint={focalPoint}
+          contentType={data.image.contentType}
+          crop={crop}
+          sizes={imageSizes ?? sizes}
+          alt={altText}
+          src={data.image.imageUrl}
+          lang={lang}
+          onClick={figureProps?.float ? toggleImageSize : undefined}
+        />
+        {!!embedData.align && (
           <ExpandButton
-            embedData={embedData}
-            expanded={!!imageSizes}
-            align={embedData.align}
-            bylineHidden={isBylineHidden}
-            onExpand={toggleImageSize}
-            onHideByline={() => setIsBylineHidden((p) => !p)}
-          />
-        }
-        lang={lang}
-      />
+            aria-label={t(`license.images.itemImage.zoom${imageSizes ? "Out" : ""}ImageButtonLabel`)}
+            onClick={toggleImageSize}
+            data-expanded={!!imageSizes}
+          >
+            <Plus />
+          </ExpandButton>
+        )}
+        {(embedData.size?.endsWith("-hide-byline") || embedData.hideByline === "true") && (
+          <BylineButton
+            data-byline-button=""
+            aria-label={t(`license.images.itemImage.${isBylineHidden ? "expandByline" : "minimizeByline"}`)}
+            onClick={() => setIsBylineHidden((p) => !p)}
+          >
+            {isBylineHidden ? <ChevronDown /> : <ChevronUp />}
+          </BylineButton>
+        )}
+      </ImageWrapper>
       {isBylineHidden ? null : (
         <EmbedByline
           type="image"
@@ -222,84 +298,4 @@ const hideByline = (embed: ImageEmbedData): boolean => {
   return (!!embed.size && embed.size.endsWith("-hide-byline")) || embed.hideByline === "true";
 };
 
-interface ExpandButtonProps {
-  embedData: ImageEmbedData;
-  align?: string;
-  expanded: boolean;
-  bylineHidden: boolean;
-  onExpand: MouseEventHandler<HTMLButtonElement>;
-  onHideByline: MouseEventHandler<HTMLButtonElement>;
-}
-
-const BylineButton = styled.button`
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-  bottom: 0;
-  right: 0;
-  padding: ${spacing.small};
-  transition: all 0.3s ease-out;
-  background: ${colors.background.default}20;
-  border: 0;
-
-  svg {
-    transition: transform 0.4s ease-out;
-    width: ${spacing.normal};
-    height: ${spacing.normal};
-    fill: ${colors.brand.primary};
-  }
-`;
-
-const StyledButton = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  position: absolute;
-  padding: 0;
-  top: ${spacing.small};
-  right: ${spacing.small};
-  width: ${spacing.normal};
-  height: ${spacing.normal};
-  border: 2px solid ${colors.white};
-  transition: all 0.3s ease-out;
-  color: ${colors.white};
-  background-color: ${colors.brand.primary};
-  border-radius: ${misc.borderRadiusLarge};
-  svg {
-    transition: transform 0.4s ease-out;
-    height: ${spacing.nsmall};
-    width: ${spacing.nsmall};
-  }
-`;
-
-const ExpandButton = ({ align, embedData, expanded, bylineHidden, onExpand, onHideByline }: ExpandButtonProps) => {
-  const { t } = useTranslation();
-  if (isAlign(align)) {
-    return (
-      <StyledButton
-        type="button"
-        aria-label={t(`license.images.itemImage.zoom${expanded ? "Out" : ""}ImageButtonLabel`)}
-        onClick={onExpand}
-        data-expanded={expanded}
-      >
-        <Plus />
-      </StyledButton>
-    );
-  }
-  if (hideByline(embedData)) {
-    return (
-      <BylineButton
-        type="button"
-        data-byline-button=""
-        aria-label={t(`license.images.itemImage.${bylineHidden ? "expandByline" : "minimizeByline"}`)}
-        onClick={onHideByline}
-      >
-        {bylineHidden ? <ChevronDown /> : <ChevronUp />}
-      </BylineButton>
-    );
-  }
-  return null;
-};
-
 export default ImageEmbed;

package/src/Embed/InlineTriggerButton.tsx

@@ -0,0 +1,72 @@
+/**
+ * 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, KeyboardEvent, forwardRef, useCallback, useRef } from "react";
+import { styled } from "@ndla/styled-system/jsx";
+import { composeRefs } from "@ndla/util";
+
+const StyledSpan = styled("span", {
+  base: {
+    position: "relative",
+    overflow: "visible",
+    borderBottom: "1px solid",
+    borderStyle: "dashed",
+    borderColor: "stroke.hover",
+    paddingBlock: "4xsmall",
+    paddingInline: "4xsmall",
+    width: "fit-content",
+    cursor: "pointer",
+    _hover: {
+      borderColor: "text.link",
+      background: "surface.actionSubtle.hover",
+    },
+    _active: {
+      borderColor: "text.link",
+      background: "surface.actionSubtle.active",
+    },
+    // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.
+    _focusVisible: {
+      outline: "none",
+      borderRadius: "0",
+      _after: {
+        content: '""',
+        position: "absolute",
+        inset: "0",
+        outline: "3px",
+        borderRadius: "xsmall",
+        outlineColor: "stroke.default",
+        outlineOffset: "3px",
+        outlineStyle: "solid",
+      },
+    },
+  },
+});
+
+export const InlineTriggerButton = forwardRef<HTMLSpanElement, ComponentPropsWithRef<"span">>(
+  ({ onClick, ...props }, ref) => {
+    const spanRef = useRef<HTMLSpanElement>(null);
+
+    // Emulate a button click when pressing Enter or Space
+    const onKeyboardEvent = useCallback((event: KeyboardEvent<HTMLSpanElement>) => {
+      if (event.key === "Enter" || event.key === " ") {
+        spanRef.current?.click();
+      }
+    }, []);
+
+    return (
+      <StyledSpan
+        ref={composeRefs(spanRef, ref)}
+        onKeyUp={onKeyboardEvent}
+        onClick={onClick}
+        role="button"
+        tabIndex={0}
+        {...props}
+      />
+    );
+  },
+);

package/src/Embed/UnknownEmbed.tsx

@@ -7,21 +7,20 @@
  */
 
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
+import { Text } from "@ndla/primitives";
 import { MetaData } from "@ndla/types-embed";
 
 interface Props {
   embed: MetaData<any, any>;
 }
 
-const StyledSpan = styled.span`
-  color: ${colors.support.red};
-`;
-
 const UnknownEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
-  return <StyledSpan>{t("embed.unsupported", { type: embed.resource })}</StyledSpan>;
+  return (
+    <Text color="text.error" asChild consumeCss>
+      <span>{t("embed.unsupported", { type: embed.resource })}</span>
+    </Text>
+  );
 };
 
 export default UnknownEmbed;

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -7,6 +7,7 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
+import { ExpandableBox, ExpandableBoxSummary, FramedContent } from "@ndla/primitives";
 import { UuDisclaimerEmbedData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
 import IframeEmbed from "./IframeEmbed";
@@ -14,7 +15,6 @@ import UuDisclaimerEmbed from "./UuDisclaimerEmbed";
 import { ArticleWrapper } from "../Article";
 import CopyParagraphButton from "../CopyParagraphButton";
 import FactBox from "../FactBox";
-import FramedContent from "../FramedContent";
 import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: UuDisclaimerEmbedData = {
@@ -143,10 +143,10 @@ export const WithHtml: StoryObj<typeof UuDisclaimerEmbed> = {
     children: (
       <>
         <p>Dette er html med en ekspanderboks</p>
-        <details>
-          <summary>Tittel</summary>
+        <ExpandableBox>
+          <ExpandableBoxSummary>Tittel</ExpandableBoxSummary>
           <p>innhold</p>
-        </details>
+        </ExpandableBox>
       </>
     ),
   },

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -8,36 +8,28 @@
 
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { fonts, spacing } from "@ndla/core";
 import { InformationOutline } from "@ndla/icons/common";
+import { MessageBox } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
+import { styled } from "@ndla/styled-system/jsx";
 import { UuDisclaimerMetaData } from "@ndla/types-embed";
-import { MessageBox } from "../Messages";
+
 interface Props {
   embed: UuDisclaimerMetaData;
   children?: ReactNode;
 }
 
-const StyledMessageBox = styled(MessageBox)`
-  display: flex;
-  flex-align: center;
-`;
-
-const Disclaimer = styled.div`
-  display: flow;
-  ${fonts.sizes("18px", "24px")};
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-`;
-
-const DisclaimerWrapper = styled.div`
-  > :nth-child(2) {
-    margin-top: ${spacing.xsmall};
-  }
-`;
+const StyledMessageBox = styled(MessageBox, {
+  base: {
+    display: "flex",
+    alignItems: "center",
+  },
+});
+const Disclaimer = styled("div", {
+  base: {
+    textStyle: "body.medium",
+  },
+});
 
 const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   const { t } = useTranslation();
@@ -58,8 +50,8 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   ) : null;
 
   return (
-    <DisclaimerWrapper role="region">
-      <StyledMessageBox type="info" contentEditable={false}>
+    <div role="region">
+      <StyledMessageBox variant="warning" contentEditable={false}>
         <InformationOutline />
         <Disclaimer>
           {embedData.disclaimer}
@@ -67,7 +59,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
         </Disclaimer>
       </StyledMessageBox>
       {children}
-    </DisclaimerWrapper>
+    </div>
   );
 };
 

package/src/Embed/index.ts

@@ -15,11 +15,10 @@ export { default as FootnoteEmbed } from "./FootnoteEmbed";
 export { default as BrightcoveEmbed } from "./BrightcoveEmbed";
 export { default as ContentLinkEmbed } from "./ContentLinkEmbed";
 export { default as RelatedContentEmbed } from "./RelatedContentEmbed";
-export { default as ConceptEmbed } from "./ConceptEmbed";
-export { ConceptNotionV2 } from "./conceptComponents";
+export { ConceptEmbed, InlineConcept, BlockConcept } from "./ConceptEmbed";
+export type { InlineConceptProps, BlockConceptProps } from "./ConceptEmbed";
 export { default as ConceptListEmbed } from "./ConceptListEmbed";
 export { default as UnknownEmbed } from "./UnknownEmbed";
-export { InlineConcept, BlockConcept } from "./ConceptEmbed";
 export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export { default as CopyrightEmbed } from "./CopyrightEmbed";
 export { default as CodeEmbed } from "./CodeEmbed";