Merge pull request #1909 from NDLANO/use-new-buttons

Use new Button component

src/components/CompetenceGoals.tsx

@@ -9,10 +9,10 @@
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
 import { breakpoints, mq } from "@ndla/core";
 import { FooterHeaderIcon } from "@ndla/icons/common";
 import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalTitle, ModalTrigger } from "@ndla/modal";
+import { Button } from "@ndla/primitives";
 import { Tabs } from "@ndla/tabs";
 import CompetenceGoalTab, { CompetenceGoalType, CoreElementType } from "./CompetenceGoalTab";
 import { GQLCompetenceGoal, GQLCompetenceGoalsQuery, GQLCoreElement } from "../graphqlTypes";
@@ -36,10 +36,6 @@ interface ElementType {
   groupedCoreElementItems?: CoreElementType[];
 }
 
-const CompetenceBadgeText = styled.span`
-  padding: 0 5px;
-`;
-
 const CompetenceGoalsWrapper = styled.div`
   height: 100%;
   max-width: 960px;
@@ -194,16 +190,9 @@ const CompetenceGoals = ({ codes, subjectId, supportedLanguages, isOembed }: Pro
     <>
       <Modal>
         <ModalTrigger>
-          <ButtonV2
-            aria-busy={competenceGoalsLoading}
-            size="xsmall"
-            colorTheme="light"
-            shape="pill"
-            disabled={competenceGoalsLoading}
-          >
-            <FooterHeaderIcon />
-            <CompetenceBadgeText>{t("competenceGoals.showCompetenceGoals")}</CompetenceBadgeText>
-          </ButtonV2>
+          <Button aria-busy={competenceGoalsLoading} disabled={competenceGoalsLoading} variant="secondary" size="small">
+            {t("competenceGoals.showCompetenceGoals")}
+          </Button>
         </ModalTrigger>
         <ModalContent size="full">
           <ModalHeader>

src/components/FeideLoginButton/FeideLoginButton.tsx

@@ -9,18 +9,14 @@
 import { ReactNode, useContext } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
 import { spacing } from "@ndla/core";
 import { Modal, ModalTrigger } from "@ndla/modal";
+import { Button } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
 import { routes } from "../../routeHelpers";
 import { AuthContext } from "../AuthenticationContext";
 import LoginModalContent from "../MyNdla/LoginModalContent";
 
-const LoginButton = styled(ButtonV2)`
-  white-space: nowrap;
-`;
-
 const StyledLink = styled(SafeLinkButton)`
   display: flex;
   gap: ${spacing.small};
