Merge pull request #136 from vuejs-jp/feature/sponsor-section-localization

fix: Localize the duration in sponsor section

Author: jiyuujin

.github/workflows/chromatic.yml

@@ -33,6 +33,7 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           workingDir: ./packages/ui
+          storybookBaseDir: ./packages/ui
           exitZeroOnChanges: true
           exitOnceUploaded: true
           onlyChanged: true

apps/web/app/components/SponsorPageSection.vue

@@ -1,12 +1,35 @@
 <script setup lang="ts">
-import { useRuntimeConfig } from '#imports'
 import { useI18n } from '#i18n'
+import { useRuntimeConfig } from '#imports'
 import { useColor, useTypography } from '@vuejs-jp/composable'
+import { useLocaleCurrent } from '@/composables/useLocaleCurrent'
 
 const config = useRuntimeConfig()
-const { locale } = useI18n()
 const { fontWeight, fontSize } = useTypography()
 const { color } = useColor()
+
+const { t, te } = useI18n()
+const { locale } = useLocaleCurrent()
+/**
+ * Get translation or return empty string
+ * @param key - translation key
+ * @returns translation or empty string
+ */
+function getTranslationOrDefault(key: string): string {
+  return te(key, locale.value) ? t(key) : ''
+}
+
+const periodStart = {
+  prefixYear: t('prefix_year'),
+  date: t('start_date'),
+  dayOfWeek: getTranslationOrDefault('day_of_week.monday'),
+}
+
+const periodEnd = {
+  suffixYear: t('suffix_year'),
+  date: t('end_date'),
+  dayOfWeek: getTranslationOrDefault('day_of_week.thursday'),
+}
 </script>
 
 <template>
@@ -37,10 +60,7 @@ const { color } = useColor()
         >
           {{ $t('sponsor.apply_period') }}
         </h3>
-        <VFDatePeriod
-          :start="{ year: 2024, date: '4.8', dayOfWeek: locale === 'ja' ? $t('day_of_week.monday') : '' }"
-          :end="{ date: '4.25', dayOfWeek: locale === 'ja' ? $t('day_of_week.thursday') : '' }"
-        />
+        <VFDatePeriod :start="periodStart" :end="periodEnd" />
       </template>
 
       <div class="sponsor-buttons">
@@ -69,8 +89,7 @@ const { color } = useColor()
 </template>
 
 <style scoped>
