@propelinc/citrus-ui 0.1.0

package/src/components/CModalLoading.vue

@@ -0,0 +1,54 @@
+<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>
+</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;
+
+  @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-blue-accent;
+  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/CSkeletonLoaderCircle.vue

@@ -0,0 +1,24 @@
+<template>
+  <div data-test="skeleton-loader-circle" class="skeleton-loader-circle" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({ name: 'CSkeletonLoaderCircle' })
+export default class CSkeletonLoaderCircle extends Vue {}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+
+@skeleton-loader-circle-size: 36px;
+
+.skeleton-loader-circle {
+  .skeleton-loader();
+
+  border-radius: @skeleton-loader-circle-size / 2;
+  height: @skeleton-loader-circle-size;
+  width: @skeleton-loader-circle-size;
+}
+</style>

package/src/components/CSkeletonLoaderText.vue

@@ -0,0 +1,38 @@
+<template>
+  <div data-test="skeleton-loader-text" class="skeleton-loader-text">
+    <div v-for="x in rows" :key="x" class="skeleton-loader-text__line" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@Component({ name: 'CSkeletonLoaderText' })
+export default class CSkeletonLoaderText extends Vue {
+  @Prop({ type: Number, default: 2 }) rows!: number;
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/styles/variables.less';
+
+.skeleton-loader-text {
+  width: 100%;
+}
+
+.skeleton-loader-text__line {
+  .skeleton-loader();
+
+  border-radius: 2px;
+  height: @font-size-medium;
+  width: 100%;
+
+  & + & {
+    margin-top: 4px;
+  }
+
+  &:last-child {
+    width: calc(100% - 32px);
+  }
+}
+</style>

package/src/components/CTextField.vue

@@ -0,0 +1,101 @@
+<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>
+
+    <v-text-field
+      :id="id"
+      v-bind="$attrs"
+      data-test="text-field"
+      class="text-field__field"
+      :class="{ 'text-field__field--disabled': disabled }"
+      outlined
+      single-line
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :type="type"
+      :value="value"
+      :rules="rules"
+      validate-on-blur
+      hide-details="auto"
+      @input="(value) => $emit('input', value)"
+    />
+  </fieldset>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@Component({ name: 'CTextField' })
+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)[];
+}
+</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;
+}
+
+.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;
+}
+
+.text-field__field--disabled {
+  & /deep/ fieldset {
+    background: @color-neutral-shade;
+  }
+
+  & /deep/ input {
+    color: @color-disabled-text;
+  }
+}
+</style>

package/src/index.d.ts

@@ -0,0 +1,29 @@
+import { VueConstructor } from 'vue';
+
+import _Theme from '@/colors/theme';
+
+export declare const Theme: typeof _Theme;
+
+const CAlert: VueConstructor;
+const CBanner: VueConstructor;
+const CButton: VueConstructor;
+const CCard: VueConstructor;
+const CIconButton: VueConstructor;
+const CListItem: VueConstructor;
+const CModalLoading: VueConstructor;
+const CSkeletonLoaderCircle: VueConstructor;
+const CSkeletonLoaderText: VueConstructor;
+const CTextField: VueConstructor;
+
+export {
+  CAlert,
+  CBanner,
+  CButton,
+  CCard,
+  CIconButton,
+  CListItem,
+  CModalLoading,
+  CSkeletonLoaderCircle,
+  CSkeletonLoaderText,
+  CTextField,
+};

package/src/index.ts

@@ -0,0 +1,24 @@
+import _Theme from '@/colors/theme';
+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 _CIconButton from '@/components/CIconButton.vue';
+import _CListItem from '@/components/CListItem.vue';
+import _CModalLoading from '@/components/CModalLoading.vue';
+import _CSkeletonLoaderCircle from '@/components/CSkeletonLoaderCircle.vue';
+import _CSkeletonLoaderText from '@/components/CSkeletonLoaderText.vue';
+import _CTextField from '@/components/CTextField.vue';
+
+export const Theme = _Theme;
+
+export const CAlert = _CAlert;
+export const CBanner = _CBanner;
+export const CButton = _CButton;
+export const CCard = _CCard;
+export const CIconButton = _CIconButton;
+export const CListItem = _CListItem;
+export const CModalLoading = _CModalLoading;
+export const CSkeletonLoaderCircle = _CSkeletonLoaderCircle;
+export const CSkeletonLoaderText = _CSkeletonLoaderText;
+export const CTextField = _CTextField;

package/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}

package/src/shims-vuetify.d.ts

@@ -0,0 +1,4 @@
+declare module 'vuetify/lib/framework' {
+  import Vuetify from 'vuetify';
+  export default Vuetify;
+}

package/src/styles/object-sans.less

