@ndla/ui 50.15.3 → 52.0.0

package/src/Navigation/NavigationBox.tsx

@@ -1,252 +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 { MouseEvent } from "react";
-import { useTranslation } from "react-i18next";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { breakpoints, colors, misc, mq, spacing } from "@ndla/core";
-import { Additional, HumanMaleBoard } from "@ndla/icons/common";
-import { SafeLinkButton } from "@ndla/safelink";
-import { Switch } from "@ndla/switch";
-import { Heading } from "@ndla/typography";
-import { uuid } from "@ndla/util";
-
-const StyledWrapper = styled.nav`
-  margin: ${spacing.normal} 0 ${spacing.mediumlarge};
-`;
-
-const StyledHeadingWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-`;
-
-const StyledHeading = styled(Heading)`
-  &[data-inverted="true"] {
-    color: ${colors.white};
-  }
-`;
-
-const StyledList = styled.ul`
-  list-style: none;
-  padding: 0;
-  gap: ${spacing.xxsmall};
-
-  &[data-direction="horizontal"] {
-    display: flex;
-    flex-direction: column;
-    ${mq.range({ from: breakpoints.tablet })} {
-      column-count: 2;
-      gap: 20px;
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-    }
-    ${mq.range({ from: breakpoints.tabletWide })} {
-      column-count: 3;
-      gap: 20px;
-      grid-template-columns: repeat(3, 1fr);
-    }
-  }
-`;
-
-const StyledListItem = styled.li`
-  padding: 0;
-  break-inside: avoid;
-
-  &[data-direction="floating"] {
-    display: inline-block;
-    margin: 0 ${spacing.xsmall} ${spacing.xsmall} 0;
-    ${mq.range({ until: breakpoints.mobileWide })} {
-      display: block;
-    }
-  }
-`;
-
-const StyledButtonContent = styled.span`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-const StyledButtonContentText = styled.span`
-  &[data-additional="true"][data-restricted="true"] {
-    padding-left: ${spacing.medium};
-  }
-  &[data-additional="true"] {
-    padding-left: ${spacing.small};
-  }
-  &[data-restricted="true"] {
-    padding-left: ${spacing.small};
-  }
-`;
-
-const StyledMarksWrapper = styled.span`
-  position: absolute;
-  left: ${spacing.xxsmall};
-  top: ${spacing.xsmall};
-  display: flex;
-  align-items: center;
-  & > * {
-    margin-left: ${spacing.xxsmall};
-  }
-  span:first-of-type {
-    margin-left: 0;
-  }
-`;
-
-const StyledAdditional = styled(Additional)`
-  fill: ${colors.white};
-  width: ${spacing.nsmall};
-  height: ${spacing.nsmall};
-`;
-
-const StyledHumanBoardIconWrapper = styled.span`
-  display: flex;
-`;
-
-const StyledButtonContentSelected = styled.span`
-  width: 10px;
-  height: 10px;
-  border-radius: ${misc.borderRadiusLarge};
-  background: ${colors.white};
-  flex-shrink: 0;
-  margin-left: ${spacing.small};
-`;
-
-const StyledListElementWrapper = styled.div`
-  position: relative;
-  &[data-additional="true"] {
-    & > * {
-      border: 1px dashed ${colors.brand.dark};
-      background-clip: padding-box;
-      :hover,
-      :focus {
-        border: 1px dashed ${colors.brand.dark};
-        background-clip: padding-box;
-        color: ${colors.white};
-      }
-      &[data-color-mode="light"][data-selected="false"] {
-        border: 1px dashed ${colors.brand.tertiary};
-      }
-    }
-  }
-`;
-
-const listElementStyle = css`
-  display: flex;
-  flex: 1;
-  text-align: left;
-`;
-
-export type ItemProps = {
-  url?: string;
-  label: string;
-  id?: string;
-  selected?: boolean;
-  isAdditionalResource?: boolean;
-  isRestrictedResource?: boolean;
-};
-
-type Props = {
-  heading?: string;
-  colorMode?: "primary" | "darker" | "light" | "greyLightest" | "greyLighter";
-  isButtonElements?: boolean;
-  items?: ItemProps[];
-  onClick?: (event: MouseEvent<HTMLElement>, id?: string) => void;
-  hasAdditionalResources?: boolean;
-  showAdditionalResources?: boolean;
-  listDirection?: "horizontal" | "floating";
-  invertedStyle?: boolean;
-  onToggleAdditionalResources?: (checked: boolean) => void;
-};
-
-export const NavigationBox = ({
-  heading,
-  colorMode = "primary",
-  items,
-  isButtonElements,
-  onClick,
-  hasAdditionalResources,
-  showAdditionalResources = false,
-  listDirection = "horizontal",
-  invertedStyle,
-  onToggleAdditionalResources = () => {},
-}: Props) => {
-  const { t } = useTranslation();
-  const ListElementType = isButtonElements ? ButtonV2 : SafeLinkButton;
-  return (
-    <StyledWrapper>
-      <StyledHeadingWrapper>
-        {heading && (
-          <StyledHeading element="h2" margin="small" headingStyle="list-title" data-inverted={invertedStyle}>
-            {heading}
-          </StyledHeading>
-        )}
-        {hasAdditionalResources && (
-          <Switch
-            id={uuid()}
-            checked={showAdditionalResources}
-            label={t("navigation.additionalTopics")}
-            onChange={onToggleAdditionalResources}
-            css={invertedStyle ? { color: "#fff" } : {}}
-          />
-        )}
-      </StyledHeadingWrapper>
-      <StyledList data-testid="nav-box-list" data-direction={listDirection}>
-        {items?.map((item: ItemProps) => (
-          <StyledListItem key={item.label} data-direction={listDirection} data-testid="nav-box-item">
-            <StyledListElementWrapper
-              data-additional={item.isAdditionalResource}
-              data-color-mode={colorMode}
-              data-selected={item.selected}
-            >
-              <ListElementType
-                to={item.url ?? ""}
-                colorTheme={item.selected ? "darker" : colorMode}
-                size="medium"
-                shape="sharp"
-                css={listElementStyle}
-                onClick={(e: MouseEvent<HTMLElement>) => {
-                  if (onClick) {
-                    onClick(e, item.id);
-                  }
-                }}
-              >
-                <StyledButtonContent>
-                  <StyledButtonContentText
-                    data-additional={item.isAdditionalResource}
-                    data-restricted={item.isRestrictedResource}
-                    data-color-mode={colorMode}
-                  >
-                    <StyledMarksWrapper>
-                      {item.isAdditionalResource && (
-                        <StyledAdditional aria-label={t("resource.additionalTooltip")} aria-hidden={false} />
-                      )}
-                      {item.isRestrictedResource && (
-                        <StyledHumanBoardIconWrapper>
-                          <HumanMaleBoard />
-                        </StyledHumanBoardIconWrapper>
-                      )}
-                    </StyledMarksWrapper>
-                    {item.label}
-                  </StyledButtonContentText>
-                  {item.selected && <StyledButtonContentSelected />}
-                </StyledButtonContent>
-              </ListElementType>
-            </StyledListElementWrapper>
-          </StyledListItem>
-        ))}
-      </StyledList>
-    </StyledWrapper>
-  );
-};
-
-export default NavigationBox;