@@ -57,15 +53,9 @@ const FeideLoginButton = ({ children }: Props) => {
   return (
     <Modal>
       <ModalTrigger>
-        <LoginButton
-          variant={"ghost"}
-          colorTheme={"lighter"}
-          shape={"pill"}
-          aria-label={t("user.buttonLogIn")}
-          title={t("user.buttonLogIn")}
-        >
+        <Button variant="tertiary" aria-label={t("user.buttonLogIn")} title={t("user.buttonLogIn")}>
           {children}
-        </LoginButton>
+        </Button>
       </ModalTrigger>
       <LoginModalContent masthead />
     </Modal>

src/components/Learningpath/LearningpathFooter.tsx

@@ -11,11 +11,11 @@ import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { gql } from "@apollo/client";
 import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
 import { animations, breakpoints, colors, mq, spacing, stackOrder } from "@ndla/core";
 import { Back, Forward } from "@ndla/icons/common";
 import { LearningPath } from "@ndla/icons/contentType";
 import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalTrigger } from "@ndla/modal";
+import { Button } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { Text } from "@ndla/typography";
 import { usePrevious } from "@ndla/util";
@@ -101,10 +101,6 @@ interface Props {
   currentStep: number;
 }
 
-const StyledModalButton = styled(ButtonV2)`
-  margin: ${spacing.small};
-`;
-
 const LearningpathFooter = ({
   mobileView,
   learningPathMenu,
@@ -130,10 +126,11 @@ const LearningpathFooter = ({
       {mobileView && (
         <Modal open={open} onOpenChange={setOpen}>
           <ModalTrigger>
-            <StyledModalButton size="small">
+            {/* TODO: Not sure if correct*/}
+            <Button variant="secondary" size="small">
               <LearningPath />
               {t("learningPath.openMenuTooltip")}
-            </StyledModalButton>
+            </Button>
           </ModalTrigger>
           <ModalContent size="full">
             <ModalHeader>

src/components/MarkdownEditor/FloatingLinkEditorPlugin.tsx

@@ -30,9 +30,9 @@ import styled from "@emotion/styled";
 import { $isLinkNode, $isAutoLinkNode, toggleLink, $createLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister, $findMatchingParent } from "@lexical/utils";
-import { ButtonV2 } from "@ndla/button";
 import { colors, misc, shadows, spacing, stackOrder } from "@ndla/core";
 import { FieldErrorMessage, FormControl, InputV3, Label } from "@ndla/forms";
+import { Button } from "@ndla/primitives";
 import { getSelectedNode } from "./EditorToolbar";
 
 const VERTICAL_GAP = 10;
@@ -436,12 +436,12 @@ const FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElement, editorIs
         </FormControl>
       </InputWrapper>
       <ButtonWrapper>
-        <ButtonV2 onClick={handleLinkDeletion} disabled={!editedLinkElement}>
+        <Button variant="secondary" onClick={handleLinkDeletion} disabled={!editedLinkElement}>
           {t("myNdla.resource.remove")}
-        </ButtonV2>
-        <ButtonV2 onClick={handleLinkSubmission} disabled={!isDirty || !!urlError}>
+        </Button>
+        <Button variant="primary" onClick={handleLinkSubmission} disabled={!isDirty || !!urlError}>
           {t("save")}
-        </ButtonV2>
+        </Button>
       </ButtonWrapper>
     </FloatingContainer>
   ) : null;

src/components/MyNdla/AddResourceToFolder.tsx

@@ -13,9 +13,10 @@ import uniq from "lodash/uniq";
 import { useEffect, useState, useContext } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { ButtonV2 as Button, LoadingButton } from "@ndla/button";
+import { LoadingButton } from "@ndla/button";
 import { colors, spacing } from "@ndla/core";
 import { InformationOutline } from "@ndla/icons/common";
+import { Button } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { MessageBox, TagSelector, useSnack } from "@ndla/ui";
 import FolderSelect from "./FolderSelect";
@@ -231,7 +232,7 @@ const AddResourceToFolder = ({ onClose, resource, defaultOpenFolder }: Props) =>
       )}
       <ButtonRow>
         <Button
-          variant="outline"
+          variant="secondary"
           onClick={onClose}
           onMouseDown={(e) => {
             e.preventDefault();

src/components/MyNdla/CopyFolder.tsx

@@ -8,9 +8,10 @@
 
 import { useContext, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ButtonV2 as Button, LoadingButton } from "@ndla/button";
+import { LoadingButton } from "@ndla/button";
 import { InformationOutline, WarningOutline } from "@ndla/icons/common";
 import { ModalContent, ModalHeader, ModalTitle, ModalCloseButton, ModalBody } from "@ndla/modal";
+import { Button } from "@ndla/primitives";
 import { MessageBox, useSnack } from "@ndla/ui";
 import { AddResourceContainer, ButtonRow } from "./AddResourceToFolder";
 import { Folder } from "./Folder";
@@ -86,7 +87,7 @@ const CopyFolder = ({ folder, onClose }: Props) => {
           )}
           <ButtonRow>
             <Button
-              variant="outline"
+              variant="secondary"
               onClick={onClose}
               onMouseDown={(e) => {
                 e.preventDefault();

src/components/MyNdla/LoginComponent.tsx

@@ -11,9 +11,9 @@ import { ReactNode } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
 import { mq, breakpoints, spacing } from "@ndla/core";
 import { ModalCloseButton } from "@ndla/modal";
+import { Button } from "@ndla/primitives";
 import { SafeLink, SafeLinkButton } from "@ndla/safelink";
 import { Heading, Text } from "@ndla/typography";
 import { routes } from "../../routeHelpers";
@@ -84,7 +84,7 @@ const LoginComponent = ({ masthead, content }: Props) => {
       <BottomRow>
         <ButtonRow>
           <ModalCloseButton>
-            <ButtonV2 variant="outline">{t("cancel")}</ButtonV2>
+            <Button variant="secondary">{t("cancel")}</Button>
           </ModalCloseButton>
           <SafeLinkButton reloadDocument to={`/login?state=${masthead ? routes.myNdla.root : toHref(location)}`}>
             {t("user.buttonLogIn")}

src/components/TabFilter.tsx

@@ -54,6 +54,7 @@ const TabFilter = ({ value: selectedValue, onChange, options }: Props) => {
   const { t } = useTranslation();
   return (
     <ButtonContainer aria-label={t("subjectsPage.filterSubjects")}>
+      {/* TODO: Should probably not be buttons */}
       {options.map(({ value, label }) => (
         <StyledLi role="none" key={value}>
           <StyledButton

src/components/Topic/TopicArticle.tsx

@@ -8,29 +8,24 @@
 
 import { ReactNode, useId, useState } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
+import styledEmotion from "@emotion/styled";
 import { colors, spacing } from "@ndla/core";
 import { ChevronDown } from "@ndla/icons/common";
-
+import { Button } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 interface Props {
   children?: ReactNode;
 }
 
-const ToggleButton = styled(ButtonV2)`
-  margin-left: ${spacing.normal};
-  &:hover,
-  &:focus-within {
-    background-color: inherit;
-  }
-  &[aria-expanded="true"] {
-    svg {
-      transform: rotate(180deg);
-    }
-  }
-`;
+const ToggleButton = styled(Button, {
+  base: {
+    _expanded: {
+      "& svg": { transform: "rotate(180deg)" },
+    },
+  },
+});
 
-const ExpandContent = styled.div`
+const ExpandContent = styledEmotion.div`
   display: none;
   width: 100%;
   &[aria-hidden="false"] {
@@ -41,7 +36,7 @@ const ExpandContent = styled.div`
   }
 `;
 
-const TopicArticleWrapper = styled.div`
+const TopicArticleWrapper = styledEmotion.div`
   display: flex;
   flex-direction: column;
   gap: ${spacing.small};

src/components/Topic/TopicMetaImage.tsx

@@ -45,7 +45,7 @@ const TopicHeaderVisualElementWrapper = styled.div`
     max-height: 200px;
   }
 `;
-
+// TODO: Needs special handling
 const VisualElementButton = styled(ButtonV2)`
   color: ${colors.brand.secondary};
   overflow: hidden;

src/components/license/CopyTextButton.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Component, ReactNode } from "react";
-import { ButtonV2 } from "@ndla/button";
+import { Button } from "@ndla/primitives";
 import { copyTextToClipboard } from "@ndla/util";
 
 interface Props {
@@ -57,10 +57,10 @@ class CopyTextButton extends Component<Props, State> {
           this.buttonContainer = r;
         }}
       >
-        <ButtonV2 variant="outline" disabled={hasCopied} onClick={this.handleClick}>
+        <Button variant="secondary" size="small" disabled={hasCopied} onClick={this.handleClick}>
           {children}
           {hasCopied ? hasCopiedTitle : copyTitle}
-        </ButtonV2>
+        </Button>
       </span>
     );
   }

src/components/license/TextLicenseList.tsx

@@ -8,9 +8,9 @@
 
 import { useTranslation } from "react-i18next";
 import { gql } from "@apollo/client";
-import { ButtonV2 } from "@ndla/button";
 import { Copy } from "@ndla/icons/action";
 import { metaTypes, getGroupedContributorDescriptionList } from "@ndla/licenses";
+import { Button } from "@ndla/primitives";
 import { printPage } from "@ndla/util";
 import CopyTextButton from "./CopyTextButton";
 import { licenseListCopyrightFragment } from "./licenseFragments";
@@ -76,9 +76,9 @@ const TextLicenseInfo = ({ text, printUrl }: TextLicenseInfoProps) => {
       />
       <MediaListItemActions>
         {printUrl && (
-          <ButtonV2 variant="outline" onClick={() => printPage(printUrl)}>
+          <Button variant="secondary" size="small" onClick={() => printPage(printUrl)}>
             {t("article.printPage")}
-          </ButtonV2>
+          </Button>
         )}
       </MediaListItemActions>
       <MediaListItemBody license={text.copyright.license?.license} resourceType="text" locale={i18n.language}>

src/containers/FilmFrontpage/AboutNdlaFilm.tsx

@@ -9,9 +9,9 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { ButtonV2 as Button } from "@ndla/button";
 import { breakpoints, colors, mq, spacing } from "@ndla/core";
 import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalTrigger } from "@ndla/modal";
+import { Button } from "@ndla/primitives";
 import { Heading, Text } from "@ndla/typography";
 import { Image, OneColumn } from "@ndla/ui";
 import Article from "../../components/Article";

src/containers/MyNdla/Arena/ArenaPage.tsx

@@ -11,9 +11,9 @@ import { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Navigate } from "react-router-dom";
 import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
 import { spacing } from "@ndla/core";
 import { Spinner } from "@ndla/icons";
+import { Button } from "@ndla/primitives";
 import { SafeLink, SafeLinkButton } from "@ndla/safelink";
 import { HelmetWithTracker, useTracker } from "@ndla/tracker";
 import { Heading, Text } from "@ndla/typography";
@@ -78,9 +78,9 @@ const ArenaPage = () => {
         </Heading>
         {user?.isModerator && (
           <ModeratorButtonWrapper>
-            <ButtonV2 onClick={() => setIsEditing((prev) => !prev)}>
+            <Button size="small" onClick={() => setIsEditing((prev) => !prev)}>
               {isEditing ? t("myNdla.arena.admin.category.stopEditing") : t("myNdla.arena.admin.category.startEditing")}
-            </ButtonV2>
+            </Button>
             <SafeLinkButton to="category/new">{t("myNdla.arena.admin.category.form.newCategory")}</SafeLinkButton>
           </ModeratorButtonWrapper>
         )}

src/containers/MyNdla/Arena/PostsPage.tsx

@@ -10,9 +10,9 @@ import { useCallback, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Navigate, useNavigate, useParams } from "react-router-dom";
 import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
 import { spacing } from "@ndla/core";
 import { Spinner } from "@ndla/icons";
+import { Button } from "@ndla/primitives";
 import { HelmetWithTracker, useTracker } from "@ndla/tracker";
 import { useSnack } from "@ndla/ui";
 import { ArenaFormValues } from "./components/ArenaForm";
@@ -36,7 +36,7 @@ const BreadcrumbWrapper = styled.div`
   padding-bottom: ${spacing.large};
 `;
 
-const StyledReplyButton = styled(ButtonV2)`
+const StyledReplyButton = styled(Button)`
   float: right;
   &[hidden] {
     display: none;