Skip to content

Commit 03f4fa7

Browse files
FrontendlandFrontendland
committed
✨ Add checkbox component
1 parent 957534a commit 03f4fa7

File tree

16 files changed

+350
-12
lines changed

16 files changed

+350
-12
lines changed

‎src/components/Alert/Alert.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { AlertProps } from './alert'
33
import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
44
55
import info from '../../icons/info.svg?raw'
6-
import success from '../../icons/check.svg?raw'
6+
import success from '../../icons/circle-check.svg?raw'
77
import warning from '../../icons/warning.svg?raw'
88
import alert from '../../icons/alert.svg?raw'
99

‎src/components/Alert/Alert.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
44
55
import info from '../../icons/info.svg?raw'
6-
import success from '../../icons/check.svg?raw'
6+
import success from '../../icons/circle-check.svg?raw'
77
import warning from '../../icons/warning.svg?raw'
88
import alert from '../../icons/alert.svg?raw'
99

‎src/components/Alert/Alert.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { AlertProps } from './alert'
33
import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
44

55
import info from '../../icons/info.svg?raw'
6-
import success from '../../icons/check.svg?raw'
6+
import success from '../../icons/circle-check.svg?raw'
77
import warning from '../../icons/warning.svg?raw'
88
import alert from '../../icons/alert.svg?raw'
99

@@ -21,7 +21,7 @@ type ReactAlertProps = {
2121
TitleTag?: keyof JSX.IntrinsicElements
2222
children: React.ReactNode
2323
icon?: string
24-
}
24+
} & AlertProps
2525

