nfg_ui 0.10.15.1 → 0.11.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 +0 -2
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_slat.scss +35 -37
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_slat.scss +109 -79
- data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_story.scss +1 -1
- data/lib/nfg_ui.rb +0 -1
- data/lib/nfg_ui/components/elements/slat_item.rb +13 -8
- data/lib/nfg_ui/components/patterns/slat_actions.rb +9 -35
- data/lib/nfg_ui/components/patterns/slats.rb +60 -0
- data/lib/nfg_ui/components/traits.rb +1 -0
- data/lib/nfg_ui/components/traits/slats.rb +26 -0
- data/lib/nfg_ui/version.rb +1 -1
- metadata +3 -3
- data/lib/nfg_ui/components/patterns/slat_list.rb +0 -18
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f61158331b40d623b2841200a49849f0afc8ac396b4e14d0c422d565e428276b
|
|
4
|
+
data.tar.gz: 4e662c099cdcacb5aadbaa096fc8a31d0aab5c5a9b07283fd11dd87b3d56e652
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 610dc6560c3d1f3203efda9a84778921c89b75b1e4d4c347ef9057beca044f281fc6f23df9ec229988a26e3efdb2d679ef41c83c4e0a2cde18615e6cff00b3c6
|
|
7
|
+
data.tar.gz: ff44548766c96889fcf7f0a81c5bc65d52930a269f4971a686c5952e75e7d1bae70b0b1d59e5d06650654f3b7db953206754e5cd19fde0f9c5f22f0ce2c5e971
|
data/README.md
CHANGED
|
@@ -190,7 +190,6 @@ Groupings of elements to create rich interfaces. For example, an `:activity_feed
|
|
|
190
190
|
* `:media`
|
|
191
191
|
* `:modal`
|
|
192
192
|
* `:navbar`
|
|
193
|
-
* `:slat_list`
|
|
194
193
|
* `:task_list`
|
|
195
194
|
* *Tiles*
|
|
196
195
|
* `:tile`
|
|
@@ -425,7 +424,6 @@ FOUNDATION_COMPONENT_NAMES = %i[color
|
|
|
425
424
|
navbar
|
|
426
425
|
navbar_nav
|
|
427
426
|
page_header
|
|
428
|
-
slat_list [tooltip]
|
|
429
427
|
tab_content
|
|
430
428
|
task_list
|
|
431
429
|
tile [icon, tooltip]
|
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
// Slat and its child elements
|
|
2
|
+
.slat {
|
|
3
|
+
display: -ms-flexbox;
|
|
4
|
+
-ms-flex-direction: column;
|
|
5
|
+
-ms-flex-wrap: nowrap;
|
|
6
|
+
|
|
7
|
+
// Nowrap version -- used when the goal is to have all slat-item columns on the same line in smaller screens
|
|
8
|
+
&:not(.slats-nowrap) { // noting the :not() psuedo-class meaning all slats that don't have this class get these styles
|
|
9
|
+
.slat-body {
|
|
10
|
+
@include media-breakpoint-down(sm) { -ms-flex-direction: column; }
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
|
|
1
16
|
// Slat and its child elements
|
|
2
17
|
.slat {
|
|
3
18
|
display: -ms-flexbox;
|
|
@@ -5,6 +20,8 @@
|
|
|
5
20
|
-ms-flex-wrap: wrap;
|
|
6
21
|
}
|
|
7
22
|
|
|
23
|
+
|
|
24
|
+
// Body Column
|
|
8
25
|
.slat-body {
|
|
9
26
|
display: -ms-flexbox;
|
|
10
27
|
-ms-flex-direction: row;
|
|
@@ -12,35 +29,32 @@
|
|
|
12
29
|
-ms-flex-positive: 1;
|
|
13
30
|
-ms-flex-negative: 0;
|
|
14
31
|
-ms-flex-preferred-size: 0;
|
|
32
|
+
}
|
|
15
33
|
|
|
16
|
-
.slat-item {
|
|
17
|
-
-ms-flex-positive: 1;
|
|
18
|
-
-ms-flex-negative: 0;
|
|
19
|
-
-ms-flex-preferred-size: 0;
|
|
20
|
-
&:first-child {
|
|
21
|
-
-ms-flex-positive: 2;
|
|
22
34
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
35
|
+
// Item Column
|
|
36
|
+
.slat-item {
|
|
37
|
+
-ms-flex-positive: 1;
|
|
38
|
+
-ms-flex-negative: 0;
|
|
39
|
+
-ms-flex-preferred-size: 0;
|
|
40
|
+
&.slat-item-md { -ms-flex-positive: 2; }
|
|
41
|
+
&.slat-item-lg { -ms-flex-positive: 3; }
|
|
42
|
+
&.slat-item-xl { -ms-flex-positive: 4; }
|
|
28
43
|
}
|
|
29
44
|
|
|
45
|
+
|
|
46
|
+
// Action Column
|
|
30
47
|
.slat-actions {
|
|
31
48
|
-ms-flex-positive: 0;
|
|
32
49
|
-ms-flex-negative: 0;
|
|
33
|
-
-ms-flex-preferred-size: ($spacer *
|
|
34
|
-
min-width: ($spacer *
|
|
35
|
-
@include media-breakpoint-up(
|
|
36
|
-
-ms-flex-preferred-size: ($spacer *
|
|
37
|
-
min-width: ($spacer *
|
|
50
|
+
-ms-flex-preferred-size: ($spacer * 2.5);
|
|
51
|
+
min-width: ($spacer * 2.5);
|
|
52
|
+
@include media-breakpoint-up(md) {
|
|
53
|
+
-ms-flex-preferred-size: ($spacer * 5.5);
|
|
54
|
+
min-width: ($spacer * 5.5);
|
|
38
55
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
// Sizing options
|
|
42
|
-
&.slat-actions-sm { -ms-flex-preferred-size: ($spacer * 1.5); }
|
|
43
|
-
&.slat-actions-lg { -ms-flex-preferred-size: ($spacer * 12); }
|
|
56
|
+
.slat-actions-sm & { -ms-flex-preferred-size: ($spacer * 2.5); }
|
|
57
|
+
.slat-actions-lg & { -ms-flex-preferred-size: ($spacer * 5.5); }
|
|
44
58
|
}
|
|
45
59
|
|
|
46
60
|
|
|
@@ -48,19 +62,3 @@
|
|
|
48
62
|
.slat-header {
|
|
49
63
|
.slat-body { -ms-flex-align: center; }
|
|
50
64
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
// Slat list layout
|
|
54
|
-
.slat-list {
|
|
55
|
-
|
|
56
|
-
// Non-breaked version -- used when the goal is to have all slat-item columns on the same line in smaller screens
|
|
57
|
-
&:not(.slat-list-no-break) {
|
|
58
|
-
.slat-item {
|
|
59
|
-
&:first-child {
|
|
60
|
-
@include media-breakpoint-down(sm) {
|
|
61
|
-
-ms-flex-preferred-size: 100%;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}
|
|
@@ -1,112 +1,142 @@
|
|
|
1
|
+
$slat-actions-sm-width: 36px;
|
|
2
|
+
$slat-actions-lg-width: 108px;
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
// Slat list layout
|
|
6
|
+
.slats {
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-flow: column nowrap;
|
|
9
|
+
|
|
10
|
+
// Nowrap version -- used when the goal is to have all slat-item columns on the same line in smaller screens
|
|
11
|
+
:not(.slats-nowrap) { // noting the :not() psuedo-class meaning all slats that don't have this class get these styles
|
|
12
|
+
.slat-body {
|
|
13
|
+
@include media-breakpoint-down(sm) { flex-direction: column; }
|
|
14
|
+
}
|
|
15
|
+
.slat-item + .slat-item {
|
|
16
|
+
@include media-breakpoint-down(sm) { margin-top: $spacer; }
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
|
|
1
22
|
// Slat and its child elements
|
|
2
23
|
.slat {
|
|
3
24
|
display: flex;
|
|
4
25
|
flex-flow: row wrap;
|
|
26
|
+
padding-top: $spacer;
|
|
27
|
+
padding-bottom: $spacer;
|
|
28
|
+
+ .slat { border-top: $border-width solid $border-color; }
|
|
29
|
+
|
|
30
|
+
// Sizing options
|
|
31
|
+
.slats-sm & {
|
|
32
|
+
padding-top: ($spacer * .5);
|
|
33
|
+
padding-bottom: ($spacer * .5);
|
|
34
|
+
}
|
|
35
|
+
.slats-lg & {
|
|
36
|
+
padding-top: ($spacer * 1.5);
|
|
37
|
+
padding-bottom: ($spacer * 1.5);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Various states
|
|
41
|
+
&.ui-sortable-placeholder {
|
|
42
|
+
visibility: visible !important;
|
|
43
|
+
background: theme-color("light");
|
|
44
|
+
border: $border-width dashed $border-color;
|
|
45
|
+
+ .slat { border-top: none; }
|
|
46
|
+
+ &.ui-sortable-helper {
|
|
47
|
+
border-top-style: dashed;
|
|
48
|
+
+ &.slat { border-top: none; }
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
&.ui-sortable-helper {
|
|
52
|
+
border-top: none;
|
|
53
|
+
opacity: .5;
|
|
54
|
+
border-top: none;
|
|
55
|
+
+ &.ui-sortable-placeholder { border-top: $border-width dashed $border-color; }
|
|
56
|
+
}
|
|
5
57
|
}
|
|
6
58
|
|
|
7
59
|
|
|
8
60
|
// Body Column
|
|
9
61
|
.slat-body {
|
|
10
62
|
display: flex;
|
|
11
|
-
flex-
|
|
63
|
+
flex-direction: row;
|
|
64
|
+
flex-wrap: wrap;
|
|
12
65
|
flex: 1 0 0;
|
|
13
66
|
margin-right: -($grid-gutter-width * .5);
|
|
14
67
|
margin-left: -($grid-gutter-width * .5);
|
|
15
68
|
width: 100%;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
69
|
+
|
|
70
|
+
// max-width needed for when text-truncate is on an element inside
|
|
71
|
+
@include media-breakpoint-down(sm) { max-width: calc(100% - #{$slat-actions-sm-width}); }
|
|
72
|
+
@include media-breakpoint-up(md) { max-width: calc(100% - #{$slat-actions-lg-width}); }
|
|
73
|
+
.slat-actions-sm & { max-width: calc(100% - #{$slat-actions-sm-width}); }
|
|
74
|
+
.slat-actions-lg & { max-width: calc(100% - #{$slat-actions-lg-width}); }
|
|
75
|
+
.slat-actions-none & { max-width: calc(100% + 24px); }
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
// Shared action and item column
|
|
80
|
+
.slat-item, .slat-actions {
|
|
81
|
+
padding-left: ($grid-gutter-width * .5);
|
|
82
|
+
min-width: 0px;
|
|
83
|
+
word-break: break-word;
|
|
84
|
+
white-space: normal;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
// Item Column
|
|
89
|
+
.slat-item {
|
|
90
|
+
flex: 1 0 0;
|
|
91
|
+
padding-right: ($grid-gutter-width * .5);
|
|
92
|
+
width: 100%;
|
|
93
|
+
max-width: 100%;
|
|
94
|
+
&.slat-item-md { flex-grow: 2; }
|
|
95
|
+
&.slat-item-lg { flex-grow: 3; }
|
|
96
|
+
&.slat-item-xl { flex-grow: 4; }
|
|
31
97
|
}
|
|
32
98
|
|
|
33
99
|
|
|
34
100
|
// Action Column
|
|
35
101
|
.slat-actions {
|
|
36
|
-
|
|
37
|
-
flex: 0
|
|
38
|
-
|
|
39
|
-
max-width: none;
|
|
102
|
+
flex-grow: 0;
|
|
103
|
+
flex-shrink: 0;
|
|
104
|
+
flex-basis: ($spacer * 2.5);
|
|
40
105
|
text-align: right;
|
|
41
|
-
@include media-breakpoint-up(
|
|
106
|
+
@include media-breakpoint-up(md) { flex-basis: ($spacer * 5.5); }
|
|
107
|
+
.slat-actions-sm & { flex-basis: ($spacer * 2.5); }
|
|
108
|
+
.slat-actions-lg & { flex-basis: ($spacer * 5.5); }
|
|
109
|
+
}
|
|
42
110
|
|
|
43
111
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
112
|
+
// Action dropdown text (ex: "Actions") used for default action dropdown behavior
|
|
113
|
+
.slat-actions-text {
|
|
114
|
+
@include media-breakpoint-down(sm) { display: none; }
|
|
115
|
+
@include media-breakpoint-up(md) {
|
|
116
|
+
display: inline-block;
|
|
117
|
+
margin-right: ($spacer * .25);
|
|
118
|
+
}
|
|
119
|
+
.slat-actions-lg & { // always show text on :lg slat-actions
|
|
120
|
+
display: inline-block;
|
|
121
|
+
margin-right: ($spacer * .25);
|
|
122
|
+
}
|
|
123
|
+
.slat-actions-sm & { display: none; } // always hide text on :sm slat-actions
|
|
124
|
+
+ .fa.ml-1 { margin-left: 0 !important; } // hides default margin on icons in buttons on smaller device
|
|
47
125
|
}
|
|
48
126
|
|
|
49
127
|
|
|
50
128
|
// Slat header
|
|
51
129
|
.slat-header {
|
|
52
130
|
padding-bottom: ($spacer * .5);
|
|
131
|
+
border-bottom: $border-width solid $border-color;
|
|
132
|
+
.slat { padding: 0 !important; }
|
|
53
133
|
.slat-body { align-items: center; }
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
// Slat list layout
|
|
58
|
-
.slat-list {
|
|
59
|
-
border-top: $border-width solid $border-color;
|
|
60
|
-
.slat {
|
|
61
|
-
padding-top: $spacer;
|
|
62
|
-
padding-bottom: $spacer;
|
|
63
|
-
+ .slat { border-top: $border-width solid $border-color; }
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
// Various states
|
|
67
|
-
&.ui-sortable-placeholder {
|
|
68
|
-
visibility: visible !important;
|
|
69
|
-
background: theme-color("light");
|
|
70
|
-
border: $border-width dashed $border-color;
|
|
71
|
-
+ .slat { border-top: none; }
|
|
72
|
-
+ &.ui-sortable-helper {
|
|
73
|
-
border-top-style: dashed;
|
|
74
|
-
+ &.slat { border-top: none; }
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
&.ui-sortable-helper {
|
|
78
|
-
border-top: none;
|
|
79
|
-
opacity: .5;
|
|
80
|
-
border-top: none;
|
|
81
|
-
+ &.ui-sortable-placeholder { border-top: $border-width dashed $border-color; }
|
|
82
|
-
}
|
|
83
|
-
}
|
|
134
|
+
.slat-column-header { display: inline-block; }
|
|
84
135
|
|
|
85
|
-
|
|
86
|
-
// Sizing options
|
|
87
|
-
&.slat-list-sm {
|
|
88
|
-
.slat {
|
|
89
|
-
padding-top: ($spacer * .5);
|
|
90
|
-
padding-bottom: ($spacer * .5);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
&.slat-list-lg {
|
|
94
|
-
.slat {
|
|
95
|
-
padding-top: ($spacer * 1.5);
|
|
96
|
-
padding-bottom: ($spacer * 1.5);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
136
|
+
}
|
|
99
137
|
|
|
100
138
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
&:first-child {
|
|
105
|
-
@include media-breakpoint-down(sm) {
|
|
106
|
-
flex-basis: 100%;
|
|
107
|
-
margin-bottom: $spacer;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
}
|
|
139
|
+
// Slat column headers -- any .slat-column-header not in .slat-header displays none on larger devices
|
|
140
|
+
.slat-column-header {
|
|
141
|
+
@include media-breakpoint-up(md) { display: none; }
|
|
112
142
|
}
|
data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_story.scss
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
background-size: cover;
|
|
7
7
|
@include media-breakpoint-down(md) {
|
|
8
8
|
background-image: none !important;
|
|
9
|
-
.card { box-shadow: none; }
|
|
9
|
+
.card { box-shadow: none !important; }
|
|
10
10
|
.card-body { padding: 0; }
|
|
11
11
|
}
|
|
12
12
|
@include media-breakpoint-up(lg) { min-height: 500px; }
|
data/lib/nfg_ui.rb
CHANGED
|
@@ -24,13 +24,13 @@ module NfgUi
|
|
|
24
24
|
end
|
|
25
25
|
|
|
26
26
|
def render
|
|
27
|
-
|
|
27
|
+
content_tag(base_element, slat_item_html_options) do
|
|
28
28
|
if slat_header
|
|
29
|
-
concat(content_tag(:h6, slat_header, class: 'display-4'))
|
|
29
|
+
concat(content_tag(:h6, slat_header, class: 'display-4 slat-column-header'))
|
|
30
30
|
end
|
|
31
31
|
if heading
|
|
32
32
|
if href
|
|
33
|
-
concat(content_tag(:a, href: href) {
|
|
33
|
+
concat(content_tag(:a, href: view_context.url_for(href)) {
|
|
34
34
|
NfgUi::Components::Foundations::Typeface.new({ subheading: heading }, view_context).render
|
|
35
35
|
})
|
|
36
36
|
else
|
|
@@ -46,11 +46,16 @@ module NfgUi
|
|
|
46
46
|
|
|
47
47
|
private
|
|
48
48
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
49
|
+
# Strip the href from html_options and pass it to the header
|
|
50
|
+
def slat_item_html_options
|
|
51
|
+
html_options.except(:href)
|
|
52
|
+
end
|
|
53
|
+
|
|
54
|
+
# :sm is the default size, and is not given
|
|
55
|
+
# a `slat-item-sm` class name.
|
|
56
|
+
# thus, reject :sm from resizable symbols.
|
|
57
|
+
def resized?
|
|
58
|
+
[:md, :lg, :xl].include?(size)
|
|
54
59
|
end
|
|
55
60
|
|
|
56
61
|
def non_html_attribute_options
|
|
@@ -28,38 +28,15 @@ module NfgUi
|
|
|
28
28
|
options.fetch(:menu, true)
|
|
29
29
|
end
|
|
30
30
|
|
|
31
|
-
# Signal if this slat_action is being used
|
|
32
|
-
# In the slat_header area of the Slats
|
|
33
|
-
#
|
|
34
|
-
# If so, this then customizes the output of the
|
|
35
|
-
# SlatActions to ensure that the widths of the slat_header columns
|
|
36
|
-
# is accurate and matches the width of the slats below.
|
|
37
|
-
def slat_header
|
|
38
|
-
options.fetch(:slat_header, false)
|
|
39
|
-
end
|
|
40
|
-
|
|
41
|
-
# Signals if this is a wide SlatActions.
|
|
42
|
-
# This is a stylistic update which is used in situations like shopping carts where
|
|
43
|
-
# you may only be providing a summary and have no actions or extra columns.
|
|
44
|
-
#
|
|
45
|
-
# Note: Further documentation is needed on this
|
|
46
|
-
def wide
|
|
47
|
-
options.fetch(:wide, true)
|
|
48
|
-
end
|
|
49
|
-
|
|
50
31
|
def render
|
|
51
32
|
content_tag(:div, html_options) do
|
|
52
33
|
if menu
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
concat(NfgUi::Components::Patterns::DropdownMenu.new({ traits: [:right] }, view_context).render {
|
|
60
|
-
(block_given? ? yield : body)
|
|
61
|
-
})
|
|
62
|
-
end
|
|
34
|
+
NfgUi::Components::Patterns::Dropdown.new({ }, view_context).render do
|
|
35
|
+
capture do
|
|
36
|
+
concat(NfgUi::Components::Elements::DropdownToggle.new({ **default_dropdown_toggle_options, body: dropdown_toggle_body }, view_context).render)
|
|
37
|
+
concat(NfgUi::Components::Patterns::DropdownMenu.new({ traits: [:right] }, view_context).render {
|
|
38
|
+
(block_given? ? yield : body)
|
|
39
|
+
})
|
|
63
40
|
end
|
|
64
41
|
end
|
|
65
42
|
else
|
|
@@ -76,15 +53,12 @@ module NfgUi
|
|
|
76
53
|
{ outlined: true, theme: :secondary }
|
|
77
54
|
end
|
|
78
55
|
|
|
79
|
-
def
|
|
80
|
-
|
|
81
|
-
super,
|
|
82
|
-
("#{component_css_class}-sm" unless wide)
|
|
83
|
-
].join(' ').squish
|
|
56
|
+
def dropdown_toggle_body
|
|
57
|
+
content_tag(:span, 'Actions', class: 'slat-actions-text')
|
|
84
58
|
end
|
|
85
59
|
|
|
86
60
|
def non_html_attribute_options
|
|
87
|
-
super.push(:
|
|
61
|
+
super.push(:menu)
|
|
88
62
|
end
|
|
89
63
|
end
|
|
90
64
|
end
|
|
@@ -5,9 +5,69 @@ module NfgUi
|
|
|
5
5
|
module Patterns
|
|
6
6
|
# Main slats
|
|
7
7
|
class Slats < NfgUi::Components::Base
|
|
8
|
+
include Bootstrap::Utilities::Sizable
|
|
9
|
+
|
|
10
|
+
include NfgUi::Components::Traits::Size
|
|
11
|
+
include NfgUi::Components::Traits::Slats
|
|
12
|
+
|
|
8
13
|
def component_family
|
|
9
14
|
:slats
|
|
10
15
|
end
|
|
16
|
+
|
|
17
|
+
# When :nowrap is true,
|
|
18
|
+
# the slat-item columns will not break into rows
|
|
19
|
+
# regardless of responsive page width
|
|
20
|
+
#
|
|
21
|
+
# When false / not present
|
|
22
|
+
# slat item columns will break down into rows as expected in conventional
|
|
23
|
+
# responsivel webpage design.
|
|
24
|
+
def nowrap
|
|
25
|
+
options.fetch(:nowrap, false)
|
|
26
|
+
end
|
|
27
|
+
|
|
28
|
+
# Determine whether or not to accomodate a specific
|
|
29
|
+
# SlatActions size configuration
|
|
30
|
+
# by default, when slat_actions is not set
|
|
31
|
+
# it should have a nil presence
|
|
32
|
+
#
|
|
33
|
+
# Note:
|
|
34
|
+
# `nil` is different from the :none keyword
|
|
35
|
+
#
|
|
36
|
+
# Options:
|
|
37
|
+
# :sm - account for a small SlatAction (icon only)
|
|
38
|
+
# :lg - account for a large SlatAction (Text & Icon)
|
|
39
|
+
# :none - Do not account for a SlatAction
|
|
40
|
+
#
|
|
41
|
+
# Leaving `nil` for slat_actions will kick off
|
|
42
|
+
# default behavior for the Slats' SlatAction
|
|
43
|
+
# which is a combination of :lg (for large screen)
|
|
44
|
+
# and :sm for small screen (where the slat action flexes)
|
|
45
|
+
# across screen sizes hiding and showing its text
|
|
46
|
+
def slat_actions
|
|
47
|
+
options[:slat_actions] || nil
|
|
48
|
+
end
|
|
49
|
+
|
|
50
|
+
private
|
|
51
|
+
|
|
52
|
+
def css_classes
|
|
53
|
+
[
|
|
54
|
+
super,
|
|
55
|
+
("#{component_css_class}-nowrap" if nowrap),
|
|
56
|
+
("slat-actions-#{slat_actions}" if slat_actions_resized?)
|
|
57
|
+
].join(' ').squish
|
|
58
|
+
end
|
|
59
|
+
|
|
60
|
+
# Only acceptable keywords are:
|
|
61
|
+
# :sm, :lg, and :none
|
|
62
|
+
# all other slat_action keywords are ignored
|
|
63
|
+
def slat_actions_resized?
|
|
64
|
+
[:sm, :lg, :none].include?(slat_actions)
|
|
65
|
+
end
|
|
66
|
+
|
|
67
|
+
def non_html_attribute_options
|
|
68
|
+
super.push(:slat_actions, :nowrap)
|
|
69
|
+
end
|
|
70
|
+
|
|
11
71
|
end
|
|
12
72
|
end
|
|
13
73
|
end
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
module NfgUi
|
|
2
|
+
module Components
|
|
3
|
+
module Traits
|
|
4
|
+
# Step traits
|
|
5
|
+
module Slats
|
|
6
|
+
TRAITS = %i[slat_actions_sm slat_actions_lg slat_actions_none nowrap].freeze
|
|
7
|
+
|
|
8
|
+
def nowrap_trait
|
|
9
|
+
options[:nowrap] = true
|
|
10
|
+
end
|
|
11
|
+
|
|
12
|
+
def slat_actions_sm_trait
|
|
13
|
+
options[:slat_actions] = :sm
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
def slat_actions_lg_trait
|
|
17
|
+
options[:slat_actions] = :lg
|
|
18
|
+
end
|
|
19
|
+
|
|
20
|
+
def slat_actions_none_trait
|
|
21
|
+
options[:slat_actions] = :none
|
|
22
|
+
end
|
|
23
|
+
end
|
|
24
|
+
end
|
|
25
|
+
end
|
|
26
|
+
end
|
data/lib/nfg_ui/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: nfg_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.11.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jonathan Roehm
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2020-08-
|
|
12
|
+
date: 2020-08-25 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: bootstrap
|
|
@@ -717,7 +717,6 @@ files:
|
|
|
717
717
|
- lib/nfg_ui/components/patterns/slat.rb
|
|
718
718
|
- lib/nfg_ui/components/patterns/slat_actions.rb
|
|
719
719
|
- lib/nfg_ui/components/patterns/slat_header.rb
|
|
720
|
-
- lib/nfg_ui/components/patterns/slat_list.rb
|
|
721
720
|
- lib/nfg_ui/components/patterns/slats.rb
|
|
722
721
|
- lib/nfg_ui/components/patterns/steps.rb
|
|
723
722
|
- lib/nfg_ui/components/patterns/tab_content.rb
|
|
@@ -751,6 +750,7 @@ files:
|
|
|
751
750
|
- lib/nfg_ui/components/traits/responsive.rb
|
|
752
751
|
- lib/nfg_ui/components/traits/size.rb
|
|
753
752
|
- lib/nfg_ui/components/traits/slat_item.rb
|
|
753
|
+
- lib/nfg_ui/components/traits/slats.rb
|
|
754
754
|
- lib/nfg_ui/components/traits/step.rb
|
|
755
755
|
- lib/nfg_ui/components/traits/table.rb
|
|
756
756
|
- lib/nfg_ui/components/traits/theme.rb
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
# frozen_string_literal: true
|
|
2
|
-
|
|
3
|
-
module NfgUi
|
|
4
|
-
module Components
|
|
5
|
-
module Patterns
|
|
6
|
-
# SlatList doc coming soon
|
|
7
|
-
class SlatList < NfgUi::Components::Base
|
|
8
|
-
include Bootstrap::Utilities::Sizable
|
|
9
|
-
|
|
10
|
-
include NfgUi::Components::Traits::Size
|
|
11
|
-
|
|
12
|
-
def component_family
|
|
13
|
-
:slats
|
|
14
|
-
end
|
|
15
|
-
end
|
|
16
|
-
end
|
|
17
|
-
end
|
|
18
|
-
end
|