@ndla/ui 51.0.0 → 52.0.0

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -1,71 +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, useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { spacing, mq, breakpoints, colors, stackOrder } from "@ndla/core";
-import { LearningPath } from "@ndla/icons/contentType";
-import { ModalHeader, ModalBody, ModalTrigger, ModalCloseButton, Modal, ModalContent } from "@ndla/modal";
-
-const buttonToggleCss = css`
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: none;
-  }
-  margin-right: auto;
-  margin-left: ${spacing.normal};
-  z-index: ${stackOrder.popover};
-  svg {
-    width: 20px;
-    height: 20px;
-    margin-right: ${spacing.xsmall};
-    transform: translateY(-2px);
-  }
-`;
-
-const StyledModalContent = styled(ModalContent)`
-  background-color: ${colors.brand.greyLightest};
-`;
-
-type ModalWrapperProps = {
-  innerWidth: number;
-  children: (arg: VoidFunction) => ReactNode;
-};
-
-const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {
-  const [open, setIsOpen] = useState(false);
-  const { t } = useTranslation();
-
-  const onClose = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  if (innerWidth < 601) {
-    return (
-      <Modal open={open} onOpenChange={setIsOpen}>
-        <ModalTrigger>
-          <ButtonV2 css={buttonToggleCss}>
-            <LearningPath />
-            <span>{t("learningPath.openMenuTooltip")}</span>
-          </ButtonV2>
-        </ModalTrigger>
-        <StyledModalContent animationDuration={200} size="full">
-          <ModalHeader>
-            <ModalCloseButton />
-          </ModalHeader>
-          <ModalBody>{children(onClose)}</ModalBody>
-        </StyledModalContent>
-      </Modal>
-    );
-  }
-  return <>{children(() => {})}</>;
-};
-
-export default ModalWrapperComponent;

package/src/LearningPaths/LearningPathMobileHeader.tsx

@@ -1,37 +0,0 @@
-/**
- * Copyright (c) 2021-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, fonts, spacing } from "@ndla/core";
-import { LearningPathBadge } from "../ContentTypeBadge";
-
-const StyledWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin: 0 -${spacing.normal} ${spacing.medium};
-  background: ${colors.brand.lighter};
-  padding: ${spacing.small} ${spacing.normal};
-`;
-
-const StyledMiniHeader = styled.span`
-  padding-left: ${spacing.xsmall};
-  ${fonts.sizes(16, 1.1)};
-`;
-
-const LearningPathMobileHeader = () => {
-  const { t } = useTranslation();
-  return (
-    <StyledWrapper>
-      <LearningPathBadge size="xx-small" background />
-      <StyledMiniHeader>{t("learningPath.youAreInALearningPath")}</StyledMiniHeader>
-    </StyledWrapper>
-  );
-};
-
-export default LearningPathMobileHeader;

package/src/LearningPaths/LearningPathMobileStepInfo.tsx

@@ -1,38 +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 { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { mq, breakpoints, typography } from "@ndla/core";
-
-const StyledInfo = styled.div`
-  ${typography.smallHeading}
-  white-space: nowrap;
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: none;
-  }
-`;
-
-type Props = {
-  total: number;
-  current: number;
-};
-
-const LearningPathMobileStepInfo = ({ total, current }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledInfo>
-      {t("learningPath.mobileStepInfo", {
-        totalPages: total,
-        currentPage: current,
-      })}
-    </StyledInfo>
-  );
-};
-
-export default LearningPathMobileStepInfo;

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/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;