Skip to content

Commit f534eef

Browse files
FrontendlandFrontendland
committed
✨ Add AvatarWithRating block
1 parent 5f151a4 commit f534eef

File tree

9 files changed

+248
-9
lines changed

9 files changed

+248
-9
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,7 @@ import { Accordion } from 'webcoreui/react'
321321
## Blocks
322322

323323
- [Author](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Author)
324+
- [AvatarWithRating](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/AvatarWithRating)
324325
- [BlogCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/BlogCard)
325326
- [ComponentMap](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ComponentMap)
326327
- [DeviceMockup](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/DeviceMockup)

‎src/blocks/AvatarWithRating/AvatarWithRating.astro‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
import { Avatar, Rating } from 'webcoreui/astro'
3+
4+
import type { AvatarWithRatingProps } from './avatarWithRating'
5+
import styles from './avatar-with-rating.module.scss'
6+
7+
interface Props extends AvatarWithRatingProps {}
8+
9+
const {
10+
avatar,
11+
rating,
12+
text,
13+
reverse,
14+
className
15+
} = Astro.props
16+
17+
const classes = [
18+
'flex sm items-center',
19+
styles.avatar,
20+
className
21+
]
22+
---
23+
24+
<div class:list={classes}>
25+
<Avatar {...avatar} />
26+
<div class:list={['flex xxs', reverse ? 'column-reverse' : 'column']}>
27+
<Rating {...rating} className={styles.rating} />
28+
{text && (
29+
<span class="muted" set:html={text} />
30+
)}
31+
</div>
32+
</div>

