@ndla/ui 50.1.6 → 50.2.1

package/src/Embed/ConceptEmbed.tsx

@@ -123,6 +123,8 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton, lang
         conceptType={concept.conceptType}
         glossData={concept.glossData}
         lang={lang}
+        exampleIds={embed.embedData.exampleIds}
+        exampleLangs={embed.embedData.exampleLangs}
       />
     );
   } else if (embed.embedData.type === 'inline') {
@@ -140,6 +142,8 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton, lang
         conceptType={concept.conceptType}
         glossData={concept.glossData}
         lang={lang}
+        exampleIds={embed.embedData.exampleIds}
+        exampleLangs={embed.embedData.exampleLangs}
       />
     );
   } else {
@@ -156,6 +160,8 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton, lang
         conceptType={concept.conceptType}
         glossData={concept.glossData}
         lang={lang}
+        exampleIds={embed.embedData.exampleIds}
+        exampleLangs={embed.embedData.exampleLangs}
       />
     );
   }
@@ -166,6 +172,8 @@ interface InlineConceptProps extends ConceptNotionData {
   heartButton?: HeartButtonType;
   headerButtons?: ReactNode;
   conceptHeartButton?: ReactNode;
+  exampleIds?: string;
+  exampleLangs?: string;
 }
 
 const BaselineIcon = styled.span`
@@ -239,6 +247,8 @@ export const InlineConcept = ({
   conceptType,
   headerButtons,
   lang,
+  exampleIds,
+  exampleLangs,
 }: InlineConceptProps) => {
   const { t } = useTranslation();
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -290,6 +300,8 @@ export const InlineConcept = ({
               }
               conceptType={conceptType}
               glossData={glossData}
+              exampleIds={exampleIds}
+              exampleLangs={exampleLangs}
             />
           </Content>
         </PopoverWrapper>
@@ -302,6 +314,8 @@ interface ConceptProps extends ConceptNotionData {
   fullWidth?: boolean;
   heartButton?: HeartButtonType;
   conceptHeartButton?: ReactElement;
+  exampleIds?: string;
+  exampleLangs?: string;
 }
 
 export const BlockConcept = ({
@@ -317,6 +331,8 @@ export const BlockConcept = ({
   glossData,
   conceptType,
   lang,
+  exampleIds,
+  exampleLangs,
 }: ConceptProps) => {
   const { t } = useTranslation();
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -418,6 +434,8 @@ export const BlockConcept = ({
                 ? { src: visualElement.data.audioFile.url, title: visualElement.data.title.title }
                 : undefined
             }
+            exampleIds={exampleIds}
+            exampleLangs={exampleLangs}
           />
         )}
         {copyright && conceptType === 'concept' && (

package/src/Embed/FootnoteEmbed.tsx

@@ -6,12 +6,38 @@
  *
  */
 
-import { FootnoteMetaData } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { FootnoteMetaData } from '@ndla/types-embed';
+import { colors, spacing } from '@ndla/core';
 
 interface Props {
   embed: FootnoteMetaData;
 }
+
+const FootnoteRef = styled.span`
+  &:target {
+    background-color: ${colors.brand.greyLighter};
+    padding: ${spacing.xxsmall} ${spacing.xsmall};
+    box-shadow:
+      ${spacing.xsmall} 0 0 ${colors.brand.greyLighter},
+      -${spacing.xsmall} 0 0 ${colors.brand.greyLighter};
+  }
+  sup {
+    a {
+      margin-left: -2px;
+      padding: ${spacing.small} ${spacing.xsmall};
+      box-shadow: none;
+      text-decoration: underline;
+    }
+    a:hover,
+    a:focus-within {
+      background-color: ${colors.brand.greyLighter};
+      text-decoration: underline;
+    }
+  }
+`;
+
 const FootnoteEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   if (embed.status === 'error') {
@@ -19,11 +45,11 @@ const FootnoteEmbed = ({ embed }: Props) => {
   }
 
   return (
-    <span id={`ref${embed.data.entryNum}`} className="c-footnotes__ref">
+    <FootnoteRef id={`ref${embed.data.entryNum}`}>
       <sup>
         <a href={`#note${embed.data.entryNum}`} target="_self">{`[${embed.data.entryNum}]`}</a>
       </sup>
-    </span>
+    </FootnoteRef>
   );
 };
 

package/src/Embed/conceptComponents.tsx

@@ -48,6 +48,8 @@ interface ConceptNotionProps extends RefAttributes<HTMLDivElement>, ConceptNotio
   headerButtons?: ReactNode;
   heartButton?: HeartButtonType;
   conceptHeartButton?: ReactNode;
