docs(rating): migrate docs to storybook and stories cleanup

Adjust some stories and controls to improve documentation and make sure
that any docs site documentation is represented.

docs(rating): fix disabled stars not showing in storybook

The Storybook template was excluding the is-selected and is-currentValue
classes for disabled and read-only, when it shouldn't have been; this
now matches the markup on the docs site and fixes the disabled rating
not showing filled stars.

components/rating/stories/rating.stories.js

@@ -6,6 +6,8 @@ import { Template } from "./template.js";
 
 /**
  * A rating element is used to display or collect a user's rating of an item as represented by a number of stars.
+ * 
+ * All active stars have the class `is-selected` applied. Additionally, the current value (the last active star) has the class `is-currentValue` applied.
  */
 export default {
 	title: "Rating",
@@ -17,15 +19,18 @@ export default {
 		isReadOnly,
 		max: {
 			name: "Maximum value",
+			description: "The total number of stars. Star ratings should always have 5 available stars. This shouldn't be increased or decreased to fit various containers.",
 			type: { name: "number" },
 			table: {
 				type: { summary: "number" },
 				category: "Content",
+				disable: true,
 			},
 			control: { type: "number" },
 		},
 		value: {
 			name: "Value",
+			description: "The current rating, represented by the number of selected stars.",
 			type: { name: "number" },
 			table: {
 				type: { summary: "number" },
@@ -38,6 +43,8 @@ export default {
 	args: {
 		rootClass: "spectrum-Rating",
 		isDisabled: false,
+		isEmphasized: false,
+		isReadOnly: false,
 		max: 5,
 		value: 3,
 	},
@@ -46,6 +53,9 @@ export default {
 	},
 };
 
+/**
+ * A initial value of three is used for the following examples, to demonstrate both active and inactive stars.
+ */
 export const Default = RatingGroup.bind({});
 Default.args = {};
 
@@ -60,7 +70,12 @@ WithForcedColors.parameters = {
 };
 
 // ********* DOCS ONLY ********* //
+
+/**
+ * A non-interactive rating.
+ */
 export const ReadOnly = Template.bind({});
+ReadOnly.storyName = "Read-only";
 ReadOnly.tags = ["!dev"];
 ReadOnly.args = {
 	isReadOnly: true,
@@ -79,6 +94,7 @@ Emphasized.parameters = {
 };
 
 export const ReadOnlyEmphasized = Template.bind({});
+ReadOnlyEmphasized.storyName = "Read-only, emphasized";
 ReadOnlyEmphasized.tags = ["!dev"];
 ReadOnlyEmphasized.args = {
 	isEmphasized: true,

components/rating/stories/rating.test.js

@@ -22,7 +22,7 @@ export const RatingGroup = Variants({
 			isFocused: true,
 		},
 		{
-			testHeading: "Read only",
+			testHeading: "Read-only",
 			isReadOnly: true,
 		},
 	]

components/rating/stories/template.js

@@ -66,9 +66,8 @@ export const Template = ({
 					<span
 						class=${classMap({
 							[`${rootClass}-icon`]: true,
-							"is-selected": !isDisabled && idx <= value - 1,
-							"is-currentValue":
-								!isDisabled && !isReadOnly && idx === value - 1,
+							"is-selected": idx <= value - 1,
+							"is-currentValue": idx === value - 1,
 						})}
 						@click=${function() {
 							updateArgs({ value: idx + 1, isFocused: true });