astryx-dracula 0.2.0 → 0.3.0

package/templates/contact-form.tsx

@@ -1,4 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   Ctr > V[a=center] > S.transparent[p=6] > V[g=6] > (V[g=2 a=center] > Hd"Let's brew after dark"[level=1] + Tx"Tell us a bit"[t=body]) + (V[g=4] > Hd"Why work with us"[level=2] + (G[c={min:200} g=4] > (C > V[g=3] > Ic + (V[g=1] > Hd"Title"[level=3] + Tx"Desc"[t=body]))*3)) + (V[g=4] > Hd"Your details"[level=2] + (G[c={min:260} g=4] > TI"Full name" + TI"Email") + (G[c={min:260} g=4] > TI"Company" + TI"Phone")) + D + (V[g=4] > Hd"Your project"[level=2] + (Fd"Goals"[req] > (H[g=2] > Tk"Goal"*10)) + SE"Timeline" + SE"Budget" + (RL"Source" > RLI*5) + TA"Notes" + CB"Decision maker") + (V[g=3] > B.primary"Send it into the night" + (H[j=center g=1] > Tx[t=supporting] > Lk"Privacy Policy"))
 
 import {useState} from 'react';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
@@ -7,7 +9,7 @@ import {Section} from '@astryxdesign/core/Section';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Card} from '@astryxdesign/core/Card';
 import {Button} from '@astryxdesign/core/Button';
-import {Text} from '@astryxdesign/core/Text';
+import {Text, Heading} from '@astryxdesign/core/Text';
 import {Icon} from '@astryxdesign/core/Icon';
 import {TextInput} from '@astryxdesign/core/TextInput';
 import {Selector} from '@astryxdesign/core/Selector';
@@ -17,8 +19,8 @@ import {Token} from '@astryxdesign/core/Token';
 import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
 import {TextArea} from '@astryxdesign/core/TextArea';
 import {Divider} from '@astryxdesign/core/Divider';
