@ndla/ui 51.0.0 → 52.0.0

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -1,223 +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.
- *
- */
-
-import { useTranslation } from "react-i18next";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
-import { LearningPathQuiz } from "@ndla/icons/contentType";
-import { ModalBody, ModalHeader, ModalCloseButton, Modal, ModalTitle, ModalTrigger, ModalContent } from "@ndla/modal";
-import { Switch } from "@ndla/switch";
-import { Tooltip } from "@ndla/tooltip";
-
-interface HelpIconProps {
-  invertedStyle: boolean;
-}
-
-const StyledTopicTitleIcon = styled.div`
-  color: ${colors.brand.light};
-  flex-grow: 1;
-  justify-content: flex-end;
-  border: 0;
-  display: flex;
-  padding: 5px;
-  border-radius: 100%;
-  align-items: center;
-  outline: 0;
-  background-color: ${colors.brand.light};
-  svg {
-    fill: ${colors.brand.primary};
-    height: 10px;
-    width: 10px;
-  }
-  &:hover,
-  &:focus {
-    background-color: ${colors.brand.primary};
-    svg {
-      fill: ${colors.white};
-    }
-  }
-`;
-
-const invertedTopicTitleIconStyle = css`
-  background-color: ${colors.white};
-  svg {
-    fill: ${colors.brand.primary};
-  }
-  &:hover,
-  &:focus {
-    background-color: ${colors.white};
-    svg: {
-      fill: ${colors.brand.primary};
-    }
-  }
-`;
-
-const HelpIcon = ({ invertedStyle }: HelpIconProps) => (
-  <StyledTopicTitleIcon css={invertedStyle ? invertedTopicTitleIconStyle : undefined}>
-    <LearningPathQuiz />
-  </StyledTopicTitleIcon>
-);
-
-const switchCSS = css`
-  margin-right: ${spacing.xsmall};
-`;
-
-const invertedSwitchCSS = css`
-  margin-right: ${spacing.xsmall};
-  color: #fff;
-`;
-
-const TooltipWrapper = styled.div`
-  line-height: 1;
-`;
-const TooltipButton = styled.button`
-  border: 0;
-  background: initial;
-  padding: 0;
-  line-height: unset;
-  cursor: pointer;
-`;
-
-const StyledTopicTitleParagraph = styled.p`
-  font-family: ${fonts.sans};
-  ${fonts.sizes("18px", "24px")};
-  font-weight: ${fonts.weight.bold};
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin: 0 ${spacing.xsmall} 0 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-right: ${spacing.small};
-    ${fonts.sizes("20px", "26px")};
-  }
-`;
-
-const TopicTitleWrapper = styled.header`
-  display: inline-flex;
-  flex-flow: wrap;
-  align-items: center;
-  margin-top: ${spacing.large};
-  padding-bottom: ${spacing.small};
-  width: 100%;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  > div {
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    &:last-child {
-      padding: ${spacing.xsmall} 0;
-    }
-  }
-  ${mq.range({ until: breakpoints.mobileWide })} {
-    > div {
-      display: block;
-    }
-  }
-  ${mq.range({ until: breakpoints.tablet })} {
-    display: block;
-  }
-`;
-
-const invertedTopicTitleWrapperStyle = css`
-  color: #fff;
-`;
-
-const TopicTitle = styled.h1`
-  font-weight: ${fonts.weight.normal};
-  margin: 0;
-  ${fonts.sizes("18px", "24px")};
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes("20px", "26px")};
-  }
-`;
-
-const topicTitleSingleStyle = css`
-  font-weight: ${fonts.weight.bold};
-  text-transform: uppercase;
-`;
-
-const StyledRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${spacing.xsmall};
-`;
-
-interface Props {
-  title?: string;
-  toggleAdditionalResources: () => void;
-  hasAdditionalResources: boolean;
-  showAdditionalResources: boolean;
-  invertedStyle?: boolean;
-  messages: {
-    label: string;
-    additionalFilterLabel: string;
-  };
-}
-const ResourcesTopicTitle = ({
-  title,
-  hasAdditionalResources,
-  toggleAdditionalResources,
-  showAdditionalResources,
-  messages,
-  invertedStyle = false,
-}: Props) => {
-  const { t } = useTranslation();
-  // Fix for heading while title not required when ready.
-  let heading;
-  if (title) {
-    heading = <TopicTitle>{title}</TopicTitle>;
-  } else {
-    heading = <TopicTitle css={topicTitleSingleStyle}>{messages.label}</TopicTitle>;
-  }
-
-  return (
-    <TopicTitleWrapper css={invertedStyle ? invertedTopicTitleWrapperStyle : undefined}>
-      <div>
-        {title && <StyledTopicTitleParagraph>{messages.label}</StyledTopicTitleParagraph>}
-        {heading}
-      </div>
-      {hasAdditionalResources && (
-        <StyledRow>
-          <Switch
-            id="toggleAdditionID"
-            checked={showAdditionalResources}
-            label={messages.additionalFilterLabel}
-            onChange={toggleAdditionalResources}
-            css={invertedStyle ? invertedSwitchCSS : switchCSS}
-          />
-          <Modal>
-            <TooltipWrapper>
-              <Tooltip tooltip={t("resource.dialogTooltip")}>
-                <ModalTrigger>
-                  <TooltipButton aria-label={t("resource.dialogTooltip")}>
-                    <HelpIcon invertedStyle={invertedStyle} />
-                  </TooltipButton>
-                </ModalTrigger>
-              </Tooltip>
-            </TooltipWrapper>
-            <ModalContent>
-              <ModalHeader>
-                <ModalTitle>{t("resource.dialogHeading")}</ModalTitle>
-                <ModalCloseButton />
-              </ModalHeader>
-              <ModalBody>
-                <hr />
-                <p>{t("resource.dialogText1")}</p>
-                <p>{t("resource.dialogText2")}</p>
-              </ModalBody>
-            </ModalContent>
-          </Modal>
-        </StyledRow>
-      )}
-    </TopicTitleWrapper>
-  );
-};
-
-export default ResourcesTopicTitle;

package/src/ResourcesWrapper/ResourcesWrapper.tsx

@@ -1,32 +0,0 @@
-/**
- * Copyright (c) 2016-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 { HTMLAttributes, ReactNode } from "react";
-import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
-
-interface Props extends HTMLAttributes<HTMLElement> {
-  header?: ReactNode;
-  children: ReactNode;
-  className?: string;
-  id?: string;
-}
-
-const StyledSection = styled.section`
-  padding-top: ${spacing.normal};
-  padding-bottom: ${spacing.normal};
-`;
-
-const ResourcesWrapper = ({ children, header, ...rest }: Props) => (
-  <StyledSection {...rest}>
-    {header}
-    {children}
-  </StyledSection>
-);
-
-export default ResourcesWrapper;

package/src/ResourcesWrapper/index.ts

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2017-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 ResourcesWrapper from "./ResourcesWrapper";
-
-export { default as ResourcesTopicTitle } from "./ResourcesTopicTitle";
-
-export default ResourcesWrapper;

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;