@propelinc/citrus-ui 0.5.0 → 0.5.1-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "0.5.0",
+  "version": "0.5.1-dev.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"

package/src/components/CBanner.vue

@@ -8,11 +8,12 @@
 </template>
 
 <script lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
 type Type = 'error' | 'info';
 
-@Component({ name: 'CBanner' })
+@Component({ name: 'CBanner', components: { FontAwesomeIcon } })
 export default class CBanner extends Vue {
   @Prop(String) icon?: string;
   @Prop({ type: String, required: true }) message!: string;

package/src/components/CListItemAction.vue

@@ -9,9 +9,10 @@
 <script lang="ts">
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { faChevronRight } from '@fortawesome/pro-light-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
-@Component({ name: 'CListItemAction' })
+@Component({ name: 'CListItemAction', components: { FontAwesomeIcon } })
 export default class CListItemAction extends Vue {
   @Prop({ type: [String, Array, Object], default: () => faChevronRight }) icon!: IconDefinition;
 }

package/src/components/CListItemIcon.vue

@@ -16,9 +16,10 @@
 
 <script lang="ts">
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
-@Component({ name: 'CListItemIcon' })
+@Component({ name: 'CListItemIcon', components: { FontAwesomeIcon } })
 export default class CListItemIcon extends Vue {
   @Prop({ type: [String, Array, Object] }) icon?: IconDefinition;
   @Prop({ type: Boolean, default: true }) fixedSize!: boolean;

package/src/components/CModal.vue

@@ -45,6 +45,7 @@
 
 <script lang="ts">
 import { faSync, faTimes } from '@fortawesome/pro-light-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import CCard from '@/components/CCard.vue';
@@ -52,7 +53,10 @@ import CCardHeader from '@/components/CCardHeader.vue';
 import CCardSection from '@/components/CCardSection.vue';
 import CIconButton from '@/components/CIconButton.vue';
 
-@Component({ name: 'CModal', components: { CCard, CCardSection, CCardHeader, CIconButton } })
+@Component({
+  name: 'CModal',
+  components: { CCard, CCardSection, CCardHeader, CIconButton, FontAwesomeIcon },
+})
 export default class CModal extends Vue {
   faSync = faSync;
   faTimes = faTimes;

package/src/components/CNotification.vue

@@ -35,13 +35,14 @@
 <script lang="ts">
 import { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import { faTimes } from '@fortawesome/pro-light-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import { RawLocation } from 'vue-router';
 
 import CButton from '@/components/CButton.vue';
 import CIconButton from '@/components/CIconButton.vue';
 
-@Component({ name: 'CNotification', components: { CButton, CIconButton } })
+@Component({ name: 'CNotification', components: { CButton, CIconButton, FontAwesomeIcon } })
 export default class CNotification extends Vue {
   faTimes = faTimes;
 

package/src/components/CSelect.vue

@@ -43,13 +43,18 @@
 
 <script lang="ts">
 import { faChevronDown, faSpinner } from '@fortawesome/pro-light-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 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', inheritAttrs: false, components: { FormField, SelectInput } })
+@Component({
+  name: 'CSelect',
+  inheritAttrs: false,
+  components: { FormField, SelectInput, FontAwesomeIcon },
+})
 export default class CSelect extends Vue {
   faChevronDown = faChevronDown;
   faSpinner = faSpinner;

package/src/styles/_core.scss

@@ -57,19 +57,20 @@ $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-3x-large: 48px;
+$font-size-2x-large: 35px;
+$font-size-x-large: 26px;
+$font-size-large: 21px;
+$font-size-medium: 15px;
 $font-size-small: 12px;
 
 $line-height-balance: 100%;
-$line-height-large-headline: 85%;
+$line-height-large-headline: 130%;
 $line-height-headline: 130%;
-$line-height-subheadline: 130%;
+$line-height-subheadline: 150%;
 $line-height-body: 150%;
-$line-height-caption: 150%;
+$line-height-statement: 100%;
+$line-height-caption: 130%;
 $line-height-overline: 100%;
 
 @mixin balance {
@@ -82,9 +83,8 @@ $line-height-overline: 100%;
 @mixin large-headline {
   font-family: $font-family-object-sans !important;
   font-size: $font-size-2x-large !important;
-  font-weight: $font-weight-black;
+  font-weight: $font-weight-bold;
   line-height: $line-height-large-headline;
-  text-transform: uppercase;
 }
 
 @mixin large-headline-script {
@@ -96,24 +96,18 @@ $line-height-overline: 100%;
 
 @mixin headline {
   font-family: $font-family-object-sans !important;
-  font-size: $font-size-x-large !important;
-  font-weight: $font-weight-heavy;
+  font-size: $font-size-large !important;
+  font-weight: $font-weight-bold;
   line-height: $line-height-headline;
 }
 
 @mixin subheadline {
   font-family: $font-family-object-sans !important;
-  font-size: $font-size-large !important;
-  font-weight: $font-weight-heavy;
+  font-size: $font-size-medium !important;
+  font-weight: $font-weight-medium;
   line-height: $line-height-subheadline;
 }
 
-@mixin title {
-  @include body;
-
-  font-weight: $font-weight-bold;
-}
-
 @mixin body() {
   font-family: $font-family-object-sans !important;
   font-size: $font-size-medium !important;
@@ -121,6 +115,12 @@ $line-height-overline: 100%;
   line-height: $line-height-body;
 }
 
+@mixin statement() {
+  @include body();
+
+  line-height: $line-height-statement;
+}
+
 @mixin caption() {
   font-family: $font-family-object-sans !important;
   font-size: $font-size-small !important;
@@ -133,7 +133,7 @@ $line-height-overline: 100%;
   font-family: $font-family-object-sans !important;
   font-size: $font-size-small !important ; 
   font-weight: $font-weight-heavy;
-  letter-spacing: 0 !important;
+  letter-spacing: 1px !important;
   line-height: $line-height-overline;
   text-transform: uppercase;
 }

package/src/styles/_object-sans.scss

@@ -18,6 +18,6 @@
 
 @include object-sans($font-weight-thin, 'ObjectSans-Thin', 'ObjectSans-ThinSlanted');
 @include object-sans($font-weight-normal, 'ObjectSans-Regular', 'ObjectSans-Slanted');
+@include object-sans($font-weight-medium, 'ObjectSans-Medium', 'ObjectSans-MediumSlanted');
 @include object-sans($font-weight-bold, 'ObjectSans-Bold', 'ObjectSans-BoldSlanted');
 @include object-sans($font-weight-heavy, 'ObjectSans-Heavy', 'ObjectSans-HeavySlanted');
-@include object-sans($font-weight-black, 'ObjectSans-Black', 'ObjectSans-BlackSlanted');

package/src/styles/_typography.scss

@@ -22,15 +22,15 @@
   .subheadline {
     @include subheadline;
   }
-  
-  .title {
-    @include title;
-  }
-  
+
   p,
   .body {
     @include body;
   }
+
+  .statement {
+    @include statement;
+  }
   
   .caption {
     @include caption;