-import {Banner} from '@astryxdesign/core/Banner';
-import {Rocket, SlidersHorizontal, Hand} from 'lucide-react';
+import {Field} from '@astryxdesign/core/Field';
+import {Rocket, SlidersHorizontal, Hand, Check} from 'lucide-react';
 
 const CAMPAIGN_GOALS = [
   'Brand Awareness',
@@ -103,36 +105,30 @@ export default function ContactForm() {
   return (
     <Center axis="horizontal">
       <VStack hAlign="center" width="100%">
-        <Section
-          maxWidth={800}
-          width="100%"
-          padding={6}
-          paddingBlock={10}
-          variant="section">
+        <Section maxWidth={800} width="100%" padding={6} variant="transparent">
           <VStack gap={6}>
             {/* Header */}
             <VStack gap={2} hAlign="center" style={{textAlign: 'center'}}>
-              <Text type="display-1" weight="bold">
+              <Heading level={1} type="display-2">
                 Let&apos;s brew after dark
-              </Text>
+              </Heading>
               <Text type="body" color="secondary">
-                Tell us a bit about what you&apos;re summoning — the coven
+                Tell us a bit about what you&apos;re summoning, and the coven
                 would love to help it take flight.
               </Text>
             </VStack>
 
             {/* Why work with us */}
-            <VStack gap={5}>
+            <VStack gap={4}>
+              <Heading level={2}>Why work with us</Heading>
               <Grid columns={{minWidth: 200}} gap={4}>
                 {WHY_US.map(item => (
                   <Card key={item.title}>
                     <VStack gap={3}>
-                      <Icon icon={item.icon} size="lg" color="accent" />
+                      <Icon icon={item.icon} size="lg" color="secondary" />
                       <VStack gap={1}>
-                        <Text type="body" weight="bold">
-                          {item.title}
-                        </Text>
-                        <Text type="supporting" color="secondary">
+                        <Heading level={3}>{item.title}</Heading>
+                        <Text type="body" color="secondary">
                           {item.description}
                         </Text>
                       </VStack>
@@ -143,11 +139,13 @@ export default function ContactForm() {
             </VStack>
 
             {/* Your details */}
-            <VStack gap={5}>
+            <VStack gap={4}>
+              <Heading level={2}>Your details</Heading>
               <Grid columns={{minWidth: 260}} gap={4}>
                 <TextInput
-                  label="Full Name"
-                  placeholder="Full Name"
+                  label="Full name"
+                  isRequired
+                  placeholder="Full name"
                   value={fullName}
                   onChange={setFullName}
                   status={
@@ -158,6 +156,7 @@ export default function ContactForm() {
                 />
                 <TextInput
                   label="Email"
+                  isRequired
                   placeholder="you@company.com"
                   value={email}
                   onChange={setEmail}
@@ -171,6 +170,7 @@ export default function ContactForm() {
               <Grid columns={{minWidth: 260}} gap={4}>
                 <TextInput
                   label="Company"
+                  isRequired
                   placeholder="Company"
                   value={company}
                   onChange={setCompany}
@@ -182,6 +182,7 @@ export default function ContactForm() {
                 />
                 <TextInput
                   label="Phone"
+                  isRequired
                   placeholder="Phone number"
                   value={phone}
                   onChange={setPhone}
@@ -197,26 +198,47 @@ export default function ContactForm() {
             <Divider />
 
             {/* Your project */}
-            <VStack gap={5}>
-              <VStack gap={2}>
-                <Text type="label" color="secondary">
-                  What are you going for?
-                </Text>
-                <HStack gap={2} wrap="wrap">
-                  {CAMPAIGN_GOALS.map(goal => (
-                    <Token
-                      key={goal}
-                      label={goal}
-                      color={goals.includes(goal) ? 'yellow' : 'default'}
-                      onClick={() => toggleGoal(goal)}
-                    />
-                  ))}
+            <VStack gap={4}>
+              <Heading level={2}>Your project</Heading>
+              <Field
+                label="What are you going for?"
+                inputID="campaign-goals"
+                labelID="campaign-goals-label"
+                isGroupLabel
+                isRequired
+                status={
+                  errors.goals
+                    ? {type: 'error', message: errors.goals}
+                    : undefined
+                }>
+                <HStack
+                  gap={2}
+                  wrap="wrap"
+                  role="group"
+                  aria-labelledby="campaign-goals-label">
+                  {CAMPAIGN_GOALS.map(goal => {
+                    const isSelected = goals.includes(goal);
+                    return (
+                      <Token
+                        key={goal}
+                        label={goal}
+                        color={isSelected ? 'yellow' : 'default'}
+                        icon={
+                          isSelected ? (
+                            <Icon icon={Check} size="xsm" color="inherit" />
+                          ) : undefined
+                        }
+                        description={isSelected ? 'Selected' : undefined}
+                        onClick={() => toggleGoal(goal)}
+                      />
+                    );
+                  })}
                 </HStack>
-                {errors.goals && <Banner status="error" title={errors.goals} />}
-              </VStack>
+              </Field>
 
               <Selector
                 label="When are you thinking?"
+                isRequired
                 placeholder="When are you thinking of launching?"
                 options={LAUNCH_OPTIONS}
                 value={timeline}
@@ -230,6 +252,7 @@ export default function ContactForm() {
 
               <Selector
                 label="Ballpark budget?"
+                isRequired
                 placeholder="What's your rough monthly budget?"
                 options={BUDGET_OPTIONS}
                 value={budget}
@@ -254,7 +277,7 @@ export default function ContactForm() {
 
               <TextArea
                 label="Anything else?"
-                placeholder="Tell us whatever else is on your mind..."
+                placeholder="Tell us whatever else is on your mind…"
                 value={message}
                 onChange={setMessage}
               />
@@ -269,9 +292,8 @@ export default function ContactForm() {
             {/* Submit */}
             <VStack gap={3}>
               <Button
-                label="Submit"
+                label="Send it into the night"
                 variant="primary"
-                size="lg"
                 onClick={() => setSubmitted(true)}
               />
               <HStack gap={1} hAlign="center">