From de819228a820a00891389b59465c3b9c9104750a Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 5 Nov 2024 13:47:16 +0100
Subject: [PATCH] chore(figma-plugin): use `data-size` (#2734)

We will make a separate PR where we can typecheck everything at once in
one workflow.
---
 .github/workflows/checks.yml                      | 1 +
 plugins/figma/src/ui/app.tsx                      | 2 +-
 plugins/figma/src/ui/components/Footer/Footer.tsx | 4 +---
 plugins/figma/src/ui/pages/Theme/Theme.tsx        | 6 ++----
 plugins/figma/src/ui/pages/Themes/Themes.tsx      | 2 +-
 5 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 29670a4943..b4c9f56879 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -5,6 +5,7 @@ on:
     paths:
       - 'packages/**'
       - 'apps/**'
+      - 'plugins/**'
       - 'biome.jsonc'
 jobs:
   checks:
diff --git a/plugins/figma/src/ui/app.tsx b/plugins/figma/src/ui/app.tsx
index e57326d985..676ca02464 100644
--- a/plugins/figma/src/ui/app.tsx
+++ b/plugins/figma/src/ui/app.tsx
@@ -15,7 +15,7 @@ function App() {
   const dsMode = useDsMode();
 
   return (
-    <div className='page' data-ds-color-mode={dsMode}>
+    <div className='page' data-ds-color-mode={dsMode} data-size='sm'>
       <div className='content'>
         <Routes>
           <Route path='/' element={<Navigate to='/themes' replace />} />
diff --git a/plugins/figma/src/ui/components/Footer/Footer.tsx b/plugins/figma/src/ui/components/Footer/Footer.tsx
index dac6861ccb..9c53a097a5 100644
--- a/plugins/figma/src/ui/components/Footer/Footer.tsx
+++ b/plugins/figma/src/ui/components/Footer/Footer.tsx
@@ -20,9 +20,7 @@ export const Footer = () => {
       </div> */}
       <div className={classes.bottom}>
         <div className={classes.bottomLeft}>
-          {loading && (
-            <Spinner title='fff' size='xs' className={classes.spinner} />
-          )}
+          {loading && <Spinner aria-label='Laster' data-size='xs' />}
         </div>
         <div className={classes.bottomRight}>
           <div className={classes.version}>V {packageJson.version}</div>
diff --git a/plugins/figma/src/ui/pages/Theme/Theme.tsx b/plugins/figma/src/ui/pages/Theme/Theme.tsx
index 61efa9ddcb..4c1355da45 100644
--- a/plugins/figma/src/ui/pages/Theme/Theme.tsx
+++ b/plugins/figma/src/ui/pages/Theme/Theme.tsx
@@ -97,7 +97,7 @@ function Theme() {
     <div className={classes.content}>
       <div className={classes.header}>
         <div className={classes.headerLeft}>
-          <Breadcrumbs size='sm' className={classes.breadcrumbs}>
+          <Breadcrumbs className={classes.breadcrumbs}>
             <Breadcrumbs.Link
               className={classes.breadcrumbs_link}
               aria-label='Tilbake til alle temaer'
@@ -109,7 +109,7 @@ function Theme() {
         </div>
       </div>
       <div className={classes.wrapper}>
-        <Paragraph variant='long' size='sm'>
+        <Paragraph variant='long'>
           Gå til{' '}
           <Link href='https://theme.designsystemet.no/' target='_blank'>
             Temabyggeren
@@ -120,7 +120,6 @@ function Theme() {
         </Paragraph>
         <Label htmlFor='my-textarea'>Kodesnutt fra temabyggeren</Label>
         <Textarea
-          size='sm'
           value={command}
           onChange={(e) => setCommand(e.target.value)}
           name=''
@@ -139,7 +138,6 @@ function Theme() {
         <div className={classes.btnContainer}>
           <Button
             className={classes.btn}
-            size='sm'
             onClick={() => handleClick()}
             loading={loading}
           >
diff --git a/plugins/figma/src/ui/pages/Themes/Themes.tsx b/plugins/figma/src/ui/pages/Themes/Themes.tsx
index 29dbeafa16..3d1b461e86 100644
--- a/plugins/figma/src/ui/pages/Themes/Themes.tsx
+++ b/plugins/figma/src/ui/pages/Themes/Themes.tsx
@@ -13,7 +13,7 @@ function Themes() {
 
   return (
     <div className={classes.content}>
-      <Heading size='2xs' className={classes.heading}>
+      <Heading data-size='2xs' className={classes.heading}>
         Mine temaer
       </Heading>
       {noThemeFound && (