@propelinc/citrus-ui 0.2.0 → 0.2.2

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.2.0",
+  "version": "0.2.2",
   "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:dist": "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"
   },
@@ -22,6 +23,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/pro-light-svg-icons": "5.15.3",
+    "@fortawesome/pro-solid-svg-icons": "5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "core-js": "^3.6.5",
     "vue": "^2.6.10",

package/src/components/CCheckbox.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-checkbox
+    v-bind="$attrs"
+    :value="value"
+    data-test="checkbox"
+    on-icon="$citrusCheckboxOn"
+    off-icon="$citrusCheckboxOff"
+    :ripple="false"
+    :rules="rules"
+    :hide-details="rules.length === 0"
+    @change="(value) => $emit('change', value)"
+  >
+    <template #label>
+      <slot name="label" />
+    </template>
+  </v-checkbox>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@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)[];
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+
+/deep/ label.v-label {
+  .body();
+
+  color: @color-navy;
+}
+</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="rules.length === 0"
+      @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"
@@ -24,78 +14,41 @@
       :value="value"
       :rules="rules"
       validate-on-blur
-      hide-details="auto"
+      :hide-details="rules.length === 0"
       @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

@@ -2,19 +2,23 @@ import { Component } from 'vue';
 
 import _Colors from './colors/colors.json';
 import _Theme from './colors/theme';
+import _Icons from './theme/icons';
 
 export const CAlert: Component;
 export const CBanner: Component;
 export const CButton: Component;
 export const CCard: Component;
+export const CCheckbox: 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;
 
 export const Theme: typeof _Theme;
 export const Colors: typeof _Colors;
+export const Icons: typeof _Icons;

package/src/index.ts

@@ -4,29 +4,35 @@ 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 _CCheckbox from '@/components/CCheckbox.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';
+import _Icons from '@/theme/icons';
 
 import '@/styles/core.less';
 
 export const Colors = _Colors;
 export const Theme = _Theme;
+export const Icons = _Icons;
 
 export const CAlert = _CAlert;
 export const CBanner = _CBanner;
 export const CButton = _CButton;
 export const CCard = _CCard;
+export const CCheckbox = _CCheckbox;
 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/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;
+  }
+}

package/src/theme/icons.ts

@@ -0,0 +1,17 @@
+import { faCircle } from '@fortawesome/pro-light-svg-icons';
+import { faCheckCircle } from '@fortawesome/pro-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { VuetifyIcons } from 'vuetify/types/services/icons';
+
+const Icons = {
+  citrusCheckboxOn: {
+    component: FontAwesomeIcon,
+    props: { icon: faCheckCircle },
+  },
+  citrusCheckboxOff: {
+    component: FontAwesomeIcon,
+    props: { icon: faCircle },
+  },
+} as Partial<VuetifyIcons>;
+
+export default Icons;