@ndla/ui 55.0.12-alpha.0 → 55.0.13-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/Notion/NotionImage.tsx

@@ -7,13 +7,10 @@
  */
 
 /** @jsxImportSource @emotion/react */
-import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { animations, breakpoints, colors, misc, mq, spacing } from "@ndla/core";
-import { ExpandTwoArrows, CursorClick } from "@ndla/icons/action";
-import { Play } from "@ndla/icons/common";
+import { animations, breakpoints, colors, mq, spacing } from "@ndla/core";
+import { Image } from "@ndla/primitives";
 import { Figure } from "../Figure";
-import Image from "../Image";
 
 const StyledImageWrapper = styled.div`
   overflow: hidden;
@@ -41,7 +38,6 @@ const StyledImage = styled(Image)`
 `;
 
 interface Props {
-  type: "image" | "video" | "h5p" | "iframe" | "external" | "audio" | undefined;
   src: string;
   alt: string;
 }
@@ -57,58 +53,12 @@ const StyledFigure = styled(Figure)`
   }
 `;
 
-export const NotionImage = ({ src, alt, type }: Props) => {
+export const NotionImage = ({ src, alt }: Props) => {
   return (
     <StyledFigure type={"full-column"}>
       <StyledImageWrapper>
-        <StyledImage alt={alt} src={src} expandButton={<OpenButton type={type} />} />
+        <StyledImage alt={alt} src={src} />
       </StyledImageWrapper>
     </StyledFigure>
   );
 };
-
-interface OpenButtonProps {
-  type?: "image" | "video" | "h5p" | "iframe" | "external" | "audio";
-}
-
-export const FigureActionIndicator = styled.div`
-  all: unset;
-  cursor: pointer;
-  position: absolute;
-  padding: 0;
-  bottom: 8px;
-  right: 8px;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.3s ease-out;
-  // The 65 is added to alter the opacity.
-  background-color: ${colors.background.default}65;
-  border-radius: ${misc.borderRadiusLarge};
-  border: 0;
-  svg {
-    transition: transform 0.4s ease-out;
-    width: 18px;
-    height: 18px;
-    fill: ${colors.brand.primary};
-    color: ${colors.brand.primary};
-  }
-  ${mq.range({ until: breakpoints.tablet })} {
-    display: none;
-  }
-`;
-
-export const OpenButton = ({ type }: OpenButtonProps) => {
-  const { t } = useTranslation();
-  return (
-    <FigureActionIndicator data-open-button="" aria-label={t("license.images.itemImage.zoomImageButtonLabel")}>
-      {type === "image" && <ExpandTwoArrows />}
-      {type === "h5p" && <CursorClick style={{ width: "24px", height: "24px" }} />}
-      {type === "iframe" && <CursorClick style={{ width: "24px", height: "24px" }} />}
-      {type === "external" && <CursorClick style={{ width: "24px", height: "24px" }} />}
-      {type === "video" && <Play style={{ width: "24px", height: "24px" }} />}
-    </FigureActionIndicator>
-  );
-};

package/src/ResourceBox/ResourceBox.tsx

@@ -9,8 +9,8 @@
 import styled from "@emotion/styled";
 import { breakpoints, fonts, mq, colors, spacing } from "@ndla/core";
 import { Launch } from "@ndla/icons/common";
+import { Image } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
-import Image from "../Image";
 
 const ResourceBoxContainer = styled.div`
   display: flex;
@@ -52,18 +52,6 @@ const ContentWrapper = styled.div`
   }
 `;
 
-const StyledButton = styled(SafeLinkButton)`
-  display: flex;
-  gap: ${spacing.xxsmall};
-  align-items: center;
-  border: 1px solid ${colors.brand.tertiary};
-  :hover {
-    background-color: ${colors.brand.primary};
-    border: 1px solid ${colors.brand.primary};
-    color: ${colors.white};
-  }
-`;
-
 const StyledImage = styled(Image)`
   && {
     object-fit: cover;
@@ -98,10 +86,10 @@ export const ResourceBox = ({ image, title, caption, url, buttonText }: Props) =
       <ContentWrapper>
         <Title>{title}</Title>
         <Caption>{caption}</Caption>
-        <StyledButton to={url} target="_blank" variant="outline" shape="pill">
+        <SafeLinkButton to={url} target="_blank" variant="secondary">
           {buttonText}
           <Launch aria-hidden />
-        </StyledButton>
+        </SafeLinkButton>
       </ContentWrapper>
     </ResourceBoxContainer>
   );

package/src/Search/ContentTypeResult.tsx

@@ -9,6 +9,7 @@
 /** @jsxImportSource @emotion/react */
 import { ReactElement, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
 import { ButtonV2 } from "@ndla/button";
 import { Additional, ChevronDown, ChevronUp } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
@@ -64,6 +65,12 @@ type Props = {
   unGrouped?: boolean;
 };
 
+const StyledSafeLink = styled(SafeLink)`
+  &[data-highlighted="true"] {
+    ${highlightStyle}
+  }
+`;
+
 const ContentTypeResult = ({
   contentTypeResult,
   onNavigate,
@@ -139,8 +146,7 @@ const ContentTypeResult = ({
 
             return (
               <StyledListItem key={path} delayAnimation={delayAnimation}>
-                <SafeLink
-                  css={shouldHighlight && highlightStyle}
+                <StyledSafeLink
                   data-highlighted={shouldHighlight || false}
                   {...linkProps}
                   onClick={() => {
@@ -154,7 +160,7 @@ const ContentTypeResult = ({
                   )}
                   {linkContent}
                   {renderAdditionalIcon(t("resource.additionalTooltip"), additional)}
-                </SafeLink>
+                </StyledSafeLink>
               </StyledListItem>
             );
           })}

package/src/Search/SearchResultSleeve.tsx

@@ -79,6 +79,9 @@ const StyledSearchLink = styled(SafeLink)`
     color: ${colors.text.light};
     padding-left: ${spacing.xsmall};
   }
