Skip to content

Commit 1bc285f

Browse files
FrontendlandFrontendland
committed
💄 Improve example page for Toast
1 parent 9f116fd commit 1bc285f

File tree

2 files changed

+69
-127
lines changed

2 files changed

+69
-127
lines changed

‎src/pages/toast.astro

Lines changed: 56 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -60,131 +60,62 @@ const sections = [
6060

6161
{sections.map((section, index) => (
6262
<h1>{section.title}</h1>
63-
<div class="grid md-2 lg-3">
64-
<ComponentWrapper title="Toast with text only">
65-
<Button theme="secondary" id={`toast-btn-0${index}`}>
66-
Show Toast
67-
</Button>
68-
69-
<section.component id={`toast-0${index}`}>
70-
Toast with only text.
71-
</section.component>
72-
</ComponentWrapper>
73-
74-
<ComponentWrapper title="Toast with text and title">
75-
<Button theme="secondary" id={`toast-btn-1${index}`}>
76-
Show Toast
77-
</Button>
78-
79-
<section.component title="Note" id={`toast-1${index}`}>
80-
Toast with text and title.
81-
</section.component>
82-
</ComponentWrapper>
83-
84-
<ComponentWrapper title="Toast with emoji in title">
85-
<Button theme="secondary" id={`toast-btn-2${index}`}>
86-
Show Toast
87-
</Button>
88-
89-
<section.component title="💡 Note" id={`toast-2${index}`}>
90-
Toast with emoji in title
91-
</section.component>
92-
</ComponentWrapper>
93-
94-
<ComponentWrapper title="Informational toast">
95-
<Button theme="secondary" id={`toast-btn-3${index}`}>
96-
Show Toast
97-
</Button>
98-
99-
<section.component title="Information" theme="info" id={`toast-3${index}`}>
100-
Toast with info theme.
101-
</section.component>
102-
</ComponentWrapper>
103-
104-
<ComponentWrapper title="Success toast">
105-
<Button theme="secondary" id={`toast-btn-4${index}`}>
106-
Show Toast
107-
</Button>
108-
109-
<section.component title="Congratulations!" theme="success" id={`toast-4${index}`}>
110-
Toast with success theme.
111-
</section.component>
112-
</ComponentWrapper>
113-
114-
<ComponentWrapper title="Warning toast">
115-
<Button theme="secondary" id={`toast-btn-5${index}`}>
116-
Show Toast
117-
</Button>
118-
119-
<section.component title="Important" theme="warning" id={`toast-5${index}`}>
120-
Toast with warning theme.
121-
</section.component>
122-
</ComponentWrapper>
123-
124-
<ComponentWrapper title="Alert toast">
125-
<Button theme="secondary" id={`toast-btn-6${index}`}>
126-
Show Toast
127-
</Button>
128-
129-
<section.component title="Irreversible action" theme="alert" id={`toast-6${index}`}>
130-
Toast with alert theme.
131-
</section.component>
132-
</ComponentWrapper>
133-
134-
<ComponentWrapper title="Toast with custom icon">
135-
<Button theme="secondary" id={`toast-btn-7${index}`}>
136-
Show Toast
137-
</Button>
138-
139-
<section.component title="Custom icons" id={`toast-7${index}`}>
140-
<Icon type="github" slot="icon" />
141-
Toast with custom icon.
142-
</section.component>
143-
</ComponentWrapper>
144-
145-
<ComponentWrapper title="Themed toast with icon">
146-
<Button theme="secondary" id={`toast-btn-8${index}`}>
147-
Show Toast
148-
</Button>
149-
150-
<section.component title="Themed toast with icon" theme="success" id={`toast-8${index}`}>
151-
<Icon type="github" slot="icon" />
152-
Toast with theme and icon.
153-
</section.component>
154-
</ComponentWrapper>
155-
156-
<ComponentWrapper title="Toast in bottom left">
157-
<Button theme="secondary" id={`toast-btn-9${index}`}>
158-
Show Toast
159-
</Button>
160-
161-
<section.component title="Bottom left" id={`toast-9${index}`} position="bottom-left">
162-
Toast in bottom left corner
163-
</section.component>
164-
</ComponentWrapper>
165-
166-
<ComponentWrapper title="Toast in top left">
167-
<Button theme="secondary" id={`toast-btn-10${index}`}>
168-
Show Toast
169-
</Button>
170-
171-
<section.component title="Top left" id={`toast-10${index}`} position="top-left">
172-
Toast in top left corner
173-
</section.component>
174-
</ComponentWrapper>
175-
176-
<ComponentWrapper title="Toast in top right">
177-
<Button theme="secondary" id={`toast-btn-11${index}`}>
178-
Show Toast
179-
</Button>
180-
181-
<section.component title="Top right" id={`toast-11${index}`} position="top-right">
182-
Toast in top right corner
183-
</section.component>
184-
</ComponentWrapper>
63+
<div class="flex wrap">
64+
<Button theme="secondary" id={`toast-btn-0${index}`} theme="outline">Toast with text only</Button>
65+
<Button theme="secondary" id={`toast-btn-1${index}`}>Toast with text and title</Button>
66+
<Button theme="secondary" id={`toast-btn-2${index}`}>💡 Toast with emoji in title</Button>
67+
<Button theme="secondary" id={`toast-btn-3${index}`} theme="info">Informational toast</Button>
68+
<Button theme="secondary" id={`toast-btn-4${index}`} theme="success">Success toast</Button>
69+
<Button theme="secondary" id={`toast-btn-5${index}`} theme="warning">Warning toast</Button>
70+
<Button theme="secondary" id={`toast-btn-6${index}`} theme="alert">Alert toast</Button>
71+
<Button theme="secondary" id={`toast-btn-7${index}`}>🎨 Toast with custom icon</Button>
72+
<Button theme="secondary" id={`toast-btn-8${index}`}>🎨 Themed toast with icon</Button>
73+
<Button theme="secondary" id={`toast-btn-9${index}`}>↙️Toast in bottom left</Button>
74+
<Button theme="secondary" id={`toast-btn-10${index}`}>↖️ Toast in top left</Button>
75+
<Button theme="secondary" id={`toast-btn-11${index}`}>↗️Toast in top right</Button>
76+
</div>
77+
<div class="grid md-2 my">
78+
<section.component id={`toast-0${index}`}>
79+
Toast with only text.
80+
</section.component>
81+
<section.component title="Note" id={`toast-1${index}`}>
82+
Toast with text and title.
83+
</section.component>
84+
<section.component title="💡 Note" id={`toast-2${index}`}>
85+
Toast with emoji in title
86+
</section.component>
87+
<section.component title="Information" theme="info" id={`toast-3${index}`}>
88+
Toast with info theme.
89+
</section.component>
90+
<section.component title="Congratulations!" theme="success" id={`toast-4${index}`}>
91+
Toast with success theme.
92+
</section.component>
93+
<section.component title="Important" theme="warning" id={`toast-5${index}`}>
94+
Toast with warning theme.
95+
</section.component>
96+
<section.component title="Irreversible action" theme="alert" id={`toast-6${index}`}>
97+
Toast with alert theme.
98+
</section.component>
99+
<section.component title="Custom icons" id={`toast-7${index}`}>
100+
<Icon type="github" slot="icon" />
101+
Toast with custom icon.
102+
</section.component>
103+
<section.component title="Themed toast with icon" theme="success" id={`toast-8${index}`}>
104+
<Icon type="github" slot="icon" />
105+
Toast with theme and icon.
106+
</section.component>
107+
<section.component title="Bottom left" id={`toast-9${index}`} position="bottom-left">
108+
Toast in bottom left corner
109+
</section.component>
110+
<section.component title="Top left" id={`toast-10${index}`} position="top-left">
111+
Toast in top left corner
112+
</section.component>
113+
<section.component title="Top right" id={`toast-11${index}`} position="top-right">
114+
Toast in top right corner
115+
</section.component>
185116

186117
<ComponentWrapper title="Dismissable toast with long timeout">
187-
<Button theme="secondary" id={`dismissable-show-${index}`}>
118+
<Button id={`dismissable-show-${index}`}>
188119
Show Toast
189120
</Button>
190121

@@ -198,17 +129,15 @@ const sections = [
198129
</section.component>
199130
</ComponentWrapper>
200131

201-
<ComponentWrapper title="Programmatically setting copy">
132+
<ComponentWrapper title="Programmatically setting copy, theme & pos">
202133
<Button theme="secondary" id={`programmatic-btn-${index}`}>
203-
Show Toast
134+
Programmatically setting copy
204135
</Button>
205136

206137
<section.component title="Original title" id={`programmatic-toast-${index}`}>
207138
Original content
208139
</section.component>
209-
</ComponentWrapper>
210140

211-
<ComponentWrapper title="Programmatically setting theme & pos">
212141
<Button theme="secondary" id={`themed-btn-${index}`}>
213142
Show Toast in top-left corner
214143
</Button>

‎src/scss/global/utility.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,19 @@
1212
gap: 20px;
1313
}
1414

15+
.flex {
16+
display: flex;
17+
gap: 20px;
18+
19+
&.wrap {
20+
flex-wrap: wrap;
21+
}
22+
}
23+
24+
.my {
25+
margin: 20px auto;
26+
}
27+
1528
@include Media('md') {
1629
.grid.md-2 {
1730
grid-template-columns: repeat(2, minmax(0, 1fr));

0 commit comments

Comments
 (0)