@propelinc/citrus-ui 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"
@@ -14,7 +14,7 @@
     "lint:css": "stylelint \"src/**/*.(vue|less)\"",
     "lint:js": "vue-cli-service lint",
     "publish:dist": "npm run build:dist && npm publish",
-    "publish:storybook": "storybook-to-aws-s3 --script=\"storybook:build\" --bucket-path=citrus-ui-storybook",
+    "publish:storybook": "storybook-to-aws-s3 --script=\"build:storybook\" --bucket-path=citrus-ui-storybook",
     "serve:storybook": "vue-cli-service storybook:serve -p 6006 -c .storybook",
     "test:unit": "vue-cli-service test:unit"
   },

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

@@ -1,9 +1,26 @@
 <template>
-  <div class="card">
-    <div v-if="title" data-test="card-title" class="card__title">{{ title }}</div>
+  <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>
+
+      <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>
 </template>
 
@@ -13,38 +30,92 @@ import { Component, Vue, Prop } from 'vue-property-decorator';
 @Component({ name: 'CCard' })
 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 */
+  @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;
+  overflow: hidden;
 
   & + & {
     margin-top: 12px;
   }
 }
 
-.card__title {
-  .overline;
+.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();
 
-  padding: 12px 16px 0;
+  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: 16px 16px 12px;
+  padding: @card-body-v-spacing @card-h-spacing;
 
-  .card__title + & {
-    padding-top: 8px;
+  .card__header:not(.card__header--divided) + & {
+    padding-top: @card-body-v-spacing - 4px;
   }
 }
 
 .card__body--fluid {
   padding: 0;
 }
+
+.card__footer {
+  .button-container();
+
+  &:not(:empty) {
+    margin-top: -1 * @card-body-v-spacing;
+    padding: 0 @card-h-spacing;
+  }
+}
+
+.card__footer--divided {
+  &:not(:empty) {
+    border-top: @border;
+    margin-top: 0;
+  }
+}
 </style>

package/src/components/CModal.vue

@@ -0,0 +1,104 @@
+<template>
+  <v-dialog
+    :width="loading ? '160' : undefined"
+    :persistent="!dismissible || !!loading"
+    no-click-animation
+    :value="value"
+    @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" />
+        </div>
+
+        <div
+          v-if="hasLoadingMessage"
+          data-test="modal-loading-message"
+          class="modal__loading__message"
+        >
+          {{ loading }}
+        </div>
+      </div>
+    </c-card>
+    <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>
+
+      <template #header:append>
+        <c-icon-button
+          v-if="dismissible"
+          data-test="modal-dismiss"
+          :icon="faTimes"
+          @click="$emit('input', false)"
+        />
+      </template>
+
+      <slot />
+
+      <template #footer>
+        <slot name="footer" />
+      </template>
+    </c-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { faSync, faTimes } from '@fortawesome/pro-light-svg-icons';
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+import CCard from '@/components/CCard.vue';
+import CIconButton from '@/components/CIconButton.vue';
+
+@Component({ name: 'CModal', components: { CCard, 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 */
+  @Prop({ type: Boolean, default: true }) dismissible!: boolean;
+
+  get hasLoadingMessage(): boolean {
+    return typeof this.loading === 'string';
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+
+.modal__header__title {
+  .subheadline();
+
+  vertical-align: -4px;
+}
+
+.modal__loading {
+  text-align: center;
+}
+
+.modal__loading__icon-container {
+  padding: 12px 0;
+}
+
+.modal__loading__icon {
+  color: @color-accent-blue;
+  font-size: @font-size-2x-large;
+}
+
+.modal__loading__message {
+  font-weight: @font-weight-bold;
+}
+
+/deep/ .card__footer:not(:empty) {
+  margin-top: -12px;
+  padding-bottom: 4px;
+}
+</style>

package/src/components/CModalLoading.vue

@@ -1,54 +1,16 @@
 <template>
-  <v-dialog
-    data-test="modal-loading"
-    width="160"
-    persistent
-    no-click-animation
-    :value="value"
-    @input="(value) => $emit('input', value)"
-  >
-    <v-card class="modal-loading__content">
-      <font-awesome-icon :icon="faSync" class="fa-spin modal-loading__icon" />
-
-      <div data-test="modal-loading-message" class="modal-loading__content__message">
-        <slot>
-          {{ message }}
-        </slot>
-      </div>
-    </v-card>
-  </v-dialog>
+  <c-modal :loading="message || true" :value="value" @input="(value) => $emit('input', value)" />
 </template>
 
 <script lang="ts">
-import { faSync } from '@fortawesome/pro-light-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
-@Component({ name: 'CModalLoading', components: { FontAwesomeIcon } })
-export default class CModalLoading extends Vue {
-  faSync = faSync;
+import CModal from '@/components/CModal.vue';
 
+@Component({ name: 'CModalLoading', components: { FontAwesomeIcon, CModal } })
+export default class CModalLoading extends Vue {
   @Prop({ type: Boolean, default: false }) value!: boolean;
   @Prop({ type: String }) message?: string;
 }
 </script>
-
-<style lang="less" scoped>
-@import '~@/styles/variables.less';
-
-.modal-loading__icon {
-  color: @color-accent-blue;
-  font-size: @font-size-2x-large;
-}
-
-.modal-loading__content {
-  border-radius: @border-radius !important; // Override Vuetify styles
-  padding: 28px 16px 20px;
-  text-align: center;
-}
-
-.modal-loading__content__message {
-  font-weight: @font-weight-bold;
-  margin: 12px 0 0;
-}
-</style>

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;
   }
 }
 

package/src/styles/mixins/buttons.less

@@ -0,0 +1,22 @@
+.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;
+    }
+  }
+}

package/src/styles/variables.less

@@ -98,6 +98,11 @@
   text-transform: uppercase;
 }
 
+// CARDS
+@card-body-v-spacing: 16px;
+@card-h-spacing: 16px;
+@card-header-v-spacing: 12px;
+
 // SKELETON LOADER
 @skeleton-loader-animation-duration: 3s;
 @skeleton-loader-animation: skeleton-loader-animation @skeleton-loader-animation-duration infinite;