Add Steppers component

[tewshi]

Closes #19

[lukicenturi]

Is there anyway to show the current step like this?

I can't find it in the example

[tewshi]

Is there anyway to show the current step like this?

I can't find it in the example

yeah, you're right.

it was labelled as custom, so I made a slot for custom icon, but I'll add a wrapper and use the custom icons as we have here.

[lukicenturi]

@tewshi I think for the custom one, you need to force the color to use rui-light-primary (force to use light mode primary color, in both light and dark mode) referring to the Figma.

Figma:

Yours:

So we can achieve this

Also is it possible to change the size of the icon for custom one, to match with the figma.
The icon on the figma is smaller. (I think this one is easy, just change the size from 26 to 20)

[lukicenturi]

for the stepper with primary color, I think you need to set the color to black (white in dark mode), instead of primary (?), so then we can remove the customTitleColor.

Yours:

Figma:

[codecov-commenter]

Codecov Report

Merging #37 (388e726) into main (3e56988) will decrease coverage by 0.90%.
The diff coverage is 96.24%.

@@            Coverage Diff             @@
##             main      #37      +/-   ##
==========================================
- Coverage   98.76%   97.86%   -0.90%     
==========================================
  Files           7       12       +5     
  Lines         727     1125     +398     
  Branches       36       48      +12     
==========================================
+ Hits          718     1101     +383     
- Misses          9       24      +15     

Impacted Files	Coverage Δ
src/components/steppers/StepperIcon.vue	88.73% <88.73%> (ø)
src/components/steppers/Stepper.vue	96.41% <96.41%> (ø)
src/components/steppers/Stepper.spec.ts	100.00% <100.00%> (ø)
src/components/steppers/StepperCustomIcon.vue	100.00% <100.00%> (ø)
src/composables/icons.ts	100.00% <100.00%> (ø)
src/types/stepper.ts	100.00% <100.00%> (ø)

[lukicenturi]

LGTM!

[kelsos]

lgtm