-@import url("~/assets/media.css");
-@import url("~/assets/sample.css");
+@import url('~/assets/media.css');
 
 .sponsor {
   --sponsor-padding: calc(var(--unit) * 5.25) 0;
@@ -95,6 +114,7 @@ const { color } = useColor()
   margin: 0 1.5%;
   background-color: white;
   max-width: 960px;
+  text-align: center;
 }
 
 .sponsor-text {
@@ -108,7 +128,7 @@ const { color } = useColor()
 
   &::v-deep a:hover {
     opacity: 0.4;
-    transition: .2s;
+    transition: 0.2s;
   }
 
   &:deep(p) {

apps/web/app/lang/en.json

@@ -4,11 +4,10 @@
   "about": "about",
   "back_to_top": "Back o Top",
   "not_found": "The page you are looking for cannot be found.",
-  "day_of_week": {
-    "monday": "Mon",
-    "tuesday": "Tue",
-    "thursday": "Thu"
-  },
+  "prefix_year": "",
+  "suffix_year": "2024",
+  "start_date": "April 8",
+  "end_date": "25,",
   "top_page": {
     "latest_information": "Get the latest information on our official social media",
     "date": "Octover 19th, 2024",

apps/web/app/lang/ja.json

@@ -4,6 +4,10 @@
   "about": "このサイトについて",
   "back_to_top": "トップに戻る",
   "not_found": "お探しのページが見つかりません。",
+  "prefix_year": "2024",
+  "suffix_year": "",
+  "start_date": "4.8",
+  "end_date": "4.25",
   "day_of_week": {
     "monday": "月",
     "tuesday": "火",

packages/ui/.storybook/main.js

@@ -12,6 +12,7 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-links',
     '@storybook/addon-viewport',
+    '@storybook/addon-toolbars',
   ],
   framework: {
     name: '@storybook/vue3-vite',

packages/ui/.storybook/preview.js

@@ -1,7 +1,44 @@
+import { setup } from '@storybook/vue3'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { createI18n } from 'vue-i18n'
 
 import './global.css'
 
+const i18n = createI18n({
+  locale: 'ja',
+  fallbackLocale: 'ja',
+  messages: {
+    ja: {
+      prefix_year: '2024',
+      suffix_year: '',
+      start_date: '4.8',
+      end_date: '4.25',
+      day_of_week: {
+        monday: '月',
+        tuesday: '火',
+        thursday: '木',
+      },
+    },
+    en: {
+      prefix_year: '',
+      suffix_year: '2024',
+      start_date: 'April 8',
+      end_date: '25,',
+      // dummy
+      day_of_week: {
+        monday: '',
+        tuesday: '',
+        thursday: '',
+      },
+      // end dummy
+    },
+  },
+})
+
+setup((app) => {
+  app.use(i18n)
+})
+
 export const parameters = {
   controls: {
     matchers: {
@@ -14,3 +51,22 @@ export const parameters = {
     defaultViewport: 'responsive',
   },
 }
+
+export const decorators = [
+  (story, context) => {
+    i18n.global.locale = context.globals.locale
+    return { template: '<story />' }
+  },
+]
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: '多言語設定',
+    defaultValue: 'ja',
+    toolbar: {
+      icon: 'globe',
+      items: ['ja', 'en'],
+    },
+  },
+}

packages/ui/components/date/Date.stories.ts

@@ -1,16 +1,19 @@
-import { StoryFn } from '@storybook/vue3'
+import { Meta, StoryObj } from '@storybook/vue3'
 import Date from './Date.vue'
 
-export default {
+const meta: Meta<typeof Date> = {
   title: 'date/Date',
+  tags: ['autodocs'],
   component: Date,
-  args: {
-    date: '4.1',
-    dayOfWeek: '月',
-  },
   argTypes: {
-    year: {
-      description: 'The year property',
+    prefixYear: {
+      description: 'The prefixYear property',
+      control: {
+        type: 'text',
+      },
+    },
+    suffixYear: {
+      description: 'The suffixYear property',
       control: {
         type: 'text',
       },
@@ -30,18 +33,37 @@ export default {
   },
 }
 
-const Template: StoryFn<unknown> = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Date },
-  setup() {
-    return { args }
-  },
-  template: '<Date v-bind="args" />',
-})
+export default meta
+
+type Story = StoryObj<typeof Date>
 
-export const Default = Template.bind({})
+/**
+ * Controlでpropsを切り替えると、日付と曜日表記が変わる
+ */
+export const PropsControls: Story = {
+  name: 'propsControls',
+  args: {
+    prefixYear: '2024',
+    suffixYear: '',
+    date: '5.8',
+    dayOfWeek: '月',
+  },
+  render: (args) => ({
+    components: { Date },
+    setup() {
+      return { args }
+    },
+    template: '<Date :="args" />',
+  })
+}
 
-export const WithYear = Template.bind({})
-WithYear.args = {
-  year: 2024,
+/**
+ * ツールバーで言語を切り替えると、日付と曜日表記が変わる
+ */
+export const I18n: Story = {
+  name: 'i18n',
+  render: () => ({
+    components: { Date },
+    template:  '<Date :prefix-year="$t(`prefix_year`)" :suffix-year="$t(`suffix_year`)" :date="$t(`start_date`)" :dayOfWeek="$t(`day_of_week.monday`)" />'
+  })
 }

packages/ui/components/date/Date.vue

@@ -2,30 +2,30 @@
 import { useColor, useTypography } from '@vuejs-jp/composable'
 
 export type DateProps = {
-  year?: number
+  prefixYear?: string
+  suffixYear?: string
   date: string
   dayOfWeek?: string
 }
 
-// eslint-disable-next-line no-unused-vars
-const props = defineProps<DateProps>()
+defineProps<DateProps>()
 
 const { fontWeight, fontSize } = useTypography()
 const { color } = useColor()
 </script>
 
 <template>
   <div class="datewrapper">
-    <!-- year -->
+    <!-- prefix year -->
     <span
-      v-if="year"
+      v-if="prefixYear"
       :style="{
         fontSize: fontSize('heading/300'),
         color: color('vue-blue'),
       }"
-      class="year"
+      class="year prefix-year"
     >
-      {{ year }}
+      {{ prefixYear }}
     </span>
     <!-- date -->
     <span
@@ -50,6 +50,17 @@ const { color } = useColor()
     >
       {{ dayOfWeek }}
     </span>
+    <!-- suffix year -->
+    <span
+      v-if="suffixYear"
+      :style="{
+        fontSize: fontSize('heading/300'),
+        color: color('vue-blue'),
+      }"
+      class="year suffix-year"
+    >
+      {{ suffixYear }}
+    </span>
   </div>
 </template>
 
@@ -61,9 +72,14 @@ const { color } = useColor()
 
 .year {
   display: inline-block;
-  margin-right: 6px;
   font-size: 24px;
 }
+.prefix-year {
+  margin-right: 6px;
+}
+.suffix-year {
+  margin-left: 6px;
+}
 
 .date {
   display: inline-block;
@@ -80,6 +96,5 @@ const { color } = useColor()
   height: 20px;
   border-radius: 2px;
   margin-left: 4px;
-
 }
 </style>