design-system-next 2.19.4 → 2.20.1

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/progress-bar/progress-bar.ts

@@ -34,6 +34,17 @@ export const progressBarPropTypes = {
       return true;
     },
   },
+  color: {
+    type: String as PropType<string>,
+    default: 'success',
+    validator(value: string) {
+      if (value !== 'success' && value !== 'danger' && value !== 'warning' && value !== 'info' && value !== 'neutral') {
+        console.error('Invalid prop: "color" must be one of the following: success, danger, warning, info, neutral.');
+        return false;
+      }
+      return true;
+    },
+  },
 };
 
 export type ProgressBarPropTypes = ExtractPropTypes<typeof progressBarPropTypes>;

package/src/components/progress-bar/progress-bar.vue

@@ -3,11 +3,12 @@
     class="spr-flex spr-w-full spr-flex-col spr-gap-size-spacing-5xs"
     :aria-valuemin="0"
     :aria-valuemax="props.max || 100"
+    :aria-valuenow="props.value"
     role="progressbar"
   >
     <div :class="[handleProgressBarSize, 'spr-overflow-hidden spr-rounded-lg spr-bg-white-100']">
       <div
-        class="spr-background-color-success-base spr-transition-all spr-duration-300"
+        :class="[`spr-background-color-${validColor}-base`, 'spr-transition-all spr-duration-300']"
         :style="handleProgressBarStyle"
       ></div>
     </div>
@@ -25,5 +26,5 @@ import { useProgressBar } from './use-progress-bar';
 
 const props = defineProps(progressBarPropTypes);
 
-const { handleProgressBarSize, percentage, handleProgressBarStyle } = useProgressBar(props);
+const { handleProgressBarSize, validColor, percentage, handleProgressBarStyle } = useProgressBar(props);
 </script>

package/src/components/progress-bar/use-progress-bar.ts

@@ -14,6 +14,12 @@ export const useProgressBar = (props: ProgressBarPropTypes) => {
         return 'spr-h-3';
     }
   });
