@ndla/ui 50.10.2 → 50.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.10.2",
+  "version": "50.10.3",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,19 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.32",
-    "@ndla/button": "^12.0.35",
-    "@ndla/carousel": "^4.0.33",
+    "@ndla/accordion": "^3.0.33",
+    "@ndla/button": "^12.0.36",
+    "@ndla/carousel": "^4.0.34",
     "@ndla/core": "^4.4.2",
     "@ndla/dropdown-menu": "^1.0.30",
-    "@ndla/forms": "^7.0.4",
+    "@ndla/forms": "^7.0.5",
     "@ndla/hooks": "^2.1.5",
-    "@ndla/icons": "^5.0.12",
+    "@ndla/icons": "^5.1.0",
     "@ndla/licenses": "^7.2.5",
-    "@ndla/modal": "^5.0.32",
-    "@ndla/notion": "^6.0.33",
-    "@ndla/safelink": "^4.1.60",
-    "@ndla/select": "^3.3.7",
+    "@ndla/modal": "^5.0.33",
+    "@ndla/notion": "^6.0.34",
+    "@ndla/safelink": "^4.1.61",
+    "@ndla/select": "^3.3.8",
     "@ndla/switch": "^1.1.36",
     "@ndla/tabs": "^3.2.16",
     "@ndla/tooltip": "^6.0.19",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3367fa1dd54ee20315963e6f56d2f67f4b4ec8c1"
+  "gitHead": "f18e2cd060436b8cc28f4c6368ea7647e93c9ec6"
 }

package/src/AudioPlayer/SpeechControl.tsx

@@ -15,9 +15,10 @@ import Tooltip from "@ndla/tooltip";
 type Props = {
   src: string;
   title: string;
+  type?: "gloss" | "audio";
 };
 
