@propelinc/citrus-ui 0.3.1 → 0.3.2

package/package.json

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

package/src/components/CButton.vue

@@ -24,6 +24,8 @@
     :to="to"
     :text="tertiary"
     :disabled="disabled"
+    :href="href"
+    :target="target"
     v-on="$listeners"
   >
     <div v-if="hasIcon" class="button__icon">
@@ -53,6 +55,8 @@ export default class CButton extends Vue {
   @Prop({ type: Boolean, default: false }) secondary!: boolean;
   @Prop({ type: Boolean, default: false }) tertiary!: boolean;
   @Prop([Object, String]) to?: RawLocation;
+  @Prop(String) href?: string;
+  @Prop(String) target?: string;
 
   get hasIcon(): boolean {
     return !!(this.icon || this.$slots.icon || this.$scopedSlots.icon);

package/src/components/CCard.vue

@@ -93,6 +93,10 @@ export default class CCard extends Vue {
 
 .card__body {
   padding: @card-body-v-spacing @card-h-spacing;
+
+  .card__header:not(.card__header--divided) + & {
+    padding-top: @card-body-v-spacing - 4px;
+  }
 }
 
 .card__body--fluid {

package/src/components/CModal.vue

@@ -21,7 +21,7 @@
         </div>
       </div>
     </c-card>
-    <c-card v-else key="default" data-test="modal">
+    <c-card v-else key="default" :fluid="fluid" data-test="modal">
       <template #header:title>
         <span class="modal__header__title" data-test="modal-title">{{ title }}</span>
       </template>
@@ -58,6 +58,8 @@ export default class CModal extends Vue {
 
   @Prop({ type: Boolean, default: false }) value!: boolean;
   @Prop(String) title?: string;
+  /** Removes padding from modal body */
+  @Prop({ type: Boolean, default: false }) fluid!: boolean;
   /** Shows loading state + sets loading message if string */
   @Prop([String, Boolean]) loading?: string | boolean;
   /** Allows modal to be dismissed */

package/src/components/helpers/FormField.vue

@@ -1,5 +1,5 @@
 <template>
-  <fieldset :disabled="disabled">
+  <fieldset class="form-field" :disabled="disabled">
     <label
       v-if="label"
       :for="fieldId"
@@ -29,6 +29,12 @@ export default class FormField extends Vue {
 @import '~@/styles/variables.less';
 @import '~@/styles/form-fields.less';
 
+.form-field {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
 .form-field__label {
   font-weight: @font-weight-bold;
   margin: 0 0 4px 2px;

package/src/index.d.ts

@@ -11,6 +11,7 @@ export const CCard: Component;
 export const CCheckbox: Component;
 export const CIconButton: Component;
 export const CListItem: Component;
+export const CModal: Component;
 export const CModalLoading: Component;
 export const CSegmentedButton: Component;
 export const CSegmentedButtonOption: Component;

package/src/index.ts

@@ -7,6 +7,7 @@ import _CCard from '@/components/CCard.vue';
 import _CCheckbox from '@/components/CCheckbox.vue';
 import _CIconButton from '@/components/CIconButton.vue';
 import _CListItem from '@/components/CListItem.vue';
+import _CModal from '@/components/CModal.vue';
 import _CModalLoading from '@/components/CModalLoading.vue';
 import _CSegmentedButton from '@/components/CSegmentedButton.vue';
 import _CSegmentedButtonOption from '@/components/CSegmentedButtonOption.vue';
@@ -29,6 +30,7 @@ export const CCard = _CCard;
 export const CCheckbox = _CCheckbox;
 export const CIconButton = _CIconButton;
 export const CListItem = _CListItem;
+export const CModal = _CModal;
 export const CModalLoading = _CModalLoading;
 export const CSegmentedButton = _CSegmentedButton;
 export const CSegmentedButtonOption = _CSegmentedButtonOption;

package/src/styles/form-fields.less

@@ -30,6 +30,7 @@
     border-color: @color-neutral-shade;
     border-radius: @border-radius;
     top: 0;
+    z-index: -1;
   }
 }