polaris_view_components 0.2.0 → 0.3.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (17) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +21 -3
  3. data/app/{javascript/polaris → assets/javascripts/polaris_view_components}/index.js +0 -0
  4. data/app/{javascript/polaris → assets/javascripts/polaris_view_components}/resource_item_controller.js +1 -1
  5. data/app/{javascript/polaris → assets/javascripts/polaris_view_components}/select_controller.js +1 -1
  6. data/app/{javascript/polaris → assets/javascripts/polaris_view_components}/text_field_controller.js +1 -1
  7. data/app/assets/javascripts/{polaris.js → polaris_view_components.js} +20 -39
  8. data/app/assets/stylesheets/polaris_view_components/shopify_navigation.css +136 -0
  9. data/app/assets/stylesheets/polaris_view_components.css +2029 -21
  10. data/app/assets/stylesheets/polaris_view_components.postcss.css +2 -0
  11. data/app/components/polaris/dropzone/controller.js +1 -1
  12. data/app/components/polaris/stack_component.rb +1 -1
  13. data/lib/generators/polaris_view_components/install_generator.rb +1 -1
  14. data/lib/generators/polaris_view_components/templates/stimulus_index.js +5 -6
  15. data/lib/polaris/view_components/engine.rb +3 -1
  16. data/lib/polaris/view_components/version.rb +1 -1
  17. metadata +11 -9
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 75b9c5e7b5a31ce1a5a549b0315fdbefc308206fd89085a19c8feac044f2884f
4
- data.tar.gz: c858f559b97a7dfe14c6c303d3f7b000ca428ddc12ee603511f03ebe4ad4ffcc
3
+ metadata.gz: '03953b29a4439bfe7f6a8421b5db5a6627b50eea36bc62a4e07bf5aba1495811'
4
+ data.tar.gz: 11e7d05ca4462d30c986e5f9e5134c82a6d7ca99ab9a1dba8626507b1a62173e
5
5
  SHA512:
6
- metadata.gz: 0577b317bffc512104e90a023eab9d2a674b9f6ce852eb2e8324a77e1723f97029d30545053e29f72ad7da1da14ebb5c2c1f3eee5afa2a50f4ed7bca7afce4b7
7
- data.tar.gz: 1cfb3676d22713e1e6f5d47a4a521683faa1d5a7bc2f94db6731da47e0834b359bdd7f91670c294b6f20e11445089ad08c51111c226c7f77ba2563f417a9b4d3
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
- // Polaris ViewComponents
73
+ // ...
74
+
57
75
  import { registerPolarisControllers } from "polaris-view-components"
58
- registerPolarisControllers(application)
76
+ registerPolarisControllers(Stimulus)
59
77
  ```
60
78
 
61
79
  ## Dependencies
data/app/{javascript/polaris → assets/javascripts/polaris_view_components}/resource_item_controller.js RENAMED
@@ -1,4 +1,4 @@
1
- import { Controller } from 'stimulus'
1
+ import { Controller } from "@hotwired/stimulus"
2
2
 
3
3
  export default class extends Controller {
4
4
  static targets = ['link']
data/app/{javascript/polaris → assets/javascripts/polaris_view_components}/select_controller.js RENAMED
@@ -1,4 +1,4 @@
1
- import { Controller } from 'stimulus'
1
+ import { Controller } from "@hotwired/stimulus"
2
2
 
3
3
  export default class extends Controller {
4
4
  static targets = ['selectedOption']
data/app/{javascript/polaris → assets/javascripts/polaris_view_components}/text_field_controller.js RENAMED
@@ -1,4 +1,4 @@
1
- import { Controller } from 'stimulus'
1
+ import { Controller } from "@hotwired/stimulus"
2
2
 
3
3
  export default class extends Controller {
4
4
  static targets = ['input', 'clearButton', 'characterCount']
data/app/assets/javascripts/{polaris.js → polaris_view_components.js} RENAMED
@@ -1,20 +1,7 @@
1
- import { Controller } from "stimulus";
1
+ import { Controller } from "@hotwired/stimulus";
2
2
 
3
- function _defineProperty(obj, key, value) {
4
- if (key in obj) {
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
- _defineProperty(_class$2, "targets", [ "link" ]);
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
- _defineProperty(_class$1, "targets", [ "selectedOption" ]);
39
-
40
- class _class extends Controller {
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", _class$2);
122
- application.register("polaris-select", _class$1);
123
- application.register("polaris-text-field", _class);
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 { _class$2 as ResourceItem, _class$1 as Select, _class as TextField, registerPolarisControllers };
107
+ export { ResourceItem, Select, TextField, registerPolarisControllers };
data/app/assets/stylesheets/polaris_view_components/shopify_navigation.css ADDED
@@ -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
+ }