Skip to content

Commit

Permalink
Merge pull request #5714 from kiva/MP-984-fe-add-missing-storybook-st…
Browse files Browse the repository at this point in the history 
…ories-for-badge-modal

fix: add missing stories for MyKiva badge modal
  • Loading branch information
@dyersituations
dyersituations authored Nov 26, 2024
2 parents 4217368 + 55f568a commit aebda11
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 13 deletions.
20 changes: 15 additions & 5 deletions .storybook/mock-data/badge-journey-data-mock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ export const badgeWomensEquality = {
"level": 1,
"levelName": "1",
"challengeName": "Women's equality",
"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3dAEh0zYSkqK5Up5q8Flv8/70d21f8db5f93b20be1581ef333dc60e/Women_10.svg"
"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3dAEh0zYSkqK5Up5q8Flv8/70d21f8db5f93b20be1581ef333dc60e/Women_10.svg",
"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
},
{
"id": "womens-equality",
Expand Down Expand Up @@ -56,6 +57,7 @@ export const badgeWomensEquality = {
"__typename": "TieredLendingAchievement",
"id": "womens-equality",
"totalProgressToAchievement": 0,
"matchingLoans": { "filters": {} },
"tiers": [
{
"__typename": "Tier",
Expand Down Expand Up @@ -120,7 +122,8 @@ export const badgeUsEconomicEquality = {
"level": 1,
"levelName": "1",
"challengeName": "U.S. economic equality",
"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3C3ddaga4hEXBlb9WxsdlQ/0155bb0e9a32be6b00071afa4769b10c/US_Business_10.svg"
"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3C3ddaga4hEXBlb9WxsdlQ/0155bb0e9a32be6b00071afa4769b10c/US_Business_10.svg",
"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
},
{
"id": "us-economic-equality",
Expand Down Expand Up @@ -169,6 +172,7 @@ export const badgeUsEconomicEquality = {
"__typename": "TieredLendingAchievement",
"id": "us-economic-equality",
"totalProgressToAchievement": 0,
"matchingLoans": { "filters": {} },
"tiers": [
{
"__typename": "Tier",
Expand Down Expand Up @@ -234,7 +238,8 @@ export const badgeClimateAction = {
"level": 1,
"levelName": "1",
"challengeName": "Climate action",
"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3YklKNLbiA4kAcOgk5ouaw/14b41006455dfd756f141e0217bb8e9c/Climate_10.svg"
"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3YklKNLbiA4kAcOgk5ouaw/14b41006455dfd756f141e0217bb8e9c/Climate_10.svg",
"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
},
{
"id": "climate-action",
Expand Down Expand Up @@ -283,6 +288,7 @@ export const badgeClimateAction = {
"__typename": "TieredLendingAchievement",
"id": "climate-action",
"totalProgressToAchievement": 0,
"matchingLoans": { "filters": {} },
"tiers": [
{
"__typename": "Tier",
Expand Down Expand Up @@ -347,7 +353,8 @@ export const badgeRefugeeEquality = {
"level": 1,
"levelName": "1",
"challengeName": "Refugee equality",
"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/1SEhQMUbYUqZopjP2o67XK/c9b1f51837d87905d2a71578c0d6c434/Refugees_10.svg"
"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/1SEhQMUbYUqZopjP2o67XK/c9b1f51837d87905d2a71578c0d6c434/Refugees_10.svg",
"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
},
{
"id": "refugee-equality",
Expand Down Expand Up @@ -396,6 +403,7 @@ export const badgeRefugeeEquality = {
"__typename": "TieredLendingAchievement",
"id": "refugee-equality",
"totalProgressToAchievement": 0,
"matchingLoans": { "filters": {} },
"tiers": [
{
"__typename": "Tier",
Expand Down Expand Up @@ -460,7 +468,8 @@ export const badgeBasicNeeds = {
"level": 1,
"levelName": "1",
"challengeName": "Basic needs",
"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/694uSymh8om0MxbiCjWZxl/b55c8cb3f3743efdd56b56beea8dfb42/Basic_Needs_10.svg"
"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/694uSymh8om0MxbiCjWZxl/b55c8cb3f3743efdd56b56beea8dfb42/Basic_Needs_10.svg",
"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
},
{
"id": "basic-needs",
Expand Down Expand Up @@ -509,6 +518,7 @@ export const badgeBasicNeeds = {
"__typename": "TieredLendingAchievement",
"id": "basic-needs",
"totalProgressToAchievement": 0,
"matchingLoans": { "filters": {} },
"tiers": [
{
"__typename": "Tier",
Expand Down
75 changes: 67 additions & 8 deletions .storybook/stories/BadgeModal.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,92 @@ import {
badgeBasicNeeds,
badgeFirstTierComplete
} from '../mock-data/badge-journey-data-mock';
import { STATE_JOURNEY, STATE_EARNED, STATE_IN_PROGRESS } from '#src/composables/useBadgeModal';
import apolloStoryMixin from '../mixins/apollo-story-mixin';
import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
import { mockLoansArray } from '../utils';

const mockLoans = mockLoansArray(3);

export default {
title: 'MyKiva/Badge Modal',
component: BadgeModal,
};

const queryResult = {
data: {
lend: {
loan: mockLoans[0]
},
fundraisingLoans: {
values: [
{
id: 2413188
},
{
id: 2411288
},
{
id: 2406410
},
{
id: 2406459
},
{
id: 2406956
},
{
id: 2408858
}
]
},
}
}

const story = (args) => {
const template = (_args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { BadgeModal },
setup() { return args; },
mixins: [apolloStoryMixin({ queryResult }), cookieStoreStoryMixin()],
setup() { return { args }; },
template: `
<badge-modal :show="true" :badge="badge" />
<badge-modal :show="true" v-bind="args" />
`,
});
template.args = args;
return template;
};

export const WomensEquality = story({ badge: badgeWomensEquality });
const tier = { level: 1 };

export const JourneyWomensEquality = story({ badge: badgeWomensEquality, state: STATE_JOURNEY });

export const JourneyUsEconomicEquality = story({ badge: badgeUsEconomicEquality, state: STATE_JOURNEY });

export const JourneyClimateAction = story({ badge: badgeClimateAction, state: STATE_JOURNEY });

export const JourneyRefugeeEquality = story({ badge: badgeRefugeeEquality, state: STATE_JOURNEY });

export const JourneyBasicNeeds = story({ badge: badgeBasicNeeds, state: STATE_JOURNEY });

export const JourneyFirstTierComplete = story({ badge: badgeFirstTierComplete, state: STATE_JOURNEY });

export const InProgressWomensEquality = story({ badge: badgeWomensEquality, tier, state: STATE_IN_PROGRESS });

export const InProgressUsEconomicEquality = story({ badge: badgeUsEconomicEquality, tier, state: STATE_IN_PROGRESS });

export const InProgressClimateAction = story({ badge: badgeClimateAction, tier, state: STATE_IN_PROGRESS });

export const InProgressRefugeeEquality = story({ badge: badgeRefugeeEquality, tier, state: STATE_IN_PROGRESS });

export const InProgressBasicNeeds = story({ badge: badgeBasicNeeds, tier, state: STATE_IN_PROGRESS });

export const UsEconomicEquality = story({ badge: badgeUsEconomicEquality });
export const EarnedWomensEquality = story({ badge: badgeWomensEquality, tier, state: STATE_EARNED });

export const ClimateAction = story({ badge: badgeClimateAction });
export const EarnedUsEconomicEquality = story({ badge: badgeUsEconomicEquality, tier, state: STATE_EARNED });

export const RefugeeEquality = story({ badge: badgeRefugeeEquality });
export const EarnedClimateAction = story({ badge: badgeClimateAction, tier, state: STATE_EARNED });

export const BasicNeeds = story({ badge: badgeBasicNeeds });
export const EarnedRefugeeEquality = story({ badge: badgeRefugeeEquality, tier, state: STATE_EARNED });

export const FirstTierComplete = story({ badge: badgeFirstTierComplete });
export const EarnedBasicNeeds = story({ badge: badgeBasicNeeds, tier, state: STATE_EARNED });

0 comments on commit aebda11

Please sign in to comment.