@ndla/ui 51.0.0 → 52.0.0

package/src/SearchTypeResult/SearchItemList.tsx

@@ -1,161 +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 parse from "html-react-parser";
-import { Fragment } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-
-import { animations, colors, fonts, spacing } from "@ndla/core";
-import { SafeLink } from "@ndla/safelink";
-
-import ItemContexts from "./components/ItemContexts";
-import { SearchItemType } from "./SearchItem";
-import ContentTypeBadge from "../ContentTypeBadge";
-import constants from "../model";
-const { contentTypes } = constants;
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-height: 192px;
-  height: 100%;
-  border: 1px solid ${colors.brand.neutral7};
-  border-radius: 5px;
-
-  img {
-    transition: all ${animations.durations.fast} ease-in-out;
-  }
-  :hover {
-    img {
-      transform: scale(1.1);
-    }
-  }
-`;
-
-const ItemLink = styled(SafeLink)`
-  box-shadow: none;
-  color: unset;
-  text-decoration: none;
-  display: flex;
-  position: relative;
-  min-height: 0;
-  flex: 1;
-  justify-content: space-between;
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  margin: ${spacing.small} ${spacing.small} ${spacing.small} ${spacing.normal};
-  max-width: 800px;
-`;
-const ContentTypeWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  ${fonts.sizes("12px", "16px")};
-  font-weight: ${fonts.weight.semibold};
-`;
-const ContentTypeIconWrapper = styled.div`
-  margin-right: ${spacing.small};
-`;
-
-const ItemTitleWrapper = styled.div`
-  margin: ${spacing.small} 0 ${spacing.xsmall};
-`;
-
-const ItemTitle = styled.h3`
-  ${fonts.sizes("24px", "28px")};
-  color: ${colors.brand.primary};
-  font-weight: ${fonts.weight.semibold};
-  overflow-wrap: anywhere;
-  display: inline;
-  transition: all ${animations.durations.fast} ease-in-out;
-  ${Container}:hover & {
-    box-shadow: inset 0 -1px;
-    background-color: transparent;
-  }
-`;
-
-const ItemText = styled.div`
-  ${fonts.sizes("16px", "24px")};
-  flex: 1 auto;
-`;
-
-const ImageWrapper = styled.div<{ isTopic: boolean }>`
-  float: right;
-  position: relative;
-  width: ${(props) => (props.isTopic ? `164px` : `224px`)};
-  height: 164px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: ${spacing.small};
-  overflow: hidden;
-  ${(props) => props.isTopic && `border-radius: 50%;`};
-  -webkit-mask-image: -webkit-radial-gradient(white, black);
-`;
-
-const ImageElement = styled.img`
-  border-radius: 2px;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  max-width: unset;
-`;
-
-const ContextWrapper = styled.div`
-  transition: all ${animations.durations.fast} ease-in-out;
-`;
-
-const SearchItemList = ({ item, type }: SearchItemType) => {
-  const { t } = useTranslation();
-  const { id, title, url, ingress, contexts, img = null, labels = [] } = item;
-  const isTopic = type === contentTypes.TOPIC || type === contentTypes.MULTIDISCIPLINARY_TOPIC;
-  return (
-    <Container>
-      <ItemLink to={url}>
-        <TextWrapper>
-          {type && (
-            <ContentTypeWrapper>
-              <ContentTypeIconWrapper>
-                <ContentTypeBadge type={type} background border={false} />
-              </ContentTypeIconWrapper>
-              {t(`contentTypes.${type}`)}
-              {labels.length > 0 && (
-                <>
-                  {labels.map((label) => (
-                    <Fragment key={label}>
-                      {" "}
-                      <>&#8226;</> {label}
-                    </Fragment>
-                  ))}
-                </>
-              )}
-            </ContentTypeWrapper>
-          )}
-          <ItemTitleWrapper>
-            <ItemTitle>{title}</ItemTitle>
-          </ItemTitleWrapper>
-          <ItemText>{parse(ingress)}</ItemText>
-          <ContextWrapper>
-            {contexts && contexts.length > 0 && <ItemContexts contexts={contexts} id={id} title={title} />}
-          </ContextWrapper>
-        </TextWrapper>
-        {img && (
-          <ImageWrapper isTopic={isTopic}>
-            <ImageElement src={img.url} alt={img.alt} />
-          </ImageWrapper>
-        )}
-      </ItemLink>
-    </Container>
-  );
-};
-
-export default SearchItemList;

package/src/SearchTypeResult/SearchItems.tsx

