@ndla/ui 54.0.2 → 54.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "54.0.2",
+  "version": "54.0.4",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,17 +31,17 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^4.0.3",
-    "@ndla/button": "^13.0.3",
+    "@ndla/accordion": "^4.0.5",
+    "@ndla/button": "^13.0.5",
     "@ndla/core": "^5.0.1",
     "@ndla/dropdown-menu": "^1.0.38",
-    "@ndla/forms": "^8.0.3",
+    "@ndla/forms": "^8.0.5",
     "@ndla/hooks": "^2.1.7",
-    "@ndla/icons": "^6.1.6",
+    "@ndla/icons": "^6.1.8",
     "@ndla/licenses": "^7.2.6",
-    "@ndla/modal": "^6.0.2",
-    "@ndla/notion": "^7.0.2",
-    "@ndla/safelink": "^5.1.6",
+    "@ndla/modal": "^6.0.4",
+    "@ndla/notion": "^7.0.4",
+    "@ndla/safelink": "^5.1.8",
     "@ndla/tooltip": "^8.0.1",
     "@ndla/typography": "^0.4.22",
     "@ndla/util": "^4.0.4",
@@ -66,8 +66,8 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/types-backend": "^0.2.82",
-    "@ndla/types-embed": "^4.1.7",
+    "@ndla/types-backend": "^0.2.86",
+    "@ndla/types-embed": "^4.1.8",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "84069e3b3a58e43981a00f31520ff0e9919beb3f"
+  "gitHead": "c3c7ec99f9fa1bcd8e6d6f0c96d77f59773323cc"
 }

package/src/Article/Article.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { ReactNode, forwardRef, ComponentPropsWithRef, useMemo, CSSProperties } from "react";
 import { SerializedStyles, css } from "@emotion/react";
 import styled from "@emotion/styled";

package/src/BlogPost/BlogPost.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import parse from "html-react-parser";
 import { useTranslation } from "react-i18next";
 import { css } from "@emotion/react";

package/src/CampaignBlock/CampaignBlock.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import parse from "html-react-parser";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";

package/src/ContactBlock/ContactBlock.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { css } from "@emotion/react";

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { CSSProperties, ComponentProps, useMemo } from "react";
 
 import { css } from "@emotion/react";

