@propelinc/citrus-ui 0.1.1 → 0.2.1

package/jest.config.js

@@ -1,4 +1,9 @@
 module.exports = {
   preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
   setupFilesAfterEnv: ['<rootDir>/tests/unit/helpers/custom-matchers.ts'],
+
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!vuetify/lib)'],
+  moduleNameMapper: {
+    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+  },
 };

package/package.json

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

package/src/components/CButton.vue

@@ -2,18 +2,23 @@
   <v-btn
     class="button"
     :class="{
+      'button--primary': !secondary && !tertiary,
       'button--secondary': secondary,
+      'button--tertiary': tertiary,
+      'button--dark': dark,
+      'button--light': light,
       'button--large': large,
-      [`${colorScheme.text}--text`]: true,
+      'button--disabled': disabled,
     }"
     data-test="button"
     rounded
     :block="block"
     :elevation="0"
-    :color="colorScheme.container"
     :large="large"
     :ripple="false"
     :to="to"
+    :text="tertiary"
+    :disabled="disabled"
     v-on="$listeners"
   >
     <div v-if="hasIcon" class="button__icon">
@@ -32,30 +37,18 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import { RawLocation } from 'vue-router';
 
-interface ColorScheme {
-  text: string;
-  container: string;
-}
-
 @Component({ name: 'CButton', components: { FontAwesomeIcon } })
