@ndla/ui 51.0.0 → 52.0.0

package/src/LearningPaths/LearningPathMenu.tsx

@@ -1,166 +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, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { colors, spacing, misc, mq, breakpoints } from "@ndla/core";
-import { useWindowSize } from "@ndla/hooks";
-import { ArrowExpandRight, ArrowExpandLeft } from "@ndla/icons/action";
-import { Tooltip } from "@ndla/tooltip";
-import LearningPathMenuAside from "./LearningPathMenuAside";
-import LearningPathMenuContent from "./LearningPathMenuContent";
-import LearningPathMenuIntro from "./LearningPathMenuIntro";
-import LearningPathMenuModalWrapper from "./LearningPathMenuModalWrapper";
-
-const SIDE_NAV_WIDTH = "372px";
-
-type StyledMenuProps = {
-  isOpen?: boolean;
-};
-
-const StyledMenu = styled.div<StyledMenuProps>`
-  width: 100%;
-  ${mq.range({ from: breakpoints.tablet })} {
-    flex-shrink: 0;
-    transition: all 200ms ease;
-    max-width: ${SIDE_NAV_WIDTH};
-    width: ${SIDE_NAV_WIDTH};
-    margin-bottom: ${spacing.large};
-  }
-  ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
-    min-width: ${SIDE_NAV_WIDTH};
-    margin-right: ${spacing.xsmall};
-    ${(props) =>
-      !props.isOpen &&
-      `
-      width: ${spacing.large};
-      min-width: ${spacing.large};
-    `}
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    margin-right: ${spacing.small};
-  }
-`;
-
-const StyledToggleMenubutton = styled.button`
-  background: ${colors.brand.light};
-  color: ${colors.brand.primary};
-  width: ${spacing.medium};
-  height: ${spacing.medium};
-  align-items: center;
-  justify-content: center;
-  border-radius: ${misc.borderRadius};
-  display: none;
-  border: none;
-  ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
-    display: inline-flex;
-    &:hover,
-    &:focus {
-      background: ${colors.brand.primary};
-      color: #fff;
-    }
-  }
-`;
-
-export type StepProps = {
-  title: string;
-  type: string;
-  id: number;
-};
-
-interface Props {
-  heartButton?: ReactNode;
-  learningsteps: StepProps[];
-  name: string;
-  lastUpdated: string;
-  copyright: {
-    contributors: {
-      type: string;
-      name: string;
-    }[];
-    license: {
-      license: string;
-    };
-  };
-  learningPathURL: string;
-  invertedStyle?: boolean;
-  currentIndex: number;
-  cookies: {
-    [key: string]: string;
-  };
-  learningPathId: number;
-  toLearningPathUrl(pathId: number, stepId: number): string;
-}
-
-const LearningPathMenu = ({
-  learningsteps,
-  currentIndex,
-  name,
-  lastUpdated,
-  copyright,
-  learningPathId,
-  toLearningPathUrl,
-  learningPathURL,
-  invertedStyle,
-  cookies,
-  heartButton,
-}: Props) => {
-  const { t } = useTranslation();
-  const [isOpen, toggleOpenState] = useState(false);
-  const { innerWidth } = useWindowSize(100);
-
-  return (
-    <StyledMenu isOpen={isOpen}>
-      <LearningPathMenuModalWrapper innerWidth={innerWidth}>
-        {(closeModal: VoidFunction) => (
-          <>
-            <div
-              css={css`
-                padding-left: ${spacing.small};
-              `}
-            >
-              <Tooltip tooltip={t("learningPath.openMenuTooltip")}>
-                <StyledToggleMenubutton type="button" onClick={() => toggleOpenState(!isOpen)}>
-                  {!isOpen ? <ArrowExpandRight /> : <ArrowExpandLeft />}
-                </StyledToggleMenubutton>
-              </Tooltip>
-            </div>
-            <LearningPathMenuIntro
-              isOpen={isOpen}
-              name={name}
-              invertedStyle={invertedStyle}
-              id={learningPathId}
-              heartButton={heartButton}
-            />
-            <LearningPathMenuContent
-              learningsteps={learningsteps}
-              learningPathId={learningPathId}
-              toLearningPathUrl={toLearningPathUrl}
-              isOpen={isOpen}
-              currentIndex={currentIndex}
-              cookies={cookies}
-              invertedStyle={invertedStyle}
-              onStepNavigate={closeModal}
-            />
-            <LearningPathMenuAside
-              isOpen={isOpen}
-              lastUpdated={lastUpdated}
-              copyright={copyright}
-              learningPathURL={learningPathURL}
-              invertedStyle={invertedStyle}
-            />
-          </>
-        )}
-      </LearningPathMenuModalWrapper>
-    </StyledMenu>
-  );
-};
-
-export default LearningPathMenu;

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;