@farm-investimentos/front-mfe-components 5.2.0 → 5.2.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.
Files changed (13) hide show
  1. package/dist/front-mfe-components.common.js +37 -37
  2. package/dist/front-mfe-components.common.js.map +1 -1
  3. package/dist/front-mfe-components.css +1 -1
  4. package/dist/front-mfe-components.umd.js +37 -37
  5. package/dist/front-mfe-components.umd.js.map +1 -1
  6. package/dist/front-mfe-components.umd.min.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/Logger/Logger.scss +1 -3
  9. package/src/components/Logger/Logger.stories.js +5 -0
  10. package/src/components/Logger/LoggerItem/LoggerItem.scss +5 -12
  11. package/src/components/Logger/LoggerItem/LoggerItem.stories.js +4 -0
  12. package/src/components/Stepper/StepperHeader/StepperHeader.scss +27 -45
  13. package/src/components/Stepper/StepperHeader/StepperHeader.stories.js +6 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@farm-investimentos/front-mfe-components",
3
- "version": "5.2.0",
3
+ "version": "5.2.1",
4
4
  "author": "farm investimentos",
5
5
  "private": false,
6
6
  "main": "./dist/front-mfe-components.common.js",
package/src/components/Logger/Logger.scss CHANGED
@@ -1,5 +1,3 @@
1
- $fore-color: #858585;
2
-
3
1
  .logger {
4
2
  display: block;
5
3
 
@@ -15,5 +13,5 @@ $fore-color: #858585;
15
13
  height: 40px;
16
14
  margin: -4px 0 -4px 16px;
17
15
  width: 1px;
18
- background-color: $fore-color;
16
+ background-color: var(--v-gray-lighten1);
19
17
  }
package/src/components/Logger/Logger.stories.js CHANGED
@@ -11,6 +11,11 @@ export default {
11
11
  `,
12
12
  },
13
13
  },
14
+
15
+ design: {
16
+ type: 'figma',
17
+ url: 'https://www.figma.com/file/XDwOALFs1s9uXPFVE7BP9B/%E2%9C%8D---Cr%C3%A9dito?node-id=4029%3A28672',
18
+ },
14
19
  viewMode: 'docs',
15
20
  },
16
21
  };
package/src/components/Logger/LoggerItem/LoggerItem.scss CHANGED
@@ -1,9 +1,3 @@
1
- $line-color : #D6D6D6;
2
- $fore-color: #858585;
3
- $current-color: #5089DE;
4
- $success-color: #00B493;
5
- $error-color: #EA5455;
6
-
7
1
  @mixin loggerMessage($color) {
8
2
  >i.mdi {
9
3
  border-color: $color;
@@ -28,19 +22,18 @@ $error-color: #EA5455;
28
22
  }
29
23
 
30
24
  &.logger__item--error {
31
- @include loggerMessage($error-color);
25
+ @include loggerMessage(var(--v-error-base));
32
26
  }
33
27
 
34
28
  &.logger__item--success {
35
- @include loggerMessage($success-color);
29
+ @include loggerMessage(var(--v-secondary-base));
36
30
 
37
31
  }
38
32
  }
39
33
 
40
34
 
41
-
42
35
  .logger__item>i.mdi {
43
- border: 1px solid $line-color;
36
+ border: 1px solid var(--v-gray-lighten2);
44
37
  border-radius: 50%;
45
38
  width: 32px;
46
39
  height: 32px;
@@ -50,8 +43,8 @@ $error-color: #EA5455;
50
43
  align-items: center;
51
44
  justify-content: center;
52
45
 
53
- border-color: $fore-color;
54
- background-color: $fore-color;
46
+ border-color: var(--v-gray-lighten1);
47
+ background-color: var(--v-gray-lighten1);
55
48
 
56
49
  &:before {
57
50
  font-size: 16px;
package/src/components/Logger/LoggerItem/LoggerItem.stories.js CHANGED
@@ -11,6 +11,10 @@ export default {
11
11
  `,
12
12
  },
13
13
  },
14
+ design: {
15
+ type: 'figma',
16
+ url: 'https://www.figma.com/file/XDwOALFs1s9uXPFVE7BP9B/%E2%9C%8D---Cr%C3%A9dito?node-id=4029%3A28672',
17
+ },
14
18
  viewMode: 'docs',
15
19
  },
16
20
  };
package/src/components/Stepper/StepperHeader/StepperHeader.scss CHANGED
@@ -1,11 +1,19 @@
1
1
  $step-height: 64px;
2
- $line-color : #D6D6D6;
3
- $fore-color: #858585;
4
- $current-color: #5089DE;
5
- $previous-color: #00B493;
6
- $error-color: #EA5455;
7
2
  $vertical-step-width: 160px;
8
3
 
