@ndla/ui 50.15.3 → 52.0.0

package/src/SearchTypeResult/ActiveFilterContent.tsx

@@ -1,55 +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 { forwardRef } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { spacing, fonts } from "@ndla/core";
-import { Cross } from "@ndla/icons/action";
-
-export const StyledActiveFilterTitle = styled.span`
-  white-space: nowrap;
-  padding-right: ${spacing.small};
-  font-weight: ${fonts.weight.semibold};
-`;
-
-const StyledButton = styled(ButtonV2)`
-  display: grid;
-  grid-template-columns: 1fr auto;
-`;
-
-export type FilterProps = {
-  value: string;
-  title: string;
-  name: string;
-};
-
-type Props = {
-  filter: FilterProps;
-  onFilterRemove: (value: string, name: string) => void;
-};
-
-const ActiveFilterContent = forwardRef<HTMLButtonElement, Props>(({ filter, onFilterRemove }, ref) => {
-  const { t } = useTranslation();
-  return (
-    <StyledButton
-      aria-label={t("searchPage.searchFilterMessages.removeFilter", {
-        filterName: filter.title,
-      })}
-      ref={ref}
-      shape="pill"
-      onClick={() => onFilterRemove(filter.value, filter.name)}
-    >
-      <StyledActiveFilterTitle>{filter.title}</StyledActiveFilterTitle>
-      <Cross />
-    </StyledButton>
-  );
-});
-
-export default ActiveFilterContent;

package/src/SearchTypeResult/ActiveFilters.tsx

@@ -1,163 +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 { ReactElement } 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 } from "@ndla/core";
-import { Tooltip } from "@ndla/tooltip";
-import ActiveFilterContent, { FilterProps, StyledActiveFilterTitle } from "./ActiveFilterContent";
-
-type StyledActiveFiltersProps = {
-  showOnSmallScreen?: boolean;
-  filterLength?: number;
-};
-
-const StyledActiveFilters = styled.ul<StyledActiveFiltersProps>`
-  padding: 0;
-  display: none;
-  ${(props: StyledActiveFiltersProps) =>
-    props.showOnSmallScreen &&
-    css`
-      ${StyledActiveFilterTitle} {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        padding-right: ${spacing.small};
-        display: block;
-        /* max-width: 200px; */
-      }
-      ${mq.range({ until: breakpoints.desktop })} {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-      }
-      ${mq.range({ until: breakpoints.tablet })} {
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        flex-wrap: wrap;
-      }
-    `}
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-left: ${spacing.xsmall};
-
-    ${StyledActiveFilterTitle} {
-      ${({ filterLength }) =>
-        filterLength &&
-        filterLength >= 2 &&
-        css`
-          text-overflow: ellipsis;
-          overflow: hidden;
-          padding-right: ${spacing.small};
-          display: block;
-        `}
-
-      ${({ filterLength }) =>
-        filterLength &&
-        filterLength === 2 &&
-        css`
-          max-width: 90px;
-        `}
-
-    ${({ filterLength }) =>
-        filterLength &&
-        filterLength > 2 &&
-        css`
-          max-width: 70px;
-        `}
-    }
-  }
-`;
-
-const StyledActiveFilterWrapper = styled.li`
-  list-style: none;
-  display: flex;
-  padding: 0;
-  padding-right: ${spacing.xsmall};
-  ${mq.range({ until: breakpoints.desktop })} {
-    padding-bottom: ${spacing.xsmall};
-  }
-`;
-
-type Props = {
-  filters: FilterProps[];
-  onFilterRemove: (value: string, name: string) => void;
-  showOnSmallScreen?: boolean;
-  customElements?: ReactElement[];
-  onClickShowHiddenSubjects: () => void;
-};
-
-const ActiveFilters = ({
-  filters,
-  onFilterRemove,
-  showOnSmallScreen,
-  customElements,
-  onClickShowHiddenSubjects,
-}: Props) => {
-  const { t } = useTranslation();
-  if (!filters) return null;
-  const showFilterCount = 3;
-  const filterLength = filters.length;
-
-  const visibleFilters = filterLength > showFilterCount ? filters.slice(0, showFilterCount - 1) : filters;
-
-  const filterItems = visibleFilters.map((filter) => {
-    const filterKey = filter.name ? `${filter.name}${filter.value}` : filter.value;
-
-    return (
-      <StyledActiveFilterWrapper key={filterKey}>
-        {filterLength > 1 ? (
-          <Tooltip
-            tooltip={t("searchPage.searchFilterMessages.removeFilter", {
-              filterName: filter.title,
-            })}
-          >
-            <ActiveFilterContent filter={filter} onFilterRemove={onFilterRemove} />
-          </Tooltip>
-        ) : (
-          <ActiveFilterContent filter={filter} onFilterRemove={onFilterRemove} />
-        )}
-      </StyledActiveFilterWrapper>
-    );
-  });
-
-  return (
-    <StyledActiveFilters showOnSmallScreen={showOnSmallScreen} filterLength={filterLength}>
-      {filterItems}
-      {filterLength > showFilterCount && (
-        <StyledActiveFilterWrapper>
-          <Tooltip tooltip={t("searchPage.searchFilterMessages.noValuesButtonText")}>
-            <ButtonV2
-              aria-label={t("searchPage.searchFilterMessages.additionalSubjectFilters", {
-                count: filterLength - showFilterCount + 1,
-              })}
-              size="normal"
-              shape="pill"
-              onClick={onClickShowHiddenSubjects}
-            >
-              <StyledActiveFilterTitle>
-                {t("searchPage.searchFilterMessages.additionalSubjectFilters", {
-                  count: filterLength - showFilterCount + 1,
-                })}
-              </StyledActiveFilterTitle>
-            </ButtonV2>
-          </Tooltip>
-        </StyledActiveFilterWrapper>
-      )}
-      {customElements?.map((item, index) => <StyledActiveFilterWrapper key={index}>{item}</StyledActiveFilterWrapper>)}
-    </StyledActiveFilters>
-  );
-};
-
-export default ActiveFilters;

