design-system-next 2.11.20 → 2.12.1

package/src/components/input/input.vue

@@ -1,72 +1,72 @@
-<template>
-  <div :class="inputClasses.baseClasses">
-    <label v-if="props.label" :for="id" :class="inputClasses.labelClasses">
-      {{ props.label }}
-    </label>
-
-    <div :class="inputClasses.inputTextBaseClasses">
-      <div v-if="$slots.prefix" :class="inputClasses.prefixSlotClasses">
-        <slot name="prefix" />
-      </div>
-      <input
-        v-bind="$attrs"
-        :id="props.id"
-        ref="inputTextRef"
-        :class="[inputClasses.inputTextClasses, { 'number-input': props.type === 'number' }]"
-        :placeholder="props.placeholder"
-        :type="props.type"
-        :minlength="props.minLength"
-        :maxlength="props.maxLength"
-        :value="modelValue"
-        :disabled="props.disabled"
-        :readonly="props.readonly"
-        @input="onInput"
-      />
-      <div v-if="$slots.trailing" :class="inputClasses.trailingSlotClasses">
-        <slot name="trailing" />
-      </div>
-      <div v-if="$slots.icon" :class="inputClasses.iconSlotClasses" @click="disableClickEvent">
-        <slot name="icon" />
-      </div>
-    </div>
-
-    <div v-if="props.displayHelper || props.showCharCount" :class="inputClasses.helperContainerClasses">
-      <div v-if="props.displayHelper" :class="inputClasses.helperClasses">
-        <slot name="helperMessage">
-          <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
-          <span>{{ props.helperText }}</span>
-        </slot>
-      </div>
-      <div v-if="props.showCharCount" :class="inputClasses.charCountClasses">
-        {{ currentLength }}{{ props.maxLength ? '/' + props.maxLength : '' }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useSlots } from 'vue';
-
-import { Icon } from '@iconify/vue';
-
-import { inputPropTypes, inputEmitTypes } from './input';
-import { useInput } from './use-input';
-
-const emit = defineEmits(inputEmitTypes);
-const props = defineProps(inputPropTypes);
-const slots = useSlots();
-
-const { inputClasses, inputTextRef, onInput, disableClickEvent, currentLength } = useInput(props, emit, slots);
-</script>
-
-<style scoped>
-.number-input::-webkit-outer-spin-button,
-.number-input::-webkit-inner-spin-button {
-  margin: 0;
-  -webkit-appearance: none;
-}
-
-.number-input {
-  -moz-appearance: textfield;
-}
-</style>
+<template>
+  <div :class="inputClasses.baseClasses">
+    <label v-if="props.label" :for="id" :class="inputClasses.labelClasses">
+      {{ props.label }}
+    </label>
+
+    <div :class="inputClasses.inputTextBaseClasses">
+      <div v-if="$slots.prefix" :class="inputClasses.prefixSlotClasses">
+        <slot name="prefix" />
+      </div>
+      <input
+        v-bind="$attrs"
+        :id="props.id"
+        ref="inputTextRef"
+        :class="[inputClasses.inputTextClasses, { 'number-input': props.type === 'number' }]"
+        :placeholder="props.placeholder"
+        :type="props.type"
+        :minlength="props.minLength"
+        :maxlength="props.maxLength"
+        :value="modelValue"
+        :disabled="props.disabled"
+        :readonly="props.readonly"
+        @input="onInput"
+      />
+      <div v-if="$slots.trailing" :class="inputClasses.trailingSlotClasses">
+        <slot name="trailing" />
+      </div>
+      <div v-if="$slots.icon" :class="inputClasses.iconSlotClasses" @click="disableClickEvent">
+        <slot name="icon" />
+      </div>
+    </div>
+
+    <div v-if="props.displayHelper || props.showCharCount" :class="inputClasses.helperContainerClasses">
+      <div v-if="props.displayHelper" :class="inputClasses.helperClasses">
+        <slot name="helperMessage">
+          <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
+          <span>{{ props.helperText }}</span>
+        </slot>
+      </div>
+      <div v-if="props.showCharCount" :class="inputClasses.charCountClasses">
+        {{ currentLength }}{{ props.maxLength ? '/' + props.maxLength : '' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue';
+
+import { Icon } from '@iconify/vue';
+
+import { inputPropTypes, inputEmitTypes } from './input';
+import { useInput } from './use-input';
+
+const emit = defineEmits(inputEmitTypes);
+const props = defineProps(inputPropTypes);
+const slots = useSlots();
+
+const { inputClasses, inputTextRef, onInput, disableClickEvent, currentLength } = useInput(props, emit, slots);
+</script>
+
+<style scoped>
+.number-input::-webkit-outer-spin-button,
+.number-input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+
+.number-input {
+  -moz-appearance: textfield;
+}
+</style>

package/src/components/list/ladderized-list/ladderized-list.ts

@@ -1,39 +1,39 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import { MenuListType } from '../list';
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const ladderizedListPropTypes = {
-  modelValue: {
-    type: Array as PropType<string[]>,
-    required: true,
-    default: [],
-  },
-  menuList: {
-    type: Array as PropType<MenuListType[]>,
-    required: true,
-    default: [],
-  },
-  menuLevel: {
-    type: Number,
-    default: 0,
-  },
-  searchableMenu: {
-    type: Boolean,
-    default: false,
-  },
-  searchableMenuPlaceholder: {
-    type: String,
-    default: 'Search...',
-  },
-  removeCurrentLevelInBackLabel: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export const ladderizedListEmitTypes = {
-  'update:modelValue': (value: string[]) => value,
-};
-
-export type LadderizedListPropTypes = ExtractPropTypes<typeof ladderizedListPropTypes>;
-export type LadderizedListEmitTypes = typeof ladderizedListEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+import { MenuListType } from '../list';
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const ladderizedListPropTypes = {
+  modelValue: {
+    type: Array as PropType<string[]>,
+    required: true,
+    default: [],
+  },
+  menuList: {
+    type: Array as PropType<MenuListType[]>,
+    required: true,
+    default: [],
+  },
+  menuLevel: {
+    type: Number,
+    default: 0,
+  },
+  searchableMenu: {
+    type: Boolean,
+    default: false,
+  },
+  searchableMenuPlaceholder: {
+    type: String,
+    default: 'Search...',
+  },
+  removeCurrentLevelInBackLabel: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const ladderizedListEmitTypes = {
+  'update:modelValue': (value: string[]) => value,
+};
+
+export type LadderizedListPropTypes = ExtractPropTypes<typeof ladderizedListPropTypes>;
+export type LadderizedListEmitTypes = typeof ladderizedListEmitTypes;

package/src/components/logo/logo.ts

@@ -1,43 +1,43 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-const LOGO_THEMES = ['white', 'dark', 'gray', 'green'] as const;
-const LOGO_NAMES = [
-  'benchmark',
-  'ecosystem',
-  'engage',
-  'finances',
-  'hr-mobile',
-  'hr',
-  'inbound',
-  'insight',
-  'readycash',
-  'readywage',
-  'payroll',
-  'performance-plus',
-  'procurement',
-  'professional-services',
-  'recruit',
-  'recruit-plus',
-  'sail',
-  'sidekick',
-  'wellness',
-] as const;
-
-export const logoPropTypes = {
-  name: {
-    type: String as PropType<(typeof LOGO_NAMES)[number]>,
-    validator: (value: (typeof LOGO_NAMES)[number]) => LOGO_NAMES.includes(value),
-    default: 'hr',
-  },
-  theme: {
-    type: String as PropType<(typeof LOGO_THEMES)[number]>,
-    validator: (value: (typeof LOGO_THEMES)[number]) => LOGO_THEMES.includes(value),
-    default: 'dark',
-  },
-  width: {
-    type: [String, Number] as PropType<string | number>,
-    default: '50', // If number, it will be treated as px
-  },
-};
-
-export type LogoPropTypes = ExtractPropTypes<typeof logoPropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+const LOGO_THEMES = ['white', 'dark', 'gray', 'green'] as const;
+const LOGO_NAMES = [
+  'benchmark',
+  'ecosystem',
+  'engage',
+  'finances',
+  'hr-mobile',
+  'hr',
+  'inbound',
+  'insight',
+  'readycash',
+  'readywage',
+  'payroll',
+  'performance-plus',
+  'procurement',
+  'professional-services',
+  'recruit',
+  'recruit-plus',
+  'sail',
+  'sidekick',
+  'wellness',
+] as const;
+
+export const logoPropTypes = {
+  name: {
+    type: String as PropType<(typeof LOGO_NAMES)[number]>,
+    validator: (value: (typeof LOGO_NAMES)[number]) => LOGO_NAMES.includes(value),
+    default: 'hr',
+  },
+  theme: {
+    type: String as PropType<(typeof LOGO_THEMES)[number]>,
+    validator: (value: (typeof LOGO_THEMES)[number]) => LOGO_THEMES.includes(value),
+    default: 'dark',
+  },
+  width: {
+    type: [String, Number] as PropType<string | number>,
+    default: '50', // If number, it will be treated as px
+  },
+};
+
+export type LogoPropTypes = ExtractPropTypes<typeof logoPropTypes>;

package/src/components/logo/logo.vue

@@ -1,14 +1,14 @@
-<template>
-  <div>
-    <img v-bind="$attrs" :src="logoSrc" :alt="logoTitle" :title="logoTitle" :width="width" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useLogo } from './use-logo';
-import { logoPropTypes } from './logo';
-
-const props = defineProps(logoPropTypes);
-
-const { logoSrc, logoTitle } = useLogo(props);
-</script>
+<template>
+  <div>
+    <img v-bind="$attrs" :src="logoSrc" :alt="logoTitle" :title="logoTitle" :width="width" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useLogo } from './use-logo';
+import { logoPropTypes } from './logo';
+
+const props = defineProps(logoPropTypes);
+
+const { logoSrc, logoTitle } = useLogo(props);
+</script>

package/src/components/logo/use-logo.ts

@@ -1,41 +1,41 @@
-import { computed } from 'vue';
-import type { LogoPropTypes } from './logo';
-import { Cloudinary } from '@cloudinary/url-gen';
-
-const CLOUD_NAME = 'dfeykvudc';
-
-const NAME_MAP: Record<string, string> = {
-  'hr': 'Sprout HR',
-  'hr-mobile': 'Sprout HR Mobile',
-  'performance-plus': 'Sprout Performance+',
-  'recruit-plus': 'Sprout Recruit+',
-  'sail': 'Sprout SAIL',
-  'readycash': 'Sprout ReadyCash',
-  'readywage': 'Sprout ReadyWage',
-};
-
-export function useLogo(props: LogoPropTypes) {
-  const cld = new Cloudinary({
-    cloud: {
-      cloudName: CLOUD_NAME,
-    },
-  });
-
-  const logoSrc = computed(() => cld.image(`sprout-${props.name}-${props.theme}`).toURL());
-
-  const logoTitle = computed(() => {
-    if (props.name in NAME_MAP) {
-      return NAME_MAP[props.name];
-    }
-
-    const firstChar = props.name.charAt(0).toUpperCase();
-    const remainingChars = props.name.slice(1);
-    const formattedName = `${firstChar}${remainingChars}`;
-    return `Sprout ${formattedName}`;
-  });
-
-  return {
-    logoSrc,
-    logoTitle,
-  };
-}
+import { computed } from 'vue';
+import type { LogoPropTypes } from './logo';
+import { Cloudinary } from '@cloudinary/url-gen';
+
+const CLOUD_NAME = 'dfeykvudc';
+
+const NAME_MAP: Record<string, string> = {
+  'hr': 'Sprout HR',
+  'hr-mobile': 'Sprout HR Mobile',
+  'performance-plus': 'Sprout Performance+',
+  'recruit-plus': 'Sprout Recruit+',
+  'sail': 'Sprout SAIL',
+  'readycash': 'Sprout ReadyCash',
+  'readywage': 'Sprout ReadyWage',
+};
+
+export function useLogo(props: LogoPropTypes) {
+  const cld = new Cloudinary({
+    cloud: {
+      cloudName: CLOUD_NAME,
+    },
+  });
+
+  const logoSrc = computed(() => cld.image(`sprout-${props.name}-${props.theme}`).toURL());
+
+  const logoTitle = computed(() => {
+    if (props.name in NAME_MAP) {
+      return NAME_MAP[props.name];
+    }
+
+    const firstChar = props.name.charAt(0).toUpperCase();
+    const remainingChars = props.name.slice(1);
+    const formattedName = `${firstChar}${remainingChars}`;
+    return `Sprout ${formattedName}`;
+  });
+
+  return {
+    logoSrc,
+    logoTitle,
+  };
+}

package/src/components/lozenge/lozenge.ts

@@ -52,6 +52,22 @@ export const lozengePropTypes = {
     type: Boolean,
     default: false,
   },
+  icon: {
+    type: String,
+    default: '',
+  },
+  postfixIcon: {
+    type: String,
+    default: '',
+  },
+  interactive: {
+    type: Boolean,
+    default: false,
+  },
+  dropdown: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export type LozengePropTypes = ExtractPropTypes<typeof lozengePropTypes>;

package/src/components/lozenge/lozenge.vue

@@ -1,31 +1,40 @@
 <template>
-  <div :class="lozengeClasses.wrapperClasses">
-    <div v-if="visible && !loading" :class="lozengeClasses.baseClasses">
-      <div :class="lozengeClasses.toneClasses">
-        <div v-if="$slots.icon" class="spr-flex spr-h-3 spr-w-3 spr-items-center spr-overflow-hidden">
-          <slot name="icon" />
+  <div :class="['spr-lozenge__wrapper', lozengeClasses.wrapperClasses]">
+    <div v-if="visible && !loading" :class="['spr-lozenge__base', lozengeClasses.baseClasses]">
+      <div :class="['spr-lozenge__tone',lozengeClasses.toneClasses]" :tabindex="props.interactive || props.dropdown ? 0 : -1">
+        <div v-if="$slots.icon || props.icon" class="spr-lozenge__prefix-icon spr-flex spr-h-3 spr-w-3 spr-items-center spr-overflow-hidden">
+          <slot name="icon">
+            <icon :icon="props.icon" />
+          </slot>
         </div>
 
-        <div v-if="$slots.avatar" class="spr-flex spr-items-center">
-          <slot name="avatar" />
+        <div v-if="$slots.avatar || props.url" class="spr-lozenge__avatar">
+          <slot name="avatar">
+            <div v-if="url" class="spr-h-4 spr-w-4 spr-overflow-hidden">
+              <img class="spr-h-full spr-w-full spr-rounded-full spr-object-cover" :src="url" alt="avatar" />
+            </div>
+          </slot>
         </div>
 
-        <div v-if="url && !$slots.avatar" class="spr-h-4 spr-w-4 spr-overflow-hidden">
-          <img class="spr-h-full spr-w-full spr-rounded-full spr-object-cover" :src="url" alt="avatar" />
-        </div>
+        <span class="spr-lozenge__label spr-label-xs-medium">{{ label }}</span>
 
-        <div>{{ label }}</div>
+        <div v-if="$slots.postfixIcon || props.postfixIcon || props.dropdown" class="spr-lozenge__prefix-icon spr-flex spr-h-3 spr-w-3 spr-items-center spr-overflow-hidden">
+          <slot name="postfixIcon">
+            <icon v-if="props.postfixIcon" :icon="props.postfixIcon" />
+            <icon v-else icon="ph:caret-down-fill" />
+          </slot>
+        </div>
       </div>
     </div>
-    <div v-if="visible && loading" :class="lozengeClasses.baseClasses" />
+    <div v-if="visible && loading" :class="['spr-lozenge__loading', lozengeClasses.baseClasses]" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { lozengePropTypes } from './lozenge';
 import { useLozenge } from './use-lozenge';
+import { Icon } from '@iconify/vue';
 
 const props = defineProps(lozengePropTypes);
-
 const { lozengeClasses } = useLozenge(props);
 </script>

package/src/components/lozenge/use-lozenge.ts

@@ -1,7 +1,5 @@
-import { toRefs, computed, ComputedRef } from 'vue';
-
+import { toRefs, computed, ComputedRef, useSlots } from 'vue';
 import classNames from 'classnames';
-
 import type { LozengePropTypes } from './lozenge';
 
 interface LozengeClasses {
@@ -11,7 +9,9 @@ interface LozengeClasses {
 }
 
 export const useLozenge = (props: LozengePropTypes) => {
-  const { tone, fill, loading } = toRefs(props);
+  const { tone, fill, loading, interactive, url, dropdown } = toRefs(props);
+  const slots = useSlots();
+  const isInteractive = computed(() => interactive.value || dropdown.value);
 
   const lozengeClasses: ComputedRef<LozengeClasses> = computed(() => {
     const wrapperClasses = classNames({
@@ -25,31 +25,62 @@ export const useLozenge = (props: LozengePropTypes) => {
     });
 
     const toneClasses = classNames(
-      'spr-label-xs-medium spr-inline-flex spr-items-center spr-gap-size-spacing-6xs spr-rounded-md spr-border spr-border-solid spr-p-size-spacing-5xs spr-text-xs spr-uppercase',
+      'spr-box-border spr-h-[20px] spr-inline-flex spr-items-center spr-gap-size-spacing-6xs spr-rounded-md spr-border-solid spr-p-size-spacing-5xs spr-text-xs spr-uppercase',
       {
-        'spr-text-color-pending-base spr-background-color-pending-weak !spr-border-color-pending-base':
-          tone.value === 'pending' && !fill.value,
-        'spr-text-color-information-base spr-background-color-information-weak !spr-border-color-information-base':
-          tone.value === 'information' && !fill.value,
-        'spr-text-color-success-base spr-background-color-success-weak !spr-border-color-success-base':
-          tone.value === 'success' && !fill.value,
-        'spr-text-color-base spr-background-color-base !spr-border-color-base': tone.value === 'neutral' && !fill.value,
-        'spr-text-color-danger-base spr-background-color-danger-weak !spr-border-color-danger-base':
-          tone.value === 'danger' && !fill.value,
-        'spr-text-color-caution-base spr-background-color-caution-weak !spr-border-color-caution-base':
-          tone.value === 'caution' && !fill.value,
-        'spr-text-color-strong !spr-border-color-base spr-background-color': tone.value === 'plain' && !fill.value,
+        'spr-h-[20px]': !url.value,
+        'spr-h-[24px]': url.value || slots.avatar,
+        'spr-border': !fill.value,
+        'spr-cursor-pointer': isInteractive.value,
+        // #region - Styles for hollow lozenge
+        // Pending
+        'spr-text-mango-800 spr-background-color-pending-weak spr-border-mango-800': tone.value === 'pending' && !fill.value,
+        'hover:spr-bg-[#FFF89E] active:spr-bg-[#FFF56B]': tone.value === 'pending' && !fill.value && isInteractive.value,
+        // Information
+        'spr-text-blueberry-800 spr-background-color-information-weak spr-border-blueberry-800': tone.value === 'information' && !fill.value,
+        'hover:spr-bg-[#ADD6FF] active:spr-bg-[#7ABDFF]': tone.value === 'information' && !fill.value && isInteractive.value,
+        // Success
+        'spr-text-kangkong-800 spr-background-color-success-weak spr-border-kangkong-800': tone.value === 'success' && !fill.value,
+        'hover:spr-bg-[#AFF8C6] active:spr-bg-[#80F4A4]': tone.value === 'success' && !fill.value && isInteractive.value,
+        // Neutral
+        'spr-text-mushroom-800 spr-background-color-base spr-border-mushroom-800': tone.value === 'neutral' && !fill.value,
+        'hover:spr-bg-[#D3D9D9] active:spr-bg-[#B8C1C1]': tone.value === 'neutral' && !fill.value && isInteractive.value,
+        // Danger
+        'spr-text-tomato-800 spr-background-color-danger-weak spr-border-tomato-800': tone.value === 'danger' && !fill.value,
+        'hover:spr-bg-[#FCB0B3] active:spr-bg-[#FB7F83]': tone.value === 'danger' && !fill.value && isInteractive.value,
+        // Caution
+        'spr-text-carrot-800 spr-background-color-caution-weak spr-border-carrot-800': tone.value === 'caution' && !fill.value,
+        'hover:spr-bg-[#FFE79E] active:spr-bg-[#FFDA6B]': tone.value === 'caution' && !fill.value && isInteractive.value,
+        // Plain
+        'spr-text-color-strong spr-border-color-base spr-background-color': tone.value === 'plain' && !fill.value,
+        'hover:spr-bg-[#E6E6E6] active:spr-bg-[#CCCCCC]': tone.value === 'plain' && !fill.value && isInteractive.value,
+        // #endregion - Styles for hollow (!fill) lozenge
 
-        'spr-background-color-pending-base spr-text-color-strong !spr-border-0': tone.value === 'pending' && fill.value,
-        'spr-background-color-information-base spr-text-color-inverted-strong !spr-border-0':
-          tone.value === 'information' && fill.value,
-        'spr-background-color-success-base spr-text-color-inverted-strong !spr-border-0':
-          tone.value === 'success' && fill.value,
-        'spr-background-color-base spr-text-color-strong !spr-border-0': tone.value === 'neutral' && fill.value,
-        'spr-background-color-danger-base spr-text-color-inverted-strong !spr-border-0':
-          tone.value === 'danger' && fill.value,
-        'spr-background-color-caution-base spr-text-color-strong !spr-border-0': tone.value === 'caution' && fill.value,
-        'spr-text-color-strong spr-background-color !spr-border-0': tone.value === 'plain' && fill.value,
+        // #region - Styles for filled lozenge
+        'spr-border-0': fill.value,
+        'spr-text-color-strong': fill.value && (tone.value === 'pending' || tone.value === 'neutral' || tone.value === 'caution' || tone.value === 'plain'),
+        'spr-text-color-inverted-strong': fill.value && (tone.value === 'information' || tone.value === 'success' || tone.value === 'danger'),
+        // Pending
+        'spr-background-color-pending-base': tone.value === 'pending' && fill.value,
+        'hover:spr-background-color-pending-hover active:spr-background-color-pending-pressed': tone.value === 'pending' && fill.value && isInteractive.value,
+        // Information
+        'spr-background-color-information-base': tone.value === 'information' && fill.value,
+        'hover:spr-background-color-information-hover active:spr-background-color-information-pressed': tone.value === 'information' && fill.value && isInteractive.value,
+        // Success
+        'spr-background-color-success-base': tone.value === 'success' && fill.value,
+        'hover:spr-background-color-success-hover active:spr-background-color-success-pressed': tone.value === 'success' && fill.value && isInteractive.value,
+        // Neutral
+        'spr-background-color-base': tone.value === 'neutral' && fill.value,
+        'hover:spr-background-color-surface active:spr-background-color-pressed': tone.value === 'neutral' && fill.value && isInteractive.value,
+        // Danger
+        'spr-background-color-danger-base': tone.value === 'danger' && fill.value,
+        'hover:spr-background-color-danger-hover active:spr-background-color-danger-pressed': tone.value === 'danger' && fill.value && isInteractive.value,
+        // Caution
+        'spr-background-color-caution-base': tone.value === 'caution' && fill.value,
+        'hover:spr-background-color-caution-hover active:spr-background-color-caution-pressed': tone.value === 'caution' && fill.value && isInteractive.value,
+        // Plain
+        'spr-background-color': tone.value === 'plain' && fill.value,
+        'hover:spr-background-color-hover active:spr-background-color-pressed': tone.value === 'plain' && fill.value && isInteractive.value,
+        // #endregion - Styles for filled lozenge
       },
     );