@ndla/ui 50.15.3 → 52.0.0

package/src/SearchTypeResult/components/SubjectFilters.tsx

@@ -1,149 +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 { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { Plus as PlusIcon } from "@ndla/icons/action";
-
-import { Modal, ModalTrigger } from "@ndla/modal";
-import { FilterProps } from "../ActiveFilterContent";
-import ActiveFilters from "../ActiveFilters";
-import PopupFilter, { PopupFilterProps } from "../PopupFilter";
-
-const FilterButtonText = styled.span`
-  display: inline-block;
-  font-weight: 600;
-  margin-right: 10px;
-`;
-
-type ProgrammeProps = PopupFilterProps["programmes"] & {
-  values: string[];
-  onProgrammeValuesChange: (values: string[]) => void;
-};
-
-type SubjectCategoriesProps = PopupFilterProps["subjectCategories"] & {
-  values: string[];
-  onSubjectValuesChange: (values: string[]) => void;
-};
-
-export type SubjectFilterProps = {
-  filters: {
-    programmes?: ProgrammeProps;
-    subjectCategories?: SubjectCategoriesProps;
-  };
-  activeFilters?: {
-    filters: FilterProps[];
-    onFilterRemove: (value: string, name: string) => void;
-  };
-};
-
-type Props = {
-  isNarrowScreen?: boolean;
-};
-
-const SubjectFilters = ({ filters, activeFilters, isNarrowScreen }: SubjectFilterProps & Props) => {
-  const { t } = useTranslation();
-  const { subjectCategories, programmes } = filters;
-  const [subjectValues, setSubjectValues] = useState<Array<string>>([]);
-  const [programmesValues, setProgrammesValues] = useState<Array<string>>([]);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const prevIsOpenRef = useRef<boolean>();
-  useEffect(() => {
-    prevIsOpenRef.current = isOpen;
-  });
-  const prevIsOpen = prevIsOpenRef.current;
-
-  useEffect(() => {
-    if (isOpen && isOpen !== prevIsOpen) {
-      if (subjectCategories) {
-        setSubjectValues([...subjectCategories.values]);
-      }
-      if (programmes) {
-        setProgrammesValues([...programmes.values]);
-      }
-    }
-  }, [isOpen, prevIsOpen, subjectCategories, programmes]);
-
-  const onToggleSubject = (subjectId: string) => {
-    let updatedFilter = [...subjectValues];
-    if (updatedFilter.includes(subjectId)) {
-      updatedFilter = subjectValues.filter((option) => option !== subjectId);
-    } else {
-      updatedFilter.push(subjectId);
-    }
-    setSubjectValues(updatedFilter);
-    if (subjectCategories) {
-      subjectCategories.onSubjectValuesChange(updatedFilter);
-    }
-  };
-
-  const onToggleProgramme = (programmeId: string) => {
-    let updatedFilter = [...programmesValues];
-    if (updatedFilter.includes(programmeId)) {
-      updatedFilter = programmesValues.filter((option) => option !== programmeId);
-    } else {
-      updatedFilter.push(programmeId);
-    }
-    setProgrammesValues(updatedFilter);
-    if (programmes) {
-      programmes.onProgrammeValuesChange(updatedFilter);
-    }
-  };
-
-  const handlePopupOpen = () => {
-    setIsOpen(true);
-  };
-
-  const OpenModalButton = () => (
-    <ModalTrigger>
-      <ButtonV2 type="button" size="normal" colorTheme="greyLighter" shape="pill">
-        <FilterButtonText>{t("searchPage.searchFilterMessages.noValuesButtonText")}</FilterButtonText>
-        <PlusIcon />
-      </ButtonV2>
-    </ModalTrigger>
-  );
-
-  const ActiveFiltersElement = ({ showModalButton }: { showModalButton?: boolean }) => {
-    const customElements = showModalButton ? [OpenModalButton()] : [];
-    if (!activeFilters) return null;
-    return (
-      <ActiveFilters
-        {...activeFilters}
-        showOnSmallScreen={isNarrowScreen}
-        onClickShowHiddenSubjects={handlePopupOpen}
-        customElements={customElements}
-      />
-    );
-  };
-
-  return (
-    <Modal open={isOpen} onOpenChange={setIsOpen}>
-      {isNarrowScreen ? (
-        <ActiveFiltersElement showModalButton />
-      ) : isNarrowScreen === false ? (
-        <>
-          <OpenModalButton />
-          <ActiveFiltersElement />
-        </>
-      ) : undefined}
-      <PopupFilter
-        programmes={programmes}
-        subjectCategories={subjectCategories}
-        subjectValues={subjectValues}
-        programmesValues={programmesValues}
-        onToggleSubject={onToggleSubject}
-        onToggleProgramme={onToggleProgramme}
-      />
-    </Modal>
-  );
-};
-
-export default SubjectFilters;

package/src/SearchTypeResult/index.ts

@@ -1,17 +0,0 @@
-/**
- * Copyright (c) 2020-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 SearchFieldHeader from "./SearchFieldHeader";
-import SearchFilterContent from "./SearchFilterContent";
-import SearchHeader from "./SearchHeader";
-import SearchSubjectResult from "./SearchSubjectResult";
-import SearchTypeResult from "./SearchTypeResult";
-
-export type { ContentType } from "./SearchTypeResult";
-
-export { SearchTypeResult, SearchHeader, SearchFieldHeader, SearchSubjectResult, SearchFilterContent };

package/src/Subject/SubjectBanner.tsx

@@ -1,39 +0,0 @@
-/**
- * Copyright (c) 2020-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 { breakpoints, mq } from "@ndla/core";
-
-type BannerProps = {
-  image: string;
-  negativeTopMargin?: boolean;
-};
-const StyledBanner = styled.div<BannerProps>`
-  width: 100%;
-  height: 120px;
-  margin-top: 0px;
-  background-image: url(${(props) => props.image});
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center right;
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: 190px;
-    ${(props) => props.negativeTopMargin && `margin-top: -30px;`}
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    height: 220px;
-    ${(props) => props.negativeTopMargin && `margin-top: -60px;`}
-  }
-`;
-
-type Props = BannerProps & {};
-const SubjectBanner = ({ image, negativeTopMargin }: Props) => (
-  <StyledBanner image={image} negativeTopMargin={negativeTopMargin} />
-);
-
-export default SubjectBanner;

package/src/Subject/SubjectHeader.tsx

@@ -1,100 +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 { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { colors, fonts, mq, spacing, breakpoints } from "@ndla/core";
-import OneColumn from "../Layout/OneColumn";
-
-type Types = "mobile" | "tablet" | "desktop" | "wide";
-
-interface Props {
-  images: {
-    url: string;
-    types: Types[];
-  }[];
-  heading: string;
-}
-
-const StyledHeader = styled.header`
-  width: 100%;
-  position: relative;
-  min-height: 180px;
-  display: flex;
-  justify-content: flex-start;
-  background: ${colors.brand.primary};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: 320px;
-    align-items: center;
-  }
-`;
-
-const typeMap: Record<Types, { from?: string; until?: string }> = {
-  mobile: { from: breakpoints.mobile, until: breakpoints.tablet },
-  tablet: { from: breakpoints.tablet, until: breakpoints.desktop },
-  desktop: { from: breakpoints.desktop, until: breakpoints.wide },
-  wide: { from: breakpoints.wide },
-};
-interface StyledBackgroundProps {
-  type: Types;
-  imageUrl: string;
-}
-
-const StyledBackground = styled.div<StyledBackgroundProps>`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0%;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center right;
-  opacity: 0.5;
-  background-image: url(${(p) => p.imageUrl});
-  ${(p) =>
-    p.type &&
-    css`
-      display: none;
-      ${mq.range(typeMap[p.type])} {
-        display: block;
-      }
-    `};
-`;
-
-const StyledHeading = styled.h1`
-  ${fonts.sizes("24px", "28px")};
-  color: ${colors.white};
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  margin: ${spacing.medium} 0 ${spacing.normal} 0;
-  font-weight: ${fonts.weight.bold};
-  padding: 0 ${spacing.normal};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin: 0;
-    ${fonts.sizes("40px", "40px")};
-    padding: 0 0 0 ${spacing.xlarge};
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    margin: 0;
-    ${fonts.sizes("52px", "52px")};
-    padding: 0 0 0 ${spacing.xlarge};
-  }
-`;
-
-const SubjectHeader = ({ images = [], heading }: Props) => (
-  <StyledHeader>
-    {images?.map((image) =>
-      image.types.map((type) => <StyledBackground key={`${image.url}${type}`} imageUrl={image.url} type={type} />),
-    )}
-    <OneColumn noPadding>
-      <StyledHeading>{heading}</StyledHeading>
-    </OneColumn>
-  </StyledHeader>
-);
-
-export default SubjectHeader;

package/src/Subject/index.ts

@@ -1,10 +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.
- *
- */
-
-export { default as SubjectHeader } from "./SubjectHeader";
-export { default as SubjectBanner } from "./SubjectBanner";

package/src/ToolboxPage/ToolboxInfo.tsx

@@ -1,42 +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 { MouseEvent } from "react";
-import { useTranslation } from "react-i18next";
-import { Heading, Text } from "@ndla/typography";
-import { NavigationBox } from "../Navigation";
-import { ItemProps } from "../Navigation/NavigationBox";
-
-interface Props {
-  id?: string;
-  title: string;
-  introduction: string;
-  topics: ItemProps[];
-  onSelectTopic?: (event: MouseEvent<HTMLElement>, id?: string) => void;
-}
-
-const ToolboxInfo = ({ title, introduction, topics, onSelectTopic, id }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <>
-      <Heading element="h1" headingStyle="h1-resource" id={id} tabIndex={-1}>
-        {title}
-      </Heading>
-      <Text textStyle="ingress">{introduction}</Text>
-      <NavigationBox
-        items={topics}
-        listDirection="floating"
-        heading={t("topicPage.topics")}
-        colorMode="greyLighter"
-        onClick={onSelectTopic}
-      />
-    </>
-  );
-};
-
-export default ToolboxInfo;

