sales-frontend-components 0.0.66 → 0.0.68

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.
@@ -0,0 +1,61 @@
1
+ @use 'sales-frontend-design-system/design-system-context' as *;
2
+
3
+ .favorite-jobs-section {
4
+ padding: margin(modal);
5
+
6
+ .popular-jobs {
7
+ margin-top: margin(title-xlarge);
8
+
9
+ .job-radio-root {
10
+ gap: margin(divider-xsmall);
11
+ }
12
+
13
+ .accordion-header-item {
14
+ gap: margin(divider-xsmall);
15
+ }
16
+
17
+ p {
18
+ @include apply-typography(title5);
19
+
20
+ margin-bottom: margin(divider-small);
21
+ color: colors(text-body);
22
+ }
23
+
24
+ .result-title {
25
+ margin-top: padding(xxlarge);
26
+ margin-bottom: padding(medium);
27
+ color: colors(text-body);
28
+
29
+ @include apply-typography(title5);
30
+ }
31
+ }
32
+ }
33
+
34
+ .select-jobs-section {
35
+ padding: margin(modal);
36
+
37
+ .category-section {
38
+ display: flex;
39
+ flex-direction: column;
40
+ gap: margin(inputfield-vertical);
41
+
42
+ .job-radio-root {
43
+ gap: margin(divider-xsmall);
44
+ }
45
+
46
+ p {
47
+ @include apply-typography(title5);
48
+
49
+ margin-bottom: margin(divider-small);
50
+ color: colors(text-body);
51
+ }
52
+
53
+ .result-title {
54
+ margin-top: padding(xxlarge);
55
+ // margin-bottom: padding(medium);
56
+ color: colors(text-body);
57
+
58
+ @include apply-typography(title5);
59
+ }
60
+ }
61
+ }
@@ -0,0 +1,116 @@
1
+ @use 'sales-frontend-design-system/design-system-context' as *;
2
+
3
+ .job-vehicle-search-modal {
4
+ display: flex;
5
+ flex-direction: row;
6
+ height: 697px;
7
+
8
+ .left-panel {
9
+ display: flex;
10
+ flex-shrink: 0;
11
+ flex-basis: 344px;
12
+ flex-direction: column;
13
+ align-self: stretch;
14
+ padding: margin(modal);
15
+ border-right: 1px solid colors(surface-neutral_3);
16
+
17
+ .card-selected {
18
+ border: 1px solid colors(border-primary_1);
19
+ }
20
+
21
+ .card-section {
22
+ display: flex;
23
+ flex: 1;
24
+ flex-direction: column;
25
+ gap: 10px;
26
+ height: 100%;
27
+ }
28
+
29
+ .card-menu {
30
+ display: flex;
31
+ flex-direction: column;
32
+ gap: margin(title-large);
33
+ padding: margin(card-around-large);
34
+ border-radius: radius-basic(large);
35
+ box-shadow: 0 3px 16px 0 rgb(0 0 0 / 9%);
36
+
37
+ .card-icon {
38
+ margin-right: margin(xsmall);
39
+ }
40
+
41
+ .card-title {
42
+ display: flex;
43
+ flex-direction: row;
44
+
45
+ .card-text {
46
+ flex: 1;
47
+ }
48
+ }
49
+ }
50
+
51
+ .grade-section {
52
+ display: flex;
53
+ flex-direction: column;
54
+ gap: margin(title-large);
55
+ align-items: flex-start;
56
+ justify-content: center;
57
+ width: 304px;
58
+ padding: margin(card-around-large) margin(card-around-large) margin(card-around-small);
59
+ border: 1px solid colors(border-neutral_3);
60
+ border-radius: radius-basic(large);
61
+
62
+ .icon-title {
63
+ display: flex;
64
+ gap: padding(xsmall);
65
+ align-items: center;
66
+ align-self: stretch;
67
+ padding: padding(zero);
68
+ }
69
+
70
+ .grade-list {
71
+ display: flex;
72
+ flex-direction: column;
73
+ gap: margin(textarea-xsmall);
74
+ align-items: flex-start;
75
+ align-self: stretch;
76
+
77
+ .grade {
78
+ @include apply-typography(body2);
79
+
80
+ display: flex;
81
+ align-items: flex-start;
82
+ align-self: stretch;
83
+ justify-content: space-between;
84
+ padding: padding(zero);
85
+ color: colors(text-body_2);
86
+ }
87
+ }
88
+ }
89
+ }
90
+
91
+ .right-panel {
92
+ display: flex;
93
+ flex: 1;
94
+ flex-direction: column;
95
+ gap: 0;
96
+
97
+ .favorite-jobs-section {
98
+ padding: margin(modal);
99
+
100
+ .popular-jobs {
101
+ margin-top: margin(title-xlarge);
102
+
103
+ .job-radio-root {
104
+ gap: margin(divider-xsmall);
105
+ }
106
+
107
+ p {
108
+ @include apply-typography(title5);
109
+
110
+ margin-bottom: margin(divider-small);
111
+ color: colors(text-body);
112
+ }
113
+ }
114
+ }
115
+ }
116
+ }
@@ -0,0 +1,20 @@
1
+ @use 'sales-frontend-design-system/design-system-context' as *;
2
+
3
+ .vehicle-search-section {
4
+ padding: margin(modal);
5
+
6
+ .vehicle-radio-root {
7
+ gap: margin(divider-xsmall);
8
+ }
9
+
10
+ p {
11
+ @include apply-typography(title5);
12
+
13
+ margin-bottom: margin(divider-small);
14
+ color: colors(text-body);
15
+ }
16
+
17
+ label {
18
+ padding: padding(xxxsmall) 0;
19
+ }
20
+ }
@@ -17,14 +17,13 @@
17
17
  justify-content: center;
