@ndla/ui 51.0.0 → 52.0.0

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;

package/src/SearchTypeResult/SearchHeader.tsx

@@ -1,180 +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, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { breakpoints, fonts, mq, spacing } from "@ndla/core";
-
-import SubjectFilters, { SubjectFilterProps } from "./components/SubjectFilters";
-import SearchFieldHeader from "./SearchFieldHeader";
-import CompetenceGoalItem from "../CompetenceGoalTab/CompetenceGoalItem";
-import CoreElementItem from "../CompetenceGoalTab/CoreElementItem";
-import { CompetenceGoalsItemType, CoreElementsItemType } from "../types";
-
-const Wrapper = styled.div`
-  margin-top: ${spacing.normal};
-  margin-bottom: ${spacing.normal};
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-top: ${spacing.large};
-  }
-`;
-
-const SearchInputWrapper = styled.div`
-  margin-bottom: ${spacing.normal};
-`;
-
-const PhraseWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  font-size: 16px;
-  margin: ${spacing.normal} 0 ${spacing.medium};
-`;
-
-const GrepCodesWrapper = styled.div`
-  font-size: 16px;
-  width: 100%;
-  margin-top: ${spacing.normal};
-`;
-
-const GrepCodesList = styled.ul`
-  padding: 0;
-  li {
-    border: 0;
-    padding: 0;
-  }
-`;
-
-const PhraseText = styled.div`
-  margin-right: ${spacing.large};
-`;
-const PhraseSuggestionText = styled.div``;
-
-const GrepCodesLabel = styled.div`
-  ${fonts.sizes("16px", "32px")};
-  text-transform: uppercase;
-`;
-
-type Props = {
-  searchPhrase?: string;
-  searchPhraseSuggestion?: string;
-  searchPhraseSuggestionOnClick?: () => void;
-  searchValue?: string;
-  filters: SubjectFilterProps["filters"];
-  activeFilters?: SubjectFilterProps["activeFilters"];
-  competenceGoals?: CompetenceGoalsItemType[];
-  coreElements?: CoreElementsItemType[];
-  onSearchValueChange: (value: string) => void;
-  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
-  noResults?: boolean;
-  loading: boolean;
-};
-
-const SearchHeader = ({
-  searchPhrase,
-  searchPhraseSuggestion,
-  searchPhraseSuggestionOnClick,
-  searchValue,
-  onSearchValueChange,
-  onSubmit,
-  activeFilters,
-  filters,
-  competenceGoals,
-  coreElements,
-  noResults,
-  loading,
-}: Props) => {
-  const { t } = useTranslation();
-  const [isNarrowScreen, setIsNarrowScreen] = useState<boolean | undefined>();
-
-  useEffect(() => {
-    const isNarrowScreenMatch = window.matchMedia(`(max-width: ${breakpoints.desktop})`);
-    const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
-      setIsNarrowScreen(e.matches);
-    };
-    isNarrowScreenMatch.addEventListener("change", handleChange);
-    handleChange(isNarrowScreenMatch);
-    return () => {
-      isNarrowScreenMatch.removeEventListener("change", handleChange);
-    };
-  }, []);
-
-  const phraseText = noResults ? (
-    t("searchPage.noHitsShort", { query: searchPhrase })
-  ) : (
-    <>
-      {t("searchPage.resultType.showingSearchPhrase")} <b>&ldquo;{searchPhrase}&rdquo;</b>
-    </>
-  );
-  const removeFilterSuggestion =
-    noResults && activeFilters?.filters.length ? t("searchPage.removeFilterSuggestion") : undefined;
-  return (
-    <Wrapper>
-      <SearchInputWrapper>
-        <SearchFieldHeader
-          value={searchValue}
-          onChange={onSearchValueChange}
-          onSubmit={onSubmit}
-          activeFilters={activeFilters}
-          filters={filters}
-          isNarrowScreen={isNarrowScreen}
-        />
-      </SearchInputWrapper>
-      <PhraseWrapper>
-        <div aria-live="assertive">
-          {!loading && searchPhrase && (
-            <>
-              <PhraseText>{phraseText}</PhraseText>
-              <PhraseText>{removeFilterSuggestion}</PhraseText>
-            </>
-          )}
-          {loading && <div aria-label={t("loading")} />}
-        </div>
-        {searchPhraseSuggestion && (
-          <PhraseSuggestionText>
-            {t("searchPage.resultType.searchPhraseSuggestion")}{" "}
-            <ButtonV2 variant="link" onClick={searchPhraseSuggestionOnClick}>
-              [{searchPhraseSuggestion}]
-            </ButtonV2>
-          </PhraseSuggestionText>
-        )}
-        {!!competenceGoals?.length && (
-          <GrepCodesWrapper>
-            {competenceGoals?.length && (
-              <>
-                <GrepCodesLabel>{t("competenceGoals.competenceGoalItem.title")}</GrepCodesLabel>
-                <GrepCodesList>
-                  {competenceGoals.map((e) => (
-                    <CompetenceGoalItem key={e.id} id={e.id} title={e.title} goals={e.goals} />
-                  ))}
-                </GrepCodesList>
-              </>
-            )}
-          </GrepCodesWrapper>
-        )}
-        {!!coreElements?.length && (
-          <GrepCodesWrapper>
-            <>
-              <GrepCodesLabel>{t("competenceGoals.competenceTabCorelabel")}</GrepCodesLabel>
-              <GrepCodesList>
-                {coreElements.map((e) => (
-                  <CoreElementItem key={e.id} id={e.id} title={e.title} text={e.text} url={e.url} />
-                ))}
-              </GrepCodesList>
-            </>
-          </GrepCodesWrapper>
-        )}
-      </PhraseWrapper>
-      {isNarrowScreen && (
-        <SubjectFilters filters={filters} activeFilters={activeFilters} isNarrowScreen={isNarrowScreen} />
-      )}
-    </Wrapper>
-  );
-};
-
-export default SearchHeader;

package/src/SearchTypeResult/SearchItem.tsx

@@ -1,144 +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 parse from "html-react-parser";
-import { ReactNode, useRef } from "react";
-import styled from "@emotion/styled";
-
-import { animations, colors, fonts, spacing, stackOrder } from "@ndla/core";
-import { SafeLink } from "@ndla/safelink";
-
-import ItemContexts, { ItemContextsType } from "./components/ItemContexts";
-import ItemResourceHeader from "./components/ItemResourceHeader";
-import ItemTopicHeader from "./components/ItemTopicHeader";
-import { ContentType } from "./SearchTypeResult";
-import constants from "../model";
-const { contentTypes } = constants;
-
-interface ItemTypeProps {
-  contentType?: ContentType;
-  isTopic?: boolean;
-}
-
-const Container = styled.article`
-  cursor: pointer;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  border-radius: 5px;
-  border: 1px solid ${colors.brand.neutral7};
-
-  img {
-    transition: all ${animations.durations.fast} ease-in-out;
-  }
-  :hover {
-    img {
-      transform: scale(1.1);
-    }
-  }
-`;
-
-const ButtonWrapper = styled.div`
-  z-index: ${stackOrder.offsetSingle};
-  display: flex;
-  flex-direction: column;
-`;
-
-const ItemTitle = styled.h3<ItemTypeProps>`
-  display: inline;
-  ${fonts.sizes("24px", "28px")};
-  color: ${colors.brand.primary};
-  margin-bottom: ${(props) => props.isTopic && spacing.small};
-  font-weight: ${fonts.weight.semibold};
-  overflow-wrap: break-word;
-  margin: 0;
-  ${Container}:hover & {
-    box-shadow: 0 -1px inset;
-  }
-`;
-
-const StyledLink = styled(SafeLink)`
-  box-shadow: none;
-  color: ${colors.brand.primary};
-
-  :after {
-    content: "";
-    position: absolute;
-    z-index: ${stackOrder.offsetSingle};
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-`;
-
-const ItemText = styled.div<ItemTypeProps>`
-  ${fonts.sizes("16px", "24px")};
-  ${(props) =>
-    props.isTopic &&
-    `
-    ${fonts.sizes("18px", "28px")};
-    `};
-`;
-
-const ContentWrapper = styled.main`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.small};
-  padding: ${spacing.small} ${spacing.normal};
-`;
-
-export interface SearchItemProps {
-  id: string | number;
-  title: string;
-  url: string;
-  ingress: string;
-  contexts?: ItemContextsType["contexts"];
-  img?: { url: string; alt: string };
-  labels?: string[];
-  type?: ContentType;
-  children?: ReactNode;
-}
-
-export interface SearchItemType {
-  item: SearchItemProps;
-  type?: ContentType;
-}
-
-const SearchItem = ({ item, type }: SearchItemType) => {
-  const { title, url, ingress, contexts = [], img = null, labels = [], children } = item;
-  const linkRef = useRef<HTMLAnchorElement>(null);
-
-  const isTopic = type === contentTypes.TOPIC || type === contentTypes.MULTIDISCIPLINARY_TOPIC;
-
-  return (
-    <Container>
-      {isTopic ? (
-        <ItemTopicHeader image={img} type={type}>
-          <StyledLink to={url} ref={linkRef}>
-            <ItemTitle>{title}</ItemTitle>
-          </StyledLink>
-        </ItemTopicHeader>
-      ) : (
-        <ItemResourceHeader labels={labels} img={img} type={type} />
-      )}
-      <ContentWrapper>
-        {!isTopic && (
-          <StyledLink to={url} ref={linkRef}>
-            <ItemTitle>{title}</ItemTitle>
-          </StyledLink>
-        )}
-        <ItemText isTopic={isTopic}>{parse(ingress)}</ItemText>
-        {contexts.length > 0 && <ItemContexts contexts={contexts} id={item.id} title={item.title} />}
-      </ContentWrapper>
-      <ButtonWrapper>{children}</ButtonWrapper>
-    </Container>
-  );
-};
-
-export default SearchItem;