Merge pull request #1015 from Sysvale/feature/add-padding-prop-to-list

Feature/add padding prop to list

Author: IhGori

package-lock.json

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

package.json

@@ -95,9 +95,22 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	/**
+	 * Define o valor do padding do item da lista. Os valores são múltiplos de 4px separados por
+	 * vírgula para vertical e horizontal (ex: '2, 4').
+	 */
+	padding: {
+		type: String,
+		default: '7, 3',
+	},
 });
 
 const resolveHover = computed(() => props.clickable ? 'pointer' : '');
+const resolvePadding = computed(() => {
+	const [vertical, horizontal] = props.padding.replace(' ', '').split(',');
+
+	return `${vertical * 4}px ${horizontal * 4}px`;
+});
 
 function resolveListClick(item) {
 	if (!props.clickable && !isMobile.value) {
@@ -114,7 +127,7 @@ function resolveListClick(item) {
 
 .list {
 	border-bottom: none;
-	padding: tokens.pYX(7, 3);
+	padding: v-bind(resolvePadding);
 	display: flex;
 	justify-content: space-between;
 

src/components/List.vue

@@ -32,7 +32,7 @@ import IconButton from '../../components/IconButton.vue';
 			source: {
 				language: 'html',
 				format:true,
-				code: /*html*/ 
+				code: /*html*/
 `<cds-
 	:items="[
 		{
@@ -113,6 +113,7 @@ export const items = [
 		args={{
 				items,
 				clickable: false,
+				padding: '7, 3',
 			}}
 	>
 		{ Template.bind({}) }