diff --git a/website/src/components/UserFeedback/UserFeedback.stories.jsx b/website/src/components/UserFeedback/UserFeedback.stories.jsx index d9be1031419..32f5c40a445 100644 --- a/website/src/components/UserFeedback/UserFeedback.stories.jsx +++ b/website/src/components/UserFeedback/UserFeedback.stories.jsx @@ -10,7 +10,7 @@ const Template = (args) => ; export const FullComponent = Template.bind({}); FullComponent.args = { - // initialData, + open: true, }; export const Step2 = Template.bind({}); @@ -18,6 +18,7 @@ Step2.args = { seedData: { currentStep: 2, }, + open: true, }; export const Step3 = Template.bind({}); @@ -25,5 +26,7 @@ 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 index 1bbf6e22ddd..732a1c65cbc 100644 --- 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 }) => { ); }; - return ( + return feedbackIsOpen ? (
-
+ ) : ( + setFeedbackIsOpen(true)} /> ); }; const OpenFeedbackButton = ({ openFeedback }) => { - return ; + return ( + + ); }; diff --git a/website/src/components/UserFeedback/styles.module.css b/website/src/components/UserFeedback/styles.module.css index 11a4c2abb6d..c3bb5fa4f48 100644 --- 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); +}