@ndla/ui 51.0.0 → 53.0.0

package/src/Figure/Figure.tsx

@@ -8,28 +8,68 @@
 
 // N.B These components is used to render static markup serverside
 
-import { ComponentPropsWithRef, ReactNode, forwardRef } from "react";
-import BEMHelper from "react-bem-helper";
-import { isFunction as isFunctionHelper } from "@ndla/util";
-const classes = new BEMHelper({
-  name: "figure",
-  prefix: "c-",
-});
+import { ComponentPropsWithRef, forwardRef, useMemo } from "react";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { spacing } from "@ndla/core";
+
+const StyledFigure = styled.figure`
+  position: relative;
+  width: 100%;
+  transition:
+    transform 0.4s,
+    width 0.4s,
+    height 0.4s;
+  img {
+    width: 100%;
+  }
+  iframe {
+    display: block;
+    border: 0;
+  }
+  &[data-sizetype="full"][data-float=""] {
+    margin: ${spacing.normal} 0 ${spacing.normal};
+  }
+  &[data-sizetype="full"] {
+    margin-bottom: ${spacing.normal};
+  }
+`;
+
+const fullColumnStyle = css`
+  left: auto !important;
+  right: auto !important;
+  width: auto !important;
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: ${spacing.large};
+  margin-bottom: 0;
+`;
+
+const rightStyle = css`
+  float: right;
+`;
+
+const smallTypes = ["small-right", "xsmall-right"];
 
 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);
+  const floatClass = type === "full-column" ? undefined : `u-float-${type}`;
+
+  const styles = useMemo(() => {
+    const styles = [];
+    if (!floatClass) styles.push(fullColumnStyle);
+    if (smallTypes.includes(type)) styles.push(rightStyle);
+    return styles;
+  }, [floatClass, type]);
+
+  const classes = floatClass ? `${floatClass} ${className ?? ""}` : className;
+
   return (
-    <figure data-sizetype={type} {...classes("", { right }, `${typeClass} ${className ?? ""}`)} {...rest} ref={ref}>
-      {isFunction(children) ? children({ typeClass }) : children}
-    </figure>
+    <StyledFigure data-sizetype={type} css={styles} className={classes} {...rest} ref={ref}>
+      {children}
+    </StyledFigure>
   );
 });
 
-const isFunction = (children: Function | ReactNode): children is Function => {
-  return isFunctionHelper(children);
-};
-
 export type FigureType =
   | "full"
   | "full-column"
@@ -40,8 +80,7 @@ export type FigureType =
   | "xsmall-right"
   | "xsmall-left";
 
-interface Props extends Omit<ComponentPropsWithRef<"figure">, "children" | "type"> {
-  children?: ReactNode | ((params: { typeClass: string }) => ReactNode);
+interface Props extends Omit<ComponentPropsWithRef<"figure">, "type"> {
   type?: FigureType;
   noFigcaption?: boolean;
 }

package/src/Footer/Footer.stories.tsx

@@ -29,7 +29,7 @@ export default {
     languageSelector: { control: false },
     auth: { control: false },
   },
-  render: (args) => <FooterBlock {...args}></FooterBlock>,
+  render: (args) => <FooterBlock {...args} />,
 } as Meta<typeof FooterBlock>;
 
 export const Default: StoryObj<typeof FooterBlock> = {};

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -8,10 +8,10 @@
 
 import { CSSProperties, ReactNode, useMemo } from "react";
 import styled from "@emotion/styled";
-import { spacing, spacingUnit } from "@ndla/core";
+import { spacing } from "@ndla/core";
+import { useComponentSize } from "@ndla/hooks";
 import { Heading, Text } from "@ndla/typography";
 import { ArticleByline } from "../Article";
