@ndla/ui 51.0.0 → 53.0.0

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -1,231 +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 { Fragment } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors, fonts, mq, breakpoints } from "@ndla/core";
-import { SafeLink } from "@ndla/safelink";
-import { Tabs } from "@ndla/tabs";
-import ContentLoader from "../ContentLoader";
-import { ToggleItem } from "../Filter";
-import { MessageBox } from "../Messages";
-
-const StyledWrapper = styled.nav`
-  margin: 32px 0 0;
-`;
-
-const StyledList = styled.ul`
-  list-style: none;
-  margin: 40px 0 0;
-  padding: 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    column-count: 2;
-    gap: 20px;
-  }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    column-count: 3;
-    gap: 20px;
-  }
-`;
-const StyledListItem = styled.li`
-  padding: 0;
-  break-inside: avoid;
-`;
-
-const StyledLetterItem = styled.span<{ subjectViewType?: string }>`
-  display: block;
-  ${fonts.sizes(30, 1)};
-  font-weight: ${fonts.weight.bold};
-  color: ${colors.brand.primary};
-  margin-bottom: 8px;
-  ${(props) => props.subjectViewType === "checkbox" && `margin-left:37px;`}
-`;
-
-const StyledSpacingElement = styled.span`
-  display: block;
-  width: 100%;
-  height: 10px;
-`;
-
-const StyledLetterSpacing = styled.span`
-  display: block;
-  height: 16px;
-`;
-
-const MessageBoxWrapper = styled.div`
-  padding-top: 20px;
-`;
-
-type subjectProps = {
-  name: string;
-  path?: string;
-  id?: string;
-};
-type categoryProps = {
-  type?: string;
-  visible?: boolean;
-  message?: string;
-  subjects: subjectProps[];
-};
-
-export type subjectsProps = {
-  categories: categoryProps[];
-  subjectViewType?: "link" | "checkbox";
-  onToggleSubject?: (id: string) => void;
-  onNavigate?: () => void;
-  selectedSubjects?: string[];
-};
-
-type letterCategories = {
-  letter: string;
-  items: subjectProps[];
-};
-
-const sortAlphabetically = (subjects: subjectProps[], locale: string = "nb") => {
-  const subjectsSorted = subjects.sort((a, b) => a.name.localeCompare(b.name, locale));
-  const subjectsLetterCategories: letterCategories[] = [];
-  let previousLetter = "";
-  let letterItems: subjectProps[] = [];
-  subjectsSorted.forEach((subject: subjectProps) => {
-    const currentLetter = subject.name.substr(0, 1);
-    const isNewLetter = currentLetter.localeCompare(previousLetter, locale) === 1;
-    if (isNewLetter && letterItems.length) {
-      subjectsLetterCategories.push({
-        letter: previousLetter,
-        items: letterItems,
-      });
-      letterItems = [];
-    }
-    previousLetter = currentLetter;
-    letterItems.push(subject);
-  });
-  // Add last letter
-  if (previousLetter && letterItems.length) {
-    subjectsLetterCategories.push({
-      letter: previousLetter,
-      items: letterItems,
-    });
-  }
-  return subjectsLetterCategories;
-};
-
-const renderList = (
-  subjects: subjectProps[],
-  onNavigate?: () => void,
-  onToggleSubject?: subjectsProps["onToggleSubject"],
-  subjectViewType?: subjectsProps["subjectViewType"],
-  selectedSubjects: subjectsProps["selectedSubjects"] = [],
-) => (
-  <StyledList>
-    {sortAlphabetically(subjects).map((letter: any) => {
-      return (
-        <Fragment key={letter.letter}>
-          {letter.items.map((subject: subjectProps, index: number) => (
-            <Fragment key={subject.name}>
-              <StyledListItem>
-                {index === 0 && <StyledLetterItem subjectViewType={subjectViewType}>{letter.letter}</StyledLetterItem>}
-                {subjectViewType === "checkbox" && subject.id ? (
-                  <ToggleItem
-                    id={subject.id}
-                    value={subject.id}
-                    checked={selectedSubjects.includes(subject.id)}
-                    label={subject.name}
-                    component="div"
-                    onChange={() => {
-                      if (onToggleSubject && subject.id) {
-                        onToggleSubject(subject.id);
-                      }
-                    }}
-                  />
-                ) : (
-                  <>
-                    <SafeLink
-                      onClick={() => {
-                        if (onNavigate) {
-                          onNavigate();
-                        }
-                      }}
-                      to={subject.path || ""}
-                    >
-                      {subject.name}
-                    </SafeLink>
-                    <StyledSpacingElement />
-                  </>
-                )}
-                {letter.items.length - 1 === index && <StyledLetterSpacing />}
-              </StyledListItem>
-            </Fragment>
-          ))}
-        </Fragment>
-      );
-    })}
-  </StyledList>
-);
-
-const FrontpageAllSubjects = ({
-  categories,
-  onNavigate,
-  onToggleSubject,
-  subjectViewType,
-  selectedSubjects,
-}: subjectsProps) => {
-  const allSubjects: subjectProps[] = [];
-  const data: any = [];
-  const { t } = useTranslation();
-
-  if (categories.flatMap((c) => c.subjects).length === 0) {
-    return (
-      <StyledWrapper>
-        <ContentLoader width={880} height={270}>
-          <rect x="0" y="10" rx="3" ry="3" width="90" height="35" key="rect-1-1" />
-          <rect x="110" y="10" rx="3" ry="3" width="90" height="35" key="rect-1-2" />
-          <rect x="220" y="10" rx="3" ry="3" width="90" height="35" key="rect-1-3" />
-          <rect x="330" y="10" rx="3" ry="3" width="90" height="35" key="rect-1-4" />
-
-          <rect x="0" y="70" rx="3" ry="3" width="280" height="200" key="rect-2-1" />
-          <rect x="300" y="70" rx="3" ry="3" width="280" height="200" key="rect-2-2" />
-          <rect x="600" y="70" rx="3" ry="3" width="280" height="200" key="rect-2-3" />
-        </ContentLoader>
-      </StyledWrapper>
-    );
-  }
-
-  categories.forEach((category: categoryProps) => {
-    allSubjects.push(...category.subjects);
-    category.visible &&
-      data.push({
-        title: t(`subjectCategories.${category.type}`),
-        id: category.type,
-        content: (
-          <>
-            {category.message && (
-              <MessageBoxWrapper>
-                <MessageBox>{category.message}</MessageBox>
-              </MessageBoxWrapper>
-            )}
-            {renderList(category.subjects, onNavigate, onToggleSubject, subjectViewType, selectedSubjects)}
-          </>
-        ),
-      });
-  });
-
-  data.push({
-    title: t("frontpageMenu.allsubjects"),
-    id: "allsubjects",
-    content: renderList(allSubjects, onNavigate, onToggleSubject, subjectViewType, selectedSubjects),
-  });
-
-  return (
-    <StyledWrapper>
-      <Tabs tabs={data} />
-    </StyledWrapper>
-  );
-};
-
-export default FrontpageAllSubjects;

