@vtex/faststore-plugin-buyer-portal 1.2.1 → 1.3.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 (9) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/package.json +1 -1
  3. package/src/features/budgets/components/BudgetAddForm/BudgetAddForm.tsx +14 -8
  4. package/src/features/budgets/components/BudgetAddForm/budget-add-form.scss +16 -3
  5. package/src/features/budgets/components/CreateBudgetDrawer/create-budget-drawer.scss +10 -10
  6. package/src/features/budgets/components/DeleteBudgetAllocationDrawer/delete-budget-allocations.scss +6 -6
  7. package/src/features/budgets/components/EditBudgetDrawer/edit-budget-drawer.scss +25 -12
  8. package/src/features/budgets/layouts/BudgetsLayout/BudgetsLayout.tsx +2 -10
  9. package/src/features/payment-methods/components/AddPaymentMethodsDrawer/add-payment-methods-drawer.scss +61 -61
package/CHANGELOG.md CHANGED
@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
9
9
 
10
10
  ### Added
11
11
 
12
+ - Responsiviness adjustment to to Buying policies page
13
+
14
+ ### Added
15
+
12
16
  - Responsiviness to Buying policies page
13
17
 
14
18
  ### Added
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtex/faststore-plugin-buyer-portal",
3
- "version": "1.2.1",
3
+ "version": "1.3.1",
4
4
  "description": "A plugin for faststore with buyer portal",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/features/budgets/components/BudgetAddForm/BudgetAddForm.tsx CHANGED
