style page 2

website/src/components/UserFeedback/UserFeedback.stories.jsx

@@ -13,13 +13,17 @@ FullComponent.args = {
     // initialData,
 };
 
-// export const Step2 = Template.bind({});
-// Step2.args = {
-//     seedData: {
-//         ...initialData,
-//         currentStep: 2,
-//     },
-// };
+export const Step2 = Template.bind({});
+Step2.args = {
+    seedData: {
+        currentStep: 2,
+    },
+};
 
 export const Step3 = Template.bind({});
+Step3.args = {
+    seedData: {
+        currentStep: 3,
+    },
+};
 export const Closed = Template.bind({});

website/src/components/UserFeedback/index.jsx

@@ -88,10 +88,14 @@ export const FeedbackWrapper = ({ seedData }) => {
     const setCustomerType = (customerType) =>
         dispatch({ kind: 'set customer type', data: customerType });
 
+    const submitFeedback = () => {
+        console.log('send feedback here ');
+    };
+
     const Step1 = () => {
         const [newValue, setNewValue] = React.useState(undefined);
         return (
-            <form>
+            <form className="step-1">
                 <p>
                     <span className="visually-hidden">
                         On a scale from 1 to 5 where 1 is very unsatisfied and 5
@@ -135,16 +139,10 @@ export const FeedbackWrapper = ({ seedData }) => {
                     <span aria-hidden="true">Very satisfied</span>
                 </div>
                 <div className={styles['button-container']}>
-                    <button
-                        className={styles['button-secondary']}
-                        type="button"
-                    >
-                        Skip
-                    </button>
                     <button
                         type="submit"
-                        onClick={(e) => {
-                            console.log(e);
+                        onSubmit={(e) => {
+                            console.log(e, 'cancelable:', e.cancelable);
                             e.preventDefault();
                             setScore(newValue);
                             stepForward();
@@ -157,6 +155,117 @@ export const FeedbackWrapper = ({ seedData }) => {
         );
     };
 
+    const Step2 = () => {
+        const textareaId = 'feedback-comment-input';
+        return (
+            <form className="step-2">
+                <label htmlFor={textareaId}>
+                    What would you like to see improved in the Unleash
+                    documentation?
+                </label>
+                <textarea
+                    id={textareaId}
+                    /* cols="30" */
+                    name=""
+                    rows="5"
+                ></textarea>
+
+                <div className={styles['button-container']}>
+                    <button
+                        className={styles['button-secondary']}
+                        type="button"
+                        onClick={stepForward}
+                    >
+                        Skip
+                    </button>
+                    <button
+                        className={styles['button-secondary']}
+                        type="button"
+                        onClick={stepBack}
+                    >
+                        Back
+                    </button>
+                    <button
+                        type="submit"
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            setComment(
+                                document.getElementById(textareaId).value,
+                            );
+                            stepForward();
+                        }}
+                    >
+                        Next
+                    </button>
+                </div>
+            </form>
+        );
+    };
+
+    const Step3 = () => {
+        const [customerType, setCustomerType] = React.useState();
+
+        return (
+            <form className="step-3">
+                <span>
+                    Finally, would you mind telling us a little about yourself?
+                    What kind of customer are you?
+                </span>
+                <div>
+                    {[
+                        ['an', 'open source', 'opensource'],
+                        ['a', 'paying', 'paying'],
+                    ].map(([article, customerType, key]) => (
+                        <span key={`input-group-${key}`}>
+                            <input
+                                className={join(
+                                    styles['user-satisfaction-score-input'],
+                                )}
+                                id={`customer-type-${key}`}
+                                name="customer-type"
+                                type="radio"
+                                value={key}
+                                defaultChecked={key === state.data.customerType}
+                                onChange={(e) => {
+                                    const value = e.target.value;
+                                    console.log('the value is', value);
+                                    setCustomerType(value);
+                                }}
+                            />
+                            <label
+                                className={
+                                    styles['user-satisfaction-score-label']
+                                }
+                                htmlFor={`customer-type-${key}`}
+                            >
+                                I'm {article} {customerType} customer
+                            </label>
+                        </span>
+                    ))}
+                </div>
+
+                <div className={styles['button-container']}>
+                    <button
+                        className={styles['button-secondary']}
+                        type="button"
+                        onClick={stepBack}
+                    >
+                        Back
+                    </button>
+                    <button
+                        type="submit"
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            setCustomerType(customerType);
+                            submitFeedback();
+                        }}
+                    >
+                        Submit feedback
+                    </button>
+                </div>
+            </form>
+        );
+    };
     return (
         <article className={styles['user-feedback']}>
             <div className={styles['close-button-row']}>

website/src/components/UserFeedback/styles.module.css

@@ -29,8 +29,12 @@
     margin-right: auto;
 }
 
+.user-feedback > form > * + * {
+    margin-top: var(--row-gap);
+}
+
 .user-feedback * {
-        outline-offset: 4px;
+    outline-offset: 4px;
 }
 
 .user-feedback *:focus-visible {
@@ -44,7 +48,6 @@
     gap: var(--element-horizontal-gap);
 }
 
-
 .user-satisfaction-score-label {
     display: grid;
     place-content: center;
@@ -59,7 +62,7 @@
 }
 
 .user-satisfaction-score-label:hover {
-    color: var(--ifm-color-primary)
+    color: var(--ifm-color-primary);
 }
 
 .user-satisfaction-score-input:checked + label {
@@ -85,11 +88,11 @@ button.close-button {
     height: 1em;
 }
 
-.close-button:hover{
+.close-button:hover {
     color: var(--ifm-color-primary);
 }
 
-.close-button:active{
+.close-button:active {
     color: var(--ifm-color-primary-darker);
 }
 
@@ -98,17 +101,17 @@ button.close-button {
     justify-content: end;
 }
 
-.user-feedback button[type=submit] {
+.user-feedback button[type='submit'] {
     background-color: var(--ifm-color-primary);
     color: var(--ifm-background-color);
     padding-inline: calc(var(--ifm-spacing-horizontal) * 4);
 }
 
-.user-feedback button[type=submit]:hover {
+.user-feedback button[type='submit']:hover {
     background-color: var(--ifm-color-primary-lighter);
 }
 
-.user-feedback button[type=submit]:active {
+.user-feedback button[type='submit']:active {
     background-color: var(--ifm-color-primary-dark);
 }
 
@@ -117,7 +120,6 @@ button.close-button {
     background: none;
 }
 
-
 .button-secondary:active {
     color: var(--ifm-color-primary-darker);
 }
@@ -125,3 +127,8 @@ button.close-button {
 .button-secondary:hover {
     color: var(--ifm-color-primary-lightest);
 }
+
+.user-feedback textarea {
+    display: block;
+    width: 100%;
+}