feat: adjust text component

Author: linspw

src/components/atoms/text/text.scss

@@ -227,5 +227,37 @@
     &-italic {
       --h-text--font-style: italic;
     }
+    &-ellipsis-nowrap {
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    &-link {
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+    &-dynamic {
+      & > a {
+        cursor: pointer;
+        color: var(--color-theme-secondary);
+        font-weight: 500;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      & > i {
+        font-style: italic;
+      }
+      & > strong,
+      & > b {
+        font-weight: 700;
+      }
+    }
   }
 }

src/components/atoms/text/text.stories.mdx

@@ -90,6 +90,8 @@ import HText from './text.vue';
 
 ### Tag use:
 
+Exemplo: normal html tags ou router link.
+
 <Canvas>
   <Story name="Tag use">
     {{
@@ -173,7 +175,9 @@ import HText from './text.vue';
             <h-text weight="medium">Medium</h-text>
             <h-text weight="bold">Bold</h-text>
             <h-text italic>Italic</h-text>
-            <h-text link tag="a" href="https://hyone-core-ui.netlify.app/">Link</h-text>
+            <h-text ellipsis-nowrap style="width: 150px;">ellipsisNowrap example</h-text>
+            <h-text dynamic><b>Italic</b> <i>italic</i> <a>link</a></h-text>
+            <h-text link tag="a" href="#">Link</h-text>
           </div>
         `,
     }}

src/components/atoms/text/text.vue

@@ -8,9 +8,14 @@
       [`h-text--align-${align}`]: align != 'inherit',
       [`h-text--weight-${weight}`]: weight != 'inherit',
       [`h-text--behavior-italic`]: italic,
+      [`h-text--behavior-ellipsis-nowrap`]: ellipsisNowrap,
+      [`h-text--behavior-link`]: link,
+      [`h-text--behavior-dynamic`]: dynamic,
       [`h-text--color-${color}`]: color != 'inherit',
       [`h-text--emphasis-${emphasis}`]: emphasis != 'inherit',
     }"
+    :href="href"
+    :to="href"
   >
     <slot />
   </component>
@@ -97,6 +102,7 @@ export default {
         'a',
         'strong',
         'caption',
+        'router-link',
       ]),
     },
     align: {
@@ -140,6 +146,22 @@ export default {
       type: Boolean,
       default: false,
     },
+    href: {
+      type: String,
+      default: null,
+    },
+    ellipsisNowrap: {
+      type: Boolean,
+      default: false,
+    },
+    link: {
+      type: Boolean,
+      default: false,
+    },
+    dynamic: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>