Implement Experience Control component

Author: yashwin

client/a8c-for-agencies/components/a4a-feedback/index.tsx

@@ -1,11 +1,8 @@
-import { FormLabel } from '@automattic/components';
+import { FormLabel, ExperienceControl } from '@automattic/components';
 import { Button, CheckboxControl } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
 import { ChangeEvent, useState } from 'react';
 import { LayoutWithGuidedTour as Layout } from 'calypso/a8c-for-agencies/components/layout/layout-with-guided-tour';
-import IconBad from 'calypso/assets/images/a8c-for-agencies/feedback/bad.svg';
-import IconGood from 'calypso/assets/images/a8c-for-agencies/feedback/good.svg';
-import IconNeutral from 'calypso/assets/images/a8c-for-agencies/feedback/neutral.svg';
 import FormFieldset from 'calypso/components/forms/form-fieldset';
 import FormTextarea from 'calypso/components/forms/form-textarea';
 import LayoutBody from 'calypso/layout/hosting-dashboard/body';
@@ -46,31 +43,11 @@ export function A4AFeedback( { type }: { type: FeedbackType } ) {
 							<div className="a4a-feedback__question-details">
 								{ translate( 'Share your feedback' ) }
 							</div>
-							<div className="a4a-feedback__experience-selector">
-								<div className="a4a-feedback__experience-selector-label">
-									{ translate( 'What was your experience like?' ) }
-								</div>
-								<div className="a4a-feedback__experience-selector-buttons">
-									<Button
-										variant={ experience === 'good' ? 'primary' : 'secondary' }
-										onClick={ () => setExperience( 'good' ) }
-									>
-										<img src={ IconGood } alt="Good" />
-									</Button>
-									<Button
-										variant={ experience === 'neutral' ? 'primary' : 'secondary' }
-										onClick={ () => setExperience( 'neutral' ) }
-									>
-										<img src={ IconNeutral } alt="Neutral" />
-									</Button>
-									<Button
-										variant={ experience === 'bad' ? 'primary' : 'secondary' }
-										onClick={ () => setExperience( 'bad' ) }
-									>
-										<img src={ IconBad } alt="Bad" />
-									</Button>
-								</div>
-							</div>
+							<ExperienceControl
+								label={ translate( 'What was your experience like?' ) }
+								onChange={ ( experience ) => setExperience( experience ) }
+								selectedExperience={ experience }
+							/>
 							{ suggestion && (
 								<FormFieldset>
 									<FormLabel className="a4a-feedback__comments-label" htmlFor="suggestion">

client/a8c-for-agencies/components/a4a-feedback/style.scss

@@ -102,40 +102,6 @@ $highlight-color: #3858E9;
 	}
 }
 
-.theme-a8c-for-agencies .a4a-feedback__experience-selector-buttons {
-	display: flex;
-	gap: 10px;
-
-	.components-button {
-		box-shadow: none;
-		height: 40px;
-		padding: 8px;
-
-		&.is-primary {
-			border: 2px solid $highlight-color;
-			background-color: unset;
-
-			&:focus:not(:disabled), &:hover:not(:disabled), &:focus-visible:not(:disabled) {
-				border: 2px solid $highlight-color;
-			}
-		}
-		&.is-secondary {
-			border: 2px solid transparent;
-
-			&:focus:not(:disabled), &:hover:not(:disabled), &:focus-visible:not(:disabled) {
-				border: 2px solid transparent;
-			}
-		}
-
-		&.is-primary, &.is-secondary {
-			&:focus:not(:disabled), &:hover:not(:disabled), &:focus-visible:not(:disabled) {
-				box-shadow: none;
-				background-color: unset;
-			}
-		}
-	}
-}
-
 .a4a-feedback__suggestions {
 	display: flex;
 	flex-direction: column;

client/assets/images/a8c-for-agencies/feedback/bad.svg

@@ -0,0 +1,84 @@
+# Experience Control
+
+A flexible component for capturing user experience feedback through a set of options. By default, it provides a three-state experience selector (Good, Neutral, Bad) with icons, but it can also be customized for different use cases.
+
+## Usage
+
+### Default Usage
+
+```jsx
+import { ExperienceControl } from '@automattic/components';
+
+function MyComponent() {
+	const [ experience, setExperience ] = useState( 'neutral' );
+
+	return (
+		<ExperienceControl
+			label="How was your experience?"
+			selectedExperience={ experience }
+			onChange={ setExperience }
+		/>
+	);
+}
+```
+
+### Custom Implementation
+
+The component exports base components that can be used to create custom experience controls:
+
+```jsx
+import { ExperienceControl } from '@automattic/components';
+
+function CustomExperienceControl() {
+	const [ rating, setRating ] = useState( 'medium' );
+
+	const options = [
+		{ value: 'high', label: 'High Priority' },
+		{ value: 'medium', label: 'Medium Priority' },
+		{ value: 'low', label: 'Low Priority' },
+	];
+
+	return (
+		<ExperienceControl.Base label="Task Priority">
+			{ options.map( ( option ) => (
+				<ExperienceControl.Option
+					key={ option.value }
+					className={ `is-${ option.value }` }
+					isSelected={ rating === option.value }
+					onClick={ () => setRating( option.value ) }
+					helpText={ option.label }
+				>
+					{ option.label }
+				</ExperienceControl.Option>
+			) ) }
+		</ExperienceControl.Base>
+	);
+}
+```
+
+## Props
+
+### ExperienceControl
+
+| Prop                 | Type                         | Required | Description                                |
+| -------------------- | ---------------------------- | -------- | ------------------------------------------ |
+| `label`              | string                       | Yes      | The label displayed above the control      |
+| `selectedExperience` | string                       | Yes      | The currently selected experience value    |
+| `onChange`           | (experience: string) => void | Yes      | Callback when experience selection changes |
+
+### ExperienceControl.Base
+
+| Prop       | Type      | Required | Description                           |
+| ---------- | --------- | -------- | ------------------------------------- |
+| `label`    | string    | Yes      | The label displayed above the control |
+| `children` | ReactNode | Yes      | The button components to render       |
+
+### ExperienceControl.Option
+
+| Prop         | Type       | Required | Description                               |
+| ------------ | ---------- | -------- | ----------------------------------------- |
+| `className`  | string     | No       | Additional CSS class names                |
+| `isSelected` | boolean    | Yes      | Whether this option is currently selected |
+| `onClick`    | () => void | Yes      | Click handler for the button              |
+| `children`   | ReactNode  | Yes      | The content to render inside the button   |
+| `helpText`   | string     | No       | Help text for the option                  |

client/assets/images/a8c-for-agencies/feedback/good.svg

@@ -0,0 +1,47 @@
+export const IconGood = () => {
+	return (
+		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<g id="Icon">
+				<path
+					id="Shape"
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M5.99452 13.0808C6.89004 13.0808 7.616 12.3549 7.616 11.4594C7.616 10.5638 6.89004 9.83789 5.99452 9.83789C5.09901 9.83789 4.37305 10.5638 4.37305 11.4594C4.37305 12.3549 5.09901 13.0808 5.99452 13.0808ZM18.0054 13.0808C18.901 13.0808 19.6269 12.3549 19.6269 11.4594C19.6269 10.5638 18.901 9.83789 18.0054 9.83789C17.1099 9.83789 16.384 10.5638 16.384 11.4594C16.384 12.3549 17.1099 13.0808 18.0054 13.0808ZM15.352 14.5221C13.6377 16.7223 10.493 17.1864 8.84968 14.7405C8.49299 14.2091 8.01618 14.0562 7.41927 14.2819C7.31736 14.3183 7.23185 14.382 7.16269 14.473C6.71865 15.0517 6.73138 15.6213 7.2009 16.1818C9.90335 19.4193 14.604 19.3756 17.0007 15.8542C17.4411 15.21 17.3137 14.7132 16.6186 14.3638L16.4439 14.2764C16.0107 14.0581 15.6468 14.1399 15.352 14.5221Z"
+					fill="#255C33"
+				/>
+			</g>
+		</svg>
+	);
+};
+
+export const IconNeutral = () => {
+	return (
+		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<g id="Icon">
+				<path
+					id="Shape"
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M5.99452 13.0808C6.89004 13.0808 7.616 12.3549 7.616 11.4594C7.616 10.5638 6.89004 9.83789 5.99452 9.83789C5.09901 9.83789 4.37305 10.5638 4.37305 11.4594C4.37305 12.3549 5.09901 13.0808 5.99452 13.0808ZM18.0054 13.0808C18.901 13.0808 19.6269 12.3549 19.6269 11.4594C19.6269 10.5638 18.901 9.83789 18.0054 9.83789C17.1099 9.83789 16.384 10.5638 16.384 11.4594C16.384 12.3549 17.1099 13.0808 18.0054 13.0808ZM7.57442 15.2678L16.4188 15.2832C16.9826 15.2842 17.4389 15.7421 17.438 16.3059L17.4377 16.4479C17.4367 17.0117 16.9788 17.468 16.415 17.467L7.57061 17.4516C7.00677 17.4506 6.55048 16.9927 6.55147 16.4289L6.55172 16.2869C6.5527 15.7231 7.01058 15.2668 7.57442 15.2678Z"
+					fill="#2F2F2F"
+				/>
+			</g>
+		</svg>
+	);
+};
+
+export const IconBad = () => {
+	return (
+		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<g id="Icon">
+				<path
+					id="Shape"
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M5.99451 13.081C6.89002 13.081 7.61597 12.355 7.61597 11.4595C7.61597 10.564 6.89002 9.83801 5.99451 9.83801C5.09899 9.83801 4.37305 10.564 4.37305 11.4595C4.37305 12.355 5.09899 13.081 5.99451 13.081ZM18.0054 13.081C18.9009 13.081 19.6269 12.355 19.6269 11.4595C19.6269 10.564 18.9009 9.83801 18.0054 9.83801C17.1099 9.83801 16.384 10.564 16.384 11.4595C16.384 12.355 17.1099 13.081 18.0054 13.081ZM8.68587 17.0991C9.82145 15.3794 12.0708 14.7516 13.9052 15.7561C14.4784 16.0673 14.9043 16.5805 15.3137 17.0773C15.887 17.7652 16.7987 17.5577 17.099 16.717C17.169 16.5224 17.1866 16.3126 17.1503 16.1086C17.1139 15.9046 17.0247 15.7134 16.8915 15.5541C14.1181 12.2238 9.45021 12.2293 6.98797 15.8162C6.59489 16.3876 6.69497 16.8516 7.28824 17.2083L7.53939 17.3612C8.00527 17.6415 8.38742 17.5541 8.68587 17.0991Z"
+					fill="#660C0D"
+				/>
+			</g>
+		</svg>
+	);
+};

client/assets/images/a8c-for-agencies/feedback/neutral.svg

@@ -0,0 +1,99 @@
+import { Button } from '@wordpress/components';
+import clsx from 'clsx';
+import { IconBad, IconGood, IconNeutral } from './icons';
+
+import './style.scss';
+
+enum Experience {
+	GOOD = 'good',
+	NEUTRAL = 'neutral',
+	BAD = 'bad',
+}
+
+const ExperienceControlOption = ( {
+	className,
+	isSelected,
+	onClick,
+	children,
+	helpText,
+}: {
+	className?: string;
+	isSelected: boolean;
+	onClick: () => void;
+	children: React.ReactNode;
+	helpText?: string;
+} ) => (
+	<div className="experience-control__option">
+		<Button
+			className={ clsx( 'experience-control__button', className, {
+				'is-selected': isSelected,
+			} ) }
+			aria-label={ helpText }
+			onClick={ onClick }
+		>
+			<div className="experience-control__button-content">{ children }</div>
+		</Button>
+		<div className="experience-control__option-help-text">{ helpText }</div>
+	</div>
+);
+
+const ExperienceControlBase = ( {
+	label,
+	children,
+}: {
+	label: string;
+	children: React.ReactNode;
+} ) => (
+	<div className="experience-control">
+		<div className="experience-control__label">{ label }</div>
+		<div className="experience-control__buttons">{ children }</div>
+	</div>
+);
+
+export function ExperienceControl( {
+	label,
+	onChange,
+	selectedExperience,
+}: {
+	label: string;
+	onChange: ( experience: string ) => void;
+	selectedExperience: string;
+} ) {
+	const handleChange = ( experience: string ) => {
+		onChange( experience );
+	};
+
+	const options = [
+		{
+			value: Experience.GOOD,
+			icon: <IconGood />,
+		},
+		{
+			value: Experience.NEUTRAL,
+			icon: <IconNeutral />,
+		},
+		{
+			value: Experience.BAD,
+			icon: <IconBad />,
+		},
+	];
+
+	return (
+		<ExperienceControlBase label={ label }>
+			{ options.map( ( option ) => (
+				<ExperienceControlOption
+					key={ option.value }
+					className={ `is-${ option.value }` }
+					isSelected={ selectedExperience === option.value }
+					onClick={ () => handleChange( option.value ) }
+				>
+					{ option.icon }
+				</ExperienceControlOption>
+			) ) }
+		</ExperienceControlBase>
+	);
+}
+ExperienceControl.Base = ExperienceControlBase;
+ExperienceControl.Option = ExperienceControlOption;
+
+export default ExperienceControl;