@farm-investimentos/front-mfe-components 7.3.2 → 7.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "7.3.2",
+	"version": "7.4.0",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/layout/Container/Container.scss

@@ -0,0 +1,29 @@
+.farm-container {
+    width: 100%;
+    padding: 12px;
+    margin-right: auto;
+    margin-left: auto;
+    max-width: 100%;
+
+    >div {
+        background-color: white;
+        border-radius: 8px;
+        max-width: calc(100% - 32px);
+        margin: 16px auto;
+        padding: 12px;
+
+        // deprecated
+        .container-main__footer-buttons-right {
+            margin: 0;
+            margin-top: 1rem;
+            padding: 0;
+            justify-content: flex-end;
+
+            .v-btn {
+                margin-left: 1rem;
+            }
+        }
+
+        min-height: 128px;
+    }
+}

package/src/components/layout/Container/Container.stories.js

@@ -0,0 +1,23 @@
+import Container from './Container.vue';
+
+export default {
+	title: 'Layout/Container',
+	component: Container,
+	parameters: {
+		docs: {
+			description: {
+				component: `Container<br />
+				selector: <em>farm-container</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	components: { 'farm-container': Container },
+	template: '<farm-container>content</farm-container>',
+});
+
+Primary.storyName = 'Basic';

package/src/components/layout/Container/Container.vue

@@ -0,0 +1,18 @@
+<template>
+	<section class="farm-container">
+		<div class="elevation-2">
+			<slot></slot>
+		</div>
+	</section>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-container',
+	inheritAttrs: true,
+});
+</script>
+<style lang="scss" scoped>
+@import 'Container.scss';
+</style>

package/src/components/layout/Container/index.ts

@@ -0,0 +1,4 @@
+import Container from './Container.vue';
+
+export { Container };
+export default Container;

package/src/components/layout/ContainerFooter/Container.stories.js

@@ -0,0 +1,23 @@
+import ContainerFooter from './ContainerFooter.vue';
+
+export default {
+	title: 'Layout/ContainerFooter',
+	component: ContainerFooter,
+	parameters: {
+		docs: {
+			description: {
+				component: `Container Footer<br />
+				selector: <em>farm-container-footer</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	components: { 'farm-container-footer': ContainerFooter },
+	template: '<farm-container-footer>Footer content</farm-container-footer>',
+});
+
+Primary.storyName = 'Basic';

package/src/components/layout/ContainerFooter/ContainerFooter.scss

@@ -0,0 +1,6 @@
+.farm-container-footer {
+    width: 100%;
+    padding: 24px 32px;
+    border-top: 1px solid var(--v-gray-lighten2);
+    margin-top: 12px;
+}

package/src/components/layout/ContainerFooter/ContainerFooter.vue

@@ -0,0 +1,16 @@
+<template>
+	<footer class="farm-container-footer">
+		<slot></slot>
+	</footer>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-container-footer',
+	inheritAttrs: true,
+});
+</script>
+<style lang="scss" scoped>
+@import 'ContainerFooter.scss';
+</style>

package/src/components/layout/ContainerFooter/index.ts

@@ -0,0 +1,4 @@
+import ContainerFooter from './ContainerFooter.vue';
+
+export { ContainerFooter };
+export default ContainerFooter;

package/src/main.ts

@@ -69,3 +69,6 @@ export * from './components/ProgressBar';
 export * from './components/Stepper';
 export * from './components/Switcher';
 export * from './components/TextField';
+
+export * from './components/layout/Container';
+export * from './components/layout/ContainerFooter';