‎src/blocks/AvatarWithRating/AvatarWithRating.svelte‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script lang="ts">
2+
import { classNames } from 'webcoreui'
3+
import { Avatar, Rating } from 'webcoreui/svelte'
4+
5+
import type { AvatarWithRatingProps } from './avatarWithRating'
6+
import styles from './avatar-with-rating.module.scss'
7+
8+
const {
9+
avatar,
10+
rating,
11+
text,
12+
reverse,
13+
className
14+
}: AvatarWithRatingProps = $props()
15+
16+
const classes = classNames([
17+
'flex sm items-center',
18+
styles.avatar,
19+
className
20+
])
21+
</script>
22+
23+
<div class={classes}>
24+
<Avatar {...avatar} />
25+
<div class={classNames(['flex xxs', reverse ? 'column-reverse' : 'column'])}>
26+
<Rating {...rating} className={styles.rating} />
27+
{#if text}
28+
<span class="muted">
29+
{@html text}
30+
</span>
31+
{/if}
32+
</div>
33+
</div>

‎src/blocks/AvatarWithRating/AvatarWithRating.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react'
2+
import { classNames } from 'webcoreui'
3+
import { Avatar, Rating } from 'webcoreui/react'
4+
5+
import type { AvatarWithRatingProps } from './avatarWithRating'
6+
import styles from './avatar-with-rating.module.scss'
7+
8+
const AvatarWithRating = ({
9+
avatar,
10+
rating,
11+
text,
12+
reverse,
13+
className
14+
}: AvatarWithRatingProps) => {
15+
const classes = classNames([
16+
'flex sm items-center',
17+
styles.avatar,
18+
className
19+
])
20+
21+
return (
22+
<div className={classes}>
23+
<Avatar {...avatar} />
24+
<div className={classNames(['flex xxs', reverse ? 'column-reverse' : 'column'])}>
25+
<Rating {...rating} className={styles.rating} />
26+
{text && (
27+
<span
28+
className="muted"
29+
dangerouslySetInnerHTML={{ __html: text }}
30+
/>
31+
)}
32+
</div>
33+
</div>
34+
)
35+
}
36+
37+
export default AvatarWithRating

‎src/blocks/AvatarWithRating/avatar-with-rating.module.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@use 'webcoreui/config' as *;
2+
3+
.avatar {
4+
b {
5+
@include typography(primary);
6+
}
7+
8+
.rating span:last-of-type {
9+
@include typography(md);
10+
}
11+
}

‎src/blocks/AvatarWithRating/avatarWithRating.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import type { AvatarProps, RatingProps } from 'webcoreui/astro'
2+
3+
export type AvatarWithRatingProps = {
4+
avatar: AvatarProps
5+
rating: RatingProps
6+
text?: string
7+
reverse?: boolean
8+
className?: string
9+
}

‎src/pages/blocks/avatar-with-rating.astro‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
---
2+
import ComponentWrapper from '@static/ComponentWrapper.astro'
3+
import Layout from '@static/Layout.astro'
4+
5+
import AstroAvatarWithRating from '@blocks/AvatarWithRating/AvatarWithRating.astro'
6+
import SvelteAvatarWithRating from '@blocks/AvatarWithRating/AvatarWithRating.svelte'
7+
import ReactAvatarWithRating from '@blocks/AvatarWithRating/AvatarWithRating.tsx'
8+
9+
import { getSections } from '@helpers'
10+
import { avatarGroup } from '@data'
11+
12+
const sections = getSections({
13+
title: 'examples',
14+
components: [
15+
AstroAvatarWithRating,
16+
SvelteAvatarWithRating,
17+
ReactAvatarWithRating
18+
]
19+
})
20+
---
21+
22+
<Layout>
23+
<h1>Avatar with Rating</h1>
24+
<h2>
25+
<a href="/blocks">
26+
{'<-'} Back to all blocks
27+
</a>
28+
</h2>
29+
30+
<div class="grid xs-2 sm-3">
31+
<ComponentWrapper type="Astro">
32+
<AstroAvatarWithRating
33+
avatar={{ img: avatarGroup }}
34+
rating={{ score: 5, color: 'var(--w-color-success)' }}
35+
text="<b>123 students</b> enrolled"
36+
/>
37+
</ComponentWrapper>
38+
<ComponentWrapper type="Svelte">
39+
<SvelteAvatarWithRating
40+
avatar={{ img: avatarGroup }}
41+
rating={{ score: 5, color: 'var(--w-color-warning)' }}
42+
text="<b>123 students</b> enrolled"
43+
/>
44+
</ComponentWrapper>
45+
<ComponentWrapper type="React">
46+
<ReactAvatarWithRating
47+
avatar={{ img: avatarGroup }}
48+
rating={{ score: 5, color: 'var(--w-color-info)' }}
49+
text="<b>123 students</b> enrolled"
50+
/>
51+
</ComponentWrapper>
52+
</div>
53+
54+
{sections.map((section: any) => (
55+
<br />
56+
<h2>{section.title}</h2>
57+
<div class="grid xs-2 sm-3">
58+
<ComponentWrapper title="Default with minimal setup">
59+
<section.component
60+
avatar={{ img: avatarGroup }}
61+
rating={{ score: 5 }}
62+
/>
63+
</ComponentWrapper>
64+
65+
<ComponentWrapper title="With text">
66+
<section.component
67+
avatar={{ img: avatarGroup }}
68+
rating={{ score: 5, color: 'var(--w-color-warning)' }}
69+
text="<b>123 students</b> enrolled"
70+
/>
71+
</ComponentWrapper>
72+
73+
<ComponentWrapper title="Reverse order">
74+
<section.component
75+
avatar={{ img: avatarGroup }}
76+
rating={{ score: 5, color: 'var(--w-color-warning)' }}
77+
text="<b>123 students</b> enrolled"
78+
reverse={true}
79+
/>
80+
</ComponentWrapper>
81+
82+
<ComponentWrapper title="Increasing avatars">
83+
<section.component
84+
avatar={{ img: avatarGroup.slice(0, 4), size: [20, 30, 40, 50] }}
85+
rating={{ score: 5, color: 'var(--w-color-warning)' }}
86+
text="<b>123 students</b> enrolled"
87+
reverse={true}
88+
/>
89+
</ComponentWrapper>
90+
91+
<ComponentWrapper title="Rating text">
92+
<section.component
93+
avatar={{ img: avatarGroup.slice(0, 3) }}
94+
text="<b>123 students</b> enrolled"
95+
reverse={true}
96+
rating={{
97+
score: 4.4,
98+
color: 'var(--w-color-warning)',
99+
showText: true,
100+
emptyColor: '#555',
101+
outline: false,
102+
text: 'Rated {0}/{1}'
103+
}}
104+
/>
105+
</ComponentWrapper>
106+
</div>
107+
))}
108+
</Layout>

‎src/pages/blocks/expandable-tables.astro‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
import ComponentWrapper from '@static/ComponentWrapper.astro'
33
import Layout from '@static/Layout.astro'
44
5-
import Card from '@components/Card/Card.astro'
6-
75
import AstroExpandableTable from '@blocks/ExpandableTable/ExpandableTable.astro'
86
import SvelteExpandableTable from '@blocks/ExpandableTable/ExpandableTable.svelte'
97
import ReactExpandableTable from '@blocks/ExpandableTable/ExpandableTable.tsx'
@@ -68,22 +66,22 @@ const data = [
6866
<br />
6967
<h2>{section.title}</h2>
7068
<div class="grid xs-2 sm-3">
71-
<Card title="Default">
69+
<ComponentWrapper title="Default">
7270
<section.component
7371
headings={headings}
7472
data={data}
7573
/>
76-
</Card>
74+
</ComponentWrapper>
7775

78-
<Card title="Custom number of visible rows">
76+
<ComponentWrapper title="Custom number of visible rows">
7977
<section.component
8078
numberOfVisibleRows={3}
8179
headings={headings}
8280
data={data}
8381
/>
84-
</Card>
82+
</ComponentWrapper>
8583

86-
<Card title="Custom buttons">
84+
<ComponentWrapper title="Custom buttons">
8785
<section.component
8886
numberOfVisibleRows={3}
8987
expandButtonLabel="Toggle More"
@@ -92,7 +90,7 @@ const data = [
9290
headings={headings}
9391
data={data}
9492
/>
95-
</Card>
93+
</ComponentWrapper>
9694
</div>
9795
))}
9896
</Layout>

