@ndla/ui 50.15.3 → 52.0.0

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);
-});

package/src/NDLAFilm/filmStyles.ts

@@ -1,49 +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 { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { fonts, spacing, colors, mq, breakpoints } from "@ndla/core";
-
-export const setAnimations = () => {
-  const styles: any = {};
-  for (let i = 1; i < 20; i++) {
-    styles[`> div:nth-child(${i + 1})`] = {
-      "animation-delay": `${i * 50}ms`,
-    };
-  }
-  return styles;
-};
-
-const headingStyle = css`
-  ${fonts.sizes("22px", "26px")};
-  font-weight: ${fonts.weight.semibold};
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: ${colors.white};
-  margin: ${spacing.xsmall} 0;
-  small {
-    font-weight: normal;
-    padding-left: ${spacing.small};
-    color: ${colors.brand.grey};
-  }
-  margin-left: ${spacing.normal};
-  margin-right: ${spacing.normal};
-  ${mq.range({ from: breakpoints.desktop })} {
-    margin-left: ${spacing.xlarge};
-    margin-right: ${spacing.xlarge};
-  }
-`;
-
-export const StyledHeadingH1 = styled.h1`
-  ${headingStyle};
-`;
-
-export const StyledHeadingH2 = styled.h2`
-  ${headingStyle};
-`;

package/src/NDLAFilm/index.ts

@@ -1,15 +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 AllMoviesAlphabetically from "./AllMoviesAlphabetically";
-import FilmMovieList from "./FilmMovieList";
-import FilmMovieSearch from "./FilmMovieSearch";
-import FilmSlideshow from "./FilmSlideshow";
-import MovieGrid from "./MovieGrid";
-
-export { FilmSlideshow, MovieGrid, FilmMovieSearch, FilmMovieList, AllMoviesAlphabetically };

package/src/NDLAFilm/isLetter.ts

@@ -1,13 +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.
- *
- */
-
-export const isLetter = (title: string): boolean => {
-  const regTest: RegExp = /^[A-Za-zÅØÆåøæ]+$/;
-  const firstLetter = title.substr(0, 1);
-  return !(firstLetter.match(regTest) === null);
-};

package/src/NDLAFilm/types.ts

@@ -1,24 +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.
- *
- */
-
-export interface MovieType {
-  id: number | string;
-  metaDescription: string;
-  resourceTypes: MovieResourceType[];
-  metaImage?: {
-    alt: string;
-    url: string;
-  };
-  path: string;
-  title: string;
-}
-
-export interface MovieResourceType {
-  id: string;
-  name: string;
-}