Merge pull request #727 from Sysvale/feature/box-overflow

feat: implementa prop que controla overflow do componente Box

package.json

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

src/components/Box.vue

@@ -73,6 +73,13 @@ export default {
 			type: String,
 			default: 'gray',
 		},
+		/**
+		* Quando true, oculta o overflow do componente.
+		*/
+		overflowVisible: {
+			type: Boolean,
+			default: false
+		}
 	},
 
 	data() {
@@ -89,6 +96,10 @@ export default {
 		borderRadiusResolver() {
 			return this.rounder(this.width, 12);
 		},
+
+		overflowResolver() {
+			return this.overflowVisible ? 'visible' : 'hidden';
+		},
 	},
 
 	mounted() {
@@ -113,7 +124,7 @@ export default {
 .box {
 	width: v-bind(widthResolver);
 	border-radius: v-bind(borderRadiusResolver);
-	overflow: hidden;
+	overflow: v-bind(overflowResolver);
 
 	&__container {
 		width: v-bind(widthResolver);

src/stories/components/Box.stories.mdx

@@ -86,6 +86,7 @@ export const Template = (args) => ({
 			fluid: false,
 			elevated: false,
 			variant: 'gray',
+			overflowVisible: false,
 		}}
 	>
 		{ Template.bind({}) }