@ndla/ui 51.0.0 → 52.0.0

package/src/Filter/ToggleItem.tsx

@@ -1,180 +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 { ChangeEvent, ElementType } from "react";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
-
-interface Props {
-  id: string;
-  label: string;
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  checked?: boolean;
-  disabled?: boolean;
-  tabIndex?: number;
-  value?: string;
-  component?: ElementType;
-  hits?: number;
-}
-
-const StyledText = styled.span`
-  flex-grow: 1;
-  z-index: ${stackOrder.offsetDouble};
-`;
-
-const StyledInput = styled.input`
-  position: absolute;
-  opacity: 0;
-  z-index: ${stackOrder.trigger};
-  cursor: pointer;
-
-  &:checked {
-    & + label [data-checkbox] {
-      border: 2px solid ${colors.brand.primary};
-      background: ${colors.brand.primary};
-      ::before {
-        background: white;
-        width: 5px;
-      }
-      ::after {
-        background: white;
-        width: 10px;
-      }
-    }
-  }
-`;
-
-const StyledItemCheckbox = styled.span`
-  content: "";
-  display: inline-block;
-  position: relative;
-  width: ${spacing.normal};
-  height: ${spacing.normal};
-  padding: 0;
-  background: ${colors.white};
-  border: 2px solid ${colors.brand.tertiary};
-  margin: 2px ${spacing.small} 2px 3px;
-  border-radius: 2px;
-  flex-shrink: 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    width: 20px;
-    height: 20px;
-    margin: 4px ${spacing.small} 4px 3px;
-  }
-  &::before {
-    content: "";
-    width: 0px;
-    height: 2px;
-    border-radius: 2px;
-    background: ${colors.brand.tertiary};
-    position: absolute;
-    transform: rotate(45deg);
-    top: 10px;
-    left: 7px;
-    ${mq.range({ from: breakpoints.tablet })} {
-      top: 8px;
-      left: 5px;
-    }
-    transition: width 50ms ease 50ms;
-    transform-origin: 0% 0%;
-  }
-
-  &::after {
-    content: "";
-    width: 0;
-    height: 2px;
-    border-radius: 2px;
-    background: ${colors.brand.tertiary};
-    position: absolute;
-    transform: rotate(305deg);
-    top: 13px;
-    left: 8px;
-
-    ${mq.range({ from: breakpoints.tablet })} {
-      top: 11px;
-      left: 6px;
-    }
-    transition: width 50ms ease;
-    transform-origin: 0% 0%;
-  }
-`;
-
-const toggleItemCss = css`
-  display: inline-block;
-  position: relative;
-  margin: 0 ${spacing.small} 0 2px;
-  color: ${colors.brand.primary};
-  border-radius: ${misc.borderRadius};
-  transition: all 0.2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
-  cursor: pointer;
-  ${fonts.sizes("16px", "18px")};
-
-  &:hover {
-    [data-checkbox] {
-      border: 2px solid ${colors.brand.tertiary};
-    }
-    [data-checkbox]::before {
-      width: 5px;
-      transition: width 100ms ease;
-    }
-
-    [data-checkbox]::after {
-      width: 10px;
-      transition: width 150ms ease 100ms;
-    }
-  }
-  label {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    ${mq.range({ until: breakpoints.tabletWide })} {
-      width: 100%;
-    }
-    ${mq.range({ until: breakpoints.mobileWide })} {
-      width: 100%;
-      padding: $spacing--xsmall 0;
-      justify-content: space-between;
-      min-height: 52px;
-      align-items: center;
-    }
-  }
-`;
-
-const ToggleItem = ({
-  id,
-  checked = false,
-  label,
-  component: Component = "li",
-  onChange,
-  tabIndex,
-  value,
-  disabled,
-  hits,
-}: Props) => (
-  <Component css={toggleItemCss}>
-    <StyledInput
-      type="checkbox"
-      id={id}
-      value={value}
-      disabled={disabled}
-      tabIndex={tabIndex}
-      checked={checked}
-      onChange={onChange}
-    />
-    <label htmlFor={id}>
-      <StyledItemCheckbox data-checkbox="" />
-      <StyledText>
-        {label}
-        {hits !== undefined && ` (${hits})`}
-      </StyledText>
-    </label>
-  </Component>
-);
-
-export default ToggleItem;

package/src/Filter/index.ts

@@ -1,10 +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.
- *
- */
-
-export { default as ToggleItem } from "./ToggleItem";
-export { default as FilterButtons } from "./FilterButtons";

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";