@ndla/ui 50.15.3 → 52.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/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;

package/src/NDLAFilm/FilmContentCard.tsx

@@ -1,138 +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 { HTMLAttributes } from "react";
-import styled from "@emotion/styled";
-import { spacing, colors, fonts, breakpoints, misc, mq } from "@ndla/core";
-import { SafeLink } from "@ndla/safelink";
-import FilmContentCardTags from "./FilmContentCardTags";
-import { MovieResourceType, MovieType } from "./types";
-import { makeSrcQueryString } from "../Image";
-
-interface Props extends HTMLAttributes<HTMLElement> {
-  movie: MovieType;
-  resourceTypes: MovieResourceType[];
-  hideTags?: boolean;
-  className?: string;
-  lazy?: boolean;
-  type?: "slideshow" | "list";
-}
-
-const FilmContentCard = ({
-  movie: { metaImage, resourceTypes: movieResourceTypes, title, id, path },
-  resourceTypes,
-  hideTags = false,
-  className,
-  type = "slideshow",
-  lazy,
-  ...rest
-}: Props) => {
-  const backgroundImage = metaImage ? `${metaImage.url}?${makeSrcQueryString(600)}` : "";
-  const contentTypeId = `${type}-content-type-${id}`;
-
-  return (
-    <StyledSafeLink
-      onMouseDown={(e) => e.preventDefault()}
-      to={path}
-      data-type={type}
-      aria-describedby={contentTypeId}
-      className={className}
-      {...rest}
-    >
-      <ImageWrapper>
-        <StyledImage src={backgroundImage} loading={lazy ? "lazy" : "eager"} alt="" />
-        {movieResourceTypes && !hideTags && (
-          <FilmContentCardTags
-            id={contentTypeId}
-            movieResourceTypes={movieResourceTypes}
-            resourceTypes={resourceTypes}
-          />
-        )}
-      </ImageWrapper>
-      <StyledMovieTitle>{title}</StyledMovieTitle>
-    </StyledSafeLink>
-  );
-};
-
-const StyledMovieTitle = styled.span`
-  ${fonts.sizes("14px", "20px")};
-  font-weight: ${fonts.weight.semibold};
-  color: #fff;
-  @media (min-width: ${breakpoints.mobileWide}) {
-    ${fonts.sizes("16px", "22px")};
-  }
-  @media (min-width: ${breakpoints.tablet}) {
-    ${fonts.sizes("18px", "24px")};
-  }
-`;
-
-const ImageWrapper = styled.div`
-  position: relative;
-  background-color: ${colors.ndlaFilm.filmColorLight};
-  border-radius: ${misc.borderRadius};
-  overflow: hidden;
-`;
-
-const StyledImage = styled.img`
-  aspect-ratio: 16/9;
-  width: 100%;
-  object-fit: cover;
-`;
-
-interface StyledSlideWrapperProps {
-  columnWidth?: number;
-}
-
-const shouldForwardProp = (p: string) => p !== "columnWidth";
-
-const StyledSafeLink = styled(SafeLink, {
-  shouldForwardProp,
-})<StyledSlideWrapperProps>`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.small};
-  color: ${colors.white};
-  box-shadow: none;
-  &:hover,
-  &:focus-within,
-  &:active,
-  &:focus {
-    ${StyledMovieTitle} {
-      text-decoration: underline;
-    }
-    [data-content-cards] {
-      opacity: 1;
-    }
-    img {
-      opacity: 0.7;
-    }
-  }
-  &[data-type="slideshow"] {
-    width: 30vw;
-    ${mq.range({ until: breakpoints.tablet })} {
-      width: 40vw;
-    }
-    ${mq.range({ from: breakpoints.desktop })} {
-      width: 30vw;
-    }
-  }
-  &[data-type="list"] {
-    width: 40vw;
-    ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
-      width: 28vw;
-    }
-    ${mq.range({ from: breakpoints.desktop })} {
-      width: 20vw;
-    }
-    ${mq.range({ from: breakpoints.ultraWide })} {
-      width: 14vw;
-    }
-  }
-`;
-
-export default FilmContentCard;

package/src/NDLAFilm/FilmContentCardTags.tsx

@@ -1,57 +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 styled from "@emotion/styled";
-import { spacing, spacingUnit, colors, fonts, misc, stackOrder } from "@ndla/core";
-import { MovieResourceType } from "./types";
-
-const StyledWrapperDiv = styled.div`
-  transition: opacity 200ms ease;
-  padding: ${spacing.xsmall} ${spacing.xsmall};
-  opacity: 0;
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  z-index: ${stackOrder.offsetSingle};
-`;
-
-const StyledMovieTags = styled.span`
-  ${fonts.sizes("14px", "16px")};
-  font-weight: ${fonts.weight.semibold};
-  background: ${colors.brand.greyLight};
-  padding: ${spacing.xxsmall} ${spacing.xsmall};
-  border-radius: ${misc.borderRadius};
-  color: ${colors.text.primary};
-  margin-right: ${spacingUnit / 4}px;
-  margin-bottom: ${spacingUnit / 8}px;
-`;
-
-interface Props {
-  id: string;
-  movieResourceTypes: MovieResourceType[];
-  resourceTypes: MovieResourceType[];
-}
-const FilmContentCardTags = ({ movieResourceTypes, resourceTypes, id }: Props) => {
-  const resources: Record<string, boolean> = {};
-  movieResourceTypes.forEach((movieResourceType) => {
-    const resource = resourceTypes.find((resourceType) => resourceType.id === movieResourceType.id);
-    if (resource) {
-      resources[resource.name] = true;
-    }
-  });
-  return (
-    // data-content-cards is used to set the opacity of tags on hover/focus
-    <StyledWrapperDiv id={id} data-content-cards="">
-      {Object.keys(resources).map((resourceName) => (
-        <StyledMovieTags key={resourceName}>{resourceName}</StyledMovieTags>
-      ))}
-    </StyledWrapperDiv>
-  );
-};
-
-export default FilmContentCardTags;

package/src/NDLAFilm/FilmMovieList.tsx

@@ -1,54 +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 styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
-import { Carousel } from "@ndla/carousel";
-import { breakpoints, mq, spacing } from "@ndla/core";
-import { ChevronLeft, ChevronRight } from "@ndla/icons/common";
-import FilmContentCard from "./FilmContentCard";
-import { StyledHeadingH2 } from "./filmStyles";
-import { MovieResourceType, MovieType } from "./types";
-
-interface Props {
-  movies: MovieType[];
-  name?: string;
-  slideBackwardsLabel: string;
-  slideForwardsLabel: string;
-  resourceTypes: MovieResourceType[];
-}
-
-const StyledSection = styled.section`
-  margin-bottom: ${spacing.normal};
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-bottom: ${spacing.large};
-  }
-`;
-
-const FilmMovieList = ({ name, movies = [], slideBackwardsLabel, slideForwardsLabel, resourceTypes = [] }: Props) => (
-  <StyledSection>
-    {!!name && <StyledHeadingH2>{name}</StyledHeadingH2>}
-    <Carousel
-      leftButton={
-        <IconButtonV2 aria-label={slideBackwardsLabel}>
-          <ChevronLeft />
-        </IconButtonV2>
-      }
-      rightButton={
-        <IconButtonV2 aria-label={slideForwardsLabel}>
-          <ChevronRight />
-        </IconButtonV2>
-      }
-      items={movies.map((movie) => (
-        <FilmContentCard key={movie.id} movie={movie} type="list" lazy resourceTypes={resourceTypes} />
-      ))}
-    />
-  </StyledSection>
-);
-
-export default FilmMovieList;