@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CButton/CButton.vue

@@ -0,0 +1,347 @@
+<!-- eslint-disable vue/no-deprecated-slot-attribute -->
+<template>
+  <sl-button
+    v-bind="$attrs"
+    ref="button"
+    class="c-button"
+    :class="{
+      'c-button--block': injectedOrPropBlock,
+      'c-button--has-prefix-icon': hasIcon && iconPosition === 'prefix',
+      'c-button--has-suffix-icon': hasIcon && iconPosition === 'suffix',
+      [`c-button-level--${level}`]: level,
+      [`c-button-variant--${computedVariant}`]: computedVariant,
+      [`c-button-size--${computedSize}`]: computedSize,
+    }"
+    :data-block="dataBlock"
+    :data-href="routerDestinationOrHref"
+    :data-level="level"
+    :data-loading="dataLoading"
+    :data-size="computedSize"
+    data-test="button"
+    :data-variant="computedVariant"
+    :disabled="disabled"
+    :href="routerDestinationOrHref"
+    :loading="loading || undefined"
+    :size="computedSize"
+    :target="target"
+    :variant="shoelaceVariant"
+    v-on="animationListeners"
+    @click="onClick"
+    @sl-focus="$emit('focus', $event)"
+    @sl-blur="$emit('blur', $event)"
+  >
+    <span v-if="hasIcon" :slot="iconPosition" data-test="button-icon-slot">
+      <slot name="icon">
+        <font-awesome-icon v-if="icon" :icon="icon" />
+      </slot>
+    </span>
+    <slot data-test="button-default-slot" />
+  </sl-button>
+</template>
+
+<script lang="ts">
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import type { PropType } from 'vue';
+import { computed, defineComponent, inject, ref, toRefs } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+
+import type {
+  ButtonIconPosition,
+  ButtonLevel,
+  ButtonShoelaceVariant,
+  ButtonSize,
+  ButtonVariant,
+} from '@propelinc/citrus-ui/src/components/CButton/types';
+import { useTapAnimation } from '@propelinc/citrus-ui/src/composables/animation';
+import { useRouterLink } from '@propelinc/citrus-ui/src/composables/router';
+import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
+import { BLOCK, BOUNCE_AMOUNT, LARGE } from '@propelinc/citrus-ui/src/services/injections/buttons';
+
+/**
+ * Shoelace has a set of variants that don't match the variant names we would like to use.
+ * This mapping is used to translate the variant names to the correct Shoelace variant names
+ * and apply it to the underlying Shoelace button component.
+ */
+export const VARIANT_TO_SHOELACE_VARIANT: Record<ButtonVariant, ButtonShoelaceVariant> = {
+  primary: 'primary',
+  // Shoelace `default` is an outline style
+  secondary: 'default',
+  tertiary: 'text',
+};
+
+const BLOCK_BOUNCE_AMOUNT = 0.96;
+const BASE_BOUNCE_AMOUNT = 0.94;
+
+export default defineComponent({
+  components: {
+    FontAwesomeIcon,
+  },
+  props: {
+    /** Controls whether button appears as full-width */
+    block: { type: Boolean, default: false },
+    /** Controls whether button is disabled */
+    disabled: { type: Boolean, default: false },
+    /** Designates the button as an anchor and applies the href attribute */
+    href: { type: String, default: undefined },
+    /** Chooses an icon to render on the left side of the button */
+    icon: {
+      type: [String, Array, Object] as PropType<string | string[] | IconDefinition>,
+      default: undefined,
+    },
+    /** Chooses whether to place the icon before or after the button text */
+    iconPosition: {
+      type: String as PropType<ButtonIconPosition>,
+      default: 'prefix',
+      validator: (value: string) => ['prefix', 'suffix'].includes(value),
+    },
+    /**
+     * @deprecated use `size` prop instead
+     * Controls whether button uses the large variant
+     */
+    large: { type: Boolean, default: false, deprecated: true },
+    /** Controls the level of the button */
+    level: {
+      type: String as PropType<ButtonLevel>,
+      default: 'normal',
+      validator: (value: string) => ['normal', 'danger'].includes(value),
+    },
+    /** Controls whether button is loading */
+    loading: { type: Boolean, default: false },
+    /**
+     * @deprecated use `variant` prop instead
+     * Controls whether button uses the secondary variant */
+    secondary: { type: Boolean, default: false, deprecated: true },
+    /**
+     * Controls the size of the button
+     * @default 'medium'
+     */
+    size: {
+      type: String as PropType<ButtonSize>,
+      default: 'medium',
+      validator: (value: string) => ['medium', 'large'].includes(value),
+    },
+    /** Designates the target attribute. Only use with the href prop. */
+    target: { type: String, default: undefined },
+    /**
+     * @deprecated use `variant` prop instead
+     * Controls whether button uses the tertiary variant
+     */
+    tertiary: { type: Boolean, default: false, deprecated: true },
+    /** Controls whether button functions as a router-link */
+    to: { type: [Object, String] as PropType<RouteLocationRaw>, default: undefined },
+    /**
+     * Controls the styling of the button
+     * @default 'primary'
+     */
+    variant: {
+      type: String as PropType<ButtonVariant>,
+      default: 'primary',
+      validator: (value: string) => ['primary', 'secondary', 'tertiary'].includes(value),
+    },
+  },
+  emits: ['click', 'focus', 'blur'],
+  setup(props, { emit }) {
+    const { block, to } = toRefs(props);
+    const { href: routerDestination, navigate } = useRouterLink(to);
+    const routerDestinationOrHref = computed(() => routerDestination.value ?? props.href);
+
+    const dataLoading = computed<true | undefined>(() => props.loading || undefined);
+
+    const injectedBlock = inject(BLOCK, undefined);
+    const injectedOrPropBlock = computed(() => injectedBlock?.value ?? props.block);
+    const dataBlock = computed<true | undefined>(() => injectedOrPropBlock.value || undefined);
+
+    const iconSlotHasContent = useSlotHasContent('icon');
+    const hasIcon = computed(() => iconSlotHasContent.value || !!props.icon);
+
+    /**
+     * Handle the deprecated `secondary` and `tertiary` props.
+     */
+    const computedVariant = computed((): ButtonVariant => {
+      if (props.secondary) {
+        return 'secondary';
+      }
+
+      if (props.tertiary) {
+        return 'tertiary';
+      }
+
+      return props.variant;
+    });
+
+    /**
+     * Map the computed variant to the Shoelace variant
+     */
+    const shoelaceVariant = computed(() => VARIANT_TO_SHOELACE_VARIANT[computedVariant.value]);
+
+    /**
+     * The deprecated `large` prop can be injected through a provider.
+     */
+    const injectedLarge = inject(LARGE, undefined);
+    const injectedOrPropsLarge = computed(() => injectedLarge?.value ?? props.large);
+    /**
+     * Because we want the `size` prop to have a default, it's always supplied.
+     * Thus, our only option to respect the deprecated `large` prop is to give it priority.
+     */
+    const computedSize = computed(() => {
+      if (injectedOrPropsLarge.value) {
+        return 'large';
+      }
+
+      return props.size;
+    });
+
+    function onClick(event: MouseEvent): void {
+      /**
+       * If the button is disabled or loading, do not take action.
+       * This prevents double/extra clicks when an async operation is in progress.
+       */
+      if (props.disabled || props.loading) {
+        return;
+      }
+
+      navigate(event);
+      emit('click', event);
+    }
+
+    const button = ref<HTMLElement | null>(null);
+    const injectedBounceAmount = inject(BOUNCE_AMOUNT, null);
+    const bounceAmount = computed(() => {
+      /**
+       * If the button is disabled or loading, do not animate the button.
+       */
+      if (props.disabled || props.loading) {
+        return 1;
+      }
+
+      if (injectedBounceAmount) {
+        return injectedBounceAmount;
+      }
+
+      if (block.value) {
+        return BLOCK_BOUNCE_AMOUNT;
+      }
+
+      return BASE_BOUNCE_AMOUNT;
+    });
+    const animationListeners = useTapAnimation({
+      el: button,
+      keyframes: {
+        default: { transform: 'scale(1)' },
+        pressed: { transform: `scale(${bounceAmount.value})` },
+      },
+    });
+
+    return {
+      animationListeners,
+      button,
+      computedSize,
+      computedVariant,
+      dataBlock,
+      dataLoading,
+      hasIcon,
+      injectedOrPropBlock,
+      injectedOrPropsLarge,
+      onClick,
+      routerDestinationOrHref,
+      shoelaceVariant,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/button';
+
+.c-button {
+  // Prevents the iOS tap highlight color from showing up on buttons
+  -webkit-tap-highlight-color: transparent;
+
+  &::part(base) {
+    // Included in all buttons so that they line up in rows, even buttons with transparent borders
+    border-width: $border-width;
+    transition: background-color 0.2s ease-in-out;
+  }
+
+  &::part(label) {
+    padding: 0 16px;
+  }
+}
+
+.c-button-size--medium::part(base) {
+  --sl-input-height-medium: #{$button-size-medium};
+}
+
+.c-button-size--large::part(base) {
+  --sl-input-height-large: #{$button-size-large};
+}
+
+.c-button--has-prefix-icon {
+  &::part(base) {
+    padding-inline-start: 16px;
+  }
+
+  &::part(label) {
+    padding-inline-start: 8px;
+  }
+}
+
+.c-button--has-suffix-icon {
+  &::part(base) {
+    padding-inline-end: 16px;
+  }
+
+  &::part(label) {
+    padding-inline-end: 8px;
+  }
+}
+
+.c-button--block {
+  min-width: 100%;
+}
+
+.c-button-variant--primary::part(base) {
+  @include button-theme-primary;
+}
+
+.c-button-variant--primary.c-button-level--danger::part(base) {
+  @include button-theme-primary-danger;
+}
+
+.c-button-variant--secondary::part(base) {
+  @include button-theme-secondary;
+}
+
+.c-button-variant--secondary.c-button-level--danger::part(base) {
+  @include button-theme-secondary-danger;
+}
+
+.c-button-variant--tertiary::part(base) {
+  @include button-theme-tertiary;
+}
+
+.c-button-variant--tertiary.c-button-level--danger::part(base) {
+  @include button-theme-tertiary-danger;
+}
+
+/**
+ * Override Shoelace's default disabled styles
+ * (The danger styles seem fine)
+ */
+:not(.c-button-level--danger) {
+  &.c-button-variant--primary[disabled]::part(base) {
+    @include button-theme($color-gray-400, $color-gray-200, $color-gray-200);
+  }
+
+  &.c-button-variant--secondary[disabled]::part(base) {
+    @include button-theme($color-gray-300, $color-gray-300, transparent);
+  }
+
+  &.c-button-variant--tertiary[disabled]::part(base) {
+    @include button-theme($color-gray-300, transparent, transparent);
+  }
+}
+</style>

package/src/components/CButton/types.ts

@@ -0,0 +1,5 @@
+export type ButtonSize = 'medium' | 'large';
+export type ButtonLevel = 'normal' | 'danger';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonShoelaceVariant = 'default' | 'primary' | 'text';
+export type ButtonIconPosition = 'prefix' | 'suffix';

package/src/components/CButtonStack.vue

@@ -0,0 +1,36 @@
+<template>
+  <component :is="tag" class="c-button-stack" data-test="c-button-stack">
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+import { defineComponent, provide, ref, toRefs } from 'vue';
+
+import { BLOCK, LARGE } from '@propelinc/citrus-ui/src/services/injections/buttons';
+
+export default defineComponent({
+  props: {
+    tag: { type: String, default: 'div' },
+    large: { type: Boolean, default: null },
+  },
+  setup(props) {
+    const { large } = toRefs(props);
+
+    provide(BLOCK, ref(true));
+    provide(LARGE, large);
+  },
+});
+</script>
+
+<style scoped>
+/**
+ * FIXME: https://linear.app/slanden/issue/FE-37/remove-exported-margins
+ * These are exported margins, would be preferable to use a Flex column with gap instead
+ */
+:deep() {
+  .c-button + .c-button {
+    margin-top: 8px;
+  }
+}
+</style>

package/src/components/CCard.vue

@@ -1,64 +1,172 @@
 <template>
-  <v-card
-    flat
-    :outlined="outlined"
-    :ripple="false"
-    class="card"
-    :class="{ 'card--divided': divided }"
-    :to="to"
+  <component
+    :is="config.element"
+    v-bind="config.attrs"
+    data-test="card"
+    class="c-card"
+    :class="{
+      'c-card--tile': tile,
+      'c-card--borderless': borderless,
+      'c-card--link': config.isLink,
+      'c-card--stretch': stretch,
+    }"
     :href="href"
-    :color="color"
-    v-on="$listeners"
+    :style="{
+      '--background-color': backgroundCssColor,
+      '--border-color': borderCssColor,
+    }"
+    :to="to"
   >
-    <c-card-header v-if="title">
+    <CCardHeader v-if="title">
       {{ title }}
-    </c-card-header>
-
+    </CCardHeader>
     <slot />
-  </v-card>
+  </component>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import { RawLocation } from 'vue-router';
-
-import CCardHeader from '@/components/CCardHeader.vue';
-
-@Component({ name: 'CCard', components: { CCardHeader } })
-export default class CCard extends Vue {
-  @Prop(String) title?: string;
-  /** Shows borders between header, sections, and footer */
-  @Prop({ type: Boolean, default: false }) divided!: boolean;
-  /** Sets background color */
-  @Prop(String) color?: string;
-  @Prop([Object, String]) to?: RawLocation;
-  @Prop(String) href?: string;
-  @Prop({ type: Boolean, default: true }) outlined!: boolean;
+import type { PropType } from 'vue';
+import { computed, defineComponent, toRefs } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+
+import CCardHeader from '@propelinc/citrus-ui/src/components/CCardHeader.vue';
+import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
+
+type RoutingVariant = 'none' | 'internal' | 'external';
+
+export interface InternalCardConfig {
+  attrs: Record<string, unknown>;
+  element: string;
+  isLink: boolean;
 }
+
+export default defineComponent({
+  components: { CCardHeader },
+  props: {
+    /** Sets the border color of the card */
+    borderColor: { type: String, default: undefined },
+
+    /** Removes the border of the card */
+    borderless: { type: Boolean, default: false },
+
+    /** Sets the background color of the entire card */
+    color: { type: String, default: undefined },
+
+    /** Navigates externally on click */
+    href: { type: String, default: undefined },
+
+    /** Stretches the card vertically to fill the height of the parent container */
+    stretch: { type: Boolean, default: false },
+
+    /** Toggles a squared-off card style intended to fill the width of the page */
+    tile: { type: Boolean, default: false },
+
+    /** Sets the title of the card */
+    title: { type: String, default: undefined },
+
+    /** Navigates within the app on click */
+    to: { type: [Object, String] as PropType<RouteLocationRaw | undefined>, default: undefined },
+  },
+  setup(props, { attrs }) {
+    const { href, to } = toRefs(props);
+
+    const { cssColor: backgroundCssColor } = useCssColor(() => props.color);
+    const { cssColor: borderCssColor } = useCssColor(() => props.borderColor);
+
+    const routingVariant = computed<RoutingVariant>(() => {
+      if (to.value) {
+        return 'internal';
+      }
+
+      if (href.value) {
+        return 'external';
+      }
+
+      return 'none';
+    });
+
+    const config = computed<InternalCardConfig>(() => {
+      switch (routingVariant.value) {
+        case 'internal':
+          return {
+            attrs,
+            element: 'router-link',
+            isLink: true,
+          };
+
+        case 'external':
+          return {
+            attrs: {
+              ...attrs,
+              role: 'link',
+              tabindex: '0',
+              target: '_blank',
+            },
+            element: 'a',
+            isLink: true,
+          };
+
+        case 'none':
+        default:
+          return { attrs, element: 'div', isLink: false };
+      }
+    });
+
+    return { config, backgroundCssColor, borderCssColor };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/core.scss';
+@import '@propelinc/citrus-ui/src/styles/core';
 
-.card {
+.c-card {
+  --background-color: #{$color-background};
+  --border-color: #{$color-border};
+  --border-radius: #{$border-radius-next};
+  --text-color: #{$color-text-primary};
+
+  background-color: var(--background-color);
+  border-color: var(--border-color);
+  border-radius: var(--border-radius);
+  border-style: solid;
+  border-width: $border-width;
+  color: var(--text-color);
+  display: block;
+  max-width: 100%;
   overflow: hidden;
 
+  /**
+   * FIXME: (kyleshevlin - https://linear.app/slanden/issue/FE-37/remove-exported-margins):
+   * This is an "exported margin" and we should try to remove it. They make composition difficult.
+   * Read more here: https://kyleshevlin.com/no-outer-margin
+   *
+   * For example, imagine we want to have multiple cards in a row. This selector will add a
+   * margin-top to every card except the first. That would not be desired.
+   *
+   * Ideally, layout of sibling cards is always handled by a parent element.
+   */
   & + & {
-    margin-top: 12px;
+    margin-top: 8px;
   }
 }
 
-.card--divided::v-deep {
-  :is(.card__header, .card__section, .card__footer):not(:first-child) {
-    border-top: $border;
-  }
+.c-card--tile {
+  --border-radius: 0;
 
-  .card__section {
-    padding-top: $card-v-spacing;
-  }
+  border-left: none;
+  border-right: none;
+}
 
-  .card__footer {
-    padding-top: $card-v-spacing;
-  }
+.c-card--borderless {
+  --border-color: transparent;
+}
+
+.c-card--link {
+  cursor: pointer;
+}
+
+.c-card--stretch {
+  height: 100%;
 }
 </style>

package/src/components/CCardFooter.vue

@@ -1,39 +1,23 @@
 <template>
-  <v-card-actions class="card__footer">
+  <CButtonStack v-bind="$attrs" data-test="card-footer" class="c-card-footer">
     <slot />
-  </v-card-actions>
+  </CButtonStack>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { defineComponent } from 'vue';
 
-@Component({ name: 'CCardFooter' })
-export default class CCardFooter extends Vue {}
+import CButtonStack from '@propelinc/citrus-ui/src/components/CButtonStack.vue';
+
+export default defineComponent({
+  components: { CButtonStack },
+});
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/core.scss';
-
-.card__footer {
-  align-items: stretch;
-  flex-direction: column;
-
-  ::v-deep {
-    :is(.button--primary, .button--secondary) + :is(.button--primary, .button--secondary) {
-      margin-top: 8px;
-    }
-
-    :is(.button--primary, .button--secondary) + .button--tertiary {
-      margin-top: 4px;
-    }
-
-    .button--tertiary + .button--tertiary {
-      margin-top: 4px;
-    }
+@import '@propelinc/citrus-ui/src/styles/core';
 
-    .button--tertiary {
-      margin: -4px 0;
-    }
-  }
+.c-card-footer {
+  padding: 0 16px 16px;
 }
 </style>