@ndla/ui 49.0.1 → 49.0.4

package/lib/locale/messages-en.d.ts

@@ -241,6 +241,17 @@ declare const messages: {
                 option1: string;
                 option2: string;
             };
+            modalTexts: {
+                title: string;
+                uploadSection: {
+                    title: string;
+                    subTitle: string;
+                };
+                fileName: string;
+                fileTypes: string;
+                savePicture: string;
+                deletePicture: string;
+            };
         };
         resource: {
             add: string;
@@ -827,6 +838,7 @@ declare const messages: {
             files: string;
             embedlink: string;
             concept: string;
+            gloss: string;
             podcast: string;
             other: string;
         };
@@ -901,6 +913,18 @@ declare const messages: {
                 hasCopiedTitle: string;
             };
         };
+        gloss: {
+            heading: string;
+            description: string;
+            rules: string;
+            title: string;
+            embedlink: {
+                heading: string;
+                description: string;
+                copyTitle: string;
+                hasCopiedTitle: string;
+            };
+        };
         files: {
             heading: string;
             description: string;

package/lib/locale/messages-en.js

@@ -507,6 +507,7 @@ var messages = _objectSpread(_objectSpread({
       files: 'Files',
       embedlink: 'Embedded link',
       concept: 'Concepts',
+      gloss: 'Glosses',
       podcast: 'Podcast',
       other: 'Other content'
     },
@@ -581,6 +582,18 @@ var messages = _objectSpread(_objectSpread({
         hasCopiedTitle: 'Embed link copied'
       }
     },
+    gloss: {
+      heading: 'How to reuse gloss content',
+      description: 'Remember that built-in content might have a different license than the gloss text',
+      rules: 'Rules for use of gloss:',
+      title: 'Title',
+      embedlink: {
+        heading: 'How to show the gloss in other content',
+        description: 'This url shows the gloss without menu and footer',
+        copyTitle: 'Copy embed link',
+        hasCopiedTitle: 'Embed link copied'
+      }
+    },
     files: {
       heading: 'How to reuse files',
       description: 'Remember to copy the text to be attached to the file where you use it.',
@@ -988,8 +1001,8 @@ var messages = _objectSpread(_objectSpread({
       heading: 'Text version',
       close: 'Close text version'
     },
-    readMoreDescriptionLabel: 'show more',
-    readLessDescriptionLabel: 'show less'
+    readMoreDescriptionLabel: 'Show more',
+    readLessDescriptionLabel: 'Show less'
   },
   h5p: {
     reuse: 'Use H5P',
@@ -1251,6 +1264,17 @@ var messages = _objectSpread(_objectSpread({
       radioButtonText: {
         option1: 'Show my name when I share a folder',
         option2: 'Do not show my name when I share a folder'
+      },
+      modalTexts: {
+        title: 'Upload a new profile picture',
+        uploadSection: {
+          title: 'Drag and drop',
+          subTitle: 'or press to upload picture'
+        },
+        fileName: 'Uploaded file:',
+        fileTypes: 'Accepted file types: PNG, JPG (Max 5MB)',
+        savePicture: 'Save profile picture',
+        deletePicture: 'Delete profile picture'
       }
     },
     resource: {

package/lib/locale/messages-nb.d.ts

@@ -241,6 +241,17 @@ declare const messages: {
                 option1: string;
                 option2: string;
             };
+            modalTexts: {
+                title: string;
+                uploadSection: {
+                    title: string;
+                    subTitle: string;
+                };
+                fileName: string;
+                fileTypes: string;
+                savePicture: string;
+                deletePicture: string;
+            };
         };
         resource: {
             add: string;
@@ -842,6 +853,7 @@ declare const messages: {
             files: string;
             embedlink: string;
             concept: string;
+            gloss: string;
             podcast: string;
             other: string;
         };
@@ -916,6 +928,18 @@ declare const messages: {
                 hasCopiedTitle: string;
             };
         };
+        gloss: {
+            heading: string;
+            description: string;
+            rules: string;
+            title: string;
+            embedlink: {
+                heading: string;
+                description: string;
+                copyTitle: string;
+                hasCopiedTitle: string;
+            };
+        };
         files: {
             heading: string;
             description: string;

package/lib/locale/messages-nb.js

@@ -520,6 +520,7 @@ var messages = _objectSpread(_objectSpread({
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       concept: 'Forklaringer',
+      gloss: 'Gloser',
       podcast: 'Podkast',
       other: 'Annet innhold'
     },
@@ -594,6 +595,18 @@ var messages = _objectSpread(_objectSpread({
         hasCopiedTitle: 'Innbyggingslenke kopiert'
       }
     },
+    gloss: {
+      heading: 'Slik gjenbruker du gloser',
+      description: 'Husk at innebygd innhold i en glose kan ha en annen lisens enn selve gloseteksten',
+      rules: 'Regler for bruk av glose:',
+      title: 'Tittel',
+      embedlink: {
+        heading: 'Slik viser du glosen i annet innhold',
+        description: 'Denne lenken viser glosen uten kontekst (meny og bunntekst)',
+        copyTitle: 'Kopier innbyggingslenke',
+        hasCopiedTitle: 'Innbyggingslenke kopiert'
+      }
+    },
     files: {
       heading: 'Slik gjenbruker du filer',
       description: 'Husk å kopier teksten som skal legges ved filen der du bruker den.',
@@ -973,11 +986,11 @@ var messages = _objectSpread(_objectSpread({
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {
-      url: 'Feil ved lasting av lydfila.',
+      url: 'Feil ved lasting av lydfil.',
       caption: 'Beklager, en feil oppstod ved lasting av lydfil.'
     },
     controls: {
-      forward15sec: 'Spol 15 sekunder frem',
+      forward15sec: 'Spol 15 sekunder fram',
       rewind15sec: 'Spol 15 sekunder tilbake',
       selectSpeed: 'Velg avspillingshastighet',
       adjustVolume: 'Endre volum'
@@ -986,8 +999,8 @@ var messages = _objectSpread(_objectSpread({
       heading: 'Tekstversjon',
       close: 'Lukk tekstversjon'
     },
-    readMoreDescriptionLabel: 'vis mer',
-    readLessDescriptionLabel: 'vis mindre'
+    readMoreDescriptionLabel: 'Vis mer',
+    readLessDescriptionLabel: 'Vis mindre'
   },
   h5p: {
     reuse: 'Bruk H5P',
@@ -1249,6 +1262,17 @@ var messages = _objectSpread(_objectSpread({
       radioButtonText: {
         option1: 'Vis navnet mitt når jeg deler en mappe',
         option2: 'Ikke vis navnet mitt når jeg deler mappe'
+      },
+      modalTexts: {
+        title: 'Last opp nytt profilbilde',
+        uploadSection: {
+          title: 'Dra og slipp',
+          subTitle: 'eller trykk for å laste opp bilde'
+        },
+        fileName: 'Opplastet fil:',
+        fileTypes: 'Godkjente filtyper: PNG, JPG (Maks 5MB)',
+        savePicture: 'Lagre profilbilde',
+        deletePicture: 'Slett profilbilde'
       }
     },
     resource: {

package/lib/locale/messages-nn.d.ts

@@ -241,6 +241,17 @@ declare const messages: {
                 option1: string;
                 option2: string;
             };
+            modalTexts: {
+                title: string;
+                uploadSection: {
+                    title: string;
+                    subTitle: string;
+                };
+                fileName: string;
+                fileTypes: string;
+                savePicture: string;
+                deletePicture: string;
+            };
         };
         resource: {
             add: string;
@@ -842,6 +853,7 @@ declare const messages: {
             files: string;
             embedlink: string;
             concept: string;
+            gloss: string;
             podcast: string;
             other: string;
         };
@@ -916,6 +928,18 @@ declare const messages: {
             rules: string;
             title: string;
         };
+        gloss: {
+            embedlink: {
+                heading: string;
+                description: string;
+                copyTitle: string;
+                hasCopiedTitle: string;
+            };
+            heading: string;
+            description: string;
+            rules: string;
+            title: string;
+        };
         files: {
             heading: string;
             description: string;

package/lib/locale/messages-nn.js

@@ -520,6 +520,7 @@ var messages = _objectSpread(_objectSpread({
       files: 'Filer',
       embedlink: 'Innbyggingslenke',
       concept: 'Forklaringar',
+      gloss: 'Glosar',
       podcast: 'Podkast',
       other: 'Anna innhald'
     },
@@ -594,6 +595,18 @@ var messages = _objectSpread(_objectSpread({
       rules: 'Reglar for bruk av forklaring:',
       title: 'Tittel'
     },
+    gloss: {
+      embedlink: {
+        heading: 'Slik viser du glosen i anna innhald',
+        description: 'Denne lenka viser glosen utan kontekst (meny og botntekst)',
+        copyTitle: 'Kopier innbyggingslenke',
+        hasCopiedTitle: 'Innbyggingslenke kopiert'
+      },
+      heading: 'Slik gjenbruker du gloser',
+      description: 'Husk at innebygd innhald i ei glose kan ha ein anna lisens enn sjølve gloseteksten',
+      rules: 'Regler for bruk av glose:',
+      title: 'Tittel'
+    },
     files: {
       heading: 'Slik gjenbruker du filer',
       description: 'Hugs å kopiere teksten som skal leggjast ved fila der du bruker ho.',
@@ -968,17 +981,17 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   audio: {
-    play: 'Spill av',
+    play: 'Spel av',
     pause: 'Pause',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {
-      url: 'Feil ved lasting av lydfila.',
+      url: 'Feil ved lasting av lydfil.',
       caption: 'Orsak, ein feil oppstod ved lasting av lydfil.'
     },
     controls: {
-      forward15sec: 'Spol 15 sekundar fram',
-      rewind15sec: 'Spol 15 sekundar tilbake',
+      forward15sec: 'Spol 15 sekund fram',
+      rewind15sec: 'Spol 15 sekund tilbake',
       selectSpeed: 'Velg avspelingshastigheit',
       adjustVolume: 'Endre volum'
     },
@@ -986,8 +999,8 @@ var messages = _objectSpread(_objectSpread({
       heading: 'Tekstversjon',
       close: 'Lukk tekstversjon'
     },
-    readMoreDescriptionLabel: 'vis meir',
-    readLessDescriptionLabel: 'vis mindre'
+    readMoreDescriptionLabel: 'Vis meir',
+    readLessDescriptionLabel: 'Vis mindre'
   },
   h5p: {
     reuse: 'Bruk H5P',
@@ -1249,6 +1262,17 @@ var messages = _objectSpread(_objectSpread({
       radioButtonText: {
         option1: 'Vis namnet mitt når eg deler ei mappe',
         option2: 'Ikkje vis namnet mitt når eg deler mappe'
+      },
+      modalTexts: {
+        title: 'Last opp nytt profilbilete',
+        uploadSection: {
+          title: 'Dra og slepp',
+          subTitle: 'eller trykk for å lasta opp bilete'
+        },
+        fileName: 'Opplasta fil:',
+        fileTypes: 'Godkjente filtyper: PNG, JPG (Maks 5MB)',
+        savePicture: 'Lagre profilbilete',
+        deletePicture: 'Slett profilbilete'
       }
     },
     resource: {

package/lib/locale/messages-se.d.ts

@@ -241,6 +241,17 @@ declare const messages: {
                 option1: string;
                 option2: string;
             };
+            modalTexts: {
+                title: string;
+                uploadSection: {
+                    title: string;
+                    subTitle: string;
+                };
+                fileName: string;
+                fileTypes: string;
+                savePicture: string;
+                deletePicture: string;
+            };
         };
         resource: {
             add: string;
@@ -842,6 +853,7 @@ declare const messages: {
             files: string;
             embedlink: string;
             concept: string;
+            gloss: string;
             podcast: string;
             other: string;
         };
@@ -916,6 +928,18 @@ declare const messages: {
                 hasCopiedTitle: string;
             };
         };
+        gloss: {
+            heading: string;
+            description: string;
+            rules: string;
+            title: string;
+            embedlink: {
+                heading: string;
+                description: string;
+                copyTitle: string;
+                hasCopiedTitle: string;
+            };
+        };
         files: {
             heading: string;
             description: string;

package/lib/locale/messages-se.js

@@ -520,6 +520,7 @@ var messages = _objectSpread(_objectSpread({
       files: 'Fiillat',
       embedlink: 'Sisahuksenliŋka',
       concept: 'Čilgehusat',
+      gloss: 'Gloser',
       podcast: 'Podkásta',
       other: 'Eará sisdoallu'
     },
@@ -594,6 +595,18 @@ var messages = _objectSpread(_objectSpread({
         hasCopiedTitle: 'Sisahuksenliŋka máŋgejuvvon'
       }
     },
+    gloss: {
+      heading: 'Movt geavahit ođđasit dajaldagaid',
+      description: 'Muitte ahte sisdoalus mii lea vuojuhuvvon ovtta gihppagii sáhttá leat eará liseansa go dušše jietnadat.',
+      rules: 'Glossa geavaheami njuolggadusat:',
+      title: 'Namahus',
+      embedlink: {
+        heading: 'Čájet jietnadaga eará sisdoaluin',
+        description: 'Dát liŋka čájeha teavstta konteavstta haga (fállu ja juolgeteaksta)',
+        copyTitle: 'Máŋge sisačálihanliŋkka',
+        hasCopiedTitle: 'Sajáiduhttinliŋka mángejuvvon'
+      }
+    },
     files: {
       heading: 'Ná geavahat fiillaid ođđasit',
       description: 'Muitte máŋget teavsttaid mat galget čuovvut fiillaid doppe gos dat geavahuvvet.',
@@ -1249,6 +1262,17 @@ var messages = _objectSpread(_objectSpread({
       radioButtonText: {
         option1: 'Čájet mu nama máhpa juohkkedettiin',
         option2: 'Ale čájet mu nama máhpa juohkkedettiin'
+      },
+      modalTexts: {
+        title: 'Viečča ođđa profiila gova',
+        uploadSection: {
+          title: 'Gease ja luoitte',
+          subTitle: 'dahje coahkkal vai viežžat gova'
+        },
+        fileName: 'Sáddejuvvon fiila:',
+        fileTypes: 'Dohkkehuvvon fiilašlájat: PNG, JPG (Máksá 5MB)',
+        savePicture: 'Vurke profiilagova',
+        deletePicture: 'Sihko profiilagova'
       }
     },
     resource: {

package/lib/locale/messages-sma.d.ts

@@ -241,6 +241,17 @@ declare const messages: {
                 option1: string;
                 option2: string;
             };
+            modalTexts: {
+                title: string;
+                uploadSection: {
+                    title: string;
+                    subTitle: string;
+                };
+                fileName: string;
+                fileTypes: string;
+                savePicture: string;
+                deletePicture: string;
+            };
         };
         resource: {
             add: string;
@@ -842,6 +853,7 @@ declare const messages: {
             files: string;
             embedlink: string;
             concept: string;
+            gloss: string;
             podcast: string;
             other: string;
         };
@@ -916,6 +928,18 @@ declare const messages: {
                 hasCopiedTitle: string;
             };
         };
+        gloss: {
+            heading: string;
+            description: string;
+            rules: string;
+            title: string;
+            embedlink: {
+                heading: string;
+                description: string;
+                copyTitle: string;
+                hasCopiedTitle: string;
+            };
+        };
         files: {
             heading: string;
             description: string;

package/lib/locale/messages-sma.js

@@ -520,6 +520,7 @@ var messages = _objectSpread(_objectSpread({
       files: 'Fijlh',
       embedlink: 'Sïjsebïejemesvaalhtese',
       concept: 'Buerkiestimmieh',
+      gloss: 'Glosa',
       podcast: 'Podkast',
       other: 'Jeatjah sisvege'
     },
@@ -594,6 +595,18 @@ var messages = _objectSpread(_objectSpread({
         hasCopiedTitle: 'Innbyggingslenke kopiert'
       }
     },
+    gloss: {
+      heading: 'Naemhtie gïelem ikth vielie nåhtadidh',
+      description: 'Mujhtieh sisvege aktene raajesisnie maahta jeatjah lisensem utnedh enn jïjtjehke raajesisnie',
+      rules: 'Njoelkedassh guktie diejvesem nåhtadidh:',
+      title: 'Tihtele',
+      embedlink: {
+        heading: 'Naemhtie gïelem jeatjah sisvegisnie vuesehte',
+        description: 'Daate lïenghke vuesehte tjoejh konteksten namhtah (meny jïh nueliekapihtele)',
+        copyTitle: 'Kopijerh svaalhtesem sïjse loggedh',
+        hasCopiedTitle: 'Bigkeme svaalhtese kopijeradamme'
+      }
+    },
     files: {
       heading: 'Slik gjenbruker du filer',
       description: 'Mujhtieh kopijem vaeltedh teeksteste  mij edtja fijlen baalte bïejesovvedh desnie gusnie dam nuhtjh.',
@@ -986,8 +999,8 @@ var messages = _objectSpread(_objectSpread({
       heading: 'Teeksteversjovne',
       close: 'Dahph teeksteversjovnem'
     },
-    readMoreDescriptionLabel: 'vis mer',
-    readLessDescriptionLabel: 'vis mindre'
+    readMoreDescriptionLabel: 'Vis mer',
+    readLessDescriptionLabel: 'Vis mindre'
   },
   h5p: {
     reuse: 'Bruk H5P',
@@ -1249,6 +1262,17 @@ var messages = _objectSpread(_objectSpread({
       radioButtonText: {
         option1: 'Vuesehth mov nommem gosse maabpam juekieh',
         option2: 'Aellieh mov nommem vuesehth gosse maabpam juekieh'
+      },
+      modalTexts: {
+        title: 'Orre profijleguvviem bæjhkoehtidh',
+        uploadSection: {
+          title: 'Gïesh jïh luajhth',
+          subTitle: 'jallh diedtieh juktie guvviem bæjjese vaeltedh'
+        },
+        fileName: 'Bijjiedamme tjaatsege:',
+        fileTypes: 'Nænnoestamme tjaatsegh: PNG , JPG (Maakseme 5 MB)',
+        savePicture: 'Vurkehth profijleguvviem',
+        deletePicture: 'Prefikse guvviem sliejhtedh'
       }
     },
     resource: {
@@ -1325,7 +1349,7 @@ var messages = _objectSpread(_objectSpread({
       concept: 'Forklaring',
       h5p: 'H5P',
       external: 'Ekstern ressurs',
-      gloss: 'Glose'
+      gloss: 'Glosa'
     }
   },
   gloss: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "49.0.1",
+  "version": "49.0.4",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.2",
-    "@ndla/button": "^12.0.8",
-    "@ndla/carousel": "^4.0.10",
-    "@ndla/core": "^4.2.4",
-    "@ndla/dropdown-menu": "^1.0.13",
-    "@ndla/forms": "^5.0.10",
+    "@ndla/accordion": "^3.0.3",
+    "@ndla/button": "^12.0.9",
+    "@ndla/carousel": "^4.0.11",
+    "@ndla/core": "^4.2.5",
+    "@ndla/dropdown-menu": "^1.0.14",
+    "@ndla/forms": "^5.0.11",
     "@ndla/hooks": "^2.1.1",
-    "@ndla/icons": "^4.1.5",
+    "@ndla/icons": "^4.1.6",
     "@ndla/licenses": "^7.2.2",
-    "@ndla/modal": "^5.0.7",
-    "@ndla/notion": "^6.0.10",
-    "@ndla/safelink": "^4.1.33",
-    "@ndla/select": "^3.1.5",
-    "@ndla/switch": "^1.1.19",
-    "@ndla/tabs": "^3.1.4",
-    "@ndla/tooltip": "^6.0.1",
-    "@ndla/typography": "^0.2.6",
+    "@ndla/modal": "^5.0.8",
+    "@ndla/notion": "^6.0.11",
+    "@ndla/safelink": "^4.1.34",
+    "@ndla/select": "^3.1.6",
+    "@ndla/switch": "^1.1.20",
+    "@ndla/tabs": "^3.1.5",
+    "@ndla/tooltip": "^6.0.2",
+    "@ndla/typography": "^0.2.7",
     "@ndla/util": "^4.0.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@ndla/types-backend": "^0.2.21",
-    "@ndla/types-embed": "^4.0.5",
+    "@ndla/types-embed": "^4.0.6",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "613a1b7bd697142fdcee7cca42c743f4c2431a40"
+  "gitHead": "7b7ae968b766e37ae17f3917e2c051a22d2eb4e5"
 }

package/src/Gloss/Gloss.tsx

@@ -57,18 +57,21 @@ const Wrapper = styled.div`
 
 const GlossContainer = styled.div`
   display: flex;
+  align-items: center;
   flex-wrap: wrap;
   gap: ${spacing.nsmall};
+  span {
+    ${fonts.sizes('16px', '24px')};
+  }
+  span[data-pinyin] {
+    font-style: italic;
+  }
 `;
 
 const GlossSpan = styled.span`
   font-weight: ${fonts.weight.bold};
 `;
 
-const TypeSpan = styled.span`
-  font-style: italic;
-`;
-
 const StyledAccordionHeader = styled(AccordionHeader)`
   font-family: ${fonts.sans};
   ${fonts.sizes('16px', '24px')};
@@ -92,6 +95,9 @@ const TranslatedText = styled.span`
     font-weight: ${fonts.weight.bold};
     background-color: ${colors.background.lightBlue};
   }
+  &[data-pinyin] {
+    font-style: italic;
+  }
 `;
 
 const Gloss = ({ title, glossData, audio }: Props) => {
@@ -116,6 +122,7 @@ const Gloss = ({ title, glossData, audio }: Props) => {
                 )}
                 {glossData.transcriptions.pinyin && (
                   <span
+                    data-pinyin=""
                     key={t('gloss.transcriptions.pinyin')}
                     aria-label={t('gloss.transcriptions.pinyin')}
                     lang={glossData.originalLanguage}
@@ -124,12 +131,12 @@ const Gloss = ({ title, glossData, audio }: Props) => {
                   </span>
                 )}
                 {glossData.wordClass && (
-                  <TypeSpan aria-label={t('gloss.wordClass')}>{t(`wordClass.${glossData.wordClass}`)}</TypeSpan>
+                  <span aria-label={t('gloss.wordClass')}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</span>
                 )}
               </GlossContainer>
               {audio?.src && <SpeechControl src={audio.src} title={audio.title}></SpeechControl>}
             </Wrapper>
-            <span>{title.title}</span>
+            <span lang={title.language}>{title.title}</span>
           </Container>
           {glossData.examples && glossData.examples.length > 0 && (
             <AccordionRoot type="single" collapsible>
@@ -140,9 +147,15 @@ const Gloss = ({ title, glossData, audio }: Props) => {
                     <div key={index}>
                       {example.map((translation, innerIndex) => (
                         <div key={`${index}_${innerIndex}`}>
-                          <TranslatedText data-first={innerIndex === 0}>{translation.example}</TranslatedText>
+                          <TranslatedText data-first={innerIndex === 0} lang={translation.language}>
+                            {translation.example}
+                          </TranslatedText>
                           {translation.transcriptions.pinyin && (
-                            <TranslatedText key={t('gloss.transcriptions.pinyin')} lang={glossData.originalLanguage}>
+                            <TranslatedText
+                              key={t('gloss.transcriptions.pinyin')}
+                              data-pinyin=""
+                              lang={glossData.originalLanguage}
+                            >
                               {translation.transcriptions?.pinyin}
                             </TranslatedText>
                           )}