@ndla/ui 50.14.2 → 50.15.0

package/src/Embed/FootnoteEmbed.tsx

@@ -8,7 +8,7 @@
 
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { colors, spacing } from "@ndla/core";
+import { spacing } from "@ndla/core";
 import { FootnoteMetaData } from "@ndla/types-embed";
 
 interface Props {
@@ -16,13 +16,6 @@ interface Props {
 }
 
 const FootnoteRef = styled.span`
-  &:target {
-    background-color: ${colors.brand.greyLighter};
-    padding: ${spacing.xxsmall} ${spacing.xsmall};
-    box-shadow:
-      ${spacing.xsmall} 0 0 ${colors.brand.greyLighter},
-      -${spacing.xsmall} 0 0 ${colors.brand.greyLighter};
-  }
   sup {
     a {
       margin-left: -2px;
@@ -30,11 +23,6 @@ const FootnoteRef = styled.span`
       box-shadow: none;
       text-decoration: underline;
     }
-    a:hover,
-    a:focus-within {
-      background-color: ${colors.brand.greyLighter};
-      text-decoration: underline;
-    }
   }
 `;
 

package/src/Embed/H5pEmbed.tsx

@@ -9,13 +9,14 @@
 import styled from "@emotion/styled";
 import { H5pMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
+import { Figure } from "../Figure";
 
 interface Props {
   embed: H5pMetaData;
   isConcept?: boolean;
 }
 
-const StyledFigure = styled.figure`
+const StyledFigure = styled(Figure)`
   iframe {
     height: auto;
   }
@@ -25,15 +26,18 @@ const H5pEmbed = ({ embed, isConcept }: Props) => {
   if (embed.status === "error") {
     return <EmbedErrorPlaceholder type="h5p" />;
   }
-  const fullColumnClass = isConcept ? "c-figure--full-column" : "";
-  const classes = `c-figure ${fullColumnClass} c-figure--resize`;
 
   if (embed.data.oembed) {
-    return <figure className={classes} dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? "" }} />;
+    return (
+      <Figure
+        type={isConcept ? "full-column" : undefined}
+        dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? "" }}
+      />
+    );
   }
 
   return (
-    <StyledFigure className={classes}>
+    <StyledFigure type={isConcept ? "full-column" : undefined}>
       <iframe title={embed.embedData.url} aria-label={embed.embedData.url} src={embed.embedData.url} />
     </StyledFigure>
   );

package/src/Embed/IframeEmbed.tsx

@@ -55,12 +55,6 @@ const IframeEmbed = ({ embed, isConcept }: Props) => {
     );
   }
 
-  const resize = !embedData.url.includes("trinket.io");
-
-  const fullColumnClass = isConcept ? "c-figure--full-column" : "";
-  const resizeClass = resize ? "c-figure--resize" : "";
-  const classes = `c-figure ${fullColumnClass} ${resizeClass}`;
-
   const { width, height, title, url } = embedData;
 
   const strippedWidth = typeof width === "number" ? width : width?.replace(/\s*px/, "");
@@ -68,9 +62,7 @@ const IframeEmbed = ({ embed, isConcept }: Props) => {
   const urlOrTitle = title || url;
 
   return (
-    //@ts-ignore
-    // eslint-disable-next-line react/no-unknown-property
-    <figure className={classes} resizeiframe={`${resize}`}>
+    <Figure type={isConcept ? "full-column" : undefined}>
       <iframe
         ref={iframeRef}
         title={urlOrTitle}
@@ -84,7 +76,7 @@ const IframeEmbed = ({ embed, isConcept }: Props) => {
         frameBorder="0"
         loading="lazy"
       />
-    </figure>
+    </Figure>
   );
 };
 

package/src/Embed/ImageEmbed.stories.tsx

@@ -132,6 +132,21 @@ export const Failed: StoryObj<typeof ImageEmbed> = {
   },
 };
 
+export const HiddenByline: StoryObj<typeof ImageEmbed> = {
+  args: {
+    heartButton: StoryFavoriteButton,
+    embed: {
+      resource: "image",
+      status: "success",
+      embedData: {
+        ...embedData,
+        size: "full-hide-byline",
+      },
+      data: metaData,
+    },
+  },
+};
+
 export const FullWidth: StoryObj<typeof ImageEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,

package/src/Embed/ImageEmbed.tsx

@@ -10,14 +10,14 @@ import parse from "html-react-parser";
 import { MouseEventHandler, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { utils } from "@ndla/core";
+import { colors, spacing, utils } 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 { Figure, FigureType } from "../Figure";
+import { Figure, FigureType, figureActionIndicatorStyle } from "../Figure";
 import Image, { ImageLink } from "../Image";
 import { EmbedByline } from "../LicenseByline";
 
@@ -107,6 +107,23 @@ export const getCrop = (data: ImageEmbedData) => {
 
 const expandedSizes = "(min-width: 1024px) 1024px, 100vw";
 
+const StyledFigure = styled(Figure)`
+  &:hover {
+    [data-byline-button] {
+      background: ${colors.white};
+      svg {
+        transform: scale(1.2);
+      }
+    }
+  }
+  &[data-float="right"] {
+    float: right;
+  }
+  &[data-float="left"] {
+    float: left;
+  }
+`;
+
 const ImageEmbed = ({
   embed,
   previewAlt,
@@ -147,10 +164,7 @@ const ImageEmbed = ({
   const isCopyrighted = data.copyright.license.license.toLowerCase() === COPYRIGHTED;
 
   return (
-    <Figure
-      type={imageSizes ? undefined : figureType}
-      className={imageSizes ? `c-figure--${embedData.align} expanded` : ""}
-    >
+    <StyledFigure type={imageSizes ? undefined : figureType} data-float={embedData.align}>
       <ImageWrapper
         src={!isCopyrighted ? canonicalUrl?.(data) : undefined}
         crop={crop}
@@ -190,7 +204,7 @@ const ImageEmbed = ({
           {HeartButton && !isCopyrighted && <HeartButton embed={embed} />}
         </EmbedByline>
       )}
-    </Figure>
+    </StyledFigure>
   );
 };
 
@@ -236,13 +250,32 @@ interface ExpandButtonProps {
   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 ExpandButton = ({ size, expanded, bylineHidden, onExpand, onHideByline }: ExpandButtonProps) => {
   const { t } = useTranslation();
   if (isSmall(size)) {
     return (
       <button
         type="button"
-        className="c-figure__fullscreen-btn"
+        css={figureActionIndicatorStyle}
         aria-label={t(`license.images.itemImage.zoom${expanded ? "Out" : ""}ImageButtonLabel`)}
         onClick={onExpand}
       >
@@ -251,14 +284,14 @@ const ExpandButton = ({ size, expanded, bylineHidden, onExpand, onHideByline }:
     );
   } else if (hideByline(size)) {
     return (
-      <button
+      <BylineButton
         type="button"
-        className="c-figure__show-byline-btn"
+        data-byline-button=""
         aria-label={t(`license.images.itemImage.${bylineHidden ? "expandByline" : "minimizeByline"}`)}
         onClick={onHideByline}
       >
         {bylineHidden ? <ChevronDown /> : <ChevronUp />}
-      </button>
+      </BylineButton>
     );
   } else return null;
 };

package/src/Embed/conceptComponents.tsx

@@ -152,10 +152,7 @@ const ListWrapper = styled.div`
 
 const StyledNotionDialogContent = styled(NotionDialogContent)`
   padding-top: ${spacing.small};
-  .c-figure {
-    left: unset !important;
-    width: 100% !important;
-    padding: 0;
+  figure {
     margin: 0;
     padding-bottom: ${spacing.normal};
   }

package/src/Embed/index.ts

@@ -22,4 +22,5 @@ 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";
 export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from "./types";

package/src/Figure/Figure.tsx

@@ -8,7 +8,7 @@
 
 // N.B These components is used to render static markup serverside
 
-import { ReactNode } from "react";
+import { ComponentPropsWithRef, ReactNode, forwardRef } from "react";
 import BEMHelper from "react-bem-helper";
 import { isFunction as isFunctionHelper } from "@ndla/util";
 const classes = new BEMHelper({
@@ -16,19 +16,15 @@ const classes = new BEMHelper({
   prefix: "c-",
 });
 
-const Figure = ({ children, type = "full", resizeIframe, className, ...rest }: Props) => {
+const Figure = forwardRef<HTMLElement, Props>(({ children, type = "full", className, ...rest }, ref) => {
   const typeClass = type === "full-column" ? "c-figure--full-column" : `u-float-${type}`;
   const right = ["small-right", "xsmall-right"].includes(type);
   return (
-    <figure
-      data-sizetype={type}
-      {...classes("", { resize: !!resizeIframe, right }, `${typeClass} ${className ?? ""}`)}
-      {...rest}
-    >
+    <figure data-sizetype={type} {...classes("", { right }, `${typeClass} ${className ?? ""}`)} {...rest} ref={ref}>
       {isFunction(children) ? children({ typeClass }) : children}
     </figure>
   );
-};
+});
 
 const isFunction = (children: Function | ReactNode): children is Function => {
   return isFunctionHelper(children);
@@ -44,14 +40,10 @@ export type FigureType =
   | "xsmall-right"
   | "xsmall-left";
 
-interface Props {
-  id?: string;
-  children: ReactNode | ((params: { typeClass: string }) => ReactNode);
+interface Props extends Omit<ComponentPropsWithRef<"figure">, "children" | "type"> {
+  children?: ReactNode | ((params: { typeClass: string }) => ReactNode);
   type?: FigureType;
-  resizeIframe?: boolean;
   noFigcaption?: boolean;
-  className?: string;
-  lang?: string;
 }
 
 export default Figure;

package/src/Figure/component.figure.scss

@@ -57,162 +57,4 @@
   &--right {
     float: right;
   }
-  &.expanded {
-    .c-figure__caption--hidden-caption {
-      display: block;
-      opacity: 0;
-      animation-delay: 50ms;
-      animation-name: fadeIn;
-      animation-duration: 0.2s;
-      animation-fill-mode: forwards;
-    }
-  }
-}
-
-.brightcove-video {
-  .hidden {
-    display: none;
-  }
-}
-
-/* 2. */
-.c-figure__caption {
-  background-color: $white;
-  padding: $spacing--small 0;
-  display: block;
-  border-bottom: 1px solid $brand-grey--light;
-}
-
-.c-figure__caption--hidden-caption {
-  display: none;
-  @include mq($until: tablet) {
-    display: block;
-  }
-}
-
-.c-figure__byline {
-  text-align: left;
-}
-
-.c-figure__info {
-  max-width: 650px;
-  margin-bottom: $spacing--small;
-  font-family: $font;
-  color: $primary-color;
-  @include font-size(16px, 24px);
-  @include mq($from: tablet) {
-    flex: 2;
-    margin-bottom: $spacing--small;
-  }
-  p {
-    margin: 0;
-  }
-}
-
-.c-figure__fullscreen-btn {
-  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;
-  background: rgba($white, 0.65);
-  border-radius: 100px;
-  border: 0;
-
-  .expanded-icon {
-    display: none;
-  }
-
-  &--expanded {
-    .contracted-icon {
-      display: none;
-    }
-    .expanded-icon {
-      display: flex;
-    }
-  }
-
-  svg {
-    transition: transform 0.4s ease-out;
-    width: 18px;
-    height: 18px;
-    fill: $brand-color;
-    color: $brand-color;
-  }
-  @include mq($until: tablet) {
-    display: none;
-  }
-}
-
-.c-figure:hover {
-  .c-figure__fullscreen-btn {
-    background: $white;
-    svg {
-      transform: scale(1.2);
-    }
-  }
-}
-
-.c-figure__show-byline-btn {
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-  bottom: 0;
-  right: 0;
-  padding: $spacing--small;
-  transition: all 0.3s ease-out;
-  background: rgba($white, 0.2);
-  border: 0;
-
-  .expanded-icon {
-    display: none;
-  }
-
-  &--expanded {
-    .contracted-icon {
-      display: none;
-    }
-    .expanded-icon {
-      display: flex;
-      right: 0;
-    }
-
-    ~ .c-figure__caption--hidden-caption {
-      max-height: 100vh;
-      padding-top: $spacing--small;
-      padding-bottom: $spacing--small;
-    }
-  }
-
-  svg {
-    transition: transform 0.4s ease-out;
-    width: 26px;
-    height: 26px;
-    fill: $brand-color;
-  }
-}
-
-.c-figure:hover {
-  .c-figure__show-byline-btn {
-    background: $white;
-    svg {
-      transform: scale(1.2);
-    }
-  }
-}
-
-.c-figure {
-  &__link {
-    color: $brand-color;
-    box-shadow: none;
-    display: flex;
-    align-items: center;
-    @include font-size(14px, 25px);
-  }
 }

package/src/Figure/figureActionIndicatorStyle.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 { css } from "@emotion/react";
+import { breakpoints, colors, misc, mq } from "@ndla/core";
+
+export const figureActionIndicatorStyle = css`
+  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;
+  }
+`;

package/src/Figure/index.ts

@@ -7,6 +7,6 @@
  */
 
 export { default as Figure } from "./Figure";
-export { FigureOpenDialogButton } from "./FigureOpenDialogButton";
+export { figureActionIndicatorStyle } from "./figureActionIndicatorStyle";
 
 export type { FigureType } from "./Figure";

package/src/FramedContent/FramedContent.stories.tsx

@@ -43,6 +43,25 @@ export const WithFloating: StoryObj<typeof FramedContent> = {
   },
 };
 
+export const WithFloatingSmall: StoryObj<typeof FramedContent> = {
+  args: {
+    children: (
+      <>
+        <p>En boks med flytelementer</p>
+        <FigureImage embedData={{ alt: "", align: "right", size: "small" }} />
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+        <p>
+          Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
+          du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+        </p>
+      </>
+    ),
+  },
+};
+
 export const TooMuchContent: StoryObj<typeof FramedContent> = {
   args: {
     children: (

package/src/FramedContent/FramedContent.tsx

@@ -15,24 +15,6 @@ const StyledFramedContent = styled.div`
   margin: ${spacing.large} 0;
   border: 1px solid ${colors.brand.tertiary};
   overflow: hidden;
