@ndla/ui 51.0.0 → 53.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/Article/ArticleNotions.tsx

@@ -1,139 +0,0 @@
-/**
- * Copyright (c) 2016-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 styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, stackOrder } from "@ndla/core";
-import { Explanation, NotionFlip } from "@ndla/icons/common";
-import { ModalHeader, ModalCloseButton, ModalBody, Modal, ModalTitle, ModalTrigger, ModalContent } from "@ndla/modal";
-
-const ArticleNotionsContainer = styled.div`
-  margin-bottom: 26px;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-bottom: 0;
-  }
-`;
-
-const NotionsTrigger = styled.div`
-  padding: 0 16px;
-  display: inline-flex;
-  align-items: center;
-  background-color: ${colors.brand.greyLighter};
-  border-radius: 4px;
-  cursor: pointer;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    position: fixed;
-    border: none;
-    padding: 0;
-    height: auto;
-    top: 12rem;
-    right: 18px;
-    background-color: transparent;
-    z-index: ${stackOrder.trigger};
-  }
-
-  svg {
-    &:first-of-type {
-      display: none;
-      width: 40px;
-      height: 54px;
-      cursor: pointer;
-      color: #def1ed;
-
-      ${mq.range({ from: breakpoints.tablet })} {
-        display: block;
-      }
-    }
-    &:nth-of-type(2) {
-      display: block;
-      color: ${colors.brand.primary};
-      margin-right: 8px;
-
-      ${mq.range({ from: breakpoints.tablet })} {
-        display: none;
-      }
-    }
-  }
-
-  span {
-    ${fonts.sizes("16px", "39px")};
-    display: block;
-    font-family: ${fonts.sans};
-    font-weight: ${fonts.weight.semibold};
-    color: ${colors.brand.primary};
-    padding-bottom: 1px;
-
-    ${mq.range({ from: breakpoints.tablet })} {
-      display: none;
-    }
-  }
-`;
-
-const ModalHeadingContainer = styled.div`
-  display: flex;
-  align-items: center;
-
-  svg {
-    display: block;
-    width: 2rem;
-    height: 2rem;
-    color: #638b98;
-    margin: 0 1rem 0 -0.25rem;
-
-    ${mq.range({ from: breakpoints.tablet })} {
-      width: 3rem;
-      height: 3rem;
-      margin: 0 1.5rem 0 -0.5rem;
-    }
-  }
-`;
-
-const StyledModalHeader = styled(ModalHeader)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-type ArticleNotionsProps = {
-  children?: ReactNode;
-  buttonOffsetRight: number;
-};
-
-export const ArticleNotions = ({ buttonOffsetRight, children }: ArticleNotionsProps) => {
-  const { t } = useTranslation();
-  const leftOffset = `${buttonOffsetRight - 32}px`;
-
-  return (
-    <ArticleNotionsContainer>
-      <Modal>
-        <ModalTrigger>
-          <NotionsTrigger role="button" aria-label={t("article.notionsPrompt")} style={{ left: leftOffset }}>
-            <NotionFlip />
-            <Explanation />
-            <span>{t("article.notionsPrompt")}</span>
-          </NotionsTrigger>
-        </ModalTrigger>
-        <ModalContent size="large">
-          <StyledModalHeader>
-            <ModalHeadingContainer>
-              <Explanation />
-              <ModalTitle>{t("article.notionsPrompt")}</ModalTitle>
-            </ModalHeadingContainer>
-            <ModalCloseButton />
-          </StyledModalHeader>
-          <ModalBody modifier="notions-modal-body no-padding">{children}</ModalBody>
-        </ModalContent>
-      </Modal>
-    </ArticleNotionsContainer>
-  );
-};
-
-export default ArticleNotions;

package/src/Article/component.article.scss

@@ -1,156 +0,0 @@
-/**
-** ARTICLE
-** Clean-modifier is used to avoid negative margin (when used in design manual)
-** Title has icon when article is a resource type
-**/
-
-.c-article {
-  font-family: $font-serif;
-  background: $white;
-  margin-top: $spacing--large;
-  margin-right: auto;
-  margin-bottom: $spacing;
-  margin-left: auto;
-  overflow-wrap: break-word;
-  @include font-size(18px, 29px);
-  position: relative;
-
-  mjx-stretchy-v > mjx-ext > mjx-c {
-    transform: scaleY(100) translateY(0.075em);
-  }
-
-  > section > p {
-    &:not([class]) {
-      margin-bottom: 29px;
-    }
-  }
-
-  @include mq(tablet) {
-    @include font-size(18px, 29px);
-
-    > section > p {
-      &:not([class]) {
-        margin-bottom: 35px;
-      }
-    }
-
-    padding: 0 $spacing $spacing;
-    margin-bottom: $spacing--large;
-    margin-top: -$spacing * 6;
-    padding-top: $spacing--large + $spacing;
-    &--subject-material {
-      border: 2px solid $subject-material-light;
-    }
-    &--assessment-resources {
-      border: 2px solid $assessment-resource-background;
-    }
-    &--tasks-and-activities {
-      border: 2px solid $tasks-and-activities-background;
-    }
-    &--concept {
-      border: 2px solid $concept-light;
-    }
-    &--source-material {
-      border: 2px solid $source-material-light;
-    }
-  }
-  @include mq(desktop) {
-    padding-bottom: $spacing--large;
-    margin-bottom: $spacing--large;
-  }
-
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-  p {
-    margin-top: 0;
-  }
-
-  &--multidisciplinary-topic {
-    margin-top: 0;
-    padding: $spacing--small;
-    @include mq(tablet) {
-      padding: 0;
-    }
-    border: none;
-  }
-}
-.c-article--clean {
-  margin-top: $spacing;
-  padding: $spacing--small;
-  @include mq(tablet) {
-    padding: 0;
-  }
-  border: none;
-}
-
-.c-article--in-topic {
-  margin-top: 0;
-  padding: 0;
-  padding-left: $spacing--medium;
-  figure.c-figure.u-float-full {
-    left: 0 !important;
-    right: 0 !important;
-    padding-left: 0;
-    padding-right: 0;
-    max-width: 100%;
-  }
-}
-
-.c-article__header {
-  margin-bottom: $spacing;
-  @include mq(tablet) {
-    margin-bottom: $spacing--large;
-  }
-  @include mq(desktop) {
-    margin-bottom: $spacing--large;
-  }
-}
-
-.c-article__competence {
-  margin-top: $spacing;
-}
-
-.c-article__title {
-  position: relative;
-
-  h1 {
-    margin: 0;
-    @include mq($until: tablet) {
-      line-height: 2rem;
-    }
-  }
-
-  padding: 0 0 $spacing 0;
-
-  @include mq(tablet) {
-    padding: 0 0 $spacing--medium 0;
-  }
-
-  p {
-    @include font-size(18px, 24px);
-    color: $text-light-color;
-    text-transform: uppercase;
-    margin-bottom: 0;
-    font-family: $font;
-    @include mq($until: tablet) {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.c-article__title--icon {
-  padding-left: 80px;
-
-  [data-badge] {
-    position: absolute;
-    left: 0;
-
-    @include mq(tablet) {
-      top: $spacing--xsmall;
-    }
-  }
-}

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