@farm-investimentos/front-mfe-components 14.2.1 → 15.0.0

package/src/components/Typography/Typography.scss

@@ -64,6 +64,16 @@
 			font-weight: $w;
 		}
 	}
+
+}
+
+.farm-typography[color=black] {
+	color: var(--farm-bw-black);
+	@each $v in $bwVariations {
+		&.farm-typography--black-#{$v} {
+			color: var(--farm-bw-black-#{$v});
+		}
+	}
 }
 
 @include upToSm {

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

@@ -1,6 +1,7 @@
 import Typography from './Typography';
 import sizes from '../../configurations/sizes';
 import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+import bwThemeColors from '../../configurations/_theme-colors-bw.scss';
 
 const colors = Object.keys(baseThemeColors);
 
@@ -91,7 +92,8 @@ export const CustomSizes = () => ({
 export const Colors = () => ({
 	data() {
 		return {
-			colors: ['default', ...colors, 'white'],
+			colors: ['default', ...colors],
+			bwColors: Object.keys(bwThemeColors),
 		};
 	},
 	template: `<div>
@@ -102,6 +104,17 @@ export const Colors = () => ({
 		>
 			Typography - color {{ color }}
 		</farm-typography>
+
+		<farm-typography
+			v-for="bw in bwColors"
+			:style="{ backgroundColor: bw === 'white' ? 'black' : 'white' }"
+			:color="bw.split('-')[0]"
+			:color-variation="bw.split('-')[1]"
+			:key="bw"
+		>
+			Typography - color {{ bw }}
+		</farm-typography>
+
 	</div>`,
 });
 
@@ -194,4 +207,4 @@ export const Listener = () => ({
 	template: `<farm-bodytext @click="handleEvent">
 		Click me
 	</farm-bodytext>`,
-});
+});

package/src/components/Typography/Typography.vue

@@ -8,6 +8,7 @@
 			['farm-typography--weight-' + weight]: weight !== undefined,
 			'farm-typography--lighten': colorVariation === 'lighten',
 			'farm-typography--darken': colorVariation === 'darken',
+			['farm-typography--black-' + colorVariation]: color === 'black',
 			'farm-typography--ellipsis': ellipsis,
 		}"
 		:style="style"
@@ -70,17 +71,20 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'
 				| 'error'
 				| 'warning'
-				| 'success'
 				| 'extra-1'
 				| 'extra-2'
 				| 'gray'
+				| 'black'
+				| 'white'
 			>,
