@propelinc/citrus-ui 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"

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/index.d.ts

@@ -10,6 +10,8 @@ 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 CSkeletonLoaderCircle: Component;
 export const CSkeletonLoaderText: Component;
 export const CTextField: Component;

package/src/index.ts

@@ -7,6 +7,8 @@ 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 _CSkeletonLoaderCircle from '@/components/CSkeletonLoaderCircle.vue';
 import _CSkeletonLoaderText from '@/components/CSkeletonLoaderText.vue';
 import _CTextField from '@/components/CTextField.vue';
@@ -23,6 +25,8 @@ 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 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/typography.less

@@ -10,6 +10,10 @@
   .large-headline();
 }
 
+.large-headline-script {
+  .large-headline-script();
+}
+
 .headline {
   .headline();
 }
@@ -34,3 +38,7 @@ p,
 .overline {
   .overline();
 }
+
+.font-family-blitz {
+  font-family: @font-family-blitz;
+}

package/src/styles/variables.less

@@ -7,6 +7,7 @@
 
 // TYPOGRAPHY
 @font-family-object-sans: ObjectSans;
+@font-family-blitz: Blitz;
 
 @font-weight-thin: 100;
 @font-weight-light: 300; // Currently unused, but holding its place in case we add it.
@@ -46,6 +47,13 @@
   text-transform: uppercase;
 }
 
+.large-headline-script() {
+  font-family: @font-family-blitz !important;
+  font-size: @font-size-3x-large !important;
+  font-weight: @font-weight-normal;
+  line-height: @line-height-large-headline;
+}
+
 .headline() {
   font-family: @font-family-object-sans !important;
   font-size: @font-size-x-large !important;