+  
+  const validColor = computed<string>(() => {
+    const validColors = ['success', 'danger', 'warning', 'info', 'neutral'];
+    return validColors.includes(props.color) ? props.color : 'success';
+  });
+  
   const percentage = computed<number>(() => Math.min((props.value / (props.max || 100)) * 100, 100));
 
   const handleProgressBarStyle = computed<{ width: string; height: string }>(() => {
@@ -25,6 +31,7 @@ export const useProgressBar = (props: ProgressBarPropTypes) => {
 
   return {
     handleProgressBarSize,
+    validColor,
     percentage,
     handleProgressBarStyle,
   };

package/src/components/radio/radio.ts

@@ -1,42 +1,42 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const radioPropTypes = {
-  id: {
-    type: String,
-    required: true,
-  },
-  modelValue: {
-    type: [String, Number, Boolean],
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  value: {
-    type: [String, Number, Boolean],
-    required: true,
-  },
-  description: {
-    type: String,
-  },
-  bordered: {
-    type: Boolean,
-    default: false,
-  },
-  fullWidth: {
-    type: Boolean,
-    default: false,
-  }
-};
-
-export const radioEmitTypes = ['update:modelValue'];
-
-export type RadioPropTypes = ExtractPropTypes<typeof radioPropTypes>;
-
-export type RadioEmitTypes = typeof radioEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const radioPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number, Boolean],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: [String, Number, Boolean],
+    required: true,
+  },
+  description: {
+    type: String,
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  }
+};
+
+export const radioEmitTypes = ['update:modelValue'];
+
+export type RadioPropTypes = ExtractPropTypes<typeof radioPropTypes>;
+
+export type RadioEmitTypes = typeof radioEmitTypes;

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

@@ -153,7 +153,8 @@ export const selectLadderizedPropTypes = {
 export const selectLadderizedEmitTypes = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true,
-  'popper-state': () => true,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'popper-state': (_state: boolean) => true,
 };
 
 export type SelectLadderizedEmitFn = (event: string, ...args: unknown[]) => void;

package/src/components/sidepanel/sidepanel.vue

@@ -1,55 +1,55 @@
-<template>
-  <div v-if="!props.isStacking && isOpen && hasBackdrop" :class="sidepanelClasses.backdropBaseClasses"></div>
-
-  <Transition
-    :enter-active-class="sidepanelClasses.sidepanelTransitionActiveClasses"
-    :leave-active-class="sidepanelClasses.sidepanelTransitionActiveClasses"
-    :enter-from-class="sidepanelClasses.sidepanelTransitionHiddenClasses"
-    :enter-to-class="sidepanelClasses.sidepanelTransitionVisibleClasses"
-    :leave-from-class="sidepanelClasses.sidepanelTransitionVisibleClasses"
-    :leave-to-class="sidepanelClasses.sidepanelTransitionHiddenClasses"
-    :appear="!props.isStacking"
-  >
-    <div
-      v-if="props.isOpen || props.isStacking"
-      ref="sidepanelRef"
-      role="dialog"
-      aria-labelledby="sidepanel-title"
-      aria-describedby="sidepanel-content"
-      :class="sidepanelClasses.sidepanelBaseClasses"
-      :style="{ height: typeof height === 'number' ? `${height}px` : height }"
-    >
-      <template v-if="!props.hideHeader">
-        <div v-if="!$slots.header" :class="sidepanelClasses.sidepanelHeaderClasses">
-          <div id="sidepanel-title" :class="sidepanelClasses.sidepanelHeaderTitleClasses">
-            {{ headerTitle }}
-          </div>
-          <Icon :class="sidepanelClasses.sidepanelHeaderIconClasses" icon="ph:x" @click="handleClose" />
-        </div>
-        <div v-else>
-          <slot name="header"></slot>
-        </div>
-      </template>
-
-      <div id="sidepanel-content" :class="sidepanelClasses.sidepanelContentClasses">
-        <slot />
-      </div>
-
-      <div v-if="$slots.footer" :class="sidepanelClasses.sidepanelFooterClasses">
-        <slot name="footer"></slot>
-      </div>
-    </div>
-  </Transition>
-</template>
-
-<script lang="ts" setup>
-import { Icon } from '@iconify/vue';
-
-import { useSidepanel } from './use-sidepanel';
-import { sidepanelPropTypes, sidepanelEmitTypes } from './sidepanel';
-
-const props = defineProps(sidepanelPropTypes);
-const emit = defineEmits(sidepanelEmitTypes);
-
-const { sidepanelClasses, sidepanelRef, handleClose } = useSidepanel(props, emit);
-</script>
+<template>
+  <div v-if="!props.isStacking && isOpen && hasBackdrop" :class="sidepanelClasses.backdropBaseClasses"></div>
+
+  <Transition
+    :enter-active-class="sidepanelClasses.sidepanelTransitionActiveClasses"
+    :leave-active-class="sidepanelClasses.sidepanelTransitionActiveClasses"
+    :enter-from-class="sidepanelClasses.sidepanelTransitionHiddenClasses"
+    :enter-to-class="sidepanelClasses.sidepanelTransitionVisibleClasses"
+    :leave-from-class="sidepanelClasses.sidepanelTransitionVisibleClasses"
+    :leave-to-class="sidepanelClasses.sidepanelTransitionHiddenClasses"
+    :appear="!props.isStacking"
+  >
+    <div
+      v-if="props.isOpen || props.isStacking"
+      ref="sidepanelRef"
+      role="dialog"
+      aria-labelledby="sidepanel-title"
+      aria-describedby="sidepanel-content"
+      :class="sidepanelClasses.sidepanelBaseClasses"
+      :style="{ height: typeof height === 'number' ? `${height}px` : height }"
+    >
+      <template v-if="!props.hideHeader">
+        <div v-if="!$slots.header" :class="sidepanelClasses.sidepanelHeaderClasses">
+          <div id="sidepanel-title" :class="sidepanelClasses.sidepanelHeaderTitleClasses">
+            {{ headerTitle }}
+          </div>
+          <Icon :class="sidepanelClasses.sidepanelHeaderIconClasses" icon="ph:x" @click="handleClose" />
+        </div>
+        <div v-else>
+          <slot name="header"></slot>
+        </div>
+      </template>
+
+      <div id="sidepanel-content" :class="sidepanelClasses.sidepanelContentClasses">
+        <slot />
+      </div>
+
+      <div v-if="$slots.footer" :class="sidepanelClasses.sidepanelFooterClasses">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
+import { useSidepanel } from './use-sidepanel';
+import { sidepanelPropTypes, sidepanelEmitTypes } from './sidepanel';
+
+const props = defineProps(sidepanelPropTypes);
+const emit = defineEmits(sidepanelEmitTypes);
+
+const { sidepanelClasses, sidepanelRef, handleClose } = useSidepanel(props, emit);
+</script>

package/src/components/sidepanel/stacking-sidepanel/stacking-sidepanel.ts

@@ -1,16 +1,16 @@
-import type { ExtractPropTypes, PropType } from "vue";
-
-export const stackingSidePanelProps = {
-  stack: {
-    type: Array as PropType<string[]>,
-    default: [],
-    required: true,
-  }
-};
-
-export const stackingSidePanelEmits = {
-  'update:stack': (value: string[]) => value,
-};
-
-export type StackingSidePanelPropTypes = ExtractPropTypes<typeof stackingSidePanelProps>;
-export type StackingSidePanelEmitTypes = typeof stackingSidePanelEmits;
+import type { ExtractPropTypes, PropType } from "vue";
+
+export const stackingSidePanelProps = {
+  stack: {
+    type: Array as PropType<string[]>,
+    default: [],
+    required: true,
+  }
+};
+
+export const stackingSidePanelEmits = {
+  'update:stack': (value: string[]) => value,
+};
+
+export type StackingSidePanelPropTypes = ExtractPropTypes<typeof stackingSidePanelProps>;
+export type StackingSidePanelEmitTypes = typeof stackingSidePanelEmits;

package/src/components/sidepanel/stacking-sidepanel/stacking-sidepanel.vue

@@ -1,39 +1,39 @@
-<template>
-  <div v-if="activePanels.length > 0" :class="stackingSidepanelClasses.sidepanelStackBackdropClasses"></div>
-  <div
-    ref="stacking-sidepanel-base"
-    :class="[stackingSidepanelClasses.sidepanelStackBaseClasses]"
-    :style="stackingSidepanelBaseTransform"
-  >
-    <transition-group
-      :enter-active-class="stackingSidepanelClasses.sidepanelStackTransitionEnterActiveClasses"
-      :leave-active-class="stackingSidepanelClasses.sidepanelStackTransitionLeaveActiveClasses"
-      :move-class="stackingSidepanelClasses.sidepanelStackMoveClasses"
-      :enter-from-class="stackingSidepanelClasses.sidepanelStackEnterFromClasses"
-      :leave-to-class="stackingSidepanelClasses.sidepanelStackLeaveToClasses"
-      appear
-    >
-      <div v-for="name in activePanels" :key="name">
-        <slot :name="name" />
-      </div>
-    </transition-group>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTemplateRef } from 'vue';
-import { useStackingSidepanel } from './use-stacking-sidepanel';
-import { stackingSidePanelProps, stackingSidePanelEmits } from './stacking-sidepanel';
-
-const stackingSidepanelBase = useTemplateRef('stacking-sidepanel-base');
-const props = defineProps(stackingSidePanelProps);
-const emits = defineEmits(stackingSidePanelEmits);
-
-const { showPanel, hidePanel, stackingSidepanelClasses, stackingSidepanelBaseTransform, activePanels } =
-  useStackingSidepanel(props, emits, stackingSidepanelBase);
-
-defineExpose({
-  showPanel,
-  hidePanel,
-});
-</script>
+<template>
+  <div v-if="activePanels.length > 0" :class="stackingSidepanelClasses.sidepanelStackBackdropClasses"></div>
+  <div
+    ref="stacking-sidepanel-base"
+    :class="[stackingSidepanelClasses.sidepanelStackBaseClasses]"
+    :style="stackingSidepanelBaseTransform"
+  >
+    <transition-group
+      :enter-active-class="stackingSidepanelClasses.sidepanelStackTransitionEnterActiveClasses"
+      :leave-active-class="stackingSidepanelClasses.sidepanelStackTransitionLeaveActiveClasses"
+      :move-class="stackingSidepanelClasses.sidepanelStackMoveClasses"
+      :enter-from-class="stackingSidepanelClasses.sidepanelStackEnterFromClasses"
+      :leave-to-class="stackingSidepanelClasses.sidepanelStackLeaveToClasses"
+      appear
+    >
+      <div v-for="name in activePanels" :key="name">
+        <slot :name="name" />
+      </div>
+    </transition-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import { useStackingSidepanel } from './use-stacking-sidepanel';
+import { stackingSidePanelProps, stackingSidePanelEmits } from './stacking-sidepanel';
+
+const stackingSidepanelBase = useTemplateRef('stacking-sidepanel-base');
+const props = defineProps(stackingSidePanelProps);
+const emits = defineEmits(stackingSidePanelEmits);
+
+const { showPanel, hidePanel, stackingSidepanelClasses, stackingSidepanelBaseTransform, activePanels } =
+  useStackingSidepanel(props, emits, stackingSidepanelBase);
+
+defineExpose({
+  showPanel,
+  hidePanel,
+});
+</script>