@searchstax-inc/searchstudio-ux-js 0.0.4 → 0.0.6
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/README.md
CHANGED
|
@@ -153,4 +153,16 @@ example of result widget initialization with various options
|
|
|
153
153
|
```
|
|
154
154
|
|
|
155
155
|
## Template overrides
|
|
156
|
-
Templates use mustache templating. For more info see https://github.com/janl/mustache.js
|
|
156
|
+
Templates use mustache templating. For more info see https://github.com/janl/mustache.js
|
|
157
|
+
|
|
158
|
+
## STYLING
|
|
159
|
+
|
|
160
|
+
scss styles can be imported from searchstudio-ux-js
|
|
161
|
+
```
|
|
162
|
+
@import './../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/scss/mainTheme.scss';
|
|
163
|
+
```
|
|
164
|
+
css can be taken from
|
|
165
|
+
|
|
166
|
+
```
|
|
167
|
+
./../node_modules/@searchstax-inc/searchstudio-ux-js/dist/styles/mainTheme.css
|
|
168
|
+
```
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
@import './../../colors.scss';
|
|
2
|
+
$inputHeight: 30px;
|
|
3
|
+
$suggestPadding: 20px;
|
|
4
|
+
.searchstax-search-input-container {
|
|
5
|
+
position: relative;
|
|
6
|
+
border: 1px solid $secondary;
|
|
7
|
+
padding: 15px 20px 10px 20px;
|
|
8
|
+
border-radius: 80px;
|
|
9
|
+
height: 40px;
|
|
10
|
+
|
|
11
|
+
.searchstax-search-icon,
|
|
12
|
+
.searchstax-search-close,
|
|
13
|
+
.searchstax-spinner-icon {
|
|
14
|
+
margin-top: 3px;
|
|
15
|
+
&:focus {
|
|
16
|
+
outline: none !important;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
.searchstax-search-input {
|
|
20
|
+
width: calc(100% - 8px);
|
|
21
|
+
height: $inputHeight;
|
|
22
|
+
font-size: 18px;
|
|
23
|
+
z-index: 2;
|
|
24
|
+
border: none;
|
|
25
|
+
|
|
26
|
+
&:focus {
|
|
27
|
+
box-shadow: none;
|
|
28
|
+
outline: none;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.searchstax-search-input-wrapper {
|
|
33
|
+
display: flex;
|
|
34
|
+
.searchstax-search-input {
|
|
35
|
+
flex: 1;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.searchstax-autosuggest-container {
|
|
40
|
+
position: absolute;
|
|
41
|
+
z-index: 1;
|
|
42
|
+
left: 0;
|
|
43
|
+
margin-top: $inputHeight + 20px;
|
|
44
|
+
width: 100%;
|
|
45
|
+
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.14902);
|
|
46
|
+
background-color: $white;
|
|
47
|
+
|
|
48
|
+
&.hidden {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.searchstax-autosuggest-item {
|
|
53
|
+
width: 100%;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
|
|
56
|
+
&.active {
|
|
57
|
+
background-color: $actionColor;
|
|
58
|
+
color: white;
|
|
59
|
+
|
|
60
|
+
.searchstax-autosuggest-item-term-container {
|
|
61
|
+
color: white;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
.searchstax-autosuggest-item-term-container {
|
|
65
|
+
width: calc(100% - #{$suggestPadding * 2});
|
|
66
|
+
height: 40px;
|
|
67
|
+
font-size: 14px;
|
|
68
|
+
line-height: 40px;
|
|
69
|
+
padding-left: $suggestPadding;
|
|
70
|
+
padding-right: $suggestPadding;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.searchstax-search-icon,
|
|
77
|
+
.searchstax-search-close {
|
|
78
|
+
max-width: 28px;
|
|
79
|
+
height: 28px;
|
|
80
|
+
width: 28px;
|
|
81
|
+
display: block;
|
|
82
|
+
background: none;
|
|
83
|
+
background-size: 100%;
|
|
84
|
+
background-position: center center;
|
|
85
|
+
background-repeat: no-repeat;
|
|
86
|
+
border: none;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.searchstax-search-icon {
|
|
90
|
+
background-image: url('data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNzJweCIgaGVpZ2h0PSI3MnB4IiB2aWV3Qm94PSIwIDAgNzIgNzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDcyIDcyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGQzY3MzAiIGQ9Ik01NC4wMzYsNDguMDM4TDcxLjQxOSw2NS40M2wtNS41NTEsNC45NjNMNDkuNTEyLDU0LjAzM2MtNS4yMiw0LjIzLTExLjg3MSw2Ljc1OS0xOS4xMSw2Ljc1OQ0KCUMxMy42MTMsNjAuNzkyLDAsNDcuMTgxLDAsMzAuMzk3QzAsMTMuNjA5LDEzLjYxMywwLDMwLjQwMSwwYzE2Ljc4NiwwLDMwLjM5NiwxMy42MDksMzAuMzk2LDMwLjM5Nw0KCWMwLDcuMjQyLTIuNTM0LDEzLjg4OC02Ljc2MiwxOS4xMTFWNDguMDM4eiBNMzAuNDE0LDUyLjcxYzEyLjMzOSwwLDIyLjM0Mi0xMCwyMi4zNDItMjIuMzQxYzAtMTIuMzM5LTEwLjAwMy0yMi4zMzktMjIuMzQyLTIyLjMzOQ0KCWMtMTIuMzQxLDAtMjIuMzQxLDEwLTIyLjM0MSwyMi4zMzlDOC4wNzMsNDIuNzEsMTguMDczLDUyLjcxLDMwLjQxNCw1Mi43MSIvPg0KPC9zdmc+DQo=');
|
|
91
|
+
}
|
|
92
|
+
.searchstax-search-close {
|
|
93
|
+
background-image: url('data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0OCA0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkY3OTU5O30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTI2LjksMjQuMWw2LjQsNi40YzAuOCwwLjgsMC44LDIsMCwyLjhjLTAuOCwwLjgtMiwwLjgtMi44LDBMMjQsMjYuOWwtNi40LDYuNGMtMC44LDAuOC0yLDAuOC0yLjgsMAoJYy0wLjgtMC44LTAuOC0yLDAtMi44bDYuNC02LjRsLTYuNC02LjRjLTAuOC0wLjgtMC44LTIsMC0yLjhjMC44LTAuOCwyLTAuOCwyLjgsMGw2LjQsNi40bDYuNC02LjRjMC44LTAuOCwyLTAuOCwyLjgsMAoJYzAuOCwwLjgsMC44LDIsMCwyLjhMMjYuOSwyNC4xeiBNMjQsNDguMWMtMTMuMywwLTI0LTEwLjctMjQtMjRzMTAuNy0yNCwyNC0yNHMyNCwxMC43LDI0LDI0UzM3LjMsNDguMSwyNCw0OC4xeiBNMjQsNDMuNAoJYzEwLjcsMCwxOS40LTguNywxOS40LTE5LjRTMzQuNyw0LjcsMjQsNC43UzQuNiwxMy4zLDQuNiwyNC4xUzEzLjMsNDMuNCwyNCw0My40eiIvPgo8L3N2Zz4K');
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@keyframes spinner-border {
|
|
97
|
+
to {
|
|
98
|
+
transform: rotate(360deg);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.searchstax-spinner-icon {
|
|
103
|
+
display: inline-block;
|
|
104
|
+
width: 28px;
|
|
105
|
+
height: 28px;
|
|
106
|
+
vertical-align: text-bottom;
|
|
107
|
+
border: 3px solid $actionColor;
|
|
108
|
+
border-right-color: $actionColor;
|
|
109
|
+
border-right-color: transparent;
|
|
110
|
+
border-radius: 50%;
|
|
111
|
+
-webkit-animation: spinner-border 0.75s linear infinite;
|
|
112
|
+
animation: spinner-border 0.75s linear infinite;
|
|
113
|
+
background: none;
|
|
114
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
@import './../../colors.scss';
|
|
2
|
+
|
|
3
|
+
.searchstax-no-results {
|
|
4
|
+
.searchstax-suggestion-term {
|
|
5
|
+
color: $actionColor;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.searchstax-search-result {
|
|
10
|
+
position: relative;
|
|
11
|
+
position: relative;
|
|
12
|
+
padding: 39px 12px 28px 12px;
|
|
13
|
+
margin-bottom: 20px;
|
|
14
|
+
color: #33475a;
|
|
15
|
+
border: none;
|
|
16
|
+
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.14902);
|
|
17
|
+
|
|
18
|
+
.searchstax-result-item-link {
|
|
19
|
+
position: absolute;
|
|
20
|
+
width: 100%;
|
|
21
|
+
height: 100%;
|
|
22
|
+
margin-top: -39px;
|
|
23
|
+
margin-left: -12px;
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.searchstax-search-result-image-container {
|
|
28
|
+
height: 75px;
|
|
29
|
+
width: 75px;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
.searchstax-result-image {
|
|
32
|
+
width: 100%;
|
|
33
|
+
height: auto;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.searchstax-search-result-ribbon {
|
|
38
|
+
position: absolute;
|
|
39
|
+
left: 0;
|
|
40
|
+
top: 0;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
text-align: left;
|
|
44
|
+
padding: 0 10px;
|
|
45
|
+
min-width: 135px;
|
|
46
|
+
min-height: 24px;
|
|
47
|
+
color: $secondary;
|
|
48
|
+
font-family: 'Roboto';
|
|
49
|
+
font-weight: 500;
|
|
50
|
+
text-transform: uppercase;
|
|
51
|
+
font-size: 12px;
|
|
52
|
+
text-transform: uppercase;
|
|
53
|
+
border-radius: 3px 0 0 0;
|
|
54
|
+
background-color: $primary-bg;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.searchstax-search-result-title-container {
|
|
58
|
+
.searchstax-search-result-title {
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
text-overflow: ellipsis;
|
|
61
|
+
display: -webkit-box;
|
|
62
|
+
-webkit-line-clamp: 2;
|
|
63
|
+
-webkit-box-orient: vertical;
|
|
64
|
+
padding: 0;
|
|
65
|
+
color: $primary-bg;
|
|
66
|
+
font-size: 18px;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.searchstax-search-result-common {
|
|
71
|
+
width: 100%;
|
|
72
|
+
font-family: Roboto;
|
|
73
|
+
font-weight: 300;
|
|
74
|
+
font-size: 14px;
|
|
75
|
+
line-height: 21px;
|
|
76
|
+
margin-bottom: 5px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.searchstax-search-result-description {
|
|
80
|
+
overflow: hidden;
|
|
81
|
+
text-overflow: ellipsis;
|
|
82
|
+
display: -webkit-box;
|
|
83
|
+
-webkit-line-clamp: 3;
|
|
84
|
+
-webkit-box-orient: vertical;
|
|
85
|
+
}
|
|
86
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@searchstax-inc/searchstudio-ux-js",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.6",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
7
7
|
],
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
},
|
|
17
17
|
"scripts": {
|
|
18
18
|
"dev": "vite --host",
|
|
19
|
-
"build": "tsc && vite build && dts-bundle-generator --config ./dts-bundle-generator.config.ts && npm run sass",
|
|
19
|
+
"build": "tsc && vite build && dts-bundle-generator --config ./dts-bundle-generator.config.ts && npm run sass && npm run makeDirectories && npm run compile:sass",
|
|
20
20
|
"test": "vitest",
|
|
21
21
|
"sass": "node-sass ./src/style.scss ./dist/styles/mainTheme.css",
|
|
22
22
|
"test:coverage": "vitest --coverage",
|
|
@@ -26,7 +26,9 @@
|
|
|
26
26
|
"format:styles": "stylelint ./**/*.{css,scss} --fix",
|
|
27
27
|
"format": "npm run format:scripts && npm run format:styles",
|
|
28
28
|
"prepare": "husky install && husky set .husky/pre-commit 'npx lint-staged' && git add .husky/pre-commit",
|
|
29
|
-
"uninstall-husky": "npm uninstall husky --no-save && git config --unset core.hooksPath && npx rimraf .husky"
|
|
29
|
+
"uninstall-husky": "npm uninstall husky --no-save && git config --unset core.hooksPath && npx rimraf .husky",
|
|
30
|
+
"makeDirectories": "mkdir ./dist/styles/scss && mkdir ./dist/styles/scss/widgets && mkdir ./dist/styles/scss/widgets/searchResults && mkdir ./dist/styles/scss/widgets/searchInput",
|
|
31
|
+
"compile:sass": "cp ./src/style.scss ./dist/styles/scss/mainTheme.scss && cp ./src/colors.scss ./dist/styles/scss/colors.scss && cp ./src/widgets/searchInput/style.scss ./dist/styles/scss/widgets/searchInput/style.scss && cp ./src/widgets/searchResults/style.scss ./dist/styles/scss/widgets/searchResults/style.scss"
|
|
30
32
|
},
|
|
31
33
|
"devDependencies": {
|
|
32
34
|
"@types/jsdom": "^20.0.1",
|