@ndla/ui 39.1.1 → 41.0.0

package/lib/index.d.ts

@@ -8,7 +8,6 @@
 export { default as SectionHeading } from './SectionHeading';
 export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, } from './Embed';
 export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, ArticleSideBar, default as Article, } from './Article';
-export { CompetenceGoalsDialog } from './CompetenceGoals';
 export { default as Table } from './Table';
 export { default as ResourcesWrapper, ResourcesTopicTitle } from './ResourcesWrapper';
 export { createUniversalPortal } from './utils/createUniversalPortal';
@@ -35,7 +34,7 @@ export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureO
 export type { FigureType } from './Figure';
 export { LanguageSelector } from './LanguageSelector';
 export { LearningPathWrapper, LearningPathContent, LearningPathMenu, LearningPathSticky, LearningPathInformation, LearningPathStickySibling, LearningPathStickyPlaceholder, LearningPathLastStepNavigation, LearningPathMobileStepInfo, LearningPathMobileHeader, } from './LearningPaths';
-export { Translation, TranslationLine, TranslationBox } from './Translation';
+export { Translation, TranslationLine } from './Translation';
 export { default as SearchResultSleeve } from './Search/SearchResultSleeve';
 export { default as ContentTypeResult } from './Search/ContentTypeResult';
 export { SearchFieldForm } from './Search/SearchFieldForm';
@@ -48,7 +47,7 @@ export { default as Breadcrumblist } from './Breadcrumblist';
 export { MessageBox, MessageBoxTag, MessageBanner } from './Messages';
 export { ResourceBox } from './ResourceBox';
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
-export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Navigation';
+export { NavigationBox, NavigationTopicAbout } from './Navigation';
 export { default as Programme } from './Programme';
 export { default as CompetenceGoalTab } from './CompetenceGoalTab';
 export { default as MultidisciplinarySubject, MultidisciplinarySubjectHeader } from './MultidisciplinarySubject';

package/lib/index.js

@@ -184,12 +184,6 @@ Object.defineProperty(exports, "CompetenceGoalTab", {
     return _CompetenceGoalTab["default"];
   }
 });
