✨ Add AvatarWithRating to Hero block

Author: Frontendland

src/blocks/Hero/Hero.astro

@@ -7,32 +7,35 @@ import {
     type IconProps
 } from 'webcoreui/astro'
 
+import AvatarWithRating from '@blocks/AvatarWithRating/AvatarWithRating.astro'
+
 import type { HeroProps } from './hero'
 import styles from './hero.module.scss'
 
 interface Props extends HeroProps {}
 
 const {
+    badge,
     heading,
     subHeading,
     buttons,
-    badge,
+    avatarWithRating,
     image,
     reverse,
     className
 } = Astro.props
 
 const classes = [
     styles.hero,
-    reverse && styles.reverse,
-    image?.src && styles.flex,
+    image?.src && 'flex column justify-between sm-row sm-items-center',
+    reverse && 'sm-row-reverse',
     className
 ]
 ---
 
 <section class:list={classes}>
     <ConditionalWrapper condition={!!image?.src}>
-        <div slot="wrapper">children</div>
+        <div slot="wrapper" class={styles.wrapper}>children</div>
         {badge && (
             <Badge {...badge} className={styles.badge}>
                 {badge.text}
@@ -58,6 +61,13 @@ const classes = [
                 ))}
             </div>
         )}
+
+        {avatarWithRating && (
+            <AvatarWithRating
+                {...avatarWithRating}
+                className={styles.avatar}
+            />
+        )}
     </ConditionalWrapper>
     {image?.src && (
         <img

src/blocks/Hero/Hero.svelte

@@ -6,29 +6,32 @@
         ConditionalWrapper
     } from 'webcoreui/svelte'
 
+    import AvatarWithRating from '@blocks/AvatarWithRating/AvatarWithRating.svelte'
+
     import type { HeroProps } from './hero'
     import styles from './hero.module.scss'
 
     const {
+        badge,
         heading,
         subHeading,
         buttons,
-        badge,
+        avatarWithRating,
         image,
         reverse,
         className
     }: HeroProps = $props()
 
     const classes = classNames([
         styles.hero,
-        reverse && styles.reverse,
-        image?.src && styles.flex,
+        image?.src && 'flex column justify-between sm-row sm-items-center',
+        reverse && 'sm-row-reverse',
         className
     ])
 </script>
 
 <section class={classes}>
-    <ConditionalWrapper condition={!!image?.src}>
+    <ConditionalWrapper condition={!!image?.src} class={styles.wrapper}>
         {#if badge}
             <Badge {...badge} className={styles.badge}>
                 {badge.text}
@@ -51,6 +54,13 @@
                 {/each}
             </div>
         {/if}
+
+        {#if avatarWithRating}
+            <AvatarWithRating
+                {...avatarWithRating}
+                className={styles.avatar}
+            />
+        {/if}
     </ConditionalWrapper>
     {#if image?.src}
         <img

src/blocks/Hero/Hero.tsx

@@ -6,28 +6,34 @@ import {
     ConditionalWrapper
 } from 'webcoreui/react'
 
+import AvatarWithRating from '@blocks/AvatarWithRating/AvatarWithRating.tsx'
+
 import type { HeroProps } from './hero'
 import styles from './hero.module.scss'
 
 const Hero = ({
+    badge,
     heading,
     subHeading,
     buttons,
-    badge,
+    avatarWithRating,
     image,
     reverse,
     className
 }: HeroProps) => {
     const classes = classNames([
         styles.hero,
-        reverse && styles.reverse,
-        image?.src && styles.flex,
+        image?.src && 'flex column justify-between sm-row sm-items-center',
+        reverse && 'sm-row-reverse',
         className
     ])
 
     return (
         <section className={classes}>
-            <ConditionalWrapper condition={!!image?.src} wrapper={children => <div>{children}</div>}>
+            <ConditionalWrapper
+                condition={!!image?.src}
+                wrapper={children => <div className={styles.wrapper}>{children}</div>}
+            >
                 {badge && (
                     <Badge {...badge} className={styles.badge}>
                         {badge.text}
@@ -51,6 +57,13 @@ const Hero = ({
                         ))}
                     </div>
                 )}
+
+                {avatarWithRating && (
+                    <AvatarWithRating
+                        {...avatarWithRating}
+                        className={styles.avatar}
+                    />
+                )}
             </ConditionalWrapper>
             {image?.src && (
                 <img

src/blocks/Hero/hero.module.scss

@@ -1,12 +1,8 @@
 @use 'webcoreui/config' as *;
 
 .hero {
-    &.flex {
-        @include layout(flex, h-between, column, default);
-
-        div, img {
-            flex: 1;
-        }
+    .wrapper, img {
+        flex: 1;
     }
 
     h1 {
@@ -31,23 +27,7 @@
         @include spacing(mb-xs);
     }
 
-    .cta {
+    .cta, .avatar {
         @include spacing(mt-md);
     }
 }
-
-@include media(sm) {
-    .hero {
-        &:not(.reverse) {
-            @include layout(v-center);
-        }
-
-        &.flex {
-            @include layout(row);
-        }
-
-        &.reverse {
-            @include layout(row-reverse);
-        }
-    }
-}

src/blocks/Hero/hero.ts

@@ -4,16 +4,19 @@ import type {
     IconProps
 } from 'webcoreui/astro'
 
+import type { AvatarWithRatingProps } from '@blocks/AvatarWithRating/avatarWithRating'
+
 export type HeroProps = {
+    badge?: {
+        text: string
+    } & BadgeProps | null
     heading: string
     subHeading?: string
     buttons?: ({
         text: string
         icon?: IconProps['type'] | string
     } & ButtonProps)[]
-    badge?: {
-        text: string
-    } & BadgeProps | null
+    avatarWithRating?: AvatarWithRatingProps
     image?: {
         src: string
         alt: string

src/pages/blocks/hero.astro

@@ -6,6 +6,8 @@ import Layout from '@static/Layout.astro'
 import AstroHero from '@blocks/Hero/Hero.astro'
 import SvelteHero from '@blocks/Hero/Hero.svelte'
 import ReactHero from '@blocks/Hero/Hero.tsx'
+
+import { avatarGroup } from '@data'
 ---
 
 <Layout docs="/blocks/hero">
@@ -28,6 +30,11 @@ import ReactHero from '@blocks/Hero/Hero.tsx'
             theme: 'outline',
             text: 'New releases'
         }}
+        avatarWithRating={{
+            avatar: { img: avatarGroup },
+            rating: { score: 5, color: 'var(--w-color-success)' },
+            text: '<b>123 students</b> already enrolled'
+        }}
         image={{
             src: '/img/placeholder1.png',
             alt: 'Banner',
@@ -50,6 +57,11 @@ import ReactHero from '@blocks/Hero/Hero.tsx'
             theme: 'alert',
             text: 'New releases'
         }}
+        avatarWithRating={{
+            avatar: { img: avatarGroup },
+            rating: { score: 5, color: 'var(--w-color-alert)' },
+            text: '<b>123 students</b> already enrolled'
+        }}
         image={{
             src: '/img/placeholder2.png',
             alt: 'Banner',
@@ -73,6 +85,11 @@ import ReactHero from '@blocks/Hero/Hero.tsx'
             theme: 'info',
             text: 'New releases'
         }}
+        avatarWithRating={{
+            avatar: { img: avatarGroup },
+            rating: { score: 5, color: 'var(--w-color-info)' },
+            text: '<b>123 students</b> already enrolled'
+        }}
         image={{
             src: '/img/placeholder3.png',
             alt: 'Banner',