@ndla/ui 52.0.0 → 53.0.0

package/src/Article/component.article.scss

@@ -1,149 +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;
-}
-
-.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/Masthead/Masthead.tsx

@@ -1,100 +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 { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, spacing, stackOrder } from "@ndla/core";
-import SkipToMainContent from "./SkipToMainContent";
-import { MessageBanner } from "../Messages";
-
-const MastheadContent = styled.div`
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  padding: ${spacing.small} ${spacing.normal};
-  font-weight: ${fonts.weight.normal};
-  display: flex;
-  height: 84px;
-  justify-content: space-between;
-  gap: ${spacing.xsmall};
-  ${mq.range({ until: breakpoints.tablet })} {
-    padding: ${spacing.small};
-    gap: ${spacing.xsmall};
-  }
-`;
-
-interface StyledMastheadProps {
-  fixed: boolean;
-  ndlaFilm: boolean;
-}
-
-const StyledMasthead = styled.div<StyledMastheadProps>`
-  z-index: ${stackOrder.banner};
-  position: relative;
-  background: white;
-  border-bottom: 1px solid ${colors.brand.greyLighter};
-  min-height: 84px;
-  display: flex;
-  flex-flow: column;
-  justify-content: flex-end;
-  ${(p) =>
-    p.fixed &&
-    css`
-      top: 0;
-      position: sticky;
-      @media print {
-        position: relative;
-      }
-    `};
-  ${(p) =>
-    p.ndlaFilm &&
-    css`
-      background: ${colors.ndlaFilm.filmColorLight};
-      background-image: linear-gradient(0deg, ${colors.ndlaFilm.filmColorLight}, ${colors.ndlaFilm.filmColor});
-      border: 0;
-      border-bottom: 1px solid #18334c;
-    `};
-`;
-
-interface Alert {
-  content: string;
-  closable?: boolean;
-  number: number;
-}
-
-interface Props {
-  children?: ReactNode;
-  fixed?: boolean;
-  ndlaFilm?: boolean;
-  skipToMainContentId?: string;
-  messages?: Alert[];
-  onCloseAlert?: (id: number) => void;
-}
-
-export const Masthead = ({ children, fixed, ndlaFilm, skipToMainContentId, messages, onCloseAlert }: Props) => {
-  return (
-    <>
-      {skipToMainContentId && <SkipToMainContent skipToMainContentId={skipToMainContentId} />}
-      <StyledMasthead fixed={!!fixed} ndlaFilm={!!ndlaFilm} id="masthead">
-        {messages?.map((message) => (
-          <MessageBanner
-            key={message.number}
-            showCloseButton={message.closable}
-            onClose={() => onCloseAlert?.(message.number)}
-          >
-            {message.content}
-          </MessageBanner>
-        ))}
-        <MastheadContent className="u-1/1">{children}</MastheadContent>
-      </StyledMasthead>
-    </>
-  );
-};
-
-export default Masthead;

package/src/Masthead/SkipToMainContent.tsx

@@ -1,54 +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 { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors, stackOrder } from "@ndla/core";
-
-interface Props {
-  skipToMainContentId: string;
-}
-
-const StyledSkipToMainContent = styled.a`
-  position: absolute;
-  top: 10px;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  color: ${colors.white};
-  background: ${colors.brand.primary};
-  left: auto;
-  top: auto;
-  width: 30%;
-  height: auto;
-  overflow: auto;
-  margin: 10px 35%;
-  padding: 5px;
-  border-radius: 15px;
-  border: 4px solid ${colors.brand.tertiary};
-  text-align: center;
-  font-size: 1.2em;
-  z-index: ${stackOrder.popover};
-  animation-name: fadeIn;
-  animation-duration: 0.3s;
-  transform: translateY(-150%);
-  &:focus {
-    transform: translateY(0);
-  }
-`;
-
-const SkipToMainContent = ({ skipToMainContentId }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledSkipToMainContent tabIndex={0} href={`#${skipToMainContentId}`}>
-      {t("masthead.skipToContent")}
-    </StyledSkipToMainContent>
-  );
-};
-
-export default SkipToMainContent;

package/src/Masthead/index.ts

@@ -1,16 +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 Masthead from "./Masthead";
-
-import { default as SkipToMainContent } from "./SkipToMainContent";
-import { getMastheadHeight, useMastheadHeight } from "./utils";
-
-export { getMastheadHeight, useMastheadHeight, SkipToMainContent };
-
-export default Masthead;

package/src/Masthead/utils.ts

@@ -1,45 +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 { useEffect, useState } from "react";
-import { resizeObserver } from "@ndla/util";
-
-export const getMastheadHeight = (): number | undefined => {
-  if (typeof window !== "undefined") {
-    const masthead = document.getElementById("masthead");
-    return masthead?.getBoundingClientRect().height;
-  }
-};
-
-export const useMastheadHeight = () => {
-  const [height, setHeight] = useState<number>();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  useEffect(() => {
-    if (mounted) {
-      const masthead = document.getElementById("masthead");
-
-      const handleHeightChange = (el: HTMLElement) => {
-        const newHeight = el.getBoundingClientRect().height;
-        setHeight(newHeight);
-      };
-
-      if (masthead) {
-        resizeObserver(masthead, handleHeightChange);
-      }
-    }
-  }, [mounted]);
-
-  return {
-    height,
-  };
-};

package/src/main.scss

@@ -1,4 +0,0 @@
-// @import '~ndla-core/scss/core';
-
-// COMPONENTS
-@import "Article/component.article";