diff --git a/.storybook/stories/BadgeTile.stories.js b/.storybook/stories/BadgeTile.stories.js new file mode 100644 index 0000000000..44f1105187 --- /dev/null +++ b/.storybook/stories/BadgeTile.stories.js @@ -0,0 +1,38 @@ +import BadgeTile from '#src/components/MyKiva/BadgeTile.vue'; +import { + badgeWomensEquality, + badgeUsEconomicEquality, + badgeClimateAction, + badgeRefugeeEquality, + badgeBasicNeeds, +} from '../mock-data/badge-journey-data-mock'; + +export default { + title: 'MyKiva/Badge Tile', + component: BadgeTile, +}; + +const story = (args) => { + const template = (_args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { BadgeTile }, + setup() { return { args }; }, + template: ` +
+ +
+ `, + }); + template.args = args; + return template; +}; + +export const WomensEquality = story({ badgesData: [badgeWomensEquality] }); + +export const UsEconomicEquality = story({ badgesData: [badgeUsEconomicEquality] }); + +export const ClimateAction = story({ badgesData: [badgeClimateAction] }); + +export const RefugeeEquality = story({ badgesData: [badgeRefugeeEquality] }); + +export const BasicNeeds = story({ badgesData: [badgeBasicNeeds] }); diff --git a/src/components/MyKiva/BadgeTile.vue b/src/components/MyKiva/BadgeTile.vue index 3bcf550f1a..9f709d2f8c 100644 --- a/src/components/MyKiva/BadgeTile.vue +++ b/src/components/MyKiva/BadgeTile.vue @@ -9,7 +9,7 @@ you’re almost there
@@ -18,18 +18,19 @@ :status="BADGE_IN_PROGRESS" :shape="badgeShape" class="tw-z-1" + :class="{ '-tw-ml-1 -tw-mr-1.5': badgeShape === BADGE_SHAPE_OBLONG }" > Badge

{{ tierData.tierName }}

-

+

{{ tierCaption }}