-Object.defineProperty(exports, "CompetenceGoalsDialog", {
-  enumerable: true,
-  get: function get() {
-    return _CompetenceGoals.CompetenceGoalsDialog;
-  }
-});
 Object.defineProperty(exports, "ConceptEmbed", {
   enumerable: true,
   get: function get() {
@@ -808,12 +802,6 @@ Object.defineProperty(exports, "NavigationBox", {
     return _Navigation.NavigationBox;
   }
 });
-Object.defineProperty(exports, "NavigationHeading", {
-  enumerable: true,
-  get: function get() {
-    return _Navigation.NavigationHeading;
-  }
-});
 Object.defineProperty(exports, "NavigationTopicAbout", {
   enumerable: true,
   get: function get() {
@@ -1180,12 +1168,6 @@ Object.defineProperty(exports, "Translation", {
     return _Translation.Translation;
   }
 });
-Object.defineProperty(exports, "TranslationBox", {
-  enumerable: true,
-  get: function get() {
-    return _Translation.TranslationBox;
-  }
-});
 Object.defineProperty(exports, "TranslationLine", {
   enumerable: true,
   get: function get() {
@@ -1309,7 +1291,6 @@ Object.defineProperty(exports, "useSnack", {
 var _SectionHeading = _interopRequireDefault(require("./SectionHeading"));
 var _Embed = require("./Embed");
 var _Article = _interopRequireWildcard(require("./Article"));
-var _CompetenceGoals = require("./CompetenceGoals");
 var _Table = _interopRequireDefault(require("./Table"));
 var _ResourcesWrapper = _interopRequireWildcard(require("./ResourcesWrapper"));
 var _createUniversalPortal = require("./utils/createUniversalPortal");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "39.1.1",
+  "version": "41.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,21 +31,21 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.6",
+    "@ndla/accordion": "^2.2.7",
     "@ndla/article-scripts": "^3.0.18",
-    "@ndla/button": "^10.1.5",
-    "@ndla/carousel": "^3.1.3",
-    "@ndla/core": "^4.0.1",
-    "@ndla/forms": "^4.3.5",
+    "@ndla/button": "^10.1.6",
+    "@ndla/carousel": "^3.1.4",
+    "@ndla/core": "^4.1.0",
+    "@ndla/forms": "^4.3.6",
     "@ndla/hooks": "^2.0.7",
-    "@ndla/icons": "^3.0.1",
+    "@ndla/icons": "^3.0.2",
     "@ndla/licenses": "^7.0.4",
-    "@ndla/modal": "^3.0.2",
-    "@ndla/notion": "^5.0.2",
-    "@ndla/safelink": "^4.1.5",
-    "@ndla/switch": "^1.1.3",
-    "@ndla/tabs": "^2.2.5",
-    "@ndla/tooltip": "^4.1.5",
+    "@ndla/modal": "^3.0.4",
+    "@ndla/notion": "^5.0.4",
+    "@ndla/safelink": "^4.1.6",
+    "@ndla/switch": "^1.1.4",
+    "@ndla/tabs": "^3.0.0",
+    "@ndla/tooltip": "^4.1.6",
     "@ndla/util": "^3.1.13",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-popover": "^1.0.6",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b3348cc442cf427e291831f03c51d7ab2e3bbbed"
+  "gitHead": "982a8c9b737182c8c1b4f1105ed128be637d47cb"
 }

package/src/Article/Article.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ComponentType, ReactNode, useEffect, useRef, useState, forwardRef } from 'react';
+import React, { ReactNode, useEffect, useRef, useState, forwardRef } from 'react';
 import BEMHelper from 'react-bem-helper';
 import parse from 'html-react-parser';
 import styled from '@emotion/styled';
@@ -23,6 +23,7 @@ import ArticleNotions, { NotionRelatedContent } from './ArticleNotions';
 import ArticleAccessMessage from './ArticleAccessMessage';
 import MessageBox from '../Messages/MessageBox';
 import { ConceptNotionType } from '../Notion/ConceptNotion';
+import { Heading } from '../Typography';
 
 const classes = new BEMHelper({
   name: 'article',
@@ -63,7 +64,9 @@ export const ArticleTitle = ({ children, icon, label }: ArticleTitleProps) => {
     <div {...classes('title', modifiers)}>
       {icon}
       {labelView}
-      <h1 tabIndex={-1}>{children}</h1>
+      <Heading element="h1" headingStyle="h1" tabIndex={-1}>
+        {children}
+      </Heading>
     </div>
   );
 };
@@ -117,17 +120,13 @@ type Props = {
   article: ArticleType;
   icon?: ReactNode;
   licenseBox?: ReactNode;
-  competenceGoalsLoading?: boolean;
   modifier?: string;
   children?: ReactNode;
   messages: Messages;
   contentTransformed?: boolean;
   locale: Locale;
   messageBoxLinks?: [];
-  competenceGoals?: (inp: {
-    Dialog: ComponentType;
-    dialogProps: { isOpen: boolean; onClose: () => void };
-  }) => ReactNode;
+  competenceGoals?: ReactNode;
   id: string;
   renderMarkdown: (text: string) => string;
   notions?: { list: ConceptNotionType[]; related: NotionRelatedContent[] };
@@ -157,7 +156,6 @@ export const Article = ({
   messageBoxLinks,
   children,
   competenceGoals,
-  competenceGoalsLoading,
   id,
   locale,
   notions,
@@ -214,7 +212,7 @@ export const Article = ({
               <MessageBox links={messageBoxLinks}>{messages.messageBox}</MessageBox>
             </MSGboxWrapper>
           )}
-          <ArticleHeaderWrapper competenceGoals={competenceGoals} competenceGoalsLoading={competenceGoalsLoading}>
+          <ArticleHeaderWrapper competenceGoals={competenceGoals}>
             {heartButton ? <ArticleFavoritesButtonWrapper>{heartButton}</ArticleFavoritesButtonWrapper> : null}
 
             <ArticleTitle icon={icon} label={messages.label}>

package/src/Article/ArticleHeaderWrapper.tsx

@@ -6,38 +6,21 @@
  *
  */
 
-import React, { ComponentType, ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import BEMHelper from 'react-bem-helper';
-import { useTranslation } from 'react-i18next';
-import { ButtonV2 } from '@ndla/button';
 import { isMobile } from 'react-device-detect';
 
-import styled from '@emotion/styled';
-import { FooterHeaderIcon } from '@ndla/icons/common';
-import CompetenceGoalsDialog from '../CompetenceGoals/CompetenceGoalsDialog';
-
 const classes = new BEMHelper({
   name: 'article',
   prefix: 'c-',
 });
 
-const CompetenceBadgeText = styled.span`
-  padding: 0 5px;
-`;
-
 type Props = {
-  competenceGoals?: (inp: {
-    Dialog: ComponentType;
-    dialogProps: { isOpen: boolean; onClose: () => void; controlled: true };
-  }) => ReactNode;
-  competenceGoalsLoading?: boolean;
+  competenceGoals?: ReactNode;
   children: ReactNode;
 };
 
-const ArticleHeaderWrapper = ({ children, competenceGoals, competenceGoalsLoading }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const { t } = useTranslation();
-
+const ArticleHeaderWrapper = ({ children, competenceGoals }: Props) => {
   useEffect(() => {
     if (isMobile) {
       const heroContentList: NodeListOf<HTMLElement> = document.querySelectorAll('.c-article__header');
@@ -48,41 +31,10 @@ const ArticleHeaderWrapper = ({ children, competenceGoals, competenceGoalsLoadin
     }
   }, []);
 
-  const openDialog = () => {
-    setIsOpen(true);
-  };
-
-  const closeDialog = () => {
-    setIsOpen(false);
-  };
-
-  if (!competenceGoals) {
-    return <div {...classes('header')}>{children}</div>;
-  }
-
-  const dialog = competenceGoals({
-    Dialog: CompetenceGoalsDialog,
-    dialogProps: {
-      isOpen: isOpen,
-      onClose: closeDialog,
-      controlled: true,
-    },
-  });
   return (
     <div {...classes('header')}>
       {children}
-      <ButtonV2
-        aria-busy={competenceGoalsLoading}
-        size="xsmall"
-        colorTheme="light"
-        shape="pill"
-        onClick={openDialog}
-        disabled={competenceGoalsLoading}
-      >
-        <FooterHeaderIcon />
-        <CompetenceBadgeText>{t('competenceGoals.showCompetenceGoals')}</CompetenceBadgeText>
-      </ButtonV2>
-      {dialog}
+      {competenceGoals}
     </div>
   );
 };

package/src/Dialog/component.dialog.scss

@@ -63,10 +63,6 @@
     width: 100vw;
     -webkit-overflow-scrolling: touch;
 
-    .c-tabs {
-      margin-left: 0;
-    }
-
     @include mq(tablet) {
       width: 90%;
       max-height: 85vh;

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -10,26 +10,6 @@ import { ToggleItem } from '../Filter';
 
 const StyledWrapper = styled.nav`
   margin: 32px 0 0;
-  .c-tabs--subjects {
-    margin: 0;
-  }
-  .c-tabs__list--subjects {
-    margin: 0;
-  }
-  .c-tabs__tab--subjects {
-    ${mq.range({ until: breakpoints.tablet })} {
-      margin: 0;
-      font-size: 12px;
-      padding-left: 8px;
-      padding-right: 8px;
-      :first-of-type {
-        padding-left: 0;
-      }
-      :last-of-type {
-        padding-right: 0;
-      }
-    }
-  }
 `;
 
 const StyledList = styled.ul`
@@ -213,6 +193,7 @@ const FrontpageAllSubjects = ({
     category.visible &&
       data.push({
         title: t(`subjectCategories.${category.type}`),
+        id: category.type,
         content: (
           <>
             {category.message && (
@@ -228,12 +209,13 @@ const FrontpageAllSubjects = ({
 
   data.push({
     title: t('frontpageMenu.allsubjects'),
+    id: 'allsubjects',
     content: renderList(allSubjects, onNavigate, onToggleSubject, subjectViewType, selectedSubjects),
   });
 
   return (
     <StyledWrapper>
-      <Tabs modifier="subjects" tabs={data} />
+      <Tabs tabs={data} />
     </StyledWrapper>
   );
 };

package/src/LearningPaths/LearningPathInformation.tsx

@@ -8,9 +8,10 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { fonts, spacing, spacingUnit, breakpoints, mq, colors } from '@ndla/core';
+import { spacing, spacingUnit, breakpoints, mq, colors } from '@ndla/core';
 import { getLicenseByAbbreviation } from '@ndla/licenses';
 import { LicenseByline } from '@ndla/notion';
+import { Heading } from '../Typography';
 
 type StyledWrapperProps = {
   invertedStyle?: boolean;
@@ -18,15 +19,6 @@ type StyledWrapperProps = {
 
 const StyledWrapper = styled.div<StyledWrapperProps>`
   background: transparent;
-  font-family: ${fonts.serif};
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-family: ${fonts.serif};
-  }
   max-width: 720px;
   margin: ${spacingUnit * 0.75}px ${spacing.normal} ${spacing.xsmall} 0 !important;
   ${mq.range({ from: breakpoints.desktop })} {
@@ -59,7 +51,7 @@ const LicenseWrapper = styled.div`
   }
 `;
 
-const StyledHeader = styled.h1`
+const StyledHeader = styled(Heading)`
   margin-bottom: ${spacing.small};
 `;
 
@@ -79,7 +71,9 @@ export const LearningPathInformation = ({ description, title, license, invertedS
     <section className="o-wrapper">
       <StyledWrapper invertedStyle={invertedStyle} className="c-article">
         <LicenseWrapper>
-          <StyledHeader id={id}>{title}</StyledHeader>
+          <StyledHeader element="h1" headingStyle="h1" tabIndex={-1} id={id}>
+            {title}
+          </StyledHeader>
           <LicenseByline licenseRights={rights} color={colors.brand.tertiary} />
         </LicenseWrapper>
         {description && <div dangerouslySetInnerHTML={{ __html: description }} />}

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactChild, ReactChildren, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { spacing, mq, breakpoints, colors } from '@ndla/core';
 import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
 import { css } from '@emotion/react';
@@ -36,7 +36,7 @@ const StyledModal = styled(Modal)`
 
 type ModalWrapperProps = {
   innerWidth: number;
-  children: (arg: VoidFunction) => ReactChild | ReactChildren | ReactNode;
+  children: (arg: VoidFunction) => ReactNode;
 };
 
 const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {

package/src/Masthead/MastheadSearchModal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactChild, ReactChildren, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { Drawer } from '@ndla/modal';
 import { IconButtonV2 as IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
@@ -9,7 +9,7 @@ import ToggleSearchButton from '../Search/ToggleSearchButton';
 
 interface Props {
   onClose: VoidFunction;
-  children: (arg: () => void) => ReactChild | ReactChildren | ReactNode;
+  children: (arg: () => void) => ReactNode;
   hideOnNarrowScreen?: boolean;
   ndlaFilm?: boolean;
 }

package/src/MultidisciplinarySubject/MultidisciplinarySubject.tsx

@@ -1,11 +1,12 @@
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { breakpoints, fonts, mq } from '@ndla/core';
+import { breakpoints, mq } from '@ndla/core';
 import LayoutItem, { OneColumn } from '../Layout';
 import List from './List';
 import { ListItemProps } from './ListItem';
 import { HomeBreadcrumb, SimpleBreadcrumbItem } from '../Breadcrumb';
+import { Heading } from '../Typography';
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -30,23 +31,6 @@ const Header = styled.div`
   margin-top: 32px;
 `;
 
-const Heading = styled.h1`
-  margin: 10px 0 10px 0;
-  font-size: 20px;
-  line-height: 25px;
-  font-weight: ${fonts.weight.bold};
-
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    margin: 40px 0 22px;
-    ${fonts.sizes('40px', '48px')};
-  }
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    margin: 50px 0 24px;
-    ${fonts.sizes('52px', '65px')};
-  }
-`;
-
 const InfoText = styled.div`
   max-width: 720px;
   font-size: 16px;
@@ -107,7 +91,7 @@ export const MultidisciplinarySubject = ({
           <Header>
             <LayoutItem layout="extend">
               <HomeBreadcrumb items={breadcrumbs} />
-              <Heading id={id} tabIndex={-1}>
+              <Heading element="h1" headingStyle="h1" id={id} tabIndex={-1}>
                 {t('frontpageMultidisciplinarySubject.heading')}
               </Heading>
               <InfoText>{t('frontpageMultidisciplinarySubject.text')}</InfoText>

package/src/Navigation/index.ts

@@ -7,7 +7,6 @@
  */
 
 import NavigationBox from './NavigationBox';
-import NavigationHeading from './NavigationHeading';
 import NavigationTopicAbout from './NavigationTopicAbout';
 
-export { NavigationHeading, NavigationBox, NavigationTopicAbout };
+export { NavigationBox, NavigationTopicAbout };

package/src/Programme/Programme.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import LayoutItem, { OneColumn } from '../Layout';
 import ProgrammeSubjects, { GradesProps } from './ProgrammeSubjects';
 import MessageBox from '../Messages/MessageBox';
-import { NavigationHeading } from '..';
+import { Heading } from '..';
 const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -76,7 +76,9 @@ export const Programme = ({ heading, image, grades, selectedGrade, messageBoxTex
         <StyledLayoutWrapper>
           <LayoutItem layout="extend">
             <StyledContentWrapper>
-              <NavigationHeading headingId={headingId}>{heading}</NavigationHeading>
+              <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} />

package/src/Search/component.search-result.scss

@@ -40,14 +40,6 @@
     }
   }
 
-  .c-tabs {
-    display: none;
-
-    @include mq(desktop) {
-      display: block;
-    }
-  }
-
   .c-search-filter {
     display: none;
 

package/src/ToolboxPage/ToolboxInfo.tsx

@@ -12,18 +12,7 @@ import { breakpoints, fonts, mq } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
-
-const Heading = styled.h1`
-  ${fonts.sizes('30px', '35px')};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('36px', '46px')};
-  }
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    ${fonts.sizes('52px', '65px')};
-  }
-`;
+import { Heading } from '../Typography';
 
 const Introduction = styled.p`
   max-width: 800px;
@@ -51,7 +40,7 @@ const ToolboxInfo = ({ title, introduction, topics, onSelectTopic, id }: Props)
   const { t } = useTranslation();
   return (
     <>
-      <Heading id={id} tabIndex={-1}>
+      <Heading element="h1" headingStyle="h1" id={id} tabIndex={-1}>
         {title}
       </Heading>
       <Introduction>{introduction}</Introduction>

package/src/Topic/Topic.tsx

@@ -22,6 +22,7 @@ import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
 import { makeSrcQueryString, ImageCrop, ImageFocalPoint } from '../Image';
 import { MessageBox } from '../Messages';
+import { Heading } from '../Typography';
 
 type InvertItProps = {
   invertedStyle?: boolean;
@@ -257,9 +258,9 @@ const Topic = ({
       <TopicIntroductionWrapper>
         <div>
           <HeadingWrapper>
-            <h1 id={id} tabIndex={-1}>
+            <Heading element="h1" headingStyle="h2" id={id} tabIndex={-1}>
               {topic.title}
-            </h1>
+            </Heading>
             {isAdditionalTopic && (
               <>
                 <AdditionalIcon aria-hidden="true">T</AdditionalIcon>

package/src/Translation/index.ts

@@ -1,3 +1,2 @@
 export { default as Translation } from './Translation';
-export { default as TranslationBox } from './TranslationBox';
 export { default as TranslationLine } from './TranslationLine';

package/src/all.scss

@@ -1,6 +1,5 @@
 @import '~@ndla/core/scss/core';
 @import '~@ndla/icons/scss/icons';
 @import './main';
-@import '~@ndla/tabs/scss/tabs';
 @import '~@ndla/core/scss/utilities';
 @import '~@ndla/video-search/scss/video-search';

package/src/index.ts

@@ -38,8 +38,6 @@ export {
   default as Article,
 } from './Article';
 
-export { CompetenceGoalsDialog } from './CompetenceGoals';
-
 export { default as Table } from './Table';
 
 export { default as ResourcesWrapper, ResourcesTopicTitle } from './ResourcesWrapper';
@@ -124,7 +122,7 @@ export {
   LearningPathMobileStepInfo,
   LearningPathMobileHeader,
 } from './LearningPaths';
-export { Translation, TranslationLine, TranslationBox } from './Translation';
+export { Translation, TranslationLine } from './Translation';
 
 export { default as SearchResultSleeve } from './Search/SearchResultSleeve';
 
@@ -156,7 +154,7 @@ export { ResourceBox } from './ResourceBox';
 
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
 
-export { NavigationHeading, NavigationBox, NavigationTopicAbout } from './Navigation';
+export { NavigationBox, NavigationTopicAbout } from './Navigation';
 
 export { default as Programme } from './Programme';
 

package/src/main.scss

@@ -20,6 +20,5 @@
 @import 'Table/component.tables';
 @import 'Filter/component.filter';
 @import 'Translation/component.translation';
-@import 'Translation/component.translation-box';
 @import 'Search/component.search';
 @import 'Carousel/component.carousel';