polaris_view_components 0.2.0 → 0.3.3
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.
- checksums.yaml +4 -4
- data/README.md +21 -3
- data/app/{javascript/polaris → assets/javascripts/polaris_view_components}/index.js +0 -0
- data/app/{javascript/polaris → assets/javascripts/polaris_view_components}/resource_item_controller.js +1 -1
- data/app/{javascript/polaris → assets/javascripts/polaris_view_components}/select_controller.js +1 -1
- data/app/{javascript/polaris → assets/javascripts/polaris_view_components}/text_field_controller.js +1 -1
- data/app/assets/javascripts/{polaris.js → polaris_view_components.js} +20 -39
- data/app/assets/stylesheets/polaris_view_components/shopify_navigation.css +136 -0
- data/app/assets/stylesheets/polaris_view_components.css +2029 -21
- data/app/assets/stylesheets/polaris_view_components.postcss.css +2 -0
- data/app/components/polaris/dropzone/controller.js +1 -1
- data/app/components/polaris/stack_component.rb +1 -1
- data/lib/generators/polaris_view_components/install_generator.rb +1 -1
- data/lib/generators/polaris_view_components/templates/stimulus_index.js +5 -6
- data/lib/polaris/view_components/engine.rb +3 -1
- data/lib/polaris/view_components/version.rb +1 -1
- metadata +11 -9
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: '03953b29a4439bfe7f6a8421b5db5a6627b50eea36bc62a4e07bf5aba1495811'
|
|
4
|
+
data.tar.gz: 11e7d05ca4462d30c986e5f9e5134c82a6d7ca99ab9a1dba8626507b1a62173e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 61da6868d6d615a55c6edb7e8d3d55da80292bb9f91efb8a8dfb73287b6d1f6e67be05df1e0a06a3ea7656bf7120b1acca56a42ef22696f84ac463f721a90528
|
|
7
|
+
data.tar.gz: ec345be1a960e3b9cbab5172dbcf9af8bb4baf533574833ff186fbb4a060e89ebe5e652081db51f568b67ebf8fed219c72d99c7984a45a201f6231604f6a8456
|
data/README.md
CHANGED
|
@@ -36,7 +36,6 @@ rails generate polaris_view_components:install
|
|
|
36
36
|
Setup Polaris styles in your layouts `<head>` tag:
|
|
37
37
|
|
|
38
38
|
```erb
|
|
39
|
-
<link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@6.6.0/dist/styles.css" />
|
|
40
39
|
<%= stylesheet_link_tag 'polaris_view_components' %>
|
|
41
40
|
```
|
|
42
41
|
|
|
@@ -46,6 +45,24 @@ Define Polaris style on your `<body>` tag:
|
|
|
46
45
|
<body style="<%= polaris_body_styles %>">
|
|
47
46
|
```
|
|
48
47
|
|
|
48
|
+
### Importmaps
|
|
49
|
+
|
|
50
|
+
Add to `config/importmap.rb`:
|
|
51
|
+
|
|
52
|
+
```rb
|
|
53
|
+
pin "polaris-view-components", to: "polaris_view_components.js"
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Add to `app/javascript/controllers/index.js`:
|
|
57
|
+
```javascript
|
|
58
|
+
// ...
|
|
59
|
+
|
|
60
|
+
import { registerPolarisControllers } from "polaris-view-components"
|
|
61
|
+
registerPolarisControllers(Stimulus)
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### NPM
|
|
65
|
+
|
|
49
66
|
Install NPM package:
|
|
50
67
|
```bash
|
|
51
68
|
yarn add polaris-view-components
|
|
@@ -53,9 +70,10 @@ yarn add polaris-view-components
|
|
|
53
70
|
|
|
54
71
|
Add to `app/javascript/controllers/index.js`:
|
|
55
72
|
```javascript
|
|
56
|
-
//
|
|
73
|
+
// ...
|
|
74
|
+
|
|
57
75
|
import { registerPolarisControllers } from "polaris-view-components"
|
|
58
|
-
registerPolarisControllers(
|
|
76
|
+
registerPolarisControllers(Stimulus)
|
|
59
77
|
```
|
|
60
78
|
|
|
61
79
|
## Dependencies
|
|
File without changes
|
|
@@ -1,20 +1,7 @@
|
|
|
1
|
-
import { Controller } from "stimulus";
|
|
1
|
+
import { Controller } from "@hotwired/stimulus";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(obj, key, {
|
|
6
|
-
value: value,
|
|
7
|
-
enumerable: true,
|
|
8
|
-
configurable: true,
|
|
9
|
-
writable: true
|
|
10
|
-
});
|
|
11
|
-
} else {
|
|
12
|
-
obj[key] = value;
|
|
13
|
-
}
|
|
14
|
-
return obj;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
class _class$2 extends Controller {
|
|
3
|
+
class ResourceItem extends Controller {
|
|
4
|
+
static targets=[ "link" ];
|
|
18
5
|
open(event) {
|
|
19
6
|
if (this.hasLinkTarget && this.targetNotClickable(event.target)) {
|
|
20
7
|
this.linkTarget.click();
|
|
@@ -25,9 +12,8 @@ class _class$2 extends Controller {
|
|
|
25
12
|
}
|
|
26
13
|
}
|
|
27
14
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
class _class$1 extends Controller {
|
|
15
|
+
class Select extends Controller {
|
|
16
|
+
static targets=[ "selectedOption" ];
|
|
31
17
|
update(event) {
|
|
32
18
|
const select = event.currentTarget;
|
|
33
19
|
const option = select.options[select.selectedIndex];
|
|
@@ -35,9 +21,17 @@ class _class$1 extends Controller {
|
|
|
35
21
|
}
|
|
36
22
|
}
|
|
37
23
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
24
|
+
class TextField extends Controller {
|
|
25
|
+
static targets=[ "input", "clearButton", "characterCount" ];
|
|
26
|
+
static classes=[ "hasValue", "clearButtonHidden" ];
|
|
27
|
+
static values={
|
|
28
|
+
value: String,
|
|
29
|
+
labelTemplate: String,
|
|
30
|
+
textTemplate: String,
|
|
31
|
+
step: Number,
|
|
32
|
+
min: Number,
|
|
33
|
+
max: Number
|
|
34
|
+
};
|
|
41
35
|
connect() {
|
|
42
36
|
this.syncValue();
|
|
43
37
|
this.stepValue = this.inputTarget.getAttribute("step");
|
|
@@ -104,23 +98,10 @@ class _class extends Controller {
|
|
|
104
98
|
}
|
|
105
99
|
}
|
|
106
100
|
|
|
107
|
-
_defineProperty(_class, "targets", [ "input", "clearButton", "characterCount" ]);
|
|
108
|
-
|
|
109
|
-
_defineProperty(_class, "classes", [ "hasValue", "clearButtonHidden" ]);
|
|
110
|
-
|
|
111
|
-
_defineProperty(_class, "values", {
|
|
112
|
-
value: String,
|
|
113
|
-
labelTemplate: String,
|
|
114
|
-
textTemplate: String,
|
|
115
|
-
step: Number,
|
|
116
|
-
min: Number,
|
|
117
|
-
max: Number
|
|
118
|
-
});
|
|
119
|
-
|
|
120
101
|
function registerPolarisControllers(application) {
|
|
121
|
-
application.register("polaris-resource-item",
|
|
122
|
-
application.register("polaris-select",
|
|
123
|
-
application.register("polaris-text-field",
|
|
102
|
+
application.register("polaris-resource-item", ResourceItem);
|
|
103
|
+
application.register("polaris-select", Select);
|
|
104
|
+
application.register("polaris-text-field", TextField);
|
|
124
105
|
}
|
|
125
106
|
|
|
126
|
-
export {
|
|
107
|
+
export { ResourceItem, Select, TextField, registerPolarisControllers };
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
.shp-Navigation {
|
|
2
|
+
margin: 0 auto;
|
|
3
|
+
padding: 0 2rem;
|
|
4
|
+
max-width: 99.8rem;
|
|
5
|
+
max-width: none;
|
|
6
|
+
border-bottom: .1rem solid var(--p-border-subdued)
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@media (max-width: 48.0625em) and (min-width: 30.625em),(min-width: 45.625em) {
|
|
10
|
+
.shp-Navigation {
|
|
11
|
+
padding: 0 2rem
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@media (min-width: 30.625em) {
|
|
16
|
+
.shp-Navigation {
|
|
17
|
+
padding: 0 2rem
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@media (max-width: 48.0625em) and (min-width: 46.5em),(min-width: 61.5em) {
|
|
22
|
+
.shp-Navigation {
|
|
23
|
+
padding: 0 3.2rem
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@media (min-width: 46.5em) {
|
|
28
|
+
.shp-Navigation {
|
|
29
|
+
padding: 0 3.2rem
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@media (max-width: 30.5625em) {
|
|
34
|
+
.shp-Navigation {
|
|
35
|
+
padding: 0 1.6rem
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.shp-Navigation_Items {
|
|
40
|
+
display: flex;
|
|
41
|
+
margin: 0;
|
|
42
|
+
padding: 0 .2rem;
|
|
43
|
+
list-style: none
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.shp-Navigation_Item {
|
|
47
|
+
display: flex;
|
|
48
|
+
margin: 0;
|
|
49
|
+
padding: 0
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.shp-Navigation_Link {
|
|
53
|
+
color: inherit;
|
|
54
|
+
-webkit-appearance: none;
|
|
55
|
+
-moz-appearance: none;
|
|
56
|
+
appearance: none;
|
|
57
|
+
margin: 0;
|
|
58
|
+
padding: 0;
|
|
59
|
+
background: none;
|
|
60
|
+
border: none;
|
|
61
|
+
font-size: inherit;
|
|
62
|
+
line-height: inherit;
|
|
63
|
+
font-size: 1.5rem;
|
|
64
|
+
font-weight: 400;
|
|
65
|
+
line-height: 2rem;
|
|
66
|
+
text-transform: none;
|
|
67
|
+
letter-spacing: normal;
|
|
68
|
+
color: var(--p-text-subdued);
|
|
69
|
+
position: relative;
|
|
70
|
+
z-index: 400;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
width: 100%;
|
|
73
|
+
min-width: 100%;
|
|
74
|
+
margin-top: 1px;
|
|
75
|
+
margin-bottom: -1px;
|
|
76
|
+
padding: 0 1.6rem;
|
|
77
|
+
outline: none;
|
|
78
|
+
text-align: center;
|
|
79
|
+
white-space: nowrap;
|
|
80
|
+
text-decoration: none;
|
|
81
|
+
cursor: pointer
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.shp-Navigation_Link:visited {
|
|
85
|
+
color: inherit
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.shp-Navigation_Link:focus {
|
|
89
|
+
outline: none
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@media (min-width: 40em) {
|
|
93
|
+
.shp-Navigation_Link {
|
|
94
|
+
font-size: 1.4rem
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.shp-Navigation_Link:hover {
|
|
99
|
+
text-decoration: none
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.shp-Navigation_Link:hover .shp-Navigation_LinkText {
|
|
103
|
+
font-weight: 400;
|
|
104
|
+
color: var(--p-text);
|
|
105
|
+
text-decoration: none;
|
|
106
|
+
border-bottom: .3rem solid var(--p-action-primary)
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.shp-Navigation_Link:focus {
|
|
110
|
+
box-shadow: inset 0 0 2px 0 rgba(92, 106, 196, .8), 0 0 2px 0 rgba(92, 106, 196, .8)
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.shp-Navigation_Link:focus .shp-Navigation_LinkText {
|
|
114
|
+
font-weight: 400;
|
|
115
|
+
color: var(--p-text)
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.shp-Navigation_LinkText {
|
|
119
|
+
padding: 1.6rem 0 1.3rem 0;
|
|
120
|
+
border-bottom: .3rem solid transparent
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.shp-Navigation_LinkText {
|
|
124
|
+
display: block;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
[aria-selected='true'],
|
|
128
|
+
.shp-Navigation_Link:focus .shp-Navigation_LinkText {
|
|
129
|
+
font-weight: 400;
|
|
130
|
+
color: var(--p-text)
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
[aria-selected='true'] .shp-Navigation_LinkText {
|
|
134
|
+
color: var(--p-action-primary);
|
|
135
|
+
border-bottom: .3rem solid var(--p-action-primary)
|
|
136
|
+
}
|