@propelinc/citrus-ui 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"
@@ -12,7 +12,7 @@
     "lint": "npm run lint:js && npm run lint:css",
     "lint:css": "stylelint \"src/**/*.(vue|less)\"",
     "lint:js": "vue-cli-service lint",
-    "publish": "npm run build:dist && npm publish",
+    "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",
@@ -23,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,38 @@
+<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;
+  margin-bottom: 0;
+}
+</style>

package/src/components/CSelect.vue

@@ -14,17 +14,22 @@
       :rules="rules"
       :items="items"
       validate-on-blur
-      hide-details="auto"
+      :hide-details="rules.length === 0"
       @input="(value) => $emit('input', value)"
     >
       <template #append>
         <font-awesome-icon
           v-if="loading"
           data-test="select-field-icon-loading"
+          class="fa-spin select__field__icon"
           :icon="faSpinner"
-          class="fa-spin"
         />
-        <font-awesome-icon v-else data-test="select-field-icon" :icon="faChevronDown" />
+        <font-awesome-icon
+          v-else
+          data-test="select-field-icon"
+          class="select__field__icon"
+          :icon="faChevronDown"
+        />
       </template>
     </select-input>
   </form-field>
@@ -64,4 +69,8 @@ export default class CSelect extends Vue {
 .select__field--disabled {
   .form-field-disabled();
 }
+
+.select__field__icon {
+  z-index: 1;
+}
 </style>

package/src/components/CTextField.vue

@@ -14,7 +14,7 @@
       :value="value"
       :rules="rules"
       validate-on-blur
-      hide-details="auto"
+      :hide-details="rules.length === 0"
       @input="(value) => $emit('input', value)"
     >
       <template #append>

package/src/index.d.ts

@@ -2,11 +2,13 @@ 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;
@@ -19,3 +21,4 @@ export const CTextField: Component;
 
 export const Theme: typeof _Theme;
 export const Colors: typeof _Colors;
+export const Icons: typeof _Icons;

package/src/index.ts

@@ -4,6 +4,7 @@ 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';
@@ -13,16 +14,19 @@ 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;

package/src/styles/form-fields.less

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

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;