-export default class Button extends Vue {
-  @Prop({ type: Boolean, default: false }) dark!: boolean;
+export default class CButton extends Vue {
   @Prop({ type: Boolean, default: false }) block!: boolean;
+  @Prop({ type: Boolean, default: false }) dark!: boolean;
+  @Prop({ type: Boolean, default: false }) disabled!: boolean;
+  @Prop([String, Array, Object]) icon?: IconDefinition;
   @Prop({ type: Boolean, default: false }) large!: boolean;
+  @Prop({ type: Boolean, default: false }) light!: boolean;
   @Prop({ type: Boolean, default: false }) secondary!: boolean;
-  @Prop([String, Array, Object]) icon?: IconDefinition;
+  @Prop({ type: Boolean, default: false }) tertiary!: boolean;
   @Prop([Object, String]) to?: RawLocation;
 
-  get colorScheme(): ColorScheme {
-    if (this.dark) {
-      return { text: 'white', container: 'navy' };
-    } else if (this.secondary) {
-      return { text: 'primary', container: 'white' };
-    } else {
-      return { text: 'white', container: 'primary' };
-    }
-  }
-
   get hasIcon(): boolean {
     return !!(this.icon || this.$slots.icon || this.$scopedSlots.icon);
   }
@@ -75,12 +68,65 @@ export default class Button extends Vue {
   }
 }
 
-.button--large {
-  font-size: 16px;
+.button--primary {
+  background-color: @color-blue-accent !important;
+  color: @color-white;
+}
+
+.button--primary.button--dark {
+  background-color: @color-navy !important;
+}
+
+.button--primary.button--light {
+  background-color: @color-white !important;
+  color: @color-navy;
 }
 
 .button--secondary {
   border: @border !important;
+  color: @color-blue-accent;
+}
+
+.button--secondary.button--dark {
+  color: @color-navy;
+}
+
+.button--secondary.button--light {
+  background-color: @color-navy !important;
+  color: @color-white;
+}
+
+.button--tertiary {
+  color: @color-blue-accent;
+}
+
+.button--tertiary.button--dark {
+  color: @color-navy;
+}
+
+.button--tertiary.button--light {
+  color: @color-white;
+}
+
+// Add some insane specificity to override Vuetify.
+.theme--light.v-btn.v-btn--disabled:not(.v-btn--outlined) {
+  &.button--disabled.button--primary {
+    background-color: @color-navy-tint-4 !important;
+    color: @color-navy-tint-1 !important;
+  }
+
+  &.button--disabled.button--secondary {
+    background-color: @color-white !important;
+    color: @color-navy-tint-2 !important;
+  }
+
+  &.button--disabled.button--tertiary {
+    color: @color-navy-tint-2 !important;
+  }
+}
+
+.button--large {
+  font-size: 16px;
 }
 
 .button__icon {

package/src/components/CSegmentedButton.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-btn-toggle
+    data-test="segmented-button"
+    :value="value"
+    rounded
+    class="segmented-button"
+    active-class="segmented-button__option--active"
+    @change="(value) => $emit('change', value)"
+  >
+    <slot>
+      <c-segmented-button-option
+        v-for="option in options"
+        :key="option.label"
+        :value="option.value"
+        :label="option.label"
+      />
+    </slot>
+  </v-btn-toggle>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+import CSegmentedButtonOption from '@/components/CSegmentedButtonOption.vue';
+
+interface SegmentedButtonOption {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any;
+  label: string;
+}
+
+@Component({ name: 'CSegmentedButton', components: { CSegmentedButtonOption } })
+export default class CSegmentedButton extends Vue {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @Prop() value?: any;
+  @Prop({ type: Array, required: true }) options!: SegmentedButtonOption[];
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+
+.segmented-button {
+  width: 100%;
+}
+</style>

package/src/components/CSegmentedButtonOption.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-btn
+    class="segmented-button__option"
+    data-test="segmented-button-option"
+    :ripple="false"
+    :value="value"
+  >
+    <slot>
+      {{ label }}
+    </slot>
+  </v-btn>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@Component({ name: 'CSegmentedButtonOption' })
+export default class CSegmentedButtonOption extends Vue {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @Prop({ required: true }) value?: any;
+  @Prop(String) label?: string;
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+
+.segmented-button__option {
+  border: @border !important;
+  color: @color-navy;
+  flex: 1 1 0;
+  font-weight: @font-weight-heavy;
+  letter-spacing: 0;
+  text-transform: none;
+
+  &::before {
+    color: transparent;
+  }
+}
+
+// This class is applied by the CSegmentedButton component.
+.segmented-button__option--active {
+  background-color: @color-blue !important;
+}
+</style>

package/src/components/CSelect.vue

@@ -0,0 +1,67 @@
+<template>
+  <form-field :field-id="id" :disabled="disabled" :label="label">
+    <select-input
+      :id="id"
+      v-bind="$attrs"
+      data-test="select-field"
+      class="select__field"
+      :class="{ 'select__field--disabled': disabled }"
+      outlined
+      single-line
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :value="value"
+      :rules="rules"
+      :items="items"
+      validate-on-blur
+      hide-details="auto"
+      @input="(value) => $emit('input', value)"
+    >
+      <template #append>
+        <font-awesome-icon
+          v-if="loading"
+          data-test="select-field-icon-loading"
+          :icon="faSpinner"
+          class="fa-spin"
+        />
+        <font-awesome-icon v-else data-test="select-field-icon" :icon="faChevronDown" />
+      </template>
+    </select-input>
+  </form-field>
+</template>
+
+<script lang="ts">
+import { faChevronDown, faSpinner } from '@fortawesome/pro-light-svg-icons';
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+import FormField from '@/components/helpers/FormField.vue';
+import SelectInput from '@/components/helpers/SelectInput.vue';
+
+// @ts-ignore
+@Component({ name: 'CSelect', components: { FormField, SelectInput } })
+export default class CSelect extends Vue {
+  faChevronDown = faChevronDown;
+  faSpinner = faSpinner;
+
+  @Prop(String) label?: string;
+  @Prop(String) placeholder?: string;
+  @Prop({ type: String, required: true }) id!: string;
+  @Prop({ type: Array, default: () => [] }) items!: { label: string; value: string }[];
+  @Prop({ type: Boolean, default: false }) disabled!: boolean;
+  @Prop({ type: String, default: '' }) value!: string;
+  @Prop({ type: Boolean, default: false }) loading!: boolean;
+  @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/form-fields.less';
+
+.select__field {
+  .form-field();
+}
+
+.select__field--disabled {
+  .form-field-disabled();
+}
+</style>

package/src/components/CTextField.vue

@@ -1,15 +1,5 @@
 <template>
-  <fieldset :disabled="disabled">
-    <label
-      v-if="label"
-      :for="id"
-      data-test="text-field-label"
-      class="text-field__label"
-      :class="{ 'text-field__label--disabled': disabled }"
-    >
-      {{ label }}
-    </label>
-
+  <form-field :field-id="id" :disabled="disabled" :label="label">
     <v-text-field
       :id="id"
       v-bind="$attrs"
@@ -26,76 +16,39 @@
       validate-on-blur
       hide-details="auto"
       @input="(value) => $emit('input', value)"
-    />
-  </fieldset>
+    >
+      <template #append>
+        <slot name="append" />
+      </template>
+    </v-text-field>
+  </form-field>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
-@Component({ name: 'CTextField' })
+import FormField from '@/components/helpers/FormField.vue';
+
+@Component({ name: 'CTextField', components: { FormField } })
 export default class CTextField extends Vue {
   @Prop(String) label?: string;
   @Prop(String) placeholder?: string;
   @Prop({ type: String, required: true }) id!: string;
   @Prop({ type: String, default: 'text' }) type!: string;
   @Prop({ type: Boolean, default: false }) disabled!: boolean;
-  @Prop({ type: String, default: '' }) value!: boolean;
-  @Prop(Array) rules?: ((value: string) => string | boolean)[];
+  @Prop({ type: String, default: '' }) value!: string;
+  @Prop({ type: Array, default: () => [] }) rules!: ((value: string) => string | boolean)[];
 }
 </script>
 
 <style lang="less" scoped>
-@import '~@/styles/variables.less';
-
-@color-disabled-text: @color-navy-tint-2;
-
-.text-field__label {
-  font-weight: @font-weight-bold;
-  margin: 0 0 4px 2px;
-}
-
-.text-field__label--disabled {
-  color: @color-disabled-text;
-}
+@import '~@/styles/form-fields.less';
 
 .text-field__field {
-  & /deep/ legend {
-    display: none;
-  }
-
-  &.v-input--is-focused /deep/ fieldset,
-  &.v-input--has-state /deep/ fieldset {
-    border-color: currentColor;
-    border-width: 1px;
-  }
-
-  & /deep/ .v-input__slot {
-    min-height: 48px;
-    padding: 0 16px !important; // Override Vuetify.
-  }
-
-  & /deep/ input {
-    .body();
-
-    line-height: 20px;
-  }
-}
-
-/deep/ fieldset {
-  background: @color-white;
-  border-color: @color-neutral-shade;
-  border-radius: @border-radius;
-  top: 0;
+  .form-field();
 }
 
 .text-field__field--disabled {
-  & /deep/ fieldset {
-    background: @color-neutral-shade;
-  }
-
-  & /deep/ input {
-    color: @color-disabled-text;
-  }
+  .form-field-disabled();
 }
 </style>

package/src/components/helpers/FormField.vue

@@ -0,0 +1,40 @@
+<template>
+  <fieldset :disabled="disabled">
+    <label
+      v-if="label"
+      :for="fieldId"
+      data-test="form-field-label"
+      class="form-field__label"
+      :class="{ 'form-field__label--disabled': disabled }"
+    >
+      {{ label }}
+    </label>
+
+    <slot />
+  </fieldset>
+</template>
+
+<script lang="ts">
+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;
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+@import '~@/styles/form-fields.less';
+
+.form-field__label {
+  font-weight: @font-weight-bold;
+  margin: 0 0 4px 2px;
+}
+
+.form-field__label--disabled {
+  color: @color-disabled-text;
+}
+</style>

package/src/components/helpers/SelectInput.vue

@@ -0,0 +1,112 @@
+<script>
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
+/**
+ *  NOTE(mohan): This component is meant to be an alternative to VSelect that uses native
+ * <select/> tags.
+ *
+ * Because Vuetify uses its implementation of a dropdown that imitates a desktop menu,
+ * it's hard to use on mobile. This component replaces the inner <input> of a VTextField
+ * with a <select/> so that we can use continue to use all of the nice Vuetify features while also
+ * having a native <select/>.
+ *
+ * See: https://github.com/vuetifyjs/vuetify/issues/4059. */
+import { VTextField } from 'vuetify/lib';
+
+export default {
+  name: 'SelectInput',
+  extends: VTextField,
+
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    placeholder: {
+      type: String,
+      default: null,
+    },
+  },
+
+  methods: {
+    genInput() {
+      const listeners = { ...this.listeners$ };
+      delete listeners.change; // Change should not be bound externally
+
+      return this.$createElement(
+        'select',
+        {
+          style: {},
+          domProps: {
+            value: this.lazyValue,
+          },
+          attrs: {
+            ...this.attrs$,
+            autofocus: this.autofocus,
+            disabled: this.disabled,
+            id: this.computedId,
+            readonly: this.readonly,
+          },
+          class: !this.isDirty ? 'select-input--placeholder' : undefined,
+          on: {
+            ...listeners,
+            blur: this.onBlur,
+            input: this.onInput,
+            focus: this.onFocus,
+            keydown: this.onKeyDown,
+          },
+          ref: 'input',
+        },
+        this.genOptions()
+      );
+    },
+
+    genOptions() {
+      let options = this.items.map((item) => {
+        return this.$createElement('option', {
+          domProps: {
+            innerHTML: item.label,
+            value: item.value,
+          },
+        });
+      });
+      if (this.placeholder) {
+        options = [
+          this.$createElement('option', {
+            domProps: {
+              innerHTML: this.placeholder,
+              value: '',
+              hidden: true,
+              disabled: true,
+              selected: true,
+            },
+          }),
+          ...options,
+        ];
+      }
+      return options;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+
+select {
+  color: @color-navy;
+  cursor: pointer;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+
+select:focus {
+  outline: none;
+}
+
+.select-input--placeholder {
+  color: @color-navy-tint-3;
+}
+</style>

package/src/index.d.ts

@@ -10,6 +10,9 @@ export const CCard: Component;
 export const CIconButton: Component;
 export const CListItem: Component;
 export const CModalLoading: Component;
+export const CSegmentedButton: Component;
+export const CSegmentedButtonOption: Component;
+export const CSelect: Component;
 export const CSkeletonLoaderCircle: Component;
 export const CSkeletonLoaderText: Component;
 export const CTextField: Component;

package/src/index.ts

@@ -7,6 +7,9 @@ import _CCard from '@/components/CCard.vue';
 import _CIconButton from '@/components/CIconButton.vue';
 import _CListItem from '@/components/CListItem.vue';
 import _CModalLoading from '@/components/CModalLoading.vue';
+import _CSegmentedButton from '@/components/CSegmentedButton.vue';
+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 _CTextField from '@/components/CTextField.vue';
@@ -23,6 +26,9 @@ export const CCard = _CCard;
 export const CIconButton = _CIconButton;
 export const CListItem = _CListItem;
 export const CModalLoading = _CModalLoading;
+export const CSegmentedButton = _CSegmentedButton;
+export const CSegmentedButtonOption = _CSegmentedButtonOption;
+export const CSelect = _CSelect;
 export const CSkeletonLoaderCircle = _CSkeletonLoaderCircle;
 export const CSkeletonLoaderText = _CSkeletonLoaderText;
 export const CTextField = _CTextField;

package/src/styles/blitz.less

@@ -0,0 +1,8 @@
+@import "./variables.less";
+
+@font-face {
+  font-family: @font-family-blitz;
+  font-style: normal;
+  font-weight: @font-weight-normal;
+  src: url('../assets/fonts/Blitz-Script.woff2') format('woff2'), 
+}

package/src/styles/core.less

@@ -1,4 +1,5 @@
 @import './object-sans.less';
+@import './blitz.less';
 
 .provide.provide-theme {
   /* stylelint-disable-next-line no-invalid-position-at-import-rule */

package/src/styles/form-fields.less

@@ -0,0 +1,46 @@
+@import '~@/styles/variables.less';
+
+@color-disabled-text: @color-navy-tint-2;
+
+.form-field() {
+  & /deep/ legend {
+    display: none;
+  }
+
+  &.v-input--is-focused /deep/ fieldset,
+  &.v-input--has-state /deep/ fieldset {
+    border-color: currentColor;
+    border-width: 1px;
+  }
+
+  & /deep/ .v-input__slot {
+    min-height: 48px;
+    padding: 0 16px !important; // Override Vuetify.
+  }
+
+  & /deep/ input, 
+  & /deep/ select {
+    .body();
+
+    line-height: 20px;
+  }
+
+  /deep/ fieldset {
+    background: @color-white;
+    border-color: @color-neutral-shade;
+    border-radius: @border-radius;
+    top: 0;
+    z-index: -1;
+  }
+}
+
+.form-field-disabled() {
+  & /deep/ fieldset {
+    background: @color-neutral-shade;
+  }
+
+  & /deep/ input,
+  & /deep/ select {
+    color: @color-disabled-text;
+  }
+}