@@ -1,72 +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 { memo } from "react";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, mq, spacing } from "@ndla/core";
-import SearchItem, { SearchItemProps } from "./SearchItem";
-import SearchItemList from "./SearchItemList";
-import { ContentType } from "./SearchTypeResult";
-
-const Wrapper = styled.div`
-  width: 100%;
-  position: relative;
-`;
-
-interface ContainerProps {
-  viewType: Props["viewType"];
-}
-
-const Container = styled.ul<ContainerProps>`
-  display: grid;
-  align-items: flex-start;
-  list-style: none;
-  padding: 0;
-  row-gap: ${spacing.normal};
-  grid-template-columns: repeat(1, 1fr);
-
-  ${(props) =>
-    props.viewType === "grid" &&
-    css`
-      ${mq.range({ from: breakpoints.tablet })} {
-        column-gap: ${spacing.normal};
-        grid-template-columns: repeat(2, 1fr);
-      }
-
-      ${mq.range({ from: breakpoints.desktop })} {
-        grid-template-columns: repeat(3, 1fr);
-      }
-    `}
-`;
-
-interface Props {
-  items: SearchItemProps[];
-  type?: ContentType;
-  viewType?: "grid" | "list";
-}
-
-const SearchItems = ({ items, type, viewType = "grid" }: Props) => {
-  return (
-    <Wrapper>
-      <Container aria-labelledby={`searchitem-header-${type}`} viewType={viewType}>
-        {items.map((item) => {
-          const contentType = type || item.type;
-          const Component = viewType === "list" ? SearchItemList : SearchItem;
-          return (
-            <li key={`${item.id}`}>
-              <Component item={item} type={contentType} />
-            </li>
-          );
-        })}
-      </Container>
-    </Wrapper>
-  );
-};
-
-export default memo(SearchItems);

package/src/SearchTypeResult/SearchSubjectItem.tsx

@@ -1,74 +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 { spacing } from "@ndla/core";
-import { SafeLink } from "@ndla/safelink";
-
-type ItemWrapperProps = {
-  backgroundImage?: string;
-};
-
-const ItemWrapper = styled.div<ItemWrapperProps>`
-  background: #deebf6;
-  padding: ${spacing.normal} ${spacing.medium};
-  border-radius: 5px;
-  height: 150px;
-  ${(props) =>
-    props.backgroundImage !== "" &&
-    `
-    background-image: url(${props.backgroundImage});
-    background-repeat: no-repeat;
-    background-repeat: no-repeat;
-    background-position-y: 100%;
-    background-position-x: 100%;
-    background-size: auto 100px;
-  `}
-`;
-
-const ItemTitle = styled.h2`
-  font-size: 18px;
-  line-height: 18px;
-  margin-top: ${spacing.small};
-  font-weight: 600;
-`;
-const ItemText = styled.span`
-  a {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 600;
-  }
-`;
-
-export type SearchSubjecItemType = {
-  id: string;
-  title: string;
-  url: string;
-  img?: { url: string };
-};
-type Props = {
-  item: SearchSubjecItemType;
-};
-const SearchSubjectItem = ({ item }: Props) => {
-  const { t } = useTranslation();
-  const { title, url, img = null } = item; // img = null
-
-  return (
-    <>
-      <ItemWrapper backgroundImage={img ? img.url : ""}>
-        <ItemTitle>{title}</ItemTitle>
-        <ItemText>
-          <SafeLink to={url}>{t("searchPage.resultType.toSubjectPageLabel")}</SafeLink>
-        </ItemText>
-      </ItemWrapper>
-    </>
-  );
-};
-
-export default SearchSubjectItem;

package/src/SearchTypeResult/SearchSubjectResult.tsx

