@ndla/ui 45.0.13 → 45.0.15

package/lib/index.d.ts

@@ -6,7 +6,7 @@
  *
  */
 export { default as SectionHeading } from './SectionHeading';
-export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, } from './Embed';
+export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, } from './Embed';
 export { ArticleByline, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, default as Article, } from './Article';
 export { default as Table, TableStyling } from './Table';
 export { default as ResourcesWrapper, ResourcesTopicTitle } from './ResourcesWrapper';
@@ -97,8 +97,6 @@ export type { HeartButtonType } from './Embed';
 export { CampaignBlock } from './CampaignBlock';
 export { Grid, GridParallaxItem } from './Grid';
 export type { GridType } from './Grid';
-export { Heading } from './Typography';
-export type { HeadingLevel } from './types';
 export { default as FrontpageArticle, FRONTPAGE_ARTICLE_MAX_WIDTH, WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH, } from './FrontpageArticle';
 export { DefinitionTerm, DefinitionDescription } from './DefinitionList';
 export type { ProgrammeV2 } from './ProgrammeCard';

package/lib/index.js

@@ -520,12 +520,6 @@ Object.defineProperty(exports, "HeaderBreadcrumb", {
     return _Breadcrumb.HeaderBreadcrumb;
   }
 });
-Object.defineProperty(exports, "Heading", {
-  enumerable: true,
-  get: function get() {
-    return _Typography.Heading;
-  }
-});
 Object.defineProperty(exports, "Hero", {
   enumerable: true,
   get: function get() {
@@ -586,6 +580,12 @@ Object.defineProperty(exports, "InfoWidget", {
     return _InfoWidget.default;
   }
 });
+Object.defineProperty(exports, "InlineConcept", {
+  enumerable: true,
+  get: function get() {
+    return _Embed.InlineConcept;
+  }
+});
 Object.defineProperty(exports, "KeyFigure", {
   enumerable: true,
   get: function get() {
@@ -1354,7 +1354,6 @@ var _KeyFigure = require("./KeyFigure");
 var _ContactBlock = _interopRequireDefault(require("./ContactBlock"));
 var _CampaignBlock = require("./CampaignBlock");
 var _Grid = require("./Grid");
-var _Typography = require("./Typography");
 var _FrontpageArticle = _interopRequireWildcard(require("./FrontpageArticle"));
 var _DefinitionList = require("./DefinitionList");
 var _Gloss = require("./Gloss");

package/lib/types.d.ts

@@ -110,5 +110,4 @@ export type NotionMedia = {
     type: 'video' | 'other';
     element: ReactNode;
 };
-export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "45.0.13",
+  "version": "45.0.15",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,24 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.22",
+    "@ndla/accordion": "^2.2.23",
     "@ndla/article-scripts": "^3.0.21",
-    "@ndla/button": "^11.0.7",
-    "@ndla/carousel": "^4.0.0",
-    "@ndla/core": "^4.1.7",
-    "@ndla/dropdown-menu": "^1.0.5",
-    "@ndla/forms": "^4.3.23",
+    "@ndla/button": "^11.0.8",
+    "@ndla/carousel": "^4.0.1",
+    "@ndla/core": "^4.1.8",
+    "@ndla/dropdown-menu": "^1.0.6",
+    "@ndla/forms": "^4.3.24",
     "@ndla/hooks": "^2.1.0",
-    "@ndla/icons": "^4.0.6",
+    "@ndla/icons": "^4.0.7",
     "@ndla/licenses": "^7.1.4",
-    "@ndla/modal": "^4.0.7",
-    "@ndla/notion": "^5.0.25",
-    "@ndla/safelink": "^4.1.21",
-    "@ndla/select": "^2.4.13",
-    "@ndla/switch": "^1.1.12",
-    "@ndla/tabs": "^3.0.8",
-    "@ndla/tooltip": "^4.1.18",
+    "@ndla/modal": "^4.0.8",
+    "@ndla/notion": "^5.0.26",
+    "@ndla/safelink": "^4.1.22",
+    "@ndla/select": "^2.4.14",
+    "@ndla/switch": "^1.1.13",
+    "@ndla/tabs": "^3.0.9",
+    "@ndla/tooltip": "^4.1.19",
+    "@ndla/typography": "^0.2.0",
     "@ndla/util": "^3.2.0",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-slider": "^1.1.2",
@@ -83,5 +84,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "af03a21cc82d5779a52b6b08d27257b8d907cca0"
+  "gitHead": "00d70afe163dcf81cd7154743319ae3fe6f6fdff"
 }

package/src/Article/Article.tsx

@@ -14,6 +14,7 @@ import styled from '@emotion/styled';
 import { useIntersectionObserver } from '@ndla/hooks';
 import { resizeObserver } from '@ndla/util';
 import { spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
+import { Heading } from '@ndla/typography';
 import { Article as ArticleType } from '../types';
 import ArticleByline from './ArticleByline';
 import LayoutItem from '../Layout';
@@ -21,7 +22,6 @@ import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 import ArticleNotions from './ArticleNotions';
 import ArticleAccessMessage from './ArticleAccessMessage';
 import MessageBox from '../Messages/MessageBox';
-import { Heading } from '../Typography';
 
 const classes = new BEMHelper({
   name: 'article',

package/src/BlogPost/BlogPost.tsx

@@ -11,8 +11,8 @@ import { css } from '@emotion/react';
 import SafeLink from '@ndla/safelink';
 import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
 import { Quote } from '@ndla/icons/editor';
+import { HeadingLevel } from '@ndla/typography';
 import { useTranslation } from 'react-i18next';
-import { HeadingLevel } from '../types';
 import { usePossiblyRelativeUrl } from '../utils/relativeUrl';
 
 export interface Props {

package/src/CampaignBlock/CampaignBlock.tsx

@@ -11,7 +11,7 @@ import { css } from '@emotion/react';
 import SafeLink from '@ndla/safelink';
 import { Forward } from '@ndla/icons/common';
 import { breakpoints, colors, fonts, spacing, mq, misc } from '@ndla/core';
-import { HeadingLevel } from '../types';
+import { HeadingLevel } from '@ndla/typography';
 import { usePossiblyRelativeUrl } from '../utils/relativeUrl';
 
 interface Image {

package/src/Embed/ConceptEmbed.stories.tsx

@@ -19,6 +19,13 @@ const blockEmbedData: ConceptEmbedData = {
   linkText: '',
 };
 
+const glossBlockEmbedData: ConceptEmbedData = {
+  contentId: '4942',
+  resource: 'concept',
+  type: 'block',
+  linkText: '',
+};
+
 const inlineEmbedData: ConceptEmbedData = {
   contentId: '2318',
   linkText: 'forklaring',
@@ -26,6 +33,13 @@ const inlineEmbedData: ConceptEmbedData = {
   type: 'inline',
 };
 
+const glossInlineEmbedData: ConceptEmbedData = {
+  contentId: '23',
+  linkText: 'glose',
+  resource: 'concept',
+  type: 'inline',
+};
+
 const conceptMetaData: ConceptData['concept'] = {
   id: 110,
   revision: 16,
@@ -68,7 +82,68 @@ const conceptMetaData: ConceptData['concept'] = {
       '<ndlaembed data-resource="image" data-resource_id="52863" data-alt="Eksempel på hvordan borevæsken kan trenge ut i formasjonen fra borehullet og skade formasjonens permeabilitet. Illustrasjon." data-size="full" data-align="" data-url="https://api.test.ndla.no/image-api/v2/images/52863"></ndlaembed>',
     language: 'nb',
   },
-  conceptType: 'standard',
+  conceptType: 'concept',
+};
+
+const glossMetaData: ConceptData['concept'] = {
+  id: 4942,
+  revision: 6,
+  title: {
+    title: 'Ma Hong',
+    language: 'nb',
+  },
+  content: {
+    content: 'Hei',
+    language: 'nb',
+  },
+  copyright: {
+    creators: [],
+    processors: [],
+    rightsholders: [],
+    processed: false,
+  },
+  source: '',
+  metaImage: {
+    url: '',
+    alt: '',
+    language: 'und',
+  },
+  created: '2023-07-19T09:30:40.000Z',
+  updated: '2023-09-19T17:13:56.573Z',
+  updatedBy: ['XxnkdI7rApMl58MeG3p4g4B8', 'hd5ZL5Lm4kKkumWgN2gjy9wx'],
+  supportedLanguages: ['nb'],
+  articleIds: [],
+  status: {
+    current: 'IN_PROGRESS',
+    other: [],
+  },
+  responsible: {
+    responsibleId: 'XxnkdI7rApMl58MeG3p4g4B8',
+    lastUpdated: '2023-07-19T09:30:40.000Z',
+  },
+  conceptType: 'gloss',
+  glossData: {
+    gloss: '马红',
+    wordClass: 'personal-pronoun',
+    originalLanguage: 'zh',
+    transcriptions: {},
+    examples: [
+      [
+        {
+          example: '我叫马红',
+          language: 'zh',
+          transcriptions: {
+            pinyin: 'wo jiao ma hong ',
+          },
+        },
+        {
+          example: 'Jeg heter ma hong',
+          language: 'nb',
+          transcriptions: {},
+        },
+      ],
+    ],
+  },
 };
 
 const visualElementData: ConceptData['visualElement'] = {
@@ -141,6 +216,10 @@ const blockMetaData: ConceptData = {
   visualElement: visualElementData,
 };
 
+const glossBlockData: ConceptData = {
+  concept: glossMetaData,
+};
+
 const meta: Meta<typeof ConceptEmbed> = {
   title: 'Components/Embeds/ConceptEmbed',
   component: ConceptEmbed,
@@ -177,6 +256,11 @@ export const Block: StoryObj<typeof ConceptEmbed> = {
     },
   },
 };
+export const GlossBlock: StoryObj<typeof ConceptEmbed> = {
+  args: {
+    embed: { resource: 'concept', status: 'success', embedData: glossBlockEmbedData, data: glossBlockData },
+  },
+};
 
 export const BlockFailed: StoryObj<typeof ConceptEmbed> = {
   args: {
@@ -201,6 +285,17 @@ export const Inline: StoryObj<typeof ConceptEmbed> = {
   },
 };
 
+export const GlossInline: StoryObj<typeof ConceptEmbed> = {
+  args: {
+    embed: {
+      resource: 'concept',
+      status: 'success',
+      embedData: glossInlineEmbedData,
+      data: glossBlockData,
+    },
+  },
+};
+
 export const InlineFailed: StoryObj<typeof ConceptEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,

package/src/Embed/ConceptEmbed.tsx

@@ -14,7 +14,7 @@ import { Root, Trigger, Content, Anchor, Close, Portal } from '@radix-ui/react-p
 import { IconButtonV2 } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';
-import { AudioMeta, ConceptMetaData } from '@ndla/types-embed';
+import { ConceptMetaData } from '@ndla/types-embed';
 import Tooltip from '@ndla/tooltip';
 import { COPYRIGHTED } from '@ndla/licenses';
 import { Notion as UINotion } from '../Notion';
@@ -26,11 +26,6 @@ import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
 import { HeartButtonType } from './types';
 import { Gloss } from '../Gloss';
 
-const BottomBorder = styled.div`
-  margin-top: ${spacing.normal};
-  border-bottom: 1px solid ${colors.brand.greyLight};
-`;
-
 interface PopoverPosition {
   top?: number;
 }
@@ -158,8 +153,9 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
 };
 
 interface InlineConceptProps extends ConceptNotionData {
-  linkText: string;
+  linkText: ReactNode;
   heartButton?: HeartButtonType;
+  headerButtons?: ReactNode;
   conceptHeartButton?: ReactNode;
 }
 
@@ -221,7 +217,7 @@ const getModalPosition = (anchor: HTMLElement) => {
   return anchorPos.top - (articlePos?.top || -window.scrollY);
 };
 
-const InlineConcept = ({
+export const InlineConcept = ({
   title,
   content,
   copyright,
@@ -232,6 +228,7 @@ const InlineConcept = ({
   conceptHeartButton,
   glossData,
   conceptType,
+  headerButtons,
 }: InlineConceptProps) => {
   const { t } = useTranslation();
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -271,6 +268,7 @@ const InlineConcept = ({
               visualElement={visualElement}
               inPopover
               heartButton={heartButton}
+              headerButtons={headerButtons}
               conceptHeartButton={conceptHeartButton}
               closeButton={
                 <Close asChild>
@@ -399,7 +397,7 @@ export const BlockConcept = ({
           />
         ) : (
           <Gloss
-            glossData={glossData!}
+            glossData={glossData}
             title={title}
             audio={
               visualElement?.status === 'success' && visualElement.resource === 'audio'
@@ -408,12 +406,10 @@ export const BlockConcept = ({
             }
           />
         )}
-        {copyright && conceptType === 'concept' ? (
+        {copyright && conceptType === 'concept' && (
           <EmbedByline copyright={copyright} bottomRounded topRounded type={conceptType as ConceptType}>
             {copyright.license?.license.toLowerCase() !== COPYRIGHTED && conceptHeartButton}
           </EmbedByline>
-        ) : (
-          <BottomBorder />
         )}
       </Figure>
     </Root>

package/src/Embed/conceptComponents.tsx

@@ -7,7 +7,7 @@
  */
 
 import { forwardRef, ReactNode, RefAttributes } from 'react';
-import { AudioMeta, AudioMetaData, ConceptData, ConceptVisualElementMeta } from '@ndla/types-embed';
+import { ConceptData, ConceptVisualElementMeta } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
 import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
@@ -46,6 +46,7 @@ interface ConceptNotionProps extends RefAttributes<HTMLDivElement>, ConceptNotio
   inPopover?: boolean;
   tags?: string[];
   subjects?: string[];
+  headerButtons?: ReactNode;
   heartButton?: HeartButtonType;
   conceptHeartButton?: ReactNode;
 }
@@ -125,6 +126,12 @@ const StyledNotionDialogContent = styled(NotionDialogContent)`
   }
 `;
 
+const ButtonWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.xsmall};
+  align-items: center;
+`;
+
 const StyledList = styled.ul`
   display: flex;
   gap: ${spacing.small};
@@ -158,6 +165,7 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
       conceptHeartButton,
       conceptType,
       glossData,
+      headerButtons,
       ...rest
     },
     ref,
@@ -171,7 +179,10 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
             <h1>
               {title.title} {<small>{t(`searchPage.resultType.${conceptType}`)}</small>}
             </h1>
-            {closeButton}
+            <ButtonWrapper>
+              {headerButtons}
+              {closeButton}
+            </ButtonWrapper>
           </NotionHeader>
           {conceptType !== 'gloss' ? (
             <>

package/src/Embed/index.ts

@@ -19,4 +19,5 @@ export { default as ConceptEmbed } from './ConceptEmbed';
 export { ConceptNotionV2 } from './conceptComponents';
 export { default as ConceptListEmbed } from './ConceptListEmbed';
 export { default as UnknownEmbed } from './UnknownEmbed';
+export { InlineConcept } from './ConceptEmbed';
 export type { HeartButtonType } from './types';

package/src/Frontpage/FrontpageMultidisciplinarySubject.tsx

@@ -2,9 +2,9 @@ import SafeLink, { SafeLinkButton } from '@ndla/safelink';
 import styled from '@emotion/styled';
 import { spacing, breakpoints, mq } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
+import { HeadingLevel } from '@ndla/typography';
 import SectionHeading from '../SectionHeading';
 import { MultidisciplinarySubjectIllustration as Illustration } from './illustrations/FrontpageIllustrations';
-import { HeadingLevel } from '../types';
 
 export const StyledSection = styled.section`
   position: relative;

package/src/Frontpage/FrontpageToolbox.tsx

@@ -2,9 +2,9 @@ import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import { spacing, breakpoints, mq } from '@ndla/core';
 import { SafeLinkButton } from '@ndla/safelink';
+import { HeadingLevel } from '@ndla/typography';
 import SectionHeading from '../SectionHeading';
 import { ToolboxIllustration as Illustration } from './illustrations/FrontpageIllustrations';
-import { HeadingLevel } from '../types';
 
 const StyledSection = styled.section`
   margin-top: ${spacing.large};

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -9,8 +9,8 @@
 import { CSSProperties, ReactNode, useMemo } from 'react';
 import { breakpoints, fonts, mq, spacing, spacingUnit } from '@ndla/core';
 import styled from '@emotion/styled';
+import { Heading } from '@ndla/typography';
 import { Article } from '../types';
-import { Heading } from '../Typography';
 import { ArticleByline } from '../Article';
 import { useMastheadHeight } from '../Masthead';
 

package/src/Gloss/Gloss.tsx

@@ -24,7 +24,7 @@ export interface Props {
     title: string;
     language: string;
   };
-  glossData: {
+  glossData?: {
     gloss: string;
     wordClass?: string;
     originalLanguage: string;
@@ -98,63 +98,70 @@ const Gloss = ({ title, glossData, audio }: Props) => {
 
   return (
     <>
-      <Container>
-        <Wrapper>
-          <GlossContainer>
-            <GlossSpan lang={glossData.originalLanguage}>{glossData.gloss}</GlossSpan>
-            {glossData.transcriptions.traditional && (
-              <span
-                key={t('gloss.transcriptions.traditional')}
-                aria-label={t('gloss.transcriptions.traditional')}
-                lang={glossData.originalLanguage}
-              >
-                {glossData.transcriptions.traditional}
-              </span>
-            )}
-            {glossData.transcriptions.pinyin && (
-              <span
-                key={t('gloss.transcriptions.pinyin')}
-                aria-label={t('gloss.transcriptions.pinyin')}
-                lang={glossData.originalLanguage}
-              >
-                {glossData.transcriptions.pinyin}
-              </span>
-            )}
-            {glossData.wordClass && (
-              <TypeSpan aria-label={t('gloss.wordClass')}>{t(`wordClass.${glossData.wordClass}`)}</TypeSpan>
-            )}
-          </GlossContainer>
-          {audio?.src && <SpeechControl src={audio.src} title={audio.title}></SpeechControl>}
-        </Wrapper>
-        <span>{title.title}</span>
-      </Container>
-      {glossData.examples && glossData.examples.length > 0 && (
-        <AccordionRoot type="single" collapsible>
-          <AccordionItem value="1">
-            <StyledAccordionHeader>{t('gloss.examples')}</StyledAccordionHeader>
-            <StyledAccordionContent>
-              {glossData.examples.map((example, index) => (
-                <div key={index}>
-                  {example.map((translation, innerIndex) => (
-                    <div key={`${index}_${innerIndex}`}>
-                      <TranslatedText data-first={innerIndex === 0}>{translation.example}</TranslatedText>
-                      {translation.transcriptions.pinyin && (
-                        <TranslatedText key={t('gloss.transcriptions.pinyin')} lang={glossData.originalLanguage}>
-                          {translation.transcriptions?.pinyin}
-                        </TranslatedText>
-                      )}
-                      {translation.transcriptions.traditional && (
-                        <TranslatedText key={t('gloss.transcriptions.traditional')} lang={glossData.originalLanguage}>
-                          {translation.transcriptions?.traditional}
-                        </TranslatedText>
-                      )}
+      {glossData && (
+        <>
+          <Container>
+            <Wrapper>
+              <GlossContainer>
+                <GlossSpan lang={glossData.originalLanguage}>{glossData.gloss}</GlossSpan>
+                {glossData.transcriptions.traditional && (
+                  <span
+                    key={t('gloss.transcriptions.traditional')}
+                    aria-label={t('gloss.transcriptions.traditional')}
+                    lang={glossData.originalLanguage}
+                  >
+                    {glossData.transcriptions.traditional}
+                  </span>
+                )}
+                {glossData.transcriptions.pinyin && (
+                  <span
+                    key={t('gloss.transcriptions.pinyin')}
+                    aria-label={t('gloss.transcriptions.pinyin')}
+                    lang={glossData.originalLanguage}
+                  >
+                    {glossData.transcriptions.pinyin}
+                  </span>
+                )}
+                {glossData.wordClass && (
+                  <TypeSpan aria-label={t('gloss.wordClass')}>{t(`wordClass.${glossData.wordClass}`)}</TypeSpan>
+                )}
+              </GlossContainer>
+              {audio?.src && <SpeechControl src={audio.src} title={audio.title}></SpeechControl>}
+            </Wrapper>
+            <span>{title.title}</span>
+          </Container>
+          {glossData.examples && glossData.examples.length > 0 && (
+            <AccordionRoot type="single" collapsible>
+              <AccordionItem value="1">
+                <StyledAccordionHeader>{t('gloss.examples')}</StyledAccordionHeader>
+                <StyledAccordionContent>
+                  {glossData.examples.map((example, index) => (
+                    <div key={index}>
+                      {example.map((translation, innerIndex) => (
+                        <div key={`${index}_${innerIndex}`}>
+                          <TranslatedText data-first={innerIndex === 0}>{translation.example}</TranslatedText>
+                          {translation.transcriptions.pinyin && (
+                            <TranslatedText key={t('gloss.transcriptions.pinyin')} lang={glossData.originalLanguage}>
+                              {translation.transcriptions?.pinyin}
+                            </TranslatedText>
+                          )}
+                          {translation.transcriptions.traditional && (
+                            <TranslatedText
+                              key={t('gloss.transcriptions.traditional')}
+                              lang={glossData.originalLanguage}
+                            >
+                              {translation.transcriptions?.traditional}
+                            </TranslatedText>
+                          )}
+                        </div>
+                      ))}
                     </div>
                   ))}
-                </div>
-              ))}
-            </StyledAccordionContent>
-          </AccordionItem>
-        </AccordionRoot>
+                </StyledAccordionContent>
+              </AccordionItem>
+            </AccordionRoot>
+          )}
+        </>
       )}
     </>
   );

package/src/InfoWidget/InfoWidget.tsx

@@ -5,8 +5,8 @@ import { Forward } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import { colors, fonts, spacing } from '@ndla/core';
 
+import { HeadingLevel } from '@ndla/typography';
 import SectionHeading from '../SectionHeading';
-import { HeadingLevel } from '../types';
 
 interface InfoWidgetSectionProps {
   center?: boolean;

package/src/LearningPaths/LearningPathInformation.tsx

@@ -10,7 +10,7 @@ import styled from '@emotion/styled';
 import { spacing, spacingUnit, breakpoints, mq, colors } from '@ndla/core';
 import { getLicenseByAbbreviation } from '@ndla/licenses';
 import { LicenseByline } from '@ndla/notion';
-import { Heading } from '../Typography';
+import { Heading } from '@ndla/typography';
 
 type StyledWrapperProps = {
   invertedStyle?: boolean;

package/src/LinkBlock/LinkBlock.tsx

@@ -14,7 +14,7 @@ import { Forward, CalendarEd } from '@ndla/icons/common';
 import { breakpoints, colors, spacing, mq } from '@ndla/core';
 import { LinkBlockEmbedData } from '@ndla/types-embed';
 import { useMemo } from 'react';
-import Heading from '../Typography/Heading';
+import { Heading } from '@ndla/typography';
 import { usePossiblyRelativeUrl } from '../utils/relativeUrl';
 
 const StyledForward = styled(Forward)`

package/src/MultidisciplinarySubject/MultidisciplinarySubject.tsx

@@ -2,11 +2,11 @@ import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { breakpoints, mq } from '@ndla/core';
+import { Heading } from '@ndla/typography';
 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;

package/src/Navigation/NavigationBox.tsx

@@ -8,7 +8,7 @@ import { Switch } from '@ndla/switch';
 import { uuid } from '@ndla/util';
 import { useTranslation } from 'react-i18next';
 import { HumanMaleBoard } from '@ndla/icons/common';
-import { Heading } from '../Typography';
+import { Heading } from '@ndla/typography';
 
 const StyledWrapper = styled.nav`
   margin: 20px 0 34px;