@propelinc/citrus-ui 0.3.10 → 0.3.12

package/package.json

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

package/src/components/CCheckbox.vue

@@ -19,7 +19,7 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
-@Component({ name: 'CCheckbox', inheritAttrs: false })
+@Component({ name: 'CCheckbox' })
 export default class CCheckbox extends Vue {
   @Prop({ type: Boolean, default: false }) value!: boolean;
   @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];

package/src/components/CListItem.vue

@@ -1,23 +1,24 @@
 <template>
-  <component :is="component" :to="to" :href="href" class="list-item" v-on="$listeners">
-    <div v-if="icon || $scopedSlots.icon" class="list-item__icon">
-      <slot name="icon">
-        <font-awesome-icon v-if="icon" data-test="list-item-icon" :icon="icon" />
-      </slot>
+  <component
+    :is="component"
+    :to="to"
+    :href="href"
+    :target="target"
+    class="list-item"
+    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" />
     </div>
 
     <div class="list-item__content" data-test="list-item-content">
       <slot />
     </div>
 
-    <div
-      v-if="$scopedSlots.action || tappable"
-      class="list-item__action"
-      data-test="list-item-action"
-    >
-      <slot name="action">
-        <font-awesome-icon v-if="tappable" :icon="faChevronRight" />
-      </slot>
+    <div class="list-item__action" data-test="list-item-action">
+      <font-awesome-icon v-if="tappable" :icon="faChevronRight" />
+      <slot name="action" />
     </div>
   </component>
 </template>
@@ -35,6 +36,7 @@ export default class CListItem extends Vue {
   @Prop([String, Array, Object]) icon?: IconDefinition;
   @Prop({ type: Boolean, default: true }) tappable!: boolean;
   @Prop([String, Object]) to?: RawLocation;
+  @Prop(String) target?: string;
   @Prop(String) href?: string;
 
   get component(): string {
@@ -69,18 +71,21 @@ export default class CListItem extends Vue {
   }
 }
 
-.list-item__icon {
+.list-item__icon:not(:empty) {
   flex: none;
+  font-size: @font-size-icon-medium;
   padding-right: 12px;
 }
 
 .list-item__content {
   flex: auto;
+  overflow: hidden;
 }
 
-.list-item__action {
+.list-item__action:not(:empty) {
   color: @color-accent-blue;
   flex: none;
+  font-size: @font-size-icon-medium;
   padding-left: 12px;
 }
 </style>

package/src/components/CModal.vue

@@ -6,16 +6,16 @@
     scrollable
     @input="(value) => $emit('input', value)"
   >
-    <c-card v-if="loading" key="loading" data-test="modal-loading">
+    <c-card v-if="loading" key="loading" :data-test="value ? dataTest : null">
       <c-card-section>
-        <div class="modal__loading">
+        <div class="modal__loading" :data-test="value ? `${dataTest}-loading` : null">
           <div class="modal__loading__icon-container">
             <font-awesome-icon :icon="faSync" class="fa-spin modal__loading__icon" />
           </div>
 
           <div
             v-if="hasLoadingMessage"
-            data-test="modal-loading-message"
+            :data-test="value ? `${dataTest}-loading-message` : null"
             class="modal__loading__message"
           >
             {{ loading }}
@@ -23,14 +23,17 @@
         </div>
       </c-card-section>
     </c-card>
-    <c-card v-else key="default" data-test="modal">
+    <c-card v-else key="default" :data-test="value ? dataTest : null">
       <c-card-header>
-        <span class="modal__header__title" data-test="modal-title">{{ title }}</span>
+        <span class="modal__header__title" :data-test="value ? `${dataTest}-title` : null">
+          {{ title }}
+        </span>
 
         <template #append>
           <c-icon-button
             v-if="dismissible"
-            data-test="modal-dismiss"
+            class="modal__header__dismiss"
+            :data-test="value ? `${dataTest}-dismiss` : null"
             :icon="faTimes"
             @click="$emit('input', false)"
           />
@@ -62,6 +65,8 @@ export default class CModal extends Vue {
   @Prop([String, Boolean]) loading?: string | boolean;
   /** Allows modal to be dismissed */
   @Prop({ type: Boolean, default: true }) dismissible!: boolean;
+  /** Prefix for test selectors */
+  @Prop({ type: String, default: 'modal' }) dataTest!: string;
 
   get hasLoadingMessage(): boolean {
     return typeof this.loading === 'string';
@@ -78,6 +83,10 @@ export default class CModal extends Vue {
   vertical-align: -4px;
 }
 
+.modal__header__dismiss {
+  font-size: @font-size-icon-large;
+}
+
 .modal__loading {
   text-align: center;
 }

package/src/components/CSelect.vue

@@ -1,5 +1,10 @@
 <template>
-  <form-field :data-test="dataTest" :field-id="id" :disabled="disabled" :label="label">
+  <form-field :data-test="dataTest" :field-id="id" :disabled="disabled">
+    <template #label>
+      {{ label }}
+      <slot name="label" />
+    </template>
+
     <select-input
       :id="id"
       v-bind="$attrs"

package/src/components/CTextArea.vue

@@ -1,5 +1,10 @@
 <template>
-  <form-field :data-test="dataTest" :field-id="id" :disabled="disabled" :label="label">
+  <form-field :data-test="dataTest" :field-id="id" :disabled="disabled">
+    <template #label>
+      {{ label }}
+      <slot name="label" />
+    </template>
+
     <v-textarea
       :id="id"
       v-bind="$attrs"

package/src/components/CTextField.vue

@@ -1,5 +1,10 @@
 <template>
-  <form-field :data-test="dataTest" :field-id="id" :disabled="disabled" :label="label">
+  <form-field :data-test="dataTest" :field-id="id" :disabled="disabled">
+    <template #label>
+      {{ label }}
+      <slot name="label" />
+    </template>
+
     <v-text-field
       :id="id"
       ref="input"

package/src/components/helpers/FormField.vue

@@ -1,13 +1,12 @@
 <template>
   <fieldset class="form-field" :data-test="dataTest" :disabled="disabled">
     <label
-      v-if="label"
       :for="fieldId"
       :data-test="`${dataTest}-label`"
       class="form-field__label"
       :class="{ 'form-field__label--disabled': disabled }"
     >
-      {{ label }}
+      <slot name="label" />
     </label>
 
     <slot />
@@ -19,7 +18,6 @@ import { Component, Vue, Prop } from 'vue-property-decorator';
 
 @Component({ name: 'FormField' })
 export default class FormField extends Vue {
-  @Prop(String) label?: string;
   @Prop({ type: String, required: true }) fieldId!: string;
   @Prop({ type: Boolean, default: false }) disabled!: boolean;
   @Prop({ type: String, default: 'form-field' }) dataTest!: string;

package/src/styles/variables.less

@@ -71,7 +71,7 @@
 .title() {
   .body;
 
-  font-weight: @font-weight-heavy;
+  font-weight: @font-weight-bold;
 }
 
 .body() {
@@ -98,6 +98,10 @@
   text-transform: uppercase;
 }
 
+// ICONS
+@font-size-icon-medium: 16px;
+@font-size-icon-large: 20px;
+
 // CARDS
 @card-h-spacing: 16px;
 @card-header-v-spacing: 12px;