Skip to content

Commit 1cb35c4

Browse files
webstackdevwebstackdev
committed
Update Button component to accept data attributes, update Calendar component to use Button components
1 parent 97dc827 commit 1cb35c4

5 files changed

Lines changed: 56 additions & 57 deletions

File tree

‎src/components/BugReporter/client/__fixtures__/bugReporter.fixture.astro‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
import BugReporterComponent from '@components/BugReporter/index.astro'
3-
import Icon from '@components/Icon/index.astro'
3+
import Button from '@components/Button/index.astro'
44
---
55

6-
<button
6+
<Button
77
id="bugReporterTrigger"
88
type="button"
9-
aria-label="Report a bug"
10-
>
11-
<span class="sr-only">Report a bug</span>
12-
<span><Icon icon="bug" color="inherit" /></span>
13-
</button>
9+
variant="icon"
10+
icon="bug"
11+
iconPosition="only"
12+
ariaLabel="Report a bug"
13+
/>
1414

1515
<BugReporterComponent triggerId="bugReporterTrigger" />

‎src/components/BugReporter/index.astro‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*
66
* The trigger button lives in the Footer (near the RSS icon).
77
*/
8+
import Button from '@components/Button/index.astro'
89
910
const {
1011
triggerId = 'bugReporterTrigger',
@@ -33,13 +34,13 @@ const {
3334
>
3435
<div class="flex items-start justify-between gap-4">
3536
<h2 class="text-xl font-bold">Report a bug</h2>
36-
<button
37+
<Button
3738
id={closeButtonId}
3839
type="button"
39-
class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
40-
>
41-
Close
42-
</button>
40+
variant="secondary"
41+
size="small"
42+
text="Close"
43+
/>
4344
</div>
4445

4546
<p class="mt-2 text-base">
@@ -82,20 +83,18 @@ const {
8283
<p id={statusId} class="mt-3 hidden" aria-live="polite"></p>
8384

8485
<div class="mt-4 flex items-center gap-3">
85-
<button
86+
<Button
8687
type="submit"
87-
class="inline-flex items-center justify-center rounded-md px-4 py-2 bg-spotlight text-content-inverse hover:opacity-90 focus:outline-none disabled:opacity-60"
88-
>
89-
Send
90-
</button>
88+
text="Send"
89+
/>
9190

92-
<button
91+
<Button
9392
id={cancelButtonId}
9493
type="button"
95-
class="hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none"
96-
>
97-
Cancel
98-
</button>
94+
variant="secondary"
95+
size="small"
96+
text="Cancel"
97+
/>
9998
</div>
10099
</form>
101100
</dialog>

‎src/components/Button/server/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export interface ButtonProps {
2626
icon?: string
2727
iconPosition?: IconPosition
2828
iconSize?: number
29+
[key: `data-${string}`]: string | number | boolean | undefined
2930
}
3031

3132
const ICON_ONLY_POSITION: IconPosition = 'only'

‎src/components/Calendar/index.astro‎

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
---
2-
import Icon from '@components/Icon/index.astro'
2+
import Button from '@components/Button/index.astro'
33
44
const { ...rest } = Astro.props
55
---
66

77
<add-to-calendar {...rest} data-testid="add-to-calendar">
8-
<button
8+
<Button
99
type="button"
10-
data-calendar-trigger
10+
data-calendar-trigger={true}
1111
aria-expanded="false"
12-
class="inline-flex items-center text-content hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
12+
variant="secondary"
13+
size="small"
14+
icon="calendar-generic-ical"
15+
iconSize={5}
16+
class="normal-case"
1317
>
14-
<span class="[&_.icon]:h-5 [&_.icon]:w-5">
15-
<Icon icon="calendar-generic-ical" color="inherit" />
16-
</span>
1718
<span class="ml-2"><slot>Add to calendar</slot></span>
18-
</button>
19+
</Button>
1920

2021
<div
2122
data-calendar-menu
@@ -24,40 +25,38 @@ const { ...rest } = Astro.props
2425
aria-label="Add this event to your calendar"
2526
>
2627
<div class="flex flex-col gap-2">
27-
<a
28+
<Button
2829
data-calendar-link="google"
2930
href="https://calendar.google.com/calendar/render"
30-
rel="noopener"
31-
class="flex items-center text-content hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
32-
>
33-
<span class="[&_.icon]:h-5 [&_.icon]:w-5">
34-
<Icon icon="calendar-google" color="inherit" />
35-
</span>
36-
<span class="ml-2">Google Calendar</span>
37-
</a>
31+
variant="secondary"
32+
size="small"
33+
icon="calendar-google"
34+
iconSize={5}
35+
text="Google Calendar"
36+
class="normal-case"
37+
/>
3838

39-
<a
39+
<Button
4040
data-calendar-link="outlook"
4141
href="https://outlook.office.com/calendar/0/deeplink/compose"
42-
rel="noopener"
43-
class="flex items-center text-content hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
44-
>
45-
<span class="[&_.icon]:h-5 [&_.icon]:w-5">
46-
<Icon icon="calendar-outlook" color="inherit" />
47-
</span>
48-
<span class="ml-2">Outlook</span>
49-
</a>
42+
variant="secondary"
43+
size="small"
44+
icon="calendar-outlook"
45+
iconSize={5}
46+
text="Outlook"
47+
class="normal-case"
48+
/>
5049

51-
<button
50+
<Button
5251
type="button"
53-
data-calendar-download-ics
54-
class="flex items-center text-content hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none [&_.icon]:fill-content! [&_.icon]:stroke-icons! hover:[&_.icon]:fill-secondary! hover:[&_.icon]:stroke-secondary! focus:[&_.icon]:fill-secondary! focus:[&_.icon]:stroke-secondary!"
55-
>
56-
<span class="[&_.icon]:h-5 [&_.icon]:w-5">
57-
<Icon icon="calendar_apple" color="inherit" />
58-
</span>
59-
<span class="ml-2">Download .ics</span>
60-
</button>
52+
data-calendar-download-ics={true}
53+
variant="secondary"
54+
size="small"
55+
icon="calendar-apple"
56+
iconSize={5}
57+
text="Download .ics"
58+
class="normal-case"
59+
/>
6160
</div>
6261
</div>
6362
</add-to-calendar>

src/components/Icon/icons/calendar_apple.astro renamed to src/components/Icon/icons/calendar-apple.astro

File renamed without changes.

0 commit comments

Comments
 (0)