-const SpeechControl = ({ src, title }: Props) => {
+const SpeechControl = ({ src, title, type = "audio" }: Props) => {
   const { t } = useTranslation();
   const audioRef = useRef<HTMLAudioElement>(null);
 
@@ -35,8 +36,8 @@ const SpeechControl = ({ src, title }: Props) => {
     <div>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio ref={audioRef} src={src} title={title} preload="metadata" />
-      <Tooltip tooltip={t("audio.play")}>
-        <IconButtonV2 type="button" onClick={togglePlay} aria-label={t("audio.play")} variant="ghost">
+      <Tooltip tooltip={t(`${type}.play`)}>
+        <IconButtonV2 type="button" onClick={togglePlay} aria-label={t(`${type}.play`)} variant="ghost">
           <VolumeUp />
         </IconButtonV2>
       </Tooltip>

package/src/Footer/Footer.stories.tsx

@@ -12,7 +12,6 @@ import { EditorName } from "./EditorName";
 import Footer from "./Footer";
 import { FooterText } from "./FooterText";
 import { defaultParameters } from "../../../../stories/defaults";
-import { LanguageSelector } from "../LanguageSelector";
 
 const mockCommonLinks = [
   {
@@ -74,6 +73,10 @@ const privacyLinks = [
     label: "Erklæring om informasjonskapsler",
     url: "https://ndla.no/article/erklaering-for-informasjonskapsler",
   },
+  {
+    label: "Tilgjengelighetserklæring",
+    url: "https://uustatus.no/nn/erklaringer/publisert/8cefdf3d-3272-402a-907b-689ddfc9bba7",
+  },
 ];
 
 export default {
@@ -122,23 +125,11 @@ export const WithoutContent: StoryObj<typeof Footer> = {
   },
 };
 
-export const WithLanguageSelector: StoryObj<typeof Footer> = {
-  args: {
-    privacyLinks: privacyLinks,
-    commonLinks: mockCommonLinks,
-    links: mockFooterLinks,
-    // eslint-disable-next-line no-console
-    languageSelector: <LanguageSelector inverted locales={["nn", "nb"]} onSelect={console.log} />,
-  },
-};
-
 export const WithAuthBlock: StoryObj<typeof Footer> = {
   args: {
     privacyLinks: privacyLinks,
     commonLinks: mockCommonLinks,
     links: mockFooterLinks,
-    // eslint-disable-next-line no-console
-    languageSelector: <LanguageSelector inverted locales={["nn", "nb"]} onSelect={console.log} />,
     auth: <div>Auth info can be placed down here</div>,
   },
 };

package/src/Footer/Footer.tsx

@@ -9,106 +9,12 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { colors, spacing, fonts, mq, breakpoints, spacingUnit, stackOrder } from "@ndla/core";
-import { FooterHeaderIcon } from "@ndla/icons/common";
-import { Text } from "@ndla/typography";
+import { colors, spacing, stackOrder } from "@ndla/core";
+import { Heading } from "@ndla/typography";
 import FooterLinks from "./FooterLinks";
-import FooterPrivacy from "./FooterPrivacy";
 import { OneColumn } from "../Layout";
 import { Locale } from "../types";
 
-const StyledBackground = styled.div`
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(96deg, rgba(0, 117, 160, 1) 0%, rgba(32, 88, 143, 0) 100%);
-`;
-
-const StyledDiv = styled.div`
-  color: #fff;
-  position: relative;
-  background: ${colors.brand.dark};
-  overflow: hidden;
-  z-index: ${stackOrder.base};
-  &[data-margin="true"] {
-    margin-top: ${spacing.xxlarge};
-  }
-`;
-
-const StyledOneColumn = styled(OneColumn)`
-  z-index: ${stackOrder.offsetSingle};
-  position: relative;
-`;
-
-const StyledText = styled(Text)`
-  ${fonts.sizes(20, 1.5)};
-  margin: 0;
-  font-weight: ${fonts.weight.semibold};
-  text-align: center;
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    ${fonts.sizes(24, 1.5)};
-    margin: ${spacing.normal} ${spacing.normal} ${spacing.large} 0;
-    text-align: left;
-  }
-`;
-
-const StyledFooterHeaderIcon = styled(FooterHeaderIcon)`
-  color: #fff;
-  width: ${spacing.large};
-  height: ${spacing.large};
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    width: ${spacing.xlarge};
-    height: ${spacing.xlarge};
-  }
-`;
-
-const StyledColumns = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: ${spacing.large} ${spacing.large} 0 0;
-  > div:first-of-type {
-    padding: ${spacing.normal};
-  }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    flex-direction: row;
-    align-items: flex-start;
-    > div:first-of-type {
-      padding: ${spacing.normal} ${spacingUnit * 1.75}px ${spacing.normal} ${spacing.large};
-    }
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    padding: ${spacing.large} 0;
-  }
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    padding: ${spacing.normal} ${spacing.normal} ${spacing.small};
-  }
-`;
-
-const StyledHr = styled.hr`
-  height: 1px;
-  margin: ${spacing.normal};
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    margin: ${spacing.large};
-  }
-  background: rgba(255, 255, 255, 0.1);
-  &:before {
-    content: none;
-  }
-`;
-
-const StyledLanguageWrapper = styled.div`
-  position: relative;
-  z-index: ${stackOrder.offsetSingle};
-  margin-top: ${spacing.normal};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 type Props = {
   children: ReactNode;
   lang: Locale;
@@ -126,35 +32,59 @@ type Props = {
     url: string;
     label: string;
   }[];
-  languageSelector?: ReactNode;
   auth?: ReactNode;
 };
 
-const Footer = ({ children, commonLinks, links, languageSelector, auth, privacyLinks }: Props) => {
+const StyledColumns = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${spacing.normal};
+`;
+
+const StyledHeading = styled(Heading)`
+  text-align: center;
+`;
+
+const StyledDiv = styled.div`
+  color: ${colors.white};
+  position: relative;
+  background: ${colors.brand.dark};
+  overflow: hidden;
+  z-index: ${stackOrder.base};
+`;
+
+const StyledOneColumn = styled(OneColumn)`
+  z-index: ${stackOrder.offsetSingle};
+  position: relative;
+  padding: ${spacing.large} ${spacing.large} ${spacing.xlarge};
+  max-width: 1196px;
+`;
+
+const StyledBackground = styled.div`
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: ${colors.brand.dark};
+`;
+
+const Footer = ({ children, commonLinks, links, auth, privacyLinks }: Props) => {
   const { t } = useTranslation();
 
-  const mainContent = (
-    <>
-      {children}
-      {privacyLinks && <FooterPrivacy privacyLinks={privacyLinks} />}
-    </>
-  );
+  const mainContent = <>{children}</>;
 
   const footerContent =
     links || commonLinks ? (
       <>
         <StyledColumns>
-          <div>
-            <StyledFooterHeaderIcon />
-          </div>
-          <div>
-            <StyledText element="div" textStyle="content-alt" margin="none">
-              {t("footer.vision")}
-            </StyledText>
-            <FooterLinks commonLinks={commonLinks} links={links} />
-          </div>
+          <StyledHeading element="span" headingStyle="h2" margin="none">
+            {t("footer.vision")}
+          </StyledHeading>
+          <FooterLinks commonLinks={commonLinks} links={links} privacyLinks={privacyLinks} />
         </StyledColumns>
-        <StyledHr />
         {mainContent}
       </>
     ) : (
@@ -164,9 +94,8 @@ const Footer = ({ children, commonLinks, links, languageSelector, auth, privacyL
   return (
     <>
       <footer>
-        <StyledDiv data-margin={!languageSelector}>
-          {languageSelector && <StyledLanguageWrapper>{languageSelector}</StyledLanguageWrapper>}
-          <StyledOneColumn cssModifier="large">{footerContent}</StyledOneColumn>
+        <StyledDiv>
+          <StyledOneColumn>{footerContent}</StyledOneColumn>
           <StyledBackground />
         </StyledDiv>
         {auth}

package/src/Footer/FooterLinks.tsx

@@ -10,29 +10,9 @@ import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { spacing, fonts, colors, mq, breakpoints } from "@ndla/core";
-import { Forward, Launch } from "@ndla/icons/common";
+import { Launch } from "@ndla/icons/common";
 import SafeLink from "@ndla/safelink";
-import { Text } from "@ndla/typography";
-
-const StyledLinksWrapper = styled.div`
-  display: flex;
-  align-items: flex-start;
-  gap: ${spacing.normal};
-  div:first-of-type {
-    margin-right: ${spacing.large};
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    div:first-of-type {
-      margin-right: ${spacing.xxlarge};
-    }
-  }
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    flex-direction: column;
-    > div {
-      margin-top: ${spacing.large};
-    }
-  }
-`;
+import { Heading } from "@ndla/typography";
 
 type FooterLinksProps = {
   commonLinks?: {
@@ -45,62 +25,88 @@ type FooterLinksProps = {
     text: string;
     icon: ReactNode;
   }[];
+  privacyLinks?: {
+    url: string;
+    label: string;
+  }[];
 };
 
+const FooterLinkContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-self: flex-start;
+  }
+  width: 100%;
+`;
+
+const LinkColumnWrapper = styled.div`
+  padding-right: ${spacing.large};
+  padding-top: ${spacing.normal};
+`;
+
+const LastLinkColumnWrapper = styled.div`
+  padding-top: ${spacing.normal};
+`;
+
 const StyledNav = styled.nav`
   display: flex;
   flex-direction: column;
-  color: #fff;
-  div {
-    margin: ${spacing.xsmall} 0;
-  }
+  color: ${colors.white};
+  gap: ${spacing.xsmall};
+  padding-top: ${spacing.small};
 `;
 
 const StyledSafeLink = styled(SafeLink)`
-  color: #fff;
-  ${fonts.sizes(16, 1.5)};
+  color: ${colors.white};
+  ${fonts.size.text.content};
   svg {
-    transform: translateY(-2px);
     margin-left: ${spacing.xsmall};
   }
 `;
 
 const StyledSocialMediaIcon = styled.span`
-  background: ${colors.white};
-  color: ${colors.brand.primary};
-  border-radius: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${spacing.large};
-  height: ${spacing.large};
   margin-right: ${spacing.small};
   svg {
     width: 20px;
     height: 20px;
+    color: ${colors.white};
   }
 `;
 
-const StyledSocialMediaLinkWrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const StyledTextLinks = styled(Text)`
-  ${fonts.sizes(16, 1.5)};
-  font-weight: ${fonts.weight.semibold};
+const StyledLaunch = styled(Launch)`
+  margin-left: ${spacing.xsmall};
 `;
 
-const FooterLinks = ({ links, commonLinks }: FooterLinksProps) => {
+const FooterLinks = ({ links, commonLinks, privacyLinks }: FooterLinksProps) => {
   const { t } = useTranslation();
   return (
     <>
-      <StyledLinksWrapper>
-        <div>
-          <StyledTextLinks id="otherLinks" element="span" textStyle="content-alt">
+      <FooterLinkContainer>
+        <LinkColumnWrapper>
+          <Heading element="span" headingStyle="list-title">
+            {t("footer.followUs")}
+          </Heading>
+          <StyledNav aria-label={t("footer.socialMedia")}>
+            {links?.map((link) => (
+              <div key={link.to}>
+                <StyledSocialMediaIcon>{link.icon}</StyledSocialMediaIcon>
+                <StyledSafeLink key={link.to} to={link.to}>
+                  {link.text}
+                </StyledSafeLink>
+              </div>
+            ))}
+          </StyledNav>
+        </LinkColumnWrapper>
+        <LinkColumnWrapper>
+          <Heading element="span" headingStyle="list-title">
             {t("footer.linksHeader")}
-          </StyledTextLinks>
-          <StyledNav aria-labelledby="otherLinks">
+          </Heading>
+          <StyledNav aria-label={t("footer.linksHeader")}>
             {commonLinks?.map((link) => (
               <div key={link.to}>
                 <StyledSafeLink
@@ -111,24 +117,26 @@ const FooterLinks = ({ links, commonLinks }: FooterLinksProps) => {
                   rel="noopener noreferrer"
                 >
                   {link.text}
-                  {link.external && <Launch />}
                 </StyledSafeLink>
+                {link.external && <StyledLaunch />}
               </div>
             ))}
           </StyledNav>
-        </div>
-        <StyledNav aria-label={t("footer.socialMedia")}>
-          {links?.map((link) => (
-            <StyledSocialMediaLinkWrapper key={link.to}>
-              <StyledSocialMediaIcon>{link.icon}</StyledSocialMediaIcon>
-              <StyledSafeLink to={link.to}>
-                {link.text}
-                <Forward />
-              </StyledSafeLink>
-            </StyledSocialMediaLinkWrapper>
-          ))}
-        </StyledNav>
-      </StyledLinksWrapper>
+        </LinkColumnWrapper>
+        <LastLinkColumnWrapper>
+          <Heading element="span" headingStyle="list-title">
+            {t("footer.aboutWebsite")}
+          </Heading>
+          <StyledNav aria-label={t("footer.aboutWebsite")}>
+            {privacyLinks &&
+              privacyLinks.map((link) => (
+                <div key={link.label}>
+                  <StyledSafeLink to={link.url}>{link.label}</StyledSafeLink>
+                </div>
+              ))}
+          </StyledNav>
+        </LastLinkColumnWrapper>
+      </FooterLinkContainer>
     </>
   );
 };

package/src/Footer/FooterText.tsx

@@ -13,22 +13,18 @@ import { spacing, fonts, mq, breakpoints } from "@ndla/core";
 const StyledFooterText = styled.p`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: end;
+  gap: ${spacing.xsmall};
   > span {
-    padding: ${spacing.xsmall} 0;
+    padding: ${spacing.xsmall} 0 0;
     text-align: center;
   }
   ${mq.range({ until: breakpoints.tabletWide })} {
-    ${fonts.sizes(16, 1.5)};
+    ${fonts.size.text.content};
     > span {
       padding: 0;
     }
-  }
-  ${mq.range({ until: breakpoints.mobileWide })} {
-    ${fonts.sizes(14, 1.3)};
-    > span {
-      padding-bottom: ${spacing.xsmall};
-    }
+    align-items: start;
   }
 `;
 

package/src/Gloss/Gloss.tsx

@@ -33,7 +33,12 @@ export interface Props {
 
 const StyledAccordionItem = styled(AccordionItem)`
   background-color: ${colors.background.lightBlue};
-  border: 1px solid ${colors.brand.tertiary};
+  border: 1px solid ${colors.brand.light};
+  border-radius: ${misc.borderRadius};
+  span {
+    ${fonts.size.text.content}
+    font-family: ${fonts.sans};
+  }
 `;
 
 const Wrapper = styled.div`
@@ -41,10 +46,6 @@ const Wrapper = styled.div`
   flex-wrap: wrap;
   justify-content: space-between;
   padding: ${spacing.nsmall} ${spacing.normal} 0 ${spacing.normal};
-  span {
-    ${fonts.size.text.content}
-    font-family: ${fonts.sans};
-  }
 `;
 
 const GlossContainer = styled.div`
@@ -163,7 +164,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs }: Props) =>
                   <span aria-label={t("gloss.wordClass")}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</span>
                 )}
               </GlossContainer>
-              {audio?.src && <SpeechControl src={audio.src} title={audio.title}></SpeechControl>}
+              {audio?.src && <SpeechControl src={audio.src} title={audio.title} type="gloss" />}
             </Wrapper>
             {filteredExamples.length > 0 ? (
               <>

package/src/LanguageSelector/LanguageSelector.tsx

@@ -9,7 +9,7 @@
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { ButtonV2 } from "@ndla/button";
-import { colors, fonts, spacing } from "@ndla/core";
+import { colors, fonts, spacing, stackOrder } from "@ndla/core";
 import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from "@ndla/dropdown-menu";
 import { ChevronDown } from "@ndla/icons/common";
 
@@ -26,6 +26,7 @@ const StyledDropdownContent = styled(DropdownContent)`
   [data-arrow] {
     fill: ${colors.brand.tertiary};
   }
+  z-index: ${stackOrder.modal};
 `;
 
 const LanguageChoice = styled(ButtonV2)`

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -96,7 +96,14 @@ const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type }: Pro
         <TypeWrapper>
           {type && (
             <BadgeWrapper>
-              <ContentTypeBadge type={type} title={t(`contentTypes.${type}`)} background border={false} size="large" />
+              <ContentTypeBadge
+                aria-hidden
+                type={type}
+                title={t(`contentTypes.${type}`)}
+                background
+                border={false}
+                size="large"
+              />
             </BadgeWrapper>
           )}
           <SubjectName>

