feat(web-core): new VtsLink component #8000
Conversation
ByScripts
force-pushed
the
web-core/vts-link
branch
from
eba6c5d
to
ce0408a
Compare
| @@ -0,0 +1,137 @@ | |||
| <template> | |||
There was a problem hiding this comment.
The component's version is missing:
| <template> | |
| <!-- v1 --> | |
| <template> |
| @@ -0,0 +1,137 @@ | |||
| <template> | |||
| <component :is="component" :class="classes" class="vts-link" v-bind="attributes"> | |||
| <UiIcon :icon="icon" color="current" /> | |||
There was a problem hiding this comment.
Since the icon component has been updated to VtsIcon, what do you think of rebasing this PR and using the new version of the icon component?
| <UiIcon :icon="icon" color="current" /> | |
| <VtsIcon :icon color="current" /> |
| small: 'typo p3-regular', | ||
| medium: 'typo p1-regular', |
There was a problem hiding this comment.
In the typography styles, there is a -underline variant, what do you think of using it? This would avoid adding the text-decoration CSS property and match the typography used in the design system:
| small: 'typo p3-regular', | |
| medium: 'typo p1-regular', | |
| small: 'typo p3-regular-underline', | |
| medium: 'typo p1-regular-underline', |
| align-items: center; | ||
| gap: 0.8rem; | ||
| color: var(--vts-link--color); | ||
| text-decoration: underline; |
There was a problem hiding this comment.
Not needed if using the -underline typography variants:
| text-decoration: underline; |
| <VtsLink v-bind="properties">This is a link</VtsLink> | ||
|
|
||
| <div v-if="!properties.to && !properties.href" class="info"> | ||
| <UiIcon :icon="faInfoCircle" color="normal" /> |
There was a problem hiding this comment.
Same as in VtsLink component, after a rebase, the icon component could be updated to VtsIcon and the color prop to 'brand':
| <UiIcon :icon="faInfoCircle" color="normal" /> | |
| <VtsIcon :icon="faInfoCircle" color="brand" /> |
| Link is disabled because no `href` or `to` is provided | ||
| </div> | ||
| <div v-else-if="properties.to && properties.href" class="info"> | ||
| <UiIcon :icon="faExclamationTriangle" color="warning" /> |
There was a problem hiding this comment.
Same here:
| <UiIcon :icon="faExclamationTriangle" color="warning" /> | |
| <VtsIcon :icon="faExclamationTriangle" color="warning" /> |
| <component :is="component" :class="classes" class="vts-link" v-bind="attributes"> | ||
| <UiIcon :icon="icon" color="current" /> | ||
| <slot /> | ||
| <UiIcon |
There was a problem hiding this comment.
Same here:
| <UiIcon | |
| <VtsIcon |
Description
New
VtsLinkcomponent (Design System)Checklist
Fixes #007,See xoa-support#42,See https://...)Introduced byCHANGELOG.unreleased.md