@designcrowd/fe-shared-lib 1.5.0 → 1.5.1-icontranslation

package/src/atoms/components/design-com/Icon/Icon.stories.js

@@ -80,3 +80,65 @@ export const IconSample = () => {
 IconSample.story = {
   name: 'Dcom Icon Library',
 };
+
+export const IconInternationalization = () => {
+  return {
+    components: {
+      Icon,
+    },
+    data() {
+      return {
+        languages: [
+          { code: 'en', name: 'English' },
+          { code: 'fr', name: 'French' },
+          { code: 'es', name: 'Spanish' },
+          { code: 'pt', name: 'Portuguese' },
+          { code: 'de', name: 'German' },
+        ],
+      };
+    },
+    template: `
+      <div>
+        <h3 class="tw-font-sans tw-mb-4 tw-text-lg tw-font-bold">Internationalization (i18n) Support</h3>
+        <p class="tw-font-sans tw-mb-4">The <code>lang</code> prop allows you to specify the language code for screen readers. This is crucial for proper accessibility in internationalized applications.</p>
+
+        <table class="tw-w-full tw-mb-6">
+          <thead>
+            <tr>
+              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Language</th>
+              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Icon</th>
+              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+            </tr>
+          </thead>
+          <tr v-for="(language, i) in languages" :key="i" :class="{'tw-bg-grayscale-200': i % 2 !== 0}">
+            <td class="tw-p-4 tw-font-sans">{{ language.name }} ({{ language.code }})</td>
+            <td class="tw-p-4">
+              <Icon name="heart" size="md" :lang="language.code" />
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Icon name="heart" size="md" lang="{{ language.code }}" /&gt;
+              </code>
+            </td>
+          </tr>
+        </table>
+
+        <div class="tw-font-sans tw-bg-blue-50 tw-p-4 tw-rounded tw-border tw-border-blue-200">
+          <h4 class="tw-font-bold tw-mb-2">Usage in i18n Applications:</h4>
+          <p class="tw-mb-2">In Vue applications with i18n, you can dynamically pass the current locale:</p>
+          <pre class="tw-bg-gray-100 tw-p-3 tw-rounded tw-text-sm tw-overflow-x-auto"><code>&lt;Icon
+  name="feature.iconName"
+  size="md"
+  :lang="$i18n.locale.split('-')[0]"
+  :alt-text="$t('icons.heart.title')"
+/&gt;</code></pre>
+          <p class="tw-mt-2 tw-text-sm tw-text-gray-600">Note: The lang prop defaults to 'en' for backward compatibility.</p>
+        </div>
+      </div>
+    `,
+  };
+};
+
+IconInternationalization.story = {
+  name: 'Internationalization (lang prop)',
+};

package/src/atoms/components/design-com/Icon/Icon.vue

@@ -18,8 +18,8 @@
       aria-labelledby="title"
       aria-describedby="desc"
     >
-      <title :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
-      <desc :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
+      <title :id="`${name}-${id}-title`" :lang="lang">{{ title }}</title>
+      <desc :id="`${name}-${id}-desc`" :lang="lang">{{ description }}</desc>
       <component :is="`icon-${iconName}`"></component>
     </svg>
   </div>
@@ -118,6 +118,11 @@ export default {
       required: false,
       default: '',
     },
+    lang: {
+      type: String,
+      required: false,
+      default: 'en',
+    },
   },
   data() {
     return {