@ndla/ui 33.4.0 → 33.4.2

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/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

@@ -259,6 +259,7 @@ const messages = {
     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?',
@@ -340,6 +341,7 @@ const messages = {
       },
     },
     menu: {
+      button: 'Menu',
       goToMainMenu: 'Go to main menu',
       close: 'Close',
       goTo: 'Go to',

package/src/locale/messages-nb.ts

@@ -258,6 +258,7 @@ const messages = {
     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?',
@@ -339,6 +340,7 @@ const messages = {
       },
     },
     menu: {
+      button: 'Meny',
       goToMainMenu: 'Gå til hovedmeny',
       close: 'Lukk',
       goTo: 'Gå til',

package/src/locale/messages-nn.ts

@@ -258,6 +258,7 @@ const messages = {
     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?',
@@ -339,6 +340,7 @@ const messages = {
       },
     },
     menu: {
+      button: 'Meny',
       goToMainMenu: 'Gå til hovedmeny',
       close: 'Lukk',
       goTo: 'Gå til',

package/src/locale/messages-se.ts

@@ -258,6 +258,7 @@ const messages = {
     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?',
@@ -340,6 +341,7 @@ const messages = {
       },
     },
     menu: {
+      menu: 'Meny',
       goToMainMenu: 'Gå til hovedmeny',
       close: 'Govčča',
       goTo: 'Mana deike',

package/src/locale/messages-sma.ts

@@ -258,6 +258,7 @@ const messages = {
     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?',
@@ -339,6 +340,7 @@ const messages = {
       },
     },
     menu: {
+      menu: 'Meny',
       goToMainMenu: 'Gå til hovedmeny',
       close: 'Lukk',
       goTo: 'Gå til',