@@ -0,0 +1,23 @@
+@import "~@/styles/variables.less";
+
+.ObjectSans(@font-weight, @file-name-normal, @file-name-slanted) {
+  @font-face {
+    font-family: @font-family-object-sans;
+    font-style: normal;
+    font-weight: @font-weight;
+    src: url('~@/assets/fonts/@{file-name-normal}.woff2') format('woff2'), 
+  }
+  
+  @font-face {
+    font-family: @font-family-object-sans;
+    font-style: italic;
+    font-weight: @font-weight;
+    src: url('~@/assets/fonts/@{file-name-slanted}.woff2') format('woff2'), 
+  }
+}
+
+.ObjectSans(@font-weight-thin, 'ObjectSans-Thin', 'ObjectSans-ThinSlanted');
+.ObjectSans(@font-weight-normal, 'ObjectSans-Regular', 'ObjectSans-Slanted');
+.ObjectSans(@font-weight-bold, 'ObjectSans-Bold', 'ObjectSans-BoldSlanted');
+.ObjectSans(@font-weight-heavy, 'ObjectSans-Heavy', 'ObjectSans-HeavySlanted');
+.ObjectSans(@font-weight-black, 'ObjectSans-Black', 'ObjectSans-BlackSlanted');

package/src/styles/typography.less

@@ -0,0 +1,36 @@
+@import "~@/styles/variables.less";
+
+.body();
+
+.balance {
+  .balance();
+}
+
+.large-headline {
+  .large-headline();
+}
+
+.headline {
+  .headline();
+}
+
+.subheadline {
+  .subheadline();
+}
+
+.title {
+  .title();
+}
+
+p,
+.body {
+  .body();
+}
+
+.caption {
+  .caption();
+}
+
+.overline {
+  .overline();
+}

package/src/styles/variables.less

@@ -0,0 +1,117 @@
+// BORDERS
+@color-border: @color-neutral-shade;
+@border-width: 1px;
+@border: @border-width solid @color-border;
+
+@border-radius: 8px;
+
+// TYPOGRAPHY
+@font-family-object-sans: ObjectSans;
+
+@font-weight-thin: 100;
+@font-weight-light: 300; // Currently unused, but holding its place in case we add it.
+@font-weight-normal: 400;
+@font-weight-medium: 500; // Currently unused, but holding its place in case we add it. 
+@font-weight-bold: 700;
+@font-weight-heavy: 800;
+@font-weight-black: 900;
+
+@font-size-3x-large: 44px;
+@font-size-2x-large: 32px;
+@font-size-x-large: 23px;
+@font-size-large: 18px;
+@font-size-medium: 14px;
+@font-size-small: 12px;
+
+@line-height-balance: 100%;
+@line-height-large-headline: 85%;
+@line-height-headline: 130%;
+@line-height-subheadline: 130%;
+@line-height-body: 150%;
+@line-height-caption: 150%;
+@line-height-overline: 100%;
+
+.balance() {
+  font-family: @font-family-object-sans !important;
+  font-size: @font-size-2x-large !important;
+  font-weight: @font-weight-thin;
+  line-height: @line-height-balance;
+}
+
+.large-headline() {
+  font-family: @font-family-object-sans !important;
+  font-size: @font-size-2x-large !important;
+  font-weight: @font-weight-black;
+  line-height: @line-height-large-headline;
+  text-transform: uppercase;
+}
+
+.headline() {
+  font-family: @font-family-object-sans !important;
+  font-size: @font-size-x-large !important;
+  font-weight: @font-weight-heavy;
+  line-height: @line-height-headline;
+}
+
+.subheadline() {
+  font-family: @font-family-object-sans !important;
+  font-size: @font-size-large !important;
+  font-weight: @font-weight-heavy;
+  line-height: @line-height-subheadline;
+}
+
+.title() {
+  .body;
+
+  font-weight: @font-weight-heavy;
+}
+
+.body() {
+  font-family: @font-family-object-sans !important;
+  font-size: @font-size-medium !important;
+  font-weight: @font-weight-normal;
+  line-height: @line-height-body;
+}
+
+.caption() {
+  font-family: @font-family-object-sans !important;
+  font-size: @font-size-small !important;
+  font-weight: @font-weight-normal;
+  letter-spacing: 0 !important;
+  line-height: @line-height-caption;
+}
+
+.overline() {
+  font-family: @font-family-object-sans !important;
+  font-size: @font-size-small !important ; 
+  font-weight: @font-weight-heavy;
+  letter-spacing: 0 !important;
+  line-height: @line-height-overline;
+  text-transform: uppercase;
+}
+
+// SKELETON LOADER
+@skeleton-loader-animation-duration: 3s;
+@skeleton-loader-animation: skeleton-loader-animation @skeleton-loader-animation-duration infinite;
+
+@keyframes skeleton-loader-animation {
+  0% {
+    background-position: 150%;
+  }
+  100% {
+    background-position: -50%;
+  }
+}
+
+.skeleton-loader(@color-base: @color-navy-tint-3, @color-highlight: @color-navy-tint-4) {
+  animation: @skeleton-loader-animation;
+  background: linear-gradient(75deg, @color-base 30%, @color-highlight 50%, @color-base 70%);
+  background-size: 200% 150%;
+}
+
+.skeleton-loader-text(@color-font: @color-navy, @color-highlight: @color-navy-tint-2) {
+  .skeleton-loader(@color-font, @color-highlight);
+
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "jest"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/vue.config.js

@@ -0,0 +1,17 @@
+const fs = require('fs');
+
+const ProvideColors = JSON.parse(fs.readFileSync('./src/colors/colors.json'));
+
+module.exports = {
+  css: {
+    loaderOptions: {
+      less: {
+        globalVars: ProvideColors,
+      },
+    },
+  },
+
+  lintOnSave: true,
+
+  transpileDependencies: ['vuetify'],
+};