@ndla/ui 50.15.3 → 52.0.0

package/src/ResourceGroup/ResourceItem.tsx

@@ -1,318 +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 { CSSProperties, ReactNode, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { keyframes } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, misc, mq, spacing } from "@ndla/core";
-import { Additional, Core, HumanMaleBoard } from "@ndla/icons/common";
-import { SafeLink } from "@ndla/safelink";
-import ContentTypeBadge from "../ContentTypeBadge";
-import * as contentTypes from "../model/ContentType";
-import { Resource } from "../types";
-
-const listElementActiveColor = (contentType?: string) => {
-  switch (contentType) {
-    case contentTypes.SUBJECT_MATERIAL:
-      return colors.subjectMaterial.dark;
-    case contentTypes.TASKS_AND_ACTIVITIES:
-      return colors.tasksAndActivities.dark;
-    case contentTypes.ASSESSMENT_RESOURCES:
-      return colors.assessmentResource.dark;
-    case contentTypes.CONCEPT:
-      return colors.concept.text;
-    case contentTypes.SOURCE_MATERIAL:
-      return colors.sourceMaterial.dark;
-    case contentTypes.LEARNING_PATH:
-      return colors.learningPath.dark;
-    default:
-      break;
-  }
-  return "none";
-};
-
-const fadeInAdditionalsKeyframe = keyframes`
-  0% {
-    opacity: 0;
-    transform: translate3d(-10px, 0px, 0px);
-    position: absolute;
-  }
-  49% {
-    position: absolute;
-  }
-  50% {
-    position: static;
-    opacity: 0;
-    transform: translate3d(-10px, 0px, 0px);
-  }
-  100% {
-    position: static;
-    opacity: 1;
-    height: auto;
-  }
-`;
-
-const ListElement = styled.li`
-  border: 1px solid ${colors.brand.neutral7};
-  border-radius: ${misc.borderRadius};
-  background: ${colors.white};
-  margin-bottom: ${spacing.xsmall};
-  display: grid;
-  align-items: center;
-  grid-template-areas:
-    "badge resourceType typeWrapper"
-    "badge resourceLink typeWrapper";
-  grid-row-gap: ${spacing.xsmall};
-  grid-template-columns: auto 1fr auto;
-  grid-template-rows: auto auto;
-
-  padding: ${spacing.small};
-  &[data-additional="true"] {
-    border-style: dashed;
-    animation-duration: 0.8s;
-    animation-fill-mode: forwards;
-    animation: ${fadeInAdditionalsKeyframe};
-  }
-
-  * {
-    transition:
-      height ease-out 0.2s,
-      width ease-out 0.2s;
-  }
-  &[data-active="true"] {
-    &:before {
-      ${mq.range({ from: breakpoints.tablet })} {
-        content: "";
-        display: block;
-        position: absolute;
-        width: ${spacing.small};
-        height: ${spacing.small};
-        border-radius: 100%;
-        transform: translate(-${spacing.mediumlarge});
-        background-color: var(--contentTypeBg);
-      }
-    }
-  }
-  &[hidden] {
-    display: none;
-  }
-  [data-badge-wrapper="true"] {
-    &:has(+ a:hover) {
-      svg {
-        width: 20px;
-        height: 20px;
-      }
-    }
-  }
-  &:not([data-content-type]) {
-    grid-template-areas: "badge resourceLink typeWrapper";
-    grid-row-gap: 0;
-    align-items: center;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    grid-template-areas: "badge resourceLink resourceType typeWrapper";
-    grid-row-gap: 0;
-    align-items: center;
-  }
-`;
-
-const ResourceLink = styled(SafeLink)`
-  grid-area: resourceLink;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  font-weight: ${fonts.weight.semibold};
-  box-shadow: none;
-  &[data-active="false"] {
-    text-decoration: underline;
-    text-underline-offset: 5px;
-  }
-  color: ${colors.brand.dark};
-  ${fonts.sizes("16px", "26px")};
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes("18px", "26px")};
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    ${fonts.sizes("20px", "26px")};
-  }
-  &:hover {
-    text-decoration: none;
-  }
-`;
-
-const TitleContainer = styled.div`
-  align-items: normal;
-  display: flex;
-  flex-direction: column;
-  ${mq.range({ from: breakpoints.desktop })} {
-    align-items: center;
-    flex-direction: row;
-  }
-`;
-
-const ContentBadgeWrapper = styled.div`
-  grid-area: badge;
-  display: flex;
-  flex: 0 0 auto;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  width: 42px;
-  height: 42px;
-  box-sizing: content-box;
-  padding-right: ${spacing.small};
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding-right: ${spacing.small};
-    padding-left: ${spacing.xsmall};
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    align-items: center;
-    padding-right: ${spacing.nsmall};
-  }
-`;
-
-const TypeWrapper = styled.div`
-  grid-area: typeWrapper;
-  display: flex;
-  align-items: center;
-  gap: ${spacing.xsmall};
-  ${mq.range({ from: breakpoints.desktop })} {
-    align-items: center;
-  }
-`;
-
-const ContentTypeName = styled.span`
-  grid-area: resourceType;
-  font-family: ${fonts.sans};
-  ${fonts.sizes("14px", "18px")};
-  font-weight: ${fonts.weight.semibold};
-  color: ${colors.text.light};
-  text-align: left;
-  ${mq.range({ from: breakpoints.desktop })} {
-    padding-left: 0;
-    text-align: right;
-    margin: 0 ${spacing.xsmall};
-  }
-`;
-
-const CurrentSmall = styled.small`
-  text-decoration: none;
-  color: ${colors.text.primary};
-  font-weight: ${fonts.weight.normal};
-  white-space: nowrap;
-  ${mq.range({ from: breakpoints.desktop })} {
-    padding: 0 ${spacing.xsmall};
-  }
-`;
-
-const StyledAdditional = styled(Additional)`
-  color: ${colors.brand.dark};
-`;
-
-const StyledCore = styled(Core)`
-  color: ${colors.brand.primary};
-`;
-
-interface Props {
-  id: string;
-  showContentTypeDescription?: boolean;
-  contentTypeName?: string;
-  contentTypeDescription?: string;
-  extraBottomMargin?: boolean;
-  showAdditionalResources?: boolean;
-  language?: string;
-  access?: "teacher";
-  heartButton?: (path: string) => ReactNode;
-}
-
-const IconWrapper = styled.div`
-  display: flex;
-  flex-grow: 1;
-`;
-
-const ResourceItem = ({
-  id,
-  contentTypeName,
-  contentTypeDescription,
-  name,
-  path,
-  contentType,
-  active,
-  additional,
-  showAdditionalResources,
-  access,
-  language,
-  heartButton,
-}: Props & Resource) => {
-  const { t } = useTranslation();
-  const accessId = `${id}-teacher`;
-  const coreId = `${id}-core`;
-  const additionalId = `${id}-additional`;
-  const describedBy = `${coreId} ${additionalId} ${accessId}`;
-  const hidden = additional ? !showAdditionalResources : false;
-  const listElementVars = useMemo(() => {
-    if (!contentType) return {};
-    return {
-      "--contentTypeBg": listElementActiveColor(contentType),
-    } as unknown as CSSProperties;
-  }, [contentType]);
-
-  return (
-    <ListElement
-      aria-current={active ? "page" : undefined}
-      hidden={hidden && !active}
-      data-active={active}
-      data-additional={additional}
-      data-content-type={contentTypeName}
-      style={listElementVars}
-    >
-      <ContentBadgeWrapper data-badge-wrapper={!active}>
-        <ContentTypeBadge type={contentType ?? ""} background border={false} />
-      </ContentBadgeWrapper>
-      <ResourceLink
-        to={path}
-        lang={language === "nb" ? "no" : language}
-        aria-current={active ? "page" : undefined}
-        aria-describedby={describedBy}
-        disabled={active}
-        data-active={active}
-      >
-        <TitleContainer>
-          <div>{name}</div>
-          {active ? <CurrentSmall>{t("resource.youAreHere")}</CurrentSmall> : undefined}
-        </TitleContainer>
-      </ResourceLink>
-      {contentTypeName && <ContentTypeName>{contentTypeName}</ContentTypeName>}
-      <TypeWrapper>
-        {access && access === "teacher" && (
-          <IconWrapper aria-label={t("article.access.onlyTeacher")} title={t("article.access.onlyTeacher")}>
-            <HumanMaleBoard id={accessId} />
-          </IconWrapper>
-        )}
-        {showAdditionalResources && contentTypeDescription && (
-          <>
-            {additional && (
-              <IconWrapper id={additionalId} aria-label={contentTypeDescription} title={contentTypeDescription}>
-                <StyledAdditional size="normal" />
-              </IconWrapper>
-            )}
-            {!additional && (
-              <IconWrapper id={coreId} aria-label={contentTypeDescription} title={contentTypeDescription}>
-                <StyledCore size="normal" />
-              </IconWrapper>
-            )}
-          </>
-        )}
-        {heartButton?.(path)}
-      </TypeWrapper>
-    </ListElement>
-  );
-};
-
-export default ResourceItem;