-			default: 'default',
+			default: '',
 		},
 		/**
 		 * Color variation

package/src/components/Typography/index.ts

@@ -5,6 +5,7 @@ import Subtitle from './Subtitle/Subtitle.vue';
 import BodyText from './BodyText/BodyText.vue';
 import Caption from './Caption/Caption.vue';
 import OverlayText from './OverlayText/OverlayText.vue';
+import Small from './Small/Small.vue';
 
-export { Typography, Heading, Subtitle, BodyText, Caption, OverlayText };
+export { Typography, Heading, Subtitle, BodyText, Caption, OverlayText, Small };
 export default Typography;

package/src/components/ValueCaption/ValueCaption.vue

@@ -32,6 +32,8 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'

package/src/components/layout/Line/Line.scss

@@ -1,3 +1,4 @@
+@import '../../../configurations/theme-colors';
 .farm-line {
 	width: 100%;
 	border: none;
@@ -7,4 +8,18 @@
 	&--spacing {
 		margin-top: 16px;
 	}
+
+	@each $color in $theme-colors-list {
+		&#{'.farm-line--' + $color} {
+			border-bottom-color: var(--farm-#{$color}-base);
+
+			&.farm-line--lighten {
+				border-bottom-color: themeColor($color, 'lighten');
+			}
+
+			&.farm-line--darken {
+				border-bottom-color: themeColor($color, 'darken');
+			}
+		}
+	}
 }

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

@@ -1,4 +1,7 @@
 import Line from './Line.vue';
+import baseThemeColors from '../../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
+const variations = ['base', 'lighten', 'darken'];
 
 export default {
 	title: 'Layout/Line',
@@ -17,14 +20,34 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-line': Line },
 	template: '<farm-line />',
 });
 
-export const Spacing = () => ({
-	components: { 'farm-line': Line },
+export const NoSpacing = () => ({
 	template: '<farm-line :noSpacing="true" />',
 });
 
-Primary.storyName = 'Basic';
-Spacing.storyName = 'No Spacing';
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col cols="12">
+			<h4 style="margin-top:15px">Default</h4>
+			<farm-line />
+		</farm-col>
+		<farm-col cols="12" v-for="color in colors" :key="'color_' + color">
+			<h4 style="margin-top:15px">{{ color }}</h4>
+			<farm-line 
+				v-for="variation in variations"
+				:key="color + '_' + variation"
+				:color="color"
+				:variation="variation" 
+			/>
+		</farm-col>
+	</farm-row>`,
+});

package/src/components/layout/Line/Line.vue

@@ -1,13 +1,47 @@
 <template>
-	<hr :class="{ 'farm-line': true, 'farm-line--spacing': !noSpacing }" />
+	<hr
+		:class="{
+			'farm-line': true,
+			'farm-line--spacing': !noSpacing,
+			['farm-line--' + color]: !!color,
+			'farm-line--lighten': variation === 'lighten',
+			'farm-line--darken': variation === 'darken',
+		}"
+	/>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-line',
 	props: {
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'default',
+		},
+		/**
+		 * Variation Color
+		 */
+		variation: {
+			type: String,
+			default: 'base',
+		},
 		/**
 		 * Remove default margins
 		 */
@@ -20,5 +54,5 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-@import './Line'
+@import './Line';
 </style>

package/src/configurations/_mixins.scss

