Skip to content

Commit c9f8f1f

Browse files
FrontendlandFrontendland
committed
✨ Add Modal themes
1 parent e93f276 commit c9f8f1f

File tree

6 files changed

+165
-6
lines changed

6 files changed

+165
-6
lines changed

‎src/components/Modal/Modal.astro‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,32 @@
11
---
22
import type { ModalProps } from './modal'
3-
import styles from './modal.module.scss'
43
54
import Button from '../Button/Button.astro'
5+
6+
import info from '../../icons/info.svg?raw'
7+
import success from '../../icons/circle-check.svg?raw'
8+
import warning from '../../icons/warning.svg?raw'
9+
import alert from '../../icons/alert.svg?raw'
610
import closeIcon from '../../icons/close.svg?raw'
711
12+
import styles from './modal.module.scss'
13+
814
interface Props extends ModalProps {}
915
16+
const iconMap = {
17+
info,
18+
success,
19+
warning,
20+
alert
21+
}
22+
1023
const {
1124
title,
1225
subTitle,
1326
showCloseIcon = true,
1427
closeOnEsc = true,
1528
closeOnOverlay = true,
29+
theme,
1630
id,
1731
className
1832
} = Astro.props
@@ -25,6 +39,7 @@ const close = [
2539
2640
const classes = [
2741
styles.modal,
42+
theme && styles[theme],
2843
className
2944
]
3045
---
@@ -43,7 +58,12 @@ const classes = [
4358
<Fragment set:html={closeIcon} />
4459
</Button>
4560
)}
46-
{title && <strong class={styles.title}>{title}</strong>}
61+
{title && (
62+
<strong class={styles.title}>
63+
{theme && <Fragment set:html={iconMap[theme]} />}
64+
{title}
65+
</strong>
66+
)}
4767
{subTitle && <div class={styles.subTitle}>{subTitle}</div>}
4868
<slot />
4969
</dialog>

