Skip to content

Commit 1098d75

Browse files
FrontendlandFrontendland
committed
✨ Add Svelte + React card components
1 parent 47d5086 commit 1098d75

File tree

8 files changed

+197
-70
lines changed

8 files changed

+197
-70
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,3 +134,4 @@ import { Accordion } from 'webcoreui/react'
134134
- [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)
135135
- [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
136136
- [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
137+
- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)

‎src/components/Accordion/Accordion.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const {
99
} = Astro.props
1010
---
1111

12-
<ul class="w-accordion">
12+
<ul class="w-accordion" data-id="w-accordion">
1313
{items.map((item: AccordionProps['items'][0]) => (
1414
<li>
1515
<div class="accordion-title">
@@ -26,7 +26,7 @@ const {
2626
</ul>
2727

2828
<script>
29-
const accordions = document.querySelectorAll('.w-accordion')
29+
const accordions = document.querySelectorAll('[data-id="w-accordion"]')
3030

3131
Array.from(accordions).forEach(element => {
3232
element.addEventListener('click', event => {

‎src/components/Card/Card.astro

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
---
2-
interface Props {
3-
element?: string
4-
title?: string
5-
compact?: boolean
6-
className?: string
7-
secondary?: boolean
8-
[key: string]: any
9-
}
2+
import type { CardProps } from './card'
3+
4+
interface Props extends CardProps {}
105
116
const {
127
element = 'section',
@@ -19,6 +14,7 @@ const {
1914
} = Astro.props
2015
2116
const classes = [
17+
'w-card',
2218
className,
2319
secondary && 'secondary',
2420
'card'

‎src/components/Card/Card.svelte

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script lang="ts">
2+
import type { CardProps } from './card'
3+
4+
export let element: CardProps['element'] = 'section'
5+
export let title: CardProps['title'] = ''
6+
export let titleTag: CardProps['titleTag'] = 'span'
7+
export let compact: CardProps['compact'] = false
8+
export let className: CardProps['className'] = ''
9+
export let secondary: CardProps['secondary'] = false
10+
11+
const classes = [
12+
'w-card',
13+
className,
14+
secondary && 'secondary',
15+
'card'
16+
].filter(Boolean).join(' ')
17+
</script>
18+
19+
<svelte:element this={element} class={classes} {...$$restProps}>
20+
{#if title}
21+
<svelte:element this={titleTag} class="card-title">
22+
{title}
23+
</svelte:element>
24+
{/if}
25+
<div class="card-body" class:compact>
26+
{#if compact && !secondary}
27+
<div class="card-wrapper"><slot /></div>
28+
{:else}
29+
<slot />
30+
{/if}
31+
</div>
32+
</svelte:element>
33+
34+
<style lang="scss">
35+
@import './card.scss';
36+
</style>

‎src/components/Card/Card.tsx

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,37 @@
11
import React from 'react'
2+
import type { CardProps } from './card'
3+
import './card.scss'
24

3-
const Card = () => <div />
5+
const Card = ({
6+
Element = 'section',
7+
title,
8+
TitleTag = 'span',
9+
compact,
10+
className,
11+
secondary,
12+
children,
13+
...rest
14+
}: CardProps) => {
15+
const classes = [
16+
'w-card',
17+
className,
18+
secondary && 'secondary',
19+
'card'
20+
].filter(Boolean).join(' ')
21+
22+
return (
23+
<Element className={classes} {...rest}>
24+
{title && (
25+
<TitleTag className="card-title">{title}</TitleTag>
26+
)}
27+
<div className={compact ? 'card-body compact' : 'card-body'}>
28+
{compact && !secondary
29+
? <div className="card-wrapper">{children}</div>
30+
: children
31+
}
32+
</div>
33+
</Element>
34+
)
35+
}
436

537
export default Card

‎src/components/Card/card.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1-
export type CardProps = {}
1+
export type CardProps = {
2+
element?: string
3+
title?: string
4+
compact?: boolean
5+
className?: string
6+
secondary?: boolean
7+
[key: string]: any
8+
}

‎src/pages/button.astro

Lines changed: 68 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,25 @@ import Icon from '@components/Icon/Icon.astro'
66
import AstroButton from '@components/Button/Button.astro'
77
import SvelteButton from '@components/Button/Button.svelte'
88
import ReactButton from '@components/Button/Button.tsx'
9+
10+
const sections = [
11+
{
12+
title: 'Astro buttons',
13+
component: AstroButton
14+
},
15+
{
16+
title: 'Svelte buttons',
17+
component: SvelteButton
18+
},
19+
{
20+
title: 'React buttons',
21+
component: ReactButton
22+
}
23+
]
924
---
1025

1126
<Layout>
1227
<h1>Button</h1>
13-
1428
<div class="grid md-2 lg-3">
1529
<ComponentWrapper type="Astro">
1630
<AstroButton>Button in Astro</AstroButton>
@@ -26,45 +40,66 @@ import ReactButton from '@components/Button/Button.tsx'
2640
<ReactButton theme="info">
2741
Button in React
2842
</ReactButton>
29-
</ComponentWrapper>
43+
</ComponentWrapper>
44+
</div>
3045

31-
<ComponentWrapper title="Secondary">
32-
<AstroButton theme="secondary">Secondary</AstroButton>
33-
</ComponentWrapper>
46+
{sections.map(section => (
47+
<h1>{section.title}</h1>
48+
<div class="grid md-2 lg-3">
49+
<ComponentWrapper title="Secondary">
50+
<section.component theme="secondary">
51+
Secondary
52+
</section.component>
53+
</ComponentWrapper>
3454

35-
<ComponentWrapper title="Outline">
36-
<AstroButton theme="outline">Outline</AstroButton>
37-
</ComponentWrapper>
55+
<ComponentWrapper title="Outline">
56+
<section.component theme="outline">
57+
Outline
58+
</section.component>
59+
</ComponentWrapper>
3860

39-
<ComponentWrapper title="Flat">
40-
<AstroButton theme="flat">Flat</AstroButton>
41-
</ComponentWrapper>
61+
<ComponentWrapper title="Flat">
62+
<section.component theme="flat">
63+
Flat
64+
</section.component>
65+
</ComponentWrapper>
4266

43-
<ComponentWrapper title="Disabled">
44-
<AstroButton disabled>Disabled</AstroButton>
45-
</ComponentWrapper>
67+
<ComponentWrapper title="Disabled">
68+
<section.component disabled>
69+
Disabled
70+
</section.component>
71+
</ComponentWrapper>
4672

47-
<ComponentWrapper title="With Icon">
48-
<AstroButton theme="secondary">
49-
<Icon type="github" size={20} />
50-
With Icon
51-
</AstroButton>
52-
</ComponentWrapper>
73+
<ComponentWrapper title="With Icon">
74+
<section.component theme="secondary">
75+
<Icon type="github" size={20} />
76+
With Icon
77+
</section.component>
78+
</ComponentWrapper>
5379

54-
<ComponentWrapper title="Info">
55-
<AstroButton theme="info">Info</AstroButton>
56-
</ComponentWrapper>
80+
<ComponentWrapper title="Info">
81+
<section.component theme="info">
82+
Info
83+
</section.component>
84+
</ComponentWrapper>
5785

58-
<ComponentWrapper title="Success">
59-
<AstroButton theme="success">Success</AstroButton>
60-
</ComponentWrapper>
86+
<ComponentWrapper title="Success">
87+
<section.component theme="success">
88+
Success
89+
</section.component>
90+
</ComponentWrapper>
6191

62-
<ComponentWrapper title="Warning">
63-
<AstroButton theme="warning">Warning</AstroButton>
64-
</ComponentWrapper>
92+
<ComponentWrapper title="Warning">
93+
<section.component theme="warning">
94+
Warning
95+
</section.component>
96+
</ComponentWrapper>
6597

66-
<ComponentWrapper title="Alert">
67-
<AstroButton theme="alert">Alert</AstroButton>
68-
</ComponentWrapper>
69-
</div>
98+
<ComponentWrapper title="Alert">
99+
<section.component theme="alert">
100+
Alert
101+
</section.component>
102+
</ComponentWrapper>
103+
</div>
104+
))}
70105
</Layout>

‎src/pages/card.astro

Lines changed: 45 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,23 @@
22
import Layout from '@static/Layout.astro'
33
44
import AstroCard from '@components/Card/Card.astro'
5-
import SvelteButton from '@components/Button/Button.svelte'
6-
import { Button as ReactButton } from '@components/Button/Button.tsx'
5+
import SvelteCard from '@components/Card/Card.svelte'
6+
import ReactCard from '@components/Card/Card.tsx'
7+
8+
const sections = [
9+
{
10+
title: 'Astro cards',
11+
component: AstroCard
12+
},
13+
{
14+
title: 'Svelte cards',
15+
component: SvelteCard
16+
},
17+
{
18+
title: 'React cards',
19+
component: ReactCard
20+
}
21+
]
722
---
823

924
<Layout>
@@ -14,38 +29,43 @@ import { Button as ReactButton } from '@components/Button/Button.tsx'
1429
Card component using <span class="a">Astro</span>
1530
</AstroCard>
1631

17-
<AstroCard compact={true}>
32+
<SvelteCard compact={true}>
1833
Card component using <span class="s">Svelte</span>
19-
</AstroCard>
34+
</SvelteCard>
2035

21-
<AstroCard compact={true}>
36+
<ReactCard compact={true}>
2237
Card component using <span class="r">React</span>
23-
</AstroCard>
38+
</ReactCard>
39+
</div>
2440

25-
<AstroCard title="Titled card" compact={true}>
26-
Card with title
27-
</AstroCard>
41+
{sections.map(section => (
42+
<h1>{section.title}</h1>
43+
<div class="grid md-2 lg-3">
44+
<section.component title="Titled card" compact={true}>
45+
Card with title
46+
</section.component>
2847

29-
<AstroCard title="Spacious">
30-
Spacious card with title
31-
</AstroCard>
48+
<section.component title="Spacious">
49+
Spacious card with title
50+
</section.component>
3251

33-
<AstroCard>
34-
Spacious card without title
35-
</AstroCard>
52+
<section.component>
53+
Spacious card without title
54+
</section.component>
3655

37-
<AstroCard title="Secondary" secondary={true}>
38-
Secondary card with title
39-
</AstroCard>
56+
<section.component title="Secondary" secondary={true}>
57+
Secondary card with title
58+
</section.component>
4059

41-
<AstroCard secondary={true}>
42-
Secondary card without title
43-
</AstroCard>
60+
<section.component secondary={true}>
61+
Secondary card without title
62+
</section.component>
4463

45-
<AstroCard title="Bolded" titleTag="strong">
46-
Card with bold title using <code>strong</code> tag.
47-
</AstroCard>
48-
</div>
64+
<section.component title="Bolded" titleTag="strong">
65+
Card with bold title using <code>strong</code> tag.
66+
</section.component>
67+
</div>
68+
))}
4969
</Layout>
5070

5171
<style lang="scss">

0 commit comments

Comments
 (0)