-
-  .c-figure {
-    width: 100% !important;
-    left: auto !important;
-    padding: 0;
-
-    &.u-float-right,
-    &.u-float-small-right {
-      width: 50% !important;
-      margin-right: 0;
-    }
-
-    &.u-float-left,
-    &.u-float-small-left {
-      width: 50% !important;
-      margin-left: 0;
-    }
-  }
 `;
 
 const FramedContent = forwardRef<HTMLDivElement, ComponentPropsWithRef<"div">>(({ children, ...rest }, ref) => (

package/src/Image/__tests__/{Image-test.jsx → Image-test.tsx}

@@ -13,7 +13,7 @@ import "@testing-library/jest-dom";
 import Image, { makeSrcQueryString } from "../Image";
 
 test("Image renderers correctly", () => {
-  const { container } = render(<Image alt="example" src="https://example.com/image.png" />, { container: null });
+  const { container } = render(<Image alt="example" src="https://example.com/image.png" />, { container: undefined });
 
   expect(container.firstChild).toMatchSnapshot();
 });

package/src/MediaList/MediaList.tsx

@@ -37,6 +37,7 @@ const StyledMediaListItem = styled.li`
   margin-bottom: ${spacing.small};
   padding: ${spacing.small} 0;
   border-bottom: 1px solid ${colors.brand.tertiary};
