polaris_view_components 0.1.3 → 0.3.2

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 (26) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +32 -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 -40
  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/select_component.html.erb +11 -2
  13. data/app/components/polaris/select_component.rb +2 -0
  14. data/app/components/polaris/skeleton_body_text_component.html.erb +5 -0
  15. data/app/components/polaris/skeleton_body_text_component.rb +15 -0
  16. data/app/components/polaris/tag_component.html.erb +6 -0
  17. data/app/components/polaris/tag_component.rb +35 -0
  18. data/app/helpers/polaris/form_builder.rb +4 -0
  19. data/app/helpers/polaris/view_helper.rb +2 -0
  20. data/lib/generators/polaris_view_components/USAGE +5 -0
  21. data/lib/generators/polaris_view_components/install_generator.rb +35 -0
  22. data/lib/generators/polaris_view_components/templates/README +14 -0
  23. data/lib/generators/polaris_view_components/templates/stimulus_index.js +6 -0
  24. data/lib/polaris/view_components/engine.rb +3 -1
  25. data/lib/polaris/view_components/version.rb +1 -1
  26. metadata +19 -9
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5fa1e7b371df5781aea68bbf2be3d7872fc4d704076c48473039b23850440332
4
- data.tar.gz: 647c10b9000fd7de97977497aaf910d02abb3f692fb563e3f1166b73c88a02e8
3
+ metadata.gz: bf2cc17a4b9d919cd1855c419b2543cdd2ce8461deccf6077dfa42e1319cb775
4
+ data.tar.gz: d0e85ab7f44695d32ceff2bf8b73843dbf887844ce4b0e2370151f79622c919f
5
5
  SHA512:
6
- metadata.gz: 6364ad7a248ef54858f7f8700360468ffc7954bf7035907227c0acb666ff1f0cc554c02bebbba961d57a4c30581b576035221b34a1345c639e18d6b46c1a10be
7
- data.tar.gz: 249ff1b9089d7907d6ef290801a410dbf7e37aaf1fe238750e3cb5283d9b0bb1b157642bae870f8a8599e383a332aca20df630f9411a06404a37530ab7176181
6
+ metadata.gz: d20d75ce88498c2c49bf978768aa8dd17c761924d59f5e68d6a80257b2de1e0675b03c443e11d48f37fada7999ec8d6129395d33cf29620ef9cac741b99ce200
7
+ data.tar.gz: e5d313afc34de67c9d61b207a45c6138925ca5f33303d750b021fc880c7de4c9b2d418d606a4f105d05848ff72490076de8cc5affd28476dbec61c3c1f119d72
data/README.md CHANGED
@@ -28,13 +28,41 @@ In `Gemfile`, add:
28
28
  gem 'polaris_view_components'
29
29
  ```
30
30
 
31
+ Run install generator:
32
+ ```bash
33
+ rails generate polaris_view_components:install
34
+ ```
35
+
31
36
  Setup Polaris styles in your layouts `<head>` tag:
32
37
 
33
38
  ```erb
34
- <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@6.6.0/dist/styles.css" />
35
39
  <%= stylesheet_link_tag 'polaris_view_components' %>
36
40
  ```
37
41
 
42
+ Define Polaris style on your `<body>` tag:
43
+
44
+ ```erb
45
+ <body style="<%= polaris_body_styles %>">
46
+ ```
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
+
38
66
  Install NPM package:
39
67
  ```bash
40
68
  yarn add polaris-view-components
@@ -42,9 +70,10 @@ yarn add polaris-view-components
42
70
 
43
71
  Add to `app/javascript/controllers/index.js`:
44
72
  ```javascript
45
- // Polaris ViewComponents
73
+ // ...
74
+
46
75
  import { registerPolarisControllers } from "polaris-view-components"
47
- registerPolarisControllers(application)
76
+ registerPolarisControllers(Stimulus)
48
77
  ```
49
78
 
50
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");
@@ -98,30 +92,16 @@ class _class extends Controller {
98
92
  if (isNaN(numericValue)) {
99
93
  return;
100
94
  }
101
- console.log(numericValue, this.stepValue);
102
95
  const decimalPlaces = Math.max(dpl(numericValue), dpl(this.stepValue));
103
96
  const newValue = Math.min(Number(this.maxValue), Math.max(numericValue + steps * this.stepValue, Number(this.minValue)));
104
97
  this.value = String(newValue.toFixed(decimalPlaces));
105
98
  }
106
99
  }
107
100
 
108
- _defineProperty(_class, "targets", [ "input", "clearButton", "characterCount" ]);
109
-
110
- _defineProperty(_class, "classes", [ "hasValue", "clearButtonHidden" ]);
111
-
112
- _defineProperty(_class, "values", {
113
- value: String,
114
- labelTemplate: String,
115
- textTemplate: String,
116
- step: Number,
117
- min: Number,
118
- max: Number
119
- });
120
-
121
101
  function registerPolarisControllers(application) {
122
- application.register("polaris-resource-item", _class$2);
123
- application.register("polaris-select", _class$1);
124
- 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);
125
105
  }
126
106
 
127
- 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
+ }