@designcrowd/fe-shared-lib 1.5.7-eng-3522 → 1.5.7-fix-icon

package/src/atoms/components/Tooltip/Tooltip.vue

@@ -1,196 +1,196 @@
-<template>
-  <div
-    :class="{
-      ['tw-inline-flex tw-relative']: true,
-      ['tw-justify-center']: alignment === 'center' && (tooltipDirection === 'top' || tooltipDirection === 'bottom'),
-      ['tw-justify-end']: alignment === 'right' && (tooltipDirection === 'top' || tooltipDirection === 'bottom'),
-      ['tw-items-center']: alignment === 'middle' && (tooltipDirection === 'right' || tooltipDirection === 'left'),
-      ['tw-items-end']: alignment === 'top' && (tooltipDirection === 'right' || tooltipDirection === 'left'),
-    }"
-  >
-    <span
-      class="shared-tooltip__open"
-      :class="{ 'tw-w-full': fullWidth }"
-      @mouseover="getTooltipDirection"
-      @mouseleave="tooltipDirection = direction"
-    >
-      <slot name="open"></slot>
-    </span>
-    <div
-      :class="{
-        ['shared-tooltip__content tw-absolute tw-hidden']: true,
-        ['tw-m-3']: !shouldShowIcon,
-        ['tw-bottom-full tw-flex-col-reverse']: tooltipDirection === 'top',
-        ['tw-left-full tw-flex-row']: tooltipDirection === 'right',
-        ['tw-top-full tw-flex-col']: tooltipDirection === 'bottom',
-        ['tw-right-full tw-flex-row-reverse']: tooltipDirection === 'left',
-      }"
-    >
-      <Icon
-        v-if="shouldShowIcon && tooltipDirection === 'top'"
-        :class="{
-          ['tw-flex tw-z-20 tw--mt-px']: true,
-          ['tw-justify-end']: alignment === 'right',
-          ['tw-justify-center']: alignment === 'center',
-        }"
-        name="tooltip-bottom"
-        :color="color"
-      />
-      <Icon
-        v-if="shouldShowIcon && tooltipDirection === 'right'"
-        :class="{
-          ['tw-flex tw-z-20 tw--mr-1.5']: true,
-          ['tw-items-end']: alignment === 'top',
-          ['tw-items-center']: alignment === 'middle',
-        }"
-        name="tooltip-left"
-        :color="color"
-      />
-      <Icon
-        v-if="shouldShowIcon && tooltipDirection === 'bottom'"
-        :class="{
-          ['tw-flex tw-z-20 tw--mb-1.5']: true,
-          ['tw-justify-end']: alignment === 'right',
-          ['tw-justify-center']: alignment === 'center',
-        }"
-        name="tooltip-top"
-        :color="color"
-      />
-      <Icon
-        v-if="shouldShowIcon && tooltipDirection === 'left'"
-        :class="{
-          ['tw-flex tw-z-20 tw--ml-px']: true,
-          ['tw-items-end']: alignment === 'top',
-          ['tw-items-center']: alignment === 'middle',
-        }"
-        name="tooltip-right"
-        :color="color"
-      />
-      <div
-        :ref="tooltipBodyRef"
-        :class="{
-          [`tw-border-${color} tw-bg-white tw-border tw-border-solid tw-shadow tw-p-3 tw-z-10 tw-text-left`]: true,
-          [`tw-w-60`]: !fullWidth,
-          [`tw-w-full`]: fullWidth,
-          [`shared-tooltip__body`]: !hasExtendedWidth,
-          [`shared-tooltip__extended-body`]: hasExtendedWidth,
-          ['tw-bottom-full']: tooltipDirection === 'top',
-          ['tw-left-full tw--ml-px']: tooltipDirection === 'right',
-          ['tw-top-full tw--mt-px']: tooltipDirection === 'bottom',
-          ['tw-right-full']: tooltipDirection === 'left',
-          ['tw-rounded']: isRoundedCorner,
-        }"
-      >
-        <slot name="content"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Icon from '../Icon/Icon.vue';
-
-export default {
-  components: {
-    Icon,
-  },
-  props: {
-    color: {
-      type: String,
-      required: false,
-      default: 'info-500',
-    },
-    direction: {
-      type: String,
-      required: false,
-      default: 'top',
-    },
-    alignment: {
-      type: String,
-      required: false,
-      default: 'left',
-    },
-    hasExtendedWidth: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    fullWidth: {
-      type: Boolean,
-      default: false,
-    },
-    isRoundedCorner: {
-      type: Boolean,
-      default: false,
-    },
-    shouldShowIcon: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      tooltipDirection: null,
-      tooltipBodyRef: 'js-tooltip-body',
-    };
-  },
-  mounted() {
-    this.tooltipDirection = this.direction;
-  },
-  methods: {
-    getTooltipDirection() {
-      const tooltipBodyBoundingRect = this.$refs[this.tooltipBodyRef].getBoundingClientRect();
-
-      if (this.direction === 'top') {
-        if (tooltipBodyBoundingRect.top < 0) {
-          this.tooltipDirection = 'bottom';
-        } else {
-          this.tooltipDirection = 'top';
-        }
-      }
-
-      if (this.direction === 'right') {
-        if (tooltipBodyBoundingRect.right > window.innerWidth) {
-          this.tooltipDirection = 'left';
-        } else {
-          this.tooltipDirection = 'right';
-        }
-      }
-
-      if (this.direction === 'bottom') {
-        if (tooltipBodyBoundingRect.bottom > window.innerHeight) {
-          this.tooltipDirection = 'top';
-        } else {
-          this.tooltipDirection = 'bottom';
-        }
-      }
-
-      if (this.direction === 'left') {
-        if (tooltipBodyBoundingRect.left < 0) {
-          this.tooltipDirection = 'right';
-        } else {
-          this.tooltipDirection = 'left';
-        }
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.shared-tooltip__body {
-  max-width: 15rem;
-}
-.shared-tooltip__extended-body {
-  max-width: 27rem;
-  width: 27rem;
-}
-
-.shared-tooltip__open:hover {
-  cursor: help;
-}
-
-.shared-tooltip__open:hover + .shared-tooltip__content {
-  display: flex;
-}
-</style>
+<template>
+  <div
+    :class="{
+      ['tw-inline-flex tw-relative']: true,
+      ['tw-justify-center']: alignment === 'center' && (tooltipDirection === 'top' || tooltipDirection === 'bottom'),
+      ['tw-justify-end']: alignment === 'right' && (tooltipDirection === 'top' || tooltipDirection === 'bottom'),
+      ['tw-items-center']: alignment === 'middle' && (tooltipDirection === 'right' || tooltipDirection === 'left'),
+      ['tw-items-end']: alignment === 'top' && (tooltipDirection === 'right' || tooltipDirection === 'left'),
+    }"
+  >
+    <span
+      class="shared-tooltip__open"
+      :class="{ 'tw-w-full': fullWidth }"
+      @mouseover="getTooltipDirection"
+      @mouseleave="tooltipDirection = direction"
+    >
+      <slot name="open"></slot>
+    </span>
+    <div
+      :class="{
+        ['shared-tooltip__content tw-absolute tw-hidden']: true,
+        ['tw-m-3']: !shouldShowIcon,
+        ['tw-bottom-full tw-flex-col-reverse']: tooltipDirection === 'top',
+        ['tw-left-full tw-flex-row']: tooltipDirection === 'right',
+        ['tw-top-full tw-flex-col']: tooltipDirection === 'bottom',
+        ['tw-right-full tw-flex-row-reverse']: tooltipDirection === 'left',
+      }"
+    >
+      <Icon
+        v-if="shouldShowIcon && tooltipDirection === 'top'"
+        :class="{
+          ['tw-flex tw-z-20 tw--mt-px']: true,
+          ['tw-justify-end']: alignment === 'right',
+          ['tw-justify-center']: alignment === 'center',
+        }"
+        name="tooltip-bottom"
+        :color="color"
+      />
+      <Icon
+        v-if="shouldShowIcon && tooltipDirection === 'right'"
+        :class="{
+          ['tw-flex tw-z-20 tw--mr-1.5']: true,
+          ['tw-items-end']: alignment === 'top',
+          ['tw-items-center']: alignment === 'middle',
+        }"
+        name="tooltip-left"
+        :color="color"
+      />
+      <Icon
+        v-if="shouldShowIcon && tooltipDirection === 'bottom'"
+        :class="{
+          ['tw-flex tw-z-20 tw--mb-1.5']: true,
+          ['tw-justify-end']: alignment === 'right',
+          ['tw-justify-center']: alignment === 'center',
+        }"
+        name="tooltip-top"
+        :color="color"
+      />
+      <Icon
+        v-if="shouldShowIcon && tooltipDirection === 'left'"
+        :class="{
+          ['tw-flex tw-z-20 tw--ml-px']: true,
+          ['tw-items-end']: alignment === 'top',
+          ['tw-items-center']: alignment === 'middle',
+        }"
+        name="tooltip-right"
+        :color="color"
+      />
+      <div
+        :ref="tooltipBodyRef"
+        :class="{
+          [`tw-border-${color} tw-bg-white tw-border tw-border-solid tw-shadow tw-p-3 tw-z-10 tw-text-left`]: true,
+          [`tw-w-60`]: !fullWidth,
+          [`tw-w-full`]: fullWidth,
+          [`shared-tooltip__body`]: !hasExtendedWidth,
+          [`shared-tooltip__extended-body`]: hasExtendedWidth,
+          ['tw-bottom-full']: tooltipDirection === 'top',
+          ['tw-left-full tw--ml-px']: tooltipDirection === 'right',
+          ['tw-top-full tw--mt-px']: tooltipDirection === 'bottom',
+          ['tw-right-full']: tooltipDirection === 'left',
+          ['tw-rounded']: isRoundedCorner,
+        }"
+      >
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    color: {
+      type: String,
+      required: false,
+      default: 'info-500',
+    },
+    direction: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+    alignment: {
+      type: String,
+      required: false,
+      default: 'left',
+    },
+    hasExtendedWidth: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false,
+    },
+    isRoundedCorner: {
+      type: Boolean,
+      default: false,
+    },
+    shouldShowIcon: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      tooltipDirection: null,
+      tooltipBodyRef: 'js-tooltip-body',
+    };
+  },
+  mounted() {
+    this.tooltipDirection = this.direction;
+  },
+  methods: {
+    getTooltipDirection() {
+      const tooltipBodyBoundingRect = this.$refs[this.tooltipBodyRef].getBoundingClientRect();
+
+      if (this.direction === 'top') {
+        if (tooltipBodyBoundingRect.top < 0) {
+          this.tooltipDirection = 'bottom';
+        } else {
+          this.tooltipDirection = 'top';
+        }
+      }
+
+      if (this.direction === 'right') {
+        if (tooltipBodyBoundingRect.right > window.innerWidth) {
+          this.tooltipDirection = 'left';
+        } else {
+          this.tooltipDirection = 'right';
+        }
+      }
+
+      if (this.direction === 'bottom') {
+        if (tooltipBodyBoundingRect.bottom > window.innerHeight) {
+          this.tooltipDirection = 'top';
+        } else {
+          this.tooltipDirection = 'bottom';
+        }
+      }
+
+      if (this.direction === 'left') {
+        if (tooltipBodyBoundingRect.left < 0) {
+          this.tooltipDirection = 'right';
+        } else {
+          this.tooltipDirection = 'left';
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.shared-tooltip__body {
+  max-width: 15rem;
+}
+.shared-tooltip__extended-body {
+  max-width: 27rem;
+  width: 27rem;
+}
+
+.shared-tooltip__open:hover {
+  cursor: help;
+}
+
+.shared-tooltip__open:hover + .shared-tooltip__content {
+  display: flex;
+}
+</style>

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

@@ -1,82 +1,144 @@
-import Icon from './Icon.vue';
-
-export default {
-  title: 'Components/DesignCom/Icons',
-  component: Icon,
-};
-
-export const IconSample = () => {
-  return {
-    components: {
-      Icon,
-    },
-    data() {
-      return {
-        sizes: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
-        icons: [
-          { name: 'annotate-heart' },
-          { name: 'award' },
-          { name: 'bulb' },
-          { name: 'bezier-curve' },
-          { name: 'card' },
-          { name: 'check-circle-light' },
-          { name: 'chevron-down' },
-          { name: 'chevron-left' },
-          { name: 'chevron-right' },
-          { name: 'chevron-up' },
-          { name: 'diamond' },
-          { name: 'download' },
-          { name: 'file' },
-          { name: 'file-empty' },
-          { name: 'filter' },
-          { name: 'font' },
-          { name: 'headphones' },
-          { name: 'heart' },
-          { name: 'image' },
-          { name: 'logo' },
-          { name: 'minus-circle-light' },
-          { name: 'pen' },
-          { name: 'palette' },
-          { name: 'plus-circle-light' },
-          { name: 'question-circle-filled' },
-          { name: 'search' },
-          { name: 'star-filled' },
-          { name: 'star-hollow' },
-          { name: 'text' },
-          { name: 'users' },
-        ],
-      };
-    },
-    template: `
-      <table class="tw-w-full">
-        <thead>
-          <tr>
-            <th class="tw-text-center tw-p-4 tw-bg-grayscale-400 tw-font-sans">Icon ({{icons.length}})</th>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-          </tr>
-        </thead>
-        <tr v-for="(icon, i) in icons" :key="i" :class="{'tw-bg-grayscale-200': i % 2 !== 0}">
-          <td class="tw-p-4">
-            <div class="tw-grid tw-grid-cols-8 tw-gap-4 tw-items-center" style="grid-template-columns: repeat(8, minmax(0, 1fr));">
-              <Icon
-                v-for="size in sizes"
-                :name="icon.name"
-                :alt-text="icon.altText"
-                :size="size"
-              />
-            </div>
-          </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="{{ icon.name }}" :alt-text="{{ icon.altText }}" size="{{ sizes.join('|') }}" /&gt;
-            </code>
-          </td>
-        </tr>
-      </table>
-    `,
-  };
-};
-
-IconSample.story = {
-  name: 'Dcom Icon Library',
-};
+import Icon from './Icon.vue';
+
+export default {
+  title: 'Components/DesignCom/Icons',
+  component: Icon,
+};
+
+export const IconSample = () => {
+  return {
+    components: {
+      Icon,
+    },
+    data() {
+      return {
+        sizes: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
+        icons: [
+          { name: 'annotate-heart' },
+          { name: 'award' },
+          { name: 'bulb' },
+          { name: 'bezier-curve' },
+          { name: 'card' },
+          { name: 'check-circle-light' },
+          { name: 'chevron-down' },
+          { name: 'chevron-left' },
+          { name: 'chevron-right' },
+          { name: 'chevron-up' },
+          { name: 'diamond' },
+          { name: 'download' },
+          { name: 'file' },
+          { name: 'file-empty' },
+          { name: 'filter' },
+          { name: 'font' },
+          { name: 'headphones' },
+          { name: 'heart' },
+          { name: 'image' },
+          { name: 'logo' },
+          { name: 'minus-circle-light' },
+          { name: 'pen' },
+          { name: 'palette' },
+          { name: 'plus-circle-light' },
+          { name: 'question-circle-filled' },
+          { name: 'search' },
+          { name: 'star-filled' },
+          { name: 'star-hollow' },
+          { name: 'text' },
+          { name: 'users' },
+        ],
+      };
+    },
+    template: `
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-center tw-p-4 tw-bg-grayscale-400 tw-font-sans">Icon ({{icons.length}})</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tr v-for="(icon, i) in icons" :key="i" :class="{'tw-bg-grayscale-200': i % 2 !== 0}">
+          <td class="tw-p-4">
+            <div class="tw-grid tw-grid-cols-8 tw-gap-4 tw-items-center" style="grid-template-columns: repeat(8, minmax(0, 1fr));">
+              <Icon
+                v-for="size in sizes"
+                :name="icon.name"
+                :alt-text="icon.altText"
+                :size="size"
+              />
+            </div>
+          </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="{{ icon.name }}" :alt-text="{{ icon.altText }}" size="{{ sizes.join('|') }}" /&gt;
+            </code>
+          </td>
+        </tr>
+      </table>
+    `,
+  };
+};
+
+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)',
+};