Implement vue-i18n with a basic example and clean up models.

thunderbird · Sep 16, 2024 · 9f5748b · 9f5748b
1 parent d306ace
commit 9f5748b
Show file tree

Hide file tree

Showing 46 changed files with 213 additions and 1,116 deletions.
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -0,0 +1 @@
+<body class="services-ui-base"></body>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,7 +4,9 @@
   "private": true,
   "type": "module",
   "license": "MPL-2.0",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "main": "./dist/services-ui.umd.cjs",
   "module": "./dist/services-ui.js",
   "exports": {
@@ -26,7 +28,8 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "vue": "^3.4.29"
+    "vue": "^3.4.29",
+    "vue-i18n": "^10.0.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",

diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
@@ -2,8 +2,8 @@
 /*@import './fonts.css';*/
 @import './variables.css';
 
-/* Force First Time User Experience to be different from the rest of the site */
-.page-ftue, .new-design {
+/* Apply this to your body or wrapper class for use with services-ui elements (temp) */
+.services-ui-base {
   font-family: 'Inter', 'sans-serif';
   font-size: 0.8125rem;
 }

diff --git a/src/assets/styles/variables.css b/src/assets/styles/variables.css
@@ -1,6 +1,7 @@
 html {
   --border-radius: 0.1875rem; /* 3px */
-  --txt-input: 0.8125rem; /* 13px */
+  --txt-default: 0.8125rem; /* 13px */
+  --txt-input: var(--txt-default); /* 13px */
   --line-height-input: 1.25rem; /* 20px */
 
   --transition: all 250ms ease-out;

diff --git a/src/composable/i18n.ts b/src/composable/i18n.ts
@@ -0,0 +1,23 @@
+// init localization
+import { createI18n } from 'vue-i18n';
+
+// language source files
+import de from '@/locales/de.json';
+import en from '@/locales/en.json';
+
+const messages = {
+  de, // German
+  en, // English
+};
+const loc = localStorage?.getItem('locale') ?? navigator.language.split('-')[0];
+const instance = createI18n<false>({
+  legacy: false,
+  globalInjection: true,
+  locale: loc,
+  fallbackLocale: 'en',
+  messages,
+});
+
+export default instance;
+export const i18n = instance.global;
+export const t = i18n.t;
diff --git a/src/elements/BubbleSelect.stories.ts b/src/elements/BubbleSelect.stories.ts
@@ -57,7 +57,6 @@ type Story = StoryObj<typeof meta>;
  */
 export const Weekdays: Story = {
   args: {
-    type: 'primary',
     default: 'Select Days',
     required: true
   },

diff --git a/src/elements/BubbleSelect.vue b/src/elements/BubbleSelect.vue
@@ -5,7 +5,7 @@ import { SelectOption } from "@/models";
 interface Props {
   options: SelectOption[];
   required: boolean;
-};
+}
 
 withDefaults(defineProps<Props>(), {
   required: false
@@ -101,6 +101,7 @@ const toggleBubble = (option: SelectOption) => {
   font-weight: 700;
   line-height: 150%;
   color: var(--colour-ti-muted);
+  cursor: pointer;
 }
 .selected {
   background-color: var(--colour-service-primary);

diff --git a/src/elements/SelectInput.vue b/src/elements/SelectInput.vue
@@ -8,14 +8,14 @@ interface Props {
   options: SelectOption[];
   required?: boolean;
   disabled?: boolean;
-};
+}
 withDefaults(defineProps<Props>(), {
   required: false,
   disabled: false,
-})
+});
 
 defineEmits(['submit']);
-const model = defineModel<number|string>();
+const model = defineModel<any>();
 const isInvalid = ref(false);
 const validationMessage = ref('');
 
@@ -56,12 +56,12 @@ const onInvalid = (evt: HTMLInputElementEvent) => {
 .wrapper {
   display: flex;
   flex-direction: column;
-  align-items: center;
   color: var(--colour-ti-base);
   font-family: 'Inter', 'sans-serif';
   font-size: var(--txt-input);
   line-height: var(--line-height-input);
   font-weight: 400;
+  max-width: 320px;
 }
 
 .label {

diff --git a/src/elements/SyncCard.stories.ts b/src/elements/SyncCard.stories.ts
@@ -20,9 +20,27 @@ const meta = {
   args: {
     // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
     onClick: fn(),
-    modelValue: [],
+    fakeModelValue: [],
     title: 'Sync Card Demo',
   },
+  parameters: {
+    docs: {
+      /*
+      source: {
+        format: true,
+        code: `
+        <sync-card title="Sync Card Demo" v-model="sync-card-model">
+          <template v-slot:icon>
+            <span>
+              <img :src="icon" alt="icon alt text"/>
+            </span>
+          </template>
+        </sync-card>
+      `
+      },
+       */
+    },
+  },
   render: (args) => ({
     components: {SyncCard},
     setup() {
@@ -101,5 +119,5 @@ export const FileSync: Story = {
         checked: false,
       }
     ]
-  }
+  },
 };
diff --git a/src/elements/SyncCard.vue b/src/elements/SyncCard.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-//import { useI18n } from 'vue-i18n';
+import { t } from '@/composable/i18n';
 import { CalendarItem } from '@/models';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
 
-//const { t } = useI18n();
 const model = defineModel<CalendarItem[]>();
 
 const selected = computed(() => model.value.filter((item) => item.checked).length);
@@ -18,11 +17,8 @@ const selectAll = () => {
 // component properties
 interface Props {
   title: string;
-};
+}
 defineProps<Props>();
-
-// Polyfill l10n for now
-const t = (key) => key;
 </script>
 
 <template>
@@ -34,17 +30,17 @@ const t = (key) => key;
           {{ title }}
         </div>
         <div class="selected">
-          {{ t('ftue.itemsSelected', {'count': selected}) }}
+          {{ t('syncCard.itemsSelected', {'count': selected}) }}
         </div>
       </div>
-      <primary-button class="select-all" size="small" @click="selectAll" :title="t('ftue.selectAllCalendars')">
-        {{ t('ftue.selectAll') }}
+      <primary-button class="select-all" size="small" @click="selectAll" :title="t('syncCard.selectAllCalendars')">
+        {{ t('syncCard.selectAll') }}
       </primary-button>
     </div>
     <ul class="rows">
       <li class="row" v-for="(item, index) in model" :key="item.key">
         <label>
-          <input type="checkbox" v-model="model[index].checked"/>
+          <input class="tbpro-checkbox" type="checkbox" v-model="model[index].checked"/>
           {{ item.label }}
         </label>
       </li>
@@ -55,6 +51,11 @@ const t = (key) => key;
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
+.title {
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+}
+
 .wrapper {
   --colour-highlight: var(--colour-service-primary);
   border-radius: 0.5625rem;
@@ -72,6 +73,8 @@ const t = (key) => key;
 }
 
 .header {
+  box-sizing: border-box;
+
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -91,6 +94,7 @@ const t = (key) => key;
 
 .selected {
   font-size: 0.5625rem;
+  line-height: var(--txt-default);
   color: var(--colour-highlight);
 }
 
@@ -120,7 +124,7 @@ label {
   align-items: center;
 }
 
-input {
+.tbpro-checkbox {
   width: 1.0rem;
   height: 1.0rem;
   border-radius: var(--border-radius);

diff --git a/src/icons/CopyIcon.vue b/src/icons/CopyIcon.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-/*
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
-*/
-const t = (key:any) => key;
+import { t } from '@/composable/i18n';
 </script>
 
 <template>
-  <svg :aria-label="t('label.copyLink')" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg :aria-label="t('copyIcon.copyLink')" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g id="layer1">
       <path id="rect560" opacity="0.2" d="M13.0002 5.00014V12.0001C13.0002 13.6621 11.6622 15.0001 10.0002 15.0001H7.00024V16.0001C7.00024 17.6621 8.33825 19.0001 10.0002 19.0001H16.0002C17.6622 19.0001 19.0002 17.6621 19.0002 16.0001V8.00014C19.0002 6.33814 17.6622 5.00014 16.0002 5.00014H13.0002Z" fill="currentColor"/>
       <path id="rect292" d="M4 0C1.8013 0 0 1.8013 0 4V12C0 14.1987 1.8013 16 4 16H6C6 18.1987 7.80131 20 10 20H16C18.1987 20 20 18.1987 20 16V8C20 5.8013 18.1987 4 16 4H14C14 1.8013 12.1987 0 10 0H4ZM4 2H10C11.1253 2 12 2.8747 12 4V12C12 13.1253 11.1253 14 10 14H4C2.87471 14 2 13.1253 2 12V4C2 2.8747 2.87471 2 4 2ZM5 4C4.446 4 4 4.446 4 5C4 5.554 4.446 6 5 6H9C9.554 6 10 5.554 10 5C10 4.446 9.554 4 9 4H5ZM14 6H16C17.1253 6 18 6.8747 18 8V16C18 17.1253 17.1253 18 16 18H10C8.87471 18 8 17.1253 8 16H10C12.1987 16 14 14.1987 14 12V6ZM5 8C4.446 8 4 8.446 4 9C4 9.554 4.446 10 5 10H9C9.554 10 10 9.554 10 9C10 8.446 9.554 8 9 8H5Z" fill="currentColor"/>

diff --git a/src/icons/NoticeCriticalIcon.vue b/src/icons/NoticeCriticalIcon.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-/*
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
-*/
-const t = (key:any) => key;
+import { t } from '@/composable/i18n';
 </script>
 
 <template>

diff --git a/src/icons/NoticeInfoIcon.vue b/src/icons/NoticeInfoIcon.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-/*
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
-*/
-const t = (key:any) => key;
+import { t } from '@/composable/i18n';
 </script>
 
 <template>