From 825a4be1cc5728564e18356f3473bab1819b133c Mon Sep 17 00:00:00 2001
From: ssmucny <smucny.sam@gmail.com>
Date: Mon, 5 Jun 2023 22:43:49 -0400
Subject: [PATCH] - add i18n - upate UI storybook

---
 locales/ja-JP.yml                             | 18 +++++++++++
 .../src/components/MkEvent.stories.impl.ts    |  4 ++-
 packages/frontend/src/components/MkEvent.vue  | 32 +++++++++----------
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 82c63dfbeb..42ab4fbc35 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1095,6 +1095,24 @@ _event:
   endTime: "終了時刻"
   detailName: "属性"
   detailValue: "値"
+  location: "Location"
+  url: "URL"
+  doorTime: "Door Time"
+  organizer: "Organizer"
+  organizerLink: "Organizer Link"
+  audience: "Audience"
+  language: "Language"
+  ageRange: "Age Range"
+  ticketsUrl: "Tickets"
+  isFree: "Free"
+  price: "Price"
+  availability: "Availability"
+  from: "From"
+  until: "Until"
+  availabilityStart: "Availability Start"
+  availabilityEnd: "Availability End"
+  keywords: "Keywords"
+  performers: "Performers"
 
 _accountMigration:
   moveFrom: "別のアカウントからこのアカウントに移行"
diff --git a/packages/frontend/src/components/MkEvent.stories.impl.ts b/packages/frontend/src/components/MkEvent.stories.impl.ts
index e85dc5653b..a60b40aa00 100644
--- a/packages/frontend/src/components/MkEvent.stories.impl.ts
+++ b/packages/frontend/src/components/MkEvent.stories.impl.ts
@@ -31,7 +31,9 @@ export const Default = {
 				title: 'Come on a Tea Party!',
 				start: '2017-10-25T15:00:00+0900',
 				end: '2017-10-25T18:00:00+0900',
-				detail: {
+				metadata: {
+					'@context': 'https://schema.org',
+					'@type': 'Event',
 					location: 'Kawasaki, Japan',
 					description: 'Let\'s have a tea party!',
 				},
diff --git a/packages/frontend/src/components/MkEvent.vue b/packages/frontend/src/components/MkEvent.vue
index 4cdf74af76..06fb0fc5b0 100644
--- a/packages/frontend/src/components/MkEvent.vue
+++ b/packages/frontend/src/components/MkEvent.vue
@@ -16,60 +16,60 @@
 			</dd>
 		</template>
 		<template v-if="note.event!.metadata.doorTime">
-			<dt :class="$style.key">{{ "Door Time" }}</dt> 
+			<dt :class="$style.key">{{ i18n.ts._event.doorTime }}</dt> 
 			<dd :class="$style.value">{{ note.event!.metadata.doorTime }}</dd>
 		</template>
 		<template v-if="note.event!.metadata.location">
-			<dt :class="$style.key">{{ "Location" }}</dt> 
+			<dt :class="$style.key">{{ i18n.ts._event.location }}</dt> 
 			<dd :class="$style.value">{{ note.event!.metadata.location }}</dd>
 		</template>
 		<template v-if="note.event!.metadata.url">
-			<dt :class="$style.key">{{ "URL" }}</dt> 
+			<dt :class="$style.key">{{ i18n.ts._event.url }}</dt> 
 			<dd :class="$style.value">{{ note.event!.metadata.url }}</dd>
 		</template>
 		<template v-if="note.event!.metadata.organizer">
-			<dt :class="$style.key">{{ "Organizer" }}</dt> 
+			<dt :class="$style.key">{{ i18n.ts._event.organizer }}</dt> 
 			<dd :class="$style.value">{{ note.event!.metadata.organizer.name }}</dd>
 		</template>
 		<template v-if="note.event!.metadata.audience">
-			<dt :class="$style.key">{{ "Audience" }}</dt> 
+			<dt :class="$style.key">{{ i18n.ts._event.audience }}</dt> 
 			<dd :class="$style.value">{{ note.event!.metadata.audience.name }}</dd>
 		</template>
 		<template v-if="note.event!.metadata.inLanguage">
-			<dt :class="$style.key">{{ "Language" }}</dt> 
+			<dt :class="$style.key">{{ i18n.ts._event.language }}</dt> 
 			<dd :class="$style.value">{{ note.event!.metadata.inLanguage }}</dd>
 		</template>
 		<template v-if="note.event!.metadata.typicalAgeRange">
-			<dt :class="$style.key">{{ "Ages" }}</dt> 
+			<dt :class="$style.key">{{ i18n.ts._event.ageRange }}</dt> 
 			<dd :class="$style.value">{{ note.event!.metadata.typicalAgeRange }}</dd>
 		</template>
 		<template v-if="note.event!.metadata.performer">
-			<dt :class="$style.key">{{ "Performers" }}</dt> 
+			<dt :class="$style.key">{{ i18n.ts._event.performers }}</dt> 
 			<dd :class="$style.value">{{ note.event!.metadata.performer.join(', ') }}</dd>
 		</template>
 		<template v-if="note.event!.metadata.offers?.url">
-			<dt :class="$style.key">{{ "Tickets" }}</dt> 
-			<dd :class="$style.value">{{ note.event!.metadata.url }}</dd>
+			<dt :class="$style.key">{{ i18n.ts._event.ticketsUrl }}</dt> 
+			<dd :class="$style.value">{{ note.event!.metadata.offers.url }}</dd>
 		</template>
 		<template v-if="note.event!.metadata.isAccessibleForFree">
-			<dt :class="$style.key">{{ "Free" }}</dt> 
+			<dt :class="$style.key">{{ i18n.ts._event.isFree }}</dt> 
 			<dd :class="$style.value">{{ "Yes" }}</dd>
 		</template>
 		<template v-if="note.event!.metadata.offers?.price">
-			<dt :class="$style.key">{{ "Price" }}</dt> 
+			<dt :class="$style.key">{{ i18n.ts._event.price }}</dt> 
 			<dd :class="$style.value">{{ note.event!.metadata.offers.price }}</dd>
 		</template>
 		<template v-if="note.event!.metadata.offers?.availabilityStarts || note.event!.metadata.offers?.availabilityEnds">
-			<dt :class="$style.key">{{ "Tickets Available" }}</dt> 
+			<dt :class="$style.key">{{ i18n.ts._event.availability }}</dt> 
 			<dd :class="$style.value">
 				{{ [
-					(note.event!.metadata.offers.availabilityStarts ? 'From ' + note.event!.metadata.offers.availabilityStarts : ''), 
-					(note.event!.metadata.offers.availabilityEnds ? 'Until ' + note.event!.metadata.offers.availabilityEnds : '')]
+					(note.event!.metadata.offers.availabilityStarts ? i18n.ts._event.from + note.event!.metadata.offers.availabilityStarts : ''), 
+					(note.event!.metadata.offers.availabilityEnds ? i18n.ts._event.until + note.event!.metadata.offers.availabilityEnds : '')]
 					.join(' ') }}
 			</dd>
 		</template>
 		<template v-if="note.event!.metadata.keywords">
-			<dt :class="$style.key">{{ "Keywords" }}</dt> 
+			<dt :class="$style.key">{{ i18n.ts._event.keywords }}</dt> 
 			<dd :class="$style.value">{{ note.event!.metadata.keywords }}</dd>
 		</template>
 	</dl>