@ndla/ui 50.9.14 → 50.9.19

package/lib/locale/messages-nn.js

@@ -1098,7 +1098,9 @@ const messages = {
           selectAdministrator: 'Gjør "{{user}}" til administrator.',
           enableArena: 'Gi "{{user}}" tilgang til arena.',
           noUsers: "Ingen brukarar funne.",
-          search: "Søk etter brukarar"
+          search: "Søk etter brukarar",
+          becameAdmin: "Brukar '{{user}}' har fått administrator tilgong",
+          becameNormalUser: "Brukar '{{user}}' har ikkje lenger administrator tilgong"
         },
         flags: {
           title: "Flagg",

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

@@ -1080,6 +1080,8 @@ declare const messages: {
                     enableArena: string;
                     noUsers: string;
                     search: string;
+                    becameAdmin: string;
+                    becameNormalUser: string;
                 };
                 flags: {
                     title: string;

package/lib/locale/messages-se.js

@@ -1098,7 +1098,9 @@ const messages = {
           selectAdministrator: 'Gjør "{{user}}" til administrator.',
           enableArena: 'Gi "{{user}}" tilgang til arena.',
           noUsers: "Ingen brukere funnet.",
-          search: "Søk etter brukere"
+          search: "Søk etter brukere",
+          becameAdmin: "Bruker '{{user}}' har fått administrator tilgang",
+          becameNormalUser: "Bruker '{{user}}' har ikke lenger administrator tilgang"
         },
         flags: {
           title: "Flagg",

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

@@ -1080,6 +1080,8 @@ declare const messages: {
                     enableArena: string;
                     noUsers: string;
                     search: string;
+                    becameAdmin: string;
+                    becameNormalUser: string;
                 };
                 flags: {
                     title: string;

package/lib/locale/messages-sma.js

@@ -1098,7 +1098,9 @@ const messages = {
           selectAdministrator: 'Gjør "{{user}}" til administrator.',
           enableArena: 'Gi "{{user}}" tilgang til arena.',
           noUsers: "Ingen brukere funnet.",
-          search: "Søk etter brukere"
+          search: "Søk etter brukere",
+          becameAdmin: "Bruker '{{user}}' har fått administrator tilgang",
+          becameNormalUser: "Bruker '{{user}}' har ikke lenger administrator tilgang"
         },
         flags: {
           title: "Flagg",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.9.14",
+  "version": "50.9.19",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,7 +31,7 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.29",
+    "@ndla/accordion": "^3.0.30",
     "@ndla/button": "^12.0.34",
     "@ndla/carousel": "^4.0.32",
     "@ndla/core": "^4.4.1",
@@ -71,7 +71,7 @@
   },
   "devDependencies": {
     "@ndla/types-backend": "^0.2.21",
-    "@ndla/types-embed": "^4.0.15",
+    "@ndla/types-embed": "^4.0.19",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fa56ac6f7c5fa3a4f877f02d9d52c216ab496fa7"
+  "gitHead": "f4d17b7fb38aae4c322d973328d3c8c6145111f3"
 }

package/src/Embed/ExternalEmbed.tsx

@@ -47,7 +47,7 @@ const ExternalEmbed = ({ embed, isConcept }: Props) => {
   if (embedData.type === "fullscreen") {
     const image = {
       src: data.iframeImage?.image.imageUrl ?? "",
-      alt: data.iframeImage?.alttext?.alttext ?? "",
+      alt: embedData.alt !== undefined ? embedData.alt : data.iframeImage?.alttext?.alttext ?? "",
     };
     return (
       <Figure type="full">

package/src/Gloss/Gloss.tsx

@@ -9,8 +9,10 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { AccordionRoot, AccordionItem, AccordionHeader, AccordionContent } from "@ndla/accordion";
+import { Trigger } from "@radix-ui/react-accordion";
+import { AccordionRoot, AccordionItem, AccordionContent } from "@ndla/accordion";
 import { colors, spacing, misc, fonts } from "@ndla/core";
+import { ChevronDown } from "@ndla/icons/common";
 import { IGlossData, IGlossExample } from "@ndla/types-backend/concept-api";
 import GlossExample from "./GlossExample";
 import SpeechControl from "../AudioPlayer/SpeechControl";
@@ -29,22 +31,16 @@ export interface Props {
   exampleLangs?: string;
 }
 
-const Container = styled.div`
-  font-family: ${fonts.sans};
-  display: flex;
-  flex-direction: column;
+const StyledAccordionItem = styled(AccordionItem)`
   background-color: ${colors.background.lightBlue};
-  padding: ${spacing.nsmall} ${spacing.normal};
-  border: 1px solid ${colors.brand.lighter};
-  border-radius: ${misc.borderRadius};
-  margin-bottom: ${spacing.xsmall};
-  gap: ${spacing.nsmall};
+  border: 1px solid ${colors.brand.tertiary};
 `;
 
 const Wrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  padding: ${spacing.nsmall} ${spacing.normal} 0 ${spacing.normal};
 `;
 
 const GlossContainer = styled.div`
@@ -53,7 +49,7 @@ const GlossContainer = styled.div`
   flex-wrap: wrap;
   gap: ${spacing.nsmall};
   span {
-    ${fonts.sizes("16px", "24px")};
+    ${fonts.size.text.metaText.small};
   }
   span[data-pinyin] {
     font-style: italic;
@@ -64,17 +60,49 @@ const GlossSpan = styled.span`
   font-weight: ${fonts.weight.bold};
 `;
 
-const StyledAccordionHeader = styled(AccordionHeader)`
-  font-family: ${fonts.sans};
-  ${fonts.sizes("16px", "24px")};
-  font-weight: ${fonts.weight.semibold};
+const StyledWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 ${spacing.normal} ${spacing.nsmall} ${spacing.normal};
   background-color: ${colors.background.lightBlue};
+  border-radius: ${misc.borderRadius};
 `;
 
 const StyledAccordionContent = styled(AccordionContent)`
   padding: 0;
 `;
 
+const StyledTrigger = styled(Trigger)`
+  background-color: transparent;
+  cursor: pointer;
+  border: none;
+  padding: ${spacing.xsmall};
+  border-radius: ${misc.borderRadiusLarge};
+  color: ${colors.brand.primary};
+  &:hover,
+  &:focus-visible {
+    color: ${colors.white};
+    background-color: ${colors.brand.primary};
+  }
+  &[data-state="open"] {
+    background-color: ${colors.brand.lighter};
+    &:hover,
+    &:focus-visible {
+      background-color: ${colors.brand.primary};
+    }
+  }
+`;
+
+const StyledChevron = styled(ChevronDown)`
+  transition: all 200ms ease-in-out;
+  [data-styled-trigger][data-state="open"] > & {
+    transform: rotate(180deg);
+  }
+  min-width: ${spacing.normal};
+  min-height: ${spacing.normal};
+`;
+
 const getFilteredExamples = (
   glossData: IGlossData | undefined,
   exampleIds: string | undefined,
@@ -106,8 +134,8 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) =>
   return (
     <>
       {glossData && (
-        <>
-          <Container>
+        <AccordionRoot type="single" collapsible>
+          <StyledAccordionItem value="1">
             <Wrapper>
               <GlossContainer>
                 <GlossSpan lang={glossData.originalLanguage}>{glossData.gloss}</GlossSpan>
@@ -136,12 +164,14 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) =>
               </GlossContainer>
               {audio?.src && <SpeechControl src={audio.src} title={audio.title}></SpeechControl>}
             </Wrapper>
-            <span lang={title.language}>{title.title}</span>
-          </Container>
-          {filteredExamples.length > 0 && (
-            <AccordionRoot type="single" collapsible>
-              <AccordionItem value="1">
-                <StyledAccordionHeader headingLevel="span">{t("gloss.examples")}</StyledAccordionHeader>
+            {filteredExamples.length > 0 ? (
+              <>
+                <StyledWrapper>
+                  <span lang={title.language}>{title.title}</span>
+                  <StyledTrigger data-styled-trigger>
+                    <StyledChevron />
+                  </StyledTrigger>
+                </StyledWrapper>
                 <StyledAccordionContent>
                   {filteredExamples.map((examples, index) => (
                     <div key={`gloss-example-${index}`}>
@@ -151,15 +181,20 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) =>
                           example={example}
                           originalLanguage={glossData.originalLanguage}
                           index={innerIndex}
+                          lastExampleIndex={examples.length - 1}
                         />
                       ))}
                     </div>
                   ))}
                 </StyledAccordionContent>
-              </AccordionItem>
-            </AccordionRoot>
-          )}
-        </>
+              </>
+            ) : (
+              <StyledWrapper>
+                <span lang={title.language}>{title.title}</span>
+              </StyledWrapper>
+            )}
+          </StyledAccordionItem>
+        </AccordionRoot>
       )}
     </>
   );

package/src/Gloss/GlossExample.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from "@emotion/styled";
-import { colors, spacing, fonts } from "@ndla/core";
+import { colors, spacing, fonts, misc } from "@ndla/core";
 import { IGlossExample } from "@ndla/types-backend/concept-api";
 import { Text } from "@ndla/typography";
 
@@ -15,48 +15,54 @@ export interface Props {
   example: IGlossExample;
   originalLanguage: string | undefined;
   index: number;
-  isStandalone?: boolean;
+  lastExampleIndex: number;
 }
 
 const StyledGlossExampleWrapper = styled.div`
-  &[data-is-standalone="true"] {
-    &:first-of-type {
-      border-top: 1px solid ${colors.brand.lighter};
-    }
+  &:first-of-type {
+    border-top: 1px solid ${colors.brand.primary};
   }
+  &:last-of-type {
+    border-radius: ${misc.borderRadius};
+  }
+  background-color: ${colors.background.default};
 `;
-const StyledGlossExample = styled.div`
-  padding: ${spacing.small} 0;
-  padding-left: ${spacing.normal};
-  border: 1px solid ${colors.brand.lighter};
-  border-top: none;
 
+const StyledGlossExample = styled.div`
+  padding: ${spacing.small} ${spacing.normal};
+  border-bottom: 1px solid ${colors.brand.lighter};
+  background-color: ${colors.background.default};
   &[data-is-first="true"] {
     background-color: ${colors.background.lightBlue};
+    border-radius: 0px;
+  }
+  &[data-is-last="true"] {
+    border-radius: ${misc.borderRadius};
+    border-bottom: none;
   }
 `;
+
 const StyledText = styled(Text)`
   &[data-is-first="true"] {
     font-weight: ${fonts.weight.bold};
-    color: ${colors.brand.dark};
+    color: ${colors.text.primary};
   }
   &[data-pinyin] {
     font-style: italic;
   }
 `;
 
-const GlossExample = ({ example, originalLanguage, index, isStandalone = false }: Props) => {
+const GlossExample = ({ example, originalLanguage, index, lastExampleIndex }: Props) => {
   return (
-    <StyledGlossExampleWrapper data-is-standalone={isStandalone}>
-      <StyledGlossExample data-is-first={index === 0} lang={example.language}>
+    <StyledGlossExampleWrapper>
+      <StyledGlossExample data-is-first={index === 0} data-is-last={index === lastExampleIndex} 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">
+          <StyledText data-pinyin textStyle="meta-text-medium" margin="none">
             {example.transcriptions?.pinyin}
           </StyledText>
         </StyledGlossExample>

package/src/locale/messages-en.ts

@@ -1110,6 +1110,8 @@ const messages = {
           enableArena: "Give {{user}} access to the arena.",
           noUsers: "No users found.",
           search: "Search for users",
+          becameAdmin: "User '{{user}}' was elevated to administrator",
+          becameNormalUser: "User '{{user}}' no longer has administrator access",
         },
         flags: {
           title: "Flag",

package/src/locale/messages-nb.ts

@@ -1110,6 +1110,8 @@ const messages = {
           enableArena: 'Gi "{{user}}" tilgang til arena.',
           noUsers: "Ingen brukere funnet.",
           search: "Søk etter brukere",
+          becameAdmin: "Bruker '{{user}}' har fått administrator tilgang",
+          becameNormalUser: "Bruker '{{user}}' har ikke lenger administrator tilgang",
         },
         flags: {
           title: "Flagg",

package/src/locale/messages-nn.ts

@@ -1110,6 +1110,8 @@ const messages = {
           enableArena: 'Gi "{{user}}" tilgang til arena.',
           noUsers: "Ingen brukarar funne.",
           search: "Søk etter brukarar",
+          becameAdmin: "Brukar '{{user}}' har fått administrator tilgong",
+          becameNormalUser: "Brukar '{{user}}' har ikkje lenger administrator tilgong",
         },
         flags: {
           title: "Flagg",

package/src/locale/messages-se.ts

@@ -1112,6 +1112,8 @@ const messages = {
           enableArena: 'Gi "{{user}}" tilgang til arena.',
           noUsers: "Ingen brukere funnet.",
           search: "Søk etter brukere",
+          becameAdmin: "Bruker '{{user}}' har fått administrator tilgang",
+          becameNormalUser: "Bruker '{{user}}' har ikke lenger administrator tilgang",
         },
         flags: {
           title: "Flagg",

package/src/locale/messages-sma.ts

@@ -1114,6 +1114,8 @@ const messages = {
           enableArena: 'Gi "{{user}}" tilgang til arena.',
           noUsers: "Ingen brukere funnet.",
           search: "Søk etter brukere",
+          becameAdmin: "Bruker '{{user}}' har fått administrator tilgang",
+          becameNormalUser: "Bruker '{{user}}' har ikke lenger administrator tilgang",
         },
         flags: {
           title: "Flagg",