package/src/locale/messages-en.ts

@@ -509,13 +509,15 @@ const messages = {
     aboutNDLA: "About NDLA",
     socialMedia: "Social media",
     selectLanguage: "Choose language (språk): ",
-    info: "This webapplication is developed by NDLA as Open Source code.",
+    info: "This webapplication is developed as Open Source code.",
     editorInChief: "Editor in chief:",
-    linksHeader: "Other NDLA sites",
+    linksHeader: "Contact",
     availabilityLink: "Availability statement",
     privacyLink: "Privacy statement",
     cookiesLink: "Statement about cookies",
+    aboutWebsite: "About",
     vision: "We create the learning of the future together",
+    followUs: "Follow us",
     socialMediaLinks: {
       facebook: "NDLA on Facebook",
       facebookAria: "Visit NDLA on Facebook",
@@ -1062,7 +1064,8 @@ const messages = {
         maxLength: "The maximum length for the text field is reached",
         error: "The field is required",
       },
-      bottomText: "Are you missing a category? Let our moderator know at moderator@ndla.no",
+      bottomText: "Are you missing a category? Let our moderator know at ",
+      moderatorEmail: "moderator@ndla.no",
       notification: {
         title: "Notifications",
         showAll: "View all notifications",
@@ -1358,6 +1361,7 @@ const messages = {
   gloss: {
     examples: "Examples",
     wordClass: "Word class",
+    play: "Play gloss",
     transcriptions: {
       traditional: "Traditional spelling",
       pinyin: "Pinyin",

package/src/locale/messages-nb.ts

@@ -510,12 +510,14 @@ const messages = {
     socialMedia: "Sosiale medier",
     selectLanguage: "Velg språk (language): ",
     vision: "Sammen skaper vi framtidas læring",
-    linksHeader: "Andre NDLA-nettsteder",
-    info: "Nettstedet er utarbeidet av NDLA med åpen kildekode.",
+    linksHeader: "Kontakt",
+    info: "Nettstedet er utarbeidet som åpen kildekode.",
     editorInChief: "Ansvarlig redaktør:",
     availabilityLink: "Tilgjengelighetserklæring",
     privacyLink: "Personvernerklæring",
     cookiesLink: "Erklæring for informasjonskapsler",
+    aboutWebsite: "Om nettstedet",
+    followUs: "Følg oss",
     socialMediaLinks: {
       facebook: "NDLA på Facebook",
       facebookAria: "Besøk NDLA på Facebook",
@@ -1062,7 +1064,8 @@ const messages = {
         maxLength: "Maksimal lengde for tekstfeltet er nådd",
         error: "Feltet er påkrevd",
       },
-      bottomText: "Savner du en kategori? Gi vår moderator beskjed på moderator@ndla.no",
+      bottomText: "Savner du en kategori? Gi vår moderator beskjed på ",
+      moderatorEmail: "moderator@ndla.no",
       notification: {
         title: "Varslinger",
         showAll: "Se alle varslinger",
@@ -1357,6 +1360,7 @@ const messages = {
   gloss: {
     examples: "Eksempler",
     wordClass: "Ordklasse",
+    play: "Spill av glose",
     transcriptions: {
       traditional: "Tradisjonell skrivemåte",
       pinyin: "Pinyin",