@@ -41,7 +41,7 @@
 }
 
 @mixin addShadow {
-	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+	box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.16);
 }
 
 @mixin buildCol($code) {

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

@@ -0,0 +1,10 @@
+@import './theme-colors';
+
+:export {
+
+    @each $name,
+    $color in $background-colors {
+        #{$name}: $color;
+    }
+
+}

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

@@ -0,0 +1,10 @@
+@import './theme-colors';
+
+:export {
+
+    @each $name,
+    $color in $bw-colors {
+        #{$name}: $color;
+    }
+
+}

package/src/configurations/_theme-colors.scss

@@ -1,91 +1,122 @@
 $primary: (
-    base: #00B493,
-    lighten: #EBFFFB,
-    darken: #099A82,
+	base: #4f8406,
+	lighten: #d5e7bb,
+	darken: #395f05,
 );
 
 $secondary: (
-    base: #1A3738,
-    lighten: #467D7E,
-    darken: #0B1A1B,
+	base: #e2c076,
+	lighten: #f1e6cc,
+	darken: #968254,
+);
+
+$secondary-green: (
+	base: #3e4e4b,
+	lighten: #6e7a78,
+	darken: #00231d,
+);
+
+$secondary-golden: (
+	base: #e2c076,
+	lighten: #f1e6cc,
+	darken: #968254,
 );
 
 $neutral: (
-    base: #E0E0E0,
-    lighten: #F5F5F5,
-    darken: #5C5C5C,
+	base: #e0e0e0,
+	lighten: #f5f5f5,
+	darken: #5c5c5c,
 );
 
 $error: (
-    base: #F44336,
-    lighten: #FFEBEE,
-    darken: #B71C1C,
+	base: #f44336,
+	lighten: #ffebee,
+	darken: #b71c1c,
 );
 
 $warning: (
-    base: #FF9800,
-    lighten: #FFF3E0,
-    darken: #FF6D00,
+	base: #ff9800,
+	lighten: #fff3e0,
+	darken: #ff6d00,
 );
 
 $info: (
-    base: #2196F3,
-    lighten: #E3F2FD,
-    darken: #0D47A1,
+	base: #2196f3,
+	lighten: #e3f2fd,
+	darken: #0d47a1,
 );
 
 $success: (
-    base: #4CAF50,
-    lighten: #E8F5E9,
-    darken: #1B5E20,
+	base: #4caf50,
+	lighten: #e8f5e9,
+	darken: #1b5e20,
 );
 
 $extra-1: (
-    base: #8E24AA,
-    lighten: #F3E5F5,
-    darken: #4A148C,
+	base: #8e24aa,
+	lighten: #f3e5f5,
+	darken: #4a148c,
 );
 
 $extra-2: (
-    base: #EC407A,
-    lighten: #FCE4EC,
-    darken: #880E4F,
+	base: #ec407a,
+	lighten: #fce4ec,
+	darken: #880e4f,
 );
 
 $gray: (
-    base: #858585,
-    lighten: #D6D6D6,
-    darken: #5C5C5C,
+	base: #858585,
+	lighten: #d6d6d6,
+	darken: #5c5c5c,
 );
 
 $theme-colors: (
-    "primary": $primary,
-    "secondary": $secondary,
-    "neutral": $neutral,
-    "info": $info,
-    "error": $error,
-    "warning": $warning,
-    "success": $success,
-    "extra-1": $extra-1,
-    "extra-2": $extra-2,
-    "gray": $gray
+	'primary': $primary,
+	'secondary': $secondary,
+	'secondary-green': $secondary-green,
+	'secondary-golden': $secondary-golden,
+	'neutral': $neutral,
+	'info': $info,
+	'error': $error,
+	'warning': $warning,
+	'success': $success,
+	'extra-1': $extra-1,
+	'extra-2': $extra-2,
+	'gray': $gray,
 );
 
 $text-colors: (
-    "primary": #1C1C1C,
-    "secondary": #757575,
-    "disabled": #BDBDBD
+	'primary': #1c1c1c,
+	'secondary': #757575,
+	'disabled': #858585,
 );
 
 $stroke-colors: (
-    "base": #E0E0E0,
-    "disabled": #BDBDBD,
-    "divider": #E0E0E0
+	'base': #e0e0e0,
+	'disabled': #bdbdbd,
+	'divider': #e0e0e0,
+);
+
+$bw-colors: (
+	'black': #1c1c1c,
+	'black-80': #333333,
+	'black-50': #5c5c5c,
+	'black-40': #757575,
+	'black-30': #858585,
+	'black-10': #d6d6d6,
+	'black-5': #f5f5f5,
+	'white': #ffffff,
+);
+
+$background-colors: (
+	'base': #f5f5f5,
+	'lighten': #FAFAFA,
+	'white': #FFFFFF,
 );
 
 $theme-colors-list: map-keys($theme-colors);
 
 @function themeColor($name, $variation: 'base') {
-    $theme-color: map-get($theme-colors, $name);
-    @return map-get($theme-color, $variation)
+	$theme-color: map-get($theme-colors, $name);
+	@return map-get($theme-color, $variation);
 }

package/src/configurations/_variables.scss

@@ -28,6 +28,8 @@ $fontSizes: (
 
 $fontWeights: 100, 200, 300, 400, 500, 600, 700;
 
+$bwVariations: 80, 50, 40, 30, 10, 5;
+
 $aligns: start,center,end,auto,baseline,stretch;
 $align-contents: start,center,end,space-between,space-around,stretch;
 $justifications: start,center,end,space-between,space-around;

package/src/examples/Colors.stories.js

@@ -1,6 +1,8 @@
 import baseThemeColors from '../configurations/_theme-colors-base.scss';
 import textThemeColors from '../configurations/_theme-colors-text.scss';
 import strokeThemeColors from '../configurations/_theme-colors-stroke.scss';
+import bwThemeColors from '../configurations/_theme-colors-bw.scss';
+import backgroundThemeColors from '../configurations/_theme-colors-background.scss';
 import variationThemeColors from '../configurations/_theme-colors-variations.scss';
 import('./Colors.stories.scss');
 
@@ -16,6 +18,10 @@ export const NamesAndValues = () => ({
 			variationThemeColors: { ...variationThemeColors },
 			textThemeColors: { ...textThemeColors },
 			strokeThemeColors: { ...strokeThemeColors },
+			bwThemeColorsKeys: Object.keys(bwThemeColors),
+			bwThemeColors: { ...bwThemeColors },
+			backgroundThemeColorsKeys: Object.keys(backgroundThemeColors),
+			backgroundThemeColors: { ...backgroundThemeColors },
 		};
 	},
 	template: `<div class="palette-container">
@@ -40,7 +46,21 @@ export const NamesAndValues = () => ({
 			<span :style="{ color: strokeThemeColors['stroke-base'] }">Base <span>{{ strokeThemeColors['stroke-base'] }}</span></span>
 			<span :style="{ color: strokeThemeColors['stroke-disabled'] }">Disabled <span>{{ strokeThemeColors['stroke-disabled'] }}</span></span>
 			<span :style="{ color: strokeThemeColors['stroke-divider'] }">Divider <span>{{ strokeThemeColors['stroke-divider'] }}</span></span>
-        </div>
+		</div>
+
+		<div>
+			<farm-heading :type="5">Black & White</farm-heading>
+			<span v-for="bw in bwThemeColorsKeys" :key="'bw_name_' + bw" :style="{ color: bw !== 'white' ? bwThemeColors[bw] : 'black' }">
+				{{ bw }}<span>{{ bwThemeColors[bw] }}</span>
+			</span>
+		</div>
+
+		<div>
+			<farm-heading :type="5">Background</farm-heading>
+			<span v-for="bw in backgroundThemeColorsKeys" :key="'bw_name_' + bw" :style="{ backgroundColor: backgroundThemeColors[bw] }">
+				{{ bw }}<span>{{ backgroundThemeColors[bw] }}</span>
+			</span>
+		</div>
 
 	</div>`,
 });
