@ndla/ui 34.6.5 → 34.6.6

package/src/NoContentBox/NoContentBox.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 
 interface Props {
   onClick?: () => void;
@@ -21,9 +21,9 @@ export const NoContentBox = ({ buttonText, text, onClick }: Props) => (
       <div>
         <p>{text}</p>
         {onClick && (
-          <Button outline onClick={onClick}>
+          <ButtonV2 variant="outline" onClick={onClick}>
             {buttonText}
-          </Button>
+          </ButtonV2>
         )}
       </div>
     </span>

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -1,6 +1,6 @@
 import React, { Children, cloneElement, ReactElement } from 'react';
 import BEMHelper from 'react-bem-helper';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import SafeLink from '@ndla/safelink';
 import SectionHeading from '../SectionHeading';
 import { HeadingLevel } from '../types';
@@ -79,13 +79,13 @@ const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetIn
         {clonedChildren}
       </div>
       {childrenCount > 2 && (
-        <Button
+        <ButtonV2
           data-type="related-article-button"
           data-showmore={messages.showMore}
           data-showless={messages.showLess}
-          outline>
+          variant="outline">
           {messages.showMore}
-        </Button>
+        </ButtonV2>
       )}
     </section>
   );

package/src/Search/ContentTypeResult.tsx

@@ -1,4 +1,4 @@
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import { Additional, ChevronDown, ChevronUp } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import Tooltip from '@ndla/tooltip';
@@ -150,15 +150,16 @@ const ContentTypeResult = ({
           })}
           {displayShowAllButton && (
             <StyledListItem ref={showAllRef}>
-              <Button
-                ghostPill
+              <ButtonV2
+                variant="ghost"
+                shape="pill"
                 css={[showAllButtonStyle, shouldHighlightShowAllButton && noWidthhighlightStyle]}
                 data-highlighted={shouldHighlightShowAllButton}
                 onClick={() => toggleShowAll(!showAll)}
                 tabIndex={-1}>
                 {showAll ? messages.showLessResultLabel : messages.allResultLabel}
                 {showAll ? <ChevronUp /> : <ChevronDown />}
-              </Button>
+              </ButtonV2>
             </StyledListItem>
           )}
         </StyledList>

package/src/Search/ToggleSearchButton.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { spacing, spacingUnit, breakpoints, mq, misc, fonts, colors } from '@ndla/core';
 import { Search } from '@ndla/icons/common';
