@ndla/ui 51.0.0 → 53.0.0

package/src/LearningPaths/LearningPathMenuAside.tsx

@@ -1,100 +0,0 @@
-/**
- * Copyright (c) 2019-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 { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations } from "@ndla/core";
-import { SafeLinkButton } from "@ndla/safelink";
-import { ArticleByline } from "../Article";
-
-const infoTextCSS = css`
-  ${fonts.sizes(18, 1.3)};
-  font-weight: ${fonts.weight.semibold};
-  width: calc(100% - ${spacing.medium});
-  border-top: 2px solid ${colors.brand.greyLight};
-  margin-top: ${spacing.normal};
-  padding: ${spacing.normal} 0 0;
-`;
-
-type StyledAsideProps = {
-  isOpen: boolean;
-  invertedStyle?: boolean;
-};
-
-const StyledAside = styled.aside<StyledAsideProps>`
-  display: none;
-  padding-left: ${spacing.xlarge};
-  ${mq.range({ from: breakpoints.desktop })} {
-    display: block;
-  }
-  ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
-    ${(props) =>
-      props.isOpen &&
-      css`
-        display: block;
-        opacity: 0;
-        ${animations.fadeIn()}
-        animation-fill-mode: forwards;
-        animation-delay: 450ms;
-      `}
-  }
-  ${mq.range({ until: breakpoints.tablet })} {
-    display: block;
-    padding-left: ${spacingUnit * 1.25}px;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${(props) =>
-      props.invertedStyle &&
-      `
-      color: #fff;
-    `}
-  }
-`;
-
-type Props = {
-  isOpen: boolean;
-  lastUpdated: string;
-  learningPathURL: string;
-  invertedStyle?: boolean;
-  copyright: {
-    contributors: {
-      type: string;
-      name: string;
-    }[];
-    license: {
-      license: string;
-    };
-  };
-};
-
-const LearningPathMenuAside = ({ lastUpdated, learningPathURL, copyright, isOpen, invertedStyle }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledAside isOpen={isOpen} invertedStyle={invertedStyle}>
-      <ArticleByline
-        authors={copyright.contributors}
-        license={copyright.license.license}
-        published={lastUpdated}
-        bylineType="learningPath"
-      />
-      <p css={infoTextCSS}>{t("learningPath.createLearningPathText")}</p>
-      <SafeLinkButton
-        to={learningPathURL}
-        target="_blank"
-        rel="noopener noreferrer"
-        variant="outline"
-        inverted={invertedStyle}
-      >
-        {t("learningPath.createLearningPathButtonText")}
-      </SafeLinkButton>
-    </StyledAside>
-  );
-};
-
-export default LearningPathMenuAside;

package/src/LearningPaths/LearningPathMenuContent.tsx

@@ -1,277 +0,0 @@
-/**
- * Copyright (c) 2019-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 { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations, utils, stackOrder } from "@ndla/core";
-import { LearningPathRead } from "@ndla/icons/contentType";
-import { SafeLink } from "@ndla/safelink";
-import { StepProps } from "./LearningPathMenu";
-import ContentTypeBadge from "../ContentTypeBadge";
-import constants from "../model";
-
-const SIDE_NAV_WIDTH = "372px";
-
-type StyledMenuItemProps = {
-  current?: boolean;
-  isOpen: boolean;
-  afterCurrent: boolean;
-  indexNumber: number;
-  hasRead?: boolean;
-  invertedStyle?: boolean;
-};
-
-const StyledMenuItem = styled.li<StyledMenuItemProps>`
-  padding: 0;
-  a {
-    box-shadow: none;
-    display: inline-flex;
-    align-items: center;
-    padding: ${spacing.small};
-    > span {
-      display: flex;
-      align-items: center;
-      ${fonts.sizes(14, 1.2)};
-      color: ${colors.brand.primary};
-      ${mq.range({ from: breakpoints.tablet })} {
-        color: ${({ invertedStyle }) => (invertedStyle ? "#fff" : colors.brand.primary)};
-        font-weight: ${fonts.weight.semibold};
-      }
-    }
-    &:hover,
-    &:focus {
-      > span {
-        text-decoration: underline;
-      }
-    }
-  }
-  ${mq.range({ until: breakpoints.desktop })} {
-    ${(props) =>
-      !props.isOpen &&
-      `
-      margin-bottom: -${spacing.xsmall};
-      margin-top: -${spacing.xsmall};
-      transition: margin ${animations.durations.superFast} ease;
-    `}
-    ${(props) =>
-      props.isOpen &&
-      `
-      a span {
-        ${animations.fadeInLeftFromZero()}
-        animation-delay: ${parseInt(animations.durations.superFast) * 1.5 + 20 * props.indexNumber}ms;
-      }
-    `}
-    &:first-of-type, &:last-of-type {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-  ${(props) =>
-    props.current &&
-    props.isOpen &&
-    `
-    a {
-      &:before {
-        position: absolute;
-        content: '';
-        display: block;
-        background: #fff;
-        height: ${spacing.large};
-        width: calc(${SIDE_NAV_WIDTH} - ${spacing.small});
-        transform: translateX(-${spacing.small});
-      }
-    }
-  `}
-  ${(props) =>
-    props.current &&
-    `
-      background: #fff;
-  `}
-  &:after {
-    content: "";
-    display: block;
-    height: ${spacing.large};
-    width: 2px;
-    background: ${colors.brand.greyLight};
-    position: absolute;
-    transform: translate(29px, -${spacing.xlarge});
-  }
-  ${(props) =>
-    !props.afterCurrent &&
-    `
-    a {
-      > span {
-        color: ${colors.text.primary};
-        font-weight: ${fonts.weight.normal};
-      }
-      color: ${colors.text.primary};
-      font-weight: ${fonts.weight.normal};
-    }
-    &:after {
-      width: 4px;
-      background: ${colors.text.light};
-      transform: translate(28px, -${spacing.xlarge});
-    }
-  `}
-  ${(props) =>
-    !props.afterCurrent &&
-    !props.current &&
-    props.invertedStyle &&
-    `
-    ${mq.range({ from: breakpoints.tablet })} {
-      a {
-        > span {
-          color: #fff;
-        }
-        color: #fff;
-      }
-    }
-    `}
-`;
-
-const StyledContentType = styled.div`
-  position: relative;
-  z-index: ${stackOrder.offsetSingle};
-  margin-right: ${spacingUnit * 0.75}px;
-  max-height: 35px;
-`;
-
-const HiddenSpan = styled.span`
-  ${utils.visuallyHidden};
-`;
-
-type StyledNavigationProps = {
-  isOpen: boolean;
-  invertedStyle?: boolean;
-};
-
-const StyledNavigation = styled.nav<StyledNavigationProps>`
-  > ul {
-    list-style: none;
-    padding: 0;
-  }
-  margin-bottom: ${spacing.medium};
-  ${(props) =>
-    !props.isOpen &&
-    css`
-      ${mq.range({ until: breakpoints.tablet })} {
-        margin-left: -28px;
-      }
-      ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
-        ${StyledMenuItem} {
-          span {
-            display: none;
-          }
-          &:first-of-type {
-            &:after {
-              display: none !important;
-            }
-          }
-          a:hover,
-          a:focus {
-            position: relative;
-            z-index: ${stackOrder.offsetSingle};
-            width: ${SIDE_NAV_WIDTH};
-            background: ${colors.brand.greyLighter};
-            span {
-              display: flex;
-            }
-          }
-        }
-      }
-    `}
-`;
-
-const ReadIcon = styled.div`
-  border-radius: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: -6px;
-  right: 0;
-  width: 16px;
-  height: 16px;
-  background: ${colors.brand.secondary};
-  color: ${colors.text.light};
-  transform: translateX(4px);
-  svg {
-    width: 12px;
-    height: 12px;
-    fill: ${colors.brand.lighter};
-  }
-`;
-
-type Props = {
-  learningsteps: StepProps[];
-  learningPathId: number;
-  isOpen: boolean;
-  toLearningPathUrl(pathId: number, stepId: number): string;
-  currentIndex: number;
-  invertedStyle?: boolean;
-  cookies: {
-    [key: string]: string;
-  };
-  onStepNavigate: () => void;
-};
-
-const hasRead = (
-  id: number,
-  cookies: {
-    [key: string]: string;
-  },
-) => !!cookies[id];
-
-const LearningPathMenuContent = ({
-  isOpen,
-  currentIndex,
-  cookies,
-  learningPathId,
-  learningsteps,
-  toLearningPathUrl,
-  invertedStyle,
-  onStepNavigate,
-}: Props) => {
-  return (
-    <StyledNavigation isOpen={isOpen} invertedStyle={invertedStyle}>
-      <ul>
-        {learningsteps.map(({ id, title, type }: StepProps, index: number) => (
-          <StyledMenuItem
-            key={id}
-            current={index === currentIndex}
-            afterCurrent={index > currentIndex}
-            isOpen={isOpen}
-            invertedStyle={invertedStyle}
-            indexNumber={index}
-          >
-            <SafeLink
-              onClick={onStepNavigate}
-              to={toLearningPathUrl(learningPathId, id)}
-              aria-describedby={`read-${id}`}
-            >
-              <StyledContentType>
-                <ContentTypeBadge type={type ?? constants.contentTypes.LEARNING_PATH} background size="small" />
-                {hasRead(id, cookies) && (
-                  <div id={`read-${id}`} aria-hidden>
-                    <HiddenSpan>Lest</HiddenSpan>
-                    <ReadIcon>
-                      <LearningPathRead />
-                    </ReadIcon>
-                  </div>
-                )}
-              </StyledContentType>
-              <span>{title}</span>
-            </SafeLink>
-          </StyledMenuItem>
-        ))}
-      </ul>
-    </StyledNavigation>
-  );
-};
-
-export default LearningPathMenuContent;

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -1,126 +0,0 @@
-/**
- * Copyright (c) 2019-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 { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { colors, spacing, spacingUnit, fonts, typography, mq, breakpoints, animations } from "@ndla/core";
-
-const StyledInfoHeader = styled.p`
-  ${typography.smallHeading}
-`;
-
-type StyledMenuIntroProps = {
-  isOpen?: boolean;
-  invertedStyle?: boolean;
-};
-
-const BORDER_WIDTH = 4;
-
-const StyledMenuIntro = styled.div<StyledMenuIntroProps>`
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${(props) =>
-      props.invertedStyle &&
-      css`
-        color: #fff;
-        ${StyledInfoHeader} {
-          color: #fff;
-        }
-      `}
-  }
-  border-left: ${BORDER_WIDTH}px solid ${colors.text.light};
-  &:before {
-    content: "";
-    display: block;
-    background: ${colors.text.light};
-    border-radius: 100%;
-    height: 12px;
-    width: 12px;
-    position: absolute;
-    transform: translate(-8px, -8px);
-  }
-  > div {
-    padding: 0 0 ${spacing.medium} ${spacing.normal};
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-left: ${spacingUnit + BORDER_WIDTH}px;
-    margin-top: ${spacing.normal};
-  }
-  ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
-    ${(props) =>
-      !props.isOpen &&
-      css`
-        display: none;
-      `}
-    ${(props) =>
-      props.isOpen &&
-      css`
-        animation-duration: ${animations.durations.superFast};
-        animation-name: StyledMenuIntroAnimationHeight;
-        @keyframes StyledMenuIntroAnimationHeight {
-          0% {
-            height: ${spacing.normal};
-            width: 0;
-          }
-          99% {
-            overflow: hidden;
-            height: 118px;
-            width: 200px;
-          }
-          100% {
-            height: auto;
-            width: auto;
-          }
-        }
-        > * {
-          opacity: 0;
-          ${animations.fadeInBottom()}
-          animation-fill-mode: forwards;
-          animation-delay: ${animations.durations.superFast};
-        }
-      `}
-  }
-`;
-
-const StyledIntroHeader = styled.h1`
-  ${fonts.sizes(18, 1.1)};
-  line-height: 20px;
-  margin: ${spacing.small} 0 ${spacing.normal};
-`;
-
-const StyledRow = styled.div`
-  display: flex;
-  gap: ${spacing.small};
-  align-items: center;
-`;
-
-interface Props {
-  isOpen: boolean;
-  invertedStyle?: boolean;
-  name: string;
-  id: number;
-  heartButton?: ReactNode;
-}
-
-const LearningPathMenuIntro = ({ isOpen, name, invertedStyle, heartButton }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledMenuIntro isOpen={isOpen} invertedStyle={invertedStyle}>
-      <div>
-        <StyledRow>
-          <StyledInfoHeader>{t("learningPath.youAreInALearningPath")}</StyledInfoHeader>
-          {heartButton}
-        </StyledRow>
-        <StyledIntroHeader>{name}</StyledIntroHeader>
-      </div>
-    </StyledMenuIntro>
-  );
-};
-
-export default LearningPathMenuIntro;

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -1,71 +0,0 @@
-/**
- * Copyright (c) 2019-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, useCallback, useState } 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, colors, stackOrder } from "@ndla/core";
-import { LearningPath } from "@ndla/icons/contentType";
-import { ModalHeader, ModalBody, ModalTrigger, ModalCloseButton, Modal, ModalContent } from "@ndla/modal";
-
-const buttonToggleCss = css`
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: none;
-  }
-  margin-right: auto;
-  margin-left: ${spacing.normal};
-  z-index: ${stackOrder.popover};
-  svg {
-    width: 20px;
-    height: 20px;
-    margin-right: ${spacing.xsmall};
-    transform: translateY(-2px);
-  }
-`;
-
-const StyledModalContent = styled(ModalContent)`
-  background-color: ${colors.brand.greyLightest};
-`;
-
-type ModalWrapperProps = {
-  innerWidth: number;
-  children: (arg: VoidFunction) => ReactNode;
-};
-
-const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {
-  const [open, setIsOpen] = useState(false);
-  const { t } = useTranslation();
-
-  const onClose = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  if (innerWidth < 601) {
-    return (
-      <Modal open={open} onOpenChange={setIsOpen}>
-        <ModalTrigger>
-          <ButtonV2 css={buttonToggleCss}>
-            <LearningPath />
-            <span>{t("learningPath.openMenuTooltip")}</span>
-          </ButtonV2>
-        </ModalTrigger>
-        <StyledModalContent animationDuration={200} size="full">
-          <ModalHeader>
-            <ModalCloseButton />
-          </ModalHeader>
-          <ModalBody>{children(onClose)}</ModalBody>
-        </StyledModalContent>
-      </Modal>
-    );
-  }
-  return <>{children(() => {})}</>;
-};
-
-export default ModalWrapperComponent;

package/src/LearningPaths/LearningPathMobileHeader.tsx

@@ -1,37 +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 { colors, fonts, spacing } from "@ndla/core";
-import { LearningPathBadge } from "../ContentTypeBadge";
-
-const StyledWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin: 0 -${spacing.normal} ${spacing.medium};
-  background: ${colors.brand.lighter};
-  padding: ${spacing.small} ${spacing.normal};
-`;
-
-const StyledMiniHeader = styled.span`
-  padding-left: ${spacing.xsmall};
-  ${fonts.sizes(16, 1.1)};
-`;
-
-const LearningPathMobileHeader = () => {
-  const { t } = useTranslation();
-  return (
-    <StyledWrapper>
-      <LearningPathBadge size="xx-small" background />
-      <StyledMiniHeader>{t("learningPath.youAreInALearningPath")}</StyledMiniHeader>
-    </StyledWrapper>
-  );
-};
-
-export default LearningPathMobileHeader;

package/src/LearningPaths/LearningPathMobileStepInfo.tsx

@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2019-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 { mq, breakpoints, typography } from "@ndla/core";
-
-const StyledInfo = styled.div`
-  ${typography.smallHeading}
-  white-space: nowrap;
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: none;
-  }
-`;
-
-type Props = {
-  total: number;
-  current: number;
-};
-
-const LearningPathMobileStepInfo = ({ total, current }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledInfo>
-      {t("learningPath.mobileStepInfo", {
-        totalPages: total,
-        currentPage: current,
-      })}
-    </StyledInfo>
-  );
-};
-
-export default LearningPathMobileStepInfo;