feat: add rating field

packages/components/src/index.ts

@@ -142,6 +142,8 @@ export { default as RadioGroup, RadioOption } from './molecules/RadioGroup'
 export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup'
 export { default as Rating } from './molecules/Rating'
 export type { RatingProps } from './molecules/Rating'
+export { default as RatingField } from './molecules/RatingField'
+export type { RatingFieldProps } from './molecules/RatingField'
 export { default as RegionBar } from './molecules/RegionBar'
 export type { RegionBarProps } from './molecules/RegionBar'
 

packages/components/src/molecules/RatingField/RatingField.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import type { MutableRefObject } from 'react'
+import { Label, Rating, type RatingProps } from '../..'
+
+interface DefaultProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * ID to identify input and corresponding label.
+   */
+  id: string
+  /**
+   * The text displayed to identify the input rating.
+   */
+  label: string
+  /**
+   * The error message displayed when an error occurs.
+   */
+  error?: string
+  /**
+   * Component's ref.
+   */
+  ratingRef?: MutableRefObject<HTMLUListElement | null>
+}
+
+export type RatingFieldProps = DefaultProps & RatingProps
+
+const RatingField = ({
+  id,
+  label,
+  error,
+  disabled,
+  length = 5,
+  value = 0,
+  onChange,
+  ratingRef,
+  testId = 'fs-rating-field',
+  ...otherProps
+}: RatingFieldProps) => {
+  const shouldDisplayError = !disabled && error && error !== ''
+
+  return (
+    <div
+      data-fs-rating-field
+      data-fs-rating-field-error={shouldDisplayError}
+      data-fs-rating-field-disabled={disabled}
+      data-testid={testId}
+    >
+      <Label data-fs-rating-field-label htmlFor={id}>
+        {label}
+      </Label>
+      <Rating
+        id={id}
+        data-fs-rating-field-input
+        ref={ratingRef}
+        length={length}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        {...otherProps}
+      />
+      {shouldDisplayError && (
+        <span data-fs-rating-field-error-message>{error}</span>
+      )}
+    </div>
+  )
+}
+
+export default RatingField

packages/components/src/molecules/RatingField/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RatingField'
+export type { RatingFieldProps } from './RatingField'

packages/ui/src/components/molecules/Rating/styles.scss

@@ -22,6 +22,7 @@
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
+
   display: flex;
 
   [data-fs-icon] {
@@ -32,15 +33,12 @@
 
   [data-fs-rating-button] {
     color: unset;
-
     &[disabled] [data-fs-button-wrapper] {
       background-color: transparent;
-
       &:hover {
         background-color: transparent;
       }
     }
-
     &[data-fs-button-variant="tertiary"]:hover,
     &[data-fs-button-variant="tertiary"]:focus,
     &[data-fs-button-variant="tertiary"]:active {
@@ -73,15 +71,15 @@
     fill: none;
   }
 
-  [data-fs-rating-item="partial"] [data-fs-rating-icon-wrapper] {
+  [data-fs-rating-item='partial'] [data-fs-rating-icon-wrapper] {
     width: calc(var(--fs-rating-icon-width) / 2);
   }
 
-  &:not([data-fs-rating-actionable="true"]) {
+  &:not([data-fs-rating-actionable='true']) {
     column-gap: var(--fs-rating-gap);
   }
 
-  &[data-fs-rating-actionable="true"] {
+  &[data-fs-rating-actionable='true'] {
     column-gap: var(--fs-rating-actionable-gap);
 
     [data-fs-rating-item="full"] svg[data-fs-icon] {
@@ -90,6 +88,7 @@
     }
 
     [data-fs-icon] {
+      color: var(--fs-rating-actionable-color);
       width: var(--fs-rating-actionable-icon-width);
       height: var(--fs-rating-actionable-icon-height);
       color: var(--fs-rating-actionable-icon-color);

packages/ui/src/components/molecules/RatingField/styles.scss

@@ -0,0 +1,42 @@
+[data-fs-rating-field] {
+  // --------------------------------------------------------
+  // Design Tokens for Rating Field
+  // --------------------------------------------------------
+
+  // Label
+  --fs-rating-field-label-color: var(--fs-color-text-light);
+  --fs-rating-field-label-size: var(--fs-text-size-2);
+  --fs-rating-field-label-line-height: var(--fs-text-size-4);
+
+  // Error
+  --fs-rating-field-error-message-size: var(--fs-text-size-legend);
+  --fs-rating-field-error-message-line-height: 1.1;
+  --fs-rating-field-error-message-color: var(--fs-color-danger-text);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+  display: flex;
+  flex-direction: column;
+
+  [data-fs-rating-field-label] {
+    font-size: var(--fs-rating-field-label-size);
+    line-height: var(--fs-rating-field-label-line-height);
+    color: var(--fs-rating-field-label-color);
+  }
+
+  [data-fs-rating-field-error-message] {
+    font-size: var(--fs-rating-field-error-message-size);
+    line-height: var(--fs-rating-field-error-message-line-height);
+    color: var(--fs-rating-field-error-message-color);
+  }
+
+  //  --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+  &[data-fs-rating-field-error="true"] {
+    [data-fs-rating-item="empty"] [data-fs-icon] {
+      color: var(--fs-rating-field-error-message-color);
+    }
+  }
+}

packages/ui/src/styles/components.scss

@@ -41,6 +41,7 @@
 @import "../components/molecules/QuantitySelector/styles";
 @import "../components/molecules/RadioField/styles";
 @import "../components/molecules/Rating/styles";
+@import "../components/molecules/RatingField/styles";
 @import "../components/molecules/RegionBar/styles";
 @import "../components/molecules/SearchAutoComplete/styles";
 @import "../components/molecules/SearchDropdown/styles";