@@ -93,11 +93,14 @@ export const BudgetAddForm = ({
93
93
  disabled={readonly}
94
94
  hasError={touched.startDate && !budget.startDate}
95
95
  min={today}
96
+ data-has-value={budget.startDate ? "true" : "false"}
96
97
  />
97
- <ErrorMessage
98
- show={touched.startDate && !budget.startDate}
99
- message="Start date is required"
100
- />
98
+ <div data-fs-bp-error-wrapper>
99
+ <ErrorMessage
100
+ show={touched.startDate && !budget.startDate}
101
+ message="Start date is required"
102
+ />
103
+ </div>
101
104
  </div>
102
105
 
103
106
  <div>
@@ -112,11 +115,14 @@ export const BudgetAddForm = ({
112
115
  disabled={readonly}
113
116
  hasError={touched.endDate && !endDate?.trim()}
114
117
  min={touched.startDate ? budget.startDate?.split("T")[0] : today}
118
+ data-has-value={endDate ? "true" : "false"}
115
119
  />
116
- <ErrorMessage
117
- show={touched.endDate && !endDate}
118
- message="End date is required"
119
- />
120
+ <div data-fs-bp-error-wrapper>
121
+ <ErrorMessage
122
+ show={touched.endDate && !endDate}
123
+ message="End date is required"
124
+ />
125
+ </div>
120
126
  </div>
121
127
  </div>
122
128
 
package/src/features/budgets/components/BudgetAddForm/budget-add-form.scss CHANGED
@@ -8,13 +8,13 @@
8
8
  [data-fs-bp-create-budget-drawer-section-label] {
9
9
  font-weight: var(--fs-text-weight-semibold);
10
10
  font-size: var(--fs-text-size-2);
11
- margin-bottom: var(--fs-spacing-4);
11
+ margin-bottom: var(--fs-spacing-2);
12
12
  }
13
13
  [data-fs-bp-create-budget-drawer-row-section] {
14
14
  display: flex;
15
15
  flex-direction: column;
16
16
  width: 100%;
17
-
17
+
18
18
  @include media(">=notebook") {
19
19
  align-items: center;
20
20
  flex-direction: row;
@@ -26,9 +26,22 @@
26
26
  & > div {
27
27
  flex: 1;
28
28
  }
29
+
30
+ input[type="date"]:not([data-has-value="true"]):not(:focus) {
31
+ color: transparent;
32
+ }
33
+
34
+ input[type="date"] {
35
+ color: initial;
36
+ }
37
+
38
+ [data-fs-bp-error-wrapper] {
39
+ display: block;
40
+ min-height: 1.5em;
41
+ }
29
42
  }
30
43
  [data-fs-bp-create-budget-renew] {
31
- margin-top: var(--fs-spacing-4);
44
+ margin-top: var(--fs-spacing-2);
32
45
  justify-content: space-between;
33
46
  flex-direction: row;
34
47
 
package/src/features/budgets/components/CreateBudgetDrawer/create-budget-drawer.scss CHANGED
@@ -9,28 +9,28 @@
9
9
  @import "../../../shared/components/ErrorMessage/error-message.scss";
10
10
 
11
11
  [data-fs-bp-basic-drawer-heading] {
12
- padding-left: var(--fs-spacing-5) !important;
12
+ padding-left: var(--fs-spacing-5);
13
13
  }
14
14
 
15
15
  [data-fs-bp-create-budget-drawer-step-success="true"] {
16
- border-bottom: none !important;
16
+ border-bottom: none;
17
17
  }
18
18
 
19
19
  &[data-fs-bp-basic-drawer] {
20
- width: 100% !important;
21
- max-width: none !important;
20
+ width: 100%;
21
+ max-width: none;
22
22
 
23
23
  @include media(">=tablet") {
24
- max-width: 30rem !important;
25
- min-width: 30rem !important;
24
+ max-width: 30rem;
25
+ min-width: 30rem;
26
26
  }
27
-
27
+
28
28
  @include media(">=notebook") {
29
- max-width: 40rem !important;
29
+ max-width: 40rem;
30
30
  }
31
31
 
32
32
  & > [data-fs-bp-basic-drawer-footer] {
33
- justify-content: flex-end !important;
33
+ justify-content: flex-end;
34
34
  gap: var(--fs-spacing-1);
35
35
  }
36
36
 
@@ -52,7 +52,7 @@
52
52
  }
53
53
 
54
54
  [data-fs-bp-create-budget-drawer-step-success="true"] {
55
- border-bottom: none !important;
55
+ border-bottom: none;
56
56
  }
57
57
 
58
58
  [data-fs-bp-basic-drawer-button-variant="confirm"][disabled] {
package/src/features/budgets/components/DeleteBudgetAllocationDrawer/delete-budget-allocations.scss CHANGED
@@ -4,16 +4,16 @@
4
4
  @import "../../../shared/components/InputText/input-text.scss";
5
5
 
6
6
  &[data-fs-bp-basic-drawer] {
7
- width: 100% !important;
8
- max-width: none !important;
7
+ width: 100%;
8
+ max-width: none;
9
9
 
10
10
  @include media(">=tablet") {
11
- max-width: 30rem !important;
12
- min-width: 30rem !important;
11
+ max-width: 30rem;
12
+ min-width: 30rem;
13
13
  }
14
-
14
+
15
15
  @include media(">=notebook") {
16
- max-width: 40rem !important;
16
+ max-width: 40rem;
17
17
  }
18
18
  }
19
19
  }
package/src/features/budgets/components/EditBudgetDrawer/edit-budget-drawer.scss CHANGED
@@ -7,30 +7,43 @@
7
7
  @import "../../../shared/components/ErrorMessage/error-message.scss";
8
8
 
9
9
  &[data-fs-bp-basic-drawer] {
10
- width: 100% !important;
11
- max-width: none !important;
10
+ width: 100%;
11
+ max-width: none;
12
12
 
13
- @include media(">=tablet") {
14
- max-width: 30rem !important;
15
- min-width: 30rem !important;
13
+ @include media(">=tablet", "<notebook") {
14
+ &[data-fs-modal-content] {
15
+ max-width: 30rem;
16
+ min-width: 30rem;
17
+ width: 100%;
18
+ [data-fs-bp-basic-drawer-body] {
19
+ [data-fs-bp-basic-drawer-body-wrapper] {
20
+ padding: var(--fs-spacing-8)
21
+ calc(var(--fs-spacing-8) + var(--fs-spacing-0)) 0
22
+ calc(var(--fs-spacing-4) + var(--fs-spacing-0));
23
+ }
24
+ }
25
+ }
16
26
  }
17
-
27
+
18
28
  @include media(">=notebook") {
19
- max-width: 40rem !important;
29
+ &[data-fs-modal-content] {
30
+ max-width: 40rem;
31
+ width: 100%;
32
+ }
20
33
  }
21
-
22
- & > [data-fs-bp-basic-drawer-footer] {
23
- justify-content: flex-end !important;
34
+
35
+ footer[data-fs-bp-basic-drawer-footer] {
36
+ justify-content: flex-end;
24
37
  gap: var(--fs-spacing-1);
25
38
  }
26
39
  }
27
40
 
28
41
  [data-fs-bp-basic-drawer-heading] {
29
- padding-left: var(--fs-spacing-5) !important;
42
+ padding-left: var(--fs-spacing-5);
30
43
  }
31
44
 
32
45
  [data-fs-bp-create-budget-drawer-step-success="true"] {
33
- border-bottom: none !important;
46
+ border-bottom: none;
34
47
  }
35
48
  &[data-fs-bp-basic-drawer] {
36
49
  [data-fs-bp-create-budget-drawer-header-arrow] {
package/src/features/budgets/layouts/BudgetsLayout/BudgetsLayout.tsx CHANGED
@@ -1,8 +1,6 @@
1
1
  import { useCallback, useState } from "react";
2
2
 
3
- import { IconButton } from "@faststore/ui";
4
-
5
- import { HeaderInside, Icon, InternalSearch } from "../../../shared/components";
3
+ import { HeaderInside, InternalSearch } from "../../../shared/components";
6
4
  import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
7
5
  import { Pagination } from "../../../shared/components/Pagination/Pagination";
8
6
  import {
@@ -142,13 +140,7 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
142
140
  <section data-fs-bp-budgets-layout>
143
141
  <main data-fs-bp-main>
144
142
  <HeaderInside title="Budgets">
145
- <IconButton
146
- onClick={openBudgetDrawer}
147
- aria-label="Add collection"
148
- variant="primary"
149
- size="small"
150
- icon={<Icon name="Add" />}
151
- />
143
+ <HeaderInside.Button onClick={openBudgetDrawer} />
152
144
  </HeaderInside>
153
145
 
154
146
  {budgetContent.length === 0 ? (
package/src/features/payment-methods/components/AddPaymentMethodsDrawer/add-payment-methods-drawer.scss CHANGED
@@ -1,75 +1,75 @@
1
1
  @import "../SearchPaymentMethods/search-payment-methods.scss";
2
2
 
3
- [data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
4
- width: 66%;
5
- min-width: 66%;
3
+ [data-fs-bp-add-payment-methods-drawer] {
4
+ &[data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
5
+ width: 66%;
6
+ min-width: 66%;
6
7
 
7
- @include media(">=notebook") {
8
- width: 60rem;
9
- min-width: 60rem;
10
- max-width: 60rem;
11
- }
12
- }
8
+ @include media(">=notebook") {
9
+ width: 60rem;
10
+ min-width: 60rem;
11
+ max-width: 60rem;
12
+ }
13
+ }
13
14
 
14
- [data-fs-bp-add-payment-methods-drawer] {
15
- [data-fs-payment-methods-drawer] {
16
- @import "../../../shared/components/EmptyState/empty-state.scss";
17
- @import "../../../shared/components/Table/table.scss";
18
- @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
19
- @import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
15
+ [data-fs-payment-methods-drawer] {
16
+ @import "../../../shared/components/EmptyState/empty-state.scss";
17
+ @import "../../../shared/components/Table/table.scss";
18
+ @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
19
+ @import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
20
20
 
21
- [data-fs-bp-add-payment-methods-drawer-description] {
22
- color: #1f1f1f;
23
- margin-bottom: var(--fs-spacing-3);
21
+ [data-fs-bp-add-payment-methods-drawer-description] {
22
+ color: #1f1f1f;
23
+ margin-bottom: var(--fs-spacing-3);
24
24
 
25
- span {
26
- color: #0366dd;
27
- }
28
- }
25
+ span {
26
+ color: #0366dd;
27
+ }
28
+ }
29
29
 
30
- [data-fs-bp-payment-methods-checkbox] {
31
- border-color: #e5e5e5;
32
- margin: 0 auto;
33
- }
30
+ [data-fs-bp-payment-methods-checkbox] {
31
+ border-color: #e5e5e5;
32
+ margin: 0 auto;
33
+ }
34
34
 
35
- [data-fs-bp-payment-methods-checkbox]:checked {
36
- background-color: #0366dd;
37
- }
35
+ [data-fs-bp-payment-methods-checkbox]:checked {
36
+ background-color: #0366dd;
37
+ }
38
38
 
39
- [data-fs-bp-basic-drawer-button-loading-indicator] {
40
- position: relative;
41
- }
42
- }
39
+ [data-fs-bp-basic-drawer-button-loading-indicator] {
40
+ position: relative;
41
+ }
42
+ }
43
43
 
44
- [data-fs-bp-add-payment-methods-drawer-footer] {
45
- display: flex;
46
- justify-content: flex-end;
47
- gap: var(--fs-spacing-3);
48
- }
49
- [data-fs-bp-payment-methods-search-container] {
50
- [data-fs-bp-pagination] {
51
- [data-fs-bp-counter-bottom] {
52
- display: block;
53
- text-align: end;
54
- }
55
- }
56
- }
44
+ [data-fs-bp-add-payment-methods-drawer-footer] {
45
+ display: flex;
46
+ justify-content: flex-end;
47
+ gap: var(--fs-spacing-3);
48
+ }
49
+ [data-fs-bp-payment-methods-search-container] {
50
+ [data-fs-bp-pagination] {
51
+ [data-fs-bp-counter-bottom] {
52
+ display: block;
53
+ text-align: end;
54
+ }
55
+ }
56
+ }
57
57
 
58
- @include media("<=tablet") {
59
- [data-fs-buyer-portal-internal-search] {
60
- width: 18rem !important;
61
- }
62
- }
58
+ @include media("<=tablet") {
59
+ [data-fs-buyer-portal-internal-search] {
60
+ width: 18rem !important;
61
+ }
62
+ }
63
63
 
64
- @include media("<=phonemid") {
65
- [data-fs-buyer-portal-internal-search] {
66
- width: 14rem !important;
67
- }
68
- }
64
+ @include media("<=phonemid") {
65
+ [data-fs-buyer-portal-internal-search] {
66
+ width: 14rem !important;
67
+ }
68
+ }
69
69
 
70
- @include media("<=phone") {
71
- [data-fs-buyer-portal-internal-search] {
72
- width: 10rem !important;
73
- }
74
- }
70
+ @include media("<=phone") {
71
+ [data-fs-buyer-portal-internal-search] {
72
+ width: 10rem !important;
73
+ }
74
+ }
75
75
  }