Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: start hooking up open/close logic

Browse Source
This commit is contained in:
Thomas Heartman 2022-02-27 19:59:30 +01:00
parent a629c36fe7
commit 9b1f9b764b
3 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
website/src/components/UserFeedback/UserFeedback.stories.jsx
View File

@ -10,7 +10,7 @@ const Template = (args) => <FeedbackWrapper {...args} />;
export const FullComponent = Template.bind({}); export const FullComponent = Template.bind({});
FullComponent.args = { FullComponent.args = {
// initialData, open: true,
}; };
export const Step2 = Template.bind({}); export const Step2 = Template.bind({});
@ -18,6 +18,7 @@ Step2.args = {
seedData: { seedData: {
currentStep: 2, currentStep: 2,
}, },
open: true,
}; };
export const Step3 = Template.bind({}); export const Step3 = Template.bind({});
@ -25,5 +26,7 @@ Step3.args = {
seedData: { seedData: {
currentStep: 3, currentStep: 3,
}, },
open: true,
}; };
export const Closed = Template.bind({}); export const Closed = Template.bind({});

25
website/src/components/UserFeedback/index.jsx
View File

@ -65,8 +65,8 @@ const stateReducer = (state, message) => {
return state; return state;
}; };
export const FeedbackWrapper = ({ seedData }) => { export const FeedbackWrapper = ({ seedData, open }) => {
// const [feedbackIsOpen, setFeedbackIsOpen] = React.useState(false); const [feedbackIsOpen, setFeedbackIsOpen] = React.useState(open);
const [state, dispatch] = React.useReducer( const [state, dispatch] = React.useReducer(
stateReducer, stateReducer,
@ -274,10 +274,13 @@ export const FeedbackWrapper = ({ seedData }) => {
</form> </form>
); );
}; };
return ( return feedbackIsOpen ? (
<article className={styles['user-feedback']}> <article className={styles['user-feedback']}>
<div className={styles['close-button-row']}> <div className={styles['close-button-row']}>
<button className={styles['close-button']}> <button
onClick={() => setFeedbackIsOpen(false)}
className={styles['close-button']}
>
<span className="visually-hidden"> <span className="visually-hidden">
close feedback popup close feedback popup
</span> </span>
@ -292,9 +295,21 @@ export const FeedbackWrapper = ({ seedData }) => {
<Step3 /> <Step3 />
)} )}
</article> </article>
) : (
<OpenFeedbackButton openFeedback={() => setFeedbackIsOpen(true)} />
); );
}; };
const OpenFeedbackButton = ({ openFeedback }) => { const OpenFeedbackButton = ({ openFeedback }) => {
return <button onClick={openFeedback}>Feedback</button>; return (
<button
className={join(
styles['open-feedback-button'],
styles['primary-button'],
)}
onClick={openFeedback}
>
Feedback
</button>
);
}; };

13
website/src/components/UserFeedback/styles.module.css
View File

@ -132,6 +132,7 @@ button.close-button {
fill: currentColor; fill: currentColor;
} }
.primary-button,
.user-feedback button[type='submit'] { .user-feedback button[type='submit'] {
background-color: var(--ifm-color-primary); background-color: var(--ifm-color-primary);
color: var(--ifm-background-color); color: var(--ifm-background-color);
@ -176,3 +177,15 @@ button.close-button {
gap: var(--ifm-spacing-horizontal); gap: var(--ifm-spacing-horizontal);
accent-color: var(--ifm-color-primary); 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);
}