package/src/LearningPaths/LearningPathContent.tsx

@@ -1,33 +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 styled from "@emotion/styled";
-import { mq, breakpoints, colors, spacing, spacingUnit } from "@ndla/core";
-
-const StyledContent = styled.div`
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: flex;
-    border-top: 1px solid ${colors.brand.greyLight};
-    margin-top: ${spacing.small};
-    padding-top: ${spacingUnit * 0.75}px;
-  }
-  .c-article {
-    margin-top: 0;
-  }
-
-  > div:last-child {
-    width: 100%;
-  }
-`;
-
-interface Props {
-  children: ReactNode;
-}
-
-export const LearningPathContent = ({ children }: Props) => <StyledContent>{children}</StyledContent>;

package/src/LearningPaths/LearningPathInformation.tsx

@@ -1,82 +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 styled from "@emotion/styled";
-import { spacing, spacingUnit, breakpoints, mq, colors } from "@ndla/core";
-import { getLicenseByAbbreviation } from "@ndla/licenses";
-import { LicenseByline } from "@ndla/notion";
-import { Heading } from "@ndla/typography";
-import LicenseLink from "../LicenseByline/LicenseLink";
-
-type StyledWrapperProps = {
-  invertedStyle?: boolean;
-};
-
-const StyledWrapper = styled.div<StyledWrapperProps>`
-  background: transparent;
-  max-width: 720px;
-  margin: ${spacingUnit * 0.75}px ${spacing.normal} ${spacing.xsmall} 0 !important;
-  ul {
-    padding-left: ${spacing.normal};
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    margin: ${spacingUnit * 0.75}px ${spacing.normal} ${spacing.xsmall} 0 !important;
-    padding: ${spacing.normal} ${spacing.large} ${spacing.large} ${spacing.xxlarge};
-    ul {
-      margin-left: ${spacing.normal};
-    }
-  }
-  ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
-    margin: 0;
-    padding: ${spacing.small} ${spacing.normal};
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${(props) =>
-      props.invertedStyle &&
-      `
-      color: #fff;
-    `}
-  }
-`;
-
-const LicenseWrapper = styled.div`
-  ul {
-    padding-left: 0;
-  }
-`;
-
-const StyledHeader = styled(Heading)`
-  margin-bottom: ${spacing.small};
-`;
-
-interface Props {
-  description?: string;
-  title: string;
-  invertedStyle?: boolean;
-  id?: string;
-  license?: {
-    license: string;
-  };
-}
-
-export const LearningPathInformation = ({ description, title, license, invertedStyle, id }: Props) => {
-  const fullLicense = getLicenseByAbbreviation(license?.license || "", "nb");
-  return (
-    <section className="o-wrapper">
-      <StyledWrapper invertedStyle={invertedStyle} className="c-article">
-        <LicenseWrapper>
-          <StyledHeader element="h1" headingStyle="h1" tabIndex={-1} id={id}>
-            {title}
-          </StyledHeader>
-          <LicenseLink license={fullLicense} />
-        </LicenseWrapper>
-        {description && <div dangerouslySetInnerHTML={{ __html: description }} />}
-      </StyledWrapper>
-    </section>
-  );
-};

