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({});
+export const Step1 = Template.bind({});
-FullComponent.args = {
+Step1.args = {
     open: true,
 };
 

website/src/components/UserFeedback/index.jsx

@@ -278,8 +278,27 @@ export const FeedbackWrapper = ({ seedData, open }) => {
             </form>
         );
     };
-    return feedbackIsOpen ? (
+    return (
-        <article className={styles['user-feedback']}>
+        <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)}
@@ -299,21 +318,6 @@ export const FeedbackWrapper = ({ seedData, open }) => {
                     <Step3 />
                 )}
             </article>
-    ) : (
+        </div>
-        <OpenFeedbackButton openFeedback={() => setFeedbackIsOpen(true)} />
-    );
-};
-
-const OpenFeedbackButton = ({ openFeedback }) => {
-    return (
-        <button
-            className={join(
-                styles['open-feedback-button'],
-                styles['primary-button'],
-            )}
-            onClick={openFeedback}
-        >
-            Feedback
-        </button>
     );
 };

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;