KRouterLink to Studio: Replace <router-link> in Studio with <KRouterLink> #219
Description
Product
Studio
Expected behavior
Studio should use KComponents where available to ensure compliance with our team's design principles.
Actual behavior
Studio currently uses <router-link> but we provide a KRouterLink (source) component which abides our design system's conventions.
Additional information
The search results linked here show the few places where <router-link> is used.
The API for <KRouterLink> should map basically 1-to-1 and handle all slots seamlessly.
KRouterLink & Icons
Note that the <KRouterLink> also has the icon and iconAfter slots and props (only use one) which accept a token from the Icons listed in our Design System.
So - for example - when you work on the item in @/frontend/channelList/views/Channel/ChannelItem.vue - you'll notice that there is a slot accepting an IconButton.
You may find it easier to apply the infoPrimary icon (which will be available in the 0.2.x branch if #217 is merged) roughly as <KRouterLink icon="infoPrimary" ... />.
Alternatively, you can put a <KIcon icon="info" color="$themeTokens.primary" slot="icon" /> between <KRouterLink> ... </KRouterLink> as a slot.
You're a button KRouterLink!
<KRouterLink> may also be styled as any of our Button styles (related: KRouterLink props & slots) - so if you see that the thing using the <router-link> in Studio looks like a proper button - or an IconButton - then you can insert a KDS flavored button with the props provided by that mixin.
I don't suspect that this will affect any tests as long as you apply any data-test attributes that are affixed to the router-link to the replacement KRouterLink (there is at least one in the .../treeView/index.vue component.