design-system-next 2.20.1 → 2.20.5

package/src/components/list/list.vue

@@ -1,19 +1,8 @@
 <template>
   <div class="spr-font-main">
+    <!-- Header Section -->
     <template v-if="props.searchableMenu || props.displayListItemSelected">
-      <div
-        :class="[
-          'spr-sticky spr-z-20',
-          'spr-grid spr-gap-3 spr-bg-white-50 spr-px-size-spacing-3xs spr-py-size-spacing-2xs',
-          'spr-border-color-weak spr-border spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid',
-        ]"
-        :style="{
-          top:
-            typeof props.stickySearchOffset === 'number'
-              ? props.stickySearchOffset + 'px'
-              : String(props.stickySearchOffset),
-        }"
-      >
+      <div :class="listClasses.headerClasses" :style="stickyOffsetStyle">
         <spr-input-search
           v-if="props.searchableMenu"
           v-model="searchText"
@@ -24,254 +13,80 @@
           v-if="props.supportingDisplayText || props.displayListItemSelected"
           class="spr-label-sm-medium spr-text-color-base spr-block"
         >
-          <template v-if="props.supportingDisplayText">
-            {{ props.supportingDisplayText }}
-          </template>
-          <template v-else> {{ selectedItems.length }} Selected</template>
+          {{ props.supportingDisplayText || `${selectedItems.length} Selected` }}
         </span>
       </div>
     </template>
 
     <div class="spr-p-size-spacing-3xs">