package/src/Embed/ImageEmbed.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import parse from "html-react-parser";
 import { MouseEventHandler, ReactNode, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -141,8 +142,13 @@ const ImageEmbed = ({
   renderContext = "article",
   children,
 }: Props) => {
-  const [isBylineHidden, setIsBylineHidden] = useState(hideByline(embed.embedData.size));
+  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 parsedDescription = useMemo(() => {
     if (embed.embedData.caption || renderContext === "article") {
@@ -161,10 +167,6 @@ const ImageEmbed = ({
 
   const { data, embedData } = embed;
 
-  // 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 = inGrid && !embedData.align ? {} : { "data-float": embedData.align };
-
   const altText = embedData.alt || "";
 
   const figureType = getFigureType(embedData.size, embedData.align);
@@ -181,7 +183,7 @@ const ImageEmbed = ({
       <ImageWrapper
         src={!isCopyrighted ? canonicalUrl?.(data) : undefined}
         crop={crop}
-        size={embedData.size}
+        embedData={embedData}
         pagePath={path}
       >
         <Image
@@ -194,10 +196,20 @@ const ImageEmbed = ({
           border={embedData.border}
           expandButton={
             <ExpandButton
-              size={embedData.size}
+              embedData={embedData}
               expanded={!!imageSizes}
               bylineHidden={isBylineHidden}
-              onExpand={() => setImageSizes((p) => (p ? undefined : expandedSizes))}
+              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)}
             />
           }
@@ -235,15 +247,16 @@ interface ImageWrapperProps {
     endX: number;
     endY: number;
   };
-  size?: string;
+  embedData: ImageEmbedData;
 }
-const hideByline = (size?: string): boolean => {
-  return !!size && size.endsWith("-hide-byline");
+
+const hideByline = (embed: ImageEmbedData): boolean => {
+  return (!!embed.size && embed.size.endsWith("-hide-byline")) || embed.hideByline === "true";
 };
 
-const ImageWrapper = ({ src, crop, size, children, pagePath }: ImageWrapperProps) => {
+const ImageWrapper = ({ src, crop, children, pagePath, embedData }: ImageWrapperProps) => {
   const { t } = useTranslation();
-  if (isSmall(size) || hideByline(size) || !src || (pagePath && src.endsWith(pagePath))) {
+  if (isSmall(embedData.size) || hideByline(embedData) || !src || (pagePath && src.endsWith(pagePath))) {
     return <>{children}</>;
   }
 
@@ -256,7 +269,7 @@ const ImageWrapper = ({ src, crop, size, children, pagePath }: ImageWrapperProps
 };
 
 interface ExpandButtonProps {
-  size?: string;
+  embedData: ImageEmbedData;
   expanded: boolean;
   bylineHidden: boolean;
   onExpand: MouseEventHandler<HTMLButtonElement>;
@@ -282,9 +295,9 @@ const BylineButton = styled.button`
   }
 `;
 
-const ExpandButton = ({ size, expanded, bylineHidden, onExpand, onHideByline }: ExpandButtonProps) => {
+const ExpandButton = ({ embedData, expanded, bylineHidden, onExpand, onHideByline }: ExpandButtonProps) => {
   const { t } = useTranslation();
-  if (isSmall(size)) {
+  if (isSmall(embedData.size)) {
     return (
       <button
         type="button"
@@ -297,7 +310,7 @@ const ExpandButton = ({ size, expanded, bylineHidden, onExpand, onHideByline }:
       </button>
     );
   }
-  if (hideByline(size)) {
+  if (hideByline(embedData)) {
     return (
       <BylineButton
         type="button"

package/src/Embed/conceptComponents.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { forwardRef, ReactNode, RefAttributes } from "react";
 import { useTranslation } from "react-i18next";
 import { css } from "@emotion/react";

package/src/FactBox/FactBox.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { ComponentProps, ReactNode, forwardRef, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { css } from "@emotion/react";

package/src/Figure/Figure.tsx

@@ -8,6 +8,7 @@
 
 // N.B These components is used to render static markup serverside
 
+/** @jsxImportSource @emotion/react */
 import { ComponentPropsWithRef, forwardRef, useMemo } from "react";
 import { SerializedStyles, css } from "@emotion/react";
 import styled from "@emotion/styled";

package/src/Layout/LayoutItem.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { HTMLAttributes, ReactNode, useMemo } from "react";
 import { css } from "@emotion/react";
 import { mq, breakpoints } from "@ndla/core";

package/src/Layout/OneColumn.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { ComponentPropsWithoutRef } from "react";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";

package/src/Layout/PageContainer.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { ComponentPropsWithoutRef } from "react";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";

package/src/Logo/Logo.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { useMemo } from "react";
 import { SerializedStyles, css } from "@emotion/react";
 import styled from "@emotion/styled";

package/src/Notion/NotionImage.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { animations, breakpoints, colors, mq, spacing } from "@ndla/core";

package/src/Resource/BlockResource.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { ReactNode, useMemo } from "react";
 import styled from "@emotion/styled";
 import { colors, spacing, stackOrder } from "@ndla/core";

package/src/Resource/ListResource.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { ReactNode, useMemo } from "react";
 import styled from "@emotion/styled";
 import { spacing, colors, breakpoints, mq, stackOrder } from "@ndla/core";

package/src/Search/ContentTypeResult.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { ReactElement, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ButtonV2 } from "@ndla/button";

package/src/Search/SearchResultSleeve.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";

package/src/Table/Table.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import throttle from "lodash.throttle";
 import { ReactNode, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { css } from "@emotion/react";

package/src/TagSelector/DropdownIndicator.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { DropdownIndicatorProps, components } from "react-select";

package/src/TagSelector/Input.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { components, InputProps } from "react-select";
 import { css } from "@emotion/react";
 import { colors, spacing } from "@ndla/core";

package/src/TagSelector/Menu.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { MenuProps, components } from "react-select";
 import { css } from "@emotion/react";
 import { colors } from "@ndla/core";

package/src/TagSelector/Option.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { OptionProps } from "react-select";
 import styled from "@emotion/styled";
 import { buttonStyleV2 as buttonStyle } from "@ndla/button";

package/src/TagSelector/ValueButton.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+/** @jsxImportSource @emotion/react */
 import { MultiValueProps } from "react-select";
 import styled from "@emotion/styled";
 import { buttonStyleV2 as buttonStyle } from "@ndla/button";