‎src/pages/blocks/index.astro‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Layout from '@static/Layout.astro'
55
import Link from '@static/Link.astro'
66
77
import Author from '@blocks/Author/Author.astro'
8+
import AvatarWithRating from '@blocks/AvatarWithRating/AvatarWithRating.astro'
89
import BlogCard from '@blocks/BlogCard/BlogCard.astro'
910
import ComponentMap from '@blocks/ComponentMap/ComponentMap.astro'
1011
import DeviceMockup from '@blocks/DeviceMockup/DeviceMockup.astro'
@@ -25,7 +26,7 @@ import Team from '@blocks/Team/Team.astro'
2526
import Tiles from '@blocks/Tiles/Tiles.astro'
2627
import User from '@blocks/User/User.astro'
2728
28-
import { gridWithIconsItems, members } from '@data'
29+
import { avatarGroup, gridWithIconsItems, members } from '@data'
2930
---
3031

3132
<Layout docs="/blocks/introduction">
@@ -112,6 +113,15 @@ import { gridWithIconsItems, members } from '@data'
112113
/>
113114
<Link href="/blocks/team" />
114115
</div>
116+
117+
<Card title="Avatar with Rating">
118+
<AvatarWithRating
119+
avatar={{ img: avatarGroup.slice(0, 3) }}
120+
rating={{ score: 5, color: 'var(--w-color-warning)' }}
121+
text="<b>123 students</b> already enrolled"
122+
/>
123+
<Link href="/blocks/avatar-with-rating" />
124+
</Card>
115125
</div>
116126
<div class="block-column flex column">
117127
<Card title="User with Rating">

0 commit comments

Comments
 (0)