@ndla/ui 45.0.8 → 45.0.10

package/src/Embed/conceptComponents.tsx

@@ -7,7 +7,7 @@
  */
 
 import { forwardRef, ReactNode, RefAttributes } from 'react';
-import { ConceptVisualElementMeta } from '@ndla/types-embed';
+import { AudioMeta, AudioMetaData, 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';
@@ -21,9 +21,12 @@ import BrightcoveEmbed from './BrightcoveEmbed';
 import H5pEmbed from './H5pEmbed';
 import { ExternalEmbed, HeartButtonType, IframeEmbed } from '.';
 import { EmbedByline } from '../LicenseByline';
+import { Gloss } from '../Gloss';
+
+export type ConceptType = 'concept' | 'gloss';
 
 export interface ConceptNotionData {
-  title: string;
+  title: ConceptData['concept']['title'];
   content?: string;
   metaImage?: {
     url?: string;
@@ -32,6 +35,8 @@ export interface ConceptNotionData {
   copyright?: Copyright;
   source?: string;
   visualElement?: ConceptVisualElementMeta;
+  conceptType: ConceptData['concept']['conceptType'];
+  glossData?: ConceptData['concept']['glossData'];
 }
 
 interface ConceptNotionProps extends RefAttributes<HTMLDivElement>, ConceptNotionData {
@@ -151,6 +156,8 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
       subjects,
       heartButton,
       conceptHeartButton,
+      conceptType,
+      glossData,
       ...rest
     },
     ref,
@@ -162,47 +169,61 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
         <ContentPadding>
           <NotionHeader>
             <h1>
-              {title} {<small>{t('searchPage.resultType.notionsHeading')}</small>}
+              {title.title} {<small>{t(`searchPage.resultType.${conceptType}`)}</small>}
             </h1>
             {closeButton}
           </NotionHeader>
-          <StyledNotionDialogContent>
-            {visualElement?.resource === 'image' ? (
-              <ImageEmbed embed={visualElement} heartButton={heartButton} />
-            ) : visualElement?.resource === 'brightcove' ? (
-              <BrightcoveEmbed embed={visualElement} heartButton={heartButton} />
-            ) : visualElement?.resource === 'h5p' ? (
-              <H5pEmbed embed={visualElement} />
-            ) : visualElement?.resource === 'iframe' ? (
-              <IframeEmbed embed={visualElement} />
-            ) : visualElement?.resource === 'external' ? (
-              <ExternalEmbed embed={visualElement} />
-            ) : null}
-            <NotionDialogText>{parseMarkdown(content ?? '', 'body')}</NotionDialogText>
-          </StyledNotionDialogContent>
-          {tags && (
-            <ListWrapper>
-              {`${t('notions.tags')}:`}
-              <StyledList>
-                {tags.map((tag, index) => (
-                  <li key={index}>{tag}</li>
-                ))}
-              </StyledList>
-            </ListWrapper>
-          )}
-          {subjects && (
-            <ListWrapper>
-              {`${t('notions.usedIn')}:`}
-              <StyledList>
-                {subjects.map((subject, index) => (
-                  <li key={index}>{subject}</li>
-                ))}
-              </StyledList>
-            </ListWrapper>
+          {conceptType !== 'gloss' ? (
+            <>
+              <StyledNotionDialogContent>
+                {visualElement?.resource === 'image' ? (
+                  <ImageEmbed embed={visualElement} heartButton={heartButton} />
+                ) : visualElement?.resource === 'brightcove' ? (
+                  <BrightcoveEmbed embed={visualElement} heartButton={heartButton} />
+                ) : visualElement?.resource === 'h5p' ? (
+                  <H5pEmbed embed={visualElement} />
+                ) : visualElement?.resource === 'iframe' ? (
+                  <IframeEmbed embed={visualElement} />
+                ) : visualElement?.resource === 'external' ? (
+                  <ExternalEmbed embed={visualElement} />
+                ) : null}
+                <NotionDialogText>{parseMarkdown(content ?? '', 'body')}</NotionDialogText>
+              </StyledNotionDialogContent>
+              {tags && (
+                <ListWrapper>
+                  {`${t('notions.tags')}:`}
+                  <StyledList>
+                    {tags.map((tag, index) => (
+                      <li key={index}>{tag}</li>
+                    ))}
+                  </StyledList>
+                </ListWrapper>
+              )}
+              {subjects && (
+                <ListWrapper>
+                  {`${t('notions.usedIn')}:`}
+                  <StyledList>
+                    {subjects.map((subject, index) => (
+                      <li key={index}>{subject}</li>
+                    ))}
+                  </StyledList>
+                </ListWrapper>
+              )}
+            </>
+          ) : (
+            <Gloss
+              title={title}
+              glossData={glossData!}
+              audio={
+                visualElement?.status === 'success' && visualElement.resource === 'audio'
+                  ? { src: visualElement.data.audioFile.url, title: visualElement.data.title.title }
+                  : undefined
+              }
+            />
           )}
         </ContentPadding>
         {copyright && (
-          <EmbedByline copyright={copyright} type="concept">
+          <EmbedByline copyright={copyright} type={conceptType as ConceptType}>
             {copyright.license?.license.toLowerCase() !== COPYRIGHTED && conceptHeartButton}
           </EmbedByline>
         )}

package/src/Figure/FigureOpenDialogButton.tsx

@@ -10,7 +10,7 @@ import { Play } from '@ndla/icons/common';
 import { ExpandTwoArrows, CursorClick } from '@ndla/icons/action';
 
 interface Props {
-  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';
+  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external' | 'audio';
   messages: {
     zoomImageButtonLabel: string;
     zoomOutImageButtonLabel: string;

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -71,7 +71,7 @@ export const FrontpageArticle = ({ article, id, isWide, licenseBox }: Props) =>
 
   if (isWide) {
     return (
-      <StyledArticle data-wide={isWide} style={cssVars}>
+      <StyledArticle data-wide={isWide} style={cssVars} id={id}>
         <LayoutItem>{content}</LayoutItem>
       </StyledArticle>
     );

package/src/Gloss/Gloss.tsx

@@ -86,7 +86,7 @@ const TranslatedText = styled.span`
   padding: ${spacing.small} ${spacing.normal};
   font-family: ${fonts.sans};
   ${fonts.sizes('18px', '24px')};
-  :first-child {
+  &[data-first='true'] {
     color: ${colors.brand.dark};
     font-weight: ${fonts.weight.bold};
     background-color: ${colors.background.lightBlue};
@@ -135,9 +135,9 @@ const Gloss = ({ title, glossData, audio }: Props) => {
             <StyledAccordionContent>
               {glossData.examples.map((example, index) => (
                 <div key={index}>
-                  {example.map((translation) => (
-                    <>
-                      <TranslatedText>{translation.example}</TranslatedText>
+                  {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}
@@ -148,7 +148,7 @@ const Gloss = ({ title, glossData, audio }: Props) => {
                           {translation.transcriptions?.traditional}
                         </TranslatedText>
                       )}
-                    </>
+                    </div>
                   ))}
                 </div>
               ))}

package/src/LicenseByline/EmbedByline.tsx

@@ -14,7 +14,7 @@ import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
 import { getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
 import { ICopyright as ImageCopyright } from '@ndla/types-backend/image-api';
 import { ICopyright as AudioCopyright } from '@ndla/types-backend/audio-api';
-import { ICopyright as ConceptCopyright } from '@ndla/types-backend/concept-api';
+import { IDraftCopyright as ConceptCopyright } from '@ndla/types-backend/concept-api';
 import { BrightcoveCopyright } from '@ndla/types-embed';
 import { WarningOutline } from '@ndla/icons/common';
 import { parseMarkdown } from '@ndla/util';
@@ -58,7 +58,7 @@ interface PodcastProps extends BaseProps {
 }
 
 interface ConceptProps extends BaseProps {
-  type: 'concept';
+  type: 'concept' | 'gloss';
   copyright: ConceptCopyright | undefined;
 }
 

package/src/Notion/NotionImage.tsx

@@ -37,7 +37,7 @@ const StyledImage = styled(Image)`
 `;
 
 interface Props {
-  type: 'image' | 'video' | 'h5p' | 'iframe' | 'external' | undefined;
+  type: 'image' | 'video' | 'h5p' | 'iframe' | 'external' | 'audio' | undefined;
   id: string;
   src: string;
   alt: string;

package/src/locale/messages-en.ts

@@ -210,9 +210,10 @@ const messages = {
       notionsHeading: 'Explanations',
       notionsRemove: 'Remove',
       showVideo: 'Watch video',
-      showNotion: 'Show notion',
+      concept: 'Show notion',
       gridView: 'Grid-view',
       listView: 'List-view',
+      gloss: 'Show gloss',
     },
     contextModal: {
       button: '+ {{count}} more contexts',
@@ -1336,6 +1337,7 @@ const messages = {
       concept: 'Concept',
       h5p: 'H5P',
       external: 'External resource',
+      gloss: 'Gloss',
     },
   },
   gloss: {

package/src/locale/messages-nb.ts

@@ -210,7 +210,8 @@ const messages = {
       notionsHeading: 'Begrepsforklaring',
       notionsRemove: 'Fjern',
       showVideo: 'Se video',
-      showNotion: 'Se forklaring',
+      concept: 'Se forklaring',
+      gloss: 'Se glose',
       gridView: 'Gallerivisning',
       listView: 'Listevisning',
     },
@@ -1332,6 +1333,7 @@ const messages = {
       concept: 'Forklaring',
       h5p: 'H5P',
       external: 'Ekstern ressurs',
+      gloss: 'Glose',
     },
   },
   gloss: {

package/src/locale/messages-nn.ts

@@ -210,9 +210,10 @@ const messages = {
       notionsHeading: 'Begrepsforklaring',
       notionsRemove: 'Fjern',
       showVideo: 'Sjå video',
-      showNotion: 'Sjå forklaring',
+      concept: 'Sjå forklaring',
       gridView: 'Gallerivisning',
       listView: 'Listevisning',
+      gloss: 'Sjå glose',
     },
     contextModal: {
       button: '+ {{count}} fleire stader',
@@ -1332,6 +1333,7 @@ const messages = {
       concept: 'Forklaring',
       h5p: 'H5P',
       external: 'Ekstern ressurs',
+      gloss: 'Glose',
     },
   },
   gloss: {

package/src/locale/messages-se.ts

@@ -210,9 +210,10 @@ const messages = {
       notionsHeading: 'Doabačilgehus',
       notionsRemove: 'Sihko',
       showVideo: 'Geahča video',
-      showNotion: 'Geahča čilgehusa',
+      concept: 'Geahča čilgehusa',
       gridView: 'Galleriijačájáhus',
       listView: 'Čájáhus listtu vuođul',
+      gloss: 'Se glose',
     },
     contextModal: {
       button: '+ {{count}} eanet sajiin',
@@ -1333,6 +1334,7 @@ const messages = {
       concept: 'Forklaring',
       h5p: 'H5P',
       external: 'Ekstern ressurs',
+      gloss: 'Glose',
     },
   },
   gloss: {

package/src/locale/messages-sma.ts

@@ -210,9 +210,10 @@ const messages = {
       notionsHeading: 'Baakoebuerkiestimmie',
       notionsRemove: 'Skubph',
       showVideo: 'Gïehtjh videjovem',
-      showNotion: 'Gïehtjh buerkiestimmiem ',
+      concept: 'Gïehtjh buerkiestimmiem ',
       gridView: 'Gallerivisning',
       listView: 'Listevisning',
+      gloss: 'Se glose',
     },
     contextModal: {
       button: '+ {{count}} jieniebinie sijjine',
@@ -1337,6 +1338,7 @@ const messages = {
       concept: 'Forklaring',
       h5p: 'H5P',
       external: 'Ekstern ressurs',
+      gloss: 'Glose',
     },
   },
   gloss: {

package/src/types.ts

@@ -53,6 +53,7 @@ export interface Copyright {
   rightsholders: Array<Contributor>;
   processors: Array<Contributor>;
   origin?: string;
+  processed: boolean;
 }
 
 export interface FootNote {