@propelinc/citrus-ui 0.3.12 → 0.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"

package/src/components/CListItem.vue

@@ -8,8 +8,9 @@
     v-on="$listeners"
   >
     <div class="list-item__icon">
-      <font-awesome-icon v-if="icon" data-test="list-item-icon" fixed-width :icon="icon" />
-      <slot name="icon" />
+      <slot name="icon">
+        <font-awesome-icon v-if="icon" data-test="list-item-icon" fixed-width :icon="icon" />
+      </slot>
     </div>
 
     <div class="list-item__content" data-test="list-item-content">
@@ -17,8 +18,9 @@
     </div>
 
     <div class="list-item__action" data-test="list-item-action">
-      <font-awesome-icon v-if="tappable" :icon="faChevronRight" />
-      <slot name="action" />
+      <slot name="action">
+        <font-awesome-icon v-if="tappable" :icon="faChevronRight" />
+      </slot>
     </div>
   </component>
 </template>

package/src/components/CTextLink.vue

@@ -0,0 +1,54 @@
+<template>
+  <component
+    :is="component"
+    :to="to"
+    :href="href"
+    :target="target"
+    :tabindex="isRoleButton ? 0 : null"
+    :role="isRoleButton ? 'button' : null"
+    class="text-link"
+    :class="{ 'text-link--light': light }"
+    v-on="$listeners"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { RawLocation } from 'vue-router';
+
+@Component({ name: 'CTextLink' })
+export default class CTextLink extends Vue {
+  @Prop([String, Object]) to?: RawLocation;
+  @Prop(String) href?: string;
+  @Prop(String) target?: string;
+  @Prop({ type: Boolean, default: false }) light!: boolean;
+
+  get component(): string {
+    if (this.to) {
+      return 'router-link';
+    } else {
+      return 'a';
+    }
+  }
+
+  get isRoleButton(): boolean {
+    return !this.to && !this.href;
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+
+.text-link {
+  color: @color-accent-blue;
+  font-weight: @font-weight-bold;
+  text-decoration: none;
+}
+
+.text-link--light {
+  color: @color-white;
+}
+</style>

package/src/index.d.ts

@@ -23,6 +23,7 @@ export const CSkeletonLoaderCircle: Component;
 export const CSkeletonLoaderText: Component;
 export const CTextArea: Component;
 export const CTextField: Component;
+export const CTextLink: Component;
 
 export const Theme: typeof _Theme;
 export const Colors: typeof _Colors;

package/src/index.ts

@@ -19,6 +19,7 @@ import _CSkeletonLoaderCircle from '@/components/CSkeletonLoaderCircle.vue';
 import _CSkeletonLoaderText from '@/components/CSkeletonLoaderText.vue';
 import _CTextArea from '@/components/CTextArea.vue';
 import _CTextField from '@/components/CTextField.vue';
+import _CTextLink from '@/components/CTextLink.vue';
 import _Icons from '@/theme/icons';
 
 import '@/styles/core.less';
@@ -46,3 +47,4 @@ export const CSkeletonLoaderCircle = _CSkeletonLoaderCircle;
 export const CSkeletonLoaderText = _CSkeletonLoaderText;
 export const CTextArea = _CTextArea;
 export const CTextField = _CTextField;
+export const CTextLink = _CTextLink;