package/src/ToolboxPage/index.ts

@@ -1,11 +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 ToolboxInfo from "./ToolboxInfo";
-
-export { ToolboxInfo };

package/src/Topic/Loader.tsx

@@ -1,29 +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 ContentLoader from "../ContentLoader";
-
-const Loader = () => (
-  <ContentLoader width={800} height={880}>
-    <rect x="0" y="0" rx="3" ry="3" width="500" height="60" />
-    <rect x="0" y="100" rx="3" ry="3" width="500" height="25" />
-    <rect x="0" y="140" rx="3" ry="3" width="500" height="25" />
-    <rect x="0" y="180" rx="3" ry="3" width="400" height="25" />
-    <rect x="600" y="0" rx="3" ry="3" width="200" height="205" />
-    <rect x="0" y="280" rx="3" ry="3" width="800" height="60" />
-    <rect x="0" y="350" rx="3" ry="3" width="800" height="60" />
-    <rect x="0" y="420" rx="3" ry="3" width="800" height="60" />
-    <rect x="0" y="490" rx="3" ry="3" width="800" height="60" />
-    <rect x="0" y="560" rx="3" ry="3" width="800" height="60" />
-    <rect x="0" y="680" rx="3" ry="3" width="800" height="60" />
-    <rect x="0" y="750" rx="3" ry="3" width="800" height="60" />
-    <rect x="0" y="820" rx="3" ry="3" width="800" height="60" />
-  </ContentLoader>
-);
-
-export default Loader;