Migrate BodyLarge component uses

sumup-oss · Oct 17, 2024 · ac39e6d · ac39e6d
1 parent c8c0121
commit ac39e6d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git a/.storybook/components/Intro.tsx b/.storybook/components/Intro.tsx
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BodyLarge } from '../../packages/circuit-ui/index.js';
+import { Body } from '../../packages/circuit-ui/index.js';
 
 import type { BodyLargeProps } from '../../packages/circuit-ui/index.js';
 
@@ -26,8 +26,15 @@ export function Intro({
   children: BodyLargeProps['children'];
 }) {
   return (
-    <BodyLarge as="div" variant="subtle" className={classes.base} {...props}>
+    <Body
+      as="div"
+      size="s"
+      weight="semibold"
+      color="subtle"
+      className={classes.base}
+      {...props}
+    >
       {children}
-    </BodyLarge>
+    </Body>
   );
 }
diff --git a/templates/astro/src/pages/index.astro b/templates/astro/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import { Display, BodyLarge } from '@sumup-oss/circuit-ui';
+import { Display, Body } from '@sumup-oss/circuit-ui';
 import Root from '../layouts/Root.astro';
 import DocCard from '../components/DocCard.astro';
 
@@ -11,9 +11,9 @@ const title = 'Welcome to Circuit UI + Astro';
     {title}
   </Display>
 
-  <BodyLarge className="intro">
+  <Body size="l" className="intro">
     Get started by editing <code>src/pages/index.astro</code>
-  </BodyLarge>
+  </Body>
 
   <div class="cards">
     <DocCard

diff --git a/templates/nextjs/template/app/page.tsx b/templates/nextjs/template/app/page.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { Display, BodyLarge } from '@sumup-oss/circuit-ui';
+import { Display, Body } from '@sumup-oss/circuit-ui';
 import { SumUpLogo } from '@sumup-oss/icons';
 
 import { DocCard } from '../components/DocCard';
@@ -18,9 +18,9 @@ export default function Page() {
           {metadata.title as string}
         </Display>
 
-        <BodyLarge className={styles.intro}>
+        <Body size="l" className={styles.intro}>
           Get started by editing <code>app/page.tsx</code>
-        </BodyLarge>
+        </Body>
 
         <div className={styles.cards}>
           <DocCard

diff --git a/templates/remix/app/routes/_index/route.tsx b/templates/remix/app/routes/_index/route.tsx
@@ -1,5 +1,5 @@
 import type { MetaFunction } from '@remix-run/node';
-import { Display, BodyLarge } from '@sumup-oss/circuit-ui';
+import { Display, Body } from '@sumup-oss/circuit-ui';
 
 import { DocCard } from '../../components/DocCard/index.js';
 
@@ -22,9 +22,9 @@ export default function Index() {
         {title}
       </Display>
 
-      <BodyLarge className={styles.intro}>
+      <Body size="l" className={styles.intro}>
         Get started by editing <code>app/routes/_index/route.tsx</code>
-      </BodyLarge>
+      </Body>
 
       <div className={styles.cards}>
         <DocCard