Merge pull request #8163 from primefaces/v11-rating

New Component: Rating

Author: tanerengiiin

apps/showcase/demo/rating/basic-demo.tsx

@@ -0,0 +1,11 @@
+import { Rating } from 'primereact/rating';
+
+function BasicDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Rating />
+        </div>
+    );
+}
+
+export default BasicDemo;

apps/showcase/demo/rating/disabled-demo.tsx

@@ -0,0 +1,11 @@
+import { Rating } from 'primereact/rating';
+
+function DisabledDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Rating modelValue={3} disabled />
+        </div>
+    );
+}
+
+export default DisabledDemo;

apps/showcase/demo/rating/readonly-demo.tsx

@@ -0,0 +1,11 @@
+import { Rating } from 'primereact/rating';
+
+function ReadOnlyDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Rating modelValue={3} readOnly />
+        </div>
+    );
+}
+
+export default ReadOnlyDemo;

apps/showcase/demo/rating/stars-demo.tsx

@@ -0,0 +1,11 @@
+import { Rating } from 'primereact/rating';
+
+function StarsDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Rating stars={10} />
+        </div>
+    );
+}
+
+export default StarsDemo;

apps/showcase/demo/rating/template-demo.tsx

@@ -0,0 +1,15 @@
+import { Rating } from 'primereact/rating';
+
+function TemplateDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Rating
+                modelValue={3}
+                onIcon={<img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />}
+                offIcon={<img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />}
+            />
+        </div>
+    );
+}
+
+export default TemplateDemo;

apps/showcase/docs/components/rating/api.mdx

@@ -0,0 +1,27 @@
+---
+title: Rating API
+description: API documentation for Rating component
+component: rating
+---
+
+## Rating
+
+### Props
+
+<DocTable name="Rating" category="api" type="props" />
+
+### State
+
+<DocTable name="Rating" category="api" type="state" />
+
+### Exposes
+
+<DocTable name="Rating" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="Rating" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="Rating" category="api" type="types" />

apps/showcase/docs/components/rating/features.mdx

@@ -0,0 +1,64 @@
+---
+title: Rating
+description: Rating component is a star based selection input.
+component: rating
+---
+
+## Usage
+
+```tsx
+import { Rating } from 'primereact/rating';
+```
+
+```tsx
+<Rating />
+```
+
+## Examples
+
+### Basic
+
+Rating is used with the `modelValue` property.
+
+<DocDemoViewer name="rating:basic-demo" />
+
+### Number of Stars
+
+Number of stars to display is defined with `stars` property.
+
+<DocDemoViewer name="rating:stars-demo" />
+
+### Template
+
+Custom icons are used to override the default icons with `onIcon` and `offIcon` properties.
+
+<DocDemoViewer name="rating:template-demo" />
+
+### ReadOnly
+
+When `readOnly` is present, value cannot be edited.
+
+<DocDemoViewer name="rating:readonly-demo" />
+
+### Disabled
+
+When `disabled` is present, value cannot be edited.
+
+<DocDemoViewer name="rating:disabled-demo" />
+
+## Accessibility
+
+### Screen Reader
+
+Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the [locale](/docs/configuration#locale) API via `star` and `stars` of the `aria` property.
+
+### Keyboard Support
+
+Keyboard interaction is derived from the native browser handling of radio buttons in a group.
+
+| Key                        | Function                                                                                             |
+| -------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `tab`                      | Moves focus to the star representing the value, if there is none then first star receives the focus. |
+| `left arrow` `up arrow`    | Moves focus to the previous star, if there is none then last radio button receives the focus.        |
+| `right arrow` `down arrow` | Moves focus to the next star, if there is none then first star receives the focus.                   |
+| `space`                    | If the focused star does not represent the value, changes the value to the star value.               |

apps/showcase/docs/components/rating/pt.mdx

@@ -0,0 +1,15 @@
+---
+title: Rating Pass Through
+description: Pass Through documentation for Rating component
+component: rating
+---
+
+## Viewer
+
+Some sections may not be visible due to the availability of the particular feature.
+
+<DocPTViewer name="rating-pt" components={['Rating']} />
+
+## Rating PT Options
+
+<DocTable name="Rating" category="pt" />

apps/showcase/docs/components/rating/theming.mdx

@@ -0,0 +1,23 @@
+---
+title: Rating Theming
+description: Theming documentation for Rating component
+component: rating
+---
+
+## Styled
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="Rating" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="Rating" category="token" />
+
+## Unstyled
+
+Theming is implemented with the pass through properties in unstyled mode.

packages/headless/src/rating/index.ts

@@ -0,0 +1,2 @@
+export * from './useRating';
+export * from './useRating.props';