@propelinc/citrus-ui 0.3.2 → 0.3.4

package/package.json

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

package/src/components/CCard.vue

@@ -1,120 +1,57 @@
 <template>
-  <div class="card" :class="{ [color]: !!color }">
-    <div v-if="shouldShowHeader" class="card__header" :class="{ 'card__header--divided': divided }">
-      <div class="card__header__title-container">
-        <span data-test="card-title" class="card__header__title">
-          <slot name="header:title">
-            {{ title }}
-          </slot>
-        </span>
-      </div>
+  <v-card flat class="card" :class="{ 'card--divided': divided }" :color="color">
+    <c-card-header v-if="title">
+      {{ title }}
+    </c-card-header>
 
-      <div class="card__header__append">
-        <slot name="header:append" />
-      </div>
-    </div>
-
-    <div data-test="card-body" class="card__body" :class="{ 'card__body--fluid': fluid }">
-      <slot />
-    </div>
-
-    <div class="card__footer" :class="{ 'card__footer--divided': divided }">
-      <slot name="footer" />
-    </div>
-  </div>
+    <slot />
+  </v-card>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
-@Component({ name: 'CCard' })
+import CCardHeader from '@/components/CCardHeader.vue';
+
+@Component({ name: 'CCard', components: { CCardHeader } })
 export default class CCard extends Vue {
   @Prop(String) title?: string;
-  /** Removes padding from card body */
-  @Prop({ type: Boolean, default: false }) fluid!: boolean;
-  /** Shows borders between header, body, and footer */
+  /** Shows borders between header, sections, and footer */
   @Prop({ type: Boolean, default: false }) divided!: boolean;
   /** Sets background color */
   @Prop(String) color?: string;
-
-  get shouldShowHeader(): boolean {
-    return (
-      !!this.title ||
-      !!this.$slots['header:append'] ||
-      !!this.$scopedSlots['header:append'] ||
-      !!this.$slots['header:title'] ||
-      !!this.$scopedSlots['header:title']
-    );
-  }
 }
 </script>
 
 <style lang="less" scoped>
 @import '~@/styles/variables.less';
