@ndla/ui 51.0.0 → 53.0.0

package/src/LearningPaths/LearningPathSticky.tsx

@@ -1,122 +0,0 @@
-/**
- * Copyright (c) 2019-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 { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { animations, breakpoints, colors, mq, spacing, stackOrder } from "@ndla/core";
-import { Back, Forward } from "@ndla/icons/common";
-import { SafeLink } from "@ndla/safelink";
-
-const FOOTER_HEIGHT = "78px";
-const FOOTER_HEIGHT_MOBILE = spacing.large;
-const SAFELINK_SIZE_MOBILE = spacing.large;
-
-const StyledFooter = styled.nav`
-  display: flex;
-  height: ${FOOTER_HEIGHT};
-  width: 100%;
-  ${mq.range({ until: breakpoints.tablet })} {
-    --safe-area-inset-bottom: env(safe-area-inset-bottom);
-    height: calc(${FOOTER_HEIGHT_MOBILE} + var(--safe-area-inset-bottom));
-    min-height: var(-webkit-fill-available);
-    position: fixed;
-    z-index: ${stackOrder.offsetDouble};
-    bottom: 0;
-    left: 0;
-    right: 0;
-    justify-content: flex-end;
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-  background: ${colors.brand.lighter};
-  align-items: center;
-  justify-content: space-between;
-  ${animations.fadeInBottom()}
-`;
-
-interface Props {
-  children: ReactNode;
-}
-
-export const LearningPathSticky = ({ children }: Props) => <StyledFooter>{children}</StyledFooter>;
-
-const SafeLinkCSS = css`
-  display: flex;
-  box-shadow: none;
-  align-items: center;
-  justify-content: center;
-  color: ${colors.brand.primary};
-  height: ${FOOTER_HEIGHT};
-  ${mq.range({ until: breakpoints.tablet })} {
-    height: ${SAFELINK_SIZE_MOBILE};
-    width: ${SAFELINK_SIZE_MOBILE};
-    min-width: ${SAFELINK_SIZE_MOBILE};
-  }
-  padding: 0 ${spacing.normal} 0 ${spacing.normal};
-  ${mq.range({ until: breakpoints.tablet })} {
-    padding: 0;
-  }
-  transition: background 200ms ease;
-  div {
-    display: flex;
-    flex-direction: column;
-    padding: 0 ${spacing.small};
-    span:last-child {
-      box-shadow: inset 0 -1px;
-    }
-    ${mq.range({ until: breakpoints.tablet })} {
-      display: none;
-    }
-  }
-  &:hover,
-  &:focus {
-    hr {
-      opacity: 0;
-    }
-    background: rgba(0, 0, 0, 0.1);
-    div {
-      span:last-child {
-        box-shadow: none;
-      }
-    }
-  }
-`;
-
-const StyledTitle = styled.span`
-  ${mq.range({ until: breakpoints.tablet })} {
-    display: none;
-  }
-`;
-
-type PropsSiblings = {
-  title: string;
-  toLearningPathUrl(pathId: number, stepId: number): string;
-  arrow?: "left" | "right";
-  pathId: number;
-  stepId: number;
-};
-
-export const LearningPathStickySibling = ({ title, toLearningPathUrl, pathId, stepId, arrow }: PropsSiblings) => {
-  const { t } = useTranslation();
-  return (
-    <SafeLink
-      to={toLearningPathUrl(pathId, stepId)}
-      css={SafeLinkCSS}
-      aria-label={arrow === "left" ? t("learningPath.previousArrow") : t("learningPath.nextArrow")}
-    >
-      {arrow === "left" && <Back size="normal" />}
-      <div>
-        <StyledTitle>{title}</StyledTitle>
-      </div>
-      {arrow === "right" && <Forward size="normal" />}
-    </SafeLink>
-  );
-};
-
-export const LearningPathStickyPlaceholder = () => <div css={SafeLinkCSS} />;

package/src/LearningPaths/LearningPathWrapper.tsx

@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2019-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 { ReactNode } from "react";
-import styled from "@emotion/styled";
-import { spacing, spacingUnit, breakpoints, mq } from "@ndla/core";
-
-const StyledWrapper = styled.section`
-  max-width: ${1402 + spacingUnit}px;
-  padding: 0 ${spacing.normal};
-  margin: 0 auto;
-  .o-wrapper {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  &[data-inverted="true"] {
-    ${mq.range({ until: breakpoints.tablet })} {
-      background: #fff;
-    }
-  }
-`;
-
-interface Props {
-  children: ReactNode;
-  invertedStyle?: boolean;
-}
-
-export const LearningPathWrapper = ({ children, invertedStyle }: Props) => (
-  <StyledWrapper data-inverted={!!invertedStyle}>{children}</StyledWrapper>
-);

package/src/LearningPaths/index.ts

@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2019-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 LearningPathLastStepNavigation from "./LearningPathLastStepNavigation";
-import LearningPathMenu from "./LearningPathMenu";
-import LearningPathMobileHeader from "./LearningPathMobileHeader";
-import LearningPathMobileStepInfo from "./LearningPathMobileStepInfo";
-
-export { LearningPathWrapper } from "./LearningPathWrapper";
-export { LearningPathContent } from "./LearningPathContent";
-export { LearningPathMenu, LearningPathLastStepNavigation, LearningPathMobileStepInfo };
-export { LearningPathInformation } from "./LearningPathInformation";
-export { LearningPathSticky, LearningPathStickySibling, LearningPathStickyPlaceholder } from "./LearningPathSticky";
-export { LearningPathMobileHeader };

package/src/Masthead/Masthead.tsx

@@ -1,100 +0,0 @@
-/**
- * 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 { ReactNode } from "react";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, spacing, stackOrder } from "@ndla/core";
-import SkipToMainContent from "./SkipToMainContent";
-import { MessageBanner } from "../Messages";
-
-const MastheadContent = styled.div`
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  padding: ${spacing.small} ${spacing.normal};
-  font-weight: ${fonts.weight.normal};
-  display: flex;
-  height: 84px;
-  justify-content: space-between;
-  gap: ${spacing.xsmall};
-  ${mq.range({ until: breakpoints.tablet })} {
-    padding: ${spacing.small};
-    gap: ${spacing.xsmall};
-  }
-`;
-
-interface StyledMastheadProps {
-  fixed: boolean;
-  ndlaFilm: boolean;
-}
-
-const StyledMasthead = styled.div<StyledMastheadProps>`
-  z-index: ${stackOrder.banner};
-  position: relative;
-  background: white;
-  border-bottom: 1px solid ${colors.brand.greyLighter};
-  min-height: 84px;
-  display: flex;
-  flex-flow: column;
-  justify-content: flex-end;
-  ${(p) =>
-    p.fixed &&
-    css`
-      top: 0;
-      position: sticky;
-      @media print {
-        position: relative;
-      }
-    `};
-  ${(p) =>
-    p.ndlaFilm &&
-    css`
-      background: ${colors.ndlaFilm.filmColorLight};
-      background-image: linear-gradient(0deg, ${colors.ndlaFilm.filmColorLight}, ${colors.ndlaFilm.filmColor});
-      border: 0;
-      border-bottom: 1px solid #18334c;
-    `};
-`;
-
-interface Alert {
-  content: string;
-  closable?: boolean;
-  number: number;
-}
-
-interface Props {
-  children?: ReactNode;
-  fixed?: boolean;
-  ndlaFilm?: boolean;
-  skipToMainContentId?: string;
-  messages?: Alert[];
-  onCloseAlert?: (id: number) => void;
-}
-
-export const Masthead = ({ children, fixed, ndlaFilm, skipToMainContentId, messages, onCloseAlert }: Props) => {
-  return (
-    <>
-      {skipToMainContentId && <SkipToMainContent skipToMainContentId={skipToMainContentId} />}
-      <StyledMasthead fixed={!!fixed} ndlaFilm={!!ndlaFilm} id="masthead">
-        {messages?.map((message) => (
-          <MessageBanner
-            key={message.number}
-            showCloseButton={message.closable}
-            onClose={() => onCloseAlert?.(message.number)}
-          >
-            {message.content}
-          </MessageBanner>
-        ))}
-        <MastheadContent className="u-1/1">{children}</MastheadContent>
-      </StyledMasthead>
-    </>
-  );
-};
-
-export default Masthead;

package/src/Masthead/SkipToMainContent.tsx

@@ -1,54 +0,0 @@
-/**
- * Copyright (c) 2022-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 { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors, stackOrder } from "@ndla/core";
-
-interface Props {
-  skipToMainContentId: string;
-}
-
-const StyledSkipToMainContent = styled.a`
-  position: absolute;
-  top: 10px;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  color: ${colors.white};
-  background: ${colors.brand.primary};
-  left: auto;
-  top: auto;
-  width: 30%;
-  height: auto;
-  overflow: auto;
-  margin: 10px 35%;
-  padding: 5px;
-  border-radius: 15px;
-  border: 4px solid ${colors.brand.tertiary};
-  text-align: center;
-  font-size: 1.2em;
-  z-index: ${stackOrder.popover};
-  animation-name: fadeIn;
-  animation-duration: 0.3s;
-  transform: translateY(-150%);
-  &:focus {
-    transform: translateY(0);
-  }
-`;
-
-const SkipToMainContent = ({ skipToMainContentId }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledSkipToMainContent tabIndex={0} href={`#${skipToMainContentId}`}>
-      {t("masthead.skipToContent")}
-    </StyledSkipToMainContent>
-  );
-};
-
-export default SkipToMainContent;

package/src/Masthead/index.ts

@@ -1,16 +0,0 @@
-/**
- * Copyright (c) 2017-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 Masthead from "./Masthead";
-
-import { default as SkipToMainContent } from "./SkipToMainContent";
-import { getMastheadHeight, useMastheadHeight } from "./utils";
-
-export { getMastheadHeight, useMastheadHeight, SkipToMainContent };
-
-export default Masthead;

package/src/Masthead/utils.ts

@@ -1,45 +0,0 @@
-/**
- * Copyright (c) 2022-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 { useEffect, useState } from "react";
-import { resizeObserver } from "@ndla/util";
-
-export const getMastheadHeight = (): number | undefined => {
-  if (typeof window !== "undefined") {
-    const masthead = document.getElementById("masthead");
-    return masthead?.getBoundingClientRect().height;
-  }
-};
-
-export const useMastheadHeight = () => {
-  const [height, setHeight] = useState<number>();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  useEffect(() => {
-    if (mounted) {
-      const masthead = document.getElementById("masthead");
-
-      const handleHeightChange = (el: HTMLElement) => {
-        const newHeight = el.getBoundingClientRect().height;
-        setHeight(newHeight);
-      };
-
-      if (masthead) {
-        resizeObserver(masthead, handleHeightChange);
-      }
-    }
-  }, [mounted]);
-
-  return {
-    height,
-  };
-};

package/src/MyNdla/Resource/FolderInput.stories.tsx

@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2023-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 { Meta, StoryObj } from "@storybook/react";
-import FolderInput from "./FolderInput";
-
-export default {
-  title: "My NDLA/FolderInput",
-  tags: ["autodocs"],
-  component: FolderInput,
-  parameters: {
-    inlineStories: true,
-  },
-  args: {
-    labelHidden: false,
-    loading: false,
-    label: "Create new folder",
-    name: "folder",
-  },
-} as Meta<typeof FolderInput>;
-
-export const Default: StoryObj = {};

package/src/MyNdla/Resource/FolderInput.tsx

@@ -1,89 +0,0 @@
-/**
- * Copyright (c) 2022-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 { ComponentPropsWithRef, forwardRef, useEffect, useRef } from "react";
-import { isMobile } from "react-device-detect";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
-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";
-import { Done } from "@ndla/icons/editor";
-import { composeRefs } from "@ndla/util";
-
-interface Props {
-  loading?: boolean;
-  onClose?: () => void;
-  onSave: () => void;
-  error?: string;
-  label: string;
-}
-
-const StyledSpinner = styled(Spinner)`
-  margin: ${spacing.small};
-`;
-
-const Row = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${spacing.xxsmall};
-  padding-right: ${spacing.xsmall};
-`;
-
-const FolderInput = forwardRef<HTMLInputElement, Props & ComponentPropsWithRef<"input">>(
-  ({ loading, label, error, onClose, onSave, ...rest }, ref) => {
-    const { t } = useTranslation();
-    const inputRef = useRef<HTMLInputElement | null>(null);
-
-    useEffect(() => {
-      if (isMobile) {
-        inputRef.current?.scrollIntoView({ behavior: "smooth" });
-      }
-    }, []);
-
-    return (
-      <FormControl id="folder-name" isRequired isInvalid={!!error}>
-        <Label visuallyHidden>{label}</Label>
-        <FieldErrorMessage>{error}</FieldErrorMessage>
-        <InputContainer>
-          <InputV3 autoComplete="off" disabled={loading} ref={composeRefs(ref, inputRef)} {...rest} />
-          <Row>
-            {!loading ? (
-              <>
-                {!error && (
-                  <IconButtonV2
-                    variant={"ghost"}
-                    colorTheme="light"
-                    tabIndex={0}
-                    aria-label={t("save")}
-                    title={t("save")}
-                    size="small"
-                    onClick={onSave}
-                  >
-                    <Done />
-                  </IconButtonV2>
-                )}
-                <IconButtonV2 aria-label={t("close")} title={t("close")} size="small" variant="ghost" onClick={onClose}>
-                  <Cross />
-                </IconButtonV2>
-              </>
-            ) : (
-              <FieldHelper>
-                <StyledSpinner size="normal" aria-label={t("loading")} />
-              </FieldHelper>
-            )}
-          </Row>
-        </InputContainer>
-      </FormControl>
-    );
-  },
-);
-
-export default FolderInput;

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -1,160 +0,0 @@
-/**
- * Copyright (c) 2019-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 { RefObject, useMemo, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { breakpoints, mq, spacing, spacingUnit, colors } from "@ndla/core";
-import { SafeLink } from "@ndla/safelink";
-import { MovieType } from "./types";
-import { makeSrcQueryString } from "../Image";
-
-const IMAGE_WIDTH = 143;
-
-const Letter = styled.h2`
-  color: ${colors.white};
-  ${mq.range({ from: breakpoints.tablet })} {
-    text-indent: ${spacingUnit * 0.75}px;
-  }
-  &:after {
-    content: "";
-    display: block;
-    height: 1px;
-    background: ${colors.brand.greyDark};
-    margin-top: ${spacing.small};
-  }
-`;
-
-const StyledWrapper = styled.section`
-  width: 652px;
-  max-width: 100%;
-  margin: ${spacing.large} auto;
-  padding: 0 ${spacing.normal};
-`;
-
-const MovieItem = styled.div`
-  display: flex;
-  gap: ${spacing.small};
-  color: ${colors.white};
-`;
-
-const MovieTextWrapper = styled.div`
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.xsmall} ${spacing.xsmall} 0 0;
-  }
-  flex: 1;
-`;
-
-const MovieImage = styled.img`
-  width: 104px;
-  height: 80px;
-  ${mq.range({ from: breakpoints.tablet })} {
-    width: ${IMAGE_WIDTH}px;
-    height: 90px;
-  }
-`;
-
-const MovieTitle = styled.h3`
-  color: ${colors.white};
-  margin: 0;
-`;
-
-const MovieDescription = styled.p`
-  color: ${colors.brand.greyLighter};
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-`;
-
-const StyledSafeLink = styled(SafeLink)`
-  box-shadow: none;
-  display: flex;
-  gap: ${spacing.small};
-  &:hover,
-  &:focus {
-    ${MovieTitle} {
-      text-decoration: underline;
-    }
-    ${MovieImage} {
-      &:after {
-        transition: opacity 200ms ease;
-        display: block;
-        opacity: 0.3;
-      }
-    }
-  }
-`;
-
-interface Props {
-  movies: MovieType[];
-}
-
-const MovieGroup = styled.section`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.normal};
-`;
-
-const groupMovies = (movies: MovieType[]) => {
-  const sortedMovies = movies.toSorted((a, b) => a.title.localeCompare(b.title));
-
-  const grouped = sortedMovies.reduce<Record<string, MovieType[]>>((acc, movie) => {
-    const firstChar = movie.title[0]?.toUpperCase();
-    const isLetter = firstChar?.match(/[A-Z\WÆØÅ]+/);
-    const char = isLetter ? firstChar : "#";
-    if (acc[char]) {
-      acc[char].push(movie);
-    } else {
-      acc[char] = [movie];
-    }
-    return acc;
-  }, {});
-  return Object.entries(grouped).map(([letter, movies]) => ({
-    letter,
-    movies,
-  }));
-};
-
-const AllMoviesAlphabetically = ({ movies }: Props) => {
-  const groupedMovies = useMemo(() => groupMovies(movies), [movies]);
-  const { t } = useTranslation();
-  // Split into Letters.
-  const wrapperRef: RefObject<HTMLElement> = useRef(null);
-
-  return (
-    <StyledWrapper ref={wrapperRef}>
-      {groupedMovies.map(({ letter, movies }) => (
-        <MovieGroup key={letter}>
-          <Letter aria-label={t("filmfrontpage.allMovieGroupTitleLabel", { letter })}>{letter}</Letter>
-          {movies.map((movie) => (
-            <MovieItem key={movie.id}>
-              <StyledSafeLink to={movie.path}>
-                <MovieImage
-                  alt=""
-                  loading="lazy"
-                  src={
-                    movie?.metaImage?.url ? `${movie.metaImage?.url}?${makeSrcQueryString(IMAGE_WIDTH * 2)}` : undefined
-                  }
-                />
-                <MovieTextWrapper>
-                  <MovieTitle>{movie.title}</MovieTitle>
-                  <MovieDescription>{movie.metaDescription}</MovieDescription>
-                </MovieTextWrapper>
-              </StyledSafeLink>
-            </MovieItem>
-          ))}
-        </MovieGroup>
-      ))}
-    </StyledWrapper>
-  );
-};
-
-export default AllMoviesAlphabetically;