@ndla/ui 50.15.3 → 52.0.0

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;

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -1,131 +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 { ReactNode, Fragment } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { breakpoints, colors, fonts, mq, spacing, stackOrder } from "@ndla/core";
-import { Additional, Core } from "@ndla/icons/common";
-import { Modal, ModalCloseButton, ModalContent, ModalHeader, ModalTitle, ModalTrigger } from "@ndla/modal";
-import { SafeLink } from "@ndla/safelink";
-
-const BreadcrumbPath = styled.div`
-  color: ${colors.text.light};
-  ${fonts.sizes("14px", "20px")};
-
-  svg {
-    margin-left: ${spacing.small};
-  }
-`;
-
-const ModalButton = styled(ButtonV2)`
-  z-index: ${stackOrder.offsetSingle};
-  position: relative;
-  ${fonts.sizes("14px", "20px")};
-  box-shadow: none;
-  &:hover {
-    box-shadow: inset 0 -1px;
-  }
-`;
-
-const Content = styled.div`
-  padding: 0 ${spacing.small} ${spacing.normal};
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: 0 ${spacing.large} ${spacing.normal};
-  }
-`;
-
-const ContextList = styled.ul`
-  padding: 0;
-  list-style: none;
-`;
-const ContextListItem = styled.li`
-  margin-bottom: ${spacing.normal};
-  ${fonts.sizes("16px", "28px")};
-`;
-
-const StyledAdditional = styled(Additional)`
-  color: ${colors.brand.dark};
-`;
-
-const StyledCore = styled(Core)`
-  color: ${colors.brand.primary};
-`;
-
-type context = {
-  breadcrumb: string[];
-  url: string;
-  isAdditional?: boolean;
-};
-export type ItemContextsType = {
-  contexts: context[];
-  id: string | number;
-  title: string;
-};
-
-const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
-  const { t } = useTranslation();
-  const mainContext = contexts[0];
-  const Breadcrumb = ({ breadcrumb, children }: { breadcrumb: string[]; children?: ReactNode }) => (
-    <BreadcrumbPath>
-      {breadcrumb.map((breadcrumbItem: string, i: number) => (
-        <Fragment key={`${breadcrumbItem}-${id}`}>
-          {i > 0 && <> &rsaquo; </>}
-          {breadcrumbItem}
-        </Fragment>
-      ))}
-      {children}
-    </BreadcrumbPath>
-  );
-
-  return (
-    <Breadcrumb breadcrumb={mainContext.breadcrumb}>
-      &nbsp;
-      {contexts.length > 1 && (
-        <Modal>
-          <ModalTrigger>
-            <ModalButton variant="link">
-              {t("searchPage.contextModal.button", {
-                count: contexts.length - 1,
-              })}
-            </ModalButton>
-          </ModalTrigger>
-          <ModalContent animation="subtle" animationDuration={50}>
-            <ModalHeader>
-              <ModalTitle>{t("searchPage.contextModal.heading")}</ModalTitle>
-              <ModalCloseButton />
-            </ModalHeader>
-            <Content>
-              <ContextList>
-                {contexts.map((context) => (
-                  <ContextListItem key={context.url}>
-                    <SafeLink to={context.url}>{title}</SafeLink>
-                    <Breadcrumb breadcrumb={context.breadcrumb}>
-                      {context.isAdditional ? (
-                        <StyledAdditional
-                          size="normal"
-                          aria-label={t("resource.tooltipAdditionalTopic")}
-                          aria-hidden={false}
-                        />
-                      ) : (
-                        <StyledCore size="normal" aria-label={t("resource.tooltipCoreTopic")} aria-hidden={false} />
-                      )}
-                    </Breadcrumb>
-                  </ContextListItem>
-                ))}
-              </ContextList>
-            </Content>
-          </ModalContent>
-        </Modal>
-      )}
-    </Breadcrumb>
-  );
-};
-
-export default ItemContexts;

package/src/SearchTypeResult/components/ItemResourceHeader.tsx