package/src/Navigation/index.ts

@@ -1,11 +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 NavigationBox from "./NavigationBox";
-
-export { NavigationBox };

package/src/NoContentBox/NoContentBox.tsx

@@ -1,32 +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 { ButtonV2 } from "@ndla/button";
-
-interface Props {
-  onClick?: () => void;
-  buttonText?: string;
-  text: string;
-}
-
-export const NoContentBox = ({ buttonText, text, onClick }: Props) => (
-  <div>
-    <span>
-      <div>
-        <p>{text}</p>
-        {onClick && (
-          <ButtonV2 variant="outline" onClick={onClick}>
-            {buttonText}
-          </ButtonV2>
-        )}
-      </div>
-    </span>
-  </div>
-);
-
-export default NoContentBox;

package/src/NoContentBox/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 NoContentBox from "./NoContentBox";
-
-export default NoContentBox;

package/src/Programme/Programme.tsx

@@ -1,101 +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 { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { breakpoints, mq, spacing } from "@ndla/core";
-import { Heading } from "@ndla/typography";
-import ProgrammeSubjects, { GradesProps } from "./ProgrammeSubjects";
-import LayoutItem, { OneColumn } from "../Layout";
-import MessageBox from "../Messages/MessageBox";
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-type StyledBackgroundProps = {
-  image?: string;
-};
-const StyledBackground = styled.div<StyledBackgroundProps>`
-  height: 160px;
-  max-width: 1105px;
-  width: 100%;
-  margin: 0 auto;
-  ${(props: StyledBackgroundProps) =>
-    props.image &&
-    `
-    background-image: url(${props.image});
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 400px;
-    
-    ${mq.range({ until: breakpoints.tablet })} {
-      height: 160px;
-      margin: ${spacing.normal} ${spacing.normal} 0;
-      width: calc(100% - ${spacing.large});
-    }
-    ${mq.range({ until: breakpoints.mobileWide })} {
-      height: 128px;
-      margin: 20px 20px 0;
-      width: calc(100% - 40px);
-    }
-  `}
-`;
-
-const StyledLayoutWrapper = styled.div`
-  background: #fff;
-  margin-top: -170px;
-  ${mq.range({ until: breakpoints.tablet })} {
-    margin-top: 0;
-  }
-`;
-
-const StyledContentWrapper = styled.div`
-  padding-top: 1px;
-`;
-
-const SubjectsWrapper = styled.div`
-  margin-top: 28px;
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-top: 40px;
-  }
-`;
-
-type Props = GradesProps & {
-  heading?: string;
-  image?: string;
-  messageBoxText?: string;
-  headingId?: string;
-};
-
-export const Programme = ({ heading, image, grades, selectedGrade, messageBoxText, headingId }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledWrapper>
-      <StyledBackground image={image} />
-      <OneColumn>
-        <StyledLayoutWrapper>
-          <LayoutItem layout="extend">
-            <StyledContentWrapper>
-              <Heading element="h1" margin="xlarge" headingStyle="h1" serif id={headingId} tabIndex={-1}>
-                {heading}
-              </Heading>
-              {messageBoxText && <MessageBox>{t(messageBoxText)}</MessageBox>}
-              <SubjectsWrapper>
-                <ProgrammeSubjects grades={grades} selectedGrade={selectedGrade} />
-              </SubjectsWrapper>
-            </StyledContentWrapper>
-          </LayoutItem>
-        </StyledLayoutWrapper>
-      </OneColumn>
-    </StyledWrapper>
-  );
-};
-
-export default Programme;

