@farm-investimentos/front-mfe-components 8.7.1 → 9.1.1

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -35,7 +35,6 @@ import { VIcon } from 'vuetify/lib/components/VIcon';
 import { VList } from 'vuetify/lib/components/VList';
 import VListItem from 'vuetify/lib/components/VList/VListItem';
 import { VListItemContent, VListItemTitle } from 'vuetify/lib';
-import DefaultButton from '../Buttons/DefaultButton';
 
 export default Vue.extend({
 	name: 'farm-context-menu',
@@ -46,7 +45,6 @@ export default Vue.extend({
 		VListItem,
 		VListItemContent,
 		VListItemTitle,
-		'farm-btn': DefaultButton,
 	},
 	props: {
 		items: {

package/src/components/Tabs/Tabs.stories.js

@@ -1,13 +1,10 @@
 import Tabs from './Tabs.vue';
 
 export default {
-    title: 'API/Tabs',
+    title: 'Display/Tabs',
     component: Tabs,
 };
 
 export const Primary = () => ({
-    components: { Tabs },
-    template: '<Tabs />',
+    template: '<farm-tabs />',
 });
-
-Primary.storyName = 'Padrão';

package/src/components/Tabs/Tabs.vue

@@ -19,9 +19,10 @@
 	</v-tabs>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue';
 import { VTabs, VTab } from 'vuetify/lib/components/VTabs';
-export default {
+export default Vue.extend({
 	name: 'farm-tabs',
 	data: () => ({
 		selected: 0,
@@ -86,7 +87,7 @@ export default {
 		VTabs,
 		VTab,
 	},
-};
+});
 </script>
 <style scoped lang="scss">
 div.rounded-circle {

package/src/components/TextField/TextField.stories.js

@@ -22,7 +22,6 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-textfield': TextField },
 	data() {
 		return {
 			v: '',
@@ -34,14 +33,30 @@ export const Primary = () => ({
 	</div>`,
 });
 
-const parameters = {
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
+export const BindVar = () => ({
+	data() {
+		return {
+			v: '',
+		};
 	},
-};
+	template: `<div style="width: 480px">
+		<farm-textfield v-model="v" />
+		value: {{ v }}
+	</div>`,
+});
 
-Primary.story = {
-	name: 'Basic',
-	parameters,
-};
+export const Rules = () => ({
+	data() {
+		return {
+			v: '',
+			rules: {
+				required: val => !!val,
+			},
+		};
+	},
+	template: `<div style="width: 480px">
+		<h4>Custom rule (required field)</h4>
+		<farm-textfield v-model="v" :rules="[rules.required]" />
+		value: {{ v }}
+	</div>`,
+});

package/src/components/Typography/BodyText/BodyText.stories.js

@@ -1,4 +1,4 @@
-import BodyText from './BodyText.vue';
+import BodyText from './BodyText';
 
 export default {
 	title: 'Typography/BodyText',
@@ -19,12 +19,40 @@ export const Primary = () => ({
 	components: { 'farm-bodytext': BodyText },
 	data() {
 		return {
-			type: 1,
+			types: [1, 2],
+			variations: ['regular', 'medium', 'bold'],
 		};
 	},
-	template: `<farm-bodytext :type="1" :variation="'regular'" tag="span">
-		farm bodytext
-	</farm-bodytext>`,
+	template: `<div>
+	<div v-for="type in types" :key="type">
+		<farm-bodytext
+			v-for="variation in variations"
+			:key="variation"
+			:type="type"
+			:variation="variation">
+			BodyText {{ type }} {{ variation }}
+		</farm-bodytext>
+	</div>
+	</div>`,
 });
 
-Primary.storyName = 'Basic';
+export const CustomTag = () => ({
+	components: { 'farm-bodytext': BodyText },
+	data() {
+		return {
+			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],
+		};
+	},
+	template: `<div>
+		<farm-bodytext
+			v-for="t in tags"
+			:tag="t"
+			:key="t"
+			:type="1"
+			variation="regular"
+			>
+			BodyText with {{ t }} tag
+		</farm-bodytext>
+	
+	</div>`,
+});

package/src/components/Typography/BodyText/BodyText.vue

@@ -11,8 +11,6 @@
 </template>
 <script lang="ts">
 import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
-import Typography from '../Typography.vue';
-
 import { Keys } from './configurations';
 
 export default Vue.extend({
@@ -45,7 +43,6 @@ export default Vue.extend({
 
 		return { weight, size, key, type, variation };
 	},
-	components: { 'farm-typography': Typography },
 });
 </script>
 <style lang="scss" scoped>

package/src/components/Typography/Caption/Caption.stories.js

@@ -1,4 +1,4 @@
-import Caption from './Caption.vue';
+import Caption from './Caption';
 
 export default {
 	title: 'Typography/Caption',
@@ -16,15 +16,38 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-caption': Caption },
 	data() {
 		return {
-			type: 1,
+			variations: ['regular', 'medium'],
 		};
 	},
-	template: `<farm-caption variation="regular" tag="span">
-		farm caption
-	</farm-caption>`,
+	template: `<div>
+		<farm-caption
+			v-for="variation in variations"
+			:key="variation"
+			:variation="variation">
+			Caption {{ variation }}
+		</farm-caption>
+
+	</div>`,
 });
 
-Primary.storyName = 'Basic';
+export const CustomTag = () => ({
+	data() {
+		return {
+			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],
+		};
+	},
+	template: `<div>
+		<farm-caption
+			v-for="t in tags"
+			:tag="t"
+			:key="t"
+			:type="1"
+			variation="regular"
+			>
+			Caption with {{ t }} tag
+		</farm-caption>
+	
+	</div>`,
+});

package/src/components/Typography/Caption/Caption.vue

@@ -11,7 +11,6 @@
 </template>
 <script lang="ts">
 import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
-import Typography from '../Typography.vue';
 
 import { Keys } from './configurations';
 
@@ -41,7 +40,6 @@ export default Vue.extend({
 
 		return { weight, size, key, variation };
 	},
-	components: { 'farm-typography': Typography },
 });
 </script>
 <style lang="scss" scoped>

package/src/components/Typography/Heading/Heading.stories.js

@@ -1,4 +1,4 @@
-import Heading from './Heading.vue';
+import Heading from './Heading';
 
 export default {
 	title: 'Typography/Heading',
@@ -16,15 +16,16 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-heading': Heading },
 	data() {
 		return {
-			type: 1,
+			types: [1, 2, 3, 4, 5, 6],
 		};
 	},
-	template: `<farm-heading :type="type">
-		farm heading
-	</farm-heading>`,
+	template: `<div>
+		<farm-heading v-for="type in types" :key="type" :type="type">
+		Heading {{ type }}
+	</farm-heading>
+	</div>`,
 });
 
 Primary.storyName = 'Basic';

package/src/components/Typography/Heading/Heading.vue

@@ -11,7 +11,6 @@
 </template>
 <script lang="ts">
 import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
-import Typography from '../Typography.vue';
 
 import { Keys } from './configurations';
 
@@ -42,7 +41,6 @@ export default Vue.extend({
 
 		return { weight, size, tag, config, key };
 	},
-	components: { 'farm-typography': Typography },
 });
 </script>
 <style lang="scss" scoped>

package/src/components/Typography/OverlayText/OverlayText.stories.js

@@ -16,7 +16,6 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-overlaytext': OverlayText },
 	template: `<farm-overlaytext>
 		FARM OVERLAYTEXT
 	</farm-overlaytext>`,

package/src/components/Typography/OverlayText/OverlayText.vue

@@ -10,12 +10,10 @@
 </template>
 <script lang="ts">
 import Vue from 'vue';
-import Typography from '../Typography.vue';
 
 export default Vue.extend({
 	inheritAttrs: true,
 	name: 'farm-overlaytext',
-	components: { 'farm-typography': Typography },
 });
 </script>
 <style lang="scss" scoped>

package/src/components/Typography/Subtitle/Subtitle.stories.js

@@ -1,4 +1,4 @@
-import Subtitle from './Subtitle.vue';
+import Subtitle from './Subtitle';
 
 export default {
 	title: 'Typography/Subtitle',
@@ -19,12 +19,40 @@ export const Primary = () => ({
 	components: { 'farm-subtitle': Subtitle },
 	data() {
 		return {
-			type: 1,
+			types: [1, 2],
+			variations: ['regular', 'medium'],
 		};
 	},
-	template: `<farm-subtitle :type="1" :variation="'regular'" tag="span">
-		farm subtitle
-	</farm-subtitle>`,
+	template: `<div>
+	<template v-for="type in types" :key="type">
+		<farm-subtitle
+			v-for="variation in variations"
+			:key="variation"
+			:type="type"
+			:variation="variation">
+			Subtitle {{ type }} {{ variation }}
+		</farm-subtitle>
+	</template>
+	</div>`,
 });
 
-Primary.storyName = 'Basic';
+export const CustomTag = () => ({
+	components: { 'farm-subtitle': Subtitle },
+	data() {
+		return {
+			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],
+		};
+	},
+	template: `<div>
+		<farm-subtitle
+			v-for="t in tags"
+			:tag="t"
+			:key="t"
+			:type="1"
+			variation="regular"
+			>
+			Subtitle with {{ t }} tag
+		</farm-subtitle>
+	
+	</div>`,
+});

package/src/components/Typography/Subtitle/Subtitle.vue

@@ -11,7 +11,6 @@
 </template>
 <script lang="ts">
 import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
-import Typography from '../Typography.vue';
 
 import { Keys } from './configurations';
 
@@ -45,7 +44,6 @@ export default Vue.extend({
 
 		return { weight, size, key, type, variation };
 	},
-	components: { 'farm-typography': Typography },
 });
 </script>
 <style lang="scss" scoped>

package/src/configurations/_theme-colors-base.scss

@@ -0,0 +1,8 @@
+@import './theme-colors';
+
+:export {
+    @each $name,
+    $color in $theme-colors {
+        #{$name}: themeColor($name);
+    }
+}

package/src/configurations/_theme-colors-variations.scss

@@ -0,0 +1,9 @@
+@import './theme-colors';
+
+:export {
+    @each $name,
+    $color in $theme-colors {
+        #{$name + "-lighten"}: themeColor($name, "lighten");
+        #{$name + "-darken"}: themeColor($name, "darken");
+    }
+}

package/src/examples/Colors.stories.js

@@ -0,0 +1,28 @@
+import baseThemeColors from '../configurations/_theme-colors-base.scss';
+import variationThemeColors from '../configurations/_theme-colors-variations.scss';
+import('./Colors.stories.scss');
+
+export default {
+	title: 'Colors/Pallete',
+};
+
+export const NamesAndValues = () => ({
+	data() {
+		return {
+			baseThemeColors: { ...baseThemeColors },
+			keys: Object.keys(baseThemeColors),
+			variationThemeColors: { ...variationThemeColors },
+		};
+	},
+	template: `<div class="palette-container">
+        <div
+            v-for="key in keys"
+            :key="key"
+        >
+            <farm-heading :type="5">{{ key }}</farm-heading>
+            <span :style="{ backgroundColor: baseThemeColors[key] }">Base {{ baseThemeColors[key] }}</span>
+            <span :style="{ backgroundColor: variationThemeColors[key + '-lighten'] }">Lighten: {{ variationThemeColors[key + '-lighten'] }}</span>
+            <span :style="{ backgroundColor: variationThemeColors[key + '-darken'], color: 'white' }">Darken: {{ variationThemeColors[key + '-darken'] }}</span>
+        </div>
+	</div>`,
+});

package/src/examples/Colors.stories.scss

@@ -0,0 +1,15 @@
+.palette-container {
+    display: flex;
+    flex-direction: row;
+
+    >div {
+        display: flex;
+        flex-direction: column;
+        width: calc(25% - 32px);
+        margin: auto 16px;
+
+        span {
+            padding: 4px 8px;
+        }
+    }
+}

package/src/examples/ConfirmDialog.stories.js

@@ -1,8 +1,7 @@
 import { withDesign } from 'storybook-addon-designs';
-import { ConfirmButton } from '../main';
 
 export default {
-	title: 'Examples/ConfirmDialog',
+	title: 'Display/Dialog/Confirm',
 	decorators: [withDesign],
 	parameters: {
 		viewMode: 'docs',
@@ -15,9 +14,6 @@ export default {
 };
 
 export const ConfirmDialog = () => ({
-	components: {
-		ConfirmButton,
-	},
 	methods: {
 		openDialog() {
 			this.$dialog.confirm({
@@ -45,7 +41,3 @@ export const ConfirmDialog = () => ({
         </ConfirmButton>
 	</div>`,
 });
-
-ConfirmDialog.story = {
-	name: 'ConfirmDialog',
-};

package/src/examples/Container/Basic.stories.js

@@ -1,11 +1,9 @@
-import { Container, ContainerFooter, StepperHeader } from '../../main.ts';
-
 export default {
-	title: 'Examples/Container',
+	title: 'Layout/Container/Examples',
 	parameters: {
 		docs: {
 			description: {
-				component: `Container<br />selector: <em>farm-container</em>`,
+				component: `Full Container`,
 			},
 		},
 		viewMode: 'docs',
@@ -13,12 +11,10 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-container': Container },
 	template: '<farm-container>content</farm-container>',
 });
 
 export const Secondary = () => ({
-	components: { 'farm-container': Container, 'farm-container-footer': ContainerFooter },
 	template: `
 	<farm-container>
 		Content
@@ -30,10 +26,6 @@ export const Secondary = () => ({
 });
 
 export const Tertiary = () => ({
-	components: {
-		'farm-container': Container,
-		'farm-stepper-header': StepperHeader,
-	},
 	data() {
 		return {
 			steps: [
@@ -51,9 +43,3 @@ export const Tertiary = () => ({
 	</farm-container>
 `,
 });
-
-Primary.storyName = 'Básico';
-
-Secondary.storyName = 'Footer';
-
-Tertiary.storyName = 'Stepper';

package/src/examples/Form/Full.stories.js

@@ -1,12 +1,8 @@
-import { Label, TextField } from '../../main.ts';
-
 export default {
-	title: 'Examples/Form/Full',
-	component: Label,
+	title: 'Form/Examples',
 };
 
 export const Primary = () => ({
-	components: { 'farm-label': Label, 'farm-textfield': TextField },
 	data() {
 		return {
 			form: {
@@ -52,8 +48,6 @@ export const Primary = () => ({
     `,
 });
 
-Primary.storyName = 'Basic';
-
 const emailValidator = value => {
 	if (!value) {
 		return false;

package/src/examples/Modal.stories.js

@@ -2,7 +2,7 @@ import { withDesign } from 'storybook-addon-designs';
 import { DialogHeader, DialogFooter } from '../main';
 
 export default {
-	title: 'Examples/Modal',
+	title: 'Display/Dialog/Examples',
 	decorators: [withDesign],
 	component: Modal,
 };
@@ -11,10 +11,6 @@ export const Modal = () => ({
 	/*
 	 * How to create the default modal following FARM's Design System guideline
 	 */
-	components: {
-		DialogHeader,
-		DialogFooter,
-	},
 	data() {
 		return {
 			inputVal: false,
@@ -35,10 +31,6 @@ export const Modal = () => ({
 });
 
 export const ModalSmall = () => ({
-	components: {
-		DialogHeader,
-		DialogFooter,
-	},
 	data() {
 		return {
 			showModalSmall: false,
@@ -59,10 +51,6 @@ export const ModalSmall = () => ({
 });
 
 export const ModalExtremeSmall = () => ({
-	components: {
-		DialogHeader,
-		DialogFooter,
-	},
 	data() {
 		return {
 			showModalSmall: false,
@@ -83,10 +71,6 @@ export const ModalExtremeSmall = () => ({
 });
 
 export const ModalMedium = () => ({
-	components: {
-		DialogHeader,
-		DialogFooter,
-	},
 	data() {
 		return {
 			showModalSmall: false,
@@ -107,10 +91,6 @@ export const ModalMedium = () => ({
 });
 
 export const ModalScrollVertical = () => ({
-	components: {
-		DialogHeader,
-		DialogFooter,
-	},
 	data() {
 		return {
 			showModalSmall: false,
@@ -133,10 +113,6 @@ export const ModalScrollVertical = () => ({
 });
 
 export const ModalScrollHorizontal = () => ({
-	components: {
-		DialogHeader,
-		DialogFooter,
-	},
 	data() {
 		return {
 			open: false,
@@ -204,33 +180,3 @@ export const ModalScrollHorizontal = () => ({
 		</v-btn>
 	</div>`,
 });
-
-Modal.story = {
-	name: 'Básico',
-	parameters: {
-		design: {
-			type: 'figma',
-			url:
-				'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=2867%3A10594',
-		},
-	},
-};
-
-ModalSmall.story = {
-	name: 'Pequeno',
-	parameters: {
-		design: {
-			type: 'figma',
-			url:
-				'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=5336%3A32496',
-		},
-	},
-};
-
-ModalScrollVertical.storyName = 'Rolagem vertical';
-
-ModalScrollHorizontal.storyName = 'Rolagem horizontal';
-
-ModalExtremeSmall.storyName = 'Extra pequeno';
-
-ModalMedium.storyName = 'Médio';