polaris_view_components 0.1.3 → 0.3.2

Sign up to get free protection for your applications and to get access to all the features.
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
+ }