@ndla/ui 51.0.0 → 53.0.0

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;

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/index.ts

@@ -1,9 +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 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;