feat: create RatingField component

packages/components/src/index.ts

@@ -67,12 +67,8 @@ export type {
   CarouselBulletsProps,
 } from './molecules/Carousel'
 
-export {
-  default as Card
-} from './molecules/Card'
-export type {
-  CardProps
-} from './molecules/Card'
+export { default as Card } from './molecules/Card'
+export type { CardProps } from './molecules/Card'
 
 export {
   default as CartItem,
@@ -146,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'
 
@@ -369,5 +367,5 @@ export {
 export type {
   SKUMatrixProps,
   SKUMatrixTriggerProps,
-  SKUMatrixSidebarProps
+  SKUMatrixSidebarProps,
 } from './organisms/SKUMatrix'

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

@@ -0,0 +1,71 @@
+import React from 'react'
+import type { MutableRefObject } from 'react'
+import { Label, Rating, 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/RatingField/styles.scss

@@ -0,0 +1,44 @@
+[data-fs-rating-field] {
+  // --------------------------------------------------------
+  // Design Tokens for RatingField
+  // --------------------------------------------------------
+
+  // 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] {
+      [data-fs-rating-item='empty'] svg {
+        color: var(--fs-rating-field-error-message-color);
+      }
+    }
+  }
+}