@ndla/ui 34.0.0 → 34.1.0

package/src/Topic/Topic.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import React, { ReactNode, MouseEvent } from 'react';
+import React, { ReactNode, MouseEvent, ComponentType } from 'react';
 import styled from '@emotion/styled';
 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 Modal, { ModalCloseButton, ModalHeader, ModalBody } from '@ndla/modal';
-import Button from '@ndla/button';
+import { ModalCloseButton, ModalV2, ModalHeaderV2 } from '@ndla/modal';
+import { ButtonV2 } from '@ndla/button';
 import { CursorClick, ExpandTwoArrows } from '@ndla/icons/action';
 import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
@@ -26,30 +26,31 @@ import { MessageBox } from '../Messages';
 type InvertItProps = {
   invertedStyle?: boolean;
 };
-type FrameProps = {
-  frame?: boolean;
-};
 
-const Wrapper = styled.section<FrameProps>`
-  ${(props) =>
-    props.frame &&
-    css`
-      ${mq.range({ from: breakpoints.tabletWide })} {
-        padding: 40px 40px;
-        border: 2px solid #d1d6db;
-      }
-      ${mq.range({ from: breakpoints.desktop })} {
-        padding: 40px 80px;
-      }
-      ${mq.range({ from: '1180px' })} {
-        padding: 60px 160px;
-      }
-    `}
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.small};
+`;
+
+const frameStyle = css`
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    padding: 40px 40px;
+    border: 2px solid ${colors.brand.neutral7};
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    padding: 40px 80px;
+  }
+  ${mq.range({ from: '1180px' })} {
+    padding: 60px 160px;
+  }
+`;
+
+const _invertedStyle = css`
+  color: ${colors.white};
 `;
 
 const TopicHeaderVisualElementWrapper = styled.div`
-  float: right;
-  margin-left: ${spacing.normal};
   position: relative;
   width: 100px;
   height: 100px;
@@ -57,7 +58,7 @@ const TopicHeaderVisualElementWrapper = styled.div`
     width: 150px;
     height: 150px;
   }
-  ${mq.range({ from: breakpoints.tablet })} {
+  ${mq.range({ from: breakpoints.tabletWide })} {
     width: 200px;
     height: 200px;
   }
@@ -68,10 +69,11 @@ const ShowVisualElementWrapper = styled.div`
   width: 100%;
   height: 100%;
   overflow: hidden;
+  aspect-ratio: 1;
   -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari fix */
 `;
 
-const VisualElementButton = styled(Button)`
+const VisualElementButton = styled(ButtonV2)`
   color: ${colors.brand.secondary};
   width: 100%;
   height: 100%;
@@ -79,6 +81,7 @@ const VisualElementButton = styled(Button)`
 
 const TopicHeaderImage = styled.img`
   border-radius: 50%;
+  aspect-ratio: 1;
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -94,6 +97,10 @@ const ExpandVisualElementButton = styled.span`
   right: -10px;
   bottom: -4px;
   transition: all ${animations.durations.fast};
+  svg {
+    width: 24px;
+    height: 24px;
+  }
   ${VisualElementButton}:hover & {
     right: 10px;
   }
@@ -118,62 +125,28 @@ const TopicHeaderOverlay = styled.div`
   }
 `;
 
-const TopicHeading = styled.h1<InvertItProps>`
-  margin: ${spacing.medium} 0 0;
-  font-weight: ${fonts.weight.bold};
+const TopicIntroductionWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.xsmall};
+  justify-content: space-between;
+`;
+
+const HeadingWrapper = styled.hgroup`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  ${fonts.sizes('24px', '28px')};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('32px', '28px')};
-    margin: 40px 0 0;
+  gap: ${spacing.small};
+  h1 {
+    margin: 0;
   }
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    margin: 50px 0 0;
-    ${fonts.sizes('38px', '48px')};
-  }
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      color: #fff;
-    `}
-`;
-
-const StyledHeadingText = styled.span`
-  margin-right: 28px;
-`;
-
-const StyledAdditionalResourceMark = styled.span`
-  text-align: center;
-  display: inline-block;
-  line-height: 18px;
-  width: 20px;
-  height: 20px;
-  border: 1px solid ${colors.brand.dark};
-  border-radius: 100px;
-  margin-right: 7px;
-`;
-const StyledAdditionalResource = styled.span`
-  font-weight: ${fonts.weight.semibold};
-  ${fonts.sizes('12px', '15px')};
-  color: ${colors.brand.dark};
 `;
 
