@ndla/ui 45.0.9 → 45.0.11

package/src/Embed/ConceptEmbed.tsx

@@ -14,16 +14,17 @@ 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 { ConceptMetaData } from '@ndla/types-embed';
+import { AudioMeta, ConceptMetaData } from '@ndla/types-embed';
 import Tooltip from '@ndla/tooltip';
 import { COPYRIGHTED } from '@ndla/licenses';
 import { Notion as UINotion } from '../Notion';
 import { Figure } from '../Figure';
 import { NotionImage } from '../Notion/NotionImage';
-import { ConceptNotionV2, ConceptNotionData } from './conceptComponents';
+import { ConceptNotionV2, ConceptNotionData, ConceptType } from './conceptComponents';
 import { EmbedByline } from '../LicenseByline';
 import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
 import { HeartButtonType } from './types';
+import { Gloss } from '../Gloss';
 
 const BottomBorder = styled.div`
   margin-top: ${spacing.normal};
@@ -110,7 +111,7 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
     return (
       <BlockConcept
         fullWidth={fullWidth}
-        title={concept.title.title}
+        title={concept.title}
         content={concept.content?.content}
         metaImage={concept.metaImage}
         copyright={concept.copyright}
@@ -118,12 +119,14 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
         visualElement={visualElement}
         heartButton={HeartButton}
         conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
+        conceptType={concept.conceptType}
+        glossData={concept.glossData}
       />
     );
   } else if (embed.embedData.type === 'inline') {
     return (
       <InlineConcept
-        title={concept.title.title}
+        title={concept.title}
         content={concept.content?.content}
         metaImage={concept.metaImage}
         copyright={concept.copyright}
@@ -132,12 +135,14 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
         linkText={embed.embedData.linkText}
         heartButton={HeartButton}
         conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
+        conceptType={concept.conceptType}
+        glossData={concept.glossData}
       />
     );
   } else {
     return (
       <ConceptNotionV2
-        title={concept.title.title}
+        title={concept.title}
         content={concept.content?.content}
         metaImage={concept.metaImage}
         copyright={concept.copyright}
@@ -145,6 +150,8 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
         visualElement={visualElement}
         heartButton={HeartButton}
         conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
+        conceptType={concept.conceptType}
+        glossData={concept.glossData}
       />
     );
   }
@@ -223,6 +230,8 @@ const InlineConcept = ({
   linkText,
   heartButton,
   conceptHeartButton,
+  glossData,
+  conceptType,
 }: InlineConceptProps) => {
   const { t } = useTranslation();
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -270,6 +279,8 @@ const InlineConcept = ({
                   </IconButtonV2>
                 </Close>
               }
+              conceptType={conceptType}
+              glossData={glossData}
             />
           </Content>
         </PopoverWrapper>
@@ -294,6 +305,8 @@ export const BlockConcept = ({
   fullWidth,
   heartButton,
   conceptHeartButton,
+  glossData,
+  conceptType,
 }: ConceptProps) => {
   const { t } = useTranslation();
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -318,71 +331,85 @@ export const BlockConcept = ({
     <Root modal={isMobile} onOpenChange={onOpenChange}>
       <StyledAnchor ref={anchorRef} />
       <Figure resizeIframe type={fullWidth ? 'full' : 'full-column'}>
-        <UINotion
-          id=""
-          title={title}
-          text={content}
-          visualElement={
-            visualElement?.status === 'success' && (
-              <>
-                <ImageWrapper>
-                  <Tooltip tooltip={t('searchPage.resultType.showNotion')}>
-                    <Trigger asChild>
-                      <StyledButton type="button" aria-label={t('concept.showDescription', { title: title })}>
-                        {visualElement.resource === 'image' ? (
-                          <NotionImage
-                            type={visualElementType}
-                            id={''}
-                            src={visualElement.data.image.imageUrl}
-                            alt={visualElement.data.alttext.alttext}
-                          />
-                        ) : metaImage ? (
-                          <NotionImage
-                            type={visualElementType}
-                            id={''}
-                            src={metaImage?.url ?? ''}
-                            alt={metaImage?.alt ?? ''}
-                          />
-                        ) : undefined}
-                      </StyledButton>
-                    </Trigger>
-                  </Tooltip>
-                </ImageWrapper>
-                <Portal
-                  container={
-                    typeof document !== 'undefined'
-                      ? (document.querySelector('.c-article') as HTMLElement | null) || undefined
-                      : undefined
-                  }
-                >
-                  <PopoverWrapper top={modalPos}>
-                    <Content avoidCollisions={false} asChild side="bottom">
-                      <ConceptNotionV2
-                        title={title}
-                        content={content}
-                        copyright={copyright}
-                        source={source}
-                        visualElement={visualElement}
-                        heartButton={heartButton}
-                        conceptHeartButton={conceptHeartButton}
-                        inPopover
-                        closeButton={
-                          <Close asChild>
-                            <IconButtonV2 aria-label={t('close')} variant="ghost">
-                              <Cross />
-                            </IconButtonV2>
-                          </Close>
-                        }
-                      />
-                    </Content>
-                  </PopoverWrapper>
-                </Portal>
-              </>
-            )
-          }
-        />
-        {copyright ? (
-          <EmbedByline copyright={copyright} bottomRounded topRounded type="concept">
+        {conceptType === 'concept' ? (
+          <UINotion
+            id=""
+            title={title.title}
+            text={content}
+            visualElement={
+              visualElement?.status === 'success' && (
+                <>
+                  <ImageWrapper>
+                    <Tooltip tooltip={t(`searchPage.resultType.${conceptType}`)}>
+                      <Trigger asChild>
+                        <StyledButton type="button" aria-label={t('concept.showDescription', { title: title })}>
+                          {visualElement.resource === 'image' ? (
+                            <NotionImage
+                              type={visualElementType}
+                              id={''}
+                              src={visualElement.data.image.imageUrl}
+                              alt={visualElement.data.alttext.alttext}
+                            />
+                          ) : metaImage ? (
+                            <NotionImage
+                              type={visualElementType}
+                              id={''}
+                              src={metaImage?.url ?? ''}
+                              alt={metaImage?.alt ?? ''}
+                            />
+                          ) : undefined}
+                        </StyledButton>
+                      </Trigger>
+                    </Tooltip>
+                  </ImageWrapper>
+                  <Portal
+                    container={
+                      typeof document !== 'undefined'
+                        ? (document.querySelector('.c-article') as HTMLElement | null) || undefined
+                        : undefined
+                    }
+                  >
+                    <PopoverWrapper top={modalPos}>
+                      <Content avoidCollisions={false} asChild side="bottom">
+                        <ConceptNotionV2
+                          title={title}
+                          content={content}
+                          copyright={copyright}
+                          source={source}
+                          visualElement={visualElement}
+                          heartButton={heartButton}
+                          conceptHeartButton={conceptHeartButton}
+                          inPopover
+                          closeButton={
+                            <Close asChild>
+                              <IconButtonV2 aria-label={t('close')} variant="ghost">
+                                <Cross />
+                              </IconButtonV2>
+                            </Close>
+                          }
+                          conceptType={conceptType}
+                          glossData={glossData}
+                        />
+                      </Content>
+                    </PopoverWrapper>
+                  </Portal>
+                </>
+              )
+            }
+          />
+        ) : (
+          <Gloss
+            glossData={glossData!}
+            title={title}
+            audio={
+              visualElement?.status === 'success' && visualElement.resource === 'audio'
+                ? { src: visualElement.data.audioFile.url, title: visualElement.data.title.title }
+                : undefined
+            }
+          />
+        )}
+        {copyright && conceptType === 'concept' ? (
+          <EmbedByline copyright={copyright} bottomRounded topRounded type={conceptType as ConceptType}>
             {copyright.license?.license.toLowerCase() !== COPYRIGHTED && conceptHeartButton}
           </EmbedByline>
         ) : (

package/src/Embed/ConceptListEmbed.tsx

@@ -45,12 +45,13 @@ const ConceptListEmbed = ({ embed }: Props) => {
             {data.concepts.map(({ concept, visualElement }) => (
               <li key={concept.id}>
                 <BlockConcept
-                  title={concept.title.title}
+                  title={concept.title}
                   content={concept.content.content}
                   metaImage={concept.metaImage}
                   copyright={concept.copyright}
                   source={concept.source}
                   visualElement={visualElement}
+                  conceptType={concept.conceptType}
                 />
               </li>
             ))}

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/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};
@@ -128,7 +128,7 @@ const Gloss = ({ title, glossData, audio }: Props) => {
         </Wrapper>
         <span>{title.title}</span>
       </Container>
-      {glossData.examples && (
+      {glossData.examples && glossData.examples.length > 0 && (
         <AccordionRoot type="single" collapsible>
           <AccordionItem value="1">
             <StyledAccordionHeader>{t('gloss.examples')}</StyledAccordionHeader>
@@ -137,7 +137,7 @@ const Gloss = ({ title, glossData, audio }: Props) => {
                 <div key={index}>
                   {example.map((translation, innerIndex) => (
                     <div key={`${index}_${innerIndex}`}>
-                      <TranslatedText>{translation.example}</TranslatedText>
+                      <TranslatedText data-first={innerIndex === 0}>{translation.example}</TranslatedText>
                       {translation.transcriptions.pinyin && (
                         <TranslatedText key={t('gloss.transcriptions.pinyin')} lang={glossData.originalLanguage}>
                           {translation.transcriptions?.pinyin}

package/src/LicenseByline/EmbedByline.tsx

@@ -58,7 +58,7 @@ interface PodcastProps extends BaseProps {
 }
 
 interface ConceptProps extends BaseProps {
-  type: 'concept';
+  type: 'concept' | 'gloss';
   copyright: ConceptCopyright | undefined;
 }
 

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: {
@@ -1362,7 +1364,7 @@ const messages = {
     [WordClass.WordClass.Onomatopoeia]: 'Onomatopoetikon',
     [WordClass.WordClass.Particle]: 'Partikkel',
     [WordClass.WordClass.Demonstrative]: 'Pekeord',
-    [WordClass.WordClass.PersonalPronoun]: 'Personlig Pronomen',
+    [WordClass.WordClass.PersonalPronoun]: 'Personlig pronomen',
     [WordClass.WordClass.Preposition]: 'Preposisjon',
     [WordClass.WordClass.Pronoun]: 'Pronomen',
     [WordClass.WordClass.QuestionWord]: 'Spørreord',
@@ -1376,8 +1378,8 @@ const messages = {
     [WordClass.WordClass.ExclamationWord]: 'Utropsord',
     [WordClass.WordClass.Expression]: 'Uttrykk',
     [WordClass.WordClass.Verb]: 'Verb',
-    [WordClass.WordClass.VerbComplement]: 'Verb-Komplement',
-    [WordClass.WordClass.VerbObject]: 'Verb-Objekt',
+    [WordClass.WordClass.VerbComplement]: 'Verb-komplement',
+    [WordClass.WordClass.VerbObject]: 'Verb-objekt',
   },
   about: {
     menuTitle: 'Om NDLA',

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: {
@@ -1362,7 +1364,7 @@ const messages = {
     [WordClass.WordClass.Onomatopoeia]: 'Onomatopoetikon',
     [WordClass.WordClass.Particle]: 'Partikkel',
     [WordClass.WordClass.Demonstrative]: 'Pekeord',
-    [WordClass.WordClass.PersonalPronoun]: 'Personlig Pronomen',
+    [WordClass.WordClass.PersonalPronoun]: 'Personlig pronomen',
     [WordClass.WordClass.Preposition]: 'Preposisjon',
     [WordClass.WordClass.Pronoun]: 'Pronomen',
     [WordClass.WordClass.QuestionWord]: 'Spørreord',
@@ -1376,8 +1378,8 @@ const messages = {
     [WordClass.WordClass.ExclamationWord]: 'Utropsord',
     [WordClass.WordClass.Expression]: 'Uttrykk',
     [WordClass.WordClass.Verb]: 'Verb',
-    [WordClass.WordClass.VerbComplement]: 'Verb-Komplement',
-    [WordClass.WordClass.VerbObject]: 'Verb-Objekt',
+    [WordClass.WordClass.VerbComplement]: 'Verb-komplement',
+    [WordClass.WordClass.VerbObject]: 'Verb-objekt',
   },
   about: {
     menuTitle: 'Om NDLA',