@ndla/ui 51.0.0 → 53.0.0

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;

package/src/NDLAFilm/FilmMovieSearch.tsx

@@ -1,135 +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 { useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { spacing, mq, breakpoints, colors } from "@ndla/core";
-import { SafeLink } from "@ndla/safelink";
-import { Option, Select, SingleValue } from "@ndla/select";
-import { StyledHeadingH2 } from "./filmStyles";
-import { MovieResourceType } from "./types";
-import { OneColumn } from "..";
-
-const FilmMovieSearchContainer = styled.div`
-  margin: ${spacing.normal} 0 ${spacing.large};
-`;
-
-const TopicNavigation = styled.div`
-  margin: ${spacing.normal} 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: flex;
-    align-items: flex-start;
-    padding: 0 ${spacing.normal};
-  }
-`;
-
-const StyledUl = styled.ul`
-  display: flex;
-  flex-direction: column;
-  list-style-type: none;
-  padding-bottom: ${spacing.nsmall};
-  li {
-    flex: 1;
-    width: 100%;
-    padding-bottom: ${spacing.xsmall};
-    a {
-      color: ${colors.white};
-      &:hover,
-      &:focus-within {
-        color: ${colors.brand.light};
-      }
-    }
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: grid;
-    grid-template-rows: auto auto auto auto;
-    grid-template-columns: 1fr;
-    grid-auto-flow: column;
-    column-gap: ${spacing.normal};
-  }
-`;
-
-interface Props {
-  topics?: { id: string; path: string; name: string }[];
-  onChangeResourceType: (resourceType?: string) => void;
-  resourceTypeSelected?: MovieResourceType;
-  resourceTypes: MovieResourceType[];
-  skipToContentId?: string;
-}
-
-const FilmMovieSearch = ({
-  topics = [],
-  onChangeResourceType,
-  resourceTypes,
-  resourceTypeSelected,
-  skipToContentId,
-}: Props) => {
-  const { t } = useTranslation();
-  const selectedOption = useMemo(() => {
-    if (resourceTypeSelected) {
-      return {
-        value: resourceTypeSelected.id,
-        label: resourceTypeSelected.name,
-      };
-    }
-    return { value: "fromNdla", label: t("ndlaFilm.search.categoryFromNdla") };
-  }, [resourceTypeSelected, t]);
-
-  const options: Option[] = useMemo(() => {
-    const fromNdla = {
-      value: "fromNdla",
-      label: t("ndlaFilm.search.categoryFromNdla"),
-    };
-    return [fromNdla].concat(resourceTypes.map((rt) => ({ value: rt.id, label: rt.name })));
-  }, [resourceTypes, t]);
-
-  const onChange = useCallback(
-    (value: SingleValue) => {
-      if (value?.value === "fromNdla") {
-        onChangeResourceType();
-      } else {
-        onChangeResourceType(value?.value);
-      }
-    },
-    [onChangeResourceType],
-  );
-
-  return (
-    <FilmMovieSearchContainer>
-      <OneColumn>
-        <TopicNavigation>
-          <StyledHeadingH2 id={skipToContentId} className="u-12/12 u-4/12@tablet">
-            {`${t("ndlaFilm.subjectsInMovies")}:`}
-          </StyledHeadingH2>
-          <nav className="u-12/12 u-8/12@tablet" aria-labelledby={skipToContentId}>
-            <StyledUl>
-              {topics.map((topic) => (
-                <li key={topic.id}>
-                  <SafeLink to={topic.path} key={topic.id}>
-                    <span>{topic.name}</span>
-                  </SafeLink>
-                </li>
-              ))}
-            </StyledUl>
-          </nav>
-        </TopicNavigation>
-        <Select<false>
-          options={options}
-          value={selectedOption}
-          onChange={onChange}
-          colorTheme="white"
-          placeholder={t("ndlaFilm.search.chooseCategory")}
-          prefix={`${t("ndlaFilm.search.chooseCategory")} `}
-        />
-      </OneColumn>
-    </FilmMovieSearchContainer>
-  );
-};
-
-export default FilmMovieSearch;

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -1,177 +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 { useCallback, useState } from "react";
-import styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
-import { Carousel } from "@ndla/carousel";
-import { breakpoints, colors, misc, mq, spacing } from "@ndla/core";
-import { ChevronLeft, ChevronRight } from "@ndla/icons/common";
-import { SafeLink } from "@ndla/safelink";
-import FilmContentCard from "./FilmContentCard";
-import { MovieType } from "./types";
-import Image from "../Image";
-
-interface Props {
-  slideshow: MovieType[];
-}
-
-const SlideInfoWrapper = styled.div`
-  position: absolute;
-  color: ${colors.white};
-  max-width: 40%;
-  min-width: 40%;
-  top: 40%;
-  right: 5%;
-  ${mq.range({ until: breakpoints.desktop })} {
-    top: 30%;
-    max-width: 60%;
-    min-width: 60%;
-  }
-  ${mq.range({ until: breakpoints.tablet })} {
-    max-width: 90%;
-    min-width: 90%;
-    left: 5%;
-  }
-`;
-
-const StyledSafeLink = styled(SafeLink)`
-  position: relative;
-  display: block;
-  box-shadow: none;
-`;
-
-const InfoWrapper = styled.div`
-  padding: ${spacing.normal};
-  border-radius: ${misc.borderRadius};
-  border: 0.5px solid ${colors.brand.primary};
-  background-color: rgba(11, 29, 45, 0.8);
-  h3 {
-    margin: 0px;
-  }
-`;
-
-const StyledImg = styled(Image)`
-  max-height: 600px;
-  min-height: 600px;
-  object-position: top;
-  width: 100%;
-  aspect-ratio: 16/9;
-  ${mq.range({ until: breakpoints.tablet })} {
-    min-height: 440px;
-    max-height: 440px;
-  }
-  object-fit: cover;
-`;
-
-const CarouselContainer = styled.div`
-  margin-top: -50px;
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-top: -70px;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    margin-top: -160px;
-  }
-`;
-
-interface StyledFilmContentCardProps {
-  current?: boolean;
-}
-
-const SlideshowButton = styled(IconButtonV2)`
-  margin-top: ${spacing.normal};
-`;
-
-const shouldForwardProp = (p: string) => p !== "current";
-
-const StyledFilmContentCard = styled(FilmContentCard, {
-  shouldForwardProp,
-})<StyledFilmContentCardProps>`
-  margin-bottom: 2%;
-  transform: ${(p) => (p.current ? "translateY(0%)" : "translateY(10%)")};
-  transition: all 200ms;
-`;
-
-const FilmSlideshow = ({ slideshow }: Props) => {
-  const [currentSlide, setCurrentSlide] = useState(slideshow[0]);
-
-  return (
-    <section>
-      <StyledSafeLink to={currentSlide.path} tabIndex={-1} aria-hidden>
-        <StyledImg
-          src={currentSlide.metaImage?.url ?? ""}
-          sizes="(min-width: 1140px) 1140px, (min-width: 720px) 100vw, 100vw"
-          alt=""
-        />
-        <SlideInfoWrapper>
-          <InfoWrapper>
-            <h3>{currentSlide.title}</h3>
-            <span id="currentMovieDescription">{currentSlide.metaDescription}</span>
-          </InfoWrapper>
-        </SlideInfoWrapper>
-      </StyledSafeLink>
-      <CarouselContainer>
-        <Carousel
-          leftButton={
-            <SlideshowButton aria-label="">
-              <ChevronLeft />
-            </SlideshowButton>
-          }
-          rightButton={
-            <SlideshowButton aria-label="">
-              <ChevronRight />
-            </SlideshowButton>
-          }
-          items={slideshow.map((movie) => (
-            <FilmCard
-              key={movie.id}
-              current={movie.id === currentSlide.id}
-              movie={movie}
-              setCurrentSlide={setCurrentSlide}
-            />
-          ))}
-        />
-      </CarouselContainer>
-    </section>
-  );
-};
-
-interface FilmCardProps {
-  setCurrentSlide: (movie: MovieType) => void;
-  movie: MovieType;
-  current: boolean;
-}
-
-const FilmCard = ({ setCurrentSlide, movie, current }: FilmCardProps) => {
-  const [hoverCallback, setHoverCallback] = useState<ReturnType<typeof setTimeout> | undefined>(undefined);
-
-  const onHover = useCallback(() => {
-    const timeout = setTimeout(() => setCurrentSlide(movie), 500);
-    setHoverCallback(timeout);
-  }, [movie, setCurrentSlide]);
-
-  return (
-    <StyledFilmContentCard
-      onMouseEnter={onHover}
-      onMouseLeave={() => {
-        if (hoverCallback) {
-          clearTimeout(hoverCallback);
-          setHoverCallback(undefined);
-        }
-      }}
-      onFocus={() => setCurrentSlide(movie)}
-      current={current}
-      aria-describedby={"currentMovieDescription"}
-      key={movie.id}
-      movie={movie}
-      resourceTypes={[]}
-    />
-  );
-};
-
-export default FilmSlideshow;

package/src/NDLAFilm/MovieGrid.tsx

@@ -1,86 +0,0 @@
-/**
- * Copyright (c) 2018-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 { breakpoints, mq, spacing } from "@ndla/core";
-import FilmContentCard from "./FilmContentCard";
-import { setAnimations, StyledHeadingH1 } from "./filmStyles";
-import { MovieResourceType, MovieType } from "./types";
-
-interface MovieListingProps {
-  marginLeft?: number;
-}
-
-const MovieListing = styled.div<MovieListingProps>`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${spacing.normal};
-  margin: ${spacing.small} 0;
-  margin-left: ${(props) => props.marginLeft && `${props.marginLeft}px`};
-  ${setAnimations()};
-  margin-left: ${spacing.normal};
-  margin-right: ${spacing.normal};
-  ${mq.range({ from: breakpoints.desktop })} {
-    margin-left: ${spacing.xlarge};
-    margin-right: ${spacing.xlarge};
-  }
-  > div {
-    opacity: 0;
-    animation-fill-mode: forwards;
-    animation-name: fadeIn;
-    animation-duration: 300ms;
-  }
-`;
-
-interface LoadingPlaceholderProps {
-  height?: string;
-}
-
-const LoadingPlaceholder = styled.div<LoadingPlaceholderProps>`
-  height: ${(props) => props.height};
-`;
-
-interface Props {
-  resourceTypeName?: MovieResourceType;
-  fetchingMoviesByType: boolean;
-  moviesByType: MovieType[];
-  resourceTypes: MovieResourceType[];
-  loadingPlaceholderHeight?: string;
-}
-
-const MovieGrid = ({
-  resourceTypeName,
-  fetchingMoviesByType,
-  moviesByType,
-  resourceTypes,
-  loadingPlaceholderHeight,
-}: Props) => {
-  const { t } = useTranslation();
-  return (
-    <section>
-      <StyledHeadingH1>
-        {resourceTypeName && resourceTypeName.name}
-        <small>
-          {fetchingMoviesByType
-            ? t("ndlaFilm.loadingMovies")
-            : `${moviesByType.length} ${t("ndlaFilm.movieMatchInCategory")}`}
-        </small>
-      </StyledHeadingH1>
-      <MovieListing>
-        {fetchingMoviesByType && <LoadingPlaceholder height={loadingPlaceholderHeight} />}
-        {!fetchingMoviesByType &&
-          moviesByType.map((movie, index) => (
-            <FilmContentCard key={index} hideTags movie={movie} resourceTypes={resourceTypes} lazy type="list" />
-          ))}
-      </MovieListing>
-    </section>
-  );
-};
-
-export default MovieGrid;

package/src/NDLAFilm/VisualElement.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 styled from "@emotion/styled";
-import Image from "../Image";
-
-const StylediFrame = styled.iframe`
-  height: 100%;
-  width: 100%;
-  border: 0;
-  margin: 0;
-  padding: 0;
-`;
-
-interface Props {
-  visualElement: {
-    alt?: string;
-    url: string;
-    type: string;
-  };
-}
-const VisualElement = ({ visualElement }: Props) => {
-  const { type, url, alt } = visualElement;
-  if (type === "image") {
-    return <Image src={url} alt={alt ?? ""} />;
-  } else if (type === "brightcove") {
-    return <StylediFrame allowFullScreen={true} src={url} />;
-  } else {
-    return null;
-  }
-};
-
-export default VisualElement;

package/src/NDLAFilm/__tests__/isLetter-test.ts

@@ -1,20 +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.
- *
- */
-
-/* eslint-env jest */
-
-import { isLetter } from "../isLetter";
-
-test("Check is letter", () => {
-  expect(isLetter("A")).toBe(true);
-  expect(isLetter("1")).toBe(false);
-  expect(isLetter("æ")).toBe(true);
-  expect(isLetter("?")).toBe(false);
-  expect(isLetter("!")).toBe(false);
-  expect(isLetter(" ")).toBe(false);
-});