-const TopicIntroduction = styled.div<InvertItProps>`
+const TopicIntroduction = styled.div`
   font-weight: ${fonts.weight.light};
   max-width: 612px;
-  margin-top: ${spacing.xsmall};
   ${mq.range({ from: breakpoints.tablet })} {
     ${fonts.sizes('22px', '32px')};
   }
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      color: #fff;
-    `}
 `;
 
 const StyledButtonWrapper = styled.div<InvertItProps>`
@@ -193,22 +166,32 @@ const StyledButtonWrapper = styled.div<InvertItProps>`
     `}
 `;
 
+const AdditionalIcon = styled.span`
+  padding: 1px;
+  border: 1px solid currentColor;
+  border-radius: 100%;
+  font-size: 15px;
+  width: 25px;
+  text-align: center;
+`;
+
 const StyledContentWrapper = styled.div<InvertItProps>`
   padding-top: ${spacing.normal};
-  margin-top: 0;
   border-left: 6px solid ${colors.brand.light};
-
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      background: #fff;
-    `}
+  color: ${colors.text.primary};
+  background-color: ${colors.white};
 `;
 
-const StyledNavigationBoxWrapper = styled.div`
-  padding-top: ${spacing.xxsmall};
+const ModalHeader = styled(ModalHeaderV2)`
+  padding: ${spacing.small} ${spacing.nsmall};
 `;
 
