REFACTOR: sync changes to button component

Co-authored-by: andregroseth <[email protected]> Co-authored-by: shayany <[email protected]>
navikt · Oct 13, 2023 · 87f6948 · 87f6948
1 parent c917344
commit 87f6948
Show file tree

Hide file tree

Showing 28 changed files with 66 additions and 94 deletions.
diff --git a/apps/frontend/src/components/Header.tsx b/apps/frontend/src/components/Header.tsx
@@ -30,6 +30,7 @@ import {getMeldingByType} from '../api/MeldingApi'
 import {Markdown} from './common/Markdown'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 import {ampli} from '../services/Amplitude'
+import { ChevronDownIcon, ChevronUpIcon } from '@navikt/aksel-icons'
 
 export const loginUrl = (location: Location, path?: string) => {
   const frontpage = window.location.href.substr(0, window.location.href.length - location.pathname.length)
@@ -42,7 +43,7 @@ export const LoginButton = () => {
   const location = useLocation()
   return (
     <StyledLink style={{ textDecoration: 'none' }} href={loginUrl(location, location.pathname)}>
-      <Button size={SIZE.compact} kind={KIND.secondary} $style={buttonBorderStyle}>
+      <Button kind={KIND.secondary} $style={buttonBorderStyle}>
         <strong>Logg inn</strong>
       </Button>
     </StyledLink>
@@ -54,7 +55,7 @@ const LoggedInHeader = () => {
 
   const roller = (
     <Block>
-      <Button size={'mini'} kind={'underline-hover'} onClick={() => setViewRoller(!viewRoller)} icon={viewRoller ? faChevronUp : faChevronDown}>
+      <Button size={'xsmall'} kind={'underline-hover'} onClick={() => setViewRoller(!viewRoller)} icon={viewRoller ? <ChevronUpIcon/> : <ChevronDownIcon/>}>
         Endre aktive roller
       </Button>
       <Block display={viewRoller ? 'block' : 'none'} marginTop={theme.sizing.scale200}>

diff --git a/apps/frontend/src/components/Navigation/Burger/index.tsx b/apps/frontend/src/components/Navigation/Burger/index.tsx
@@ -81,7 +81,7 @@ const BurgerMenu = () => {
   return (
     <React.Fragment>
       {!showMenu && (
-        <Button kind="secondary" size="small" onClick={() => setShowMenu(true)} icon={<MenuHamburgerIcon />}>
+        <Button kind="secondary"  onClick={() => setShowMenu(true)} icon={<MenuHamburgerIcon />}>
           Meny
         </Button>
       )}
@@ -110,7 +110,7 @@ const BurgerMenu = () => {
         >
           <Block display="flex" flexDirection="column" height="100%">
             <Block width="100%" display="flex" justifyContent="flex-end" marginBottom={theme.sizing.scale1600}>
-              <Button kind="secondary" size="small" onClick={() => setShowMenu(false)} icon={<XMarkIcon />}>
+              <Button kind="secondary"  onClick={() => setShowMenu(false)} icon={<XMarkIcon />}>
                 Meny
               </Button>
             </Block>

diff --git a/apps/frontend/src/components/admin/CodeList/CodeListStyledTable.tsx b/apps/frontend/src/components/admin/CodeList/CodeListStyledTable.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { Block } from 'baseui/block'
-import { KIND, SIZE as ButtonSize } from 'baseui/button'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faEdit, faGhost, faTrash } from '@fortawesome/free-solid-svg-icons'
 import UpdateCodeListModal from './ModalUpdateCodeList'
 import DeleteCodeListModal from './ModalDeleteCodeList'
 import { Usage } from './CodeListUsage'
@@ -13,6 +10,7 @@ import { deleteCodelist, getCodelistUsage, updateCodelist } from '../../../api/C
 import { Cell, Row, Table } from '../../common/Table'
 import Button from '../../common/Button'
 import { theme } from '../../../util'
+import { DocPencilIcon, GlassesIcon, TrashIcon } from '@navikt/aksel-icons'
 
 type TableCodelistProps = {
   tableData: Code[]
@@ -29,7 +27,7 @@ const CodeListTable = ({ tableData, refresh }: TableCodelistProps) => {
 
   useEffect(() => {
     if (showUsage && selectedCode) {
-      ;(async () => {
+      ; (async () => {
         setUsage(undefined)
         const usage = await getCodelistUsage(selectedCode.list, selectedCode.code)
         setUsage(usage)
@@ -93,42 +91,33 @@ const CodeListTable = ({ tableData, refresh }: TableCodelistProps) => {
               <Cell small>
                 <Block display="flex" justifyContent="flex-end" width="100%">
                   <Button
-                    tooltip={'Bruk'}
-                    size={ButtonSize.compact}
-                    kind={row === selectedCode && showUsage ? KIND.primary : KIND.tertiary}
+                    tooltip={'Vis bruk'}
+                    kind={row === selectedCode && showUsage ? 'primary' : 'tertiary'}
                     onClick={() => {
                       setSelectedCode(row)
                       setShowUsage(true)
                     }}
-                    label={'Vis bruk'}
-                  >
-                    <FontAwesomeIcon icon={faGhost} />
-                  </Button>
-                  <AuditButton id={`${row.list}-${row.code}`} kind={KIND.tertiary} />
+                    icon={< GlassesIcon title="Vis bruk" />}
+                  />
+                  <AuditButton id={`${row.list}-${row.code}`} kind={'tertiary'} />
                   <Button
                     tooltip={'Rediger'}
-                    size={ButtonSize.compact}
-                    kind={KIND.tertiary}
+                    kind={"tertiary"}
                     onClick={() => {
                       setSelectedCode(row)
                       setShowEditModal(true)
                     }}
-                    label={'Rediger'}
-                  >
-                    <FontAwesomeIcon icon={faEdit} />
-                  </Button>
+                    icon={<DocPencilIcon title="Rediger" />}
+                  />
                   <Button
                     tooltip={'Slett'}
-                    size={ButtonSize.compact}
-                    kind={KIND.tertiary}
+                    kind={"tertiary"}
                     onClick={() => {
                       setSelectedCode(row)
                       setShowDeleteModal(true)
                     }}
-                    label={'Slett'}
-                  >
-                    <FontAwesomeIcon icon={faTrash} />
-                  </Button>
+                    icon={<TrashIcon title="Slett" />}
+                  />
                 </Block>
               </Cell>
             </Row>

diff --git a/apps/frontend/src/components/admin/audit/AuditButton.tsx b/apps/frontend/src/components/admin/audit/AuditButton.tsx
@@ -28,7 +28,6 @@ export const AuditButton = (props: {
             tooltip={intl.version}
             marginLeft={props.marginLeft}
             marginRight={props.marginRight}
-            size={"small"}
             kind={props.kind || 'outline'}
             icon={<ClockDashedIcon title="Versjonering"/>}
           >

diff --git a/apps/frontend/src/components/admin/audit/AuditView.tsx b/apps/frontend/src/components/admin/audit/AuditView.tsx
@@ -18,6 +18,7 @@ import { AuditAction, AuditLog } from './AuditTypes'
 import { ObjectLink } from '../../common/RouteLink'
 import Button from '../../common/Button'
 import { ettlevColors } from '../../../util/theme'
+import { ArrowRightLeftIcon, GlassesIcon, XMarkIcon } from '@navikt/aksel-icons'
 
 type AuditViewProps = {
   auditLog?: AuditLog
@@ -54,25 +55,21 @@ export const AuditView = (props: AuditViewProps) => {
               <Label label={intl.audits}>{auditLog?.audits.length}</Label>
             </Block>
             <Block display="flex">
-              <Button size="small" kind="tertiary" marginRight onClick={() => setOpenAll(!openAll)}>
+              <Button kind="tertiary" marginRight onClick={() => setOpenAll(!openAll)}>
                 {openAll ? 'Lukke' : 'Åpne'} alle
               </Button>
               {newestAudit?.action !== AuditAction.DELETE && (
                 <StatefulTooltip content={() => intl.view} placement={PLACEMENT.top}>
                   <Block>
                     <ObjectLink id={newestAudit!.tableId} type={newestAudit!.table} audit={newestAudit}>
-                      <Button size="small" kind="tertiary">
-                        <FontAwesomeIcon icon={faBinoculars} />
-                      </Button>
+                      <Button kind="tertiary" icon={<GlassesIcon title="Se forskjell"/>} />
                     </ObjectLink>
                   </Block>
                 </StatefulTooltip>
               )}
               <StatefulTooltip content={() => intl.close} placement={PLACEMENT.top}>
                 <Block>
-                  <Button size="small" kind="tertiary" onClick={() => viewId('')}>
-                    <FontAwesomeIcon icon={faTimes} />
-                  </Button>
+                  <Button kind="tertiary" onClick={() => viewId('')} icon={<XMarkIcon title="Lukk"/>} />
                 </Block>
               </StatefulTooltip>
             </Block>
@@ -118,9 +115,7 @@ export const AuditView = (props: AuditViewProps) => {
                         }}
                       >
                         <div>
-                          <Button size="small" kind="tertiary">
-                            <FontAwesomeIcon icon={faExchangeAlt} />
-                          </Button>
+                          <Button  kind="tertiary" icon={<ArrowRightLeftIcon title="Sammenling"/>} />
                         </div>
                       </StatefulPopover>
                     </Block>

diff --git a/apps/frontend/src/components/common/Inputs.tsx b/apps/frontend/src/components/common/Inputs.tsx
@@ -343,7 +343,7 @@ export const MultiInputField = (props: {
                   </Block>
 
                   <Block minWidth="107px">
-                    <Button type="button" onClick={add} marginLeft label={'Legg til'} kind="secondary" size="compact">
+                    <Button type="button" onClick={add} marginLeft kind="secondary">
                       Legg til
                     </Button>
                   </Block>

diff --git a/apps/frontend/src/components/common/Table.tsx b/apps/frontend/src/components/common/Table.tsx
@@ -20,6 +20,7 @@ import { KIND } from 'baseui/button'
 import { Pagination } from 'baseui/pagination'
 import CustomizedInput from '../common/CustomizedInput'
 import { CustomizedStatefulSelect } from './CustomizedSelect'
+import { ChevronDownIcon } from '@navikt/aksel-icons'
 
 // Use this for entire app, or recreate maybe, added here as I needed it for audit
 
@@ -148,7 +149,7 @@ export const Table = <T, K extends keyof T>(props: TableProps<T, K>) => {
             placement={PLACEMENT.bottom}
           >
             <Block>
-              <Button kind={KIND.tertiary} iconEnd={faChevronDown}>{`${table.limit} ${intl.rows}`}</Button>
+              <Button kind={'tertiary'} iconPosition='right' icon={<ChevronDownIcon />}>{`${table.limit} ${intl.rows}`}</Button>
             </Block>
           </StatefulPopover>
           <Block>

diff --git a/apps/frontend/src/components/etterlevelse/EtterlevelseSecondaryHeader.tsx b/apps/frontend/src/components/etterlevelse/EtterlevelseSecondaryHeader.tsx
@@ -112,8 +112,6 @@ export const EtterlevelseSecondaryHeader = ({ tab, setTab, setNavigatePath, ette
 
         <Block display="flex" justifyContent="flex-end" width="100%">
           <Button
-            startEnhancer={<img src={page2Icon} alt="Om personvern og ansvarlig for tema" />}
-            size="compact"
             $style={{
               fontSize: '18px',
               fontWeight: 600,

diff --git a/apps/frontend/src/components/etterlevelseDokumentasjon/ArkiveringModal.tsx b/apps/frontend/src/components/etterlevelseDokumentasjon/ArkiveringModal.tsx
@@ -112,7 +112,6 @@ export const ArkiveringModal = ({ arkivModal, setArkivModal, etterlevelseDokumen
                   setIsArchivingCancelled(false)
                 }
               }}
-              size={'compact'}
               kind={etterlevelseArkiv.status !== EtterlevelseArkivStatus.TIL_ARKIVERING ? 'primary' : 'secondary'}
               $style={{
                 borderWidth: '2px',
@@ -130,7 +129,6 @@ export const ArkiveringModal = ({ arkivModal, setArkivModal, etterlevelseDokumen
                 setArkivModal(false)
               }}
               kind="primary"
-              size="compact"
               $style={{
                 padding: '14px 16px',
               }}

diff --git a/...tend/src/components/etterlevelseDokumentasjon/edit/EditEtterlevelseDokumentasjonModal.tsx b/...tend/src/components/etterlevelseDokumentasjon/edit/EditEtterlevelseDokumentasjonModal.tsx
@@ -33,6 +33,7 @@ import { useSearchTeam } from '../../../api/TeamApi'
 import { RenderTagList } from '../../common/TagList'
 import { useNavigate } from 'react-router-dom'
 import { updateBehandlingNameWithNumber } from '../common/utils'
+import { DocPencilIcon, PlusIcon } from '@navikt/aksel-icons'
 
 type EditEtterlevelseDokumentasjonModalProps = {
   etterlevelseDokumentasjon?: EtterlevelseDokumentasjonQL
@@ -133,8 +134,7 @@ export const EditEtterlevelseDokumentasjonModal = (props: EditEtterlevelseDokume
     <Block>
       <Button
         onClick={() => setIsEtterlevelseDokumntasjonerModalOpen(true)}
-        startEnhancer={props.isEditButton ? <img src={editIcon} alt="edit icon" /> : <img src={plusIcon} alt="plus icon" />}
-        size="compact"
+        icon={props.isEditButton ? <DocPencilIcon /> : <PlusIcon />}
       >
         {props.isEditButton ? 'Rediger etterlevelsesdokumentet' : 'Nytt etterlevelsesdokument'}
       </Button>

diff --git a/apps/frontend/src/components/etterlevelseDokumentasjon/tabs/BehandlingSok.tsx b/apps/frontend/src/components/etterlevelseDokumentasjon/tabs/BehandlingSok.tsx
@@ -14,6 +14,7 @@ import CustomizedSelect from '../../common/CustomizedSelect'
 import { intl } from '../../../util/intl/intl'
 import { TYPE } from 'baseui/select'
 import { updateBehandlingNameWithNumber } from '../common/utils'
+import { PlusIcon } from '@navikt/aksel-icons'
 
 export const BehandlingSok = () => {
   const pageSize = 20
@@ -115,9 +116,8 @@ export const BehandlingSok = () => {
           <Block display="flex" alignItems="center">
             <Button
               onClick={lastMer}
-              icon={faPlus}
+              icon={<PlusIcon/>}
               kind={'secondary'}
-              size="compact"
               disabled={gqlLoading || etterlevelseDokumentasjoner.numberOfElements >= etterlevelseDokumentasjoner.totalElements}
             >
               Vis mer

diff --git a/apps/frontend/src/components/etterlevelseDokumentasjonTema/SecondaryHeader.tsx b/apps/frontend/src/components/etterlevelseDokumentasjonTema/SecondaryHeader.tsx
@@ -22,7 +22,6 @@ export const SecondaryHeader = ({ etterlevelseDokumentasjon, temaData, lovListe
       <div className="pt-4 pb-10">
         <Block display="flex" justifyContent="flex-end" width="100%">
           <Button
-            size="compact"
             $style={{
               fontSize: '18px',
               fontWeight: 600,

diff --git a/apps/frontend/src/components/krav/Edit/KravSuksesskriterieEdit.tsx b/apps/frontend/src/components/krav/Edit/KravSuksesskriterieEdit.tsx
@@ -21,6 +21,7 @@ import { Error } from '../../common/ModalSchema'
 import { borderColor } from '../../common/Style'
 import { ALIGN, Radio, RadioGroup } from 'baseui/radio'
 import { LabelSmall } from 'baseui/typography'
+import { PlusIcon, TrashIcon } from '@navikt/aksel-icons'
 
 type KravSuksesskriterieEditProps = {
   setIsFormDirty?: (v: boolean) => void
@@ -110,12 +111,10 @@ const KriterieList = ({ p, setIsFormDirty, newVersion }: { p: FieldArrayRenderPr
         <Block alignSelf={'flex-end'} marginTop={theme.sizing.scale600} marginBottom={theme.sizing.scale600}>
           <Button
             type="button"
-            icon={faPlus}
+            icon={<PlusIcon/>}
             marginLeft
-            label={'Suksesskriterie'}
             $style={buttonBorderStyle}
             kind="secondary"
-            size="compact"
             disabled={suksesskriterier.length >= 15}
             onClick={() => p.push({ id: nextId(suksesskriterier), navn: '', beskrivelse: '', behovForBegrunnelse: 'true' })}
           >
@@ -171,7 +170,7 @@ const Kriterie = ({
       <Block position={'relative'} paddingTop={theme.sizing.scale100}>
         <Block display={'flex'} alignItems={'flex-start'} position={'absolute'} right={0} top={0}>
           {(p.form.values.status !== KravStatus.AKTIV || newVersion) && (
-            <Button type={'button'} size={'compact'} kind={'tertiary'} $style={buttonBorderStyle} icon={faTrash} onClick={remove} tooltip={'Fjern suksesskriterie'} />
+            <Button type={'button'} kind={'tertiary'} $style={buttonBorderStyle} icon={<TrashIcon/>} onClick={remove} tooltip={'Fjern suksesskriterie'} />
           )}
           <Block width={theme.sizing.scale1000} />
           <Block {...dragHandleProps}>

diff --git a/apps/frontend/src/components/krav/Edit/KravVarslingsadresserEdit.tsx b/apps/frontend/src/components/krav/Edit/KravVarslingsadresserEdit.tsx
@@ -44,7 +44,7 @@ export const KravVarslingsadresserEdit = () => {
                   <Block marginBottom={theme.sizing.scale400}>
                     <Button
                       kind="secondary"
-                      size="compact"
+
                       type="button"
                       onClick={() => setAddSlackChannel(true)}
                       $style={{
@@ -60,7 +60,7 @@ export const KravVarslingsadresserEdit = () => {
                     </Button>
                     <Button
                       kind="secondary"
-                      size="compact"
+
                       marginLeft
                       type="button"
                       onClick={() => setAddSlackUser(true)}
@@ -77,7 +77,7 @@ export const KravVarslingsadresserEdit = () => {
                     </Button>
                     <Button
                       kind="secondary"
-                      size="compact"
+
                       marginLeft
                       type="button"
                       onClick={() => setAddEmail(true)}
@@ -121,7 +121,7 @@ const AddModal = ({ isOpen, close, title, children }: { isOpen: boolean; close:
     <ModalHeader>{title}</ModalHeader>
     <ModalBody>{children}</ModalBody>
     <ModalFooter>
-      <Button kind="secondary" size="compact" type="button" onClick={close}>
+      <Button kind="secondary"  type="button" onClick={close}>
         Avbryt
       </Button>
     </ModalFooter>

diff --git a/apps/frontend/src/components/krav/Edit/RegelverkEdit.tsx b/apps/frontend/src/components/krav/Edit/RegelverkEdit.tsx
@@ -124,7 +124,7 @@ export const RegelverkEdit = ({ forVirkemiddel }: RegelverkEditProps) => {
                     </Block>
 
                     <Block minWidth="107px">
-                      <Button type="button" size="compact" onClick={add} marginLeft kind="secondary">
+                      <Button type="button"  onClick={add} marginLeft kind="secondary">
                         Legg til
                       </Button>
                     </Block>