feat: further styling and hooking up of open feedback-button

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

@@ -8,8 +8,8 @@ export default {
 
 const Template = (args) => <FeedbackWrapper {...args} />;
 
-export const FullComponent = Template.bind({});
-FullComponent.args = {
+export const Step1 = Template.bind({});
+Step1.args = {
     open: true,
 };
 

website/src/components/UserFeedback/index.jsx

@@ -278,42 +278,46 @@ export const FeedbackWrapper = ({ seedData, open }) => {
             </form>
         );
     };
-    return feedbackIsOpen ? (
-        <article className={styles['user-feedback']}>
-            <div className={styles['close-button-row']}>
-                <button
-                    onClick={() => setFeedbackIsOpen(false)}
-                    className={styles['close-button']}
-                >
-                    <span className="visually-hidden">
-                        close feedback popup
-                    </span>
-                    <CloseIcon />
-                </button>
-            </div>
-            {state.currentStep === 1 ? (
-                <Step1 />
-            ) : state.currentStep === 2 ? (
-                <Step2 />
-            ) : (
-                <Step3 />
-            )}
-        </article>
-    ) : (
-        <OpenFeedbackButton openFeedback={() => setFeedbackIsOpen(true)} />
-    );
-};
-
-const OpenFeedbackButton = ({ openFeedback }) => {
     return (
-        <button
-            className={join(
-                styles['open-feedback-button'],
-                styles['primary-button'],
-            )}
-            onClick={openFeedback}
-        >
-            Feedback
-        </button>
+        <div className={styles['user-feedback-container']}>
+            <p>feedback is {feedbackIsOpen ? 'open' : 'closed'}</p>
+            <button
+                className={join(
+                    feedbackIsOpen ? styles['hidden'] : undefined,
+                    styles['open-feedback-button'],
+                    styles['primary-button'],
+                )}
+                disabled={feedbackIsOpen}
+                onClick={() => setFeedbackIsOpen(true)}
+            >
+                Feedback
+            </button>
+
+            <article
+                className={join(
+                    styles['user-feedback'],
+                    feedbackIsOpen ? '' : styles['hidden'],
+                )}
+            >
+                <div className={styles['close-button-row']}>
+                    <button
+                        onClick={() => setFeedbackIsOpen(false)}
+                        className={styles['close-button']}
+                    >
+                        <span className="visually-hidden">
+                            close feedback popup
+                        </span>
+                        <CloseIcon />
+                    </button>
+                </div>
+                {state.currentStep === 1 ? (
+                    <Step1 />
+                ) : state.currentStep === 2 ? (
+                    <Step2 />
+                ) : (
+                    <Step3 />
+                )}
+            </article>
+        </div>
     );
 };

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

@@ -1,3 +1,9 @@
+.user-feedback-container {
+    --outline-style: 2px solid var(--ifm-color-primary);
+    --row-gap: 1rem;
+    --element-horizontal-gap: 1rem;
+}
+
 .user-feedback {
     width: 100%;
     position: absolute;
@@ -8,9 +14,6 @@
     box-shadow: var(--ifm-global-shadow-lw);
     padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
     text-align: center;
-    --outline-style: 2px solid var(--ifm-color-primary);
-    --row-gap: 1rem;
-    --element-horizontal-gap: 1rem;
 }
 
 .user-feedback > * + * {
@@ -33,11 +36,16 @@
     margin-top: var(--row-gap);
 }
 
-.user-feedback * {
+
+.hidden {
+    display: none;
+}
+
+.user-feedback-container * {
     outline-offset: 4px;
 }
 
-.user-feedback *:focus-visible {
+.user-feedback-container *:focus-visible {
     outline: var(--outline-style);
 }
 
@@ -139,11 +147,11 @@ button.close-button {
     padding-inline: calc(var(--ifm-spacing-horizontal) * 4);
 }
 
-.user-feedback button[type='submit']:hover {
+.primary-button:hover, .user-feedback button[type='submit']:hover {
     background-color: var(--ifm-color-primary-lighter);
 }
 
-.user-feedback button[type='submit']:active {
+.primary-button:hover, .user-feedback button[type='submit']:active {
     background-color: var(--ifm-color-primary-dark);
 }
 
@@ -183,7 +191,6 @@ button.close-button {
 }
 
 .open-feedback-button {
-    opacity: 0.55;
     padding-top: var(--ifm-spacing-vertical);
     padding-bottom: calc(var(--ifm-spacing-vertical) * 2);
     border-radius: var(--ifm-global-radius) var(--ifm-global-radius) 0 0;