@ndla/ui 51.0.0 → 52.0.0

package/lib/Topic/index.d.ts

@@ -1,10 +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 Topic, { TopicProps } from "./Topic";
-export type { TopicProps };
-export default Topic;

package/lib/Topic/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Topic = _interopRequireDefault(require("./Topic"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 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.
- *
- */
-var _default = exports.default = _Topic.default;

package/lib/locale/LocaleProvider.d.ts

@@ -1,15 +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 { ReactNode } from "react";
-import { Locale } from "../types";
-type Props = {
-    locale: Locale;
-    children: ReactNode;
-};
-declare const LocaleProvider: ({ locale, children }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default LocaleProvider;

package/lib/locale/LocaleProvider.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactI18next = require("react-i18next");
-var _i18n = require("../i18n");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/**
- * 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.
- *
- */
-
-const InitI18nWrapper = _ref => {
-  let {
-    locale,
-    children
-  } = _ref;
-  const {
-    i18n
-  } = (0, _reactI18next.useTranslation)();
-  i18n.language = locale;
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: children
-  });
-};
-const LocaleProvider = _ref2 => {
-  let {
-    locale,
-    children
-  } = _ref2;
-  return (0, _jsxRuntime.jsx)(_reactI18next.I18nextProvider, {
-    i18n: _i18n.i18nInstance,
-    children: (0, _jsxRuntime.jsx)(InitI18nWrapper, {
-      locale: locale,
-      children: children
-    })
-  });
-};
-var _default = exports.default = LocaleProvider;

package/src/Article/ArticleAccessMessage.tsx

@@ -1,44 +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 * as React from "react";
-import styled from "@emotion/styled";
-import { colors, fonts } from "@ndla/core";
-import { HumanMaleBoard } from "@ndla/icons/common";
-
-const StyledMessage = styled.span`
-  position: absolute;
-  top: -50px;
-  color: ${colors.text.light};
-  ${fonts.sizes("14px", "18px")};
-  font-family: ${fonts.sans};
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-`;
-const IconWrapper = styled.span`
-  margin-right: 0.5rem;
-`;
-
-type Props = {
-  message: string;
-};
-
-const ArticleAccessMessage = ({ message }: Props) => (
-  <>
-    <StyledMessage>
-      <IconWrapper>
-        <HumanMaleBoard />
-      </IconWrapper>
-      {message}
-    </StyledMessage>
-  </>
-);
-
-export default ArticleAccessMessage;

package/src/Aside/Aside.tsx

@@ -1,113 +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.
- *
- */
-
-import { ComponentProps, useMemo } from "react";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
-
-interface Props extends ComponentProps<"aside"> {
-  narrowScreen?: boolean;
-  wideScreen?: boolean;
-  alwaysShow?: boolean;
-}
-
-const StyledAside = styled.aside`
-  position: relative;
-  margin: ${spacing.large} 0px;
-  ${mq.range({ from: breakpoints.tablet })} {
-    max-width: 350px;
-    float: right;
-    clear: right;
-    width: 50%;
-    left: auto !important;
-    padding: 0;
-    padding-left: ${spacing.small};
-    ${mq.range({ from: breakpoints.desktop })} {
-      width: 75%;
-    }
-  }
-
-  border-left: 4px solid ${colors.background.dark};
-`;
-
-const wideScreenStyle = css`
-  display: none;
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: block;
-  }
-`;
-
-const narrowScreenStyle = css`
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: none;
-  }
-`;
-
-const alwaysShowStyle = css`
-  display: block !important;
-`;
-
-const StyledAsideContent = styled.div`
-  color: ${colors.brand.greyDark};
-  padding: ${spacing.normal};
-
-  & > *:first-child {
-    margin-top: 0;
-  }
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-
-  h2,
-  h3,
-  h4,
-  h5 {
-    ${fonts.size.text.metaText.small};
-    margin-top: ${spacing.normal};
-    margin-bottom: ${spacing.small};
-  }
-
-  & > ul:not([class]),
-  :not(li) > ul:not([class]) {
-    ${mq.range({ from: breakpoints.desktop })} {
-      margin-left: ${spacing.normal};
-    }
-  }
-
-  & > ol:not([class]),
-  :not(li) > ol:not([class]) {
-    ${mq.range({ from: breakpoints.desktop })} {
-      margin-left: ${spacing.large};
-    }
-  }
-`;
-
-const Aside = ({ children, narrowScreen = false, wideScreen = false, alwaysShow = false, ...rest }: Props) => {
-  const styling = useMemo(() => {
-    const styles = [];
-    if (narrowScreen) {
-      styles.push(narrowScreenStyle);
-    }
-    if (wideScreen) {
-      styles.push(wideScreenStyle);
-    }
-    if (alwaysShow) {
-      styles.push(alwaysShowStyle);
-    }
-    return styles;
-  }, [alwaysShow, narrowScreen, wideScreen]);
-
-  return (
-    <StyledAside css={styling} {...rest}>
-      <StyledAsideContent>{children}</StyledAsideContent>
-    </StyledAside>
-  );
-};
-
-export default Aside;

package/src/Aside/index.ts

@@ -1,11 +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.
- *
- */
-
-import Aside from "./Aside";
-
-export default Aside;

package/src/BannerCard/BannerCard.tsx

@@ -1,99 +0,0 @@
-/**
- * Copyright (c) 2022-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 { colors, fonts, breakpoints, mq } from "@ndla/core";
-import { SafeLink } from "@ndla/safelink";
-import { Image } from "..";
-
-const BannerWrapper = styled.div`
-  display: flex;
-  align-items: flex-start;
-  flex-direction: row;
-  max-width: 669px;
-  border-radius: 8px;
-  border: 1px solid ${colors.brand.greyLight};
-  font-family: ${fonts.sans};
-  padding: 30px;
-  gap: 30px;
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    flex-direction: column;
-  }
-`;
-
-const ImageWrapper = styled.div`
-  display: flex;
-  flex: 0 0 40%;
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    display: block;
-    text-align: center;
-    width: 100%;
-  }
-`;
-
-const StyledImage = styled(Image)`
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    max-height: 150px;
-  }
-`;
-
-const TextWrapper = styled.div`
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    margin-left: 0;
-    margin-top: 10px;
-  }
-`;
-
-const ContentText = styled.p`
-  font-size: ${fonts.sizes(16)};
-  color: ${colors.text.primary};
-  margin: 0;
-  padding-top: 10px;
-  padding-bottom: 10px;
-`;
-const LinkText = styled(SafeLink)`
-  font-size: ${fonts.sizes(16)};
-  color: ${colors.brand.primary};
-`;
-const TitleText = styled.h2`
-  margin-top: 7px;
-  font-size: ${fonts.sizes(22)};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    margin-top: 0;
-  }
-`;
-
-type ImageProps = {
-  altText: string;
-  imageSrc: string;
-};
-type BannerProps = {
-  link: string;
-  image: ImageProps;
-  title: { title: string; lang?: string };
-  content: { content: string; lang?: string };
-  linkText: { text: string; lang?: string };
-};
-export const BannerCard = ({ link, title, content, linkText, image, ...rest }: BannerProps) => {
-  return (
-    <BannerWrapper {...rest}>
-      <ImageWrapper>
-        <StyledImage alt={image.altText} src={image.imageSrc} />
-      </ImageWrapper>
-      <TextWrapper>
-        <TitleText lang={title.lang}>{title.title}</TitleText>
-        <ContentText lang={content.lang}>{content.content}</ContentText>
-        <LinkText target="_self" to={link} lang={linkText.lang}>
-          {linkText.text}
-        </LinkText>
-      </TextWrapper>
-    </BannerWrapper>
-  );
-};
-
-export default BannerCard;

package/src/BannerCard/index.ts

@@ -1,11 +0,0 @@
-/**
- * Copyright (c) 2022-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 BannerCard from "./BannerCard";
-
-export { BannerCard };

package/src/Breadcrumb/HeaderBreadcrumb.tsx

@@ -1,56 +0,0 @@
-/**
- * Copyright (c) 2022-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 { colors, fonts, spacing } from "@ndla/core";
-import { ChevronRight } from "@ndla/icons/common";
-import { SafeLink } from "@ndla/safelink";
-import Breadcrumb from "./Breadcrumb";
-import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
-
-interface ThemeProps {
-  light: boolean | undefined;
-}
-
-const HeaderBreadcrumbWrapper = styled.div<ThemeProps>`
-  color: ${({ light }) => (light ? colors.white : colors.brand.primary)};
-`;
-
-const StyledHeaderSafeLink = styled(SafeLink)`
-  ${fonts.sizes(14)};
-  font-weight: ${fonts.weight.bold};
-  color: inherit;
-`;
-
-const StyledRightChevron = styled(ChevronRight)`
-  margin: ${spacing.xxsmall};
-  color: inherit;
-`;
-
-interface Props {
-  items: SimpleBreadcrumbItem[];
-  light?: boolean;
-}
-
-const HeaderBreadcrumb = ({ items, light }: Props) => {
-  const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {
-    if (item.index === totalCount - 1) {
-      return null;
-    }
-    return <StyledRightChevron />;
-  };
-
-  return (
-    <HeaderBreadcrumbWrapper light={light}>
-      <StyledHeaderSafeLink to={items[0]?.to}>{items[0]?.name}</StyledHeaderSafeLink>
-      <Breadcrumb items={items.slice(1)} renderSeparator={renderSeparator} autoCollapse collapseFirst />
-    </HeaderBreadcrumbWrapper>
-  );
-};
-
-export default HeaderBreadcrumb;

package/src/CompetenceGoalTab/CompetenceGoalItem.tsx

@@ -1,39 +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 SearchButton from "./SearchButton";
-import { GoalItem, GoalList, GoalText, GoalsHeading, ListItemContent } from "./styles";
-import { CompetenceGoalsItemType } from "../types";
-
-const CompetenceGoalItem = ({ title, goals, isOembed }: CompetenceGoalsItemType) => {
-  const { t } = useTranslation();
-  return (
-    <GoalItem>
-      <GoalsHeading>{title}</GoalsHeading>
-      <GoalList>
-        {goals.map((goal, index) => (
-          <li key={`${goal.text}${index}`}>
-            <ListItemContent>
-              <GoalText>{goal.text}</GoalText>
-              {goal.url && (
-                <SearchButton
-                  url={goal.url}
-                  isOembed={isOembed}
-                  searchText={t("competenceGoals.competenceGoalResourceSearchText", { code: goal.id })}
-                />
-              )}
-            </ListItemContent>
-          </li>
-        ))}
-      </GoalList>
-    </GoalItem>
-  );
-};
-
-export default CompetenceGoalItem;

package/src/CompetenceGoalTab/CompetenceGoalTab.tsx

@@ -1,85 +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 { useState } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { spacing } from "@ndla/core";
-import { BY, CC } from "@ndla/licenses";
-import { LicenseByline } from "@ndla/notion";
-import { SafeLink } from "@ndla/safelink";
-import { Tooltip } from "@ndla/tooltip";
-import CompetenceItem, { ListItemProp } from "./CompetenceItem";
-
-type CompetenceProps = {
-  list: ListItemProp[];
-  isOembed?: boolean;
-};
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  padding-top: ${spacing.small};
-  gap: ${spacing.small};
-  flex-wrap: wrap;
-`;
-
-const LicenseIconsTextWrapper = styled.span`
-  padding-bottom: ${spacing.xxsmall};
-  margin-left: ${spacing.xxsmall};
-`;
-
-const CompetenceGoalTab = ({ list, isOembed }: CompetenceProps) => {
-  const [currentTabItem, setCurrentTab] = useState(list[0]);
-  const { t } = useTranslation();
-
-  return (
-    <>
-      {list.length > 1 && (
-        <ButtonWrapper>
-          {list.map((tabItem, index) => {
-            const { id, title: tabTitle, type } = tabItem;
-            return (
-              <Tooltip
-                tooltip={
-                  type === "coreElement"
-                    ? t("competenceGoals.competenceTabCoreTooltip")
-                    : t("competenceGoals.showCompetenceGoals")
-                }
-                key={`tabitem-${id}`}
-              >
-                <ButtonV2
-                  shape="pill"
-                  aria-current={id === currentTabItem.id}
-                  colorTheme={id !== currentTabItem.id ? "lighter" : undefined}
-                  onClick={() => setCurrentTab(list[index])}
-                >
-                  {tabTitle}
-                </ButtonV2>
-              </Tooltip>
-            );
-          })}
-        </ButtonWrapper>
-      )}
-      <CompetenceItem item={currentTabItem} isOembed={isOembed} />
-      <LicenseByline licenseRights={[CC, BY]}>
-        <LicenseIconsTextWrapper>UDIR</LicenseIconsTextWrapper>
-      </LicenseByline>
-      {`${t("competenceGoals.licenseData")} `}
-      <SafeLink to="https://data.norge.no/nlod/no" target="_blank">
-        NLOD
-      </SafeLink>
-      {`, ${t("competenceGoals.licenseFrom")} `}
-      <SafeLink to="https://data.udir.no/" target="_blank">
-        data.udir.no
-      </SafeLink>
-    </>
-  );
-};
-
-export default CompetenceGoalTab;

package/src/CompetenceGoalTab/CompetenceItem.tsx

@@ -1,130 +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, spacing } from "@ndla/core";
-import { MenuBook } from "@ndla/icons/action";
-import CompetenceGoalItem from "./CompetenceGoalItem";
-import CoreElementItem from "./CoreElementItem";
-import { CompetenceGoalsItemType, CoreElementsItemType } from "../types";
-
-const GroupedElementWrapper = styled.div`
-  margin: ${spacing.normal} 0 ${spacing.large};
-`;
-
-const GroupedGoalsTitleWrapper = styled.div`
-  border-bottom: 1px solid ${colors.brand.neutral7};
-`;
-const GroupedGoalsTitle = styled.h2`
-  display: flex;
-  align-items: center;
-  gap: ${spacing.xsmall};
-  svg {
-    width: ${spacing.normal};
-    height: ${spacing.normal};
-  }
-`;
-
-const GoalsInfo = styled.p`
-  margin: 0;
-`;
-
-const GoalList = styled.ul`
-  padding: 0;
-  list-style-type: none;
-`;
-
-export type CompetenceTypeProps = "competenceGoals" | "coreElement";
-export type CompetenceGoals = {
-  title: string;
-  elements: CompetenceGoalsItemType[];
-};
-export type CoreElementItems = {
-  title?: string;
-  elements: CoreElementsItemType[];
-};
-export type ListItemProp = {
-  id: string;
-  title: string;
-  type: CompetenceTypeProps;
-  groupedCompetenceGoals?: CompetenceGoals[];
-  groupedCoreElementItems?: CoreElementItems[];
-};
-export type ListItemProps = {
-  item: ListItemProp;
-  isOembed?: boolean;
-};
-
-const CompetenceItem = ({ item, isOembed }: ListItemProps) => {
-  const { t } = useTranslation();
-  const { type, groupedCompetenceGoals, groupedCoreElementItems } = item;
-
-  switch (type) {
-    case "competenceGoals":
-      return (
-        <>
-          {groupedCompetenceGoals?.map((group) => (
-            <GroupedElementWrapper key={group.title}>
-              <GroupedGoalsTitleWrapper>
-                <hgroup>
-                  <GroupedGoalsTitle>
-                    <MenuBook />
-                    {group.title}
-                  </GroupedGoalsTitle>
-                  <GoalsInfo>{t("competenceGoals.competenceGoalTitle")}</GoalsInfo>
-                </hgroup>
-              </GroupedGoalsTitleWrapper>
-              {group.elements.length > 0 && (
-                <GoalList>
-                  {group.elements.map((goal) => (
-                    <CompetenceGoalItem
-                      key={goal.id}
-                      id={goal.id}
-                      title={goal.title}
-                      goals={goal.goals}
-                      isOembed={isOembed}
-                    />
-                  ))}
-                </GoalList>
-              )}
-            </GroupedElementWrapper>
-          ))}
-        </>
-      );
-    case "coreElement":
-      return (
-        <>
-          {groupedCoreElementItems?.map((group) => (
-            <GroupedElementWrapper key={group.title}>
-              <GroupedGoalsTitle>
-                <MenuBook />
-                {group.title}
-              </GroupedGoalsTitle>
-              <GoalList>
-                {group.elements.map((coreItem) => (
-                  <CoreElementItem
-                    key={coreItem.id}
-                    id={coreItem.id}
-                    title={coreItem.title}
-                    text={coreItem.text}
-                    url={coreItem.url}
-                    isOembed={isOembed}
-                  />
-                ))}
-              </GoalList>
-            </GroupedElementWrapper>
-          ))}
-        </>
-      );
-    default:
-      return null;
-  }
-};
-
-export default CompetenceItem;