Skip to content

README.md

Latest commit

 

History

History
81 lines (65 loc) · 2.25 KB

README.md

File metadata and controls

81 lines (65 loc) · 2.25 KB
Raw

RatingBlock

Universal rating block with title and star rating.

Features

  • Title with support for React elements (text, links, formatted content)
  • Integrated 5-star rating component
  • Configurable star size (s, m, l)
  • Responsive layout with border and padding
  • Link styling support in title

Usage

import {RatingBlock} from '@gravity-ui/aikit';

function MyComponent() {
  const [rating, setRating] = useState<number>();

  return (
    <RatingBlock
      title="Rate the assistant response:"
      value={rating}
      onChange={setRating}
      size="l"
    />
  );
}

Dynamic title with link

<RatingBlock
  title={
    rating && rating <= 2 ? (
      <>
        What went wrong? <a href="#feedback">Go to survey</a>
      </>
    ) : (
      'Rate the assistant response:'
    )
  }
  value={rating}
  onChange={setRating}
/>

Props

Prop Type Default Description
title React.ReactNode - Title text or React element
value number - Current rating value (1-5)
onChange (rating) => void - Callback when rating changes
size 's' | 'm' | 'l' 'l' Star size
className string - Additional CSS class
qa string - QA/test identifier

Styling

The component uses Gravity UI design tokens:

  • --g-spacing-2 - Block padding (8px)
  • --g-spacing-1 - Header left padding (4px)
  • --g-spacing-2 - Gap between title sections (8px)
  • --g-spacing-3 - Gap in right section (12px)
  • --g-color-line-generic - Border color
  • --g-border-radius-xl - Border radius (10px)
  • --g-text-body-1 - Title font size and line height
  • --g-color-text-primary - Title text color
  • --g-color-text-link - Link color in title

Use Cases

  • Customer satisfaction (CSAT) surveys - AI assistant feedback collection
  • Product reviews - E-commerce rating forms
  • Content rating - Article, video, tutorial evaluation
  • Service feedback - Support ticket satisfaction surveys
  • Educational - Teacher or course ratings