@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/styles/variables.scss

@@ -26,25 +26,24 @@ $font-weights: (
 );
 
 $headings: (
+  'eyebrow': $eyebrow,
   'h1': $large-headline,
   'h2': $headline,
   'h3': $subheadline,
-  // NOTE(mohan): Vuetify generates a `headline` class using these styles.
-  // This class has a tendency to override our own headline styles.
-  // Remove after upgrading to 2.3.0, since `headline` is renamed to `h5` in that update.
   'h5': $headline,
   'body-1': $body,
   'body-2': $body,
   'caption': $caption,
-  'overline': $overline,
+  // @deprecated use 'eyebrow' instead
+  'overline': $eyebrow,
 );
 
 $border-radius-root: 8px;
 
 $material-light: (
   'text': (
-    'primary': $color-navy,
-    'secondary': $color-navy,
+    'primary': $color-black,
+    'secondary': $color-black,
     'link': $color-accent-blue,
     'link-hover': $color-accent-blue-shade-1,
   ),
@@ -56,17 +55,20 @@ $material-light: (
 // ****************************************************************************
 $expansion-panel-active-margin: 0;
 $expansion-panel-header-font-size: map-get($subheadline, 'size');
-$expansion-panel-header-padding: 16px;
+$expansion-panel-header-padding: 18px 16px 16px;
 $expansion-panel-content-padding: 0 16px 16px;
 $expansion-panel-header-min-height: 0;
 $expansion-panel-active-header-min-height: 0;
 
 // ****************************************************************************
-// ALERT
+// TOAST
 // ****************************************************************************
-$snackbar-left: 16px;
-$snackbar-right: 16px;
-$snackbar-top: 24px;
+$snackbar-top: calc(env(safe-area-inset-top) + 48px);
+
+//NOTE(ej) The vuetify default min width is slightly higher which
+//prevents users on smaller devices from dismissing a Toast
+$snackbar-wrapper-min-width: 300px;
+$snackbar-action-margin: 12px;
 $snackbar-content-font-size: map-get($body, 'size');
 $snackbar-content-padding: 12px 16px;
 $snackbar-font-size: map-get($body, 'size');
@@ -74,16 +76,16 @@ $snackbar-font-size: map-get($body, 'size');
 // ****************************************************************************
 // BUTTON
 // ****************************************************************************
-$btn-font-weight: $font-weight-bold;
+$btn-font-weight: $font-weight-semibold;
 $btn-text-transform: none;
 $btn-letter-spacing: normal;
 $btn-font-sizes: (
   'default': $font-size-medium,
-  'large': $font-size-large,
+  'large': $font-size-medium,
 );
 $btn-sizes: (
   'default': 36,
-  'large': 58,
+  'large': 48,
 );
 
 // ****************************************************************************
@@ -134,4 +136,14 @@ $text-field-enclosed-details-padding: 0 16px;
 $dialog-card-title-font-size: map-get($headline, 'size');
 $dialog-card-title-font-weight: map-get($headline, 'weight');
 $dialog-card-title-letter-spacing: map-get($headline, 'letter-spacing');
-$dialog-card-text-padding: 0 24px 16px;
+$dialog-card-text-padding: 0 $card-h-spacing $card-v-spacing;
+$dialog-card-actions-padding: 0 $card-h-spacing $card-v-spacing;
+$dialog-card-title-padding: $card-h-spacing $card-h-spacing 10px;
+
+// ****************************************************************************
+// SWITCHES
+// ****************************************************************************
+
+$switch-track-inset-height: 24px;
+$switch-track-inset-width: 43px;
+$switch-track-inset-opacity: 1;

package/src/theme/icons.ts

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

package/src/types/CForm.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'vue';
+
+import type CForm from '../components/CForm.vue';
+
+export interface ValidationState {
+  id: string;
+  validate: () => boolean;
+  valid: Ref<boolean>;
+  field?: Ref<HTMLElement | null>;
+}
+
+export type CFormRef = typeof CForm & {
+  validate: () => boolean;
+  inputs: ValidationState[];
+};

package/src/types/font-awesome.ts

@@ -0,0 +1,6 @@
+import type { IconDefinition, IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
+import type { PropType } from 'vue';
+
+export type FaIconArray = [IconPrefix, IconName];
+export type FaIcon = IconName | FaIconArray | IconDefinition;
+export type FaPropType = PropType<FaIcon>;

package/src/types.ts

@@ -0,0 +1,15 @@
+export interface SplitInputField {
+  characters: number;
+  placeholder?: string;
+  separator?: string;
+}
+
+export type SplitInputRule = (v: string) => string | boolean;
+
+export enum InputVariants {
+  DEFAULT = 'default',
+  CONTAINED = 'contained',
+  SEGMENTED = 'segmented',
+}
+
+export type ToastVariant = 'info' | 'success' | 'error' | 'warning';

package/.browserslistrc

@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not dead

package/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ['../../.eslintrc.js'],
-};

package/.stylelintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['../../.stylelintrc.js'],
-};

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset'],
-};