-      <template v-if="props.groupItemsBy">
-        <template v-if="groupedMenuList && groupedMenuList.length > 0">
-          <div class="spr-grid spr-gap-2">
-            <div v-for="(list, listIndex) in groupedMenuList" :key="listIndex" class="spr-grid spr-gap-0.5">
-              <div
-                v-if="list.groupLabel !== 'no-group'"
-                class="spr-label-xs-medium spr-text-color-base spr-px-size-spacing-4xs spr-py-size-spacing-3xs spr-uppercase"
-              >
-                <span>
-                  {{ list.groupLabel }}
-                </span>
-              </div>
-              <div
-                v-for="(item, itemIndex) in list.items"
-                :key="itemIndex"
-                :class="getListItemClasses(item)"
-                @click="handleSelectedItem(item)"
-              >
-                <template v-if="props.lozenge">
-                  <div class="spr-flex spr-items-center spr-gap-1">
-                    <spr-checkbox
-                      v-if="props.multiSelect"
-                      :disabled="item.disabled || (props.disabledUnselectedItems && !isItemSelected(item))"
-                      :checked="isItemSelected(item)"
-                    />
-                    <spr-lozenge
-                      v-if="props.lozenge"
-                      :label="item.text || (item.lozengeProps?.label as string)"
-                      :tone="item.lozengeProps?.tone as string & (typeof LOZENGE_TONE)[number]"
-                      :fill="item.lozengeProps?.fill as boolean"
-                      :url="item.lozengeProps?.url as string"
-                      :icon="item.lozengeProps?.icon as string"
-                      :postfix-icon="item.lozengeProps?.postfixIcon as string"
-                    />
-                  </div>
-                </template>
-                <template v-else>
-                  <div class="spr-flex spr-items-center spr-gap-1">
-                    <spr-checkbox
-                      v-if="props.multiSelect"
-                      :disabled="item.disabled || (props.disabledUnselectedItems && !isItemSelected(item))"
-                      :checked="isItemSelected(item)"
-                    />
-                    <div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
-                      <span
-                        v-if="props.itemIcon || item.icon"
-                        :class="[
-                          item.iconColor,
-                          'spr-mt-[2px]',
-                          {
-                            'spr-text-color-disabled':
-                              item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
-                          },
-                        ]"
-                      >
-                        <icon :icon="(props.itemIcon || item.icon) as string" width="20px" height="20px" />
-                      </span>
-                      <div
-                        :class="[
-                          'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
-                          {
-                            'spr-text-color-disabled':
-                              item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
-                          },
-                        ]"
-                      >
-                        <span class="spr-break-words spr-text-left spr-text-xs">
-                          {{ item.text }}
-                        </span>
-                        <span
-                          v-if="item.subtext"
-                          :class="[
-                            'spr-body-xs-regular spr-text-color-base spr-break-words spr-text-left',
-                            {
-                              'spr-text-color-disabled':
-                                item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
-                            },
-                          ]"
-                        >
-                          {{ item.subtext }}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="spr-flex spr-items-center spr-gap-1">
-                    <template v-if="props.ladderized">
-                      <template v-if="item.sublevel && item.sublevel?.length > 0">
-                        <Icon class="spr-text-color-weak spr-size-4" icon="ph:caret-right" />
-                      </template>
-                      <template v-else>
-                        <Icon
-                          v-if="isItemSelected(item) && !props.noCheck"
-                          class="spr-text-color-brand-base spr-w-[1.39em]"
-                          icon="ph:check"
-                        />
-                      </template>
-                    </template>
-                    <template v-else>
-                      <spr-lozenge
-                        v-if="item.lozenge"
-                        :label="item.lozenge?.label as string"
-                        :tone="item.lozenge?.tone as string & (typeof LOZENGE_TONE)[number]"
-                        :fill="item.lozenge?.fill as boolean"
-                        :url="item.lozenge?.url as string"
-                        :icon="item.lozenge?.icon as string"
-                        :postfix-icon="item.lozenge?.postfixIcon as string"
-                      />
-                      <Icon
-                        v-if="isItemSelected(item) && !props.noCheck && !props.multiSelect"
-                        class="spr-text-color-brand-base spr-w-[1.39em]"
-                        icon="ph:check"
-                      />
-                    </template>
-                  </div>
-                </template>
+      <!-- Grouped Items -->
+      <template v-if="props.groupItemsBy && groupedMenuList && groupedMenuList.length > 0">
+        <div class="spr-grid spr-gap-3">
+          <div v-for="(list, listIndex) in groupedMenuList" :key="listIndex" class="spr-grid spr-gap-0.5">
+            <div
+              v-if="list.groupLabel !== 'no-group'"
+              class="spr-label-xs-medium spr-text-color-base spr-px-size-spacing-4xs spr-py-size-spacing-3xs spr-uppercase"
+            >
+              {{ list.groupLabel }}
+            </div>
+            <div class="spr-grid spr-gap-[2px]">
+              <ListItem
+                v-for="item in list.items"
+                :key="item.value"
+                :item="item"
+                :is-selected="isItemSelected(item)"
+                :classes="getListItemClasses(item)"
+                :multi-select="props.multiSelect"
+                :lozenge="props.lozenge"
+                :ladderized="props.ladderized"
+                :no-check="props.noCheck"
+                :item-icon="props.itemIcon"
+                :disabled-unselected-items="props.disabledUnselectedItems"
+                @select="handleSelectedItem(item)"
+              />
+              <div v-if="props.infiniteScrollLoader" class="spr-flex spr-items-center spr-justify-center spr-p-2">
+                <Icon icon="svg-spinners:270-ring" />
               </div>
             </div>
           </div>
-        </template>
-        <template v-else>
-          <div v-if="props.loading" class="spr-skeletal-loader spr-h-8 spr-w-full spr-rounded-md" />
-          <div v-else class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
-            <span class="spr-body-sm-regular spr-m-0">No results found</span>
+        </div>
+      </template>
+
+      <!-- Non-Grouped Items -->
+      <template v-else-if="localizedMenuList && localizedMenuList.length > 0">
+        <div class="spr-grid spr-gap-[2px]">
+          <ListItem
+            v-for="item in localizedMenuList"
+            :key="item.value"
+            :item="item"
+            :is-selected="isItemSelected(item)"
+            :classes="getListItemClasses(item)"
+            :multi-select="props.multiSelect"
+            :lozenge="props.lozenge"
+            :ladderized="props.ladderized"
+            :no-check="props.noCheck"
+            :item-icon="props.itemIcon"
+            :disabled-unselected-items="props.disabledUnselectedItems"
+            @select="handleSelectedItem(item)"
+          />
+          <div v-if="props.infiniteScrollLoader" class="spr-flex spr-items-center spr-justify-center spr-p-2">
+            <Icon icon="svg-spinners:270-ring" />
           </div>
