anchor_view_components 0.13.2 → 0.14.1
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/CHANGELOG.md +16 -0
- data/app/assets/builds/anchor-view-components.css +1 -1
- data/app/assets/stylesheets/components/button.css +4 -0
- data/app/components/anchor/breadcrumbs/item_component.html.erb +12 -11
- data/app/components/anchor/breadcrumbs_component.html.erb +1 -1
- data/app/components/anchor/button_component.html.erb +1 -0
- data/app/components/anchor/button_component.rb +3 -1
- data/app/components/anchor/icon_component.html.erb +1 -1
- data/app/components/anchor/side_nav_component.html.erb +0 -2
- data/app/components/anchor/table/pagination_component.en.yml +5 -0
- data/app/components/anchor/table/pagination_component.html.erb +12 -0
- data/app/components/anchor/table/pagination_component.rb +57 -0
- data/app/components/anchor/table_component.en.yml +0 -1
- data/app/components/anchor/table_component.html.erb +7 -6
- data/app/components/anchor/table_component.rb +13 -6
- data/app/components/anchor/text_component.rb +1 -1
- data/app/helpers/anchor/pagination.rb +33 -0
- data/app/helpers/anchor/view_helper.rb +7 -2
- data/lib/anchor/view_components/version.rb +1 -1
- data/previews/anchor/action_menu_component_preview/autoplacement.html.erb +1 -1
- data/previews/anchor/action_menu_component_preview/opens_a_dialog.html.erb +2 -2
- data/previews/anchor/action_menu_component_preview.rb +2 -2
- data/previews/anchor/badge_component_preview.rb +7 -11
- data/previews/anchor/banner_component_preview.rb +7 -12
- data/previews/anchor/breadcrumbs_component_preview.rb +5 -5
- data/previews/anchor/button_component_preview.rb +18 -18
- data/previews/anchor/dialog_component_preview/with_custom_show_button.html.erb +4 -3
- data/previews/anchor/dialog_component_preview/with_footer.html.erb +4 -6
- data/previews/anchor/dialog_component_preview.rb +6 -6
- data/previews/anchor/icon_component_preview.rb +2 -2
- data/previews/anchor/loading_indicator_component_preview.rb +5 -5
- data/previews/anchor/panel_component_preview/with_banner.html.erb +3 -3
- data/previews/anchor/panel_component_preview.rb +13 -15
- data/previews/anchor/preview.rb +5 -0
- data/previews/anchor/side_nav_component_preview/default.html.erb +9 -9
- data/previews/anchor/side_nav_component_preview.rb +1 -1
- data/previews/anchor/tab_bar_component_preview.rb +5 -5
- data/previews/anchor/table_component_preview.rb +34 -14
- data/previews/anchor/text_component_preview.rb +15 -28
- data/previews/anchor/toast_component_preview.rb +7 -16
- data/previews/pages/helpers.md.erb +9 -0
- metadata +8 -2
@@ -1,11 +1,11 @@
|
|
1
1
|
module Anchor
|
2
|
-
class BreadcrumbsComponentPreview <
|
3
|
-
#
|
4
|
-
#
|
2
|
+
class BreadcrumbsComponentPreview < Preview
|
3
|
+
# @param label text "A brief description of the purpose of the navigation,
|
4
|
+
# omitting the term ‘navigation’, as the screen reader will read both the
|
5
|
+
# role and the contents of the label. Defaults to ‘Breadcrumb’."
|
5
6
|
# @param number_of_breadcrumbs number
|
6
|
-
# rubocop:enable Layout/LineLength
|
7
7
|
def playground(label: "Accessible label", number_of_breadcrumbs: 3)
|
8
|
-
|
8
|
+
anchor_breadcrumbs(label:) do |c|
|
9
9
|
Array.new(number_of_breadcrumbs || 3) do |i|
|
10
10
|
c.with_item(href: "#").with_content("Breadcrumb #{i + 1}")
|
11
11
|
end
|
@@ -1,36 +1,40 @@
|
|
1
1
|
module Anchor
|
2
|
-
class ButtonComponentPreview <
|
2
|
+
class ButtonComponentPreview < Preview
|
3
3
|
# @param content text
|
4
4
|
# @param tag select {{ Anchor::ButtonComponent::TAG_OPTIONS }}
|
5
5
|
# @param type select {{ Anchor::ButtonComponent::TYPE_OPTIONS }}
|
6
6
|
# @param size [Symbol] select {{ Anchor::ButtonComponent::SIZE_OPTIONS }}
|
7
7
|
# @param variant select {{ Anchor::ButtonComponent::VARIANT_OPTIONS }}
|
8
8
|
# @param disabled toggle
|
9
|
+
# @param full_width toggle
|
9
10
|
def playground(
|
10
11
|
content: "Button",
|
11
12
|
tag: Anchor::ButtonComponent::TAG_DEFAULT,
|
12
13
|
type: Anchor::ButtonComponent::TYPE_DEFAULT,
|
13
14
|
size: Anchor::ButtonComponent::SIZE_DEFAULT,
|
14
15
|
variant: Anchor::ButtonComponent::VARIANT_DEFAULT,
|
15
|
-
disabled: false
|
16
|
+
disabled: false,
|
17
|
+
full_width: false
|
16
18
|
)
|
17
|
-
|
19
|
+
anchor_button(
|
20
|
+
content,
|
18
21
|
tag:,
|
19
22
|
type:,
|
20
23
|
size:,
|
21
24
|
variant:,
|
22
|
-
disabled
|
23
|
-
|
25
|
+
disabled:,
|
26
|
+
full_width:
|
27
|
+
)
|
24
28
|
end
|
25
29
|
|
26
30
|
# @!group Sizes
|
27
31
|
|
28
32
|
def default
|
29
|
-
|
33
|
+
anchor_button("Button")
|
30
34
|
end
|
31
35
|
|
32
36
|
def small
|
33
|
-
|
37
|
+
anchor_button("Button", size: :small)
|
34
38
|
end
|
35
39
|
|
36
40
|
# @!endgroup
|
@@ -38,22 +42,19 @@ module Anchor
|
|
38
42
|
# @!group Variants
|
39
43
|
|
40
44
|
def basic
|
41
|
-
|
45
|
+
anchor_button("Button")
|
42
46
|
end
|
43
47
|
|
44
48
|
def primary
|
45
|
-
|
46
|
-
.with_content("Button"))
|
49
|
+
anchor_button("Button", variant: :primary)
|
47
50
|
end
|
48
51
|
|
49
52
|
def critical
|
50
|
-
|
51
|
-
.with_content("Button"))
|
53
|
+
anchor_button("Button", variant: :critical)
|
52
54
|
end
|
53
55
|
|
54
56
|
def text
|
55
|
-
|
56
|
-
.with_content("Button"))
|
57
|
+
anchor_button("Button", variant: :text)
|
57
58
|
end
|
58
59
|
|
59
60
|
# @!endgroup
|
@@ -61,14 +62,14 @@ module Anchor
|
|
61
62
|
# @!group With Icons
|
62
63
|
|
63
64
|
def starting_icon
|
64
|
-
|
65
|
+
anchor_button do |c|
|
65
66
|
c.with_starting_icon(icon: "nav-arrow-left")
|
66
67
|
"Button"
|
67
68
|
end
|
68
69
|
end
|
69
70
|
|
70
71
|
def ending_icon
|
71
|
-
|
72
|
+
anchor_button do |c|
|
72
73
|
c.with_ending_icon(icon: "nav-arrow-right")
|
73
74
|
"Button"
|
74
75
|
end
|
@@ -77,8 +78,7 @@ module Anchor
|
|
77
78
|
# @!endgroup
|
78
79
|
|
79
80
|
def link
|
80
|
-
|
81
|
-
.with_content("Button"))
|
81
|
+
anchor_button("Button", tag: :a, href: "#")
|
82
82
|
end
|
83
83
|
end
|
84
84
|
end
|
@@ -1,12 +1,13 @@
|
|
1
|
-
<%=
|
1
|
+
<%= anchor_button(
|
2
|
+
"Show dialog",
|
2
3
|
data: {
|
3
4
|
action: "invoker#openDialog",
|
4
5
|
controller: "invoker",
|
5
6
|
invoker_dialog_outlet: "#my-dialog",
|
6
7
|
},
|
7
|
-
)
|
8
|
+
) %>
|
8
9
|
|
9
|
-
<%=
|
10
|
+
<%= anchor_dialog(
|
10
11
|
id: "my-dialog",
|
11
12
|
title: "Dialog Title",
|
12
13
|
) do |dialog| %>
|
@@ -1,17 +1,15 @@
|
|
1
|
-
<%=
|
1
|
+
<%= anchor_dialog(
|
2
2
|
id: "my-dialog",
|
3
3
|
title: "Dialog Title",
|
4
4
|
) do |dialog| %>
|
5
|
-
<% dialog.
|
5
|
+
<% dialog.with_show_button_content("Show Dialog") %>
|
6
6
|
|
7
7
|
<% dialog.with_body do %>
|
8
8
|
<%= tag.p "Content" %>
|
9
9
|
<% end %>
|
10
10
|
|
11
11
|
<% dialog.with_footer do %>
|
12
|
-
<%=
|
13
|
-
|
14
|
-
).with_content("Cancel") %>
|
15
|
-
<%= render Anchor::ButtonComponent.new(variant: :primary).with_content("Save") %>
|
12
|
+
<%= anchor_button("Cancel", data: { action: "dialog#close" }) %>
|
13
|
+
<%= anchor_button("Save", variant: :primary) %>
|
16
14
|
<% end %>
|
17
15
|
<% end %>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
module Anchor
|
2
|
-
class DialogComponentPreview <
|
2
|
+
class DialogComponentPreview < Preview
|
3
3
|
# @param title text
|
4
4
|
# @param body_text textarea
|
5
5
|
# @param id text
|
@@ -8,9 +8,9 @@ module Anchor
|
|
8
8
|
id: "unique-id",
|
9
9
|
title: "Dialog Title"
|
10
10
|
)
|
11
|
-
|
12
|
-
c.
|
13
|
-
c.
|
11
|
+
anchor_dialog(id:, title:) do |c|
|
12
|
+
c.with_show_button_content("Show Dialog")
|
13
|
+
c.with_body_content(body_text)
|
14
14
|
end
|
15
15
|
end
|
16
16
|
|
@@ -22,13 +22,13 @@ module Anchor
|
|
22
22
|
def with_custom_show_button; end
|
23
23
|
|
24
24
|
def with_link
|
25
|
-
|
25
|
+
anchor_dialog(
|
26
26
|
id: "my-dialog",
|
27
27
|
title: "Dialog Title"
|
28
28
|
) do |c|
|
29
29
|
c.with_show_button(classes: "all-unset underline")
|
30
30
|
.with_content("Show Dialog")
|
31
|
-
c.
|
31
|
+
c.with_body_content("Content")
|
32
32
|
end
|
33
33
|
end
|
34
34
|
end
|
@@ -1,12 +1,12 @@
|
|
1
1
|
module Anchor
|
2
|
-
class IconComponentPreview <
|
2
|
+
class IconComponentPreview < Preview
|
3
3
|
# Icons
|
4
4
|
# ------------
|
5
5
|
# We use icons from [Iconoir](https://iconoir.com). Not all icons are
|
6
6
|
# currently included in Anchor; those that are [can be viewed on
|
7
7
|
# GitHub](https://github.com/BuoySoftware/anchor_view_components/tree/main/app/assets/images/icons).
|
8
8
|
def default
|
9
|
-
|
9
|
+
anchor_icon(icon: "actions-check-circle-base")
|
10
10
|
end
|
11
11
|
end
|
12
12
|
end
|
@@ -1,25 +1,25 @@
|
|
1
1
|
module Anchor
|
2
|
-
class LoadingIndicatorComponentPreview <
|
2
|
+
class LoadingIndicatorComponentPreview < Preview
|
3
3
|
# rubocop:disable Layout/LineLength
|
4
4
|
# @param variant [Symbol] select {{ Anchor::LoadingIndicatorComponent::VARIANT_OPTIONS }}
|
5
5
|
# rubocop:enable Layout/LineLength
|
6
6
|
def playground(
|
7
7
|
variant: Anchor::LoadingIndicatorComponent::VARIANT_DEFAULT
|
8
8
|
)
|
9
|
-
|
9
|
+
anchor_loading_indicator(variant:)
|
10
10
|
end
|
11
11
|
|
12
12
|
# @!group Variants
|
13
13
|
def sm
|
14
|
-
|
14
|
+
anchor_loading_indicator(variant: :sm)
|
15
15
|
end
|
16
16
|
|
17
17
|
def md
|
18
|
-
|
18
|
+
anchor_loading_indicator(variant: :md)
|
19
19
|
end
|
20
20
|
|
21
21
|
def lg
|
22
|
-
|
22
|
+
anchor_loading_indicator(variant: :lg)
|
23
23
|
end
|
24
24
|
# @!endgroup
|
25
25
|
end
|
@@ -1,8 +1,8 @@
|
|
1
|
-
<%=
|
2
|
-
<% panel.
|
1
|
+
<%= anchor_panel(active: true) do |panel| %>
|
2
|
+
<% panel.with_header_content("Test Results") %>
|
3
3
|
|
4
4
|
<% panel.with_body do %>
|
5
|
-
<%=
|
5
|
+
<%= anchor_banner(variant: :critical) do %>
|
6
6
|
<%= tag.p "Additional testing is required.", class: "text-critical font-semibold" %>
|
7
7
|
<% end %>
|
8
8
|
|
@@ -1,15 +1,15 @@
|
|
1
1
|
module Anchor
|
2
|
-
class PanelComponentPreview <
|
2
|
+
class PanelComponentPreview < Preview
|
3
3
|
def inactive
|
4
|
-
|
5
|
-
component.
|
6
|
-
component.
|
4
|
+
anchor_panel(active: false) do |component|
|
5
|
+
component.with_header_content("My Panel")
|
6
|
+
component.with_body_content("I'm hidden")
|
7
7
|
end
|
8
8
|
end
|
9
9
|
|
10
10
|
def active
|
11
|
-
|
12
|
-
component.
|
11
|
+
anchor_panel(active: true) do |component|
|
12
|
+
component.with_header_content("My Panel")
|
13
13
|
component.with_body do
|
14
14
|
"The panel contents are displayed when it is active."
|
15
15
|
end
|
@@ -17,9 +17,9 @@ module Anchor
|
|
17
17
|
end
|
18
18
|
|
19
19
|
def with_footer
|
20
|
-
|
21
|
-
component.
|
22
|
-
component.
|
20
|
+
anchor_panel(active: true) do |component|
|
21
|
+
component.with_header_content("My Panel")
|
22
|
+
component.with_body_content("Panel with footer")
|
23
23
|
component
|
24
24
|
.with_footer
|
25
25
|
.with_primary_action(form: "example", label: "Save")
|
@@ -27,15 +27,13 @@ module Anchor
|
|
27
27
|
end
|
28
28
|
|
29
29
|
def with_footer_with_supporting_text
|
30
|
-
|
31
|
-
component.
|
30
|
+
anchor_panel(active: true) do |component|
|
31
|
+
component.with_header_content("My Panel")
|
32
32
|
|
33
|
-
component
|
34
|
-
.with_body
|
35
|
-
.with_content("Panel with footer and supporting text")
|
33
|
+
component.with_body_content("Panel with footer and supporting text")
|
36
34
|
|
37
35
|
component.with_footer do |footer|
|
38
|
-
footer.
|
36
|
+
footer.with_supporting_text_content("1 of 2")
|
39
37
|
footer.with_primary_action(form: "example", label: "Save")
|
40
38
|
end
|
41
39
|
end
|
@@ -14,27 +14,27 @@
|
|
14
14
|
"Reports",
|
15
15
|
"Station Installation",
|
16
16
|
"Test Results",
|
17
|
-
].map.with_index { |label, index| {label:, path: "#", active: index == 0} }
|
17
|
+
].map.with_index { |label, index| {label:, path: "#", active: index == 0} }
|
18
18
|
|
19
19
|
apps = [
|
20
20
|
{
|
21
21
|
label: "Centers",
|
22
|
-
path: "#"
|
22
|
+
path: "#"
|
23
23
|
},
|
24
24
|
{
|
25
25
|
label: "Corporate",
|
26
|
-
path: "#"
|
26
|
+
path: "#"
|
27
27
|
},
|
28
28
|
{
|
29
29
|
label: "Medical Device",
|
30
|
-
path: "#"
|
30
|
+
path: "#"
|
31
31
|
}
|
32
|
-
]
|
32
|
+
]
|
33
33
|
%>
|
34
|
-
<%=
|
35
|
-
employee: OpenStruct.new(first_name: 'John', last_name: 'Doe'),
|
36
|
-
nav_items:,
|
37
|
-
apps:,
|
34
|
+
<%= anchor_side_nav(
|
35
|
+
employee: OpenStruct.new(first_name: 'John', last_name: 'Doe'),
|
36
|
+
nav_items:,
|
37
|
+
apps:,
|
38
38
|
apps_button_text: "Medical Device",
|
39
39
|
) do |c| %>
|
40
40
|
<% c.with_footer_links do %>
|
@@ -1,11 +1,11 @@
|
|
1
1
|
module Anchor
|
2
|
-
class TabBarComponentPreview <
|
3
|
-
#
|
4
|
-
#
|
2
|
+
class TabBarComponentPreview < Preview
|
3
|
+
# @param label text "A brief description of the purpose of the navigation,
|
4
|
+
# omitting the term ‘navigation’, as the screen reader will read both the
|
5
|
+
# role and the contents of the label."
|
5
6
|
# @param number_of_tabs number
|
6
|
-
# rubocop:enable Layout/LineLength
|
7
7
|
def playground(label: "Accessible label", number_of_tabs: 3)
|
8
|
-
|
8
|
+
anchor_tab_bar(label:) do |c|
|
9
9
|
Array.new(number_of_tabs || 3) do |i|
|
10
10
|
c.with_tab(href: "#", active: i.zero?).with_content("Label")
|
11
11
|
end
|
@@ -1,5 +1,5 @@
|
|
1
1
|
module Anchor
|
2
|
-
class TableComponentPreview <
|
2
|
+
class TableComponentPreview < Preview
|
3
3
|
class MockData
|
4
4
|
attr_reader :id, :name
|
5
5
|
|
@@ -13,41 +13,61 @@ module Anchor
|
|
13
13
|
end
|
14
14
|
end
|
15
15
|
|
16
|
-
|
17
|
-
|
16
|
+
# @param caption text
|
17
|
+
# @param paginate toggle
|
18
|
+
# @param rows_link_to text
|
19
|
+
# @param sortable toggle
|
20
|
+
def playground(
|
21
|
+
caption: "Demo table",
|
22
|
+
paginate: false,
|
23
|
+
rows_link_to: "#a_link/",
|
24
|
+
sortable: false,
|
25
|
+
sort_url: ->(data) { "/sort/#{data.id}" }
|
26
|
+
)
|
27
|
+
anchor_table(
|
18
28
|
data:,
|
19
|
-
caption
|
20
|
-
|
29
|
+
caption:,
|
30
|
+
paginate:,
|
31
|
+
rows_link_to: ->(_) { rows_link_to },
|
32
|
+
sortable:,
|
33
|
+
sort_url:
|
21
34
|
) do |table|
|
22
|
-
table.with_column(header: "
|
35
|
+
table.with_column(header: "ID", value: :id)
|
23
36
|
table.with_column(header: "Name", value: -> { _1.name.capitalize })
|
24
37
|
end
|
25
38
|
end
|
26
39
|
|
27
|
-
def
|
28
|
-
|
40
|
+
def with_row_links
|
41
|
+
anchor_table(
|
29
42
|
data:,
|
30
43
|
rows_link_to: ->(_record) { "#a_link/" }
|
31
44
|
) do |table|
|
32
|
-
table.with_column(header: "
|
45
|
+
table.with_column(header: "ID", value: :id)
|
33
46
|
table.with_column(header: "Name", value: -> { _1.name.capitalize })
|
34
47
|
end
|
35
48
|
end
|
36
49
|
|
37
50
|
def sortable
|
38
|
-
|
51
|
+
anchor_table(
|
39
52
|
data:,
|
40
53
|
sortable: true,
|
41
54
|
sort_url: ->(data) { "/sort/#{data.id}" }
|
42
55
|
) do |table|
|
43
|
-
table.with_column(header: "
|
56
|
+
table.with_column(header: "ID", value: :id)
|
44
57
|
table.with_column(header: "Name", value: -> { _1.name.capitalize })
|
45
58
|
end
|
46
59
|
end
|
47
60
|
|
48
|
-
def
|
49
|
-
|
50
|
-
table.with_column(header: "
|
61
|
+
def empty_data
|
62
|
+
anchor_table(data: []) do |table|
|
63
|
+
table.with_column(header: "ID", value: :id)
|
64
|
+
table.with_column(header: "Name", value: -> { _1.name.capitalize })
|
65
|
+
end
|
66
|
+
end
|
67
|
+
|
68
|
+
def paginated
|
69
|
+
anchor_table(data:, paginate: true) do |table|
|
70
|
+
table.with_column(header: "ID", value: :id)
|
51
71
|
table.with_column(header: "Name", value: -> { _1.name.capitalize })
|
52
72
|
end
|
53
73
|
end
|
@@ -1,75 +1,62 @@
|
|
1
1
|
module Anchor
|
2
|
-
class TextComponentPreview <
|
2
|
+
class TextComponentPreview < Preview
|
3
3
|
TEXT = "The quick brown fox jumps over the lazy dog.".freeze
|
4
4
|
|
5
|
-
# rubocop:disable Layout/LineLength
|
6
5
|
# @param content text
|
7
6
|
# @param tag text
|
8
|
-
# @param variant [Symbol] select
|
9
|
-
#
|
7
|
+
# @param variant [Symbol] select
|
8
|
+
# {{ Anchor::TextComponent::VARIANT_OPTIONS }}
|
10
9
|
def playground(
|
11
10
|
content: TEXT,
|
12
11
|
tag: Anchor::TextComponent::TAG_DEFAULT,
|
13
12
|
variant: Anchor::TextComponent::VARIANT_DEFAULT
|
14
13
|
)
|
15
|
-
|
16
|
-
.with_content(content)
|
14
|
+
anchor_text(content, variant:, tag:)
|
17
15
|
end
|
18
16
|
|
19
17
|
# @!group Variants
|
20
18
|
def body_sm
|
21
|
-
|
22
|
-
.with_content(TEXT)
|
19
|
+
anchor_text(TEXT, variant: :body_sm)
|
23
20
|
end
|
24
21
|
|
25
22
|
def body_base
|
26
|
-
|
27
|
-
.with_content(TEXT)
|
23
|
+
anchor_text(TEXT, variant: :body_base)
|
28
24
|
end
|
29
25
|
|
30
26
|
def body_lg
|
31
|
-
|
32
|
-
.with_content(TEXT)
|
27
|
+
anchor_text(TEXT, variant: :body_lg)
|
33
28
|
end
|
34
29
|
|
35
30
|
def subheading_sm
|
36
|
-
|
37
|
-
.with_content(TEXT)
|
31
|
+
anchor_text(TEXT, variant: :subheading_sm)
|
38
32
|
end
|
39
33
|
|
40
34
|
def subheading_xs
|
41
|
-
|
42
|
-
.with_content(TEXT)
|
35
|
+
anchor_text(TEXT, variant: :subheading_xs)
|
43
36
|
end
|
44
37
|
|
45
38
|
def heading_base
|
46
|
-
|
47
|
-
.with_content(TEXT)
|
39
|
+
anchor_text(TEXT, variant: :heading_base, tag: :h3)
|
48
40
|
end
|
49
41
|
|
50
42
|
def heading_lg
|
51
|
-
|
52
|
-
.with_content(TEXT)
|
43
|
+
anchor_text(TEXT, variant: :heading_lg, tag: :h3)
|
53
44
|
end
|
54
45
|
|
55
46
|
def heading_xl
|
56
|
-
|
57
|
-
.with_content(TEXT)
|
47
|
+
anchor_text(TEXT, variant: :heading_xl, tag: :h3)
|
58
48
|
end
|
59
49
|
|
60
50
|
def heading_2xl
|
61
|
-
|
62
|
-
.with_content(TEXT)
|
51
|
+
anchor_text(TEXT, variant: :heading_2xl, tag: :h3)
|
63
52
|
end
|
64
53
|
|
65
54
|
def heading_3xl
|
66
|
-
|
67
|
-
.with_content(TEXT)
|
55
|
+
anchor_text(TEXT, variant: :heading_3xl, tag: :h3)
|
68
56
|
end
|
69
57
|
|
70
58
|
def heading_4xl
|
71
|
-
|
72
|
-
.with_content(TEXT)
|
59
|
+
anchor_text(TEXT, variant: :heading_4xl, tag: :h3)
|
73
60
|
end
|
74
61
|
# @!endgroup
|
75
62
|
end
|
@@ -1,33 +1,24 @@
|
|
1
1
|
module Anchor
|
2
|
-
class ToastComponentPreview <
|
2
|
+
class ToastComponentPreview < Preview
|
3
3
|
def variant_notice
|
4
|
-
|
5
|
-
"Questionnaire created"
|
6
|
-
))
|
4
|
+
anchor_toast("Questionnaire created", variant: :notice)
|
7
5
|
end
|
8
6
|
|
9
7
|
def variant_success
|
10
|
-
|
11
|
-
"Questionnaire created"
|
12
|
-
))
|
8
|
+
anchor_toast("Questionnaire created", variant: :success)
|
13
9
|
end
|
14
10
|
|
15
11
|
def variant_error
|
16
|
-
|
17
|
-
Anchor::ToastComponent.new(variant: :error, role: :alert)
|
18
|
-
.with_content("Questionnaire deleted")
|
19
|
-
)
|
12
|
+
anchor_toast("Questionnaire deleted", variant: :error)
|
20
13
|
end
|
21
14
|
|
22
15
|
def variant_alert
|
23
|
-
|
24
|
-
"Questionnaire created"
|
25
|
-
))
|
16
|
+
anchor_toast("Questionnaire created", variant: :alert)
|
26
17
|
end
|
27
18
|
|
28
19
|
def with_icon
|
29
|
-
|
30
|
-
|
20
|
+
anchor_toast do |toast|
|
21
|
+
toast.with_icon(icon: "actions-check-circle-base")
|
31
22
|
"Confirmed"
|
32
23
|
end
|
33
24
|
end
|
@@ -0,0 +1,9 @@
|
|
1
|
+
## Component helpers
|
2
|
+
|
3
|
+
All components have [a corresponding helper](https://github.com/BuoySoftware/anchor_view_components/blob/main/app/helpers/anchor/view_helper.rb) method which reduces some of the
|
4
|
+
repetitive syntax when using ViewComponent’s built-in render call.
|
5
|
+
|
6
|
+
```diff
|
7
|
+
-<%%= render(Anchor::ButtonComponent.new.with_content("Button")) %>
|
8
|
+
+<%%= anchor_button("Button") do %>
|
9
|
+
```
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: anchor_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.14.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Buoy Software
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-09-
|
11
|
+
date: 2023-09-18 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -113,6 +113,9 @@ files:
|
|
113
113
|
- app/components/anchor/tab_bar/tab_component.rb
|
114
114
|
- app/components/anchor/tab_bar_component.html.erb
|
115
115
|
- app/components/anchor/tab_bar_component.rb
|
116
|
+
- app/components/anchor/table/pagination_component.en.yml
|
117
|
+
- app/components/anchor/table/pagination_component.html.erb
|
118
|
+
- app/components/anchor/table/pagination_component.rb
|
116
119
|
- app/components/anchor/table_component.en.yml
|
117
120
|
- app/components/anchor/table_component.html.erb
|
118
121
|
- app/components/anchor/table_component.rb
|
@@ -123,6 +126,7 @@ files:
|
|
123
126
|
- app/components/anchor/toast_controller.ts
|
124
127
|
- app/components/anchor/toggle_controller.ts
|
125
128
|
- app/helpers/anchor/fetch_or_fallback_helper.rb
|
129
|
+
- app/helpers/anchor/pagination.rb
|
126
130
|
- app/helpers/anchor/view_helper.rb
|
127
131
|
- lib/anchor/view_components.rb
|
128
132
|
- lib/anchor/view_components/engine.rb
|
@@ -143,12 +147,14 @@ files:
|
|
143
147
|
- previews/anchor/loading_indicator_component_preview.rb
|
144
148
|
- previews/anchor/panel_component_preview.rb
|
145
149
|
- previews/anchor/panel_component_preview/with_banner.html.erb
|
150
|
+
- previews/anchor/preview.rb
|
146
151
|
- previews/anchor/side_nav_component_preview.rb
|
147
152
|
- previews/anchor/side_nav_component_preview/default.html.erb
|
148
153
|
- previews/anchor/tab_bar_component_preview.rb
|
149
154
|
- previews/anchor/table_component_preview.rb
|
150
155
|
- previews/anchor/text_component_preview.rb
|
151
156
|
- previews/anchor/toast_component_preview.rb
|
157
|
+
- previews/pages/helpers.md.erb
|
152
158
|
- previews/pages/logos.md.erb
|
153
159
|
homepage: https://github.com/BuoySoftware/anchor_view_components
|
154
160
|
licenses:
|