package/src/SearchTypeResult/PopupFilter.tsx

@@ -1,149 +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 { useState } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { breakpoints, mq, spacing } from "@ndla/core";
-import { ModalCloseButton, ModalBody, ModalTitle, ModalContent } from "@ndla/modal";
-import { ToggleItem } from "../Filter";
-
-import FrontpageAllSubjects, { subjectsProps } from "../Frontpage/FrontpageAllSubjects";
-
-const ModalWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-`;
-const ModalHeaderWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: ${spacing.normal};
-`;
-
-const Content = styled.div`
-  max-width: 1040px;
-  flex-grow: 1;
-`;
-
-const MainFilterButtonWrapper = styled.div`
-  display: inline-block;
-  margin-right: ${spacing.xsmall};
-`;
-const StyledList = styled.ul`
-  list-style: none;
-  margin: 40px 0 0;
-  padding: 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    column-count: 2;
-    column-gap: 20px;
-  }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    column-count: 3;
-    column-gap: 20px;
-  }
-  animation-name: fadeInLeft;
-  animation-duration: 500ms;
-`;
-const StyledListItem = styled.li`
-  padding-bottom: 0;
-  break-inside: avoid;
-`;
-
-const MENU_PROGRAMMES = "programmes";
-const MENU_ALL_SUBJECTS = "allSubjects";
-
-type ProgrammeOptionProps = {
-  name: string;
-  id: string;
-};
-
-export type PopupFilterProps = {
-  programmes?: { options: ProgrammeOptionProps[] };
-  subjectCategories?: { categories: subjectsProps["categories"] };
-  subjectValues: string[];
-  programmesValues: string[];
-  onToggleSubject: (value: string) => void;
-  onToggleProgramme: (value: string) => void;
-};
-
-const PopupFilter = ({
-  programmes,
-  subjectCategories,
-  subjectValues,
-  programmesValues,
-  onToggleSubject,
-  onToggleProgramme,
-}: PopupFilterProps) => {
-  const { t } = useTranslation();
-  const [selectedMenu, setSelectedMenu] = useState(MENU_ALL_SUBJECTS);
-
-  return (
-    <ModalContent animation="subtle" animationDuration={50} size="full">
-      <ModalBody>
-        <ModalWrapper>
-          <Content>
-            <ModalHeaderWrapper>
-              <ModalTitle>{t("searchPage.searchFilterMessages.filterLabel")}</ModalTitle>
-              <ModalCloseButton />
-            </ModalHeaderWrapper>
-            {subjectCategories && programmes && (
-              <MainFilterButtonWrapper>
-                <ButtonV2
-                  onClick={() => setSelectedMenu(MENU_ALL_SUBJECTS)}
-                  colorTheme={selectedMenu !== MENU_ALL_SUBJECTS ? "lighter" : undefined}
-                  size="normal"
-                  shape="pill"
-                >
-                  {t("frontpageMenu.allsubjects")}
-                </ButtonV2>
-              </MainFilterButtonWrapper>
-            )}
-            {programmes && (
-              <ButtonV2
-                onClick={() => setSelectedMenu(MENU_PROGRAMMES)}
-                colorTheme={selectedMenu !== MENU_PROGRAMMES ? "lighter" : undefined}
-                size="normal"
-                shape="pill"
-              >
-                {t("frontpageMenu.program")}
-              </ButtonV2>
-            )}
-            {selectedMenu === MENU_ALL_SUBJECTS && subjectCategories && (
-              <FrontpageAllSubjects
-                categories={subjectCategories.categories}
-                selectedSubjects={subjectValues}
-                onToggleSubject={onToggleSubject}
-                subjectViewType="checkbox"
-              />
-            )}
-            {selectedMenu === MENU_PROGRAMMES && programmes && (
-              <StyledList>
-                {programmes.options.map((item: ProgrammeOptionProps) => (
-                  <StyledListItem key={item.id}>
-                    <ToggleItem
-                      id={item.id}
-                      value={item.id}
-                      checked={programmesValues.includes(item.id)}
-                      label={item.name}
-                      component="div"
-                      onChange={() => onToggleProgramme(item.id)}
-                    />
-                  </StyledListItem>
-                ))}
-              </StyledList>
-            )}
-          </Content>
-        </ModalWrapper>
-      </ModalBody>
-    </ModalContent>
-  );
-};
-
-export default PopupFilter;

