@ndla/ui 33.3.3 → 33.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "33.3.3",
+  "version": "33.4.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,19 +32,19 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.14",
-    "@ndla/button": "^7.0.5",
+    "@ndla/button": "^8.0.0",
     "@ndla/carousel": "^2.1.1",
     "@ndla/core": "^3.0.3",
-    "@ndla/forms": "^4.1.9",
+    "@ndla/forms": "^4.1.10",
     "@ndla/hooks": "^1.2.0",
     "@ndla/icons": "^2.1.1",
-    "@ndla/licenses": "^6.1.5",
+    "@ndla/licenses": "^6.1.6",
     "@ndla/modal": "^2.2.2",
-    "@ndla/notion": "^4.1.11",
-    "@ndla/safelink": "^4.0.0",
+    "@ndla/notion": "^4.1.12",
+    "@ndla/safelink": "^4.0.1",
     "@ndla/switch": "^1.0.3",
     "@ndla/tabs": "^2.1.1",
-    "@ndla/tooltip": "^4.0.3",
+    "@ndla/tooltip": "^4.0.4",
     "@ndla/types-learningpath-api": "^0.0.17",
     "@ndla/util": "^3.1.9",
     "@reach/menu-button": "^0.16.2",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "312f7ebe89fd733409c3d62723cd7209bef67ad6"
+  "gitHead": "670051f760a2eee942642943fca7c4a494ba5b7b"
 }

package/src/Article/ArticleByline.tsx

@@ -9,7 +9,7 @@
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
-import Button, { CopyButton } from '@ndla/button';
+import { CopyButton, ButtonV2 } from '@ndla/button';
 import { colors, fonts, spacing } from '@ndla/core';
 import { copyTextToClipboard, printPage } from '@ndla/util';
 import { useTranslation } from 'react-i18next';
