@ndla/ui 52.0.0 → 53.0.1

package/lib/Masthead/SkipToMainContent.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _reactI18next = require("react-i18next");
-var _core = require("@ndla/core");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 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.
- *
- */
-
-const StyledSkipToMainContent = /*#__PURE__*/(0, _base.default)("a", {
-  target: "e13a8y7u0",
-  label: "StyledSkipToMainContent"
-})("position:absolute;top:10px;left:0;right:0;margin:0 auto;color:", _core.colors.white, ";background:", _core.colors.brand.primary, ";left:auto;top:auto;width:30%;height:auto;overflow:auto;margin:10px 35%;padding:5px;border-radius:15px;border:4px solid ", _core.colors.brand.tertiary, ";text-align:center;font-size:1.2em;z-index:", _core.stackOrder.popover, ";animation-name:fadeIn;animation-duration:0.3s;transform:translateY(-150%);&:focus{transform:translateY(0);}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNraXBUb01haW5Db250ZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQndDIiwiZmlsZSI6IlNraXBUb01haW5Db250ZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMsIHN0YWNrT3JkZXIgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBza2lwVG9NYWluQ29udGVudElkOiBzdHJpbmc7XG59XG5cbmNvbnN0IFN0eWxlZFNraXBUb01haW5Db250ZW50ID0gc3R5bGVkLmFgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgdG9wOiAxMHB4O1xuICBsZWZ0OiAwO1xuICByaWdodDogMDtcbiAgbWFyZ2luOiAwIGF1dG87XG4gIGNvbG9yOiAke2NvbG9ycy53aGl0ZX07XG4gIGJhY2tncm91bmQ6ICR7Y29sb3JzLmJyYW5kLnByaW1hcnl9O1xuICBsZWZ0OiBhdXRvO1xuICB0b3A6IGF1dG87XG4gIHdpZHRoOiAzMCU7XG4gIGhlaWdodDogYXV0bztcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIG1hcmdpbjogMTBweCAzNSU7XG4gIHBhZGRpbmc6IDVweDtcbiAgYm9yZGVyLXJhZGl1czogMTVweDtcbiAgYm9yZGVyOiA0cHggc29saWQgJHtjb2xvcnMuYnJhbmQudGVydGlhcnl9O1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIGZvbnQtc2l6ZTogMS4yZW07XG4gIHotaW5kZXg6ICR7c3RhY2tPcmRlci5wb3BvdmVyfTtcbiAgYW5pbWF0aW9uLW5hbWU6IGZhZGVJbjtcbiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjNzO1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTE1MCUpO1xuICAmOmZvY3VzIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7XG4gIH1cbmA7XG5cbmNvbnN0IFNraXBUb01haW5Db250ZW50ID0gKHsgc2tpcFRvTWFpbkNvbnRlbnRJZCB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIHJldHVybiAoXG4gICAgPFN0eWxlZFNraXBUb01haW5Db250ZW50IHRhYkluZGV4PXswfSBocmVmPXtgIyR7c2tpcFRvTWFpbkNvbnRlbnRJZH1gfT5cbiAgICAgIHt0KFwibWFzdGhlYWQuc2tpcFRvQ29udGVudFwiKX1cbiAgICA8L1N0eWxlZFNraXBUb01haW5Db250ZW50PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgU2tpcFRvTWFpbkNvbnRlbnQ7XG4iXX0= */"));
-const SkipToMainContent = _ref => {
-  let {
-    skipToMainContentId
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  return (0, _jsxRuntime.jsx)(StyledSkipToMainContent, {
-    tabIndex: 0,
-    href: "#".concat(skipToMainContentId),
-    children: t("masthead.skipToContent")
-  });
-};
-var _default = exports.default = SkipToMainContent;

package/lib/Masthead/index.d.ts

@@ -1,12 +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/lib/Masthead/index.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "SkipToMainContent", {
-  enumerable: true,
-  get: function () {
-    return _SkipToMainContent.default;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "getMastheadHeight", {
-  enumerable: true,
-  get: function () {
-    return _utils.getMastheadHeight;
-  }
-});
-Object.defineProperty(exports, "useMastheadHeight", {
-  enumerable: true,
-  get: function () {
-    return _utils.useMastheadHeight;
-  }
-});
-var _Masthead = _interopRequireDefault(require("./Masthead"));
-var _SkipToMainContent = _interopRequireDefault(require("./SkipToMainContent"));
-var _utils = require("./utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 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.
- *
- */
-var _default = exports.default = _Masthead.default;

package/lib/Masthead/utils.d.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.
- *
- */
-export declare const getMastheadHeight: () => number | undefined;
-export declare const useMastheadHeight: () => {
-    height: number | undefined;
-};

package/lib/Masthead/utils.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useMastheadHeight = exports.getMastheadHeight = void 0;
-var _react = require("react");
-var _util = require("@ndla/util");
-/**
- * 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.
- *
- */
-
-const getMastheadHeight = () => {
-  if (typeof window !== "undefined") {
-    const masthead = document.getElementById("masthead");
-    return masthead === null || masthead === void 0 ? void 0 : masthead.getBoundingClientRect().height;
-  }
-};
-exports.getMastheadHeight = getMastheadHeight;
-const useMastheadHeight = () => {
-  const [height, setHeight] = (0, _react.useState)();
-  const [mounted, setMounted] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    setMounted(true);
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (mounted) {
-      const masthead = document.getElementById("masthead");
-      const handleHeightChange = el => {
-        const newHeight = el.getBoundingClientRect().height;
-        setHeight(newHeight);
-      };
-      if (masthead) {
-        (0, _util.resizeObserver)(masthead, handleHeightChange);
-      }
-    }
-  }, [mounted]);
-  return {
-    height
-  };
-};
-exports.useMastheadHeight = useMastheadHeight;

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, misc, mq, spacing, 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 ${spacing.nsmall};
-  display: inline-flex;
-  align-items: center;
-  background-color: ${colors.brand.greyLighter};
-  border-radius: ${misc.borderRadius};
-  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,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";