+const icons: Record<VisualElementProps['type'], ComponentType> = {
+  image: ExpandTwoArrows,
+  video: PlayCircleFilled,
+  other: CursorClick,
+};
+
 type VisualElementProps = {
   type: 'image' | 'video' | 'other';
   element: ReactNode;
@@ -257,124 +240,114 @@ const Topic = ({
   children,
 }: TopicProps) => {
   const { t } = useTranslation();
+  const contentId = `expanded-description-${id}`;
+  const testId = 'nav-topic-about';
+  const VisualElementIcon = topic?.visualElement?.type ? icons[topic.visualElement.type] : null;
+  const wrapperStyle = [frame ? frameStyle : undefined, invertedStyle ? _invertedStyle : undefined];
+  if (isLoading || !topic) {
+    return (
+      <Wrapper css={wrapperStyle} data-testid={testId}>
+        {isLoading ? <Loader /> : null}
+      </Wrapper>
+    );
+  }
+
   return (
-    <Wrapper frame={frame} data-testid="nav-topic-about">
-      {isLoading ? (
-        <Loader />
-      ) : (
-        <>
-          {topic && (
-            <>
-              {topic.image && (
-                <TopicHeaderVisualElementWrapper>
-                  {topic.visualElement ? (
-                    <>
-                      <Modal
-                        label={t('topicPage.imageModal')}
-                        activateButton={
-                          <VisualElementButton
-                            stripped
-                            title={
-                              topic.visualElement.type === 'image' ? t('image.largeSize') : t('visualElement.show')
-                            }>
-                            <ShowVisualElementWrapper>
-                              <TopicHeaderImage
-                                src={`${topic.image.url}?${makeSrcQueryString(
-                                  800,
-                                  topic.image.crop,
-                                  topic.image.focalPoint,
-                                )}`}
-                                alt={topic.image.alt}
-                              />
-                              <TopicHeaderOverlay />
-                            </ShowVisualElementWrapper>
-                            <ExpandVisualElementButton>
-                              {topic.visualElement.type === 'image' && (
-                                <ExpandTwoArrows style={{ width: '24px', height: '24px' }} />
-                              )}
-                              {topic.visualElement.type === 'video' && (
-                                <PlayCircleFilled style={{ width: '24px', height: '24px' }} />
-                              )}
-                              {topic.visualElement.type === 'other' && (
-                                <CursorClick style={{ width: '24px', height: '24px' }} />
-                              )}
-                            </ExpandVisualElementButton>
-                          </VisualElementButton>
-                        }
-                        animation="subtle"
-                        animationDuration={50}
-                        backgroundColor="white"
-                        size="large">
-                        {(onClose: () => void) => (
-                          <>
-                            <ModalHeader>
-                              <ModalCloseButton onClick={onClose} title={t('modal.closeModal')} />
-                            </ModalHeader>
-                            <ModalBody modifier="no-side-padding-mobile">
-                              {topic.visualElement && topic.visualElement.element}
-                            </ModalBody>
-                          </>
-                        )}
-                      </Modal>
-                    </>
-                  ) : (
-                    <TopicHeaderImage
-                      src={`${topic.image.url}?${makeSrcQueryString(400, topic.image.crop, topic.image.focalPoint)}`}
-                      alt={topic.image.alt}
-                    />
-                  )}
-                </TopicHeaderVisualElementWrapper>
-              )}
-              <TopicHeading invertedStyle={invertedStyle} id={id} tabIndex={-1}>
-                <StyledHeadingText>{topic.title}</StyledHeadingText>
-                {isAdditionalTopic && (
-                  <StyledAdditionalResource>
-                    <StyledAdditionalResourceMark>T</StyledAdditionalResourceMark>
-                    {t('navigation.additionalTopic')}
-                  </StyledAdditionalResource>
+    <Wrapper css={wrapperStyle} data-testid={testId}>
+      <TopicIntroductionWrapper>
+        <div>
+          <HeadingWrapper>
+            <h1 id={id} tabIndex={-1}>
+              {topic.title}
+            </h1>
+            {isAdditionalTopic && (
+              <>
+                <AdditionalIcon aria-hidden="true">T</AdditionalIcon>
+                <span>{t('navigation.additionalTopic')}</span>
+              </>
+            )}
+          </HeadingWrapper>
+          <TopicIntroduction>
+            {renderMarkdown ? parse(renderMarkdown(topic.introduction)) : topic.introduction}
+          </TopicIntroduction>
+        </div>
+        {topic.image && (
+          <TopicHeaderVisualElementWrapper>
+            {topic.visualElement ? (
+              <ModalV2
+                label={t('topicPage.imageModal')}
+                activateButton={
+                  <VisualElementButton
+                    variant="stripped"
+                    title={topic.visualElement.type === 'image' ? t('image.largeSize') : t('visualElement.show')}>
+                    <ShowVisualElementWrapper>
+                      <TopicHeaderImage
+                        src={`${topic.image.url}?${makeSrcQueryString(800, topic.image.crop, topic.image.focalPoint)}`}
+                        alt={topic.image.alt}
+                      />
+                      <TopicHeaderOverlay />
+                    </ShowVisualElementWrapper>
+                    <ExpandVisualElementButton>{VisualElementIcon && <VisualElementIcon />}</ExpandVisualElementButton>
+                  </VisualElementButton>
+                }
+                animation="subtle"
+                animationDuration={50}
+                size="large">
+                {(onClose: () => void) => (
+                  <>
+                    <ModalHeader>
+                      <ModalCloseButton onClick={onClose} title={t('modal.closeModal')} />
+                    </ModalHeader>
+                    {topic.visualElement && topic.visualElement.element}
+                  </>
                 )}
-              </TopicHeading>
-              {messageBox && <MessageBox>{messageBox}</MessageBox>}
-              <TopicIntroduction invertedStyle={invertedStyle}>
-                {renderMarkdown ? parse(renderMarkdown(topic.introduction)) : topic.introduction}
-              </TopicIntroduction>
-              {onToggleShowContent && (
-                <StyledButtonWrapper invertedStyle={invertedStyle}>
-                  <Button
-                    aria-expanded={!!showContent}
-                    link
-                    onClick={() => {
-                      onToggleShowContent();
-                    }}>
-                    {showContent ? (
-                      <>
-                        {t('navigation.showShorterDescription')} <ChevronUp />
-                      </>
-                    ) : (
-                      <>
-                        {t('navigation.showLongerDescription')} <ChevronDown />
-                      </>
-                    )}
-                  </Button>
-                </StyledButtonWrapper>
-              )}
-              {showContent && <StyledContentWrapper invertedStyle={invertedStyle}>{children}</StyledContentWrapper>}
-              {subTopics && subTopics.length !== 0 && (
-                <StyledNavigationBoxWrapper>
-                  <NavigationBox
-                    colorMode="light"
-                    heading={t('navigation.topics')}
-                    items={subTopics}
-                    onClick={onSubTopicSelected}
-                    invertedStyle={invertedStyle}
-                  />
-                </StyledNavigationBoxWrapper>
+              </ModalV2>
+            ) : (
+              <TopicHeaderImage
+                src={`${topic.image.url}?${makeSrcQueryString(400, topic.image.crop, topic.image.focalPoint)}`}
+                alt={topic.image.alt}
+              />
+            )}
+          </TopicHeaderVisualElementWrapper>
+        )}
+      </TopicIntroductionWrapper>
+      {messageBox && <MessageBox>{messageBox}</MessageBox>}
+      <div>
+        {onToggleShowContent && (
+          <StyledButtonWrapper invertedStyle={invertedStyle}>
+            <ButtonV2
+              aria-expanded={!!showContent}
+              aria-controls={contentId}
+              variant="link"
+              onClick={() => onToggleShowContent()}>
+              {showContent ? (
+                <>
+                  {t('navigation.showShorterDescription')} <ChevronUp />
+                </>
+              ) : (
+                <>
+                  {t('navigation.showLongerDescription')} <ChevronDown />
+                </>
               )}
-              {topic.resources}
-            </>
-          )}
-        </>
+            </ButtonV2>
+          </StyledButtonWrapper>
+        )}
+        {showContent && (
+          <StyledContentWrapper id={contentId} invertedStyle={invertedStyle}>
+            {children}
+          </StyledContentWrapper>
+        )}
+      </div>
+      {subTopics && subTopics.length !== 0 && (
+        <NavigationBox
+          colorMode="light"
+          heading={t('navigation.topics')}
+          items={subTopics}
+          onClick={onSubTopicSelected}
+          invertedStyle={invertedStyle}
+        />
       )}
+      {topic.resources}
     </Wrapper>
   );
 };

package/src/locale/messages-en.ts

@@ -442,7 +442,7 @@ const messages = {
   article: {
     edition: 'Edition',
     publisher: 'Publisher',
-    lastUpdated: 'Last updated',
+    lastUpdated: 'Last revised date',
     closeLabel: 'Close',
     useContent: 'Cite or use',
     additionalLabel: 'Additional content',
@@ -772,6 +772,7 @@ const messages = {
     copyCode: 'Copy code',
   },
   ndlaFilm: {
+    heading: 'NDLA film',
     slideBackwardsLabel: 'Scroll backwards',
     slideForwardsLabel: 'Scroll forwards',
     movieMatchInCategory: 'Matches',
@@ -818,6 +819,7 @@ const messages = {
       shortFilm: 'Short film',
       all: 'All movies A-Z',
     },
+    allMovieGroupTitleLabel: 'Movies starting with {{letter}}',
     moreAboutNdlaFilm: {
       header: 'NDLA Film',
       firstParagraph:

package/src/locale/messages-nb.ts

@@ -439,7 +439,7 @@ const messages = {
       'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',
   },
   article: {
-    lastUpdated: 'Sist oppdatert',
+    lastUpdated: 'Sist faglig oppdatert',
     edition: 'Utgave',
     publisher: 'Utgiver',
     useContent: 'Regler for bruk',
@@ -771,6 +771,7 @@ const messages = {
     copyCode: 'Kopier kode til utklippstavle',
   },
   ndlaFilm: {
+    heading: 'NDLA film',
     slideBackwardsLabel: 'Scroll bakover',
     slideForwardsLabel: 'Scroll fremover',
     movieMatchInCategory: 'Treff',
@@ -817,6 +818,7 @@ const messages = {
       shortFilm: 'Kortfilm',
       all: 'Alle filmer A-Å',
     },
+    allMovieGroupTitleLabel: 'Filmer som starter på {{letter}}',
     moreAboutNdlaFilm: {
       header: 'NDLA Film',
       firstParagraph:

package/src/locale/messages-nn.ts

@@ -305,6 +305,7 @@ const messages = {
         name: 'Følg oss',
       },
     },
+    errorDescription: 'Orsak, ein feil oppstod under lasting av faga.',
     film: {
       header: 'NDLA film',
       text: 'NDLA film er ei teneste i samarbeid med Norgesfilm. Denne tenesta lar deg sjå ei rekkje spelefilmar, kortfilmar, dokumentarar og seriar. Du kan òg sjå undervisningsfilm og filmklipp. Velkomen inn i filmen si verd!',
@@ -312,7 +313,6 @@ const messages = {
       linkLabel: 'Gå til NDLA film',
     },
     blog: 'Frå bloggen',
-    errorDescription: 'Orsak, ein feil oppstod under lasting av faga.',
   },
   toolboxPage: {
     introduction:
@@ -373,7 +373,6 @@ const messages = {
         [contentTypes.SUBJECT_MATERIAL]: 'Vis mindre fagstoff',
         [contentTypes.TASKS_AND_ACTIVITIES]: 'Vis færre oppgåver og aktivitetar',
         [contentTypes.LEARNING_PATH]: 'Vis færre læringsstiar',
-        [contentTypes.LEARNING_PATH]: 'Vis færre læringsstiar',
         [contentTypes.ASSESSMENT_RESOURCES]: 'Vis færre vurderingsressursar',
         [contentTypes.SOURCE_MATERIAL]: 'Vis færre kjeldemateriale',
         [contentTypes.EXTERNAL_LEARNING_RESOURCES]: 'Vis færre eksterne læringsressursar',
@@ -398,8 +397,8 @@ const messages = {
     error: 'Orsak, ein del av innhaldet kunne ikkje visast.',
     noCoreResourcesAvailableUnspecific: 'Det er ikkje noko kjernestoff tilgjengeleg.',
     noCoreResourcesAvailable: 'Det er ikkje noko kjernestoff tilgjengeleg for {{name}}.',
-    toggleFilterLabel: 'Tilleggsressursar',
     activateAdditionalResources: 'Tilleggsressursar',
+    toggleFilterLabel: 'Tilleggsressursar',
     label: 'Læringsressursar',
     allResources: 'Ressursar',
     shortcutButtonText: 'Lærestoff',
@@ -440,7 +439,7 @@ const messages = {
       'Utgåtte fag blir det ikkje undervist i lenger, men det kan framleis vere mogleg å ta eksamen i faget som privatist.',
   },
   article: {
-    lastUpdated: 'Sist oppdatert',
+    lastUpdated: 'Sist faglig oppdatert',
     edition: 'Utgåve',
     publisher: 'Utgjevar',
     closeLabel: 'Lukk',
@@ -772,6 +771,7 @@ const messages = {
     copyCode: 'Kopier kode til utklippstavle',
   },
   ndlaFilm: {
+    heading: 'NDLA film',
     slideBackwardsLabel: 'Scroll bakover',
     slideForwardsLabel: 'Scroll framover',
     movieMatchInCategory: 'Treff',
@@ -818,6 +818,7 @@ const messages = {
       shortFilm: 'Kortfilm',
       all: 'Alle filmar A-Å',
     },
+    allMovieGroupTitleLabel: 'Filmar som startar på {{letter}}',
     moreAboutNdlaFilm: {
       header: 'NDLA Film',
       firstParagraph:

package/src/locale/messages-se.ts

@@ -772,6 +772,7 @@ const messages = {
     copyCode: 'Máŋge koda vuorkátávvalii',
   },
   ndlaFilm: {
+    heading: 'NDLA film',
     slideBackwardsLabel: 'Rulle maŋos',
     slideForwardsLabel: 'Rulle ovddas',
     movieMatchInCategory: 'Deaivan',
@@ -818,6 +819,7 @@ const messages = {
       shortFilm: 'Oanehis filbma',
       all: 'Buot filmmat A-Å',
     },
+    allMovieGroupTitleLabel: 'Filmar som startar på {{letter}}',
     moreAboutNdlaFilm: {
       header: 'NDLA Filbma',
       firstParagraph:

package/src/locale/messages-sma.ts

@@ -440,7 +440,7 @@ const messages = {
       'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',
   },
   article: {
-    lastUpdated: 'Sist oppdatert',
+    lastUpdated: 'Sist faglig oppdatert',
     edition: 'Utgave',
     publisher: 'Utgiver',
     useContent: 'Regler for bruk',
@@ -772,6 +772,7 @@ const messages = {
     copyCode: 'Kopier kode til utklippstavle',
   },
   ndlaFilm: {
+    heading: 'NDLA film',
     slideBackwardsLabel: 'Scroll bakover',
     slideForwardsLabel: 'Scroll fremover',
     movieMatchInCategory: 'Treff',
@@ -818,6 +819,7 @@ const messages = {
       shortFilm: 'Kortfilm',
       all: 'Alle filmer A-Å',
     },
+    allMovieGroupTitleLabel: 'Filmar som startar på {{letter}}',
     moreAboutNdlaFilm: {
       header: 'NDLA Film',
       firstParagraph:

package/src/main.scss

@@ -23,4 +23,3 @@
 @import 'Translation/component.translation-box';
 @import 'Search/component.search';
 @import 'Carousel/component.carousel';
-@import 'NDLAFilm/component.film-movielist';