design-system-next 2.8.1 → 2.9.1

package/src/components/snackbar/snack/snack.vue

@@ -6,6 +6,7 @@
     @click="handleClick"
   >
     <div class="spr-flex spr-flex-auto spr-items-center">
+      <slot name="icon">
         <Icon
           v-if="showIcon"
           :icon="snackIcon"
@@ -13,7 +14,11 @@
           :height="iconSize"
           :class="[snackToneCssClass, 'spr-mr-size-spacing-3xs spr-flex-shrink-0']"
         />
-      <label>{{ text }}</label>
+      </slot>
+      
+      <slot name="label">
+        <label>{{ text }}</label>
+      </slot>
     </div>
     <template v-if="showAction">
       <slot>

package/src/components/stepper/step/step.ts

@@ -1,4 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { STEPPER_TYPE } from '../stepper';
 
 export const STEP_STATES = ['pending', 'active', 'completed'] as const;
 
@@ -29,6 +30,13 @@ export const stepPropTypes = {
     validator: (value: (typeof STEP_STATES)[number]) => STEP_STATES.includes(value),
     default: 'pending',
   },
+  /**
+     * @description Display type of stepper if displayed as compact (no solid bg color) or solid
+     */
+  type: {
+    type: String as PropType<(typeof STEPPER_TYPE)[number]>,
+    validator: (value: (typeof STEPPER_TYPE)[number]) => STEPPER_TYPE.includes(value),
+  }
 };
 
 export const stepEmitTypes = {

package/src/components/stepper/step/step.vue

@@ -2,7 +2,8 @@
   <div :class="stepClasses.baseClass">
     <!-- STEP NUMBER -->
     <div :class="stepClasses.badgeClass">
-      <span :class="stepClasses.numberClass">
+      <icon v-if="props.status === 'completed' && props.type === 'solid'" icon="ph:check-bold" width="14px" height="14px" class="spr-text-color-inverted-strong"/>
+      <span v-else :class="stepClasses.numberClass">
         {{ props.number }}
       </span>
     </div>
@@ -23,6 +24,7 @@
 <script setup lang="ts">
 import { stepEmitTypes, stepPropTypes } from '@/components/stepper/step/step';
 import { useStep } from '@/components/stepper/step/use-step';
+import { Icon } from '@iconify/vue'; 
 
 const props = defineProps(stepPropTypes);
 const emit = defineEmits(stepEmitTypes);

package/src/components/stepper/step/use-step.ts

@@ -16,19 +16,29 @@ interface StepClasses {
 export const useStep = (props: StepPropTypes, emit: SetupContext<StepEmitTypes>['emit']) => {
 
   const stepClasses: ComputedRef<StepClasses> = computed(() => {
-    const baseClass = classNames('spr-flex spr-gap-2 spr-items-center');
+    const baseClass = classNames(
+      'spr-flex spr-gap-2 spr-items-top', 
+      {
+        'spr-p-size-spacing-3xs spr-rounded-border-radius-lg': props.type === 'solid',
+        'spr-background-color-brand-weak': props.status === 'active' && props.type === 'solid',
+        'spr-opacity-60': props.status === 'completed' && props.type === 'solid'
+      }
+    );
     
     // Usage of prop.status ensures reactivity instead of destructuring props
     const badgeClass = classNames(
-      'spr-flex spr-items-center spr-justify-center spr-rounded-border-radius-full spr-h-6 spr-w-6 spr-border spr-border-solid spr-border-2',
+      'spr-flex spr-items-center spr-justify-center spr-rounded-border-radius-full spr-h-6 spr-w-6 spr-border spr-border-solid',
       {
-        'spr-bg-kangkong-700 spr-border-kangkong-700': props.status === 'active',
+        'spr-border-2': props.type !== 'solid',
+        'spr-border-1': props.type === 'solid',
+        'spr-background-color-brand-base spr-border-color-brand-base': props.status === 'active',
         'spr-border-mushroom-300': props.status === 'pending',
         'spr-border-kangkong-700': props.status === 'completed',
+        'spr-background-color-brand-base': props.status === 'completed' && props.type === 'solid'
       }
     );
     
-    const numberClass = classNames('spr-text-sm spr-font-medium', 
+    const numberClass = classNames('spr-body-md-regular-medium', 
       {
         'spr-text-white-50': props.status === 'active',
         'spr-text-mushroom-600': props.status === 'pending',
@@ -36,18 +46,20 @@ export const useStep = (props: StepPropTypes, emit: SetupContext<StepEmitTypes>[
       }
     );
 
-    const textContainerClass = classNames('spr-flex spr-flex-col spr-relative');
+    const textContainerClass = classNames('spr-flex spr-flex-col spr-mt-[2px]');
 
-    const labelClass = classNames('spr-text-sm spr-whitespace-nowrap', 
+    const labelClass = classNames('spr-body-md-regular spr-whitespace-nowrap', 
       {
-      'spr-text-kangkong-700 spr-font-semibold': props.status === 'active',
-      'spr-text-mushroom-600': props.status === 'pending',
-      'spr-text-mushroom-950': props.status === 'completed',
+        'spr-text-kangkong-700 !spr-body-md-regular-medium': props.status === 'active' && props.type === 'compact',
+        'spr-text-mushroom-600': props.status === 'pending',
+        'spr-text-mushroom-950': props.status === 'completed',
       }
     );
 
     // Absolute since the sample in the figma is a hanging text for description
-    const descriptionClass = classNames('spr-text-xs spr-text-mushroom-400 spr-absolute spr-mt-size-spacing-sm spr-whitespace-nowrap');
+    const descriptionClass = classNames(
+      'spr-body-sm-regular spr-text-color-supporting spr-whitespace-nowrap',
+    );
 
     return {
       baseClass,

package/src/components/stepper/stepper.ts

@@ -3,6 +3,7 @@ import type { ExtractPropTypes, PropType } from 'vue';
 
 export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
 const STEPPER_VARIANTS = ['horizontal', 'vertical'] as const;
+export const STEPPER_TYPE = ['compact', 'solid'];
 export const STEPPER_STATES = ['pending', 'active', 'completed'] as const;
 
 export const stepperPropTypes = {
@@ -32,6 +33,14 @@ export const stepperPropTypes = {
   hasLines: {
     type: Boolean,
     default: false,
+  },
+  /**
+   * @description Display type of stepper if displayed as compact (no solid bg color) or solid
+   */
+  type: {
+    type: String as PropType<(typeof STEPPER_TYPE)[number]>,
+    validator: (value: (typeof STEPPER_TYPE)[number]) => STEPPER_TYPE.includes(value),
+    default: 'compact',
   }
 };
 

package/src/components/stepper/stepper.vue

@@ -7,6 +7,7 @@
         :label="step.label"
         :status="step.status"
         :description="step.description"
+        :type="props.type"
       />
 
       <!-- LINES -->