@@ -53,6 +73,10 @@ export const CssVariables = () => ({
 			variationThemeColors: { ...variationThemeColors },
 			textThemeColors: { ...textThemeColors },
 			strokeThemeColors: { ...strokeThemeColors },
+			bwThemeColorsKeys: Object.keys(bwThemeColors),
+			bwThemeColors: { ...bwThemeColors },
+			backgroundThemeColorsKeys: Object.keys(backgroundThemeColors),
+			backgroundThemeColors: { ...backgroundThemeColors },
 		};
 	},
 	template: `<div class="palette-container">
@@ -80,5 +104,19 @@ export const CssVariables = () => ({
 			<span :style="{ color: strokeThemeColors['stroke-divider'] }">Divider <span>--farm-stroke-divider</span></span>
         </div>
 
+		<div>
+			<farm-heading :type="5">Black & White</farm-heading>
+			<span v-for="bw in bwThemeColorsKeys" :key="'bw_var_' + bw" :style="{ color: bw !== 'white' ? bwThemeColors[bw] : 'black' }">
+				{{ bw }} <span>--farm-bw-{{ bw }}</span>
+			</span>
+		</div>
+
+		<div>
+			<farm-heading :type="5">Background</farm-heading>
+			<span v-for="bw in backgroundThemeColorsKeys" :key="'bw_var_' + bw" :style="{ backgroundColor: backgroundThemeColors[bw], }">
+				{{ bw }} <span>--farm-background-{{ bw }}</span>
+			</span>
+		</div>
+
 	</div>`,
 });

package/src/examples/Colors.stories.scss

@@ -7,7 +7,7 @@
         display: flex;
         flex-direction: column;
         width: calc(33.333% - 32px);
