feat: atualiza componente para composition api e adiciona prop de variant

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.152.0",
+	"version": "3.152.1",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

src/components/Breadcrumb.vue

@@ -12,7 +12,7 @@
 				>
 					<router-link
 						:to="routerPushTo(item)"
-						class="breadcrumb__link"
+						:class="`breadcrumb__link breadcrumb__link--${variant}`"
 					>
 						<CdsIcon
 							v-if="items.length <= 2"
@@ -49,7 +49,7 @@
 
 					<router-link
 						:to="routerPushTo(item)"
-						class="breadcrumb__link"
+						:class="`breadcrumb__link breadcrumb__link--${variant}`"
 					>
 						<CdsClickable :clickable="index !== items.length - 1">
 							{{ item.label }}
@@ -61,49 +61,50 @@
 	</nav>
 </template>
 
-<script>
+<script setup>
 import CdsIcon from './Icon.vue';
 import CdsSpacer from './Spacer.vue';
 import CdsClickable from './Clickable.vue';
 import isEmpty from 'lodash.isempty';
 
-export default {
-	name: 'CdsBreadcrumb',
-	components: {
-		CdsIcon,
-		CdsSpacer,
-		CdsClickable,
+defineOptions({ name: 'CdsBreadcrumb' });
+
+defineProps({
+	/**
+	 * Define a lista dos itens do Breadcrumb a serem
+	 * mostrados. Os itens da lista devem ser
+	 * objetos com path ou route, e com uma label.
+	 */
+	items: {
+		type: Array,
+		default: () => ([]),
+		required: true,
 	},
-	props: {
-		/**
-		 * Define a lista dos itens do Breadcrumb a serem
-		 * mostrados. Os itens da lista devem ser
-		 * objetos com path ou route, e com uma label.
-		 */
-		items: {
-			type: Array,
-			default: () => ([]),
-			required: true,
-		},
+	/**
+	 * A variante de cor. São 10 variantes:
+	* @values green, teal, blue, indigo, violet, pink, red, orange, amber, dark
+	 */
+	variant: {
+		type: String,
+		default: 'blue',
 	},
+});
 
-	methods: {
-		resolveRoute({ route, path }) {
-			const to = isEmpty(route) ? path : route;
-			return to instanceof String ? { path: to } : to;
-		},
+function resolveRoute({ route, path }) {
+	const to = isEmpty(route) ? path : route;
+	return to instanceof String ? { path: to } : to;
+}
 
-		routerPushTo(item) {
-			return this.resolveRoute(item) ? this.resolveRoute(item).path : null;
-		},
-	},
-};
+function routerPushTo(item) {
+	return resolveRoute(item) ? resolveRoute(item).path : null;
+}
 </script>
 
 <style lang="scss" scoped>
 @use '../assets/sass/tokens/index' as tokens;
 
 .breadcrumb {
+	@include tokens.caption;
 	display: flex;
 	align-items: center;
 	padding: tokens.pa(0);
@@ -114,17 +115,27 @@ export default {
 
 	&__link {
 		@extend .breadcrumb;
-		@include tokens.caption;
-		color: tokens.$n-600;
 		border-radius: tokens.$border-radius-lil;
 		padding: tokens.pa(1);
 		transition: tokens.$hover;
+		color: tokens.$n-600;
 
-		&:hover,
-		&:hover svg {
-			background-color: tokens.$bn-50;
-			color: tokens.$bn-600;
-			transition: tokens.$hover;
+		@include tokens.variantResolver using (
+			$color-name,
+			$shade-50,
+			$shade-100,
+			$shade-200,
+			$shade-300,
+			$base-color,
+			$shade-500,
+			$shade-600
+		) {
+			&:hover,
+			&:hover svg {
+				background-color: $shade-50;
+				color: $shade-600;
+				transition: tokens.$hover;
+			}
 		}
 	}