feat: start hooking up open/close logic

Unleash · Feb 27, 2022 · 9b1f9b7 · 9b1f9b7
1 parent a629c36
commit 9b1f9b7
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/website/src/components/UserFeedback/UserFeedback.stories.jsx b/website/src/components/UserFeedback/UserFeedback.stories.jsx
@@ -10,20 +10,23 @@ const Template = (args) => <FeedbackWrapper {...args} />;
 
 export const FullComponent = Template.bind({});
 FullComponent.args = {
-    // initialData,
+    open: true,
 };
 
 export const Step2 = Template.bind({});
 Step2.args = {
     seedData: {
         currentStep: 2,
     },
+    open: true,
 };
 
 export const Step3 = Template.bind({});
 Step3.args = {
     seedData: {
         currentStep: 3,
     },
+    open: true,
 };
+
 export const Closed = Template.bind({});
diff --git a/website/src/components/UserFeedback/index.jsx b/website/src/components/UserFeedback/index.jsx
@@ -65,8 +65,8 @@ const stateReducer = (state, message) => {
     return state;
 };
 
-export const FeedbackWrapper = ({ seedData }) => {
-    // const [feedbackIsOpen, setFeedbackIsOpen] = React.useState(false);
+export const FeedbackWrapper = ({ seedData, open }) => {
+    const [feedbackIsOpen, setFeedbackIsOpen] = React.useState(open);
 
     const [state, dispatch] = React.useReducer(
         stateReducer,
@@ -274,10 +274,13 @@ export const FeedbackWrapper = ({ seedData }) => {
             </form>
         );
     };
-    return (
+    return feedbackIsOpen ? (
         <article className={styles['user-feedback']}>
             <div className={styles['close-button-row']}>
-                <button className={styles['close-button']}>
+                <button
+                    onClick={() => setFeedbackIsOpen(false)}
+                    className={styles['close-button']}
+                >
                     <span className="visually-hidden">
                         close feedback popup
                     </span>
@@ -292,9 +295,21 @@ export const FeedbackWrapper = ({ seedData }) => {
                 <Step3 />
             )}
         </article>
+    ) : (
+        <OpenFeedbackButton openFeedback={() => setFeedbackIsOpen(true)} />
     );
 };
 
 const OpenFeedbackButton = ({ openFeedback }) => {
-    return <button onClick={openFeedback}>Feedback</button>;
+    return (
+        <button
+            className={join(
+                styles['open-feedback-button'],
+                styles['primary-button'],
+            )}
+            onClick={openFeedback}
+        >
+            Feedback
+        </button>
+    );
 };
diff --git a/website/src/components/UserFeedback/styles.module.css b/website/src/components/UserFeedback/styles.module.css
@@ -132,6 +132,7 @@ button.close-button {
     fill: currentColor;
 }
 
+.primary-button,
 .user-feedback button[type='submit'] {
     background-color: var(--ifm-color-primary);
     color: var(--ifm-background-color);
@@ -176,3 +177,15 @@ button.close-button {
     gap: var(--ifm-spacing-horizontal);
     accent-color: var(--ifm-color-primary);
 }
+
+.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;
+    border: none;
+    position: absolute;
+    right: calc(var(--ifm-spacing-vertical) * -1);
+    bottom: 25vh;
+    transform: rotate(270deg);
+}