-        </template>
+        </div>
       </template>
+
+      <!-- Loading State -->
+      <template v-else-if="props.loading">
+        <div class="spr-grid spr-gap-[2px]">
+          <div v-for="i in 5" :key="i" class="spr-skeletal-loader spr-h-8 spr-w-full spr-rounded-md" />
+        </div>
+      </template>
+
+      <!-- Empty State -->
       <template v-else>
-        <template v-if="localizedMenuList && localizedMenuList.length > 0">
-          <div
-            v-for="(item, index) in localizedMenuList"
-            :key="index"
-            :class="getListItemClasses(item)"
-            @click="handleSelectedItem(item)"
-          >
-            <template v-if="props.lozenge">
-              <div class="spr-flex spr-items-center spr-gap-1">
-                <spr-checkbox
-                  v-if="props.multiSelect"
-                  :disabled="item.disabled || (props.disabledUnselectedItems && !isItemSelected(item))"
-                  :checked="isItemSelected(item)"
-                />
-                <spr-lozenge
-                  v-if="props.lozenge"
-                  :label="item.text || (item.lozengeProps?.label as string)"
-                  :tone="item.lozengeProps?.tone as string & (typeof LOZENGE_TONE)[number]"
-                  :fill="item.lozengeProps?.fill as boolean"
-                  :url="item.lozengeProps?.url as string"
-                  :icon="item.lozengeProps?.icon as string"
-                  :postfix-icon="item.lozengeProps?.postfixIcon as string"
-                />
-              </div>
-            </template>
-            <template v-else>
-              <div class="spr-flex spr-items-center spr-gap-1">
-                <spr-checkbox
-                  v-if="props.multiSelect"
-                  :disabled="item.disabled || (props.disabledUnselectedItems && !isItemSelected(item))"
-                  :checked="isItemSelected(item)"
-                />
-                <div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
-                  <span
-                    v-if="props.itemIcon || item.icon"
-                    :class="[
-                      item.iconColor,
-                      'spr-mt-[2px]',
-                      {
-                        'spr-text-color-disabled':
-                          item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
-                      },
-                    ]"
-                  >
-                    <icon :icon="(props.itemIcon || item.icon) as string" width="20px" height="20px" />
-                  </span>
-                  <div
-                    :class="[
-                      'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
-                      {
-                        'spr-text-color-disabled':
-                          item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
-                      },
-                    ]"
-                  >
-                    <span class="spr-break-words spr-text-left spr-text-xs">
-                      {{ item.text }}
-                    </span>
-                    <span
-                      v-if="item.subtext"
-                      :class="[
-                        'spr-body-xs-regular spr-text-color-base spr-break-words spr-text-left',
-                        {
-                          'spr-text-color-disabled':
-                            item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
-                        },
-                      ]"
-                    >
-                      {{ item.subtext }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div class="spr-flex spr-items-center spr-gap-1">
-                <template v-if="props.ladderized">
-                  <template v-if="item.sublevel && item.sublevel?.length > 0">
-                    <Icon class="spr-text-color-weak spr-size-4" icon="ph:caret-right" />
-                  </template>
-                  <template v-else>
-                    <Icon
-                      v-if="isItemSelected(item) && !props.noCheck"
-                      class="spr-text-color-brand-base spr-w-[1.39em]"
-                      icon="ph:check"
-                    />
-                  </template>
-                </template>
-                <template v-else>
-                  <spr-lozenge
-                    v-if="item.lozenge"
-                    :label="item.lozenge?.label as string"
-                    :tone="item.lozenge?.tone as string & (typeof LOZENGE_TONE)[number]"
-                    :fill="item.lozenge?.fill as boolean"
-                    :url="item.lozenge?.url as string"
-                    :icon="item.lozenge?.icon as string"
-                    :postfix-icon="item.lozenge?.postfixIcon as string"
-                  />
-                  <Icon
-                    v-if="isItemSelected(item) && !props.noCheck && !props.multiSelect"
-                    class="spr-text-color-brand-base spr-w-[1.39em]"
-                    icon="ph:check"
-                  />
-                </template>
-              </div>
-            </template>
-          </div>
-        </template>
-        <template v-else>
-          <div v-if="props.loading" class="spr-skeletal-loader spr-h-8 spr-w-full spr-rounded-md" />
-          <div v-else class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
-            <span class="spr-body-sm-regular spr-m-0">No results found</span>
-          </div>
-        </template>
+        <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
+          <span class="spr-body-sm-regular spr-m-0">No results found</span>
+        </div>
       </template>
     </div>
   </div>
@@ -280,11 +95,8 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue';
 
-import SprCheckbox from '@/components/checkbox/checkbox.vue';
 import SprInputSearch from '@/components/input/input-search/input-search.vue';
-import SprLozenge from '@/components/lozenge/lozenge.vue';
-
-import { LOZENGE_TONE } from '@/components/lozenge/lozenge';
+import ListItem from './list-item/list-item.vue';
 
 import { listPropTypes, listEmitTypes } from './list';
 import { useList } from './use-list';
@@ -293,6 +105,8 @@ const props = defineProps(listPropTypes);
 const emit = defineEmits(listEmitTypes);
 
 const {
+  listClasses,
+  stickyOffsetStyle,
   selectedItems,
   searchText,
   localizedMenuList,

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

@@ -7,13 +7,11 @@ import type { SetupContext } from 'vue';
 import type { ListPropTypes, ListEmitTypes, MenuListType, GroupedMenuListType } from './list';
 
 interface ListClasses {
+  headerClasses: string;
   listItemClasses: string;
 }
 
 export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>['emit']) => {
-  const selectedItems = useVModel(props, 'modelValue', emit);
-  const searchString = useVModel(props, 'searchValue', emit);
-
   const {
     menuList,
     menuLevel,
@@ -23,9 +21,16 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     disabledLocalSearch,
     noCheck,
     disabledUnselectedItems,
+    stickySearchOffset,
   } = toRefs(props);
 
   const listClasses: ComputedRef<ListClasses> = computed(() => {
+    const headerClasses = classNames(
+      'spr-sticky spr-z-20',
+      'spr-grid spr-gap-3 spr-bg-white-50 spr-px-size-spacing-3xs spr-py-size-spacing-2xs',
+      'spr-border-color-weak spr-border spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid',
+    );
+
     const listItemClasses = classNames(
       'spr-flex spr-cursor-pointer spr-items-center spr-justify-between spr-gap-1.5 spr-rounded-lg spr-p-2',
       'spr-transition spr-duration-150 spr-ease-in-out',
@@ -33,9 +38,17 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
       'active:spr-background-color-single-active active:spr-scale-[.98]',
     );
 
-    return { listItemClasses };
+    return { headerClasses, listItemClasses };
   });
 
+  const stickyOffsetStyle = computed(() => ({
+    top:
+      typeof stickySearchOffset.value === 'number' ? `${stickySearchOffset.value}px` : String(stickySearchOffset.value),
+  }));
+
+  const selectedItems = useVModel(props, 'modelValue', emit);
+  const searchString = useVModel(props, 'searchValue', emit);
+
   const searchText = ref<string>('');
 
   const localizedMenuList = ref<MenuListType[]>([]);
@@ -587,9 +600,10 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   });
 
   return {
+    listClasses,
+    stickyOffsetStyle,
     selectedItems,
     searchText,
-    listClasses,
     localizedMenuList,
     groupedMenuList,
     apiSelectedList,

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,
+  };
+}