polaris_view_components 0.1.0 → 0.2.0
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 +36 -1
- data/app/assets/javascripts/polaris.js +15 -2
- data/app/components/polaris/button_component.html.erb +1 -1
- data/app/components/polaris/button_component.rb +1 -85
- data/app/components/polaris/card/section_component.rb +2 -1
- data/app/components/polaris/card_component.html.erb +8 -2
- data/app/components/polaris/card_component.rb +2 -0
- data/app/components/polaris/headless_button.html.erb +22 -0
- data/app/components/polaris/headless_button.rb +95 -0
- data/app/components/polaris/resource_item_component.html.erb +27 -0
- data/app/components/polaris/resource_item_component.rb +75 -0
- data/app/components/polaris/resource_list_component.rb +32 -0
- data/app/components/polaris/select_component.html.erb +11 -2
- data/app/components/polaris/select_component.rb +2 -0
- data/app/components/polaris/shopify_navigation_component.rb +33 -13
- data/app/components/polaris/skeleton_body_text_component.html.erb +5 -0
- data/app/components/polaris/skeleton_body_text_component.rb +15 -0
- data/app/components/polaris/tag_component.html.erb +6 -0
- data/app/components/polaris/tag_component.rb +35 -0
- data/app/components/polaris/text_field_component.html.erb +4 -4
- data/app/components/polaris/text_field_component.rb +3 -1
- data/app/helpers/polaris/form_builder.rb +43 -7
- data/app/helpers/polaris/url_helper.rb +19 -0
- data/app/helpers/polaris/view_helper.rb +4 -0
- data/app/javascript/polaris/index.js +3 -1
- data/app/javascript/polaris/resource_item_controller.js +15 -0
- data/app/javascript/polaris/text_field_controller.js +0 -1
- data/lib/generators/polaris_view_components/USAGE +5 -0
- data/lib/generators/polaris_view_components/install_generator.rb +35 -0
- data/lib/generators/polaris_view_components/templates/README +14 -0
- data/lib/generators/polaris_view_components/templates/stimulus_index.js +7 -0
- data/lib/polaris/view_components/engine.rb +1 -0
- data/lib/polaris/view_components/version.rb +1 -1
- metadata +17 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 75b9c5e7b5a31ce1a5a549b0315fdbefc308206fd89085a19c8feac044f2884f
|
4
|
+
data.tar.gz: c858f559b97a7dfe14c6c303d3f7b000ca428ddc12ee603511f03ebe4ad4ffcc
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 0577b317bffc512104e90a023eab9d2a674b9f6ce852eb2e8324a77e1723f97029d30545053e29f72ad7da1da14ebb5c2c1f3eee5afa2a50f4ed7bca7afce4b7
|
7
|
+
data.tar.gz: 1cfb3676d22713e1e6f5d47a4a521683faa1d5a7bc2f94db6731da47e0834b359bdd7f91670c294b6f20e11445089ad08c51111c226c7f77ba2563f417a9b4d3
|
data/README.md
CHANGED
@@ -2,6 +2,8 @@
|
|
2
2
|
|
3
3
|
Polaris ViewComponents is an implementation of the Polaris Design System using [ViewComponent](https://github.com/github/view_component).
|
4
4
|
|
5
|
+

|
6
|
+
|
5
7
|
> **This library is under active development. Breaking changes are likely until stable release.**
|
6
8
|
|
7
9
|
## Preview
|
@@ -23,7 +25,12 @@ Render Polaris ViewComponents:
|
|
23
25
|
In `Gemfile`, add:
|
24
26
|
|
25
27
|
```ruby
|
26
|
-
gem 'polaris_view_components'
|
28
|
+
gem 'polaris_view_components'
|
29
|
+
```
|
30
|
+
|
31
|
+
Run install generator:
|
32
|
+
```bash
|
33
|
+
rails generate polaris_view_components:install
|
27
34
|
```
|
28
35
|
|
29
36
|
Setup Polaris styles in your layouts `<head>` tag:
|
@@ -33,6 +40,24 @@ Setup Polaris styles in your layouts `<head>` tag:
|
|
33
40
|
<%= stylesheet_link_tag 'polaris_view_components' %>
|
34
41
|
```
|
35
42
|
|
43
|
+
Define Polaris style on your `<body>` tag:
|
44
|
+
|
45
|
+
```erb
|
46
|
+
<body style="<%= polaris_body_styles %>">
|
47
|
+
```
|
48
|
+
|
49
|
+
Install NPM package:
|
50
|
+
```bash
|
51
|
+
yarn add polaris-view-components
|
52
|
+
```
|
53
|
+
|
54
|
+
Add to `app/javascript/controllers/index.js`:
|
55
|
+
```javascript
|
56
|
+
// Polaris ViewComponents
|
57
|
+
import { registerPolarisControllers } from "polaris-view-components"
|
58
|
+
registerPolarisControllers(application)
|
59
|
+
```
|
60
|
+
|
36
61
|
## Dependencies
|
37
62
|
|
38
63
|
In addition to the dependencies declared in the `gemspec`, Polaris ViewComponents assumes the presence of Polaris CSS.
|
@@ -46,6 +71,16 @@ To get started:
|
|
46
71
|
|
47
72
|
It will open demo app with component previews on `localhost:4000`. You can change components and they will be updated on page reload. Component previews located in `demo/test/components/previews`.
|
48
73
|
|
74
|
+
To release gem run:
|
75
|
+
```bash
|
76
|
+
script/release
|
77
|
+
```
|
78
|
+
|
79
|
+
To release npm package run:
|
80
|
+
```bash
|
81
|
+
yarn release
|
82
|
+
```
|
83
|
+
|
49
84
|
## License
|
50
85
|
|
51
86
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
@@ -14,6 +14,19 @@ function _defineProperty(obj, key, value) {
|
|
14
14
|
return obj;
|
15
15
|
}
|
16
16
|
|
17
|
+
class _class$2 extends Controller {
|
18
|
+
open(event) {
|
19
|
+
if (this.hasLinkTarget && this.targetNotClickable(event.target)) {
|
20
|
+
this.linkTarget.click();
|
21
|
+
}
|
22
|
+
}
|
23
|
+
targetNotClickable(element) {
|
24
|
+
return !element.closest("a") && !element.closest("button") && element.nodeName !== "INPUT";
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
_defineProperty(_class$2, "targets", [ "link" ]);
|
29
|
+
|
17
30
|
class _class$1 extends Controller {
|
18
31
|
update(event) {
|
19
32
|
const select = event.currentTarget;
|
@@ -85,7 +98,6 @@ class _class extends Controller {
|
|
85
98
|
if (isNaN(numericValue)) {
|
86
99
|
return;
|
87
100
|
}
|
88
|
-
console.log(numericValue, this.stepValue);
|
89
101
|
const decimalPlaces = Math.max(dpl(numericValue), dpl(this.stepValue));
|
90
102
|
const newValue = Math.min(Number(this.maxValue), Math.max(numericValue + steps * this.stepValue, Number(this.minValue)));
|
91
103
|
this.value = String(newValue.toFixed(decimalPlaces));
|
@@ -106,8 +118,9 @@ _defineProperty(_class, "values", {
|
|
106
118
|
});
|
107
119
|
|
108
120
|
function registerPolarisControllers(application) {
|
121
|
+
application.register("polaris-resource-item", _class$2);
|
109
122
|
application.register("polaris-select", _class$1);
|
110
123
|
application.register("polaris-text-field", _class);
|
111
124
|
}
|
112
125
|
|
113
|
-
export { _class$1 as Select, _class as TextField, registerPolarisControllers };
|
126
|
+
export { _class$2 as ResourceItem, _class$1 as Select, _class as TextField, registerPolarisControllers };
|
@@ -1,90 +1,6 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Polaris
|
4
|
-
class ButtonComponent <
|
5
|
-
SIZE_DEFAULT = :medium
|
6
|
-
SIZE_MAPPINGS = {
|
7
|
-
SIZE_DEFAULT => "",
|
8
|
-
:slim => "Polaris-Button--sizeSlim",
|
9
|
-
:large => "Polaris-Button--sizeLarge",
|
10
|
-
}
|
11
|
-
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
12
|
-
|
13
|
-
TEXT_ALIGN_DEFAULT = :default
|
14
|
-
TEXT_ALIGN_MAPPINGS = {
|
15
|
-
TEXT_ALIGN_DEFAULT => "",
|
16
|
-
:left => "Polaris-Button--textAlignLeft",
|
17
|
-
:center => "Polaris-Button--textAlignCenter",
|
18
|
-
:right => "Polaris-Button--textAlignRight",
|
19
|
-
}
|
20
|
-
TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
|
21
|
-
|
22
|
-
renders_one :icon, IconComponent
|
23
|
-
|
24
|
-
def initialize(
|
25
|
-
url: nil,
|
26
|
-
outline: false,
|
27
|
-
plain: false,
|
28
|
-
primary: false,
|
29
|
-
pressed: false,
|
30
|
-
monochrome: false,
|
31
|
-
loading: false,
|
32
|
-
destructive: false,
|
33
|
-
disabled: false,
|
34
|
-
external: false,
|
35
|
-
full_width: false,
|
36
|
-
submit: false,
|
37
|
-
remove_underline: false,
|
38
|
-
size: SIZE_DEFAULT,
|
39
|
-
text_align: TEXT_ALIGN_DEFAULT,
|
40
|
-
**system_arguments
|
41
|
-
)
|
42
|
-
@tag = url.present? ? 'a' : 'button'
|
43
|
-
@text_classes = class_names(
|
44
|
-
"Polaris-Button__Text",
|
45
|
-
"Polaris-Button--removeUnderline": plain && monochrome && remove_underline
|
46
|
-
)
|
47
|
-
@loading = loading
|
48
|
-
|
49
|
-
@system_arguments = system_arguments
|
50
|
-
@system_arguments[:type] = submit ? 'submit' : 'button'
|
51
|
-
if loading
|
52
|
-
@system_arguments[:disabled] = true
|
53
|
-
end
|
54
|
-
if url.present?
|
55
|
-
@system_arguments.delete(:type)
|
56
|
-
@system_arguments[:href] = url
|
57
|
-
@system_arguments[:target] = "_blank" if external
|
58
|
-
end
|
59
|
-
if disabled
|
60
|
-
@system_arguments[:disabled] = disabled
|
61
|
-
end
|
62
|
-
@system_arguments[:classes] = class_names(
|
63
|
-
@system_arguments[:classes],
|
64
|
-
"Polaris-Button",
|
65
|
-
SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
|
66
|
-
TEXT_ALIGN_MAPPINGS[fetch_or_fallback(TEXT_ALIGN_OPTIONS, text_align, TEXT_ALIGN_DEFAULT)],
|
67
|
-
"Polaris-Button--destructive": destructive,
|
68
|
-
"Polaris-Button--disabled": disabled || loading,
|
69
|
-
"Polaris-Button--loading": loading,
|
70
|
-
"Polaris-Button--fullWidth": full_width,
|
71
|
-
"Polaris-Button--monochrome": monochrome,
|
72
|
-
"Polaris-Button--outline": outline,
|
73
|
-
"Polaris-Button--plain": plain,
|
74
|
-
"Polaris-Button--primary": primary,
|
75
|
-
"Polaris-Button--pressed": pressed,
|
76
|
-
"Polaris-Button--removeUnderline": (plain && monochrome && remove_underline)
|
77
|
-
)
|
78
|
-
end
|
79
|
-
|
80
|
-
private
|
81
|
-
|
82
|
-
def dynamic_arguments
|
83
|
-
@system_arguments[:classes] = class_names(
|
84
|
-
@system_arguments[:classes],
|
85
|
-
"Polaris-Button--iconOnly": icon.present? && content.blank?,
|
86
|
-
)
|
87
|
-
@system_arguments
|
88
|
-
end
|
4
|
+
class ButtonComponent < HeadlessButton
|
89
5
|
end
|
90
6
|
end
|
@@ -6,6 +6,7 @@ class Polaris::Card::SectionComponent < Polaris::NewComponent
|
|
6
6
|
subdued: false,
|
7
7
|
flush: false,
|
8
8
|
full_width: false,
|
9
|
+
unstyled: false,
|
9
10
|
actions: [],
|
10
11
|
**system_arguments
|
11
12
|
)
|
@@ -13,10 +14,10 @@ class Polaris::Card::SectionComponent < Polaris::NewComponent
|
|
13
14
|
@system_arguments[:tag] = :div
|
14
15
|
@system_arguments[:classes] = class_names(
|
15
16
|
@system_arguments[:classes],
|
16
|
-
"Polaris-Card__Section",
|
17
17
|
"Polaris-Card__Section--flush": flush,
|
18
18
|
"Polaris-Card__Section--subdued": subdued,
|
19
19
|
"Polaris-Card__Section--fullWidth": full_width,
|
20
|
+
"Polaris-Card__Section": !unstyled,
|
20
21
|
)
|
21
22
|
|
22
23
|
@title = title
|
@@ -11,8 +11,14 @@
|
|
11
11
|
<% sections.each do |section| %>
|
12
12
|
<%= section %>
|
13
13
|
<% end %>
|
14
|
-
<%
|
15
|
-
|
14
|
+
<% end %>
|
15
|
+
|
16
|
+
<% if content.present? %>
|
17
|
+
<% if @sectioned %>
|
18
|
+
<%= render Polaris::Card::SectionComponent.new do %>
|
19
|
+
<%= content %>
|
20
|
+
<% end %>
|
21
|
+
<% else %>
|
16
22
|
<%= content %>
|
17
23
|
<% end %>
|
18
24
|
<% end %>
|
@@ -21,12 +21,14 @@ module Polaris
|
|
21
21
|
def initialize(
|
22
22
|
title: "",
|
23
23
|
actions: [],
|
24
|
+
sectioned: true,
|
24
25
|
subdued: false,
|
25
26
|
footer_action_alignment: FOOTER_ACTION_ALIGNMENT_DEFAULT,
|
26
27
|
**system_arguments
|
27
28
|
)
|
28
29
|
@title = title
|
29
30
|
@actions = actions
|
31
|
+
@sectioned = sectioned
|
30
32
|
@footer_action_alignment = footer_action_alignment
|
31
33
|
|
32
34
|
@system_arguments = system_arguments
|
@@ -0,0 +1,22 @@
|
|
1
|
+
<span class="Polaris-Button__Content">
|
2
|
+
<% if @loading %>
|
3
|
+
<span class="Polaris-Button__Spinner">
|
4
|
+
<%= polaris_spinner(size: :small) %>
|
5
|
+
</span>
|
6
|
+
<% end %>
|
7
|
+
|
8
|
+
<% if icon.present? %>
|
9
|
+
<div class="Polaris-Button__Icon">
|
10
|
+
<%= icon %>
|
11
|
+
</div>
|
12
|
+
<% if content.present? %>
|
13
|
+
|
14
|
+
<% end %>
|
15
|
+
<% end %>
|
16
|
+
|
17
|
+
<% if content.present? %>
|
18
|
+
<div class="<%= @text_classes %>">
|
19
|
+
<%= content %>
|
20
|
+
</div>
|
21
|
+
<% end %>
|
22
|
+
</span>
|
@@ -0,0 +1,95 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Polaris
|
4
|
+
class HeadlessButton < Polaris::NewComponent
|
5
|
+
SIZE_DEFAULT = :medium
|
6
|
+
SIZE_MAPPINGS = {
|
7
|
+
SIZE_DEFAULT => "",
|
8
|
+
:slim => "Polaris-Button--sizeSlim",
|
9
|
+
:large => "Polaris-Button--sizeLarge",
|
10
|
+
}
|
11
|
+
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
12
|
+
|
13
|
+
TEXT_ALIGN_DEFAULT = :default
|
14
|
+
TEXT_ALIGN_MAPPINGS = {
|
15
|
+
TEXT_ALIGN_DEFAULT => "",
|
16
|
+
:left => "Polaris-Button--textAlignLeft",
|
17
|
+
:center => "Polaris-Button--textAlignCenter",
|
18
|
+
:right => "Polaris-Button--textAlignRight",
|
19
|
+
}
|
20
|
+
TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
|
21
|
+
|
22
|
+
renders_one :icon, IconComponent
|
23
|
+
|
24
|
+
def initialize(
|
25
|
+
url: nil,
|
26
|
+
outline: false,
|
27
|
+
plain: false,
|
28
|
+
primary: false,
|
29
|
+
pressed: false,
|
30
|
+
monochrome: false,
|
31
|
+
loading: false,
|
32
|
+
destructive: false,
|
33
|
+
disabled: false,
|
34
|
+
external: false,
|
35
|
+
full_width: false,
|
36
|
+
submit: false,
|
37
|
+
remove_underline: false,
|
38
|
+
size: SIZE_DEFAULT,
|
39
|
+
text_align: TEXT_ALIGN_DEFAULT,
|
40
|
+
**system_arguments
|
41
|
+
)
|
42
|
+
@tag = url.present? ? 'a' : 'button'
|
43
|
+
@text_classes = class_names(
|
44
|
+
"Polaris-Button__Text",
|
45
|
+
"Polaris-Button--removeUnderline": plain && monochrome && remove_underline
|
46
|
+
)
|
47
|
+
@loading = loading
|
48
|
+
|
49
|
+
@system_arguments = system_arguments
|
50
|
+
@system_arguments[:type] = submit ? 'submit' : 'button'
|
51
|
+
if loading
|
52
|
+
@system_arguments[:disabled] = true
|
53
|
+
end
|
54
|
+
if url.present?
|
55
|
+
@system_arguments.delete(:type)
|
56
|
+
@system_arguments[:href] = url
|
57
|
+
@system_arguments[:target] = "_blank" if external
|
58
|
+
end
|
59
|
+
if disabled
|
60
|
+
@system_arguments[:disabled] = disabled
|
61
|
+
end
|
62
|
+
@system_arguments[:classes] = class_names(
|
63
|
+
@system_arguments[:classes],
|
64
|
+
"Polaris-Button",
|
65
|
+
SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
|
66
|
+
TEXT_ALIGN_MAPPINGS[fetch_or_fallback(TEXT_ALIGN_OPTIONS, text_align, TEXT_ALIGN_DEFAULT)],
|
67
|
+
"Polaris-Button--destructive": destructive,
|
68
|
+
"Polaris-Button--disabled": disabled || loading,
|
69
|
+
"Polaris-Button--loading": loading,
|
70
|
+
"Polaris-Button--fullWidth": full_width,
|
71
|
+
"Polaris-Button--monochrome": monochrome,
|
72
|
+
"Polaris-Button--outline": outline,
|
73
|
+
"Polaris-Button--plain": plain,
|
74
|
+
"Polaris-Button--primary": primary,
|
75
|
+
"Polaris-Button--pressed": pressed,
|
76
|
+
"Polaris-Button--removeUnderline": (plain && monochrome && remove_underline)
|
77
|
+
)
|
78
|
+
end
|
79
|
+
|
80
|
+
def system_arguments
|
81
|
+
@system_arguments[:classes] = class_names(
|
82
|
+
@system_arguments[:classes],
|
83
|
+
"Polaris-Button--iconOnly": icon.present? && content.blank?,
|
84
|
+
)
|
85
|
+
@system_arguments
|
86
|
+
end
|
87
|
+
|
88
|
+
def html_options
|
89
|
+
options = system_arguments
|
90
|
+
options[:class] = options[:classes]
|
91
|
+
options.delete(:classes)
|
92
|
+
options
|
93
|
+
end
|
94
|
+
end
|
95
|
+
end
|
@@ -0,0 +1,27 @@
|
|
1
|
+
<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
|
2
|
+
<div class="Polaris-ResourceItem__ItemWrapper">
|
3
|
+
<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
|
4
|
+
<% if @url %>
|
5
|
+
<a
|
6
|
+
class="Polaris-ResourceItem__Link"
|
7
|
+
tabindex="0"
|
8
|
+
href="<%= @url %>"
|
9
|
+
data-polaris-unstyled="true"
|
10
|
+
data-polaris-resource-item-target="link"></a>
|
11
|
+
<% end %>
|
12
|
+
|
13
|
+
<%= render(Polaris::BaseComponent.new(**container_arguments)) do %>
|
14
|
+
<% if media.present? %>
|
15
|
+
<div class="Polaris-ResourceItem__Owned">
|
16
|
+
<div class="Polaris-ResourceItem__Media">
|
17
|
+
<%= media %>
|
18
|
+
</div>
|
19
|
+
</div>
|
20
|
+
<% end %>
|
21
|
+
<div class="Polaris-ResourceItem__Content">
|
22
|
+
<%= content %>
|
23
|
+
</div>
|
24
|
+
<% end %>
|
25
|
+
<% end %>
|
26
|
+
</div>
|
27
|
+
<% end %>
|
@@ -0,0 +1,75 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Polaris
|
4
|
+
class ResourceItemComponent < Polaris::NewComponent
|
5
|
+
CURSOR_DEFAULT = :default
|
6
|
+
CURSOR_OPTIONS = %i[default pointer]
|
7
|
+
|
8
|
+
ALIGNMENT_DEFAULT = :default
|
9
|
+
ALIGNMENT_MAPPINGS = {
|
10
|
+
ALIGNMENT_DEFAULT => "",
|
11
|
+
center: "Polaris-ResourceItem--alignmentCenter",
|
12
|
+
}
|
13
|
+
ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
|
14
|
+
|
15
|
+
renders_one :media
|
16
|
+
|
17
|
+
def initialize(
|
18
|
+
url: nil,
|
19
|
+
vertical_alignment: ALIGNMENT_DEFAULT,
|
20
|
+
wrapper_arguments: {},
|
21
|
+
container_arguments: {},
|
22
|
+
**system_arguments
|
23
|
+
)
|
24
|
+
@url = url
|
25
|
+
@vertical_alignment = vertical_alignment
|
26
|
+
@wrapper_arguments = wrapper_arguments
|
27
|
+
@container_arguments = container_arguments
|
28
|
+
@system_arguments = system_arguments
|
29
|
+
end
|
30
|
+
|
31
|
+
def wrapper_arguments
|
32
|
+
{
|
33
|
+
tag: "li",
|
34
|
+
data: {},
|
35
|
+
}.deep_merge(@wrapper_arguments).tap do |args|
|
36
|
+
args[:classes] = class_names(
|
37
|
+
args[:classes],
|
38
|
+
"Polaris-ResourceItem__ListItem",
|
39
|
+
)
|
40
|
+
prepend_option(args[:data], :controller, "polaris-resource-item")
|
41
|
+
end
|
42
|
+
end
|
43
|
+
|
44
|
+
def container_arguments
|
45
|
+
{
|
46
|
+
tag: "div",
|
47
|
+
}.deep_merge(@container_arguments).tap do |args|
|
48
|
+
args[:classes] = class_names(
|
49
|
+
args[:classes],
|
50
|
+
"Polaris-ResourceItem__Container",
|
51
|
+
ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, @vertical_alignment, ALIGNMENT_DEFAULT)],
|
52
|
+
)
|
53
|
+
end
|
54
|
+
end
|
55
|
+
|
56
|
+
def system_arguments
|
57
|
+
{
|
58
|
+
tag: "div",
|
59
|
+
data: {},
|
60
|
+
}.deep_merge(@system_arguments).tap do |args|
|
61
|
+
args[:classes] = class_names(
|
62
|
+
args[:classes],
|
63
|
+
"Polaris-ResourceItem",
|
64
|
+
)
|
65
|
+
prepend_option(args, :style, "cursor: #{cursor};")
|
66
|
+
prepend_option(args[:data], :action, "click->polaris-resource-item#open")
|
67
|
+
end
|
68
|
+
end
|
69
|
+
|
70
|
+
private
|
71
|
+
def cursor
|
72
|
+
@url.present? ? "pointer" : "default"
|
73
|
+
end
|
74
|
+
end
|
75
|
+
end
|
@@ -0,0 +1,32 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Polaris
|
4
|
+
class ResourceListComponent < Polaris::NewComponent
|
5
|
+
def initialize(
|
6
|
+
wrapper_arguments: {},
|
7
|
+
**system_arguments
|
8
|
+
)
|
9
|
+
@wrapper_arguments = wrapper_arguments
|
10
|
+
@wrapper_arguments[:tag] = "div"
|
11
|
+
@wrapper_arguments[:classes] = class_names(
|
12
|
+
@wrapper_arguments[:classes],
|
13
|
+
"Polaris-ResourceList__ResourceListWrapper",
|
14
|
+
)
|
15
|
+
|
16
|
+
@system_arguments = system_arguments
|
17
|
+
@system_arguments[:tag] = "ul"
|
18
|
+
@system_arguments[:classes] = class_names(
|
19
|
+
@system_arguments[:classes],
|
20
|
+
"Polaris-ResourceList",
|
21
|
+
)
|
22
|
+
end
|
23
|
+
|
24
|
+
def call
|
25
|
+
render(Polaris::BaseComponent.new(**@wrapper_arguments)) do
|
26
|
+
render(Polaris::BaseComponent.new(**@system_arguments)) do
|
27
|
+
content
|
28
|
+
end
|
29
|
+
end
|
30
|
+
end
|
31
|
+
end
|
32
|
+
end
|
@@ -1,9 +1,18 @@
|
|
1
1
|
<%= render Polaris::LabelledComponent.new(**@wrapper_arguments) do %>
|
2
2
|
<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
|
3
3
|
<% if @form.present? && @attribute.present? %>
|
4
|
-
<%= @form.select(
|
4
|
+
<%= @form.select(
|
5
|
+
@attribute,
|
6
|
+
options_for_select(@options, selected: @selected, disabled: @disabled_options),
|
7
|
+
@select_options,
|
8
|
+
@input_options,
|
9
|
+
) %>
|
5
10
|
<% else %>
|
6
|
-
<%= select_tag(
|
11
|
+
<%= select_tag(
|
12
|
+
@name,
|
13
|
+
options_for_select(@options, selected: @selected, disabled: @disabled_options),
|
14
|
+
@input_options,
|
15
|
+
) %>
|
7
16
|
<% end %>
|
8
17
|
|
9
18
|
<div
|
@@ -8,6 +8,7 @@ module Polaris
|
|
8
8
|
name: nil,
|
9
9
|
options:,
|
10
10
|
selected: nil,
|
11
|
+
disabled_options: nil,
|
11
12
|
label: nil,
|
12
13
|
label_hidden: false,
|
13
14
|
label_inline: false,
|
@@ -26,6 +27,7 @@ module Polaris
|
|
26
27
|
@name = name
|
27
28
|
@options = options
|
28
29
|
@selected = selected
|
30
|
+
@disabled_options = disabled_options
|
29
31
|
@label = label
|
30
32
|
@label_hidden = label_hidden
|
31
33
|
@label_inline = label_inline
|
@@ -2,9 +2,13 @@
|
|
2
2
|
|
3
3
|
module Polaris
|
4
4
|
class ShopifyNavigationComponent < Polaris::NewComponent
|
5
|
-
renders_many :links,
|
5
|
+
renders_many :links, -> (**system_arguments) do
|
6
|
+
ShopifyNavigationLinkComponent.new(auto_detect_active: @auto_detect_active, **system_arguments)
|
7
|
+
end
|
8
|
+
|
9
|
+
def initialize(auto_detect_active: false, **system_arguments)
|
10
|
+
@auto_detect_active = auto_detect_active
|
6
11
|
|
7
|
-
def initialize(**system_arguments)
|
8
12
|
@system_arguments = system_arguments
|
9
13
|
@system_arguments[:tag] = "div"
|
10
14
|
@system_arguments[:classes] = class_names(
|
@@ -18,26 +22,42 @@ module Polaris
|
|
18
22
|
end
|
19
23
|
|
20
24
|
class ShopifyNavigationLinkComponent < Polaris::NewComponent
|
21
|
-
def initialize(url:, active: false, **system_arguments)
|
25
|
+
def initialize(url:, auto_detect_active:, active: false, **system_arguments)
|
26
|
+
@url = url
|
27
|
+
@auto_detect_active = auto_detect_active
|
28
|
+
@active = active
|
22
29
|
@system_arguments = system_arguments
|
23
|
-
@system_arguments[:tag] = "a"
|
24
|
-
@system_arguments[:href] = url
|
25
|
-
@system_arguments[:role] = "tab"
|
26
|
-
@system_arguments["data-polaris-unstyled"] = true
|
27
|
-
@system_arguments["aria-selected"] = active
|
28
|
-
@system_arguments[:classes] = class_names(
|
29
|
-
@system_arguments[:classes],
|
30
|
-
"shp-Navigation_Link",
|
31
|
-
)
|
32
30
|
end
|
33
31
|
|
34
32
|
def call
|
35
33
|
tag.li(class: "shp-Navigation_Item", role: "presentation") do
|
36
|
-
render(Polaris::BaseComponent.new(
|
34
|
+
render(Polaris::BaseComponent.new(**system_arguments)) do
|
37
35
|
tag.span(class: "shp-Navigation_LinkText") { content }
|
38
36
|
end
|
39
37
|
end
|
40
38
|
end
|
39
|
+
|
40
|
+
def system_arguments
|
41
|
+
{
|
42
|
+
tag: "a",
|
43
|
+
href: @url,
|
44
|
+
role: "tab",
|
45
|
+
data: { polaris_unstyled: true },
|
46
|
+
aria: {},
|
47
|
+
}.deep_merge(@system_arguments).tap do |args|
|
48
|
+
args[:aria][:selected] = @active || detect_active(@url)
|
49
|
+
args[:classes] = class_names(
|
50
|
+
args[:classes],
|
51
|
+
"shp-Navigation_Link",
|
52
|
+
)
|
53
|
+
end
|
54
|
+
end
|
55
|
+
|
56
|
+
def detect_active(url)
|
57
|
+
return unless @auto_detect_active
|
58
|
+
|
59
|
+
request.path.include?(url.split('?').first)
|
60
|
+
end
|
41
61
|
end
|
42
62
|
end
|
43
63
|
end
|
@@ -0,0 +1,15 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Polaris
|
4
|
+
class SkeletonBodyTextComponent < Polaris::NewComponent
|
5
|
+
def initialize(lines: 3, **system_arguments)
|
6
|
+
@lines = lines
|
7
|
+
@system_arguments = system_arguments
|
8
|
+
@system_arguments[:tag] = "div"
|
9
|
+
@system_arguments[:classes] = class_names(
|
10
|
+
@system_arguments[:classes],
|
11
|
+
"Polaris-SkeletonBodyText__SkeletonBodyTextContainer",
|
12
|
+
)
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
@@ -0,0 +1,35 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Polaris
|
4
|
+
class TagComponent < Polaris::NewComponent
|
5
|
+
renders_one :remove_button, lambda { |**system_arguments|
|
6
|
+
render Polaris::BaseButton.new(
|
7
|
+
classes: "Polaris-Tag__Button",
|
8
|
+
disabled: @disabled,
|
9
|
+
**system_arguments
|
10
|
+
) do |button|
|
11
|
+
polaris_icon(name: "CancelSmallMinor")
|
12
|
+
end
|
13
|
+
}
|
14
|
+
|
15
|
+
def initialize(clickable: false, disabled: false, **system_arguments)
|
16
|
+
@clickable = clickable
|
17
|
+
@disabled = disabled
|
18
|
+
|
19
|
+
@system_arguments = system_arguments
|
20
|
+
end
|
21
|
+
|
22
|
+
def system_arguments
|
23
|
+
@system_arguments.tap do |opts|
|
24
|
+
opts[:tag] = @clickable ? "button" : "span"
|
25
|
+
opts[:classes] = class_names(
|
26
|
+
@system_arguments[:classes],
|
27
|
+
"Polaris-Tag",
|
28
|
+
"Polaris-Tag--clickable" => @clickable,
|
29
|
+
"Polaris-Tag--disabled" => @disabled,
|
30
|
+
"Polaris-Tag--removable" => remove_button.present?
|
31
|
+
)
|
32
|
+
end
|
33
|
+
end
|
34
|
+
end
|
35
|
+
end
|
@@ -8,9 +8,9 @@
|
|
8
8
|
|
9
9
|
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
|
10
10
|
<%= render Polaris::BaseComponent.new(**system_arguments) do %>
|
11
|
-
<% if @prefix.present? %>
|
11
|
+
<% if prefix.present? || @prefix.present? %>
|
12
12
|
<div class="Polaris-TextField__Prefix">
|
13
|
-
<%= @prefix %>
|
13
|
+
<%= prefix || @prefix %>
|
14
14
|
</div>
|
15
15
|
<% end %>
|
16
16
|
|
@@ -20,9 +20,9 @@
|
|
20
20
|
<%= public_send(input_tag, @name, @value, input_options) %>
|
21
21
|
<% end %>
|
22
22
|
|
23
|
-
<% if @suffix.present? %>
|
23
|
+
<% if suffix.present? || @suffix.present? %>
|
24
24
|
<div class="Polaris-TextField__Suffix">
|
25
|
-
<%= @suffix %>
|
25
|
+
<%= suffix || @suffix %>
|
26
26
|
</div>
|
27
27
|
<% end %>
|
28
28
|
|
@@ -19,6 +19,8 @@ module Polaris
|
|
19
19
|
|
20
20
|
attr_reader :value
|
21
21
|
|
22
|
+
renders_one :prefix
|
23
|
+
renders_one :suffix
|
22
24
|
renders_one :connected_left
|
23
25
|
renders_one :connected_right
|
24
26
|
|
@@ -143,7 +145,7 @@ module Polaris
|
|
143
145
|
default_options[:rows] = @rows
|
144
146
|
end
|
145
147
|
|
146
|
-
default_options.deep_merge(@input_options).tap do |opts|
|
148
|
+
default_options.deep_merge(@input_options).compact.tap do |opts|
|
147
149
|
opts[:class] = class_names(
|
148
150
|
opts[:class],
|
149
151
|
"Polaris-TextField__Input",
|
@@ -1,16 +1,52 @@
|
|
1
1
|
module Polaris
|
2
2
|
class FormBuilder < ActionView::Helpers::FormBuilder
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
3
|
+
attr_reader :template
|
4
|
+
|
5
|
+
delegate :render, :pluralize, to: :template
|
6
|
+
|
7
|
+
def errors_summary
|
8
|
+
return if object.blank?
|
9
|
+
return unless object.errors.any?
|
10
|
+
|
11
|
+
model_name = object.class.model_name.human.downcase
|
12
|
+
|
13
|
+
render Polaris::BannerComponent.new(
|
14
|
+
title: "There's #{pluralize(object.errors.count, "error")} with this #{model_name}:",
|
15
|
+
status: :critical,
|
16
|
+
) do
|
17
|
+
render(Polaris::ListComponent.new) do |list|
|
18
|
+
object.errors.each do |error|
|
19
|
+
list.item { error.full_message }
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
8
23
|
end
|
9
24
|
|
10
|
-
def
|
25
|
+
def error_for(method)
|
11
26
|
return if object.blank?
|
12
27
|
return unless object.errors.key?(method)
|
13
|
-
|
28
|
+
|
29
|
+
object.errors.full_messages_for(method)&.first
|
30
|
+
end
|
31
|
+
|
32
|
+
def polaris_text_field(method, **options, &block)
|
33
|
+
options[:error] ||= error_for(method)
|
34
|
+
if options[:error_hidden] && options[:error]
|
35
|
+
options[:error] = !!options[:error]
|
36
|
+
end
|
37
|
+
render Polaris::TextFieldComponent.new(form: self, attribute: method, **options, &block)
|
38
|
+
end
|
39
|
+
|
40
|
+
def polaris_select(method, **options, &block)
|
41
|
+
options[:error] ||= error_for(method)
|
42
|
+
if options[:error_hidden] && options[:error]
|
43
|
+
options[:error] = !!options[:error]
|
44
|
+
end
|
45
|
+
value = object&.public_send(method)
|
46
|
+
if value.present?
|
47
|
+
options[:selected] = value
|
48
|
+
end
|
49
|
+
render Polaris::SelectComponent.new(form: self, attribute: method, **options, &block)
|
14
50
|
end
|
15
51
|
end
|
16
52
|
end
|
@@ -0,0 +1,19 @@
|
|
1
|
+
module Polaris
|
2
|
+
module UrlHelper
|
3
|
+
def polaris_button_to(name = nil, options = nil, html_options = nil, &block)
|
4
|
+
html_options, options = options, name if block_given?
|
5
|
+
options ||= {}
|
6
|
+
html_options ||= {}
|
7
|
+
html_options[:classes] = html_options[:class]
|
8
|
+
html_options.delete(:class)
|
9
|
+
|
10
|
+
button = Polaris::HeadlessButton.new(submit: true, **html_options)
|
11
|
+
button = button.with_content(name) unless block_given?
|
12
|
+
content = render(button, &block)
|
13
|
+
|
14
|
+
button_to(options, button.html_options) do
|
15
|
+
content
|
16
|
+
end
|
17
|
+
end
|
18
|
+
end
|
19
|
+
end
|
@@ -30,11 +30,15 @@ module Polaris
|
|
30
30
|
pagination: "Polaris::PaginationComponent",
|
31
31
|
progress_bar: "Polaris::ProgressBarComponent",
|
32
32
|
radio_button: "Polaris::RadioButtonComponent",
|
33
|
+
resource_list: "Polaris::ResourceListComponent",
|
34
|
+
resource_item: "Polaris::ResourceItemComponent",
|
33
35
|
select: "Polaris::SelectComponent",
|
34
36
|
shopify_navigation: "Polaris::ShopifyNavigationComponent",
|
35
37
|
stack: "Polaris::StackComponent",
|
36
38
|
subheading: "Polaris::SubheadingComponent",
|
37
39
|
spinner: "Polaris::SpinnerComponent",
|
40
|
+
skeleton_body_text: "Polaris::SkeletonBodyTextComponent",
|
41
|
+
tag: "Polaris::TagComponent",
|
38
42
|
text_container: "Polaris::TextContainerComponent",
|
39
43
|
text_field: "Polaris::TextFieldComponent",
|
40
44
|
text_style: "Polaris::TextStyleComponent",
|
@@ -1,9 +1,11 @@
|
|
1
|
+
import ResourceItem from './resource_item_controller'
|
1
2
|
import Select from './select_controller'
|
2
3
|
import TextField from './text_field_controller'
|
3
4
|
|
4
|
-
export { Select, TextField }
|
5
|
+
export { ResourceItem, Select, TextField }
|
5
6
|
|
6
7
|
export function registerPolarisControllers(application) {
|
8
|
+
application.register('polaris-resource-item', ResourceItem)
|
7
9
|
application.register('polaris-select', Select)
|
8
10
|
application.register('polaris-text-field', TextField)
|
9
11
|
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { Controller } from 'stimulus'
|
2
|
+
|
3
|
+
export default class extends Controller {
|
4
|
+
static targets = ['link']
|
5
|
+
|
6
|
+
open(event) {
|
7
|
+
if (this.hasLinkTarget && this.targetNotClickable(event.target)) {
|
8
|
+
this.linkTarget.click()
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
targetNotClickable(element) {
|
13
|
+
return !element.closest('a') && !element.closest('button') && element.nodeName !== "INPUT"
|
14
|
+
}
|
15
|
+
}
|
@@ -99,7 +99,6 @@ export default class extends Controller {
|
|
99
99
|
|
100
100
|
// Making sure the new value has the same length of decimal places as the
|
101
101
|
// step / value has.
|
102
|
-
console.log(numericValue, this.stepValue)
|
103
102
|
const decimalPlaces = Math.max(dpl(numericValue), dpl(this.stepValue))
|
104
103
|
|
105
104
|
const newValue = Math.min(
|
@@ -0,0 +1,35 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
require 'rails/generators/active_record'
|
4
|
+
|
5
|
+
module PolarisViewComponents
|
6
|
+
class InstallGenerator < Rails::Generators::Base
|
7
|
+
source_root File.expand_path('templates', __dir__)
|
8
|
+
|
9
|
+
def add_npm_package
|
10
|
+
say "Adding NPM package", :green
|
11
|
+
run "yarn add polaris-view-components"
|
12
|
+
end
|
13
|
+
|
14
|
+
def add_to_stimulus_controller
|
15
|
+
say "Adding import to to Stimulus controller", :green
|
16
|
+
dir_path = "app/javascript/controllers"
|
17
|
+
empty_directory('app/javascript')
|
18
|
+
empty_directory(dir_path)
|
19
|
+
|
20
|
+
file_path = "#{dir_path}/index.js"
|
21
|
+
|
22
|
+
unless File.exist?(file_path)
|
23
|
+
copy_file 'stimulus_index.js', file_path
|
24
|
+
end
|
25
|
+
|
26
|
+
append_to_file file_path do
|
27
|
+
"import { registerPolarisControllers } from 'polaris-view-components'\nregisterPolarisControllers(application)"
|
28
|
+
end
|
29
|
+
end
|
30
|
+
|
31
|
+
def show_readme
|
32
|
+
readme 'README'
|
33
|
+
end
|
34
|
+
end
|
35
|
+
end
|
@@ -0,0 +1,14 @@
|
|
1
|
+
===============================================================================
|
2
|
+
|
3
|
+
Some manual setup is still required:
|
4
|
+
|
5
|
+
1. Setup Polaris styles in your layouts <head> tag:
|
6
|
+
|
7
|
+
<link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@6.6.0/dist/styles.css" />
|
8
|
+
<%= stylesheet_link_tag 'polaris_view_components' %>
|
9
|
+
|
10
|
+
2. Define Polaris style on your <body> tag:
|
11
|
+
|
12
|
+
<body style="<%= polaris_body_styles %>">
|
13
|
+
|
14
|
+
===============================================================================
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { Application } from 'stimulus'
|
2
|
+
import { definitionsFromContext } from 'stimulus/webpack-helpers'
|
3
|
+
|
4
|
+
const application = Application.start(document.documentElement)
|
5
|
+
const context = require.context('.', true, /_controller\.js$/)
|
6
|
+
application.load(definitionsFromContext(context))
|
7
|
+
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: polaris_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Dan Gamble
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-
|
12
|
+
date: 2021-09-08 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rails
|
@@ -503,6 +503,8 @@ files:
|
|
503
503
|
- app/components/polaris/form_layout_component.html.erb
|
504
504
|
- app/components/polaris/form_layout_component.rb
|
505
505
|
- app/components/polaris/heading_component.rb
|
506
|
+
- app/components/polaris/headless_button.html.erb
|
507
|
+
- app/components/polaris/headless_button.rb
|
506
508
|
- app/components/polaris/icon_component.html.erb
|
507
509
|
- app/components/polaris/icon_component.rb
|
508
510
|
- app/components/polaris/inline_error_component.html.erb
|
@@ -530,15 +532,22 @@ files:
|
|
530
532
|
- app/components/polaris/progress_bar_component.rb
|
531
533
|
- app/components/polaris/radio_button_component.html.erb
|
532
534
|
- app/components/polaris/radio_button_component.rb
|
535
|
+
- app/components/polaris/resource_item_component.html.erb
|
536
|
+
- app/components/polaris/resource_item_component.rb
|
537
|
+
- app/components/polaris/resource_list_component.rb
|
533
538
|
- app/components/polaris/select_component.html.erb
|
534
539
|
- app/components/polaris/select_component.rb
|
535
540
|
- app/components/polaris/shopify_navigation_component.html.erb
|
536
541
|
- app/components/polaris/shopify_navigation_component.rb
|
542
|
+
- app/components/polaris/skeleton_body_text_component.html.erb
|
543
|
+
- app/components/polaris/skeleton_body_text_component.rb
|
537
544
|
- app/components/polaris/spinner_component.html.erb
|
538
545
|
- app/components/polaris/spinner_component.rb
|
539
546
|
- app/components/polaris/stack_component.html.erb
|
540
547
|
- app/components/polaris/stack_component.rb
|
541
548
|
- app/components/polaris/subheading_component.rb
|
549
|
+
- app/components/polaris/tag_component.html.erb
|
550
|
+
- app/components/polaris/tag_component.rb
|
542
551
|
- app/components/polaris/text_container_component.rb
|
543
552
|
- app/components/polaris/text_field_component.html.erb
|
544
553
|
- app/components/polaris/text_field_component.rb
|
@@ -552,11 +561,17 @@ files:
|
|
552
561
|
- app/helpers/polaris/fetch_or_fallback_helper.rb
|
553
562
|
- app/helpers/polaris/form_builder.rb
|
554
563
|
- app/helpers/polaris/option_helper.rb
|
564
|
+
- app/helpers/polaris/url_helper.rb
|
555
565
|
- app/helpers/polaris/view_helper.rb
|
556
566
|
- app/javascript/polaris/index.js
|
567
|
+
- app/javascript/polaris/resource_item_controller.js
|
557
568
|
- app/javascript/polaris/select_controller.js
|
558
569
|
- app/javascript/polaris/text_field_controller.js
|
559
570
|
- app/validators/type_validator.rb
|
571
|
+
- lib/generators/polaris_view_components/USAGE
|
572
|
+
- lib/generators/polaris_view_components/install_generator.rb
|
573
|
+
- lib/generators/polaris_view_components/templates/README
|
574
|
+
- lib/generators/polaris_view_components/templates/stimulus_index.js
|
560
575
|
- lib/polaris/view_components.rb
|
561
576
|
- lib/polaris/view_components/engine.rb
|
562
577
|
- lib/polaris/view_components/version.rb
|