-@import '~@/styles/mixins/buttons.less';
 
 .card {
-  background: @color-white;
   border: @border;
-  border-radius: @border-radius;
+  border-radius: @border-radius !important;
   overflow: hidden;
 
   & + & {
     margin-top: 12px;
   }
-}
-
-.card__header {
-  align-items: flex-start;
-  display: flex;
-  padding: @card-header-v-spacing @card-h-spacing 0;
-}
-
-.card__header__title-container {
-  flex: 1 1 100%;
-}
-
-.card__header__title {
-  .title();
-
-  vertical-align: -4px;
-  word-break: break-word;
-}
-
-.card__header__append:not(:empty) {
-  flex: none;
-  margin: -6px -12px -8px @card-h-spacing;
-}
-
-.card__header--divided {
-  border-bottom: @border;
-  padding-bottom: @card-header-v-spacing;
-}
-
-.card__body {
-  padding: @card-body-v-spacing @card-h-spacing;
 
-  .card__header:not(.card__header--divided) + & {
-    padding-top: @card-body-v-spacing - 4px;
+  /deep/ .card__section + .card__footer {
+    margin-top: -16px;
   }
 }
 
-.card__body--fluid {
-  padding: 0;
-}
-
-.card__footer {
-  .button-container();
+.card--divided {
+  /deep/
+    :is(.card__header, .card__section, .card__footer)
+    + :is(.card__header, .card__section, .card__footer) {
+    border-top: @border;
+  }
 
-  &:not(:empty) {
-    margin-top: -1 * @card-body-v-spacing;
-    padding: 0 @card-h-spacing;
+  /deep/ .card__header + .card__section:not(.card__section--fluid) {
+    padding: 16px;
   }
-}
 
-.card__footer--divided {
-  &:not(:empty) {
-    border-top: @border;
+  /deep/ .card__section + .card__footer {
     margin-top: 0;
   }
 }

package/src/components/CCardFooter.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-card-actions class="card__footer">
+    <slot />
+  </v-card-actions>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({ name: 'CCardFooter' })
+export default class CCardFooter extends Vue {}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+
+.card__footer {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  padding-left: 16px;
+  padding-right: 16px;
+
+  & /deep/ .button {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  & /deep/ .button--primary,
+  & /deep/ .button--secondary {
+    margin: 4px 0;
+
+    &:not(:first-child) {
+      margin-top: 8px;
+    }
+  }
+
+  & /deep/ .button--tertiary {
+    &:not(:first-child) {
+      margin-top: 4px;
+    }
+  }
+}
+</style>

package/src/components/CCardHeader.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-card-title class="card__header">
+    <div class="card__header__title-container">
+      <span data-test="card-title" class="card__header__title">
+        <slot />
+      </span>
+    </div>
+
+    <div class="card__header__append">
+      <slot name="append" />
+    </div>
+  </v-card-title>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({ name: 'CCardHeader' })
+export default class CCardHeader extends Vue {}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+
+.card__header {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: nowrap;
+  padding: 12px @card-h-spacing;
+}
+
+.card__header__title-container {
+  flex: 1 1 auto;
+  line-height: 1;
+}
+
+.card__header__title {
+  .title();
+
+  line-height: 1;
+  vertical-align: -1px;
+  word-break: break-word;
+}
+
+.card__header__append:not(:empty) {
+  flex: none;
+  margin: -6px -12px -8px @card-h-spacing;
+}
+</style>

package/src/components/CCardSection.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-card-text
+    data-test="card-section"
+    class="card__section"
+    :class="{ 'card__section--fluid': fluid }"
+  >
+    <slot />
+  </v-card-text>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@Component({ name: 'CCardSection' })
+export default class CCardSection extends Vue {
+  @Prop({ type: Boolean, default: false }) fluid!: boolean;
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+
+.card__section {
+  color: @color-navy !important;
+}
+
+.card__section--fluid {
+  padding: 0 !important;
+}
+</style>

package/src/components/CIconButton.vue

@@ -1,5 +1,6 @@
 <template>
   <v-btn
+    class="icon-button"
     data-test="icon-button"
     :class="{ [colorScheme.container]: colorScheme.container }"
     icon

package/src/components/CModal.vue

@@ -1,45 +1,43 @@
 <template>
   <v-dialog
-    :width="loading ? '160' : undefined"
     :persistent="!dismissible || !!loading"
     no-click-animation
     :value="value"
+    scrollable
     @input="(value) => $emit('input', value)"
   >
     <c-card v-if="loading" key="loading" data-test="modal-loading">
-      <div class="modal__loading">
-        <div class="modal__loading__icon-container">
-          <font-awesome-icon :icon="faSync" class="fa-spin modal__loading__icon" />
+      <c-card-section>
+        <div class="modal__loading">
+          <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"
+            class="modal__loading__message"
+          >
+            {{ loading }}
+          </div>
         </div>
-
-        <div
-          v-if="hasLoadingMessage"
-          data-test="modal-loading-message"
-          class="modal__loading__message"
-        >
-          {{ loading }}
-        </div>
-      </div>
+      </c-card-section>
     </c-card>
-    <c-card v-else key="default" :fluid="fluid" data-test="modal">
-      <template #header:title>
+    <c-card v-else key="default" data-test="modal">
+      <c-card-header>
         <span class="modal__header__title" data-test="modal-title">{{ title }}</span>
-      </template>
 
-      <template #header:append>
-        <c-icon-button
-          v-if="dismissible"
-          data-test="modal-dismiss"
-          :icon="faTimes"
-          @click="$emit('input', false)"
-        />
-      </template>
+        <template #append>
+          <c-icon-button
+            v-if="dismissible"
+            data-test="modal-dismiss"
+            :icon="faTimes"
+            @click="$emit('input', false)"
+          />
+        </template>
+      </c-card-header>
 
       <slot />
-
-      <template #footer>
-        <slot name="footer" />
-      </template>
     </c-card>
   </v-dialog>
 </template>
@@ -49,17 +47,17 @@ import { faSync, faTimes } from '@fortawesome/pro-light-svg-icons';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import CCard from '@/components/CCard.vue';
+import CCardHeader from '@/components/CCardHeader.vue';
+import CCardSection from '@/components/CCardSection.vue';
 import CIconButton from '@/components/CIconButton.vue';
 
-@Component({ name: 'CModal', components: { CCard, CIconButton } })
+@Component({ name: 'CModal', components: { CCard, CCardSection, CCardHeader, CIconButton } })
 export default class CModal extends Vue {
   faSync = faSync;
   faTimes = faTimes;
 
   @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 */
@@ -85,7 +83,7 @@ export default class CModal extends Vue {
 }
 
 .modal__loading__icon-container {
-  padding: 12px 0;
+  padding: 32px 0 12px;
 }
 
 .modal__loading__icon {
@@ -96,9 +94,4 @@ export default class CModal extends Vue {
 .modal__loading__message {
   font-weight: @font-weight-bold;
 }
-
-/deep/ .card__footer:not(:empty) {
-  margin-top: -12px;
-  padding-bottom: 4px;
-}
 </style>

package/src/components/CTextArea.vue

@@ -0,0 +1,49 @@
+<template>
+  <form-field :field-id="id" :disabled="disabled" :label="label">
+    <v-textarea
+      :id="id"
+      v-bind="$attrs"
+      data-test="text-area"
+      class="text-area__input"
+      :class="{ 'text-area__input--disabled': disabled }"
+      auto-grow
+      outlined
+      single-line
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :value="value"
+      :rules="rules"
+      validate-on-blur
+      :hide-details="rules.length === 0"
+      @input="(value) => $emit('input', value)"
+    />
+  </form-field>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+import FormField from '@/components/helpers/FormField.vue';
+
+@Component({ name: 'CTextArea', components: { FormField } })
+export default class CTextArea extends Vue {
+  @Prop(String) label?: string;
+  @Prop(String) placeholder?: string;
+  @Prop({ type: String, required: true }) id!: string;
+  @Prop({ type: Boolean, default: false }) disabled!: boolean;
+  @Prop({ type: String, default: '' }) value!: string;
+  @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/form-fields.less';
+
+.text-area__input {
+  .form-field();
+}
+
+.text-area__input--disabled {
+  .form-field-disabled();
+}
+</style>

package/src/index.d.ts

@@ -8,6 +8,9 @@ export const CAlert: Component;
 export const CBanner: Component;
 export const CButton: Component;
 export const CCard: Component;
+export const CCardFooter: Component;
+export const CCardHeader: Component;
+export const CCardSection: Component;
 export const CCheckbox: Component;
 export const CIconButton: Component;
 export const CListItem: Component;
@@ -18,6 +21,7 @@ export const CSegmentedButtonOption: Component;
 export const CSelect: Component;
 export const CSkeletonLoaderCircle: Component;
 export const CSkeletonLoaderText: Component;
+export const CTextArea: Component;
 export const CTextField: Component;
 
 export const Theme: typeof _Theme;

package/src/index.ts

@@ -4,6 +4,9 @@ import _CAlert from '@/components/CAlert.vue';
 import _CBanner from '@/components/CBanner.vue';
 import _CButton from '@/components/CButton.vue';
 import _CCard from '@/components/CCard.vue';
+import _CCardFooter from '@/components/CCardFooter.vue';
+import _CCardHeader from '@/components/CCardHeader.vue';
+import _CCardSection from '@/components/CCardSection.vue';
 import _CCheckbox from '@/components/CCheckbox.vue';
 import _CIconButton from '@/components/CIconButton.vue';
 import _CListItem from '@/components/CListItem.vue';
@@ -14,6 +17,7 @@ import _CSegmentedButtonOption from '@/components/CSegmentedButtonOption.vue';
 import _CSelect from '@/components/CSelect.vue';
 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 _Icons from '@/theme/icons';
 
@@ -27,6 +31,9 @@ export const CAlert = _CAlert;
 export const CBanner = _CBanner;
 export const CButton = _CButton;
 export const CCard = _CCard;
+export const CCardFooter = _CCardFooter;
+export const CCardHeader = _CCardHeader;
+export const CCardSection = _CCardSection;
 export const CCheckbox = _CCheckbox;
 export const CIconButton = _CIconButton;
 export const CListItem = _CListItem;
@@ -37,4 +44,5 @@ export const CSegmentedButtonOption = _CSegmentedButtonOption;
 export const CSelect = _CSelect;
 export const CSkeletonLoaderCircle = _CSkeletonLoaderCircle;
 export const CSkeletonLoaderText = _CSkeletonLoaderText;
+export const CTextArea = _CTextArea;
 export const CTextField = _CTextField;

package/src/styles/form-fields.less

@@ -16,6 +16,7 @@
   & /deep/ .v-input__slot {
     min-height: 48px;
     padding: 0 16px !important; // Override Vuetify.
+    z-index: 0;
   }
 
   & /deep/ input, 

package/src/styles/variables.less

@@ -99,7 +99,6 @@
 }
 
 // CARDS
-@card-body-v-spacing: 16px;
 @card-h-spacing: 16px;
 @card-header-v-spacing: 12px;
 

package/src/styles/mixins/buttons.less

@@ -1,22 +0,0 @@
-.button-container() {
-  align-items: stretch;
-  display: flex;
-  flex-direction: column;
-  
-  & /deep/ .button--primary,
-  & /deep/ .button--secondary {
-    margin-top: 12px;
-
-    &:last-child {
-      margin-bottom: 12px;
-    }
-  }
-
-  & /deep/ .button--tertiary {
-    margin-top: 8px;
-
-    &:last-child {
-      margin-bottom: 8px;
-    }
-  }
-}