2626
const Alert = ({
2727
Element = 'section',
@@ -32,7 +32,7 @@ const Alert = ({
3232
children,
3333
icon,
3434
...rest
35-
}: AlertProps & ReactAlertProps) => {
35+
}: ReactAlertProps) => {
3636
const classes = [
3737
'w-alert',
3838
(!icon && !theme) && 'col',

‎src/components/Button/Button.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import './button.scss'
44

55
type ReactButtonProps = {
66
children: React.ReactNode
7-
}
7+
} & ButtonProps
88

99
const Button = ({
1010
theme,
@@ -13,7 +13,7 @@ const Button = ({
1313
children,
1414
onClick,
1515
...rest
16-
}: ButtonProps & ReactButtonProps) => {
16+
}: ReactButtonProps) => {
1717
const classes = [
1818
'w-button',
1919
bold && 'bold',

‎src/components/Card/Card.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ type ReactCardProps = {
66
Element?: keyof JSX.IntrinsicElements
77
TitleTag?: keyof JSX.IntrinsicElements
88
children: React.ReactNode
9-
}
9+
} & CardProps
1010

1111
const Card = ({
1212
Element = 'section',
@@ -17,7 +17,7 @@ const Card = ({
1717
secondary,
1818
children,
1919
...rest
20-
}: CardProps & ReactCardProps) => {
20+
}: ReactCardProps) => {
2121
const classes = [
2222
'w-card',
2323
className,

‎src/components/Checkbox/Checkbox.astro

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
import type { CheckboxProps } from './checkbox'
3+
import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
4+
5+
import check from '../../icons/check.svg?raw'
6+
7+
import './checkbox.scss'
8+
9+
interface Props extends CheckboxProps {}
10+
11+
const {
12+
checked,
13+
label,
14+
subText,
15+
disabled,
16+
boxed,
17+
color
18+
} = Astro.props
19+
20+
const classes = [
21+
'w-checkbox',
22+
boxed && 'boxed',
23+
label && subText && 'col'
24+
]
25+
26+
const style = color
27+
? `--w-checkbox-color: ${color};`
28+
: null
29+
---
30+
31+
<label class:list={classes} style={style}>
32+
<ConditionalWrapper condition={!!(label && subText)}>
33+
<div class="checkbox-wrapper" slot="wrapper">
34+
children
35+
</div>
36+
<input type="checkbox" checked={checked} disabled={disabled} />
37+
<span class="check">
38+
<Fragment set:html={check} />
39+
</span>
40+
{label && (
41+
<span class="label">
42+
<Fragment set:html={label} />
43+
</span>
44+
)}
45+
</ConditionalWrapper>
46+
{label && subText && <span class="sub-text">{subText}</span>}
47+
</label>

‎src/components/Checkbox/Checkbox.svelte

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script lang="ts">
2+
import type { CheckboxProps } from './checkbox'
3+
import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
4+
5+
import check from '../../icons/check.svg?raw'
6+
7+
import './checkbox.scss'
8+
9+
export let checked: CheckboxProps['checked'] = false
10+
export let label: CheckboxProps['label'] = ''
11+
export let subText: CheckboxProps['subText'] = ''
12+
export let disabled: CheckboxProps['disabled'] = false
13+
export let boxed: CheckboxProps['boxed'] = false
14+
export let color: CheckboxProps['color'] = ''
15+
export let onClick: () => any = () => {}
16+
17+
const classes = [
18+
'w-checkbox',
19+
boxed && 'boxed',
20+
label && subText && 'col'
21+
].filter(Boolean).join(' ')
22+
23+
const style = color
24+
? `--w-checkbox-color: ${color};`
25+
: null
26+
</script>
27+
28+
<label class={classes} style={style} on:click={onClick}>
29+
<ConditionalWrapper
30+
condition={!!(label && subText)}
31+
element="div"
32+
class="checkbox-wrapper"
33+
>
34+
<input type="checkbox" checked={checked} disabled={disabled} />
35+
<span class="check">
36+
{@html check}
37+
</span>
38+
{#if label}
39+
<span class="label">
40+
{@html label}
41+
</span>
42+
{/if}
43+
</ConditionalWrapper>
44+
{#if label && subText}
45+
<span class="sub-text">{subText}</span>
46+
{/if}
47+
</label>

‎src/components/Checkbox/Checkbox.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react'
2+
import type { CheckboxProps } from './checkbox'
3+
import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
4+
5+
import check from '../../icons/check.svg?raw'
6+
7+
import './checkbox.scss'
8+
9+
type ReactCheckboxProps = {
10+
onClick?: () => any
11+
} & CheckboxProps
12+
13+
const Checkbox = ({
14+
checked,
15+
label,
16+
subText,
17+
disabled,
18+
boxed,
19+
color,
20+
onClick
21+
}: ReactCheckboxProps) => {
22+
const classes = [
23+
'w-checkbox',
24+
boxed && 'boxed',
25+
label && subText && 'col'
26+
].filter(Boolean).join(' ')
27+
28+
const style = color
29+
? { '--w-checkbox-color': color } as React.CSSProperties
30+
: undefined
31+
32+
return (
33+
<label className={classes} style={style} onClick={onClick}>
34+
<ConditionalWrapper
35+
condition={!!(label && subText)}
36+
wrapper={children => (
37+
<div className="checkbox-wrapper">
38+
{children}
39+
</div>
40+
)}
41+
>
42+
<input
43+
type="checkbox"
44+
checked={checked}
45+
disabled={disabled}
46+
/>
47+
<span
48+
className="check"
49+
dangerouslySetInnerHTML={{ __html: check }}
50+
/>
51+
{label && (
52+
<span
53+
className="label"
54+
dangerouslySetInnerHTML={{ __html: label }}
55+
/>
56+
)}
57+
</ConditionalWrapper>
58+
{label && subText && (
59+
<span className="sub-text">{subText}</span>
60+
)}
61+
</label>
62+
)
63+
}
64+
65+
export default Checkbox

‎src/components/Checkbox/checkbox.scss

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
@import '../../scss/config.scss';
2+
3+
.w-checkbox {
4+
cursor: pointer;
5+
display: inline-flex;
6+
align-items: center;
7+
gap: 10px;
8+
9+
&.col {
10+
flex-direction: column;
11+
align-items: flex-start;
12+
justify-content: flex-start;
13+
gap: 5px;
14+
15+
.checkbox-wrapper {
16+
display: flex;
17+
align-items: center;
18+
gap: 10px;
19+
}
20+
}
21+
22+
&.boxed {
23+
border: 1px solid #252525;
24+
border-radius: 5px;
25+
padding: 20px;
26+
}
27+
28+
input {
29+
display: none;
30+
31+
&:checked + span {
32+
background-color: var(--w-checkbox-color);
33+
34+
svg {
35+
position: absolute;
36+
top: 50%;
37+
left: 50%;
38+
transform: translate(-50%, -50%);
39+
display: block;
40+
color: #252525;
41+
width: 10px;
42+
height: 10px;
43+
}
44+
}
45+
46+
&:disabled + span {
47+
background-color: #333;
48+
border-color: #333;
49+
cursor: no-drop;
50+
}
51+
}
52+
53+
a {
54+
text-decoration: underline;
55+
}
56+
57+
.check {
58+
display: inline-block;
59+
width: 15px;
60+
height: 15px;
61+
border: 1px solid var(--w-checkbox-color);;
62+
border-radius: 2px;
63+
position: relative;
64+
65+
svg {
66+
display: none;
67+
}
68+
}
69+
70+
.sub-text {
71+
margin-left: 25px;
72+
font-size: 16px;
73+
color: #BBB;
74+
}
75+
}

‎src/components/Checkbox/checkbox.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export type CheckboxProps = {
2+
checked?: boolean
3+
label?: string
4+
subText?: string
5+
disabled?: boolean
6+
boxed?: boolean
7+
color?: string
8+
}

0 commit comments

Comments
 (0)