@ndla/ui 45.0.13 → 45.0.14

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/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/index.ts

@@ -24,6 +24,7 @@ export {
   ConceptEmbed,
   ConceptListEmbed,
   UnknownEmbed,
+  InlineConcept,
 } from './Embed';
 
 export {