package/src/SearchTypeResult/ResultNavigation.tsx

@@ -1,105 +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 { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { fonts, spacing, colors } from "@ndla/core";
-
-const ResultNav = styled.div`
-  font-size: 14px;
-  font-weight: 600;
-  margin: ${spacing.medium} 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  button.nav {
-    font-weight: 600;
-    border-width: 1px;
-    &:disabled {
-      opacity: 0.8;
-    }
-  }
-`;
-
-const NavInfo = styled.div`
-  ${fonts.sizes("16px", "24px")};
-  font-weight: 400;
-  margin-bottom: ${spacing.small};
-`;
-
-const ProgressBar = styled.div`
-  width: 200px;
-  height: 2px;
-  background: ${colors.brand.tertiary};
-  margin: 0 0 ${spacing.small};
-`;
-
-type ProgressType = {
-  width: number;
-};
-const Progress = styled.span<ProgressType>`
-  display: block;
-  background: ${colors.brand.primary};
-  height: 2px;
-  width: ${(props) => props.width}%;
-`;
-
-export type PaginationType = {
-  onShowMore: () => void;
-  totalCount: number;
-  toCount: number;
-  contentType?: string;
-};
-
-interface Props extends PaginationType {
-  type?: string;
-}
-
-const ResultNavigation = ({ onShowMore, totalCount, toCount, contentType = "", type }: Props) => {
-  const { t } = useTranslation();
-  const isMore = toCount < totalCount;
-  const progress = Math.ceil((toCount / totalCount) * 100);
-
-  const onToTopHandler = () => {
-    window.scrollTo({
-      top: 0,
-      left: 0,
-      behavior: "smooth",
-    });
-  };
-
-  return (
-    <ResultNav>
-      <NavInfo>
-        {isMore
-          ? t("searchPage.resultType.showing", {
-              count: toCount,
-              totalCount,
-              contentType,
-            })
-          : t("searchPage.resultType.showingAll")}
-      </NavInfo>
-      <ProgressBar>
-        <Progress width={progress} />
-      </ProgressBar>
-      {isMore ? (
-        <ButtonV2 className="nav" variant="outline" onClick={onShowMore} aria-describedby={`searchitem-header-${type}`}>
-          {t("searchPage.resultType.showMore")}
-        </ButtonV2>
-      ) : (
-        <ButtonV2 className="nav" variant="outline" onClick={onToTopHandler}>
-          {t("searchPage.resultType.toTopOfPage")}
-        </ButtonV2>
-      )}
-    </ResultNav>
-  );
-};
-
-export default ResultNavigation;

package/src/SearchTypeResult/SearchFieldHeader.tsx

@@ -1,129 +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 { FormEvent, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
-import { spacing, colors } from "@ndla/core";
-import { Cross as CrossIcon } from "@ndla/icons/action";
-import { Search as SearchIcon } from "@ndla/icons/common";
-
-import SubjectFilters, { SubjectFilterProps } from "./components/SubjectFilters";
-
-type StyledProps = {
-  inputHasFocus?: boolean;
-};
-
-const StyledForm = styled.form<StyledProps>`
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
-  background: #fff;
-  border-radius: 100px;
-  border: 2px solid ${colors.brand.greyLight};
-  padding: ${spacing.xsmall} 8px;
-  min-height: 58px;
-  ${(props) =>
-    props.inputHasFocus &&
-    `
-      border-color: ${colors.brand.primary};
-    `}
-  &:hover {
-    border-color: ${colors.brand.primary};
-  }
-`;
-
-const SearchButton = styled(IconButtonV2)`
-  width: 40px;
-  height: 40px;
-  border: 0;
-  background: unset;
-  color: ${colors.brand.primary};
-  cursor: pointer;
-`;
-const ClearButton = styled(IconButtonV2)`
-  width: 40px;
-  height: 40px;
-  border: 0;
-  background: unset;
-  color: ${colors.text.light};
-  cursor: pointer;
-`;
-
-const SearchInput = styled.input`
-  flex-grow: 1;
-  border: 0;
-  outline: 0;
-  margin-left: 3px;
-`;
-
-const iconStyle = {
-  width: "24px",
-  height: "24px",
-};
-
-type Props = {
-  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
-  value?: string;
-  onChange: (value: string) => void;
-  isNarrowScreen?: boolean;
-};
-
-const SearchFieldHeader = ({
-  value,
-  onSubmit,
-  onChange,
-  filters,
-  activeFilters,
-  isNarrowScreen,
-}: Props & SubjectFilterProps) => {
-  const { t } = useTranslation();
-  const [hasFocus, setHasFocus] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  return (
-    <StyledForm action="/search/" inputHasFocus={hasFocus} onSubmit={onSubmit}>
-      {!isNarrowScreen && (
-        <SubjectFilters filters={filters} activeFilters={activeFilters} isNarrowScreen={isNarrowScreen} />
-      )}
-      <SearchInput
-        ref={inputRef}
-        type="search"
-        autoComplete="off"
-        id="search"
-        name="search"
-        placeholder={
-          isNarrowScreen ? t("searchPage.searchFieldPlaceholderShort") : t("searchPage.searchFieldPlaceholder")
-        }
-        aria-label={t("searchPage.searchFieldPlaceholder")}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onFocus={() => setHasFocus(true)}
-        onBlur={() => setHasFocus(false)}
-      />
-      {value && (
-        <ClearButton
-          aria-label={t("welcomePage.resetSearch")}
-          value={t("welcomePage.resetSearch")}
-          onClick={() => {
-            onChange("");
-            inputRef.current?.focus();
-          }}
-        >
-          <CrossIcon style={iconStyle} title={t("welcomePage.resetSearch")} />
-        </ClearButton>
-      )}
-      <SearchButton aria-label={t("searchPage.search")} type="submit" value={t("searchPage.search")}>
-        <SearchIcon style={iconStyle} title={t("searchPage.search")} />
-      </SearchButton>
-    </StyledForm>
-  );
-};
-
-export default SearchFieldHeader;

package/src/SearchTypeResult/SearchFilterContent.tsx

@@ -1,61 +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 { spacing } from "@ndla/core";
-
-import SearchViewType, { SearchViewTypeProps } from "./SearchViewType";
-import { FilterButtons } from "../Filter";
-import { FilterButtonsProps } from "../Filter/FilterButtons";
-
-const Container = styled.div`
-  display: flex;
-  align-items: flex-start;
-  box-sizing: border-box;
-  max-width: 100%;
-`;
-
-const FilterButtonsWrapper = styled.div`
-  padding-top: 2px;
-  margin-right: ${spacing.small};
-  overflow-x: hidden;
-  margin-left: -13px;
-`;
-
-type Props = {
-  items: FilterButtonsProps["items"];
-  onFilterToggle: FilterButtonsProps["onFilterToggle"];
-  onRemoveAllFilters: FilterButtonsProps["onRemoveAllFilters"];
-};
-const SearchFilterContent = ({
-  viewType,
-  onChangeViewType,
-  items,
-  onFilterToggle,
-  onRemoveAllFilters,
-}: SearchViewTypeProps & Props) => {
-  const { t } = useTranslation();
-  return (
-    <Container>
-      <FilterButtonsWrapper>
-        <FilterButtons
-          items={items}
-          onFilterToggle={onFilterToggle}
-          onRemoveAllFilters={onRemoveAllFilters}
-          labels={{
-            openFilter: t("searchPage.searchFilterMessages.resourceTypeFilter.button"),
-          }}
-        />
-      </FilterButtonsWrapper>
-      <SearchViewType viewType={viewType} onChangeViewType={onChangeViewType} />
-    </Container>
-  );
-};
-
-export default SearchFilterContent;