-import { useMastheadHeight } from "../Masthead";
 import { Article } from "../types";
 
 interface Props {
@@ -58,7 +58,7 @@ const StyledArticle = styled.article`
 `;
 
 export const FrontpageArticle = ({ article, id, isWide, licenseBox, lang }: Props) => {
-  const { height = 0 } = useMastheadHeight();
+  const { height = 0 } = useComponentSize("masthead");
   const cssVars = useMemo(() => ({ "--masthead-height": `${height}px` }) as unknown as CSSProperties, [height]);
   const { title, introduction, content } = article;
 

package/src/Gloss/Gloss.tsx

@@ -118,11 +118,13 @@ const getFilteredExamples = (
       glossData?.examples?.map((examples, i) => {
         if (exampleIdsList.includes(i.toString())) {
           return examples.filter((e) => exampleLangsList.includes(e.language));
-        } else return [];
+        }
+        return [];
       }) ?? [];
     const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);
     return examplesWithoutEmpty;
-  } else return glossData?.examples ?? [];
+  }
+  return glossData?.examples ?? [];
 };
 
 const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) => {

package/src/Hero/Hero.tsx

@@ -84,7 +84,7 @@ const StyledDiv = styled.div`
     }
 
     ${mq.range({ until: breakpoints.tablet })} {
-      + div article.c-article {
+      + div article[data-ndla-article] {
         background: ${colors.white};
         margin: 0 -${spacing.normal};
         padding: ${spacing.large} ${spacing.normal} ${spacing.normal} ${spacing.normal};

package/src/Image/Image.tsx

@@ -8,7 +8,7 @@
 
 import { ReactNode } from "react";
 import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
+import { colors, misc } from "@ndla/core";
 
 export interface ImageCrop {
   startX: number;
@@ -51,7 +51,7 @@ const StyledImageWrapper = styled.div`
   &[data-border="true"] {
     border: 1px solid ${colors.brand.tertiary};
     border-bottom: 0;
-    border-radius: 4px;
+    border-radius: ${misc.borderRadius};
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }

package/src/LanguageSelector/LanguageSelector.tsx

@@ -74,7 +74,7 @@ const LanguageSelector = <T extends string>({ locales, onSelect, inverted, trigg
           aria-label={t("footer.selectLanguage")}
           id={triggerId}
         >
-          {t(`languages.prefixChangeLanguage`)} <ChevronDown />
+          {t("languages.prefixChangeLanguage")} <ChevronDown />
         </ButtonV2>
       </DropdownTrigger>
       <StyledDropdownContent sideOffset={4} showArrow>

package/src/Layout/LayoutItem.tsx

@@ -17,7 +17,8 @@ export const LayoutItem = ({ children, layout, ...rest }: Props) => {
   const className = useMemo(() => {
     if (layout === "extend") {
       return "u-10/12@desktop u-push-1/12@desktop u-10/12@tablet u-push-1/12@tablet";
-    } else if (layout === "center") {
+    }
+    if (layout === "center") {
       return "u-10/12 u-push-1/12";
     }
     return undefined;

package/src/Layout/OneColumn.tsx

@@ -6,48 +6,38 @@
  *
  */
 
-import { HTMLAttributes, ReactNode } from "react";
-import BEMHelper from "react-bem-helper";
+import { ComponentPropsWithoutRef } from "react";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { mq, spacing, breakpoints } from "@ndla/core";
 
-const classes = BEMHelper({
-  prefix: "o-",
-  name: "wrapper",
-  outputIsString: true,
-});
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode;
-  className?: string;
-  cssModifier?: string;
+interface Props extends ComponentPropsWithoutRef<"div"> {
   wide?: boolean;
-  noPadding?: boolean;
-  extraPadding?: boolean;
 }
 
-export const OneColumn = ({ children, className, cssModifier, wide, noPadding, extraPadding, ...rest }: Props) => {
-  const modifiers = [];
-
-  if (cssModifier) {
-    modifiers.push(cssModifier);
-  }
-
-  if (wide) {
-    modifiers.push("wide");
+const StyledOneColumn = styled.div`
+  max-width: 1024px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  padding-left: ${spacing.nsmall};
+  padding-right: ${spacing.nsmall};
+
+  ${mq.range({ from: breakpoints.mobileWide })} {
+    padding-left: ${spacing.normal};
+    padding-right: ${spacing.normal};
   }
-
-  if (noPadding) {
-    modifiers.push("no-padding");
+  &::after {
+    content: "" !important;
+    display: block !important;
+    clear: both !important;
   }
+`;
 
-  if (extraPadding) {
-    modifiers.push("extra-padding");
-  }
+const wideStyle = css`
+  max-width: 1150px;
+`;
 
-  return (
-    <div className={`${classes("", modifiers, className)}`} {...rest}>
-      {children}
-    </div>
-  );
-};
+export const OneColumn = ({ wide, ...rest }: Props) => <StyledOneColumn css={wide ? wideStyle : undefined} {...rest} />;
 
 export default OneColumn;

package/src/Layout/PageContainer.tsx

@@ -6,33 +6,29 @@
  *
  */
 
-import { HTMLAttributes, ReactNode } from "react";
-import BEMHelper from "react-bem-helper";
+import { ComponentPropsWithoutRef } from "react";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { colors, mq, breakpoints } from "@ndla/core";
 
-const classes = new BEMHelper({
-  name: "container",
-  prefix: "o-",
-});
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode;
-  background?: boolean;
+interface Props extends ComponentPropsWithoutRef<"div"> {
   backgroundWide?: boolean;
-  ndlaFilm?: boolean;
-  learningPath?: boolean;
 }
 
-export const PageContainer = ({
-  children,
-  background = false,
-  backgroundWide = false,
-  ndlaFilm = false,
-  learningPath = false,
-  ...rest
-}: Props) => (
-  <div {...classes("", { background, backgroundWide, ndlaFilm, learningPath })} {...rest}>
-    {children}
-  </div>
+const StyledPageContainer = styled.div`
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+`;
+
+const backgroundWideStyle = css`
+  ${mq.range({ from: breakpoints.tablet })} {
+    background-color: ${colors.brand.greyLightest};
+  }
+`;
+
+export const PageContainer = ({ backgroundWide = false, ...rest }: Props) => (
+  <StyledPageContainer css={backgroundWide ? backgroundWideStyle : undefined} {...rest} />
 );
 
 export default PageContainer;

package/src/LicenseByline/LicenseLink.tsx

@@ -42,9 +42,8 @@ const LicenseLink = ({ license, asLink = true }: Props) => {
         {license.abbreviation}
       </StyledSafeLink>
     );
-  } else {
-    return <StyledSpan>{license.abbreviation}</StyledSpan>;
   }
+  return <StyledSpan>{license.abbreviation}</StyledSpan>;
 };
 
 export default LicenseLink;

package/src/Messages/MessageBox.tsx

@@ -27,6 +27,7 @@ interface MessageBoxProps {
   links?: LinkProps[];
   showCloseButton?: boolean;
   onClose?: () => void;
+  contentEditable?: boolean;
 }
 
 const MessageBoxWrapper = styled.div`
@@ -93,10 +94,10 @@ const StyledCloseButton = styled(IconButtonV2)`
   right: ${spacing.xsmall};
 `;
 
-export const MessageBox = ({ type, children, links, showCloseButton, onClose }: MessageBoxProps) => {
+export const MessageBox = ({ type, children, links, showCloseButton, onClose, contentEditable }: MessageBoxProps) => {
   const { t } = useTranslation();
   return (
-    <MessageBoxWrapper data-type={type}>
+    <MessageBoxWrapper data-type={type} contentEditable={contentEditable ?? undefined}>
       <InfoWrapper>
         <div>
           <ChildrenWrapper>{children}</ChildrenWrapper>

package/src/MyNdla/Resource/index.ts

@@ -7,5 +7,4 @@
  */
 
 import Folder from "./Folder";
-import FolderInput from "./FolderInput";
-export { Folder, FolderInput };
+export { Folder };

package/src/MyNdla/index.ts

@@ -7,5 +7,4 @@
  */
 
 import Folder from "./Resource/Folder";
-import FolderInput from "./Resource/FolderInput";
-export { Folder, FolderInput };
+export { Folder };

package/src/Notion/Notion.tsx

@@ -30,11 +30,11 @@ const TextWrapper = styled.div<{ hasVisualElement: boolean }>`
   ${mq.range({ from: breakpoints.desktop })} {
     ul,
     ol {
-      margin: 12px 0;
+      margin: ${spacing.small} 0;
       padding: 0 1rem 0 2rem;
     }
     ol > li {
-      margin-left: 24px;
+      margin-left: ${spacing.normal};
     }
   }
 `;

package/src/Resource/BlockResource.tsx

@@ -119,9 +119,8 @@ const BlockImage = ({ image, loading, contentType }: BlockImageProps) => {
         <ContentTypeBadge type={contentType} size="large" />
       </ContentIconWrapper>
     );
-  } else {
-    return <Image alt={image.alt} src={image.src} fallbackWidth={300} />;
   }
+  return <Image alt={image.alt} src={image.src} fallbackWidth={300} />;
 };
 
 const ResourceTypeAndTitleLoader = ({ children, loading }: LoaderProps) => {
@@ -169,13 +168,10 @@ const BlockResource = ({
   const contentType = useMemo(() => {
     if (!firstResourceType) {
       return MISSING;
-    } else {
-      return (
-        contentTypeMapping[firstResourceType] ??
-        resourceEmbedTypeMapping[firstResourceType] ??
-        contentTypeMapping["default"]
-      );
     }
+    return (
+      contentTypeMapping[firstResourceType] ?? resourceEmbedTypeMapping[firstResourceType] ?? contentTypeMapping.default
+    );
   }, [firstResourceType]);
 
   return (

package/src/Resource/ListResource.tsx

@@ -142,11 +142,10 @@ const ListResourceImage = ({ resourceImage, loading, type, contentType, backgrou
           <ContentTypeBadge type={contentType} background={background} size="x-small" />
         </ContentIconWrapper>
       );
-    } else {
-      return (
-        <StyledImage alt={resourceImage.alt} src={resourceImage.src} fallbackWidth={type === "compact" ? 56 : 136} />
-      );
     }
+    return (
+      <StyledImage alt={resourceImage.alt} src={resourceImage.src} fallbackWidth={type === "compact" ? 56 : 136} />
+    );
   }
 
   return (
@@ -231,9 +230,8 @@ const ListResource = ({
   const contentType = useMemo(() => {
     if (!firstContentType) {
       return MISSING;
-    } else {
-      return contentTypeMapping[firstContentType] ?? embedResourceType ?? contentTypeMapping["default"];
     }
+    return contentTypeMapping[firstContentType] ?? embedResourceType ?? contentTypeMapping.default;
   }, [embedResourceType, firstContentType]);
 
   return (

package/src/Search/ContentTypeResult.tsx

@@ -130,10 +130,10 @@ const ContentTypeResult = ({
 
             // Figure out highlighting by comparing path of link with keyboard navigated anchor
             const anchor =
-              keyboardPathNavigation instanceof HTMLElement &&
-              keyboardPathNavigation &&
-              keyboardPathNavigation.querySelector("a");
-            const anchorHref = anchor && anchor.getAttribute("href");
+              keyboardPathNavigation instanceof HTMLElement && keyboardPathNavigation
+                ? keyboardPathNavigation.querySelector("a")
+                : undefined;
+            const anchorHref = anchor?.getAttribute("href") ?? null;
             const shouldHighlight = isPathToHighlight(path, anchorHref);
 
             return (

package/src/Search/SearchResult.tsx

@@ -9,7 +9,7 @@
 import { ElementType, Fragment, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { fonts, mq, spacing, breakpoints, colors, spacingUnit } from "@ndla/core";
+import { fonts, mq, spacing, breakpoints, colors, spacingUnit, misc } from "@ndla/core";
 import { Spinner } from "@ndla/icons";
 import { ChevronRight } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
@@ -68,7 +68,7 @@ const PillsWrapper = styled.div`
   background: ${colors.brand.greyLightest};
   margin-right: ${spacing.small};
   padding: 0 ${spacingUnit / 3}px;
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
   ${fonts.sizes("12px", "20px")};
   font-weight: ${fonts.weight.semibold};
 `;

package/src/Search/SearchResultSleeve.tsx

@@ -164,12 +164,12 @@ const getNextElementInDirection = (
   if (direction === 1) {
     const idx = currentIdx + 1 > arr.length - 1 ? 0 : currentIdx + 1;
     return arr[idx];
-  } else if (direction === -1) {
+  }
+  if (direction === -1) {
     const idx = currentIdx - 1 < 0 ? arr.length - 1 : currentIdx - 1;
     return arr[idx];
-  } else {
-    return arr[currentIdx];
   }
+  return arr[currentIdx];
 };
 
 const getDefaultCount = () => {
@@ -196,9 +196,8 @@ const findPathForKeyboardNavigation = (
       default:
         return current;
     }
-  } else {
-    return getNextElementInDirection(current, resultsContainingPaths, direction);
   }
+  return getNextElementInDirection(current, resultsContainingPaths, direction);
 };
 
 type Props = {
@@ -259,11 +258,10 @@ const SearchResultSleeve = ({
           e.stopPropagation();
           e.preventDefault();
           const toClick =
-            keyboardPathNavigation &&
-            keyboardPathNavigation.querySelector &&
+            keyboardPathNavigation?.querySelector &&
             (keyboardPathNavigation.querySelector("a") || keyboardPathNavigation.querySelector("button"));
 
-          toClick && toClick.click();
+          toClick?.click();
         }
       } else if (e.code === "Tab") {
         setKeyNavigation("");
@@ -283,7 +281,7 @@ const SearchResultSleeve = ({
     const highlightedElement =
       keyboardPathNavigation === GO_TO_SEARCHPAGE
         ? searchAllRef.current
-        : contentRef.current && contentRef.current.querySelector('[data-highlighted="true"]');
+        : contentRef.current?.querySelector('[data-highlighted="true"]');
 
     if (highlightedElement) {
       highlightedElement.scrollIntoView({

package/src/Table/Table.stories.tsx

@@ -594,7 +594,7 @@ export const WithScrollbar: StoryFn = () => (
         <td>Hearson</td>
         <td>rhearson0@nifty.com</td>
 
-        <td className="u-no-wrap">34704 Duke Circle</td>
+        <td style={{ whiteSpace: "nowrap" }}>34704 Duke Circle</td>
         <td>Brazil</td>
         <td>Fijian</td>
         <td>rhearson0</td>
@@ -604,8 +604,8 @@ export const WithScrollbar: StoryFn = () => (
         <td>Lucie</td>
         <td>Jikylls</td>
         <td>ljikylls1@csmonitor.com</td>
-        <td className="u-no-wrap">9824 Swallow Place</td>
-        <td className="u-no-wrap">Sweden/Denmark/Norway</td>
+        <td style={{ whiteSpace: "nowrap" }}>9824 Swallow Place</td>
+        <td style={{ whiteSpace: "nowrap" }}>Sweden/Denmark/Norway</td>
         <td>Italian</td>
         <td>ljikylls1</td>
       </tr>
@@ -614,7 +614,7 @@ export const WithScrollbar: StoryFn = () => (
         <td>Kippie</td>
         <td>Reeveley</td>
         <td>kreeveley2@ebay.com</td>
-        <td className="u-no-wrap">1 Stephen Court</td>
+        <td style={{ whiteSpace: "nowrap" }}>1 Stephen Court</td>
         <td>Namibia</td>
         <td>West Frisian</td>
         <td>kreeveley2</td>
@@ -624,7 +624,7 @@ export const WithScrollbar: StoryFn = () => (
         <td>Klarrisa</td>
         <td>Minghetti</td>
         <td>kminghetti3@163.com</td>
-        <td className="u-no-wrap">7 Truax Point</td>
+        <td style={{ whiteSpace: "nowrap" }}>7 Truax Point</td>
         <td>Greece</td>
         <td>Luxembourgish</td>
         <td>kminghetti3</td>
@@ -634,7 +634,7 @@ export const WithScrollbar: StoryFn = () => (
         <td>Trefor</td>
         <td>Lambregts</td>
         <td>tlambregts4@youtu.be</td>
-        <td className="u-no-wrap">61 Monica Center</td>
+        <td style={{ whiteSpace: "nowrap" }}>61 Monica Center</td>
         <td>Sweden</td>
         <td>Northern Sotho</td>
         <td>tlambregts4</td>
@@ -644,7 +644,7 @@ export const WithScrollbar: StoryFn = () => (
         <td>Aridatha</td>
         <td>Kuhnt</td>
         <td>akuhnt5@sitemeter.com</td>
-        <td className="u-no-wrap">2898 Wayridge Terrace</td>
+        <td style={{ whiteSpace: "nowrap" }}>2898 Wayridge Terrace</td>
         <td>China</td>
         <td>Latvian</td>
         <td>akuhnt5</td>
@@ -654,7 +654,7 @@ export const WithScrollbar: StoryFn = () => (
         <td>Kalie</td>
         <td>Olander</td>
         <td>kolander6@loc.gov</td>
-        <td className="u-no-wrap">554 Maywood Parkway</td>
+        <td style={{ whiteSpace: "nowrap" }}>554 Maywood Parkway</td>
         <td>China</td>
         <td>Czech</td>
         <td>kolander6</td>