package/src/Programme/ProgrammeSubjects.tsx

@@ -1,83 +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 { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
-import { SafeLinkButton } from "@ndla/safelink";
-import { MessageBox } from "../Messages";
-import { NavigationBox } from "../Navigation";
-
-const GradesMenu = styled.ul`
-  display: flex;
-  gap: ${spacing.small};
-  padding-left: 0;
-  margin-bottom: ${spacing.normal};
-  li {
-    list-style: none;
-    padding: 0;
-  }
-`;
-
-export type GradesProps = {
-  selectedGrade?: string;
-  grades?: {
-    missingProgrammeSubjects?: boolean;
-    name: string;
-    categories?: {
-      name: string;
-      subjects?: {
-        label: string;
-        url: string;
-      }[];
-    }[];
-  }[];
-};
-
-type Props = GradesProps & {
-  onNavigate?: () => void;
-};
-
-const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = "vg1" }: Props) => {
-  const { t } = useTranslation();
-
-  const grade = useMemo(
-    () => grades?.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades?.[0],
-    [grades, selectedGrade],
-  );
-
-  return (
-    <>
-      <GradesMenu aria-label={t("programmes.grades")}>
-        {grades?.map((item) => {
-          const current = item.name.toLowerCase() === selectedGrade;
-          return (
-            <li key={item.name}>
-              <SafeLinkButton
-                to={current ? "" : item.name.toLowerCase()}
-                colorTheme={item !== grade ? "lighter" : undefined}
-                shape="pill"
-                size="normal"
-                aria-current={current}
-              >
-                {item.name}
-              </SafeLinkButton>
-            </li>
-          );
-        })}
-      </GradesMenu>
-      {grade?.missingProgrammeSubjects && <MessageBox>{t("messageBoxInfo.noContent")}</MessageBox>}
-      {grade?.categories?.map((category) => (
-        <NavigationBox key={category.name} heading={category.name} items={category.subjects} onClick={onNavigate} />
-      ))}
-    </>
-  );
-};
-
-export default ProgrammeSubjects;

package/src/Programme/index.ts

@@ -1,13 +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 Programme from "./Programme";
-import ProgrammeSubjects from "./ProgrammeSubjects";
-
-export { ProgrammeSubjects };
-export default Programme;

package/src/ResourceGroup/ResourceGroup.tsx