‎src/components/Modal/Modal.svelte‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,32 @@
55
import { classNames } from '../../utils/classNames'
66
77
import Button from '../Button/Button.svelte'
8+
9+
import info from '../../icons/info.svg?raw'
10+
import success from '../../icons/circle-check.svg?raw'
11+
import warning from '../../icons/warning.svg?raw'
12+
import alert from '../../icons/alert.svg?raw'
813
import closeIcon from '../../icons/close.svg?raw'
914
1015
export let title: ModalProps['title'] = ''
1116
export let subTitle: ModalProps['subTitle'] = ''
1217
export let showCloseIcon: ModalProps['showCloseIcon'] = true
1318
export let closeOnEsc: ModalProps['closeOnEsc'] = true
1419
export let closeOnOverlay: ModalProps['closeOnOverlay'] = true
20+
export let theme: ModalProps['theme'] = null
1521
export let id : ModalProps['className'] = ''
1622
export let className: ModalProps['className'] = ''
1723
24+
const iconMap = {
25+
info,
26+
success,
27+
warning,
28+
alert
29+
}
30+
1831
const classes = classNames([
1932
styles.modal,
33+
theme && styles[theme],
2034
className
2135
])
2236
@@ -42,7 +56,12 @@
4256
</Button>
4357
{/if}
4458
{#if title}
45-
<strong class={styles.title}>{title}</strong>
59+
<strong class={styles.title}>
60+
{#if theme}
61+
{@html iconMap[theme]}
62+
{/if}
63+
{title}
64+
</strong>
4665
{/if}
4766
{#if subTitle}
4867
<div class={styles.subTitle}>{subTitle}</div>

‎src/components/Modal/Modal.tsx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,34 @@ import styles from './modal.module.scss'
55
import { classNames } from '../../utils/classNames'
66

77
import Button from '../Button/Button.tsx'
8+
9+
import info from '../../icons/info.svg?raw'
10+
import success from '../../icons/circle-check.svg?raw'
11+
import warning from '../../icons/warning.svg?raw'
12+
import alert from '../../icons/alert.svg?raw'
813
import closeIcon from '../../icons/close.svg?raw'
914

15+
const iconMap = {
16+
info,
17+
success,
18+
warning,
19+
alert
20+
}
21+
1022
const Modal = ({
1123
title,
1224
subTitle,
1325
showCloseIcon = true,
1426
closeOnEsc = true,
1527
closeOnOverlay = true,
28+
theme,
1629
id,
1730
className,
1831
children
1932
}: ReactModalProps) => {
2033
const classes = classNames([
2134
styles.modal,
35+
theme && styles[theme],
2236
className
2337
])
2438

@@ -43,7 +57,14 @@ const Modal = ({
4357
dangerouslySetInnerHTML={{ __html: closeIcon }}
4458
/>
4559
)}
46-
{title && <strong className={styles.title}>{title}</strong>}
60+
{title && (
61+
<strong
62+
className={styles.title}
63+
dangerouslySetInnerHTML={{
64+
__html: theme ? iconMap[theme] + title : title
65+
}}
66+
/>
67+
)}
4768
{subTitle && <div className={styles.subTitle}>{subTitle}</div>}
4869
{children}
4970
</dialog>

‎src/components/Modal/modal.module.scss‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,49 @@
4040
.title {
4141
@include typography(lg);
4242
@include spacing(mb-xs);
43-
display: block;
43+
@include layout(flex, v-center, xs);
44+
45+
svg {
46+
@include size(20px);
47+
}
4448
}
4549

4650
.subTitle {
4751
@include typography(primary-20);
4852
@include spacing(mb-xs);
4953
}
54+
55+
&.info {
56+
@include border(info);
57+
58+
.title {
59+
@include typography(info);
60+
}
61+
}
62+
63+
&.success {
64+
@include border(success);
65+
66+
.title {
67+
@include typography(success);
68+
}
69+
}
70+
71+
&.warning {
72+
@include border(warning);
73+
74+
.title {
75+
@include typography(warning);
76+
}
77+
}
78+
79+
&.alert {
80+
@include border(alert);
81+
82+
.title {
83+
@include typography(alert);
84+
}
85+
}
5086
}
5187

5288
.overlay {

‎src/components/Modal/modal.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ export type ModalProps = {
66
closeOnOverlay?: boolean
77
id?: string
88
className?: string
9+
theme?: 'info'
10+
| 'success'
11+
| 'warning'
12+
| 'alert'
13+
| null
914
}
1015

1116
export type ReactModalProps = {

‎src/pages/modal.astro‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ const sections = getSections({
4747
title="Svelte Modal"
4848
subTitle="With a subtitle"
4949
id="modal-svelte"
50+
theme="alert"
5051
>
5152
<p>
5253
Click on the close icon, close button, overlay, or hit <code>esc</code> to close this modal.
@@ -67,6 +68,7 @@ const sections = getSections({
6768
title="React Modal"
6869
subTitle="With a subtitle"
6970
id="modal-react"
71+
theme="info"
7072
>
7173
<p>
7274
Click on the close icon, close button, overlay, or hit <code>esc</code> to close this modal.
@@ -157,6 +159,62 @@ const sections = getSections({
157159
This modal doesn't have a close button. It can only be closed by clicking on the overlay or using the <code>esc</code> button.
158160
</section.component>
159161
</ComponentWrapper>
162+
163+
<ComponentWrapper title="Info modal">
164+
<Button theme="info" id={`modal-btn-6${index}`}>
165+
Trigger
166+
</Button>
167+
<section.component
168+
id={`modal-6${index}`}
169+
title="Information"
170+
subTitle="Before continuing, please read carefully"
171+
theme="info"
172+
>
173+
This modal was created using the info theme
174+
</section.component>
175+
</ComponentWrapper>
176+
177+
<ComponentWrapper title="Success modal">
178+
<Button theme="success" id={`modal-btn-7${index}`}>
179+
Trigger
180+
</Button>
181+
<section.component
182+
id={`modal-7${index}`}
183+
title="Success"
184+
subTitle="Before continuing, please read carefully"
185+
theme="success"
186+
>
187+
This modal was created using the success theme
188+
</section.component>
189+
</ComponentWrapper>
190+
191+
<ComponentWrapper title="Info modal">
192+
<Button theme="warning" id={`modal-btn-8${index}`}>
193+
Trigger
194+
</Button>
195+
<section.component
196+
id={`modal-8${index}`}
197+
title="Warning"
198+
subTitle="Before continuing, please read carefully"
199+
theme="warning"
200+
>
201+
This modal was created using the warning theme
202+
</section.component>
203+
</ComponentWrapper>
204+
205+
<ComponentWrapper title="Info modal">
206+
<Button theme="alert" id={`modal-btn-9${index}`}>
207+
Trigger
208+
</Button>
209+
<section.component
210+
id={`modal-9${index}`}
211+
title="Alert"
212+
subTitle="Before continuing, please read carefully"
213+
theme="alert"
214+
>
215+
This modal was created using the alert theme
216+
</section.component>
217+
</ComponentWrapper>
160218
</div>
161219
))}
162220
</Layout>
@@ -176,7 +234,7 @@ const sections = getSections({
176234
'react'
177235
]
178236

179-
const ids = Array(5).fill(10).map((x, index) => x * (index + 1))
237+
const ids = Array(9).fill(10).map((x, index) => x * (index + 1))
180238
const variants = [
181239
'00',
182240
'01',

0 commit comments

Comments
 (0)