@@ -1,58 +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 { mq, breakpoints, spacing } from "@ndla/core";
-import SearchSubjectItem, { SearchSubjecItemType } from "./SearchSubjectItem";
-
-type ContainerProps = {
-  itemCount: number;
-};
-const Container = styled.div<ContainerProps>`
-  display: grid;
-  row-gap: ${spacing.normal};
-  grid-template-columns: repeat(1, 1fr);
-  margin: ${spacing.medium} 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    column-gap: ${spacing.normal};
-    margin: ${spacing.large} 0;
-    ${(props) =>
-      props.itemCount > 1 &&
-      `
-        grid-template-columns: repeat(2, 1fr);
-      `}
-  }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    ${(props) =>
-      props.itemCount > 2 &&
-      `
-        grid-template-columns: repeat(3, 1fr);
-      `}
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    ${(props) =>
-      props.itemCount > 3 &&
-      `
-        grid-template-columns: repeat(4, 1fr);
-      `}
-  }
-`;
-
-type Props = {
-  items: SearchSubjecItemType[];
-};
-
-const SearchSubjectResult = ({ items }: Props) => (
-  <Container itemCount={items.length}>
-    {items.map((item) => (
-      <SearchSubjectItem item={item} key={`${item.id}`} />
-    ))}
-  </Container>
-);
-
-export default SearchSubjectResult;

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -1,148 +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 { MouseEvent, memo } 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 { Cross } from "@ndla/icons/action";
-import { ContentType } from "./SearchTypeResult";
-import ContentTypeBadge from "../ContentTypeBadge";
-
-const Wrapper = styled.div`
-  margin: ${spacing.small} 0;
-`;
-const HeaderWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 2px;
-  ${mq.range({ until: breakpoints.tablet })} {
-    flex-wrap: wrap;
-  }
-`;
-const TypeWrapper = styled.div`
-  flex: 1 0 auto;
-  flex-direction: row;
-  display: flex;
-  min-width: 200px;
-  justify-content: flex-start;
-  align-items: center;
-  margin-bottom: ${spacing.xsmall};
-`;
-
-const BadgeWrapper = styled.span`
-  margin-right: ${spacing.small};
-`;
-
-const SubjectName = styled.div`
-  display: flex;
-  gap: ${spacing.small};
-  ${fonts.sizes("18px", "24px")};
-  margin: 2px 0;
-  h2 {
-    margin: 0;
-    ${fonts.sizes("18px", "24px")};
-    margin-right: 4px;
-  }
-`;
-
-const Count = styled.span``;
-
-const CategoryItems = styled.div`
-  position: relative;
-  button {
-    white-space: nowrap;
-    max-height: 29px;
-  }
-  white-space: nowrap;
-  display: flex;
-  flex-wrap: wrap;
-  margin: ${spacing.small} 0 0;
-`;
-
-const CategoryTypeButtonWrapper = styled.div`
-  margin: 4px;
-`;
-
-const CategoryTypeCrossWrapper = styled.span`
-  margin-left: ${spacing.xsmall};
-`;
-
-export type FilterOptionsType = {
-  id: string;
-  name: string;
-  active?: boolean;
-};
-
-type Props = {
-  filters?: FilterOptionsType[];
-  onFilterClick?: (id: string) => void;
-  totalCount: number;
-  type?: ContentType;
-};
-const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <Wrapper>
-      <HeaderWrapper>
-        <TypeWrapper>
-          {type && (
-            <BadgeWrapper>
-              <ContentTypeBadge
-                aria-hidden
-                type={type}
-                title={t(`contentTypes.${type}`)}
-                background
-                border={false}
-                size="large"
-              />
-            </BadgeWrapper>
-          )}
-          <SubjectName>
-            <h2 id={`searchitem-header-${type}`}>
-              {type ? t(`contentTypes.${type}`) : t(`searchPage.resultType.allContentTypes`)}
-            </h2>
-            {totalCount && <Count>{t(`searchPage.resultType.hits`, { count: totalCount })}</Count>}
-          </SubjectName>
-        </TypeWrapper>
-      </HeaderWrapper>
-      {filters.length > 0 && (
-        <CategoryItems>
-          {filters.map((option: FilterOptionsType) => (
-            <CategoryTypeButtonWrapper key={option.id}>
-              <ButtonV2
-                aria-current={option.active}
-                size="xsmall"
-                shape="pill"
-                colorTheme={!option.active ? "greyLighter" : undefined}
-                onClick={(e: MouseEvent<HTMLButtonElement>) => {
-                  if (e.currentTarget && option.active) {
-                    e.currentTarget.blur();
-                  }
-                  onFilterClick?.(option.id);
-                }}
-              >
-                {option.name}
-                {option.active && (
-                  <CategoryTypeCrossWrapper>
-                    <Cross />
-                  </CategoryTypeCrossWrapper>
-                )}
-              </ButtonV2>
-            </CategoryTypeButtonWrapper>
-          ))}
-        </CategoryItems>
-      )}
-    </Wrapper>
-  );
-};
-
-export default memo(SearchTypeHeader);

package/src/SearchTypeResult/SearchTypeResult.tsx

@@ -1,89 +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 { memo, ReactNode } from "react";
-import styled from "@emotion/styled";
-import { spacing, stackOrder } from "@ndla/core";
-import { Spinner } from "@ndla/icons";
-import ResultNavigation, { PaginationType } from "./ResultNavigation";
-import { SearchItemProps } from "./SearchItem";
-import SearchItems from "./SearchItems";
-import SearchTypeHeader, { FilterOptionsType } from "./SearchTypeHeader";
-import constants from "../model";
-
-const Wrapper = styled.section`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  margin: ${spacing.medium} 0;
-  position: relative;
-`;
-
-const Overlay = styled.div`
-  position: absolute;
-  top: 0;
-  left: -1%;
-  right: 0;
-  bottom: 0;
-  width: 102%;
-  background-color: rgb(204, 204, 204, 0.1);
-  z-index: ${stackOrder.offsetDouble};
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  border-radius: 4px;
-  padding: ${spacing.small};
-`;
-
-export type ContentType =
-  | typeof constants.contentTypes.SUBJECT_MATERIAL
-  | typeof constants.contentTypes.TASKS_AND_ACTIVITIES
-  | typeof constants.contentTypes.ASSESSMENT_RESOURCES
-  | typeof constants.contentTypes.CONCEPT
-  | typeof constants.contentTypes.SOURCE_MATERIAL
-  | typeof constants.contentTypes.LEARNING_PATH
-  | typeof constants.contentTypes.TOPIC
-  | typeof constants.contentTypes.MULTIDISCIPLINARY_TOPIC;
-
-type Props = {
-  items: SearchItemProps[];
-  filters?: FilterOptionsType[];
-  onFilterClick?: (id: string) => void;
-  totalCount?: number;
-  pagination?: PaginationType;
-  type?: ContentType;
-  loading?: boolean;
-  children?: ReactNode;
-  viewType?: "grid" | "list";
-};
-
-const SearchTypeResult = ({
-  items,
-  filters,
-  onFilterClick,
-  totalCount = 0,
-  pagination,
-  type,
-  loading,
-  viewType,
-  children,
-}: Props) => (
-  <Wrapper>
-    {loading && (
-      <Overlay>
-        <Spinner />
-      </Overlay>
-    )}
-    <SearchTypeHeader onFilterClick={onFilterClick} filters={filters} totalCount={totalCount} type={type} />
-    <SearchItems items={items} type={type} viewType={viewType} />
-    {pagination && <ResultNavigation {...pagination} type={type} />}
-    {children}
-  </Wrapper>
-);
-
-export default memo(SearchTypeResult);

package/src/SearchTypeResult/SearchViewType.tsx

@@ -1,111 +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 { ButtonV2 } from "@ndla/button";
-import { animations, breakpoints, colors, mq } from "@ndla/core";
-import { Grid } from "@ndla/icons/common";
-import { ListCircle } from "@ndla/icons/editor";
-
-const Wrapper = styled.div`
-  display: inline-flex;
-  justify-content: right;
-  align-items: center;
-  flex: 1;
-  ${mq.range({ until: breakpoints.tablet })} {
-    display: none;
-  }
-  padding-top: 8px;
-`;
-
-const ButtonContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 44px;
-  height: 44px;
-`;
-const ButtonElement = styled(ButtonV2)`
-  border-radius: 50%;
-  padding: 2px;
-  width: 100%;
-  height: 100%;
-  transition: all ${animations.durations.fast} ease-in-out;
-  &:hover {
-    padding: 0;
-  }
-`;
-
-type ButtonContentProps = {
-  selected?: boolean;
-};
-
-const ButtonContent = styled.span<ButtonContentProps>`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: ${colors.brand.primary};
-  ${(props) => props.selected && `background: ${colors.brand.greyLighter};`}
-  border-radius: 50%;
-  transition: all ${animations.durations.fast} ease-in-out;
-  ${ButtonElement}:hover & {
-    background: ${colors.brand.greyLighter};
-  }
-  svg {
-    width: 24px;
-    height: 24px;
-  }
-`;
-
-export type SearchViewTypeProps = {
-  viewType: "grid" | "list";
-  onChangeViewType: (viewType: SearchViewTypeProps["viewType"]) => void;
-};
-const SearchViewType = ({ viewType, onChangeViewType }: SearchViewTypeProps) => {
-  const { t } = useTranslation();
-  const onClickHandler = (viewTypeClicked: SearchViewTypeProps["viewType"]) => {
-    if (viewTypeClicked !== viewType) {
-      onChangeViewType(viewTypeClicked);
-    }
-  };
-  return (
-    <Wrapper>
-      <ButtonContainer>
-        <ButtonElement
-          variant="stripped"
-          colorTheme="greyLighter"
-          type="button"
-          size="normal"
-          title={t("searchPage.resultType.gridView")}
-          onClick={() => onClickHandler("grid")}
-        >
-          <ButtonContent selected={viewType === "grid"}>
-            <Grid aria-hidden title="" />
-          </ButtonContent>
-        </ButtonElement>
-      </ButtonContainer>
-      <ButtonContainer>
-        <ButtonElement
-          variant="stripped"
-          size="normal"
-          title={t("searchPage.resultType.listView")}
-          onClick={() => onClickHandler("list")}
-        >
-          <ButtonContent selected={viewType === "list"}>
-            <ListCircle aria-hidden title="" />
-          </ButtonContent>
-        </ButtonElement>
-      </ButtonContainer>
-    </Wrapper>
-  );
-};
-
-export default SearchViewType;