@ndla/ui 50.9.3 → 50.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.9.3",
+  "version": "50.9.5",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.23",
-    "@ndla/button": "^12.0.28",
-    "@ndla/carousel": "^4.0.28",
-    "@ndla/core": "^4.3.6",
-    "@ndla/dropdown-menu": "^1.0.26",
-    "@ndla/forms": "^5.2.18",
+    "@ndla/accordion": "^3.0.24",
+    "@ndla/button": "^12.0.29",
+    "@ndla/carousel": "^4.0.29",
+    "@ndla/core": "^4.3.7",
+    "@ndla/dropdown-menu": "^1.0.27",
+    "@ndla/forms": "^5.2.20",
     "@ndla/hooks": "^2.1.5",
-    "@ndla/icons": "^5.0.7",
+    "@ndla/icons": "^5.0.8",
     "@ndla/licenses": "^7.2.5",
-    "@ndla/modal": "^5.0.27",
-    "@ndla/notion": "^6.0.28",
-    "@ndla/safelink": "^4.1.53",
-    "@ndla/select": "^3.3.2",
-    "@ndla/switch": "^1.1.32",
-    "@ndla/tabs": "^3.2.12",
-    "@ndla/tooltip": "^6.0.14",
-    "@ndla/typography": "^0.4.9",
+    "@ndla/modal": "^5.0.28",
+    "@ndla/notion": "^6.0.29",
+    "@ndla/safelink": "^4.1.54",
+    "@ndla/select": "^3.3.3",
+    "@ndla/switch": "^1.1.33",
+    "@ndla/tabs": "^3.2.13",
+    "@ndla/tooltip": "^6.0.15",
+    "@ndla/typography": "^0.4.10",
     "@ndla/util": "^4.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e5b1aee3ef691c324fb4c185b9be5353604a35a4"
+  "gitHead": "8662822e5a1f4521c58caad125c525f353d7ade9"
 }

package/src/Footer/Footer.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { colors, spacing, fonts, mq, breakpoints, spacingUnit } from "@ndla/core";
 import { FooterHeaderIcon } from "@ndla/icons/common";
+import { Text } from "@ndla/typography";
 import FooterLinks from "./FooterLinks";
 import FooterPrivacy from "./FooterPrivacy";
 import { OneColumn } from "../Layout";
@@ -42,7 +43,7 @@ const StyledOneColumn = styled(OneColumn)`
   position: relative;
 `;
 
-const StyledHeader = styled.h2`
+const StyledText = styled(Text)`
   ${fonts.sizes(20, 1.5)};
   margin: 0;
   font-weight: ${fonts.weight.semibold};
@@ -147,7 +148,9 @@ const Footer = ({ children, commonLinks, links, languageSelector, auth, privacyL
             <StyledFooterHeaderIcon />
           </div>
           <div>
-            <StyledHeader>{t("footer.vision")}</StyledHeader>
+            <StyledText element="div" textStyle="content-alt" margin="none">
+              {t("footer.vision")}
+            </StyledText>
             <FooterLinks commonLinks={commonLinks} links={links} />
           </div>
         </StyledColumns>

package/src/Footer/FooterLinks.tsx

@@ -9,9 +9,10 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { spacing, fonts, colors, mq, breakpoints, spacingUnit } from "@ndla/core";
+import { spacing, fonts, colors, mq, breakpoints } from "@ndla/core";
 import { Forward, Launch } from "@ndla/icons/common";
 import SafeLink from "@ndla/safelink";
+import { Text } from "@ndla/typography";
 
 const StyledLinksWrapper = styled.div`
   display: flex;
@@ -85,10 +86,9 @@ const StyledSocialMediaLinkWrapper = styled.div`
   align-items: center;
 `;
 
-const StyledHeaderLinks = styled.h3`
+const StyledTextLinks = styled(Text)`
   ${fonts.sizes(16, 1.5)};
   font-weight: ${fonts.weight.semibold};
-  margin: ${spacing.xsmall} 0;
 `;
 
 const FooterLinks = ({ links, commonLinks }: FooterLinksProps) => {
@@ -97,7 +97,9 @@ const FooterLinks = ({ links, commonLinks }: FooterLinksProps) => {
     <>
       <StyledLinksWrapper>
         <div>
-          <StyledHeaderLinks id="otherLinks">{t("footer.linksHeader")}</StyledHeaderLinks>
+          <StyledTextLinks id="otherLinks" element="span" textStyle="content-alt">
+            {t("footer.linksHeader")}
+          </StyledTextLinks>
           <StyledNav aria-labelledby="otherLinks">
             {commonLinks?.map((link) => (
               <div key={link.to}>

package/src/Navigation/NavigationBox.tsx

@@ -37,11 +37,11 @@ const StyledHeading = styled(Heading)`
 const StyledList = styled.ul`
   list-style: none;
   padding: 0;
-  display: flex;
-  flex-direction: column;
   gap: ${spacing.xxsmall};
 
   &[data-direction="horizontal"] {
+    display: flex;
+    flex-direction: column;
     ${mq.range({ from: breakpoints.tablet })} {
       column-count: 2;
       gap: 20px;