-import Button, { ButtonProps } from '@ndla/button';
+import { ButtonProps, ButtonV2 } from '@ndla/button';
 import styled from '@emotion/styled';
 
 interface Props extends ButtonProps {
@@ -24,7 +24,7 @@ interface StyledButtonProps {
   ndlaFilm?: boolean;
 }
 
-const StyledButton = styled(Button)<StyledButtonProps>`
+const StyledButton = styled(ButtonV2)<StyledButtonProps>`
   background: ${(p) => (p.ndlaFilm ? colors.ndlaFilm.filmColorBright : colors.brand.greyLighter)};
   border-radius: ${misc.borderRadius};
   border: 0;

package/src/SearchTypeResult/ActiveFilters.tsx

@@ -12,7 +12,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { spacing, mq, breakpoints } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import ActiveFilterContent, { FilterProps, StyledActiveFilterTitle } from './ActiveFilterContent';
 
 type StyledActiveFiltersProps = {
@@ -138,20 +138,19 @@ const ActiveFilters = ({
       {filterLength > showFilterCount && (
         <StyledActiveFilterWrapper>
           <Tooltip tooltip={t('searchPage.searchFilterMessages.noValuesButtonText')}>
-            <Button
+            <ButtonV2
               aria-label={t('searchPage.searchFilterMessages.additionalSubjectFilters', {
                 count: filterLength - showFilterCount + 1,
               })}
-              type="button"
               size="normal"
-              borderShape="rounded"
+              shape="pill"
               onClick={onClickShowHiddenSubjects}>
               <StyledActiveFilterTitle>
                 {t('searchPage.searchFilterMessages.additionalSubjectFilters', {
                   count: filterLength - showFilterCount + 1,
                 })}
               </StyledActiveFilterTitle>
-            </Button>
+            </ButtonV2>
           </Tooltip>
         </StyledActiveFilterWrapper>
       )}

package/src/SearchTypeResult/PopupFilter.tsx

@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import Modal, { ModalCloseButton, ModalBody } from '@ndla/modal';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import { useTranslation } from 'react-i18next';
 import { ToggleItem } from '../Filter';
 
@@ -113,23 +113,23 @@ const PopupFilter = ({
               </ModalHeaderWrapper>
               {subjectCategories && programmes && (
                 <MainFilterButtonWrapper>
-                  <Button
+                  <ButtonV2
                     onClick={() => setSelectedMenu(MENU_ALL_SUBJECTS)}
-                    lighter={selectedMenu !== MENU_ALL_SUBJECTS}
+                    colorTheme={selectedMenu !== MENU_ALL_SUBJECTS ? 'lighter' : undefined}
                     size="normal"
-                    borderShape="rounded">
+                    shape="pill">
                     {t('frontpageMenu.allsubjects')}
-                  </Button>
+                  </ButtonV2>
                 </MainFilterButtonWrapper>
               )}
               {programmes && (
-                <Button
+                <ButtonV2
                   onClick={() => setSelectedMenu(MENU_PROGRAMMES)}
-                  lighter={selectedMenu !== MENU_PROGRAMMES}
+                  colorTheme={selectedMenu !== MENU_PROGRAMMES ? 'lighter' : undefined}
                   size="normal"
-                  borderShape="rounded">
+                  shape="pill">
                   {t('frontpageMenu.program')}
-                </Button>
+                </ButtonV2>
               )}
               {selectedMenu === MENU_ALL_SUBJECTS && subjectCategories && (
                 <FrontpageAllSubjects

package/src/SearchTypeResult/ResultNavigation.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import { fonts, spacing, colors } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 
@@ -91,13 +91,13 @@ const ResultNavigation = ({ onShowMore, totalCount, toCount, contentType = '', t
         <Progress width={progress} />
       </ProgressBar>
       {isMore ? (
-        <Button className="nav" outline onClick={onShowMore} aria-describedby={`searchitem-header-${type}`}>
+        <ButtonV2 className="nav" variant="outline" onClick={onShowMore} aria-describedby={`searchitem-header-${type}`}>
           {t('searchPage.resultType.showMore')}
-        </Button>
+        </ButtonV2>
       ) : (
-        <Button className="nav" outline onClick={onToTopHandler}>
+        <ButtonV2 className="nav" variant="outline" onClick={onToTopHandler}>
           {t('searchPage.resultType.toTopOfPage')}
-        </Button>
+        </ButtonV2>
       )}
     </ResultNav>
   );

package/src/SearchTypeResult/SearchHeader.tsx

@@ -9,7 +9,7 @@ import React, { FormEvent, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 
 import SearchFieldHeader from './SearchFieldHeader';
 import { CompetenceGoalsItemType } from '../types';
@@ -131,9 +131,9 @@ const SearchHeader = ({
         {searchPhraseSuggestion && (
           <PhraseSuggestionText>
             {t('searchPage.resultType.searchPhraseSuggestion')}{' '}
-            <Button link onClick={searchPhraseSuggestionOnClick}>
+            <ButtonV2 variant="link" onClick={searchPhraseSuggestionOnClick}>
               [{searchPhraseSuggestion}]
-            </Button>
+            </ButtonV2>
           </PhraseSuggestionText>
         )}
         {!!competenceGoals?.length && (

package/src/SearchTypeResult/SearchNotionItem.tsx

@@ -12,7 +12,7 @@ import parse from 'html-react-parser';
 
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { getLicenseByAbbreviation } from '@ndla/licenses';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import { Play } from '@ndla/icons/common';
 import { ArrowExpand } from '@ndla/icons/editor';
 import Modal, { ModalCloseButton, ModalHeader, ModalBody } from '@ndla/modal';
@@ -147,13 +147,13 @@ const SearchNotionItem = ({
       <ShowMediaButtonWrapper>
         <Modal
           activateButton={
-            <Button lighter size="xsmall" borderShape="rounded">
+            <ButtonV2 colorTheme="lighter" size="xsmall" shape="pill">
               <>
                 {type === 'video' && <Play />}
                 {type === 'other' && <ArrowExpand />}
                 <ShowMediaButtonText>{t('searchPage.resultType.showVideo')}</ShowMediaButtonText>
               </>
-            </Button>
+            </ButtonV2>
           }
           animation="subtle"
           animationDuration={50}
@@ -193,9 +193,9 @@ const SearchNotionItem = ({
                 {authors.length > 0 && license && ' '}
                 {license && `(${getLicenseByAbbreviation(license, locale).abbreviation})`}
                 {onReferenceClick && (
-                  <Button link onClick={onReferenceClick}>
+                  <ButtonV2 variant="link" onClick={onReferenceClick}>
                     {t('article.cite')}
-                  </Button>
+                  </ButtonV2>
                 )}
               </p>
             }

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -8,7 +8,7 @@
 
 import React, { MouseEvent, memo } from 'react';
 import styled from '@emotion/styled';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { Cross } from '@ndla/icons/action';
@@ -111,11 +111,11 @@ const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type }: Pro
         <CategoryItems>
           {filters.map((option: FilterOptionsType) => (
             <CategoryTypeButtonWrapper key={option.id}>
-              <Button
+              <ButtonV2
                 aria-current={option.active}
                 size="xsmall"
-                borderShape="rounded"
-                greyLighter={!option.active}
+                shape="pill"
+                colorTheme={!option.active ? 'greyLighter' : undefined}
                 onClick={(e: MouseEvent<HTMLButtonElement>) => {
                   if (e.currentTarget && option.active) {
                     e.currentTarget.blur();
@@ -128,7 +128,7 @@ const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type }: Pro
                     <Cross />
                   </CategoryTypeCrossWrapper>
                 )}
-              </Button>
+              </ButtonV2>
             </CategoryTypeButtonWrapper>
           ))}
         </CategoryItems>

package/src/SearchTypeResult/SearchViewType.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import { Grid } from '@ndla/icons/common';
 import { ListCircle } from '@ndla/icons/editor';
 import { animations, breakpoints, colors, mq } from '@ndla/core';
@@ -32,7 +32,7 @@ const ButtonContainer = styled.div`
   width: 44px;
   height: 44px;
 `;
-const ButtonElement = styled(Button)`
+const ButtonElement = styled(ButtonV2)`
   border-radius: 50%;
   padding: 2px;
   width: 100%;
@@ -81,7 +81,8 @@ const SearchViewType = ({ viewType, onChangeViewType }: SearchViewTypeProps) =>
     <Wrapper>
       <ButtonContainer>
         <ButtonElement
-          stripped
+          variant="stripped"
+          colorTheme="greyLighter"
           type="button"
           size="normal"
           title={t('searchPage.resultType.gridView')}
@@ -93,7 +94,7 @@ const SearchViewType = ({ viewType, onChangeViewType }: SearchViewTypeProps) =>
       </ButtonContainer>
       <ButtonContainer>
         <ButtonElement
-          stripped
+          variant="stripped"
           size="normal"
           title={t('searchPage.resultType.listView')}
           onClick={() => onClickHandler('list')}>

package/src/SearchTypeResult/components/SubjectFilters.tsx

@@ -9,7 +9,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import { Plus as PlusIcon } from '@ndla/icons/action';
 
 import PopupFilter, { PopupFilterProps } from '../PopupFilter';
@@ -106,10 +106,10 @@ const SubjectFilters = ({ filters, activeFilters, isNarrowScreen }: SubjectFilte
   };
 
   const OpenModalButton = () => (
-    <Button type="button" size="normal" greyLighter borderShape="rounded" onClick={handlePopupOpen}>
+    <ButtonV2 type="button" size="normal" colorTheme="greyLighter" shape="pill" onClick={handlePopupOpen}>
       <FilterButtonText>{t('searchPage.searchFilterMessages.noValuesButtonText')}</FilterButtonText>
       <PlusIcon />
-    </Button>
+    </ButtonV2>
   );
 
   const ActiveFiltersElement = ({ showModalButton }: { showModalButton?: boolean }) => {

package/src/User/AuthModal.tsx

@@ -10,7 +10,7 @@ import React, { ReactElement, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import Modal, { ModalCloseButton } from '@ndla/modal';
-import Button from '@ndla/button';
+import { ButtonV2 } from '@ndla/button';
 import { FeideText, LogIn, LogOut, HumanMaleBoard } from '@ndla/icons/common';
 import { fonts, spacing } from '@ndla/core';
 import { UserInfo } from './UserInfo';
@@ -105,12 +105,12 @@ const AuthModal = ({
               </p>
             )}
             <StyledButtonWrapper>
-              <Button size="medium" onClick={onAuthenticateClick}>
+              <ButtonV2 size="medium" onClick={onAuthenticateClick}>
                 {isAuthenticated ? t('user.buttonLogOut') : t('user.buttonLogIn')}
                 <StyledLogInIconWrapper aria-hidden>
                   {isAuthenticated ? <LogOut className="c-icon--medium" /> : <LogIn className="c-icon--medium" />}
                 </StyledLogInIconWrapper>
-              </Button>
+              </ButtonV2>
             </StyledButtonWrapper>
           </StyledModalContent>
         </StyledModalBody>