+  exampleIds?: string;
+  exampleLangs?: string;
 }
 
 const NotionDialogText = styled.div`
@@ -181,6 +183,8 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
       glossData,
       headerButtons,
       lang,
+      exampleIds,
+      exampleLangs,
       ...rest
     },
     ref,
@@ -246,6 +250,8 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
                   ? { src: visualElement.data.audioFile.url, title: visualElement.data.title.title }
                   : undefined
               }
+              exampleIds={exampleIds}
+              exampleLangs={exampleLangs}
             />
           )}
         </ContentPadding>

package/src/Filter/FilterCarousel.tsx

@@ -40,7 +40,9 @@ const NavButton = styled('button')<{
   border: none;
   box-shadow: none;
   border-radius: 100px;
-  transition: opacity 0.5s ease, transform 0.5s ease;
+  transition:
+    opacity 0.5s ease,
+    transform 0.5s ease;
   transform: translate(0px, 0px, 1);
   position: absolute;
   bottom: 0;

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -59,7 +59,7 @@ const StyledArticle = styled.article`
 
 export const FrontpageArticle = ({ article, id, isWide, licenseBox, lang }: Props) => {
   const { height = 0 } = useMastheadHeight();
-  const cssVars = useMemo(() => ({ '--masthead-height': `${height}px` } as unknown as CSSProperties), [height]);
+  const cssVars = useMemo(() => ({ '--masthead-height': `${height}px` }) as unknown as CSSProperties, [height]);
   const { title, introduction, content } = article;
 
   if (isWide) {

package/src/Gloss/Gloss.tsx

@@ -10,31 +10,23 @@ import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import { colors, spacing, misc, fonts } from '@ndla/core';
 import { AccordionRoot, AccordionItem, AccordionHeader, AccordionContent } from '@ndla/accordion';
-import { Transcription } from '../model/Transcriptions';
+import { IGlossData, IGlossExample } from '@ndla/types-backend/concept-api';
+import { useMemo } from 'react';
 import SpeechControl from '../AudioPlayer/SpeechControl';
-
-interface Example {
-  example: string;
-  language: string;
-  transcriptions: Transcription;
-}
+import GlossExample from './GlossExample';
 
 export interface Props {
   title: {
     title: string;
     language: string;
   };
-  glossData?: {
-    gloss: string;
-    wordClass?: string;
-    originalLanguage: string;
-    transcriptions: Transcription;
-    examples?: Example[][];
-  };
+  glossData?: IGlossData;
   audio?: {
     title: string;
     src?: string;
   };
+  exampleIds?: string;
+  exampleLangs?: string;
 }
 
 const Container = styled.div`
@@ -83,26 +75,34 @@ const StyledAccordionContent = styled(AccordionContent)`
   padding: 0;
 `;
 
-const TranslatedText = styled.span`
-  display: flex;
-  flex-direction: column;
-  border-bottom: 1px solid ${colors.brand.lighter};
-  padding: ${spacing.small} ${spacing.normal};
-  font-family: ${fonts.sans};
-  ${fonts.sizes('18px', '24px')};
-  &[data-first='true'] {
-    color: ${colors.brand.dark};
-    font-weight: ${fonts.weight.bold};
-    background-color: ${colors.background.lightBlue};
-  }
-  &[data-pinyin] {
-    font-style: italic;
-  }
-`;
+const getFilteredExamples = (
+  glossData: IGlossData | undefined,
+  exampleIds: string | undefined,
+  exampleLangs: string | undefined,
+): IGlossExample[][] => {
+  if (exampleIds !== undefined || exampleLangs !== undefined) {
+    const exampleIdsList = exampleIds?.toString()?.split(',') ?? [];
+    const exampleLangsList = exampleLangs?.split(',') ?? [];
 
-const Gloss = ({ title, glossData, audio }: Props) => {
+    const filteredExamples =
+      glossData?.examples?.map((examples, i) => {
+        if (exampleIdsList.includes(i.toString())) {
+          return examples.filter((e) => exampleLangsList.includes(e.language));
+        } else return [];
+      }) ?? [];
+    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);
+    return examplesWithoutEmpty;
+  } else return glossData?.examples ?? [];
+};
+
+const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) => {
   const { t } = useTranslation();
 
+  const filteredExamples = useMemo(
+    () => getFilteredExamples(glossData, exampleIds, exampleLangs),
+    [exampleIds, exampleLangs, glossData],
+  );
+
   return (
     <>
       {glossData && (
@@ -138,36 +138,20 @@ const Gloss = ({ title, glossData, audio }: Props) => {
             </Wrapper>
             <span lang={title.language}>{title.title}</span>
           </Container>
-          {glossData.examples && glossData.examples.length > 0 && (
+          {filteredExamples.length > 0 && (
             <AccordionRoot type="single" collapsible>
               <AccordionItem value="1">
                 <StyledAccordionHeader headingLevel="span">{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} lang={translation.language}>
-                            {translation.example}
-                          </TranslatedText>
-                          {translation.transcriptions.pinyin && (
-                            <TranslatedText
-                              key={t('gloss.transcriptions.pinyin')}
-                              data-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>
+                  {filteredExamples.map((examples, index) => (
+                    <div key={`gloss-example-${index}`}>
+                      {examples.map((example, innerIndex) => (
+                        <GlossExample
+                          key={`gloss-example-${index}-${innerIndex}`}
+                          example={example}
+                          originalLanguage={glossData.originalLanguage}
+                          index={innerIndex}
+                        />
                       ))}
                     </div>
                   ))}

package/src/Gloss/GlossExample.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import styled from '@emotion/styled';
+import { colors, spacing, fonts } from '@ndla/core';
+import { IGlossExample } from '@ndla/types-backend/concept-api';
+import { Text } from '@ndla/typography';
+
+export interface Props {
+  example: IGlossExample;
+  originalLanguage: string | undefined;
+  index: number;
+  isStandalone?: boolean;
+}
+
+const StyledGlossExampleWrapper = styled.div`
+  &[data-is-standalone='true'] {
+    &:first-of-type {
+      border-top: 1px solid ${colors.brand.lighter};
+    }
+  }
+`;
+const StyledGlossExample = styled.div`
+  padding: ${spacing.small} 0;
+  padding-left: ${spacing.normal};
+  border: 1px solid ${colors.brand.lighter};
+  border-top: none;
+
+  &[data-is-first='true'] {
+    background-color: ${colors.background.lightBlue};
+  }
+`;
+const StyledText = styled(Text)`
+  &[data-is-first='true'] {
+    font-weight: ${fonts.weight.bold};
+    color: ${colors.brand.dark};
+  }
+  &[data-pinyin] {
+    font-style: italic;
+  }
+`;
+
+const GlossExample = ({ example, originalLanguage, index, isStandalone = false }: Props) => {
+  return (
+    <StyledGlossExampleWrapper data-is-standalone={isStandalone}>
+      <StyledGlossExample data-is-first={index === 0} lang={example.language}>
+        <StyledText data-is-first={index === 0} textStyle="meta-text-medium" margin="none">
+          {example.example}
+        </StyledText>
+      </StyledGlossExample>
+
+      {example.transcriptions.pinyin && (
+        <StyledGlossExample lang={originalLanguage}>
+          <StyledText data-pinyin="" textStyle="meta-text-medium" margin="none">
+            {example.transcriptions?.pinyin}
+          </StyledText>
+        </StyledGlossExample>
+      )}
+      {example.transcriptions.traditional && (
+        <StyledGlossExample lang={originalLanguage}>
+          <StyledText textStyle="meta-text-medium" margin="none">
+            {example.transcriptions?.traditional}
+          </StyledText>
+        </StyledGlossExample>
+      )}
+    </StyledGlossExampleWrapper>
+  );
+};
+
+export default GlossExample;

package/src/Gloss/index.tsx

@@ -7,3 +7,4 @@
  */
 
 export { default as Gloss } from './Gloss';
+export { default as GlossExample } from './GlossExample';

package/src/Resource/resourceComponents.tsx

@@ -134,7 +134,7 @@ const StyledContentIconWrapper = styled.span`
 
 export const ContentIconWrapper = ({ contentType, children, ...props }: ContentIconProps) => {
   const contentIconWrapperVars = useMemo(
-    () => ({ '--content-background-color': resourceTypeColor(contentType) } as unknown as CSSProperties),
+    () => ({ '--content-background-color': resourceTypeColor(contentType) }) as unknown as CSSProperties,
     [contentType],
   );
   return (

package/src/ResourceGroup/ResourceItem.tsx

@@ -75,7 +75,9 @@ const ListElement = styled.li`
   }
 
   * {
-    transition: height ease-out 0.2s, width ease-out 0.2s;
+    transition:
+      height ease-out 0.2s,
+      width ease-out 0.2s;
   }
   &[data-active='true'] {
     &:before {

package/src/SearchTypeResult/ActiveFilters.tsx

@@ -156,9 +156,7 @@ const ActiveFilters = ({
           </Tooltip>
         </StyledActiveFilterWrapper>
       )}
-      {customElements?.map((item, index) => (
-        <StyledActiveFilterWrapper key={index}>{item}</StyledActiveFilterWrapper>
-      ))}
+      {customElements?.map((item, index) => <StyledActiveFilterWrapper key={index}>{item}</StyledActiveFilterWrapper>)}
     </StyledActiveFilters>
   );
 };

package/src/TreeStructure/AddFolderButton.tsx

@@ -46,8 +46,8 @@ const AddFolderButton = ({
   const tooltip = loading
     ? t('loading')
     : canAddFolder
-    ? t('myNdla.newFolderUnder', { folderName: focusedFolder?.name })
-    : t('treeStructure.maxFoldersAlreadyAdded');
+      ? t('myNdla.newFolderUnder', { folderName: focusedFolder?.name })
+      : t('treeStructure.maxFoldersAlreadyAdded');
   return (
     <Tooltip tooltip={tooltip}>
       <StyledAddFolderButton

package/src/TreeStructure/FolderItem.tsx

@@ -163,7 +163,7 @@ const FolderItem = ({
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
   const selected = selectedFolder ? selectedFolder.id === id : false;
 
-  const levelVariable = useMemo(() => ({ '--level': level } as unknown as CSSProperties), [level]);
+  const levelVariable = useMemo(() => ({ '--level': level }) as unknown as CSSProperties, [level]);
 
   const focused = focusedFolder?.id === id;
 

package/src/TreeStructure/FolderItems.tsx

@@ -65,8 +65,8 @@ const FolderItems = ({
       level === 0 && type === 'picker'
         ? treestructureId(type, 'popup')
         : parentFolder
-        ? treestructureId(type, `subfolders-${parentFolder.id}`)
-        : undefined
+          ? treestructureId(type, `subfolders-${parentFolder.id}`)
+          : undefined
     }
     tabIndex={-1}
     aria-labelledby={level === 0 && type === 'picker' ? treestructureId(type, 'label') : undefined}

package/src/index.ts

@@ -224,6 +224,6 @@ export {
 export { DefinitionTerm, DefinitionDescription } from './DefinitionList';
 export type { ProgrammeV2 } from './ProgrammeCard';
 
-export { Gloss } from './Gloss';
+export { Gloss, GlossExample } from './Gloss';
 
 export { LinkBlock, LinkBlockSection } from './LinkBlock';

package/src/locale/messages-en.ts

@@ -9,7 +9,7 @@
 import { contributorTypes } from '@ndla/licenses';
 import constants from '../model';
 
-export const { contentTypes, subjectCategories, subjectTypes, wordClass, Transcriptions } = constants;
+export const { contentTypes, subjectCategories, subjectTypes, wordClass } = constants;
 
 const titleTemplate = ' - NDLA';
 
@@ -1139,7 +1139,9 @@ const messages = {
     folder: {
       folder: 'Folder',
       delete: 'Delete folder',
+      deleteShort: 'Delete',
       edit: 'Edit folder',
+      editShort: 'Edit',
       copy: 'Copy folder',
       open: 'Open folder',
       close: 'Close folder',
@@ -1181,11 +1183,15 @@ const messages = {
         },
         button: {
           share: 'Share folder',
+          shareShort: 'Share',
           preview: 'Preview folder',
+          previewShort: 'Preview',
           goTo: 'Go to shared folder',
           unShare: 'Stop sharing',
           shareLink: 'Copy link',
         },
+        previewInformation:
+          'Preview of shared folder. The folder is not available to others until you update its status to shared.',
       },
     },
     arena: {
@@ -1259,9 +1265,9 @@ const messages = {
           'Welcome to NDLA Arena. Here you can discuss, share and cooperate with other teachers from all of Norway. You will find forums for the different subjects and themes.',
         myNotification: 'My notifications',
         markAll: 'Mark all as read',
-        commentedOn: 'commented on your post',
         subscribe: 'You will now be notified of new replies to this topic',
         unsubscribe: 'You have turned off notification of new replies to this topic',
+        commentedOn: 'commented on the post <i>{{title}}</i> which you follow',
       },
       topicsBy: 'Topics by',
     },
@@ -1285,6 +1291,7 @@ const messages = {
     myTags: 'My tags',
     mySubjects: 'My subjects',
     newFolder: 'New folder',
+    newFolderShort: 'New',
     newFolderUnder: 'Create new folder under {{folderName}}',
     myAccount: 'My account',
     favourites: 'Favourites',

package/src/locale/messages-nb.ts

@@ -1138,7 +1138,9 @@ const messages = {
     folder: {
       folder: 'Mappe',
       delete: 'Slett mappe',
+      deleteShort: 'Slett',
       edit: 'Rediger mappe',
+      editShort: 'Rediger',
       copy: 'Kopier mappe',
       open: 'Åpne mappe',
       close: 'Lukk mappe',
@@ -1154,7 +1156,7 @@ const messages = {
       onDragEndMissingOver: 'Mappen {{name}} ble sluppet',
       onDragCancel: 'Flytting avbrutt. Mappen {{name}} ble sluppet',
       dragHandle: 'Sorter mappen {{name}}',
-      sharedWarning: 'Navn og beskrivelse blir synlig for alle du deler mappen med',
+      sharedWarning: 'Navn og beskrivelse blir synlig for alle du deler mappen med.',
       sharing: {
         share: 'Del mappe',
         shared: 'Delt',
@@ -1179,11 +1181,15 @@ const messages = {
         },
         button: {
           share: 'Del mappe',
+          shareShort: 'Del',
           preview: 'Forhåndsvis mappe',
+          previewShort: 'Forhåndsvis',
           goTo: 'Gå til delt mappe',
           unShare: 'Avslutt deling',
           shareLink: 'Kopier lenke',
         },
+        previewInformation:
+          'Forhåndsvisning av delt mappe. Mappa blir ikke tilgjengelig for andre før du setter den som delt.',
       },
     },
     arena: {
@@ -1257,9 +1263,9 @@ const messages = {
           'Velkommen til NDLA Arena. Her kan du diskutere, dele og samarbeide med andre lærere fra hele Norge. Du finner forum for ulike fag og tema.',
         myNotification: 'Mine varsler',
         markAll: 'Merk alle som lest',
-        commentedOn: 'svarte på ditt innlegg',
         subscribe: 'Du får nå varsling om nye svar på dette innlegget',
         unsubscribe: 'Du har skrudd av varsling om nye svar på dette innlegget',
+        commentedOn: 'svarte på innlegget <i>{{title}}</i> som du følger',
       },
       topicsBy: 'Innlegg av',
     },
@@ -1282,6 +1288,7 @@ const messages = {
     myTags: 'Mine emneknagger',
     mySubjects: 'Mine fag',
     newFolder: 'Ny mappe',
+    newFolderShort: 'Ny',
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',

package/src/locale/messages-nn.ts

@@ -1138,7 +1138,9 @@ const messages = {
     folder: {
       folder: 'Mappe',
       delete: 'Slett mappe',
+      deleteShort: 'Slett',
       edit: 'Rediger mappe',
+      editShort: 'Rediger',
       copy: 'Kopier mappe',
       open: 'Åpne mappe',
       close: 'Lukk mappe',
@@ -1154,7 +1156,7 @@ const messages = {
       onDragEndMissingOver: 'Mappa blei sleppt',
       onDragCancel: 'Flytting avbrutt. Mappa {{name}} blei sleppt',
       dragHandle: 'Sorter mappa {{name}}',
-      sharedWarning: 'Namn og beskriving blir synleg for alle du deler mappa med',
+      sharedWarning: 'Namn og beskriving blir synleg for alle du deler mappa med.',
       sharing: {
         share: 'Del mappe',
         shared: 'Delt',
@@ -1179,11 +1181,15 @@ const messages = {
         },
         button: {
           share: 'Del mappe',
+          shareShort: 'Del',
           preview: 'Førehandsvis mappe',
+          previewShort: 'Førehandsvis',
           goTo: 'Gå til delt mappe',
           unShare: 'Avslutt deling',
           shareLink: 'Kopier lenke',
         },
+        previewInformation:
+          'Førehandsvising av delt mappe. Mappa blir ikkje tilgjengeleg for andre før du set ho som delt.',
       },
     },
     arena: {
@@ -1257,9 +1263,9 @@ const messages = {
           'Velkomen til NDLA Arena. Her kan du diskutere, dele og samarbeide med andre lærarar frå heile Noreg. Du finn forum for ulike fag og tema.',
         myNotification: 'Mine varsler',
         markAll: 'Merk alle som lest',
-        commentedOn: 'svarte på ditt innlegg',
         subscribe: 'Du får no varsling om nye svar på dette innlegget',
         unsubscribe: 'Du har skrudd av varsling om nye svar på dette innlegget',
+        commentedOn: 'svarte på innlegget <i>{{title}}</i> som du følger',
       },
       topicsBy: 'Innlegg av',
     },
@@ -1282,6 +1288,7 @@ const messages = {
     myTags: 'Mine emneknaggar',
     mySubjects: 'Mine fag',
     newFolder: 'Ny mappe',
+    newFolderShort: 'Ny',
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favorittar',