package/src/ResourceGroup/ResourceList.tsx

@@ -1,80 +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 { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { fonts } from "@ndla/core";
-import ResourceItem from "./ResourceItem";
-import NoContentBox from "../NoContentBox";
-import { Resource } from "../types";
-
-const StyledResourceList = styled.ul`
-  list-style: none;
-  padding: 0;
-  font-family: ${fonts.sans};
-`;
-
-export type ResourceListProps = {
-  resources: Resource[];
-  onClick?: () => void;
-  contentType?: string;
-  title?: string;
-  showAdditionalResources?: boolean;
-  heartButton?: (path: string) => ReactNode;
-};
-
-const ResourceList = ({
-  resources,
-  onClick,
-  contentType,
-  title,
-  showAdditionalResources,
-  heartButton,
-}: ResourceListProps) => {
-  const { t } = useTranslation();
-  const renderAdditionalResourceTrigger =
-    !showAdditionalResources &&
-    resources.filter((res) => res.additional).length > 0 &&
-    resources.filter((res) => !res.additional).length === 0;
-
-  return (
-    <StyledResourceList>
-      {resources.map(({ id, ...resource }) => (
-        <ResourceItem
-          id={id}
-          key={id}
-          contentType={contentType}
-          showAdditionalResources={showAdditionalResources}
-          heartButton={heartButton}
-          {...resource}
-          contentTypeDescription={
-            resource.additional ? t("resource.tooltipAdditionalTopic") : t("resource.tooltipCoreTopic")
-          }
-        />
-      ))}
-      {renderAdditionalResourceTrigger && (
-        <li>
-          <NoContentBox
-            onClick={onClick}
-            buttonText={t("resource.toggleFilterLabel")}
-            text={
-              title
-                ? t("resource.noCoreResourcesAvailable", {
-                    name: title.toLowerCase(),
-                  })
-                : t("resource.noCoreResourcesAvailableUnspecific")
-            }
-          />
-        </li>
-      )}
-    </StyledResourceList>
-  );
-};
-
-export default ResourceList;

package/src/ResourceGroup/index.ts

@@ -1,11 +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 ResourceGroup from "./ResourceGroup";
-
-export default ResourceGroup;

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;