@ndla/ui 54.0.5 → 55.0.0-alpha.0

package/src/Embed/ImageEmbed.stories.tsx

@@ -11,7 +11,6 @@ import { Meta, StoryObj } from "@storybook/react";
 import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { ImageEmbedData } from "@ndla/types-embed";
 import ImageEmbed from "./ImageEmbed";
-import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";
 import { ArticleWrapper } from "../Article";
 import LayoutItem, { OneColumn } from "../Layout";
 
@@ -111,7 +110,6 @@ export default meta;
 
 export const ImageEmbedStory: StoryObj<typeof ImageEmbed> = {
   args: {
-    heartButton: StoryFavoriteButton,
     embed: {
       resource: "image",
       status: "success",
@@ -125,7 +123,6 @@ ImageEmbedStory.storyName = "ImageEmbed";
 
 export const Failed: StoryObj<typeof ImageEmbed> = {
   args: {
-    heartButton: StoryFavoriteButton,
     embed: {
       resource: "image",
       status: "error",
@@ -136,7 +133,6 @@ export const Failed: StoryObj<typeof ImageEmbed> = {
 
 export const HiddenByline: StoryObj<typeof ImageEmbed> = {
   args: {
-    heartButton: StoryFavoriteButton,
     embed: {
       resource: "image",
       status: "success",
@@ -151,7 +147,6 @@ export const HiddenByline: StoryObj<typeof ImageEmbed> = {
 
 export const FullWidth: StoryObj<typeof ImageEmbed> = {
   args: {
-    heartButton: StoryFavoriteButton,
     embed: {
       resource: "image",
       status: "success",
@@ -168,7 +163,6 @@ export const FullWidth: StoryObj<typeof ImageEmbed> = {
 
 export const Cropped: StoryObj<typeof ImageEmbed> = {
   args: {
-    heartButton: StoryFavoriteButton,
     embed: {
       resource: "image",
       status: "success",
@@ -214,7 +208,6 @@ const TextWrapper = ({ children }: { children: ReactNode }) => (
 
 export const FloatLeft: StoryObj<typeof ImageEmbed> = {
   args: {
-    heartButton: StoryFavoriteButton,
     embed: {
       resource: "image",
       status: "success",
@@ -234,7 +227,6 @@ export const FloatLeft: StoryObj<typeof ImageEmbed> = {
 
 export const FloatRight: StoryObj<typeof ImageEmbed> = {
   args: {
-    heartButton: StoryFavoriteButton,
     embed: {
       resource: "image",
       status: "success",
@@ -255,7 +247,6 @@ export const FloatRight: StoryObj<typeof ImageEmbed> = {
 
 export const FloatRightSmall: StoryObj<typeof ImageEmbed> = {
   args: {
-    heartButton: StoryFavoriteButton,
     embed: {
       resource: "image",
       status: "success",
@@ -276,7 +267,6 @@ export const FloatRightSmall: StoryObj<typeof ImageEmbed> = {
 
 export const FloatLeftSmall: StoryObj<typeof ImageEmbed> = {
   args: {
-    heartButton: StoryFavoriteButton,
     embed: {
       resource: "image",
       status: "success",
@@ -297,7 +287,6 @@ export const FloatLeftSmall: StoryObj<typeof ImageEmbed> = {
 
 export const FloatRightExtraSmall: StoryObj<typeof ImageEmbed> = {
   args: {
-    heartButton: StoryFavoriteButton,
     embed: {
       resource: "image",
       status: "success",
@@ -318,7 +307,6 @@ export const FloatRightExtraSmall: StoryObj<typeof ImageEmbed> = {
 
 export const FloatLeftExtraSmall: StoryObj<typeof ImageEmbed> = {
   args: {
-    heartButton: StoryFavoriteButton,
     embed: {
       resource: "image",
       status: "success",

package/src/Embed/ImageEmbed.tsx

@@ -11,23 +11,20 @@ import parse from "html-react-parser";
 import { MouseEventHandler, ReactNode, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { colors, spacing, utils } from "@ndla/core";
+import { colors, spacing } from "@ndla/core";
 import { ExpandTwoArrows } from "@ndla/icons/action";
 import { ArrowCollapse, ChevronDown, ChevronUp } from "@ndla/icons/common";
 import { COPYRIGHTED } from "@ndla/licenses";
 import { ImageEmbedData, ImageMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { CanonicalUrlFuncs, HeartButtonType, RenderContext } from "./types";
+import { RenderContext } from "./types";
 import { Figure, FigureType, figureActionIndicatorStyle } from "../Figure";
-import Image, { ImageLink } from "../Image";
+import Image from "../Image";
 import { EmbedByline } from "../LicenseByline";
 
 interface Props {
   embed: ImageMetaData;
   previewAlt?: boolean;
-  path?: string;
-  heartButton?: HeartButtonType;
-  canonicalUrl?: CanonicalUrlFuncs["image"];
   inGrid?: boolean;
   lang?: string;
   renderContext?: RenderContext;
@@ -131,17 +128,7 @@ const StyledFigure = styled(Figure)`
   }
 `;
 
-const ImageEmbed = ({
-  embed,
-  previewAlt,
-  heartButton: HeartButton,
-  inGrid,
-  path,
-  lang,
-  canonicalUrl,
-  renderContext = "article",
-  children,
-}: Props) => {
+const ImageEmbed = ({ embed, previewAlt, inGrid, 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).
@@ -180,94 +167,51 @@ const ImageEmbed = ({
   return (
     <StyledFigure type={imageSizes ? undefined : figureType} {...floatAttr}>
       {children}
-      <ImageWrapper
-        src={!isCopyrighted ? canonicalUrl?.(data) : undefined}
+      <Image
+        focalPoint={focalPoint}
+        contentType={data.image.contentType}
         crop={crop}
-        embedData={embedData}
-        pagePath={path}
-      >
-        <Image
-          focalPoint={focalPoint}
-          contentType={data.image.contentType}
-          crop={crop}
-          sizes={imageSizes ?? sizes}
-          alt={altText}
-          src={data.image.imageUrl}
-          border={embedData.border}
-          expandButton={
-            <ExpandButton
-              embedData={embedData}
-              expanded={!!imageSizes}
-              bylineHidden={isBylineHidden}
-              onExpand={() => {
-                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 });
-                }
-              }}
-              onHideByline={() => setIsBylineHidden((p) => !p)}
-            />
-          }
-          lang={lang}
-        />
-      </ImageWrapper>
+        sizes={imageSizes ?? sizes}
+        alt={altText}
+        src={data.image.imageUrl}
+        border={embedData.border}
+        expandButton={
+          <ExpandButton
+            embedData={embedData}
+            expanded={!!imageSizes}
+            bylineHidden={isBylineHidden}
+            onExpand={() => {
+              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 });
+              }
+            }}
+            onHideByline={() => setIsBylineHidden((p) => !p)}
+          />
+        }
+        lang={lang}
+      />
       {isBylineHidden ? null : (
         <EmbedByline
           type="image"
           copyright={data.copyright}
-          hideOnLargeScreens={isSmall(embedData.size) && !imageSizes}
           description={parsedDescription}
-          bottomRounded
           visibleAlt={previewAlt ? embed.embedData.alt : ""}
-          inGrid={inGrid}
-        >
-          {HeartButton && !isCopyrighted && <HeartButton embed={embed} />}
-        </EmbedByline>
+        />
       )}
     </StyledFigure>
   );
 };
 
-const HiddenSpan = styled.span`
-  ${utils.visuallyHidden};
-`;
-
-interface ImageWrapperProps {
-  src?: string;
-  children: React.ReactNode;
-  pagePath?: string;
-  crop?: {
-    startX: number;
-    startY: number;
-    endX: number;
-    endY: number;
-  };
-  embedData: ImageEmbedData;
-}
-
 const hideByline = (embed: ImageEmbedData): boolean => {
   return (!!embed.size && embed.size.endsWith("-hide-byline")) || embed.hideByline === "true";
 };
 
-const ImageWrapper = ({ src, crop, children, pagePath, embedData }: ImageWrapperProps) => {
-  const { t } = useTranslation();
-  if (isSmall(embedData.size) || hideByline(embedData) || !src || (pagePath && src.endsWith(pagePath))) {
-    return <>{children}</>;
-  }
-
-  return (
-    <ImageLink src={src} crop={crop}>
-      {children}
-      <HiddenSpan>{t("license.images.itemImage.ariaLabel")}</HiddenSpan>
-    </ImageLink>
-  );
-};
-
 interface ExpandButtonProps {
   embedData: ImageEmbedData;
   expanded: boolean;

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -9,7 +9,7 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
+import { fonts, spacing } from "@ndla/core";
 import { InformationOutline } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
 import { UuDisclaimerMetaData } from "@ndla/types-embed";
@@ -26,6 +26,7 @@ const StyledMessageBox = styled(MessageBox)`
 
 const Disclaimer = styled.div`
   display: flow;
+  ${fonts.sizes("18px", "24px")};
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;

package/src/Embed/conceptComponents.tsx

@@ -12,14 +12,13 @@ import { useTranslation } from "react-i18next";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
-import { COPYRIGHTED } from "@ndla/licenses";
 import { ConceptData, ConceptVisualElementMeta } from "@ndla/types-embed";
-import { ExternalEmbed, HeartButtonType, IframeEmbed } from ".";
+import { ExternalEmbed, IframeEmbed } from ".";
 import BrightcoveEmbed from "./BrightcoveEmbed";
 import H5pEmbed from "./H5pEmbed";
 import ImageEmbed from "./ImageEmbed";
 import { Gloss } from "../Gloss";
-import { EmbedByline } from "../LicenseByline";
+import { LicenseContainerContent } from "../LicenseByline/EmbedByline";
 import { Copyright } from "../types";
 
 export type ConceptType = "concept" | "gloss";
@@ -47,8 +46,6 @@ interface ConceptNotionProps extends RefAttributes<HTMLDivElement>, Omit<Concept
   tags?: string[];
   subjects?: string[];
   headerButtons?: ReactNode;
-  heartButton?: HeartButtonType;
-  conceptHeartButton?: ReactNode;
   exampleIds?: string;
   exampleLangs?: string;
   showTitle?: boolean;
@@ -182,6 +179,13 @@ const StyledList = styled.ul`
     padding: ${spacing.xxsmall};
   }
 `;
+const BylineWrapper = styled.div`
+  padding: 0 ${spacing.normal} ${spacing.small} ${spacing.normal};
+  span {
+    font-family: ${fonts.sans};
+    ${fonts.sizes("16px", "26px")};
+  }
+`;
 
 export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
   (
@@ -196,8 +200,6 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
       previewAlt,
       tags,
       subjects,
-      heartButton,
-      conceptHeartButton,
       conceptType,
       glossData,
       headerButtons,
@@ -230,9 +232,9 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
             <>
               <StyledNotionDialogContent>
                 {visualElement?.resource === "image" ? (
-                  <ImageEmbed embed={visualElement} heartButton={heartButton} lang={lang} />
+                  <ImageEmbed embed={visualElement} lang={lang} />
                 ) : visualElement?.resource === "brightcove" ? (
-                  <BrightcoveEmbed embed={visualElement} heartButton={heartButton} />
+                  <BrightcoveEmbed embed={visualElement} />
                 ) : visualElement?.resource === "h5p" ? (
                   <H5pEmbed embed={visualElement} />
                 ) : visualElement?.resource === "iframe" ? (
@@ -281,9 +283,9 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
           )}
         </ContentSpacing>
         {copyright && (
-          <EmbedByline copyright={copyright} type={conceptType as ConceptType}>
-            {copyright.license?.license.toLowerCase() !== COPYRIGHTED && conceptHeartButton}
-          </EmbedByline>
+          <BylineWrapper>
+            <LicenseContainerContent copyright={copyright} type={conceptType as ConceptType} />
+          </BylineWrapper>
         )}
       </div>
     );

package/src/LicenseByline/EmbedByline.stories.tsx

@@ -6,25 +6,9 @@
  *
  */
 
-import styled from "@emotion/styled";
 import { Meta, StoryFn } from "@storybook/react";
-import { IconButtonV2 } from "@ndla/button";
-import { breakpoints, mq, spacing } from "@ndla/core";
-import { HeartOutline } from "@ndla/icons/action";
-import { Switch } from "@ndla/switch";
 import EmbedByline from "./EmbedByline";
 
-const ButtonWrapper = styled.div`
-  display: flex;
-  gap: ${spacing.small};
-  ${mq.range({ until: breakpoints.tablet })} {
-    flex: 1;
-    width: 100%;
-    justify-content: space-between;
-    align-items: space-between;
-  }
-`;
-
 export default {
   title: "Components/EmbedByline",
   component: EmbedByline,
@@ -34,14 +18,6 @@ export default {
     bottomRounded: true,
     visibleAlt: "Synlig alt-tekst kan legges her, eller fjernes helt",
     type: "image",
-    children: (
-      <ButtonWrapper>
-        <Switch checked={false} label="Bytt til synstolket video" onChange={() => {}} id="switch" />
-        <IconButtonV2 variant="ghost" aria-label="Legg til i favoritter">
-          <HeartOutline />
-        </IconButtonV2>
-      </ButtonWrapper>
-    ),
     description:
       "Bildetekst som kan være ganske lang. Denne roboten er laget av DALLE2, en helt vaskeekte AI. Hvis denne teksten blir veldig lang kommer den på flere linjer.",
     copyright: {
@@ -71,8 +47,7 @@ export default {
 } as Meta<typeof EmbedByline>;
 
 export const EmbedBylineStory: StoryFn<typeof EmbedByline> = (args) => {
-  const { children, ...rest } = args;
-  return <EmbedByline {...rest}>{children}</EmbedByline>;
+  return <EmbedByline {...args} />;
 };
 
 EmbedBylineStory.storyName = "EmbedByline";

package/src/LicenseByline/EmbedByline.tsx

@@ -8,9 +8,8 @@
 
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, misc, mq, spacing } from "@ndla/core";
+import { colors, fonts, misc, spacing } from "@ndla/core";
 import { WarningOutline } from "@ndla/icons/common";
 import { getLicenseByAbbreviation, getLicenseCredits } from "@ndla/licenses";
 import { ICopyright as ArticleCopyright } from "@ndla/types-backend/article-api";
@@ -28,9 +27,6 @@ interface BaseProps {
   children?: ReactNode;
   visibleAlt?: string;
   error?: true | false;
-  hideOnLargeScreens?: boolean;
-  first?: boolean;
-  inGrid?: boolean;
 }
 
 export interface EmbedBylineErrorProps extends BaseProps {
@@ -78,19 +74,13 @@ export type EmbedBylineTypeProps =
 
 type Props = EmbedBylineTypeProps | EmbedBylineErrorProps;
 
-export type LicenseType = ReturnType<typeof getLicenseByAbbreviation>;
-
-const BylineWrapper = styled.div`
+const BylineWrapper = styled.figcaption`
   display: flex;
   flex-direction: column;
-  gap: ${spacing.small};
   font-family: ${fonts.sans};
-  ${fonts.sizes("18px", "24px")};
-  background-color: ${colors.brand.lightest};
-  padding: ${spacing.nsmall} ${spacing.normal};
-  border: 1px solid ${colors.brand.light};
-  border-top: none;
-
+  ${fonts.sizes("16px", "26px")};
+  padding: ${spacing.small} 0;
+  background-color: ${colors.white};
   &[data-top-rounded="true"] {
     border-top-right-radius: ${misc.borderRadius};
     border-top-left-radius: ${misc.borderRadius};
@@ -104,97 +94,75 @@ const BylineWrapper = styled.div`
   &[data-error="true"] {
     border: none;
     background-color: ${colors.support.redLightest};
-  }
-  &[data-first="true"] {
-    border-top: 1px solid ${colors.brand.light};
-  }
-  &[data-hide-on-large-screens="true"] {
-    ${mq.range({ from: breakpoints.tablet })} {
-      display: none;
-    }
-  }
-`;
-
-const mobileStyling = css`
-  align-items: flex-start;
-  gap: ${spacing.xsmall};
-  flex-direction: column;
-`;
-
-const RightsWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: ${spacing.nsmall};
-
-  &[data-grid="true"] {
-    ${mobileStyling}
-  }
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    ${mobileStyling}
+    padding: ${spacing.nsmall} ${spacing.normal};
+    ${fonts.sizes("18px", "24px")};
   }
 `;
 
 const StyledSpan = styled.span`
   font-style: italic;
   color: grey;
+  font-family: ${fonts.sans};
+  ${fonts.sizes("16px", "26px")};
 `;
 
-const LicenseInformationWrapper = styled.div`
-  flex: 1;
-  padding-right: ${spacing.xsmall};
-`;
-
-const EmbedByline = ({
-  type,
-  topRounded,
-  bottomRounded,
-  description,
-  children,
-  visibleAlt,
-  hideOnLargeScreens,
-  first = true,
-  inGrid = false,
-  ...props
-}: Props) => {
-  const { t, i18n } = useTranslation();
+const EmbedByline = ({ type, topRounded, bottomRounded, description, children, visibleAlt, ...props }: Props) => {
+  const { t } = useTranslation();
 
   if (props.error) {
     const typeString = type === "h5p" ? "H5P" : t(`embed.type.${type}`).toLowerCase();
     return (
       <BylineWrapper data-top-rounded={topRounded} data-bottom-rounded={bottomRounded} data-error={true}>
-        <LicenseDescription description={t("embed.embedError", { type: typeString })} icon={<WarningOutline />} />
+        <LicenseDescription warningByline={props.error} icon={<WarningOutline />}>
+          {t("embed.embedError", { type: typeString })}
+        </LicenseDescription>
       </BylineWrapper>
     );
   }
 
   const { copyright } = props;
 
+  return (
+    <>
+      <BylineWrapper>
+        <div>
+          <LicenseContainerContent type={type} copyright={copyright}>
+            {description}
+          </LicenseContainerContent>
+          {children}
+        </div>
+      </BylineWrapper>
+      {visibleAlt ? <StyledSpan>{`Alt: ${visibleAlt}`}</StyledSpan> : null}
+    </>
+  );
+};
+
+interface LicenseContainerProps {
+  children?: ReactNode;
+  copyright: EmbedBylineTypeProps["copyright"];
+  type: Props["type"];
+}
+
+export const LicenseContainerContent = ({ children, copyright, type }: LicenseContainerProps) => {
+  const { t, i18n } = useTranslation();
   const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? "", i18n.language) : undefined;
   const authors = getLicenseCredits(copyright);
   const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];
 
+  const Component = children ? LicenseDescription : "span";
+
   return (
-    <BylineWrapper
-      data-top-rounded={topRounded}
-      data-hide-on-large-screens={hideOnLargeScreens}
-      data-bottom-rounded={bottomRounded}
-      data-first={first}
-    >
-      {description && <LicenseDescription description={description} />}
-      {visibleAlt ? <StyledSpan>{`Alt: ${visibleAlt}`}</StyledSpan> : null}
-      <RightsWrapper data-grid={inGrid}>
-        {license ? <LicenseLink license={license} asLink={!!license.url.length} /> : null}
-        <LicenseInformationWrapper>
-          <span>
-            <b>{`${t(`embed.type.${type}`)}${captionAuthors.length ? ":" : ""}`} </b>
-            {captionAuthors.map((author) => author.name).join(", ")}
-          </span>
-        </LicenseInformationWrapper>
-        {children}
-      </RightsWrapper>
-    </BylineWrapper>
+    <Component>
+      {children}
+      {` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`}
+      {captionAuthors.map((author) => author.name).join(", ")}
+      {license ? (
+        <>
+          {" / "}
+          <LicenseLink license={license} />
+        </>
+      ) : null}
+    </Component>
   );
 };