@ndla/ui 49.0.3 → 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;

package/lib/locale/messages-en.js

@@ -1264,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;

package/lib/locale/messages-nb.js

@@ -1262,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;

package/lib/locale/messages-nn.js

@@ -1262,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;

package/lib/locale/messages-se.js

@@ -1262,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;

package/lib/locale/messages-sma.js

@@ -1262,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: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "49.0.3",
+  "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": "ce524951b1e5c641505befbf93f9e605015aba6f"
+  "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,7 +131,7 @@ 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>}
@@ -144,7 +151,11 @@ const Gloss = ({ title, glossData, audio }: Props) => {
                             {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>
                           )}

package/src/ResourceGroup/ResourceItem.tsx

@@ -188,6 +188,7 @@ interface Props {
   contentTypeDescription?: string;
   extraBottomMargin?: boolean;
   showAdditionalResources?: boolean;
+  language?: string;
   access?: 'teacher';
   heartButton?: (path: string) => ReactNode;
 }
@@ -212,6 +213,7 @@ const ResourceItem = ({
   additional,
   showAdditionalResources,
   access,
+  language,
   heartButton,
 }: Props & Resource) => {
   const { t } = useTranslation();
@@ -238,7 +240,12 @@ const ResourceItem = ({
           <ContentTypeBadge type={contentType ?? ''} background border={false} />
         </ContentBadgeWrapper>
         <InlineContainer>
-          <ResourceLink to={path} aria-current={active ? 'page' : undefined} aria-describedby={describedBy}>
+          <ResourceLink
+            to={path}
+            lang={language}
+            aria-current={active ? 'page' : undefined}
+            aria-describedby={describedBy}
+          >
             {name}
           </ResourceLink>
           {active ? <CurrentSmall>{t('resource.youAreHere')}</CurrentSmall> : undefined}

package/src/Table/Table.tsx

@@ -205,6 +205,7 @@ const TableWrapper = styled.div`
 `;
 
 const OverflowWrapper = styled.div`
+  position: relative;
   overflow-x: auto;
 `;
 

package/src/locale/messages-en.ts

@@ -1307,6 +1307,17 @@ const messages = {
         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: {
       add: 'Add folder/tag',

package/src/locale/messages-nb.ts

@@ -1306,6 +1306,17 @@ const messages = {
         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: {
       add: 'Legg til mappe/emneknagg',

package/src/locale/messages-nn.ts

@@ -1306,6 +1306,17 @@ const messages = {
         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: {
       add: 'Legg til mappe/emneknagg',

package/src/locale/messages-se.ts

@@ -1304,6 +1304,17 @@ const messages = {
         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: {
       add: 'Lasit máhpa/fáddágilkora',

package/src/locale/messages-sma.ts

@@ -1308,6 +1308,17 @@ const messages = {
         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: {
       add: 'Legg til mappe/emneknagg',