Skip to content

Commit 4739898

Browse files
FrontendlandFrontendland
committed
✨ Improve and add examples for Sign Up block
1 parent 749f049 commit 4739898

File tree

12 files changed

+792
-904
lines changed

12 files changed

+792
-904
lines changed

‎package-lock.json

Lines changed: 495 additions & 876 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"svelte-eslint-parser": "0.41.0",
3636
"typescript": "5.4.5",
3737
"typescript-eslint": "8.3.0",
38-
"webcoreui": "0.5.0"
38+
"webcoreui": "0.6.0"
3939
},
4040
"exports": {
4141
".": "./index.js",

‎scripts/utilityTypes.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,14 @@ declare module 'webcoreui' {
6868
cancel: () => void
6969
}
7070
71+
export const get: (selector: string, all: boolean) => Element | NodeListOf<Element> | null
72+
export const on: (
73+
selector: string | HTMLElement,
74+
event: string,
75+
callback: any,
76+
all?: boolean
77+
) => void
78+
7179
export const dispatch: (event: string, detail: unknown) => void
7280
export const listen: (event: string, callback: (e: any) => unknown) => {
7381
remove: () => void

‎src/blocks/SignUp/SignUp.astro

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,66 @@
11
---
2+
import type { SignUpProps } from './signup'
3+
24
import {
35
Button,
46
Card,
57
Input
68
} from 'webcoreui/astro'
9+
10+
interface Props extends SignUpProps {
11+
primaryButtonSelector?: string
12+
secondaryButtonSelector?: string
13+
}
14+
15+
const {
16+
label = 'Sign up',
17+
emailLabel = 'Email',
18+
emailPlaceholder = 'Enter your email',
19+
emailSubText = '',
20+
passwordLabel = 'Password',
21+
passwordPlaceholder = 'Enter your password',
22+
passwordSubText = 'Generate a unique password <a href="#">here</a>',
23+
primaryButtonTheme = 'success',
24+
primaryButtonLabel = 'Create an account',
25+
secondaryButtonTheme = 'secondary',
26+
secondaryButtonLabel = 'Sign in',
27+
primaryButtonSelector,
28+
secondaryButtonSelector
29+
} = Astro.props
730
---
831

9-
<Card title="Sign up">
10-
<form class="flex column">
11-
<Input label="Email" placeholder="Enter your email" />
32+
<Card title={label}>
33+
<form class="flex column sign-up-form">
34+
<Input
35+
label={emailLabel}
36+
placeholder={emailPlaceholder}
37+
subText={emailSubText}
38+
autocomplete="on"
39+
/>
1240
<Input
1341
type="password"
14-
label="Password"
15-
placeholder="Enter your password"
16-
subText="Generate a unique password <a href='#'>here</a>"
42+
label={passwordLabel}
43+
placeholder={passwordPlaceholder}
44+
subText={passwordSubText}
45+
autocomplete="on"
1746
/>
1847
<div class="flex xs wrap">
19-
<Button theme="success">Create an account</Button>
20-
<Button theme="secondary">Sign in</Button>
48+
{primaryButtonLabel && (
49+
<Button theme={primaryButtonTheme} className={primaryButtonSelector}>
50+
{primaryButtonLabel}
51+
</Button>
52+
)}
53+
{secondaryButtonLabel && (
54+
<Button theme={secondaryButtonTheme} className={secondaryButtonSelector}>
55+
{secondaryButtonLabel}
56+
</Button>
57+
)}
2158
</div>
2259
</form>
2360
</Card>
61+
62+
<script>
63+
import { on } from '@utils/DOMUtils'
64+
65+
on('.sign-up-form', 'submit', (event: Event) => event.preventDefault())
66+
</script>

‎src/blocks/SignUp/SignUp.svelte

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,53 @@
1-
<script>
1+
<script lang="ts">
2+
import type { SvelteSignUpProps } from './signup'
3+
24
import {
35
Button,
46
Card,
57
Input
68
} from 'webcoreui/svelte'
9+
10+
export let label: SvelteSignUpProps['label'] = 'Sign up'
11+
export let emailLabel: SvelteSignUpProps['emailLabel'] = 'Email'
12+
export let emailPlaceholder: SvelteSignUpProps['emailPlaceholder'] = 'Enter your email'
13+
export let emailSubText: SvelteSignUpProps['emailSubText'] = ''
14+
export let passwordLabel: SvelteSignUpProps['passwordLabel'] = 'Password'
15+
export let passwordPlaceholder: SvelteSignUpProps['passwordPlaceholder'] = 'Enter your password'
16+
export let passwordSubText: SvelteSignUpProps['passwordSubText'] = 'Generate a unique password <a href="#">here</a>'
17+
export let primaryButtonTheme: SvelteSignUpProps['primaryButtonTheme'] = 'success'
18+
export let primaryButtonLabel: SvelteSignUpProps['primaryButtonLabel'] = 'Create an account'
19+
export let secondaryButtonTheme: SvelteSignUpProps['secondaryButtonTheme'] = 'secondary'
20+
export let secondaryButtonLabel: SvelteSignUpProps['secondaryButtonLabel'] = 'Sign in'
21+
export let primaryOnClick: SvelteSignUpProps['primaryOnClick'] = () => {}
22+
export let secondaryOnClick: SvelteSignUpProps['secondaryOnClick'] = () => {}
723
</script>
824

9-
<Card title="Sign up">
10-
<form class="flex column">
11-
<Input label="Email" placeholder="Enter your email" />
25+
<Card title={label}>
26+
<form class="flex column" on:submit={e => e.preventDefault()}>
27+
<Input
28+
label={emailLabel}
29+
placeholder={emailPlaceholder}
30+
subText={emailSubText}
31+
autocomplete="on"
32+
/>
1233
<Input
1334
type="password"
14-
label="Password"
15-
placeholder="Enter your password"
16-
subText="Generate a unique password <a href='#'>here</a>"
35+
label={passwordLabel}
36+
placeholder={passwordPlaceholder}
37+
subText={passwordSubText}
38+
autocomplete="on"
1739
/>
1840
<div class="flex xs wrap">
19-
<Button theme="success">Create an account</Button>
20-
<Button theme="secondary">Sign in</Button>
41+
{#if primaryButtonLabel}
42+
<Button theme={primaryButtonTheme} onClick={primaryOnClick}>
43+
{primaryButtonLabel}
44+
</Button>
45+
{/if}
46+
{#if secondaryButtonLabel}
47+
<Button theme={secondaryButtonTheme} onClick={secondaryOnClick}>
48+
{secondaryButtonLabel}
49+
</Button>
50+
{/if}
2151
</div>
2252
</form>
2353
</Card>

‎src/blocks/SignUp/SignUp.tsx

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,59 @@
11
import React from 'react'
2+
import type { ReactSignUpProps } from './signup'
23

34
import {
45
Button,
56
Card,
67
Input
78
} from 'webcoreui/react'
89

9-
const SignUp = () => {
10+
const SignUp = ({
11+
label = 'Sign up',
12+
emailLabel = 'Email',
13+
emailPlaceholder = 'Enter your email',
14+
emailSubText = '',
15+
passwordLabel = 'Password',
16+
passwordPlaceholder = 'Enter your password',
17+
passwordSubText = 'Generate a unique password <a href="#">here</a>',
18+
primaryButtonTheme = 'success',
19+
primaryButtonLabel = 'Create an account',
20+
secondaryButtonTheme = 'secondary',
21+
secondaryButtonLabel = 'Sign in',
22+
primaryOnClick,
23+
secondaryOnClick
24+
}: ReactSignUpProps) => {
1025

1126
return (
12-
<Card title="Sign up">
13-
<form className="flex column">
14-
<Input label="Email" placeholder="Enter your email" />
27+
<Card title={label}>
28+
<form className="flex column" onSubmit={e => e.preventDefault()}>
29+
<Input
30+
label={emailLabel}
31+
placeholder={emailPlaceholder}
32+
subText={emailSubText}
33+
autoComplete="on"
34+
/>
1535
<Input
1636
type="password"
17-
label="Password"
18-
placeholder="Enter your password"
19-
subText="Generate a unique password <a href='#'>here</a>"
37+
label={passwordLabel}
38+
placeholder={passwordPlaceholder}
39+
subText={passwordSubText}
40+
autoComplete="on"
2041
/>
2142
<div className="flex xs wrap">
22-
<Button theme="success">Create an account</Button>
23-
<Button theme="secondary">Sign in</Button>
43+
{primaryButtonLabel && (
44+
<Button theme={primaryButtonTheme} onClick={primaryOnClick}>
45+
{primaryButtonLabel}
46+
</Button>
47+
)}
48+
{secondaryButtonLabel && (
49+
<Button theme={secondaryButtonTheme} onClick={secondaryOnClick}>
50+
{secondaryButtonLabel}
51+
</Button>
52+
)}
2453
</div>
2554
</form>
2655
</Card>
56+
2757
)
2858
}
2959

‎src/blocks/SignUp/signup.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { MouseEventHandler } from 'svelte/elements'
2+
3+
import type { ButtonProps } from 'webcoreui/astro'
4+
5+
export type SignUpProps = {
6+
label?: string
7+
emailLabel?: string
8+
emailPlaceholder?: string
9+
emailSubText?: string
10+
passwordLabel?: string
11+
passwordPlaceholder?: string
12+
passwordSubText?: string
13+
primaryButtonTheme?: ButtonProps['theme']
14+
primaryButtonLabel?: string
15+
secondaryButtonTheme?: ButtonProps['theme']
16+
secondaryButtonLabel?: string
17+
}
18+
19+
export type SvelteSignUpProps = {
20+
primaryOnClick?: MouseEventHandler<HTMLButtonElement>
21+
secondaryOnClick?: MouseEventHandler<HTMLButtonElement>
22+
} & SignUpProps
23+
24+
export type ReactSignUpProps = {
25+
primaryOnClick?: React.MouseEventHandler<HTMLButtonElement>
26+
secondaryOnClick?: React.MouseEventHandler<HTMLButtonElement>
27+
} & SignUpProps

‎src/pages/blocks/index.astro

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
import Layout from '@static/Layout.astro'
3+
import Link from '@static/Link.astro'
4+
5+
import SignUp from '@blocks/SignUp/SignUp.astro'
6+
---
7+
8+
<Layout>
9+
<h1>Blocks</h1>
10+
11+
<div class="grid md-2 lg-3">
12+
<div class="relative">
13+
<SignUp />
14+
<Link href="/blocks/sign-up" />
15+
</div>
16+
</div>
17+
</Layout>

‎src/pages/blocks/sign-up.astro

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
import Layout from '@static/Layout.astro'
3+
4+
import AstroSignUp from '@blocks/SignUp/SignUp.astro'
5+
import SvelteSignUp from '@blocks/SignUp/SignUp.svelte'
6+
import ReactSignUp from '@blocks/SignUp/SignUp.tsx'
7+
---
8+
9+
<Layout>
10+
<h1>Sign Up Blocks</h1>
11+
<h2>
12+
<a href="/blocks">
13+
{'<-'} Back to all blocks
14+
</a>
15+
</h2>
16+
17+
<div class="grid xs-2 sm-3">
18+
<AstroSignUp
19+
label="Astro Sign Up"
20+
emailLabel="Username"
21+
emailPlaceholder="Enter your username"
22+
passwordSubText="No account yet? <a href='#'>Generate a strong password</a>."
23+
secondaryButtonTheme="flat"
24+
primaryButtonSelector="create-account"
25+
secondaryButtonSelector="sign-in"
26+
/>
27+
<SvelteSignUp
28+
label="Svelte Sign Up"
29+
primaryButtonTheme="alert"
30+
/>
31+
<ReactSignUp
32+
label="React Sign Up"
33+
primaryButtonTheme="info"
34+
/>
35+
</div>
36+
</Layout>
37+
38+
<script>
39+
import { on } from '@utils/DOMUtils'
40+
41+
// eslint-disable-next-line no-console
42+
on('.create-account', 'click', () => console.log('Creating account'))
43+
44+
// eslint-disable-next-line no-console
45+
on('.sign-in', 'click', () => console.log('Signing in'))
46+
</script>

‎src/static/Layout.astro

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const menu = {
2121
html: logo
2222
},
2323
items: [
24+
{ href: '/blocks', name: 'Blocks', active: isPath('blocks') },
2425
{ href: '/svelte', name: 'Svelte', active: isPath('svelte') },
2526
{ href: '/react', name: 'React', active: isPath('react') },
2627
{ href: '/css/themes', name: 'Themes', active: isPath('css/themes') },
@@ -50,7 +51,8 @@ const footer = [
5051
items: [
5152
{ name: 'Astro', href: '/astro-examples', active: isPath('astro-examples') },
5253
{ name: 'Svelte', href: '/svelte-examples', active: isPath('svelte-examples') },
53-
{ name: 'React', href: '/react-examples', active: isPath('react-examples') }
54+
{ name: 'React', href: '/react-examples', active: isPath('react-examples') },
55+
{ name: 'Blocks', href: '/blocks', active: isPath('blocks') }
5456
]
5557
}
5658
]
@@ -185,4 +187,8 @@ const externalLinks = [
185187
.muted {
186188
@include typography(primary-20, md);
187189
}
190+
191+
.relative {
192+
@include position(relative);
193+
}
188194
</style>

‎src/static/Link.astro

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
import { Button } from 'webcoreui/astro'
3+
4+
interface Props {
5+
position?: 'top' | 'bottom' | 'left' | 'right'
6+
label?: string
7+
href: string
8+
}
9+
10+
const {
11+
label = 'Open examples',
12+
position = '',
13+
href
14+
} = Astro.props
15+
---
16+
17+
<Button
18+
theme="flat"
19+
className="link"
20+
data-tooltip={label}
21+
data-position={position}
22+
href={href}
23+
>
24+
...
25+
</Button>
26+
27+
<style lang="scss">
28+
@import 'webcoreui/config';
29+
30+
.link {
31+
@include position(absolute, b0, r0);
32+
padding: 5px !important;
33+
}
34+
</style>

0 commit comments

Comments
 (0)