@farm-investimentos/front-mfe-components 11.4.0 → 11.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/front-mfe-components.common.js +107 -98
- package/dist/front-mfe-components.common.js.map +1 -1
- package/dist/front-mfe-components.css +1 -1
- package/dist/front-mfe-components.umd.js +107 -98
- package/dist/front-mfe-components.umd.js.map +1 -1
- package/dist/front-mfe-components.umd.min.js +1 -1
- package/dist/front-mfe-components.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ChipInviteStatus/__tests__/ChipInviteStatus.spec.js +0 -2
- package/src/components/Typography/Typography.scss +9 -2
- package/src/components/Typography/Typography.stories.js +36 -0
- package/src/components/Typography/Typography.vue +9 -0
- package/src/components/layout/Basic.stories.js +2 -2
package/package.json
CHANGED
|
@@ -2,7 +2,6 @@ import { shallowMount } from '@vue/test-utils';
|
|
|
2
2
|
import ChipInviteStatus from '../ChipInviteStatus.vue';
|
|
3
3
|
describe('ChipInviteStatus component', () => {
|
|
4
4
|
let wrapper;
|
|
5
|
-
let component;
|
|
6
5
|
|
|
7
6
|
beforeEach(() => {
|
|
8
7
|
wrapper = shallowMount(ChipInviteStatus, {
|
|
@@ -10,7 +9,6 @@ describe('ChipInviteStatus component', () => {
|
|
|
10
9
|
status: 10,
|
|
11
10
|
},
|
|
12
11
|
});
|
|
13
|
-
component = wrapper.vm;
|
|
14
12
|
});
|
|
15
13
|
test('ChipInviteStatus created', () => {
|
|
16
14
|
expect(wrapper).toBeDefined();
|
|
@@ -30,6 +30,14 @@
|
|
|
30
30
|
@each $k in $theme-colors-list {
|
|
31
31
|
&#{'[color=' + $k + ']'} {
|
|
32
32
|
color: var(--farm-#{$k}-base);
|
|
33
|
+
|
|
34
|
+
&.farm-typography--lighten {
|
|
35
|
+
color: var(--farm-#{$k}-lighten);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&.farm-typography--darken {
|
|
39
|
+
color: var(--farm-#{$k}-darken);
|
|
40
|
+
}
|
|
33
41
|
}
|
|
34
42
|
}
|
|
35
43
|
|
|
@@ -59,5 +67,4 @@
|
|
|
59
67
|
font-size: calc(#{$val} - 2px);
|
|
60
68
|
}
|
|
61
69
|
}
|
|
62
|
-
}
|
|
63
|
-
|
|
70
|
+
}
|
|
@@ -105,6 +105,42 @@ export const Colors = () => ({
|
|
|
105
105
|
</div>`,
|
|
106
106
|
});
|
|
107
107
|
|
|
108
|
+
export const ColorsLighten = () => ({
|
|
109
|
+
data() {
|
|
110
|
+
return {
|
|
111
|
+
colors: [ ...colors, 'white'],
|
|
112
|
+
};
|
|
113
|
+
},
|
|
114
|
+
template: `<div>
|
|
115
|
+
<farm-typography
|
|
116
|
+
v-for="color in colors"
|
|
117
|
+
color-variation="lighten"
|
|
118
|
+
:color="color"
|
|
119
|
+
:key="'lighten' + color"
|
|
120
|
+
>
|
|
121
|
+
Typography - color {{ color }} lighten
|
|
122
|
+
</farm-typography>
|
|
123
|
+
</div>`,
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
export const ColorsDarken = () => ({
|
|
127
|
+
data() {
|
|
128
|
+
return {
|
|
129
|
+
colors: [...colors, 'white'],
|
|
130
|
+
};
|
|
131
|
+
},
|
|
132
|
+
template: `<div>
|
|
133
|
+
<farm-typography
|
|
134
|
+
v-for="color in colors"
|
|
135
|
+
color-variation="darken"
|
|
136
|
+
:color="color"
|
|
137
|
+
:key="'darken' + color"
|
|
138
|
+
>
|
|
139
|
+
Typography - color {{ color }} darken
|
|
140
|
+
</farm-typography>
|
|
141
|
+
</div>`,
|
|
142
|
+
});
|
|
143
|
+
|
|
108
144
|
export const Tags = () => ({
|
|
109
145
|
data() {
|
|
110
146
|
return {
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
'farm-typography': true,
|
|
6
6
|
['farm-typography--' + $props.size]: isSizeFromBreakpoints,
|
|
7
7
|
['farm-typography--weight-' + weight]: weight !== undefined,
|
|
8
|
+
'farm-typography--lighten': colorVariation === 'lighten',
|
|
9
|
+
'farm-typography--darken': colorVariation === 'darken',
|
|
8
10
|
}"
|
|
9
11
|
:style="style"
|
|
10
12
|
:color="color"
|
|
@@ -54,6 +56,13 @@ export default Vue.extend({
|
|
|
54
56
|
>,
|
|
55
57
|
default: 'default',
|
|
56
58
|
},
|
|
59
|
+
/**
|
|
60
|
+
* Color variation
|
|
61
|
+
*/
|
|
62
|
+
colorVariation: {
|
|
63
|
+
type: String,
|
|
64
|
+
default: '',
|
|
65
|
+
},
|
|
57
66
|
},
|
|
58
67
|
setup(props) {
|
|
59
68
|
const { size, lineHeight } = toRefs(props);
|
|
@@ -35,7 +35,7 @@ export const Structure = () => ({
|
|
|
35
35
|
<farm-row>
|
|
36
36
|
<farm-col md="6" lg="3">
|
|
37
37
|
coluna 1
|
|
38
|
-
</farm-col
|
|
38
|
+
</farm-col>›
|
|
39
39
|
<farm-col md="6" lg="3">
|
|
40
40
|
coluna 2
|
|
41
41
|
</farm-col>
|
|
@@ -46,7 +46,7 @@ export const Structure = () => ({
|
|
|
46
46
|
coluna 4
|
|
47
47
|
</farm-col>
|
|
48
48
|
</farm-row>
|
|
49
|
-
<farm-row extra-decrease="true">
|
|
49
|
+
<farm-row :extra-decrease="true">
|
|
50
50
|
<farm-container-footer>
|
|
51
51
|
Footer content
|
|
52
52
|
</farm-container-footer>
|