package/src/LearningPaths/LearningPathLastStepNavigation.tsx

@@ -1,89 +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 { fonts, spacing } from "@ndla/core";
-import { SafeLink } from "@ndla/safelink";
-import { OneColumn, LayoutItem } from "../index";
-
-const TextWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.normal};
-  padding-bottom: ${spacing.medium};
-  h1 {
-    margin-bottom: 0px;
-  }
-`;
-
-const StyledSmallText = styled.small`
-  ${fonts.sizes(20, 1.3)};
-  font-weight: ${fonts.weight.semibold};
-`;
-
-const StyledLinkWrapper = styled.div`
-  margin: ${spacing.xsmall} 0;
-  a {
-    margin-left: ${spacing.xsmall};
-  }
-`;
-
-const OneColumnCss = css`
-  background: #fff;
-  padding-top: ${spacing.xlarge};
-  margin-top: -${spacing.normal};
-`;
-
-interface Props {
-  children: ReactNode;
-  subject?: {
-    name: string;
-    url: string;
-  };
-  topic?: {
-    name: string;
-    url: string;
-  };
-  learningPathName: string;
-}
-
-const LearningPathLastStepNavigation = ({ subject, topic, learningPathName, children }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <OneColumn css={OneColumnCss}>
-      <LayoutItem layout="center">
-        <TextWrapper>
-          <h1>{t("learningPath.lastStep.heading")}</h1>
-          <StyledSmallText>
-            {t("learningPath.lastStep.headingSmall", {
-              learningPathName,
-            })}
-          </StyledSmallText>
-        </TextWrapper>
-        {subject && (
-          <StyledLinkWrapper>
-            {t("learningPath.lastStep.subjectHeading")}
-            <SafeLink to={subject.url}>{subject.name}</SafeLink>
-          </StyledLinkWrapper>
-        )}
-        {topic && (
-          <StyledLinkWrapper>
-            {t("learningPath.lastStep.topicHeading")}
-            <SafeLink to={topic.url}>{topic.name}</SafeLink>
-          </StyledLinkWrapper>
-        )}
-        {children}
-      </LayoutItem>
-    </OneColumn>
-  );
-};
-
-export default LearningPathLastStepNavigation;

package/src/LearningPaths/LearningPathMenu.stories.tsx

@@ -1,65 +0,0 @@
-/**
- * Copyright (c) 2023-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 { Meta, StoryFn } from "@storybook/react";
-import LearningPathMenu from "./LearningPathMenu";
-import { contentTypes } from "../model/ContentType";
-const args = {
-  name: "Læringssti",
-  LearningPathId: 1,
-  lastUpdated: "2023-06-01",
-  copyright: {
-    contributors: [
-      {
-        type: "originator",
-        name: "NDLA",
-      },
-    ],
-    license: {
-      license: "CC-BY-SA-4.0",
-    },
-  },
-  learningPathUrl: "https://stier.ndla.no",
-  currentIndex: 1,
-  cookies: {},
-  learningsteps: [
-    {
-      id: 1,
-      title: "Introduksjon",
-      type: contentTypes.LEARNING_PATH,
-    },
-    {
-      id: 2,
-      title: "Steg 1",
-      type: contentTypes.SUBJECT_MATERIAL,
-    },
-    {
-      id: 3,
-      title: "Steg 2",
-      type: contentTypes.TASKS_AND_ACTIVITIES,
-    },
-  ],
-  toLearningPathUrl: (pathId: number, stepId: number) => "",
-};
-
-export default {
-  title: "Patterns/Learning path menu",
-  component: LearningPathMenu,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-  args: args,
-} as Meta<typeof LearningPathMenu>;
-
-export const LearningPathMenuStory: StoryFn<typeof LearningPathMenu> = ({ ...args }) => {
-  return <LearningPathMenu {...args} />;
-};
-
-LearningPathMenuStory.args = args;
-LearningPathMenuStory.storyName = "Learning path menu";

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;