Skip to content

Commit c867463

Browse files
PyraxPyrax
committed
chore: remove styled-components remains
1 parent e8d4c3d commit c867463

File tree

5 files changed

+34
-49
lines changed

5 files changed

+34
-49
lines changed

‎www/src/content/docs/examples/contact-form.mdx‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,30 +26,29 @@ Then, you can use the `NetlifyForm` component in place of the standard form tag.
2626
<>
2727
<Honeypot />
2828
{success && (
29-
<p sx={{ variant: 'alerts.success', p: 3 }}>
29+
<p>
3030
Thanks for contacting us!
3131
</p>
3232
)}
3333
{error && (
34-
<p sx={{ variant: 'alerts.muted', p: 3 }}>
34+
<p>
3535
Sorry, we could not reach servers. Because it only works on Netlify,
3636
our GitHub demo does not provide a response.
3737
</p>
3838
)}
3939
<div>
40-
<label htmlFor='name' sx={{ variant: 'forms.label' }}>
40+
<label htmlFor='name'>
4141
Name:
4242
</label>
4343
<input
4444
type='text'
4545
name='name'
4646
id='name'
4747
onChange={handleChange}
48-
sx={{ variant: 'forms.input' }}
4948
/>
5049
</div>
51-
<div sx={{ pt: 2 }}>
52-
<label htmlFor='message' sx={{ variant: 'forms.label' }}>
50+
<div>
51+
<label htmlFor='message'>
5352
Message:
5453
</label>
5554
<textarea
@@ -58,14 +57,13 @@ Then, you can use the `NetlifyForm` component in place of the standard form tag.
5857
id='message'
5958
rows='4'
6059
onChange={handleChange}
61-
sx={{ variant: 'forms.textarea' }}
6260
/>
6361
</div>
64-
<div sx={{ pt: 3 }}>
65-
<button type='submit' sx={{ variant: 'buttons.success' }}>
62+
<div>
63+
<button type='submit'>
6664
Submit
6765
</button>
68-
<button type='reset' sx={{ variant: 'buttons.danger' }}>
66+
<button type='reset'>
6967
Reset
7068
</button>
7169
</div>
@@ -83,19 +81,17 @@ We could also use it to access `formRef` and manually reset the form as this exa
8381
```jsx live
8482
<NetlifyForm name='Contact' action='/thanks' honeypotName='bot-field'>
8583
{({ handleChange, formRef }) => (
86-
<div sx={{ variant: 'forms.inline' }}>
84+
<div>
8785
<input
8886
type='text'
8987
name='name'
9088
id='name'
9189
onChange={handleChange}
92-
sx={{ variant: 'forms.inlineInput' }}
9390
/>
9491
{/* This button, for example, uses the context to access formRef and then
9592
** programmatically reset this form. */}
9693
<button
9794
type='button'
98-
sx={{ variant: 'buttons.danger' }}
9995
onClick={() => formRef.current.reset()}
10096
>
10197
Custom reset button
@@ -110,17 +106,15 @@ Same example, without destructuring, makes it clear where we access the context:
110106
```jsx live
111107
<NetlifyForm name='Contact' action='/thanks' honeypotName='bot-field'>
112108
{(context) => (
113-
<div sx={{ variant: 'forms.inline' }}>
109+
<div>
114110
<input
115111
type='text'
116112
name='name'
117113
id='name'
118114
onChange={context.handleChange}
119-
sx={{ variant: 'forms.inlineInput' }}
120115
/>
121116
<button
122117
type='button'
123-
sx={{ variant: 'buttons.danger' }}
124118
onClick={() => context.formRef.current.reset()}
125119
>
126120
Custom reset button

‎www/src/content/docs/examples/formik.mdx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,18 @@ function NewsletterForm() {
6464
<NetlifyFormComponent onSubmit={handleSubmit}>
6565
<Honeypot />
6666
{netlify.success && (
67-
<p sx={{ variant: 'alerts.success', p: 3 }}>
67+
<p>
6868
Thanks for contacting us!
6969
</p>
7070
)}
7171
{netlify.error && (
72-
<p sx={{ variant: 'alerts.muted', p: 3 }}>
72+
<p>
7373
Sorry, we could not reach servers. Because it only works on Netlify,
7474
our GitHub demo does not provide a response.
7575
</p>
7676
)}
7777
<div>
78-
<label htmlFor='email' sx={{ variant: 'forms.label' }}>
78+
<label htmlFor='email'>
7979
Email:
8080
</label>
8181
<input
@@ -85,19 +85,16 @@ function NewsletterForm() {
8585
onChange={handleChange}
8686
onBlur={handleBlur}
8787
value={values.email}
88-
sx={{
89-
variant: 'forms.input'
90-
}}
9188
/>
9289
{touched.email && errors.email ? (
93-
<div sx={{ variant: 'text.error' }}>{errors.email}</div>
90+
<div>{errors.email}</div>
9491
) : null}
9592
</div>
96-
<div sx={{ pt: 3 }}>
97-
<button type='submit' sx={{ variant: 'buttons.success' }}>
93+
<div>
94+
<button type='submit'>
9895
Submit
9996
</button>
100-
<button type='reset' sx={{ variant: 'buttons.danger' }}>
97+
<button type='reset'>
10198
Reset
10299
</button>
103100
</div>

‎www/src/content/docs/examples/react-hook-form.mdx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,18 +49,18 @@ function NewsletterForm() {
4949
<NetlifyFormComponent onSubmit={handleSubmit(onSubmit)}>
5050
<Honeypot />
5151
{netlify.success && (
52-
<p sx={{ variant: 'alerts.success', p: 3 }}>
52+
<p>
5353
Thanks for contacting us!
5454
</p>
5555
)}
5656
{netlify.error && (
57-
<p sx={{ variant: 'alerts.muted', p: 3 }}>
57+
<p>
5858
Sorry, we could not reach servers. Because it only works on Netlify,
5959
our GitHub demo does not provide a response.
6060
</p>
6161
)}
6262
<div>
63-
<label htmlFor='email' sx={{ variant: 'forms.label' }}>
63+
<label htmlFor='email'>
6464
Email:
6565
</label>
6666
<input
@@ -73,22 +73,18 @@ function NewsletterForm() {
7373
message: 'Invalid email address'
7474
}
7575
})}
76-
sx={{
77-
variant: 'forms.input'
78-
}}
7976
/>
8077
{errors.email && (
81-
<div sx={{ variant: 'text.error' }}>{errors.email.message}</div>
78+
<div>{errors.email.message}</div>
8279
)}
8380
</div>
84-
<div sx={{ pt: 3 }}>
85-
<button type='submit' sx={{ variant: 'buttons.success' }}>
81+
<div>
82+
<button type='submit'>
8683
Submit
8784
</button>
8885
<button
8986
type='reset'
9087
onClick={() => reset()}
91-
sx={{ variant: 'buttons.danger' }}
9288
>
9389
Reset
9490
</button>

‎www/src/content/docs/examples/recaptcha.mdx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,30 +36,29 @@ Then, you can use the `NetlifyForm` component in place of the standard form tag.
3636
<Honeypot />
3737
<Recaptcha siteKey={GATSBY_SITE_RECAPTCHA_KEY} invisible />
3838
{success && (
39-
<p sx={{ variant: 'alerts.success', p: 3 }}>
39+
<p>
4040
Thanks for contacting us!
4141
</p>
4242
)}
4343
{error && (
44-
<p sx={{ variant: 'alerts.muted', p: 3 }}>
44+
<p>
4545
Sorry, we could not reach servers. Because it only works on Netlify,
4646
our GitHub demo does not provide a response.
4747
</p>
4848
)}
4949
<div>
50-
<label htmlFor='name' sx={{ variant: 'forms.label' }}>
50+
<label htmlFor='name'>
5151
Name:
5252
</label>
5353
<input
5454
type='text'
5555
name='name'
5656
id='name'
5757
onChange={handleChange}
58-
sx={{ variant: 'forms.input' }}
5958
/>
6059
</div>
61-
<div sx={{ pt: 2 }}>
62-
<label htmlFor='message' sx={{ variant: 'forms.label' }}>
60+
<div>
61+
<label htmlFor='message'>
6362
Message:
6463
</label>
6564
<textarea
@@ -68,14 +67,13 @@ Then, you can use the `NetlifyForm` component in place of the standard form tag.
6867
id='message'
6968
rows='4'
7069
onChange={handleChange}
71-
sx={{ variant: 'forms.textarea' }}
7270
/>
7371
</div>
74-
<div sx={{ pt: 3 }}>
75-
<button type='submit' sx={{ variant: 'buttons.success' }}>
72+
<div>
73+
<button type='submit'>
7674
Submit
7775
</button>
78-
<button type='reset' sx={{ variant: 'buttons.danger' }}>
76+
<button type='reset'>
7977
Reset
8078
</button>
8179
</div>

‎www/src/content/docs/reference.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@ Form context which exposes form state, handlers and actions for consumers.
5252
{(context) => (
5353
<>
5454
These are the props available through context:{' '}
55-
<ul sx={{ variant: 'list.inline' }}>
55+
<ul>
5656
{Object.keys(context).map((x) => (
57-
<li key={`ctx-var-${x}`} sx={{ px: 2 }}>
58-
<code bare sx={{ variant: 'styles.inlineCode' }}>
57+
<li key={`ctx-var-${x}`}>
58+
<code bare>
5959
{x}
6060
</code>
6161
</li>

0 commit comments

Comments
 (0)