+  &[data-highlighted="true"] {
+    ${highlightStyle};
+  }
 `;
 
 type WrapperProps = {
@@ -304,7 +307,7 @@ const SearchResultSleeve = ({
         <div>
           <SearchLinkContainer>
             <StyledSearchLink
-              css={keyboardPathNavigation === GO_TO_SEARCHPAGE && highlightStyle}
+              data-highlighted={keyboardPathNavigation === GO_TO_SEARCHPAGE}
               to={allResultUrl}
               tabIndex={-1}
             >
@@ -314,7 +317,7 @@ const SearchResultSleeve = ({
             </StyledSearchLink>
             {suggestion && suggestionUrl && (
               <StyledSearchLink
-                css={keyboardPathNavigation === GO_TO_SUGGESTION && highlightStyle}
+                data-highlighted={keyboardPathNavigation === GO_TO_SUGGESTION}
                 to={suggestionUrl}
                 tabIndex={-1}
               >

package/src/ZendeskButton/ZendeskButton.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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 { forwardRef, useState } from "react";
+import { Button, ButtonProps } from "@ndla/primitives";
+
+// TODO: Let's consider abandoning `disabled` on the button here. It should instead just open/close the widget based on its current state.
+
+export interface ZendeskButtonProps extends ButtonProps {
+  widgetKey: string;
+  locale: string;
+}
+
+declare global {
+  interface Window {
+    zE: (modifier: string, action: string, callback?: (() => void) | string) => void;
+  }
+}
+
+export const ZendeskButton = forwardRef<HTMLButtonElement, ZendeskButtonProps>(
+  ({ locale, variant = "secondary", widgetKey, children, ...rest }, ref) => {
+    const [loading, setLoading] = useState(false);
+    const handleClick = () => {
+      if (window && !window.zE) {
+        setLoading(true);
+        // Asynchronously load zendesk scripts for better performance
+        const script = document.createElement("script");
+        script.id = "ze-snippet";
+        script.type = "text/javascript";
+        script.async = true;
+        script.onload = () => {
+          if (window.zE) {
+            window.zE("webWidget", "setLocale", locale);
+            window.zE("webWidget:on", "close", () => {
+              setLoading(false);
+            });
+            window.zE("webWidget", "open");
+          }
+        };
+        script.src = `https://static.zdassets.com/ekr/snippet.js?key=${widgetKey}`;
+        document.body.appendChild(script);
+      } else if (window?.zE) {
+        window.zE("webWidget", "open");
+      }
+    };
+
+    return (
+      <Button onClick={handleClick} variant={variant} id="zendeskButton" disabled={loading} {...rest} ref={ref}>
+        {children}
+      </Button>
+    );
+  },
+);

package/src/index.ts

@@ -172,3 +172,7 @@ export { LinkBlock, LinkBlockSection } from "./LinkBlock";
 export type { Article as ArticleType } from "./types";
 
 export { CodeBlock, codeLanguageOptions } from "./CodeBlock";
+
+export { ZendeskButton } from "./ZendeskButton/ZendeskButton";
+
+export type { ZendeskButtonProps } from "./ZendeskButton/ZendeskButton";

package/src/locale/messages-en.ts

@@ -822,6 +822,7 @@ const messages = {
       url: "Error loading the audio.",
       caption: "Sorry, an error occurred while loading the audio.",
     },
+    valueText: "{{start}} of {{end}}",
     controls: {
       forward15sec: "Forward 15 seconds",
       rewind15sec: "Rewind 15 seconds",

package/src/locale/messages-nb.ts

@@ -822,6 +822,7 @@ const messages = {
       url: "Feil ved lasting av lydfil.",
       caption: "Beklager, en feil oppstod ved lasting av lydfil.",
     },
+    valueText: "{{start}} av {{end}}",
     controls: {
       forward15sec: "Spol 15 sekunder fram",
       rewind15sec: "Spol 15 sekunder tilbake",

package/src/locale/messages-nn.ts

@@ -822,6 +822,7 @@ const messages = {
       url: "Feil ved lasting av lydfil.",
       caption: "Orsak, ein feil oppstod ved lasting av lydfil.",
     },
+    valueText: "{{start}} av {{end}}",
     controls: {
       forward15sec: "Spol 15 sekund fram",
       rewind15sec: "Spol 15 sekund tilbake",