feat: add badge shine and rays animations

kiva · Nov 18, 2024 · d940405 · d940405
1 parent c7f0477
commit d940405
Show file tree

Hide file tree

Showing 8 changed files with 337 additions and 33 deletions.
diff --git a/.storybook/stories/BadgeContainer.stories.js b/.storybook/stories/BadgeContainer.stories.js
@@ -28,8 +28,8 @@ const story = (args = {}, badgeUrl) => {
 		components: { BadgeContainer },
 		setup() { return { args }; },
 		template: `
-			<badge-container v-bind="args" style="width: 150px; height: 150px;">
-				<img src="${badgeUrl}" />
+			<badge-container v-bind="args" style="width: 500px; height: 500px;">
+				<img src="${badgeUrl}" style="width: 300px; height: 300px; margin: 0 auto; margin-top: 80px" />
 			</badge-container>
 		`,
 	});
@@ -66,3 +66,9 @@ export const RectangleCompleted = story({ status: BADGE_COMPLETED, shape: BADGE_
 export const RectangleInProgress = story({ status: BADGE_IN_PROGRESS, shape: BADGE_SHAPE_RECTANGLE }, badgeUsEconomicEquality.contentfulData[0].imageUrl);
 
 export const RectangleLocked = story({ status: BADGE_LOCKED, shape: BADGE_SHAPE_RECTANGLE }, badgeUsEconomicEquality.contentfulData[0].imageUrl);
+
+export const BadgeWithRays = story({showRays: true, status: BADGE_COMPLETED, shape: BADGE_SHAPE_ARCH}, badgeClimateAction.contentfulData[0].imageUrl);
+
+export const BadgeWithShine = story({showShine: true, status: BADGE_COMPLETED, shape: BADGE_SHAPE_ARCH}, badgeClimateAction.contentfulData[0].imageUrl);
+
+export const BadgeWithShineAndRays = story({showRays: true, showShine: true, status: BADGE_COMPLETED, shape: BADGE_SHAPE_ARCH}, badgeClimateAction.contentfulData[0].imageUrl);
diff --git a/src/assets/images/my-kiva/badge-shine.svg b/src/assets/images/my-kiva/badge-shine.svg
diff --git a/src/assets/images/my-kiva/badge-shine/first.svg b/src/assets/images/my-kiva/badge-shine/first.svg
diff --git a/src/assets/images/my-kiva/badge-shine/second.svg b/src/assets/images/my-kiva/badge-shine/second.svg
diff --git a/src/assets/images/my-kiva/rays/first.svg b/src/assets/images/my-kiva/rays/first.svg
diff --git a/src/assets/images/my-kiva/rays/second.svg b/src/assets/images/my-kiva/rays/second.svg
diff --git a/src/assets/images/my-kiva/rays/third.svg b/src/assets/images/my-kiva/rays/third.svg