4
+ @mixin stepperHeaderStepColor($color) {
5
+
6
+
7
+ i.mdi {
8
+ background-color: $color;
9
+ border-color: $color;
10
+ }
11
+
12
+ i.mdi:before {
13
+ color: white;
14
+ }
15
+ }
16
+
9
17
  .stepper__header {
10
18
  display: flex;
11
19
  flex-direction: row;
@@ -17,44 +25,20 @@ $vertical-step-width: 160px;
17
25
  flex-direction: column;
18
26
  align-items: center;
19
27
  justify-items: center;
20
- color: $fore-color;
28
+ color: var(--v-gray-lighten1);
21
29
  font-size: 14px;
22
30
  font-weight: 700;
23
31
 
24
32
  &.stepper__header-step--previous {
25
- color: $previous-color;
26
-
27
- i.mdi {
28
- border-color: $previous-color;
29
- }
30
-
31
- i.mdi:before {
32
- color: $previous-color;
33
- }
33
+ @include stepperHeaderStepColor(var(--v-secondary-base));
34
34
  }
35
35
 
36
36
  &.stepper__header-step--current {
37
- color: $current-color;
38
-
39
- i.mdi {
40
- border-color: $current-color;
41
- }
42
-
43
- i.mdi:before {
44
- color: $current-color;
45
- }
37
+ @include stepperHeaderStepColor(var(--v-accent-base));
46
38
  }
47
39
 
48
40
  &.stepper__header-step--error {
49
- color: $error-color;
50
-
51
- i.mdi {
52
- border-color: $error-color;
53
- }
54
-
55
- i.mdi:before {
56
- color: $error-color;
57
- }
41
+ @include stepperHeaderStepColor(var(--v-error-base));
58
42
  }
59
43
 
60
44
  span {
@@ -63,8 +47,6 @@ $vertical-step-width: 160px;
63
47
  }
64
48
  }
65
49
 
66
-
67
-
68
50
  .stepper__divider--horizontal {
69
51
  display: block;
70
52
  flex: 1 1 0px;
@@ -73,18 +55,18 @@ $vertical-step-width: 160px;
73
55
 
74
56
  border: none;
75
57
  margin: 16px -16px 0;
76
- background: $line-color;
58
+ background: var(--v-gray-lighten2);
77
59
 
78
60
  &.stepper__divider--previous {
79
- background: $previous-color;
61
+ background: var(--v-secondary-base);
80
62
  }
81
63
 
82
64
  &.stepper__divider--previous-to-current {
83
- background: linear-gradient(to right, $previous-color, $current-color);
65
+ background: linear-gradient(to right, var(--v-secondary-base), var(--v-accent-base));
84
66
  }
85
67
 
86
68
  &.stepper__divider--previous-to-error {
87
- background: linear-gradient(to right, $previous-color, $error-color);
69
+ background: linear-gradient(to right, var(--v-secondary-base), var(--v-error-base));
88
70
  }
89
71
  }
90
72
 
@@ -120,25 +102,25 @@ $vertical-step-width: 160px;
120
102
  height: 32px;
121
103
  margin: -24px 0 8px 16px;
122
104
  width: 1px;
123
- background-color: $line-color;
105
+ background-color: var(--v-gray-lighten2);
124
106
 
125
107
  &.stepper__divider--previous {
126
- background-color: $previous-color;
108
+ background-color: var(--v-secondary-base);
127
109
  }
128
110
 
129
111
  &.stepper__divider--previous-to-current {
130
- background: linear-gradient(to bottom, $previous-color, $current-color);
112
+ background: linear-gradient(to bottom, var(--v-secondary-base), var(--v-accent-base));
131
113
  }
132
114
 
133
115
  &.stepper__divider--previous-to-error {
134
- background: linear-gradient(to bottom, $previous-color, $error-color);
116
+ background: linear-gradient(to bottom, var(--v-secondary-base), var(--v-error-base));
135
117
  }
136
118
  }
137
119
  }
138
120
  }
139
121
 
140
122
  i.mdi {
141
- border: 1px solid $line-color;
123
+ border: 1px solid var(--v-gray-lighten2);
142
124
  border-radius: 50%;
143
125
  width: 32px;
144
126
  height: 32px;
@@ -151,6 +133,6 @@ i.mdi {
151
133
 
152
134
  &:before {
153
135
  font-size: 16px;
154
- color: $fore-color;
136
+ color: var(--v-gray-lighten1);
155
137
  }
156
138
  }
package/src/components/Stepper/StepperHeader/StepperHeader.stories.js CHANGED
@@ -11,6 +11,10 @@ export default {
11
11
  `,
12
12
  },
13
13
  },
14
+ design: {
15
+ type: 'figma',
16
+ url: 'https://www.figma.com/file/XDwOALFs1s9uXPFVE7BP9B/%E2%9C%8D---Cr%C3%A9dito?node-id=4029%3A28672',
17
+ },
14
18
  viewMode: 'docs',
15
19
  },
16
20
  };
@@ -32,3 +36,5 @@ export const Primary = () => ({
32
36
  });
33
37
 
34
38
  Primary.storyName = 'Básico';
39
+
40
+ //