Merge pull request #1914 from NDLANO/new-iconbutton

Use new IconButton
NDLANO · Jul 12, 2024 · 30fe295 · 30fe295
2 parents 9c5630d + 1e1ef20
commit 30fe295
Show file tree

Hide file tree

Showing 18 changed files with 159 additions and 284 deletions.
diff --git a/src/components/MarkdownEditor/EditorToolbar.tsx b/src/components/MarkdownEditor/EditorToolbar.tsx
@@ -33,9 +33,9 @@ import {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $isAtNodeEnd } from "@lexical/selection";
 import { $findMatchingParent, mergeRegister, $getNearestNodeOfType } from "@lexical/utils";
-import { IconButtonV2 } from "@ndla/button";
 import { colors, misc, spacing } from "@ndla/core";
 import { Bold, Italic, Link, ListCircle, ListNumbered } from "@ndla/icons/editor";
+import { IconButton } from "@ndla/primitives";
 import { ADD_LINK_COMMAND } from "./FloatingLinkEditorPlugin";
 import { useUserAgent } from "../../UserAgentContext";
 
@@ -49,22 +49,6 @@ const ButtonRow = styled.div`
   padding: ${spacing.small};
 `;
 
-const StyledButton = styled(IconButtonV2)`
-  color: ${colors.text.primary};
-  border-radius: ${misc.borderRadius};
-  &[data-active="true"] {
-    background: ${colors.brand.neutral7};
-  }
-  &[disabled] {
-    background: ${colors.brand.greyLighter};
-  }
-  &:focus-visible {
-    outline-width: 2px;
-    outline-style: solid;
-    outline-color: ${colors.brand.primary};
-  }
-`;
-
 export const getSelectedNode = (selection: RangeSelection): TextNode | ElementNode => {
   const anchor = selection.anchor;
   const focus = selection.focus;
@@ -220,57 +204,51 @@ export const EditorToolbar = ({ editorIsFocused }: EditorToolbarProps) => {
 
   return (
     <ButtonRow>
-      <StyledButton
-        variant="ghost"
-        colorTheme="greyLighter"
+      <IconButton
+        // TODO: Fix handling of active according to design
+        variant={isBold ? "primary" : "tertiary"}
         aria-label={`${t(`markdownEditor.toolbar.bold.${isBold ? "active" : "inactive"}`)} ${osCtrl("b")}`}
         title={`${t(`markdownEditor.toolbar.bold.${isBold ? "active" : "inactive"}`)} ${osCtrl("b")}`}
-        data-active={isBold}
         onClick={() => activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")}
       >
         <Bold />
-      </StyledButton>
-
-      <StyledButton
-        variant="ghost"
-        colorTheme="greyLighter"
+      </IconButton>
+      <IconButton
+        // TODO: Fix handling of active according to design
+        variant={isItalic ? "primary" : "tertiary"}
         aria-label={`${t(`markdownEditor.toolbar.italic.${isItalic ? "active" : "inactive"}`)} ${osCtrl("i")}`}
         title={`${t(`markdownEditor.toolbar.italic.${isItalic ? "active" : "inactive"}`)} ${osCtrl("i")} `}
-        data-active={isItalic}
         onClick={() => activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")}
       >
         <Italic />
-      </StyledButton>
-      <StyledButton
-        variant="ghost"
-        colorTheme="greyLighter"
-        data-active={isUnorderedList}
+      </IconButton>
+      <IconButton
+        // TODO: Fix handling of active according to design
+        variant={isUnorderedList ? "primary" : "tertiary"}
         onClick={formatBulletList}
         aria-label={t(`markdownEditor.toolbar.unorderedList.${isUnorderedList ? "active" : "inactive"}`)}
         title={t(`markdownEditor.toolbar.unorderedList.${isUnorderedList ? "active" : "inactive"}`)}
       >
         <ListCircle />
-      </StyledButton>
-      <StyledButton
-        variant="ghost"
-        colorTheme="greyLighter"
-        data-active={isNumberedList}
+      </IconButton>
+      <IconButton
+        // TODO: Fix handling of active according to design
+        variant={isNumberedList ? "primary" : "tertiary"}
         onClick={formatNumberedList}
         aria-label={t(`markdownEditor.toolbar.orderedList.${isNumberedList ? "active" : "inactive"}`)}
         title={t(`markdownEditor.toolbar.orderedList.${isNumberedList ? "active" : "inactive"}`)}
       >
         <ListNumbered />
-      </StyledButton>
-      <StyledButton
-        variant="ghost"
-        colorTheme="greyLighter"
-        data-active={isLink}
+      </IconButton>
+      <IconButton
+        // TODO: Fix handling of active according to design
+        variant={isLink ? "primary" : "tertiary"}
         onClick={insertLink}
         aria-label={linkLabel}
         title={linkLabel}
       >
         <Link />
-      </StyledButton>
+      </IconButton>
     </ButtonRow>
   );
 };
diff --git a/src/components/MyNdla/FavoriteButton.tsx b/src/components/MyNdla/FavoriteButton.tsx
@@ -14,22 +14,19 @@ import { styled } from "@ndla/styled-system/jsx";
 
 const StyledFavoriteButton = styled(IconButton, { base: { borderRadius: "100%" } });
 
-export interface Props extends Omit<IconButtonProps, "aria-label"> {
+export interface Props extends Omit<IconButtonProps, "children"> {
   isFavorite?: boolean;
 }
 
-const FavoriteButton = forwardRef<HTMLButtonElement, Props>(({ isFavorite, onClick }, ref) => {
+const FavoriteButton = forwardRef<HTMLButtonElement, Props>(({ isFavorite, variant = "tertiary", ...props }, ref) => {
   const { t } = useTranslation();
   const labelModifier = isFavorite ? "added" : "add";
   const Icon = isFavorite ? Heart : HeartOutline;
+  const ariaLabel = props["aria-label"] || t(`myNdla.resource.${labelModifier}ToMyNdla`);
+  const title = props["title"] || t(`myNdla.resource.${labelModifier}ToMyNdla`);
+
   return (
-    <StyledFavoriteButton
-      variant="tertiary"
-      ref={ref}
-      onClick={onClick}
-      aria-label={t(`myNdla.resource.${labelModifier}ToMyNdla`)}
-      title={t(`myNdla.resource.${labelModifier}ToMyNdla`)}
-    >
+    <StyledFavoriteButton variant={variant} ref={ref} {...props} aria-label={ariaLabel} title={title}>
       <Icon />
     </StyledFavoriteButton>
   );

diff --git a/src/components/MyNdla/NewFolder.tsx b/src/components/MyNdla/NewFolder.tsx
@@ -10,12 +10,12 @@ import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useApolloClient } from "@apollo/client";
 import styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
 import { spacing } from "@ndla/core";
 import { FieldErrorMessage, FieldHelper, FormControl, InputContainer, InputV3, Label } from "@ndla/forms";
 import { Spinner } from "@ndla/icons";
 import { Cross } from "@ndla/icons/action";
 import { Done } from "@ndla/icons/editor";
+import { IconButton } from "@ndla/primitives";
 import { IFolder } from "@ndla/types-backend/myndla-api";
 import { getFolder, useAddFolderMutation, useFolders } from "../../containers/MyNdla/folderMutations";
 import { useUserAgent } from "../../UserAgentContext";
@@ -35,7 +35,6 @@ const StyledSpinner = styled(Spinner)`
 const Row = styled.div`
   display: flex;
   align-items: center;
-  gap: ${spacing.xxsmall};
   padding-right: ${spacing.xsmall};
 `;
 
@@ -132,21 +131,13 @@ const NewFolder = ({ parentId, onClose, initialValue = "", onCreate }: Props) =>
           {!loading ? (
             <>
               {!error && (
-                <IconButtonV2
-                  variant={"ghost"}
-                  colorTheme="light"
-                  tabIndex={0}
-                  aria-label={t("save")}
-                  title={t("save")}
-                  size="small"
-                  onClick={onSave}
-                >
+                <IconButton variant="tertiary" aria-label={t("save")} title={t("save")} onClick={onSave}>
                   <Done />
-                </IconButtonV2>
+                </IconButton>
               )}
-              <IconButtonV2 aria-label={t("close")} title={t("close")} size="small" variant="ghost" onClick={onClose}>
+              <IconButton variant="tertiary" aria-label={t("close")} title={t("close")} onClick={onClose}>
                 <Cross />
-              </IconButtonV2>
+              </IconButton>
             </>
           ) : (
             <FieldHelper>

diff --git a/src/components/MyNdla/resourceComponents.tsx b/src/components/MyNdla/resourceComponents.tsx
@@ -9,10 +9,10 @@
 import { HTMLAttributes, ReactNode, useMemo, CSSProperties } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
 import { colors, stackOrder, spacing, fonts } from "@ndla/core";
 import { DropdownTrigger, DropdownContent, DropdownItem, DropdownMenu } from "@ndla/dropdown-menu";
 import { HashTag } from "@ndla/icons/common";
+import { IconButton } from "@ndla/primitives";
 import { SafeLink, SafeLinkButton } from "@ndla/safelink";
 import { Text } from "@ndla/typography";
 import { resourceTypeColor } from "@ndla/ui";
@@ -42,10 +42,6 @@ export const ResourceTitleLink = styled(SafeLink)`
   }
 `;
 
-const StyledTrigger = styled(IconButtonV2)`
-  margin: 0px ${spacing.xsmall};
-`;
-
 export const ResourceHeading = styled(Text)`
   margin: 0;
   overflow: hidden;
@@ -191,14 +187,10 @@ export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProp
       {remainingTags.length > 0 && (
         <DropdownMenu>
           <DropdownTrigger>
-            <StyledTrigger
-              size="xsmall"
-              variant="ghost"
-              colorTheme="light"
-              aria-label={t("myNdla.moreTags", { count: remainingTags.length })}
-            >
+            {/* TODO: Not sure about how this should look */}
+            <IconButton variant="clear" aria-label={t("myNdla.moreTags", { count: remainingTags.length })}>
               {<TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>}
-            </StyledTrigger>
+            </IconButton>
           </DropdownTrigger>
           <DropdownContent showArrow>
             {remainingTags.map((tag, i) => (

diff --git a/src/containers/AllSubjectsPage/SubjectLink.tsx b/src/containers/AllSubjectsPage/SubjectLink.tsx
@@ -9,14 +9,13 @@
 import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
 import { colors, fonts, misc, spacing } from "@ndla/core";
-import { Heart, HeartOutline } from "@ndla/icons/action";
 import { Modal, ModalTrigger } from "@ndla/modal";
 import { SafeLink } from "@ndla/safelink";
 import { useSnack } from "@ndla/ui";
 import { Subject } from "./interfaces";
 import { AuthContext } from "../../components/AuthenticationContext";
+import FavoriteButton from "../../components/MyNdla/FavoriteButton";
 import LoginModalContent from "../../components/MyNdla/LoginModalContent";
 import { toSubject } from "../../routeHelpers";
 import DeleteModalContent from "../MyNdla/components/DeleteModalContent";
@@ -28,11 +27,6 @@ const SubjectLinkWrapper = styled.li`
   gap: ${spacing.xsmall};
 `;
 
-const StyledIconButton = styled(IconButtonV2)`
-  min-height: 40px;
-  min-width: 40px;
-`;
-
 const SubjectSafeLink = styled(SafeLink)`
   font-weight: ${fonts.weight.semibold};
   box-shadow: none;
@@ -95,28 +89,20 @@ const SubjectLink = ({ subject, favorites, className }: Props) => {
   return (
     <SubjectLinkWrapper className={className}>
       {authenticated && !isFavorite ? (
-        <StyledIconButton
+        <FavoriteButton
           onClick={setFavorite}
           aria-label={t("subjectsPage.addFavorite")}
           title={t("subjectsPage.addFavorite")}
-          variant="ghost"
-          size="xsmall"
-          colorTheme="lighter"
-        >
-          {isFavorite ? <Heart /> : <HeartOutline />}
-        </StyledIconButton>
+          isFavorite={false}
+        />
       ) : authenticated ? (
         <Modal open={showDeleteModal} onOpenChange={setShowDeleteModal}>
           <ModalTrigger>
-            <StyledIconButton
+            <FavoriteButton
               aria-label={t("subjectsPage.removeFavorite")}
               title={t("subjectsPage.removeFavorite")}
-              variant="ghost"
-              size="xsmall"
-              colorTheme="lighter"
-            >
-              <Heart />
-            </StyledIconButton>
+              isFavorite
+            />
           </ModalTrigger>
           <DeleteModalContent
             onDelete={removeFavorite}
@@ -130,15 +116,12 @@ const SubjectLink = ({ subject, favorites, className }: Props) => {
       ) : (
         <Modal>
           <ModalTrigger>
-            <StyledIconButton
+            <FavoriteButton
               aria-label={`${t("subjectsPage.addFavorite")}, ${subject.name}`}
               title={`${t("subjectsPage.addFavorite")}, ${subject.name}`}
-              variant="ghost"
-              size="xsmall"
-              colorTheme="lighter"
-            >
-              <HeartOutline />
-            </StyledIconButton>
+              variant="tertiary"
+              isFavorite={false}
+            />
           </ModalTrigger>
           <LoginModalContent
             title={t("subjectsPage.subjectFavoritePitch")}

diff --git a/src/containers/FilmFrontpage/FilmMovieList.tsx b/src/containers/FilmFrontpage/FilmMovieList.tsx
@@ -8,10 +8,10 @@
 
 import { gql } from "@apollo/client";
 import styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
 import { Carousel } from "@ndla/carousel";
 import { breakpoints, mq, spacing } from "@ndla/core";
 import { ChevronLeft, ChevronRight } from "@ndla/icons/common";
+import { IconButton } from "@ndla/primitives";
 import { Heading } from "@ndla/typography";
 import FilmContentCard from "./FilmContentCard";
 import { GQLFilmMovieList_MovieFragment } from "../../graphqlTypes";
@@ -49,14 +49,14 @@ const FilmMovieList = ({ name, movies = [], slideBackwardsLabel, slideForwardsLa
     )}
     <Carousel
       leftButton={
-        <IconButtonV2 aria-label={slideBackwardsLabel}>
+        <IconButton variant="secondary" aria-label={slideBackwardsLabel}>
           <ChevronLeft />
-        </IconButtonV2>
+        </IconButton>
       }
       rightButton={
-        <IconButtonV2 aria-label={slideForwardsLabel}>
+        <IconButton variant="secondary" aria-label={slideForwardsLabel}>
           <ChevronRight />
-        </IconButtonV2>
+        </IconButton>
       }
       items={movies.map((movie) => (
         <FilmContentCard key={movie.id} movie={movie} type="list" lazy />

diff --git a/src/containers/FilmFrontpage/FilmSlideshow.tsx b/src/containers/FilmFrontpage/FilmSlideshow.tsx
@@ -7,13 +7,13 @@
  */
 
 import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { gql } from "@apollo/client";
 import styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
 import { Carousel } from "@ndla/carousel";
 import { breakpoints, colors, misc, mq, spacing } from "@ndla/core";
 import { ChevronLeft, ChevronRight } from "@ndla/icons/common";
-import { Image } from "@ndla/primitives";
+import { IconButton, Image } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import FilmContentCard from "./FilmContentCard";
 import { GQLFilmSlideshow_MovieFragment } from "../../graphqlTypes";
@@ -80,8 +80,8 @@ const CarouselContainer = styled.div`
   }
 `;
 
-const SlideshowButton = styled(IconButtonV2)`
-  margin-top: ${spacing.normal};
+const SlideshowButton = styled(IconButton)`
+  margin-top: ${spacing.nsmall};
 `;
 
 const StyledFilmContentCard = styled(FilmContentCard)`
@@ -95,6 +95,7 @@ const StyledFilmContentCard = styled(FilmContentCard)`
 
 const FilmSlideshow = ({ slideshow }: Props) => {
   const [currentSlide, setCurrentSlide] = useState<GQLFilmSlideshow_MovieFragment>(slideshow[0]!);
+  const { t } = useTranslation();
 
   return (
     <section>
@@ -114,12 +115,12 @@ const FilmSlideshow = ({ slideshow }: Props) => {
       <CarouselContainer>
         <Carousel
           leftButton={
-            <SlideshowButton aria-label="">
+            <SlideshowButton variant="secondary" aria-label={t("ndlaFilm.slideBackwardsLabel")}>
               <ChevronLeft />
             </SlideshowButton>
           }
           rightButton={
-            <SlideshowButton aria-label="">
+            <SlideshowButton variant="secondary" aria-label={t("ndlaFilm.slideForwardsLabel")}>
               <ChevronRight />
             </SlideshowButton>
           }