18
18
  width: 24px;
19
19
  height: 24px;
20
-
21
- @include apply-typography(body3);
22
-
23
20
  color: colors(text-body_0);
24
21
  background-color: colors(text-neutral_2);
25
22
  border-radius: radius-basic(full);
26
23
 
27
- .completed {
24
+ @include apply-typography(body3);
25
+
26
+ .completed-icon {
28
27
  width: 20px;
29
28
  height: 20px;
30
29
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.7071 6.29289C16.0976 6.68342 16.0976 7.31658 15.7071 7.70711L9.70711 13.7071C9.31658 14.0976 8.68342 14.0976 8.29289 13.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L9 11.5858L14.2929 6.29289C14.6834 5.90237 15.3166 5.90237 15.7071 6.29289Z' fill='white'/%3E%3C/svg%3E");
@@ -53,6 +52,7 @@
53
52
 
54
53
  li {
55
54
  padding: padding(medium) padding(large);
55
+ cursor: pointer;
56
56
  border: 2px solid colors(border-neutral_3);
57
57
  border-radius: radius-basic(medium);
58
58
  }
@@ -63,3 +63,19 @@
63
63
  }
64
64
  }
65
65
  }
66
+
67
+ .stepper-layout.loading {
68
+ .step-labels {
69
+ width: 100%;
70
+ color: colors(text-body_0);
71
+
72
+ li.active {
73
+ color: colors(text-body_0);
74
+ border: 2px solid colors(border-neutral_3);
75
+ }
76
+ }
77
+
78
+ .circle.active {
79
+ background-color: colors(text-neutral_2);
80
+ }
81
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sales-frontend-components",
3
- "version": "0.0.66",
3
+ "version": "0.0.68",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",
@@ -41,12 +41,12 @@
41
41
  "sass": "^1.86.3",
42
42
  "typescript": "5.8.2",
43
43
  "zod": "^3.25.67",
44
- "eslint-config-sales-frontend-eslint-config-v8": "^0.0.6",
45
- "sales-frontend-api": "0.0.34",
46
- "sales-frontend-typescript-config": "0.0.2",
47
- "sales-frontend-hooks": "0.0.37",
48
44
  "sales-frontend-design-system": "0.0.57",
49
- "sales-frontend-stores": "0.0.2"
45
+ "sales-frontend-hooks": "0.0.38",
46
+ "sales-frontend-stores": "0.0.2",
47
+ "sales-frontend-typescript-config": "0.0.2",
48
+ "eslint-config-sales-frontend-eslint-config-v8": "^0.0.6",
49
+ "sales-frontend-api": "0.0.35"
50
50
  },
51
51
  "peerDependencies": {
52
52
  "@tanstack/react-query": ">=5.0.0",
@@ -54,11 +54,11 @@
54
54
  "react-dom": ">=18.0.0",
55
55
  "react-hook-form": "^7.58.1",
56
56
  "sales-frontend-design-system": "0.0.57",
57
- "sales-frontend-utils": "0.0.9",
57
+ "sales-frontend-api": "0.0.35",
58
58
  "sales-frontend-stores": "0.0.2",
59
- "sales-frontend-hooks": "0.0.37",
60
- "sales-frontend-api": "0.0.34",
61
- "sales-frontend-assets": "0.0.12"
59
+ "sales-frontend-assets": "0.0.12",
60
+ "sales-frontend-hooks": "0.0.38",
61
+ "sales-frontend-utils": "0.0.9"
62
62
  },
63
63
  "dependencies": {
64
64
  "classnames": "^2.5.1",