@@ -1,65 +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 { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { colors, fonts, spacing } from "@ndla/core";
-
-import { HeadingLevel } from "@ndla/typography";
-import ResourceList, { ResourceListProps } from "./ResourceList";
-
-const Wrapper = styled.nav`
-  margin-bottom: ${spacing.large};
-`;
-
-const headingStyle = css`
-  ${fonts.sizes("16px", "18px")};
-  font-weight: ${fonts.weight.bold};
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin: ${spacing.small} 0 ${spacing.xsmall};
-`;
-
-const invertedStyle = css`
-  color: ${colors.white};
-`;
-
-type Props = {
-  invertedStyle?: boolean;
-  toggleAdditionalResources: () => void;
-  heartButton?: (path: string) => ReactNode;
-  headingLevel?: HeadingLevel;
-};
-
-const ResourceGroup = ({
-  title,
-  resources,
-  showAdditionalResources,
-  toggleAdditionalResources,
-  contentType,
-  invertedStyle: invertedStyleProp,
-  headingLevel: Heading = "h1",
-  heartButton,
-}: Props & ResourceListProps) => (
-  <Wrapper aria-label={title}>
-    {title && <Heading css={[headingStyle, invertedStyleProp ? invertedStyle : undefined]}>{title}</Heading>}
-    {resources.length > 0 ? (
-      <ResourceList
-        title={title}
-        onClick={toggleAdditionalResources}
-        showAdditionalResources={showAdditionalResources}
-        contentType={contentType}
-        resources={resources}
-        heartButton={heartButton}
-      />
-    ) : null}
-  </Wrapper>
-);
-
-export default ResourceGroup;

package/src/ResourceGroup/ResourceItem.stories.tsx

@@ -1,101 +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, StoryObj } from "@storybook/react";
-import { FavoriteButton } from "@ndla/button";
-import ResourceItem from "./ResourceItem";
-
-export default {
-  title: "Components/ResourceItem",
-  tags: ["autodocs"],
-  component: ResourceItem,
-  parameters: {
-    inlineStories: true,
-  },
-  args: {
-    id: "urn:resource:a7a49c0a-32ea-4343-8b11-bd6d65c24f87",
-    name: "Refleksjonsoppgave om ideer og idéutvikling",
-    path: "",
-    contentType: "subject-material",
-    additional: false,
-    heartButton: () => <FavoriteButton />,
-    access: undefined,
-  },
-} as Meta<typeof ResourceItem>;
-
-export const Default: StoryObj<typeof ResourceItem> = {};
-
-export const WithCoreOrAdditionalIndicator: StoryObj<typeof ResourceItem> = {
-  args: {
-    contentTypeName: "Fagstoff",
-    contentTypeDescription: "Kjernestoff",
-    showAdditionalResources: true,
-  },
-};
-
-export const WithCoreOrAdditionalIndicatorAdditional: StoryObj<typeof ResourceItem> = {
-  args: {
-    additional: true,
-    contentTypeName: "Fagstoff",
-    contentTypeDescription: "Tilleggsstoff",
-    showAdditionalResources: true,
-  },
-};
-
-export const RelevanceIndicatorWithoutLabel: StoryObj<typeof ResourceItem> = {
-  args: {
-    contentTypeDescription: "Kjernestoff",
-    showAdditionalResources: true,
-  },
-};
-
-export const OnlyAvailableForTeachers: StoryObj<typeof ResourceItem> = {
-  args: {
-    access: "teacher",
-  },
-};
-
-export const CurrentPage: StoryObj<typeof ResourceItem> = {
-  args: { active: true },
-};
-
-export const SubjectMaterial: StoryObj<typeof ResourceItem> = {
-  args: {
-    contentType: "subject-material",
-  },
-};
-
-export const TasksAndActivities: StoryObj<typeof ResourceItem> = {
-  args: {
-    contentType: "tasks-and-activities",
-  },
-};
-
-export const AssessmentResource: StoryObj<typeof ResourceItem> = {
-  args: {
-    contentType: "assessment-resources",
-  },
-};
-
-export const Concept: StoryObj<typeof ResourceItem> = {
-  args: {
-    contentType: "concept",
-  },
-};
-
-export const SourceMaterial: StoryObj<typeof ResourceItem> = {
-  args: {
-    contentType: "source-material",
-  },
-};
-
-export const LearningPath: StoryObj<typeof ResourceItem> = {
-  args: {
-    contentType: "learning-path",
-  },
-};