-        margin: auto 16px 32px;
+        margin: 0 16px 32px;
         font-size: 12px;
 
         >span {

package/src/helpers/index.ts

@@ -1,3 +1,4 @@
 import { formatDatePickerHeader } from './formatDatePickerHeader';
 export { default as calculateMainZindex } from './calculateMainZindex';
-export { formatDatePickerHeader };
+import isChildOfFixedElement from './isChildOfFixedElement';
+export { formatDatePickerHeader, isChildOfFixedElement };

package/src/helpers/isChildOfFixedElement.js

@@ -0,0 +1,16 @@
+function isChildOfFixedElement(element) {
+	const parent = element.parentNode;
+
+	if (!parent || !(parent instanceof Element)) {
+		return false;
+	}
+	const style = window.getComputedStyle(parent);
+
+	if (style.position === 'fixed') {
+		return true;
+	}
+
+	return isChildOfFixedElement(parent);
+}
+
+export default isChildOfFixedElement;

package/src/main.ts

@@ -4,9 +4,7 @@ import DataTablePaginator from './components/DataTablePaginator';
 import DataTableHeader from './components/DataTableHeader';
 import MainFilter from './components/MainFilter';
 import Loader from './components/Loader';
-import FilePicker from './components/FilePicker';
 import MultipleFilePicker from './components/MultipleFilePicker';
-import Tabs from './components/Tabs';
 import DialogHeader from './components/DialogHeader';
 import DialogFooter from './components/DialogFooter';
 import RangeDatePicker from './components/RangeDatePicker';
@@ -30,9 +28,7 @@ export {
 	DataTableHeader,
 	MainFilter,
 	Loader,
-	FilePicker,
 	MultipleFilePicker,
-	Tabs,
 	DialogHeader,
 	DialogFooter,
 	RangeDatePicker,
@@ -85,8 +81,8 @@ export * from './components/RadioGroup';
 export * from './components/Select';
 export * from './components/Stepper';
 export * from './components/Switcher';
+export * from './components/Tabs';
 export * from './components/TextArea';
-export * from './components/TextField';
 export * from './components/TextFieldV2';
 export * from './components/Tooltip';
 export * from './components/Typography';

package/src/scss/Sticky-table.scss

@@ -2,13 +2,13 @@ $defaultLefts: 0, 4rem, 4rem;
 @mixin stickytable($selector, $columns: 1, $lefts: $defaultLefts) {
 	#{$selector} {
 		tbody {
-			font-size: 0.75rem;
+			font-size: 12px;
 		}
 		tbody tr:nth-of-type(odd) td {
-			background-color: var(--farm-neutral-lighten);
+			background-color: var(--farm-bw-black-5);
 		}
 		tr td {
-			background-color: white;
+			background-color: var(--farm-bw-white);
 		}
 
 		tr:not(:last-child) td,
@@ -41,7 +41,7 @@ $defaultLefts: 0, 4rem, 4rem;
 				th:nth-child(#{$i}) {
 					position: sticky;
 					z-index: 4;
-					background-color: white;
+					background-color: var(--farm-bw-white);
 				}
 			}
 
@@ -53,6 +53,10 @@ $defaultLefts: 0, 4rem, 4rem;
 			}
 		}
 
+		tr td:first-child, tr th:first-child  {
+			padding-left: 24px;
+		}
+
 		.v-chip {
 			font-size: 0.75rem;
 			padding: 0 1.5rem;
@@ -68,14 +72,14 @@ $defaultLefts: 0, 4rem, 4rem;
 		}
 
 		th[role='columnheader'] {
-			color: var(--farm-secondary-base);
+			color: var(--farm-secondary-green-darken);
 			font-size: 14px;
 			font-weight: 700;
 			text-transform: uppercase;
 		}
 
 		td {
-			color: var(--farm-text-primary);
+			color: var(--farm-bw-black);
 			font-size: 14px;
 			font-weight: 400;
 		}
@@ -102,7 +106,7 @@ $defaultLefts: 0, 4rem, 4rem;
 
 		.v-data-table__checkbox .mdi {
 			margin-left: 0;
-			font-size: 20px;
+			font-size: 22px;
 			margin-left: -2px;
 		}
 
@@ -111,5 +115,7 @@ $defaultLefts: 0, 4rem, 4rem;
 			height: 20px;
 			margin-right: 0 !important;
 		}
+
+		
 	}
 }