Skip to content

Commit

Permalink
story: Fix initial display of Trial story (it would only show after a…
Browse files Browse the repository at this point in the history 
… click in the component, which is kind of counter intuitive, bad ux)
  • Loading branch information
@drikusroor
drikusroor committed Jan 14, 2025
1 parent 2ea41ca commit aad5f2d
Showing 1 changed file with 167 additions and 67 deletions.
234 changes: 167 additions & 67 deletions frontend/src/stories/Trial.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,83 +8,88 @@ export default {
},
};

const getDefaultFeedbackForm = (overrides = {}) => ({
form: [{
key: "know_song",
view: "BUTTON_ARRAY",
explainer: "",
question: "1. Do you know this song?",
is_skippable: false,
submits: false,
style: "boolean",
choices: {
yes: "fa-check",
unsure: "fa-question",
no: "fa-xmark",
},
min_values: 1,
},
{
key: "like_song",
view: "ICON_RANGE",
explainer: "",
question: "2. How much do you like this song?",
is_skippable: false,
submits: false,
style: "gradient-7",
choices: {
1: "fa-face-grin-hearts",
2: "fa-face-grin",
3: "fa-face-smile",
4: "fa-face-meh",
5: "fa-face-frown",
6: "fa-face-frown-open",
7: "fa-face-angry",
},
}],
submit_label: "Submit",
skip_label: "Skip",
is_skippable: true,
is_profile: true,
...overrides,
});

const getDefaultPlayback = (overrides = {}) => ({
play_method: "NOAUDIO",
view: "BUTTON",
instruction: "This is the instruction",
preload_message: "This is the preload message",
play_config: {
autoplay: true,
controls: true,
loop: true,
muted: true,
playback_rate: 1,
preload: "auto",
},
sections: [
{
start: 0,
end: 10,
text: "This is the first section",
},
{
start: 10,
end: 20,
text: "This is the second section",
},
],
...overrides,
});

const getDefaultArgs = (overrides = {}) => ({
html: {
body: "<p>This is <u>the</u> <b>HTML</b> <i>body</i></p>",
},
config: {
style: "AUTOPLAY",
style: "PRELOAD",
auto_advance: true,
response_time: 1000,
continue_label: "Continue",
show_continue_button: true,
},
playback: {
view: "BUTTON",
instruction: "This is the instruction",
preload_message: "This is the preload message",
play_config: {
autoplay: true,
controls: true,
loop: true,
muted: true,
playback_rate: 1,
preload: "auto",
},
sections: [
{
start: 0,
end: 10,
text: "This is the first section",
},
{
start: 10,
end: 20,
text: "This is the second section",
},
],
},
feedback_form: {
form: [
{
key: "know_song",
view: "BUTTON_ARRAY",
explainer: "",
question: "1. Do you know this song?",
is_skippable: false,
submits: false,
style: "boolean",
choices: {
yes: "fa-check",
unsure: "fa-question",
no: "fa-xmark",
},
min_values: 1,
},
{
key: "like_song",
view: "ICON_RANGE",
explainer: "",
question: "2. How much do you like this song?",
is_skippable: false,
submits: false,
style: "gradient-7",
choices: {
1: "fa-face-grin-hearts",
2: "fa-face-grin",
3: "fa-face-smile",
4: "fa-face-meh",
5: "fa-face-frown",
6: "fa-face-frown-open",
7: "fa-face-angry",
},
},
],
submit_label: "Submit",
skip_label: "Skip",
is_skippable: true,
is_profile: true,
},
playback: getDefaultPlayback(),
feedback_form: getDefaultFeedbackForm(),
onNext: () => { },
onResult: () => { },
...overrides,
Expand Down Expand Up @@ -136,6 +141,47 @@ export const NeutralColorScheme = {
continue_label: "Continue",
show_continue_button: true,
},
feedback_form: {
form: [
{
key: "know_song",
view: "BUTTON_ARRAY",
explainer: "",
question: "1. Do you know this song?",
is_skippable: false,
submits: false,
style: "neutral",
choices: {
yes: "fa-check",
unsure: "fa-question",
no: "fa-xmark",
},
min_values: 1,
},
{
key: "like_song",
view: "ICON_RANGE",
explainer: "",
question: "2. How much do you like this song?",
is_skippable: false,
submits: false,
style: "neutral",
choices: {
1: "fa-face-grin-hearts",
2: "fa-face-grin",
3: "fa-face-smile",
4: "fa-face-meh",
5: "fa-face-frown",
6: "fa-face-frown-open",
7: "fa-face-angry",
},
}
],
submit_label: "Submit",
skip_label: "Skip",
is_skippable: true,
is_profile: true,
},
}),
decorators: [getDecorator,],
};
Expand All @@ -149,6 +195,47 @@ export const NeutralInvertedColorScheme = {
continue_label: "Continue",
show_continue_button: true,
},
feedback_form: {
form: [
{
key: "know_song",
view: "BUTTON_ARRAY",
explainer: "",
question: "1. Do you know this song?",
is_skippable: false,
submits: false,
style: "neutral-inverted",
choices: {
yes: "fa-check",
unsure: "fa-question",
no: "fa-xmark",
},
min_values: 1,
},
{
key: "like_song",
view: "ICON_RANGE",
explainer: "",
question: "2. How much do you like this song?",
is_skippable: false,
submits: false,
style: "neutral-inverted",
choices: {
1: "fa-face-grin-hearts",
2: "fa-face-grin",
3: "fa-face-smile",
4: "fa-face-meh",
5: "fa-face-frown",
6: "fa-face-frown-open",
7: "fa-face-angry",
},
}
],
submit_label: "Submit",
skip_label: "Skip",
is_skippable: true,
is_profile: true,
},
}),
decorators: [getDecorator,],
};
Expand Down Expand Up @@ -217,3 +304,16 @@ export const ToontjeHoger4Absolute = {
}),
decorators: [getDecorator,],
}

export const Gradient7ColorScheme = {
args: getDefaultArgs({
config: {
style: "gradient-7",
auto_advance: true,
response_time: 1000,
continue_label: "Continue",
show_continue_button: true,
},
}),
decorators: [getDecorator,],
};

0 comments on commit aad5f2d

Please sign in to comment.