@ndla/ui 37.1.3 → 38.0.0

package/src/CompetenceGoals/CompetenceGoalsDialog.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import React, { ComponentProps, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { breakpoints, fonts, mq } from '@ndla/core';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
+import { breakpoints, mq } from '@ndla/core';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTitle, ModalProps } from '@ndla/modal';
 import { FooterHeaderIcon } from '@ndla/icons/common';
 import styled from '@emotion/styled';
 
@@ -21,28 +21,9 @@ const HeaderWrapper = styled.div`
   width: 100%;
 `;
 
-const HeadingWrapper = styled.h1`
-  display: flex;
-  align-items: center;
-  ${fonts.sizes('18px', '32px')};
-  margin: 0;
-  font-weight: ${fonts.weight.semibold};
-`;
-
 interface Props {
   children?: ReactNode;
-  modalProps?: ComponentProps<typeof Modal>;
-  isOpen?: boolean;
-  onClose?: () => void;
   subjectName?: string;
-  curriculums?: {
-    id: string;
-    name: string;
-    goals?: {
-      id: string;
-      name: string;
-    }[];
-  }[];
 }
 
 const CompetenceGoalsWrapper = styled.div`
@@ -57,29 +38,23 @@ const CompetenceGoalsWrapper = styled.div`
   }
 `;
 
-export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName, modalProps }: Props) => {
+export const CompetenceGoalsDialog = ({
+  children,
+  subjectName,
+  ...modalProps
+}: Props & Omit<ModalProps, 'children'>) => {
   const { t } = useTranslation();
-  const iconId = 'popupCompetenceGoals';
 
   return (
-    <Modal
-      labelledBy={iconId}
-      {...modalProps}
-      controllable
-      isOpen={isOpen}
-      onClose={onClose}
-      size="fullscreen"
-      backgroundColor="light-gradient"
-      narrow
-    >
+    <Modal {...(modalProps as ModalProps)} size="full">
       {(close) => (
         <>
-          <ModalHeader modifier="menu">
+          <ModalHeader>
             <HeaderWrapper>
-              <HeadingWrapper>
-                <FooterHeaderIcon id={iconId} size="24px" style={{ marginRight: '20px' }} />
+              <ModalTitle>
+                <FooterHeaderIcon size="24px" style={{ marginRight: '20px' }} />
                 {t('competenceGoals.modalText')} {subjectName && ` \u2022 ${subjectName}`}
-              </HeadingWrapper>
+              </ModalTitle>
               <ModalCloseButton onClick={close} title={t('competenceGoals.competenceGoalClose')} />
             </HeaderWrapper>
           </ModalHeader>

package/src/Filter/FilterButtons.tsx

@@ -11,7 +11,7 @@ import { ButtonV2 } from '@ndla/button';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { Cross as CrossIcon, Plus as PlusIcon } from '@ndla/icons/action';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
 import ToggleItem from './ToggleItem';
 import FilterCarousel from './FilterCarousel';
 
@@ -127,10 +127,9 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
             </StyledButtonElementWrapper>
           ))}
           <Modal
-            label={t('searchPage.searchFilterMessages.resourceTypeFilter.button')}
-            size="fullscreen"
+            aria-label={t('searchPage.searchFilterMessages.resourceTypeFilter.button')}
+            size="full"
             animation="subtle"
-            backgroundColor="white"
             activateButton={
               <StyledButtonElementWrapper>
                 <ButtonV2 colorTheme="light" size="normal" shape="pill">
@@ -144,7 +143,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
           >
             {(onClose: () => void) => (
               <>
-                <ModalHeader modifier={['left-align']}>
+                <ModalHeader>
                   <h1>{heading}</h1>
                   <ModalCloseButton title={t('modal.closeModal')} onClick={onClose} />
                 </ModalHeader>

package/src/Filter/FilterListPhone.tsx

@@ -8,7 +8,7 @@
 
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
 import { ButtonV2 } from '@ndla/button';
 import debounce from 'lodash/debounce';
 import { classes } from './filterClasses';
@@ -138,8 +138,7 @@ const FilterListPhone = ({
           />
         )}
         <Modal
-          size="fullscreen"
-          backgroundColor="grey"
+          size="full"
           activateButton={
             <ButtonV2 variant="outline" {...classes('modal-button')}>
               {messages.openFilter}
@@ -148,7 +147,7 @@ const FilterListPhone = ({
         >
           {(onClose) => (
             <>
-              <ModalHeader modifier={['left-align']}>
+              <ModalHeader>
                 <div {...classes('modal-header')}>
                   <div {...classes('modal-heading')}>
                     {!isNarrowScreen && label && <h1 {...classes('label')}>{label}</h1>}

package/src/Footer/index.ts

@@ -9,6 +9,5 @@
 import Footer from './Footer';
 import { FooterText } from './FooterText';
 import { EditorName } from './EditorName';
-import FooterAuth from './FooterAuth';
 
-export { Footer, FooterText, EditorName, FooterAuth };
+export { Footer, FooterText, EditorName };

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -7,12 +7,13 @@
  */
 
 import React, { ReactChild, ReactChildren, ReactNode } from 'react';
-import { spacing, mq, breakpoints } from '@ndla/core';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
+import { spacing, mq, breakpoints, colors } from '@ndla/core';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
 import { css } from '@emotion/react';
 import { ButtonV2 } from '@ndla/button';
 import { LearningPath } from '@ndla/icons/contentType';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
 
 const buttonToggleCss = css`
   ${mq.range({ from: breakpoints.tablet })} {
@@ -29,6 +30,10 @@ const buttonToggleCss = css`
   }
 `;
 
+const StyledModal = styled(Modal)`
+  background-color: ${colors.brand.greyLightest};
+`;
+
 type ModalWrapperProps = {
   innerWidth: number;
   children: (arg: VoidFunction) => ReactChild | ReactChildren | ReactNode;
@@ -38,10 +43,9 @@ const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {
   const { t } = useTranslation();
   if (innerWidth < 601) {
     return (
-      <Modal
-        backgroundColor="grey"
+      <StyledModal
         animationDuration={200}
-        size="fullscreen"
+        size="full"
         activateButton={
           <ButtonV2 css={buttonToggleCss}>
             <LearningPath />
@@ -57,7 +61,7 @@ const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {
             <ModalBody>{children(closeModal)}</ModalBody>
           </>
         )}
-      </Modal>
+      </StyledModal>
     );
   }
   return <>{children(() => {})}</>;

package/src/Masthead/MastheadSearchModal.tsx

@@ -1,25 +1,27 @@
-import React, { ReactChild, ReactChildren, ReactNode } from 'react';
-import Modal from '@ndla/modal';
+import React, { ReactChild, ReactChildren, ReactNode, useState } from 'react';
+import { Drawer } from '@ndla/modal';
 import { IconButtonV2 as IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
-import { isFunction } from '@ndla/util';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { spacing, mq, breakpoints, colors, shadows } from '@ndla/core';
+import { spacing, mq, breakpoints, colors } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import ToggleSearchButton from '../Search/ToggleSearchButton';
 
 interface Props {
   onClose: VoidFunction;
-  children: (arg: Function) => ReactChild | ReactChildren | ReactNode;
+  children: (arg: () => void) => ReactChild | ReactChildren | ReactNode;
   hideOnNarrowScreen?: boolean;
   ndlaFilm?: boolean;
 }
 
+const StyledDrawer = styled(Drawer)`
+  background-color: ${colors.brand.greyLightest};
+`;
+
 const StyledHeader = styled.div`
   display: flex;
   gap: ${spacing.small};
-  align-items: center;
+  align-items: flex-start;
   ${mq.range({ from: breakpoints.tablet })} {
     width: 1024px;
     max-width: calc(100vw - 100px);
@@ -33,11 +35,14 @@ const StyledHeader = styled.div`
 
   display: flex;
   padding-top: ${spacing.small};
+  padding-bottom: ${spacing.small};
   ${mq.range({ from: breakpoints.tablet })} {
     padding-top: ${spacing.normal};
+    padding-bottom: ${spacing.normal};
   }
   ${mq.range({ from: breakpoints.desktop })} {
     padding-top: calc(${spacing.normal} + ${spacing.small});
+    padding-bottom: calc(${spacing.normal} + ${spacing.small});
   }
   > input {
     width: 100%;
@@ -55,76 +60,45 @@ const StyledHeader = styled.div`
   }
 `;
 
-const modalStyles = css`
-  & > [data-reach-dialog-content] {
-    position: fixed;
-    background: none;
-    top: 0;
-    right: 0;
-    left: 0;
-    height: 74px;
-    ${mq.range({ from: breakpoints.tablet })} {
-      height: 110px;
-    }
-    ${mq.range({ from: breakpoints.desktop })} {
-      height: 136px;
-    }
-    overflow-y: visible;
-    box-shadow: none;
-  }
-`;
-
-const extraBackdrop = css`
-  position: absolute;
-  z-index: -1;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 74px;
-  background: ${colors.brand.greyLighter};
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: 110px;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    height: 136px;
-  }
-  box-shadow: ${shadows.searchHeader};
-`;
-
 const MastheadSearchModal = ({ onClose: onSearchClose, children, hideOnNarrowScreen, ndlaFilm }: Props) => {
   const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
   return (
-    <Modal
-      label={t('searchPage.searchFieldPlaceholder')}
-      backgroundColor="grey"
-      animation="slide-down"
-      animationDuration={200}
-      size="full-width"
-      onClose={onSearchClose}
-      css={modalStyles}
-      activateButton={
-        <ToggleSearchButton hideOnNarrowScreen={hideOnNarrowScreen} ndlaFilm={ndlaFilm}>
-          {t('masthead.menu.search')}
-        </ToggleSearchButton>
-      }
-    >
-      {(closeModal: VoidFunction) => (
-        <>
-          <div css={extraBackdrop} />
-          <StyledHeader>
-            {isFunction(children) ? children(closeModal) : children}
-            <IconButton
-              aria-label={t('welcomePage.closeSearch')}
-              variant="ghost"
-              colorTheme="light"
-              onClick={closeModal}
-            >
-              <Cross className="c-icon--medium" />
-            </IconButton>
-          </StyledHeader>
-        </>
-      )}
-    </Modal>
+    <>
+      <ToggleSearchButton hideOnNarrowScreen={hideOnNarrowScreen} onClick={() => setIsOpen(true)} ndlaFilm={ndlaFilm}>
+        {t('masthead.menu.search')}
+      </ToggleSearchButton>
+      <StyledDrawer
+        controlled
+        aria-label={t('searchPage.searchFieldPlaceholder')}
+        position="top"
+        expands
+        size="small"
+        animation="slideIn"
+        animationDuration={200}
+        isOpen={isOpen}
+        onClose={() => {
+          setIsOpen(false);
+          onSearchClose();
+        }}
+      >
+        {(closeModal) => (
+          <>
+            <StyledHeader>
+              {children(closeModal)}
+              <IconButton
+                aria-label={t('welcomePage.closeSearch')}
+                variant="ghost"
+                colorTheme="light"
+                onClick={closeModal}
+              >
+                <Cross className="c-icon--medium" />
+              </IconButton>
+            </StyledHeader>
+          </>
+        )}
+      </StyledDrawer>
+    </>
   );
 };
 

package/src/MyNdla/SettingsMenu.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { isMobile, isTablet } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
 import { IconButtonV2, MenuItemProps, MenuButton, ButtonV2 } from '@ndla/button';
-import { Drawer, ModalBody, ModalCloseButton, ModalHeaderV2 } from '@ndla/modal';
+import { Drawer, ModalBody, ModalCloseButton, ModalHeader } from '@ndla/modal';
 import { HorizontalMenu } from '@ndla/icons/contentType';
 import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
 
@@ -58,10 +58,10 @@ const SettingsMenu = ({ menuItems, children }: Props) => {
       >
         {(close) => (
           <>
-            <ModalHeaderV2>
+            <ModalHeader>
               <h1>{t('myNdla.settings')}</h1>
               <ModalCloseButton onClick={close} />
-            </ModalHeaderV2>
+            </ModalHeader>
             <StyledModalBody>
               {children?.(close)}
               {!!menuItems?.length && (

package/src/NDLAFilm/AboutNdlaFilm.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { ModalHeader, ModalBody, ModalCloseButton, ModalV2 } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
 import { colors, spacing, mq, breakpoints } from '@ndla/core';
 import { ButtonV2 as Button } from '@ndla/button';
 import VisualElement from './VisualElement';
@@ -64,7 +64,7 @@ const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
         <div>
           <h2 id={titleId}>{aboutNDLAVideo.title}</h2>
           <p>{aboutNDLAVideo.description}</p>
-          <ModalV2 size="full" activateButton={<Button variant="link">{t('ndlaFilm.about.more')}</Button>}>
+          <Modal size="full" activateButton={<Button variant="link">{t('ndlaFilm.about.more')}</Button>}>
             {(onClose) => (
               <>
                 <ModalHeader>
@@ -73,7 +73,7 @@ const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
                 <ModalBody>{moreAboutNdlaFilm}</ModalBody>
               </>
             )}
-          </ModalV2>
+          </Modal>
         </div>
       </StyledAside>
     </div>

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -1,9 +1,9 @@
-import React, { Fragment, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import Modal, { ModalBody, ModalHeader, ModalCloseButton } from '@ndla/modal';
+import { ModalBody, ModalHeader, ModalCloseButton, Modal, ModalTitle } from '@ndla/modal';
 import Tooltip from '@ndla/tooltip';
 import { Switch } from '@ndla/switch';
 import { LearningPathQuiz } from '@ndla/icons/contentType';
@@ -170,8 +170,6 @@ const ResourcesTopicTitle = ({
     heading = <TopicTitle css={topicTitleSingleStyle}>{messages.label}</TopicTitle>;
   }
 
-  const tooltipId = 'popupDialogTooltip';
-
   return (
     <TopicTitleWrapper css={invertedStyle ? invertedTopicTitleWrapperStyle : undefined}>
       <div>
@@ -188,15 +186,13 @@ const ResourcesTopicTitle = ({
             css={invertedStyle ? invertedSwitchCSS : switchCSS}
           />
           <Modal
-            labelledBy={tooltipId}
-            narrow
             wrapperFunctionForButton={(activateButton: ReactNode) => (
               <TooltipWrapper>
                 <Tooltip tooltip={t('resource.dialogTooltip')}>{activateButton}</Tooltip>
               </TooltipWrapper>
             )}
             activateButton={
-              <TooltipButton id={tooltipId} aria-label={t('resource.dialogTooltip')}>
+              <TooltipButton aria-label={t('resource.dialogTooltip')}>
                 <HelpIcon invertedStyle={invertedStyle} />
               </TooltipButton>
             }
@@ -204,10 +200,10 @@ const ResourcesTopicTitle = ({
             {(onClose: () => void) => (
               <>
                 <ModalHeader>
+                  <ModalTitle>{t('resource.dialogHeading')}</ModalTitle>
                   <ModalCloseButton title={t('modal.closeModal')} onClick={onClose} />
                 </ModalHeader>
                 <ModalBody>
-                  <h1>{t('resource.dialogHeading')}</h1>
                   <hr />
                   <p>{t('resource.dialogText1')}</p>
                   <p>{t('resource.dialogText2')}</p>

package/src/SearchTypeResult/PopupFilter.tsx

@@ -8,8 +8,8 @@
 
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
-import Modal, { ModalCloseButton, ModalBody } from '@ndla/modal';
-import { breakpoints, fonts, mq, spacing } from '@ndla/core';
+import { ModalCloseButton, ModalBody, Modal, ModalTitle } from '@ndla/modal';
+import { breakpoints, mq, spacing } from '@ndla/core';
 import { ButtonV2 } from '@ndla/button';
 import { useTranslation } from 'react-i18next';
 import { ToggleItem } from '../Filter';
@@ -27,10 +27,6 @@ const ModalHeaderWrapper = styled.div`
   margin-bottom: ${spacing.normal};
 `;
 
-const ModalHeading = styled.h1`
-  ${fonts.sizes('22px', 1.2)};
-  margin: 0;
-`;
 const ModalContent = styled.div`
   max-width: 1040px;
   flex-grow: 1;
@@ -95,21 +91,20 @@ const PopupFilter = ({
 
   return (
     <Modal
-      labelledBy={headingId}
-      controllable
-      backgroundColor="white"
+      aria-labelledby={headingId}
+      controlled
       animation="subtle"
       animationDuration={50}
       onClose={onClose}
       isOpen={isOpen}
-      size="fullscreen"
+      size="full"
     >
       {() => (
         <ModalBody>
           <ModalWrapper>
             <ModalContent>
               <ModalHeaderWrapper>
-                <ModalHeading id={headingId}>{t('searchPage.searchFilterMessages.filterLabel')}</ModalHeading>
+                <ModalTitle>{t('searchPage.searchFilterMessages.filterLabel')}</ModalTitle>
                 <ModalCloseButton onClick={() => onClose()} title={t('searchPage.close')} />
               </ModalHeaderWrapper>
               {subjectCategories && programmes && (

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -12,7 +12,7 @@ import { Additional, Core } from '@ndla/icons/common';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { ButtonV2 } from '@ndla/button';
-import { ModalV2, ModalCloseButton } from '@ndla/modal';
+import { Modal, ModalCloseButton, ModalHeader, ModalTitle } from '@ndla/modal';
 import { useTranslation } from 'react-i18next';
 
 const BreadcrumbPath = styled.div`
@@ -34,22 +34,6 @@ const ModalButton = styled(ButtonV2)`
   }
 `;
 
-const ModalHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: ${spacing.normal} ${spacing.small};
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.normal} ${spacing.large};
-  }
-`;
-
-const ModalHeading = styled.h2`
-  margin: 0;
-  ${fonts.sizes('16px', '20px')};
-  font-weight: 600;
-`;
-
 const ModalContent = styled.div`
   padding: 0 ${spacing.small} ${spacing.normal};
   ${mq.range({ from: breakpoints.tablet })} {
@@ -99,8 +83,7 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
     <Breadcrumb breadcrumb={mainContext.breadcrumb}>
       &nbsp;
       {contexts.length > 1 && (
-        <ModalV2
-          label={t('searchPage.contextModal.ariaLabel')}
+        <Modal
           activateButton={
             <ModalButton variant="link">
               {t('searchPage.contextModal.button', {
@@ -114,7 +97,7 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
           {(onClose: () => void) => (
             <>
               <ModalHeader>
-                <ModalHeading>{t('searchPage.contextModal.heading')}</ModalHeading>
+                <ModalTitle>{t('searchPage.contextModal.heading')}</ModalTitle>
                 <ModalCloseButton onClick={onClose} title={t('searchPage.close')} />
               </ModalHeader>
               <ModalContent>
@@ -131,7 +114,7 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
               </ModalContent>
             </>
           )}
-        </ModalV2>
+        </Modal>
       )}
     </Breadcrumb>
   );

package/src/Topic/Topic.tsx

@@ -12,7 +12,7 @@ import { animations, breakpoints, colors, fonts, mq, spacing } from '@ndla/core'
 
 import parse from 'html-react-parser';
 import { ChevronDown, ChevronUp, PlayCircleFilled } from '@ndla/icons/common';
-import { ModalCloseButton, ModalV2, ModalHeaderV2 } from '@ndla/modal';
+import { ModalCloseButton, Modal, ModalHeader } from '@ndla/modal';
 import { ButtonV2 } from '@ndla/button';
 import { CursorClick, ExpandTwoArrows } from '@ndla/icons/action';
 import { css } from '@emotion/react';
@@ -182,7 +182,7 @@ const StyledContentWrapper = styled.div<InvertItProps>`
   background-color: ${colors.white};
 `;
 
-const ModalHeader = styled(ModalHeaderV2)`
+const StyledModalHeader = styled(ModalHeader)`
   padding: ${spacing.small} ${spacing.nsmall};
 `;
 
@@ -274,8 +274,8 @@ const Topic = ({
         {topic.image && (
           <TopicHeaderVisualElementWrapper>
             {topic.visualElement ? (
-              <ModalV2
-                label={t('topicPage.imageModal')}
+              <Modal
+                aria-label={t('topicPage.imageModal')}
                 activateButton={
                   <VisualElementButton
                     variant="stripped"
@@ -297,13 +297,13 @@ const Topic = ({
               >
                 {(onClose: () => void) => (
                   <>
-                    <ModalHeader>
+                    <StyledModalHeader>
                       <ModalCloseButton onClick={onClose} title={t('modal.closeModal')} />
-                    </ModalHeader>
+                    </StyledModalHeader>
                     {topic.visualElement && topic.visualElement.element}
                   </>
                 )}
-              </ModalV2>
+              </Modal>
             ) : (
               <TopicHeaderImage
                 src={`${topic.image.url}?${makeSrcQueryString(400, topic.image.crop, topic.image.focalPoint)}`}

package/src/User/index.ts

@@ -6,7 +6,6 @@
  *
  */
 
-import AuthModal from './AuthModal';
 import { UserInfo } from './UserInfo';
 import type {
   AffiliationType,
@@ -20,4 +19,3 @@ import type {
 
 export { UserInfo };
 export type { AffiliationType, FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser };
-export default AuthModal;

package/src/index.ts

@@ -98,7 +98,7 @@ export {
 
 export { FilterList, FilterListPhone, FilterButtons, ToggleItem } from './Filter';
 
-export { Footer, EditorName, FooterText, FooterAuth } from './Footer';
+export { Footer, EditorName, FooterText } from './Footer';
 
 export {
   Figure,
@@ -133,9 +133,7 @@ export { default as ContentTypeResult } from './Search/ContentTypeResult';
 export { SearchFieldForm } from './Search/SearchFieldForm';
 
 export { default as MastheadSearchModal } from './Masthead/MastheadSearchModal';
-export { default as MastheadAuthModal } from './Masthead/MastheadAuthModal';
 export { UserInfo } from './User';
-export { default as AuthModal } from './User';
 export type {
   AffiliationType,
   FeideGoGroup,

package/src/locale/messages-en.ts

@@ -998,6 +998,7 @@ const messages = {
   },
   audio: {
     play: 'Play',
+    pause: 'Pause',
     download: 'Download audio',
     reuse: 'Use audio',
     error: {

package/src/locale/messages-nb.ts

@@ -997,6 +997,7 @@ const messages = {
   },
   audio: {
     play: 'Spill av',
+    pause: 'Pause',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {