feat(demo): Add Heading to example emails

rfoel · Jan 28, 2023 · cfa5149 · cfa5149
1 parent fd98c73
commit cfa5149
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 31 deletions.
diff --git a/apps/demo/emails/airbnb-review.tsx b/apps/demo/emails/airbnb-review.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@react-email/button';
 import { Container } from '@react-email/container';
 import { Head } from '@react-email/head';
+import { Heading } from '@react-email/heading';
 import { Hr } from '@react-email/hr';
 import { Html } from '@react-email/html';
 import { Img } from '@react-email/img';
@@ -51,7 +52,7 @@ export default function Email({
               style={userImage}
             />
           </Section>
-          <Text style={heading}>Here's what {authorName} wrote</Text>
+          <Heading style={heading}>Here's what {authorName} wrote</Heading>
           <Text style={review}>{reviewText}</Text>
           <Text style={paragraph}>
             Now that the review period is over, we’ve posted {authorName}’s

diff --git a/apps/demo/emails/linear-login-code.tsx b/apps/demo/emails/linear-login-code.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@react-email/button';
 import { Container } from '@react-email/container';
 import { Head } from '@react-email/head';
+import { Heading } from '@react-email/heading';
 import { Hr } from '@react-email/hr';
 import { Html } from '@react-email/html';
 import { Img } from '@react-email/img';
@@ -32,7 +33,7 @@ export default function Email({ validationCode = 'tt226-5398x' }: EmailProps) {
             alt="Linear"
             style={logo}
           />
-          <Text style={heading}>Your login code for Linear</Text>
+          <Heading style={heading}>Your login code for Linear</Heading>
           <Section style={buttonContainer}>
             <Button pY={11} pX={23} style={button} href="https://linear.app">
               Login to Linear

diff --git a/apps/demo/emails/nike-order.tsx b/apps/demo/emails/nike-order.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@react-email/container';
 import { Head } from '@react-email/head';
+import { Heading } from '@react-email/heading';
 import { Hr } from '@react-email/hr';
 import { Html } from '@react-email/html';
 import { Img } from '@react-email/img';
@@ -39,7 +40,7 @@ export default function Email() {
               alt="Nike"
               style={{ margin: 'auto' }}
             />
-            <Text style={global.heading}>It's On Its Way.</Text>
+            <Heading style={global.heading}>It's On Its Way.</Heading>
             <Text style={global.text}>
               You order's is on its way. Use the link above to track its
               progress.

diff --git a/apps/demo/emails/notion-magic-link.tsx b/apps/demo/emails/notion-magic-link.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@react-email/container';
 import { Head } from '@react-email/head';
+import { Heading } from '@react-email/heading';
 import { Html } from '@react-email/html';
 import { Img } from '@react-email/img';
 import { Link } from '@react-email/link';
@@ -25,7 +26,7 @@ export default function Email({
       <Preview>Log in with this magic link</Preview>
       <Section style={main}>
         <Container style={container}>
-          <Text style={h1}>Login</Text>
+          <Heading style={h1}>Login</Heading>
           <Link
             href="https://notion.so"
             target="_blank"

diff --git a/apps/demo/emails/plaid-verify-identity.tsx b/apps/demo/emails/plaid-verify-identity.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@react-email/container';
 import { Head } from '@react-email/head';
+import { Heading } from '@react-email/heading';
 import { Section } from '@react-email/section';
 import { Html } from '@react-email/html';
 import { Img } from '@react-email/img';
@@ -28,9 +29,9 @@ export default function Email({ validationCode = '144833' }: EmailProps) {
           style={logo}
         />
         <Text style={tertiary}>Verify Your Identity</Text>
-        <Text style={secondary}>
+        <Heading style={secondary}>
           Enter the following code to finish linking Venmo.
-        </Text>
+        </Heading>
         <Section style={codeContainer}>
           <Text style={code}>{validationCode}</Text>
         </Section>

diff --git a/apps/demo/emails/raycast-magic-link.tsx b/apps/demo/emails/raycast-magic-link.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@react-email/container';
 import { Head } from '@react-email/head';
+import { Heading } from '@react-email/heading';
 import { Hr } from '@react-email/hr';
 import { Html } from '@react-email/html';
 import { Img } from '@react-email/img';
@@ -32,7 +33,7 @@ export default function Email({
             height={48}
             alt="Raycast"
           />
-          <Text style={heading}>🪄 Your magic link</Text>
+          <Heading style={heading}>🪄 Your magic link</Heading>
           <Section style={body}>
             <Text style={paragraph}>
               <Link style={link} href={magicLink}>

diff --git a/apps/demo/emails/slack-confirm.tsx b/apps/demo/emails/slack-confirm.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@react-email/container';
 import { Head } from '@react-email/head';
+import { Heading } from '@react-email/heading';
 import { Html } from '@react-email/html';
 import { Img } from '@react-email/img';
 import { Preview } from '@react-email/preview';
@@ -31,7 +32,7 @@ export default function Email({ validationCode = 'DJZ-TLX' }: EmailProps) {
               alt="Slack"
             />
           </Section>
-          <Text style={h1}>Confirm your email address</Text>
+          <Heading style={h1}>Confirm your email address</Heading>
           <Text style={heroText}>
             Your confirmation code is below - enter it in your open browser
             window and we'll help you get signed in.

diff --git a/apps/demo/emails/stack-overflow-tips.tsx b/apps/demo/emails/stack-overflow-tips.tsx
@@ -1,5 +1,6 @@
 import { Container } from '@react-email/container';
 import { Head } from '@react-email/head';
+import { Heading } from '@react-email/heading';
 import { Html } from '@react-email/html';
 import { Img } from '@react-email/img';
 import { Preview } from '@react-email/preview';
@@ -42,9 +43,9 @@ export default function Email({ tips = PropDefaults.tips }: EmailProps) {
           <Section style={header}>
             <Column>
               <Section style={headerContent}>
-                <Text style={headerContentTitle}>
+                <Heading style={headerContentTitle}>
                   Find what you want, faster
-                </Text>
+                </Heading>
                 <Text style={headerContentSubtitle}>
                   Tips and tricks for searching on Stack Overflow
                 </Text>
@@ -59,17 +60,17 @@ export default function Email({ tips = PropDefaults.tips }: EmailProps) {
           </Section>
 
           <Section style={content}>
-            <Text style={title}>Searching for solutions</Text>
+            <Heading as="h2" style={title}>Searching for solutions</Heading>
             <Text style={paragraph}>
               With more than 18 million questions, it's possible that someone
               has already provided a solution to the problem you're facing.{' '}
             </Text>
 
             <Hr style={divider} />
 
-            <Text style={title}>
+            <Heading as="h2" style={title}>
               Use the search bar at the top of the page to find what you need
-            </Text>
+            </Heading>
             <Text style={paragraph}>
               Here are a few simple search tips to get you started:
             </Text>
@@ -89,9 +90,9 @@ export default function Email({ tips = PropDefaults.tips }: EmailProps) {
 
             <Hr style={divider} />
 
-            <Text style={title}>
+            <Heading as="h2" style={title}>
               Take a break and read about the worst coder in the world
-            </Text>
+            </Heading>
 
             <Section style={buttonContainer}>
               <Link

diff --git a/apps/demo/emails/vercel-invite-user.tsx b/apps/demo/emails/vercel-invite-user.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@react-email/button';
 import { Container } from '@react-email/container';
 import { Head } from '@react-email/head';
+import { Heading } from '@react-email/heading';
 import { Hr } from '@react-email/hr';
 import { Html } from '@react-email/html';
 import { Img } from '@react-email/img';
@@ -54,9 +55,9 @@ export default function Email({
               style={logo}
             />
           </Section>
-          <Text style={h1}>
+          <Heading style={h1}>
             Join <strong>{teamName}</strong> on <strong>Vercel</strong>
-          </Text>
+          </Heading>
           <Text style={text}>Hello {username},</Text>
           <Text style={text}>
             <strong>bukinoshita</strong> (

diff --git a/apps/demo/emails/yelp-recent-login.tsx b/apps/demo/emails/yelp-recent-login.tsx
@@ -1,6 +1,7 @@
 import { Container } from '@react-email/container';
 import { Button } from '@react-email/button';
 import { Head } from '@react-email/head';
+import { Heading } from '@react-email/heading';
 import { Html } from '@react-email/html';
 import { Img } from '@react-email/img';
 import { Preview } from '@react-email/preview';
@@ -47,7 +48,7 @@ export default function Email({
 
             <Section style={boxInfos}>
               <Section>
-                <Text
+                <Heading
                   style={{
                     ...paragraph,
                     fontSize: 32,
@@ -56,8 +57,9 @@ export default function Email({
                   }}
                 >
                   Hi {userFirstName},
-                </Text>
-                <Text
+                </Heading>
+                <Heading
+                  as="h2"
                   style={{
                     ...paragraph,
                     fontSize: 26,
@@ -66,7 +68,7 @@ export default function Email({
                   }}
                 >
                   We noticed a recent login to your Yelp account.
-                </Text>
+                </Heading>
               </Section>
 
               <Section>

diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -11,7 +11,7 @@
     "@react-email/container": "0.0.4",
     "@react-email/column": "0.0.3",
     "@react-email/head": "0.0.2",
-    "@react-email/heading": "0.0.5",
+    "@react-email/heading": "0.0.7",
     "@react-email/hr": "0.0.2",
     "@react-email/html": "0.0.2",
     "@react-email/img": "0.0.2",

diff --git a/yarn.lock b/yarn.lock
@@ -1253,15 +1253,6 @@
   dependencies:
     react "18.2.0"
 
-"@react-email/[email protected]":
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/@react-email/heading/-/heading-0.0.5.tgz#f9a78faaecd862b247599c98171b1707565fb1cb"
-  integrity sha512-guSPzy6x+za+O4ch+3XeRkhgu82rT6FvcDtpuUwAqrFrrY4RTRIZ4jlRWO/hMC9EYGd76PjpsRG7deb+YcwmcQ==
-  dependencies:
-    "@radix-ui/react-slot" "1.0.0"
-    react "18.2.0"
-    utils "*"
-
 "@react-email/[email protected]":
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/@react-email/hr/-/hr-0.0.2.tgz#c7d505fc2a6b417b003aa2d7c8d542e191587591"