+  list-style: none;
   ${mq.range({ from: breakpoints.tablet })} {
     display: flex;
     flex-direction: row;

package/src/MyNdla/Resource/FolderInput.tsx

@@ -11,7 +11,7 @@ import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { IconButtonV2 } from "@ndla/button";
-import { colors, spacing } from "@ndla/core";
+import { spacing } from "@ndla/core";
 import { InputContainer, FieldErrorMessage, InputV3, FieldHelper, FormControl, Label } from "@ndla/forms";
 import { Spinner } from "@ndla/icons";
 import { Cross } from "@ndla/icons/action";
@@ -30,50 +30,6 @@ const StyledSpinner = styled(Spinner)`
   margin: ${spacing.small};
 `;
 
-// Source: https://kovart.github.io/dashed-border-generator/
-const borderStyle = (error?: boolean) =>
-  `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
-    error ? colors.support.red : colors.brand.tertiary,
-  )}' stroke-width='2' stroke-dasharray='8%2c8' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e")`;
-
-interface StyledInputProps {
-  error?: string;
-}
-
-const StyledInputContainer = styled(InputContainer)<StyledInputProps>`
-  display: flex;
-  flex-wrap: nowrap;
-  background-image: ${borderStyle()};
-  border: none;
-
-  border-left: ${spacing.xsmall} solid ${colors.brand.light};
-  border-right: ${spacing.xsmall} solid ${colors.brand.light};
-  border-radius: 0px;
-
-  /* Not good practice, but necessary to give error message same padding as caused by border. */
-  & + [data-error-message] {
-    padding: 0 ${spacing.xsmall};
-  }
-  &:focus-within {
-    border-color: ${colors.brand.light};
-  }
-
-  &[data-error="true"] {
-    background-image: ${borderStyle(true)};
-  }
-  input {
-    line-height: 1.75rem;
-    color: ${colors.brand.primary};
-    caret-color: ${colors.brand.tertiary};
-    ::selection {
-      background: ${colors.brand.lighter};
-    }
-    ::placeholder {
-      color: ${colors.brand.tertiary};
-    }
-  }
-`;
-
 const Row = styled.div`
   display: flex;
   align-items: center;
@@ -95,7 +51,8 @@ const FolderInput = forwardRef<HTMLInputElement, Props & ComponentPropsWithRef<"
     return (
       <FormControl id="folder-name" isRequired isInvalid={!!error}>
         <Label visuallyHidden>{label}</Label>
-        <StyledInputContainer data-error={!!error}>
+        <FieldErrorMessage>{error}</FieldErrorMessage>
+        <InputContainer>
           <InputV3 autoComplete="off" disabled={loading} ref={composeRefs(ref, inputRef)} {...rest} />
           <Row>
             {!loading ? (
@@ -123,8 +80,7 @@ const FolderInput = forwardRef<HTMLInputElement, Props & ComponentPropsWithRef<"
               </FieldHelper>
             )}
           </Row>
-        </StyledInputContainer>
-        <FieldErrorMessage data-error-message="">{error}</FieldErrorMessage>
+        </InputContainer>
       </FormControl>
     );
   },