@@ -147,8 +147,8 @@ const ArticleByline = ({
         {copySourceReference && (
           <CopyButton
             size="small"
-            borderShape="rounded"
-            outline
+            variant="outline"
+            shape="pill"
             aria-live="assertive"
             copyNode={t('license.hasCopiedTitle')}
             data-copy-string={copySourceReference}
@@ -160,9 +160,9 @@ const ArticleByline = ({
           <Modal
             labelledBy={buttonId}
             activateButton={
-              <Button id={buttonId} size="small" borderShape="rounded" outline>
+              <ButtonV2 id={buttonId} size="small" shape="pill" variant="outline">
                 {t('article.useContent')}
-              </Button>
+              </ButtonV2>
             }
             backgroundColor="white"
             position="top"
@@ -181,8 +181,8 @@ const ArticleByline = ({
           <CopyButton
             onClick={copyLinkHandler}
             size="small"
-            borderShape="rounded"
-            outline
+            shape="pill"
+            variant="outline"
             aria-live="assertive"
             data-copy-string={copyPageUrlLink}
             copyNode={t('article.copyPageLinkCopied')}>
@@ -192,8 +192,8 @@ const ArticleByline = ({
         {copyEmbedLink && (
           <CopyButton
             size="small"
-            borderShape="rounded"
-            outline
+            shape="pill"
+            variant="outline"
             aria-live="assertive"
             copyNode={t('license.hasCopiedTitle')}
             data-copy-string={copyEmbedLink}
@@ -202,9 +202,9 @@ const ArticleByline = ({
           </CopyButton>
         )}
         {printUrl && (
-          <Button size="small" borderShape="rounded" outline onClick={() => printPage(printUrl)}>
+          <ButtonV2 size="small" shape="pill" variant="outline" onClick={() => printPage(printUrl)}>
             {t('article.printPage')}
-          </Button>
+          </ButtonV2>
         )}
       </ButtonWrapper>
     </Wrapper>

package/src/Article/ArticleSideBar.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEvent, ReactNode, RefObject, useEffect, useState } from 'react';
-import Button, { CopyButton } from '@ndla/button';
+import { CopyButton, ButtonV2 } from '@ndla/button';
 import styled from '@emotion/styled';
 import SafeLink from '@ndla/safelink';
 import { fonts } from '@ndla/core';
@@ -87,8 +87,7 @@ const ArticleSideBar = ({
           <CopyButton
             onClick={copyLinkHandler}
             size="small"
-            width="full"
-            outline
+            variant="outline"
             aria-live="assertive"
             copyNode={t('article.copyPageLinkCopied')}
             data-copy-string={copyPageUrlLink}>
@@ -99,9 +98,9 @@ const ArticleSideBar = ({
       {licenseBox && (
         <Modal
           activateButton={
-            <Button size="small" width="full" outline>
+            <ButtonV2 size="small" variant="outline">
               {t('article.useContent')}
-            </Button>
+            </ButtonV2>
           }
           size="medium">
           {(onClose: () => void) => (

package/src/Footer/Footer.tsx

@@ -30,7 +30,7 @@ type StyledFooterProps = {
   addMargin?: boolean;
 };
 
-const StyledFooter = styled.footer<StyledFooterProps>`
+const StyledDiv = styled.div<StyledFooterProps>`
   color: #fff;
   position: relative;
   background: ${colors.brand.dark};
@@ -159,11 +159,13 @@ const Footer = ({ children, links, languageSelector, auth, privacyLinks }: Props
   return (
     <>
       {languageSelector && <StyledLanguageWrapper>{languageSelector}</StyledLanguageWrapper>}
-      <StyledFooter addMargin={!languageSelector}>
-        <OneColumn cssModifier="large">{footerContent}</OneColumn>
-        <StyledBackground />
-      </StyledFooter>
-      {auth}
+      <footer>
+        <StyledDiv addMargin={!languageSelector}>
+          <OneColumn cssModifier="large">{footerContent}</OneColumn>
+          <StyledBackground />
+        </StyledDiv>
+        {auth}
+      </footer>
     </>
   );
 };

package/src/Footer/FooterLinks.tsx

@@ -8,17 +8,18 @@ import { useTranslation } from 'react-i18next';
 const StyledLinksWrapper = styled.div`
   display: flex;
   align-items: flex-start;
-  section:first-of-type {
+  gap: ${spacing.normal};
+  div:first-of-type {
     margin-right: ${spacing.large};
   }
   ${mq.range({ from: breakpoints.desktop })} {
-    section:first-of-type {
+    div:first-of-type {
       margin-right: ${spacingUnit * 4}px;
     }
   }
   ${mq.range({ until: breakpoints.tabletWide })} {
     flex-direction: column;
-    > section {
+    > div {
       margin-top: ${spacing.large};
     }
   }
@@ -86,7 +87,7 @@ const StyledSocialMediaLinkWrapper = styled.div`
   align-items: center;
 `;
 
-const StyledHeaderLinks = styled.h1`
+const StyledHeaderLinks = styled.h3`
   ${fonts.sizes(16, 1.5)};
   font-weight: ${fonts.weight.semibold};
   margin: ${spacing.xsmall} 0;
@@ -97,11 +98,11 @@ const FooterLinks = ({ links }: FooterLinksProps) => {
   return (
     <>
       <StyledLinksWrapper>
-        <section>
-          <StyledHeaderLinks>
+        <div>
+          <StyledHeaderLinks id="otherLinks">
             {t('footer.linksHeader')} <Launch />
           </StyledHeaderLinks>
-          <StyledNav>
+          <StyledNav aria-labelledby="otherLinks">
             {commonLinks.map((link) => (
               <div key={link.url}>
                 <StyledSafeLink
@@ -115,20 +116,18 @@ const FooterLinks = ({ links }: FooterLinksProps) => {
               </div>
             ))}
           </StyledNav>
-        </section>
-        <section>
-          <StyledNav>
-            {links.map((link) => (
-              <StyledSocialMediaLinkWrapper key={link.to}>
-                <StyledSocialMediaIcon>{link.icon}</StyledSocialMediaIcon>
-                <StyledSafeLink to={link.to}>
-                  {link.text}
-                  <Forward />
-                </StyledSafeLink>
-              </StyledSocialMediaLinkWrapper>
-            ))}
-          </StyledNav>
-        </section>
+        </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>
     </>
   );

package/src/LearningPaths/LearningPathMenuAside.tsx

@@ -76,21 +76,6 @@ const StyledAside = styled.aside<StyledAsideProps>`
   }
 `;
 
-type StyledSafeLinkButtonProps = {
-  invertedStyle?: boolean;
-};
-
-const StyledSafeLinkButton = styled(SafeLinkButton)<StyledSafeLinkButtonProps>`
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      ${mq.range({ from: breakpoints.tablet })} {
-        border-color: #fff;
-        color: #fff;
-      }
-    `}
-`;
-
 type Props = {
   isOpen: boolean;
   lastUpdated: string;
@@ -119,14 +104,14 @@ const LearningPathMenuAside = ({ lastUpdated, learningPathURL, copyright, isOpen
       </div>
       {copyright.contributors && <LearningPathMenuAsideCopyright copyright={copyright} />}
       <p css={infoTextCSS}>{t('learningPath.createLearningPathText')}</p>
-      <StyledSafeLinkButton
+      <SafeLinkButton
         to={learningPathURL}
         target="_blank"
         rel="noopener noreferrer"
         variant="outline"
         inverted={invertedStyle}>
         {t('learningPath.createLearningPathButtonText')}
-      </StyledSafeLinkButton>
+      </SafeLinkButton>
     </StyledAside>
   );
 };

package/src/locale/messages-en.ts

@@ -253,7 +253,13 @@ const messages = {
     archived: 'This is an expired and unmaintained subject.',
   },
   subjectsPage: {
+    filterSubjects: 'Filter subjects',
+    scrollToGroup: 'Scroll to group',
+    goToTop: 'Scroll to top',
+    alphabeticSort: 'Subjects grouped alphabetically',
+    subjectGroup: 'Group "{{ category }}"',
     allSubjects: 'All subjects',
+    myFavoriteSubjects: 'My favorite subjects',
     chooseSubject: 'Choose subject',
     errorDescription: 'Sorry, an error occurred while loading the subjects.',
     confirmRemove: 'Are you sure you want to remove {{subject}} from your favorite subjects?',
@@ -624,6 +630,7 @@ const messages = {
   },
   footer: {
     aboutNDLA: 'About NDLA',
+    socialMedia: 'Social media',
     selectLanguage: 'Choose language (språk): ',
     info: 'This webapplication is developed by NDLA as Open Source code.',
     editorInChief: 'Editor in chief: ',

package/src/locale/messages-nb.ts

@@ -252,7 +252,13 @@ const messages = {
     archived: 'Dette er et utgått fag som ikke vedlikeholdes.',
   },
   subjectsPage: {
+    filterSubjects: 'Filtrer fag',
+    scrollToGroup: 'Hopp til gruppe',
+    goToTop: 'Gå til toppen',
+    alphabeticSort: 'Fag gruppert alfabetisk',
+    subjectGroup: 'Gruppe "{{ category }}"',
     allSubjects: 'Alle fag',
+    myFavoriteSubjects: 'Mine favorittfag',
     errorDescription: 'Beklager, en feil oppstod under lasting av fagene.',
     chooseSubject: 'Velg fag',
     confirmRemove: 'Er du sikker på at du vil fjerne {{subject}} fra favorittfag?',
@@ -623,6 +629,7 @@ const messages = {
   },
   footer: {
     aboutNDLA: 'Om NDLA',
+    socialMedia: 'Sosiale medier',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
     linksHeader: 'Andre NDLA-nettsteder',

package/src/locale/messages-nn.ts

@@ -252,7 +252,13 @@ const messages = {
     archived: 'Dette er eit utgått fag som ikkje blir halde ved like.',
   },
   subjectsPage: {
+    filterSubjects: 'Filtrer fag',
+    scrollToGroup: 'Hopp til gruppe',
+    goToTop: 'Gå til toppen',
+    alphabeticSort: 'Fag gruppert alfabetisk',
+    subjectGroup: 'Gruppe "{{ category }}"',
     allSubjects: 'Alle fag',
+    myFavoriteSubjects: 'Favorittfaga mine',
     errorDescription: 'Orsak, ein feil oppstod under lasting av faga.',
     chooseSubject: 'Vel fag',
     confirmRemove: 'Er du sikker på at du vil fjerne {{subject}} fra favorittfag?',
@@ -624,6 +630,7 @@ const messages = {
   },
   footer: {
     aboutNDLA: 'Om NDLA',
+    socialMedia: 'Sosiale media',
     selectLanguage: 'Vel språk (language): ',
     vision: 'Saman skapar vi framtidas læring',
     linksHeader: 'Andre NDLA-nettstader',

package/src/locale/messages-se.ts

@@ -252,7 +252,13 @@ const messages = {
     archived: 'Dát leat heaittihuvvon fága mii ii ođasmahttojuvvo.',
   },
   subjectsPage: {
+    filterSubjects: 'Filtrer fag',
+    scrollToGroup: 'Hopp til gruppe',
+    goToTop: 'Gå til toppen',
+    alphabeticSort: 'Fag gruppert alfabetisk',
+    subjectGroup: 'Gruppe "{{ category }}"',
     allSubjects: 'Buot fágat',
+    myFavoriteSubjects: 'Mine favorittfag',
     errorDescription: 'Šállošat, boasttuvuohta čuožžilii fágaid viežžamis.',
     chooseSubject: 'Vállje fága',
     confirmRemove: 'Er du sikker på at du vil fjerne {{subject}} fra favorittfag?',
@@ -624,6 +630,7 @@ const messages = {
   },
   footer: {
     aboutNDLA: 'NDLA birra',
+    socialMedia: 'Sosiale medier',
     selectLanguage: 'Vállje giela (language): ',
     vision: 'Ovttas hábmet boahtteáiggi oahppama',
     linksHeader: 'Eará NDLA neahttabáikkit',

package/src/locale/messages-sma.ts

@@ -252,7 +252,13 @@ const messages = {
     archived: 'Dette er et utgått fag som ikke vedlikeholdes.',
   },
   subjectsPage: {
+    filterSubjects: 'Filtrer fag',
+    scrollToGroup: 'Hopp til gruppe',
+    goToTop: 'Gå til toppen',
+    alphabeticSort: 'Fag gruppert alfabetisk',
+    subjectGroup: 'Gruppe "{{ category }}"',
     allSubjects: 'Alle fag',
+    myFavoriteSubjects: 'Mine favorittfag',
     errorDescription: 'Beklager, en feil oppstod under lasting av fagene.',
     chooseSubject: 'Velg fag',
     confirmRemove: 'Er du sikker på at du vil fjerne {{subject}} fra favorittfag?',
@@ -624,6 +630,7 @@ const messages = {
   },
   footer: {
     aboutNDLA: 'Om NDLA',
+    socialMedia: 'Sosiale medier',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
     linksHeader: 'Andre NDLA-nettsteder',