@ndla/ui 50.15.3 → 52.0.0

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -58,7 +58,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
 
   return (
     <DisclaimerWrapper role="region">
-      <StyledMessageBox type="info">
+      <StyledMessageBox type="info" contentEditable={false}>
         <InformationOutline />
         <Disclaimer>
           {embedData.disclaimer}

package/src/Embed/conceptComponents.tsx

@@ -95,6 +95,7 @@ const notionContentCss = css`
   }
   ${mq.range({ from: breakpoints.desktop })} {
     width: 720px;
+    max-width: 60vw;
   }
 
   ${mq.range({ until: breakpoints.tablet })} {

package/src/Embed/index.ts

@@ -6,7 +6,7 @@
  *
  */
 
-export { default as ImageEmbed } from "./ImageEmbed";
+export { default as ImageEmbed, getCrop, getFocalPoint } from "./ImageEmbed";
 export { default as AudioEmbed } from "./AudioEmbed";
 export { default as H5pEmbed } from "./H5pEmbed";
 export { default as ExternalEmbed } from "./ExternalEmbed";

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

@@ -7,81 +7,12 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
-import { EmailOutline, Facebook, Instagram, LinkedIn, Share, Youtube } from "@ndla/icons/common";
-import { EditorName } from "./EditorName";
-import Footer from "./Footer";
-import { FooterText } from "./FooterText";
-
-const mockCommonLinks = [
-  {
-    to: "https://ndla.no/about/om-ndla",
-    text: "Om NDLA",
-    external: false,
-  },
-  {
-    to: "https://ndla.no/about/about-ndla",
-    text: "About NDLA",
-    external: false,
-  },
-  {
-    to: "https://blogg.ndla.no/",
-    text: "NDLA fagblogg",
-    external: true,
-  },
-];
-
-const mockFooterLinks = [
-  {
-    to: "https://www.facebook.com/ndla.no",
-    text: "NDLA på Facebook",
-    icon: <Facebook />,
-  },
-  {
-    to: "https://instagram.com/ndla_no/",
-    text: "NDLA på Instagram",
-    icon: <Instagram />,
-  },
-  {
-    to: "https://www.linkedin.com/company/ndla/",
-    text: "NDLA på LinkedIn",
-    icon: <LinkedIn />,
-  },
-  {
-    to: "https://www.youtube.com/channel/UCBlt6T8B0mmvDh3k5q7EhsA",
-    text: "NDLA på YouTube",
-    icon: <Youtube />,
-  },
-  {
-    to: "https://ndla.us6.list-manage.com/subscribe?u=99d41bbb28de0128915adebed&id=9a1d3ad1ea",
-    text: "Meld deg på vårt nyhetsbrev",
-    icon: <EmailOutline />,
-  },
-  {
-    to: "#",
-    text: "Del denne siden",
-    icon: <Share />,
-  },
-];
-
-const privacyLinks = [
-  {
-    label: "Personvernerklæring",
-    url: "https://ndla.no/article/personvernerklaering",
-  },
-  {
-    label: "Erklæring om informasjonskapsler",
-    url: "https://ndla.no/article/erklaering-for-informasjonskapsler",
-  },
-  {
-    label: "Tilgjengelighetserklæring",
-    url: "https://uustatus.no/nn/erklaringer/publisert/8cefdf3d-3272-402a-907b-689ddfc9bba7",
-  },
-];
+import FooterBlock from "./FooterBlock";
 
 export default {
-  title: "Components/Footer",
+  title: "Components/FooterBlock",
   tags: ["autodocs"],
-  component: Footer,
+  component: FooterBlock,
   parameters: {
     inlineStories: true,
   },
@@ -89,10 +20,7 @@ export default {
   args: {
     children: (
       <>
-        <FooterText>
-          <EditorName title="Ansvarlig redaktør:" name="Sigurd Trageton" />
-        </FooterText>
-        <FooterText>Nettstedet er utarbeidet av NDLA med åpen kildekode.</FooterText>
+        <p>Litt tekst i footer!</p>
       </>
     ),
   },
@@ -101,33 +29,7 @@ export default {
     languageSelector: { control: false },
     auth: { control: false },
   },
-  render: (args) => <Footer {...args}></Footer>,
-} as Meta<typeof Footer>;
-
-export const Default: StoryObj<typeof Footer> = {};
-
-export const WithContentAndLinks: StoryObj<typeof Footer> = {
-  args: {
-    privacyLinks: privacyLinks,
-    commonLinks: mockCommonLinks,
-    links: mockFooterLinks,
-  },
-};
-
-export const WithoutContent: StoryObj<typeof Footer> = {
-  args: {
-    children: undefined,
-    commonLinks: mockCommonLinks,
-    links: mockFooterLinks,
-    privacyLinks: privacyLinks,
-  },
-};
+  render: (args) => <FooterBlock {...args} />,
+} as Meta<typeof FooterBlock>;
 
-export const WithAuthBlock: StoryObj<typeof Footer> = {
-  args: {
-    privacyLinks: privacyLinks,
-    commonLinks: mockCommonLinks,
-    links: mockFooterLinks,
-    auth: <div>Auth info can be placed down here</div>,
-  },
-};
+export const Default: StoryObj<typeof FooterBlock> = {};

package/src/Footer/FooterBlock.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2016-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 styled from "@emotion/styled";
+import { breakpoints, colors, mq, spacing, stackOrder } from "@ndla/core";
+
+export const FooterBlock = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${spacing.large};
+  color: ${colors.white};
+  z-index: ${stackOrder.offsetSingle};
+  padding: ${spacing.large} ${spacing.large} ${spacing.xlarge};
+  background: ${colors.brand.dark};
+  ${mq.range({ from: breakpoints.wide })} {
+    padding: ${spacing.large} 170px ${spacing.xlarge};
+  }
+  > * {
+    max-width: 1100px;
+  }
+`;
+
+export default FooterBlock;

package/src/Footer/index.ts

@@ -6,8 +6,4 @@
  *
  */
 
-import { EditorName } from "./EditorName";
-import Footer from "./Footer";
-import { FooterText } from "./FooterText";
-
-export { Footer, FooterText, EditorName };
+export { FooterBlock } from "./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};
 `;