@@ -1,130 +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 { Fragment } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { fonts, spacing, stackOrder } from "@ndla/core";
-import ContentTypeBadge from "../../ContentTypeBadge";
-import resourceTypeColor from "../../utils/resourceTypeColor";
-import { SearchItemType } from "../SearchItem";
-import { ContentType } from "../SearchTypeResult";
-
-interface ItemTypeProps {
-  contentType?: ContentType;
-}
-
-const ImageElement = styled.img`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  overflow: hidden;
-`;
-
-const NoImageElement = styled.div<ItemTypeProps>`
-  flex: 1;
-  background: ${(props) => props.contentType && `${resourceTypeColor(props.contentType)}`};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  [data-badge] {
-    width: 58px;
-    height: 58px;
-    opacity: 0.2;
-    z-index: ${stackOrder.offsetDouble};
-    svg {
-      width: 58px;
-      height: 58px;
-    }
-  }
-`;
-
-const ContentTypeWrapper = styled.div<ItemTypeProps>`
-  height: 48px;
-  background: ${(props) => props.contentType && `${resourceTypeColor(props.contentType)}`};
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 ${spacing.normal};
-  ${fonts.sizes("12px", "16px")};
-  font-weight: ${fonts.weight.semibold};
-`;
-
-const ContentTypeIcon = styled.span<ItemTypeProps>`
-  display: flex;
-  position: absolute;
-  top: -23px;
-  margin-left: ${spacing.small};
-  justify-content: center;
-  ::before {
-    content: "";
-    position: absolute;
-    height: 23px;
-    width: 78px;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='23' viewBox='17 0 78 23' fill='none'%3E%3Cpath d='M35.6874 10.8284C37.0999 8.9889 38.405 7.28934 40 6C44.8452 2.08335 48.9078 0 56 0C63.0922 0 67.6548 2.5833 72.5 6.49995C74.0499 7.75284 75.2937 9.39082 76.6385 11.1617C80.0028 15.5921 83.9988 20.8545 95 23H17C27.9865 20.8573 32.1701 15.409 35.6874 10.8284ZM352' fill='${(
-      props,
-    ) => props.contentType && `${encodeURIComponent(resourceTypeColor(props.contentType))}`}'/%3E%3C/svg%3E");
-  }
-`;
-
-const StyledContentTypeBadge = styled(ContentTypeBadge)`
-  z-index: ${stackOrder.offsetSingle};
-  margin-top: ${spacing.xxsmall};
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-`;
-
-const Wrapper = styled.header`
-  display: grid;
-  grid-template-rows: 1fr auto;
-  overflow: hidden;
-  flex-direction: column;
-  height: 180px;
-`;
-
-interface Props {
-  labels: SearchItemType["item"]["labels"];
-  img?: SearchItemType["item"]["img"] | null;
-  type?: ContentType;
-}
-
-const ItemResourceHeader = ({ labels = [], img, type }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <Wrapper>
-      {img ? (
-        <ImageElement src={img.url} alt={img.alt} />
-      ) : (
-        <NoImageElement contentType={type}>{type && <ContentTypeBadge type={type} border={false} />}</NoImageElement>
-      )}
-      <ContentTypeWrapper className="resource-type-wrapper" contentType={type}>
-        {img && type && (
-          <ContentTypeIcon className="resource-icon-wrapper" contentType={type}>
-            <StyledContentTypeBadge type={type} border={false} />
-          </ContentTypeIcon>
-        )}
-        {type && t(`contentTypes.${type}`)}
-        {labels.length > 0 && (
-          <>
-            {labels.map((label) => (
-              <Fragment key={label}>
-                {" "}
-                <>&#8226;</> {label}
-              </Fragment>
-            ))}
-          </>
-        )}
-      </ContentTypeWrapper>
-    </Wrapper>
-  );
-};
-
-export default ItemResourceHeader;

package/src/SearchTypeResult/components/ItemTopicHeader.tsx

@@ -1,88 +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 { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors, fonts, spacing } from "@ndla/core";
-
-import ContentTypeBadge from "../../ContentTypeBadge";
-import { SearchItemType } from "../SearchItem";
-import { ContentType } from "../SearchTypeResult";
-
-const Wrapper = styled.header`
-  padding: ${spacing.small} ${spacing.normal} 0;
-`;
-
-const Label = styled.div`
-  ${fonts.sizes("12px", "16px")};
-  font-weight: ${fonts.weight.semibold};
-  height: 26px;
-  display: flex;
-  align-items: center;
-  margin: ${spacing.small} 0;
-
-  [data-badge] {
-    width: 26px;
-    height: 26px;
-    margin-right: ${spacing.xsmall};
-  }
-
-  svg {
-    width: 22px;
-    height: 22px;
-    color: ${colors.text.primary} !important;
-  }
-`;
-
-const TopicHeaderVisualElementWrapper = styled.div`
-  float: right;
-  margin-left: ${spacing.small};
-  width: 110px;
-  height: 110px;
-  display: flex;
-  overflow: hidden;
-  border-radius: 50%;
-`;
-
-const TopicHeaderImage = styled.img`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  max-width: unset;
-`;
-
-interface Props {
-  children: ReactNode;
-  image?: SearchItemType["item"]["img"] | null;
-  type?: ContentType;
-}
-
-const ItemTopicHeader = ({ children, image, type }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <Wrapper>
-      {image && (
-        <TopicHeaderVisualElementWrapper>
-          <TopicHeaderImage className="topic-header-image" src={image.url} alt="" />
-        </TopicHeaderVisualElementWrapper>
-      )}
-      <Label className="topic-label">
-        {type && (
-          <>
-            <ContentTypeBadge type={type} border={false} />
-            {t(`contentTypes.${type}`)}
-          </>
-        )}
-      </Label>
-      {children}
-    </Wrapper>
-  );
-};
-
-export default ItemTopicHeader;