nfg_ui 0.10.15 → 0.11.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.
- checksums.yaml +4 -4
- data/README.md +40 -2
- data/Rakefile +28 -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/avatar.rb +1 -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: bfa9be2c77b91ed1c24ae28636c7681863e33774499320ca482863400c2b26fd
|
|
4
|
+
data.tar.gz: c60da4d8004d53286ac26adc94efe9f290fc4d80ddef8ebba8d62c002bb56018
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f349175b3e76009cf9d231b3b55843921c8d73365f67f35f1abe89dc0b8d52762d7d76c9cf856a091f92ddaccbb8176f987ff8500245030a4c933df69dbcc2b5
|
|
7
|
+
data.tar.gz: d8a30ea0e5fbb65c42921c7b76a0906240cc9d0c647c3652263651cfa465a296215d5e895b74351d633e54d638c2d7c16dac8fde16759828d973a87768ba4bb8
|
data/README.md
CHANGED
|
@@ -88,6 +88,46 @@ Examples:
|
|
|
88
88
|
= ui.nfg :icon, 'trash', class: 'mr-1', text: 'Delete Row'
|
|
89
89
|
```
|
|
90
90
|
|
|
91
|
+
## Asset publishing
|
|
92
|
+
|
|
93
|
+
### Depedency Installation
|
|
94
|
+
|
|
95
|
+
NFG UI assets are published for cross-site usage to a publicly-accessible AWS S3 bucket (`s3://nfg-ui/v#.##.#/`) using the AWS command-line interface:
|
|
96
|
+
|
|
97
|
+
1. [Install the AWS command-line interface](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2-mac.html#cliv2-mac-install-gui)
|
|
98
|
+
2. Install AWS credentials provided by anyone on the team who has permissions to mint IAM users (such as Mike or Timothy). The credentials are sensitive and should be stored at `~/.aws/credentials`. See example below.
|
|
99
|
+
3. (Optional but recommended) Install `~/.aws/config` per below to set a default region for S3 operations.
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
# Example ~/.aws/credentials file
|
|
103
|
+
|
|
104
|
+
[default]
|
|
105
|
+
aws_access_key_id = ####################
|
|
106
|
+
aws_secret_access_key = ########################################
|
|
107
|
+
|
|
108
|
+
# Example ~/.aws/config
|
|
109
|
+
[default]
|
|
110
|
+
region = us-east-1
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
4. Use the following command to confirm successful installation:
|
|
114
|
+
|
|
115
|
+
```
|
|
116
|
+
aws s3 ls --recursive s3://nfg-ui/
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Workflow
|
|
120
|
+
|
|
121
|
+
After `rake release` successfully completes, the `rake publish` task will run. This command wraps a separate `rake publish` task contained within the `/publisher` subdirectory.
|
|
122
|
+
`/publisher` contains a skeleton Rails app. The `rake publish` task contained within `/publisher` precompiles the assets that are part of the new `nfg_ui` release and uploads them to S3.
|
|
123
|
+
|
|
124
|
+
If necessary, `rake publish` can be invoked from within the `nfg_ui` parent directory, separately:
|
|
125
|
+
|
|
126
|
+
```
|
|
127
|
+
rake publish # upload assets to S3; fails if files are already exist for the release
|
|
128
|
+
rake publish[override] # uploads assets to S3 without checking for existing files
|
|
129
|
+
```
|
|
130
|
+
|
|
91
131
|
#### Trait details
|
|
92
132
|
Traits are designed to allow you to speedily build components, or pre-design complex components using meaningful symbols.
|
|
93
133
|
|
|
@@ -190,7 +230,6 @@ Groupings of elements to create rich interfaces. For example, an `:activity_feed
|
|
|
190
230
|
* `:media`
|
|
191
231
|
* `:modal`
|
|
192
232
|
* `:navbar`
|
|
193
|
-
* `:slat_list`
|
|
194
233
|
* `:task_list`
|
|
195
234
|
* *Tiles*
|
|
196
235
|
* `:tile`
|
|
@@ -425,7 +464,6 @@ FOUNDATION_COMPONENT_NAMES = %i[color
|
|
|
425
464
|
navbar
|
|
426
465
|
navbar_nav
|
|
427
466
|
page_header
|
|
428
|
-
slat_list [tooltip]
|
|
429
467
|
tab_content
|
|
430
468
|
task_list
|
|
431
469
|
tile [icon, tooltip]
|
data/Rakefile
CHANGED
|
@@ -15,9 +15,35 @@ RDoc::Task.new(:rdoc) do |rdoc|
|
|
|
15
15
|
end
|
|
16
16
|
|
|
17
17
|
APP_RAKEFILE = File.expand_path("spec/test_app/Rakefile", __dir__)
|
|
18
|
-
load 'rails/tasks/engine.rake'
|
|
19
|
-
|
|
20
18
|
|
|
19
|
+
load 'rails/tasks/engine.rake'
|
|
21
20
|
load 'rails/tasks/statistics.rake'
|
|
22
21
|
|
|
23
22
|
require 'bundler/gem_tasks'
|
|
23
|
+
|
|
24
|
+
desc <<~DESC
|
|
25
|
+
Publish precompiled assets to s3://nfg-ui. This task is automatically invoked after successful "rake release" and normally it should not be called directly.
|
|
26
|
+
Requires installation of AWS CLI: https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-install.html
|
|
27
|
+
Please see additional instructions in README.md.
|
|
28
|
+
DESC
|
|
29
|
+
task :publish, %i[override_flag] do |_, override_flag: nil|
|
|
30
|
+
require 'fileutils'
|
|
31
|
+
|
|
32
|
+
version = Bundler.load_gemspec("#{__dir__}/nfg_ui.gemspec").version
|
|
33
|
+
puts "Compiling and publishing NFG UI v#{version} assets"
|
|
34
|
+
|
|
35
|
+
subtask_args = version.to_s
|
|
36
|
+
subtask_args << ",#{override_flag}" if override_flag
|
|
37
|
+
|
|
38
|
+
Dir.chdir("#{__dir__}/publisher") do
|
|
39
|
+
Bundler.with_clean_env do
|
|
40
|
+
sh "RAILS_ENV=production bundle exec rake publish[#{subtask_args}]" do |ok, _|
|
|
41
|
+
puts 'unable to publish assets' unless ok
|
|
42
|
+
end
|
|
43
|
+
end
|
|
44
|
+
end
|
|
45
|
+
end
|
|
46
|
+
|
|
47
|
+
Rake::Task['release'].enhance do
|
|
48
|
+
Rake::Task['publish'].invoke # runs :publish task after successful release
|
|
49
|
+
end
|
|
@@ -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
|
@@ -21,7 +21,7 @@ module NfgUi
|
|
|
21
21
|
def render
|
|
22
22
|
content_tag(as, html_options) do
|
|
23
23
|
if image.present?
|
|
24
|
-
image_tag image, alt: alt.presence
|
|
24
|
+
image_tag view_context.image_path(image), alt: alt.presence
|
|
25
25
|
elsif body.present?
|
|
26
26
|
content_tag(:span, (block_given? ? yield : body), class: body_css_class)
|
|
27
27
|
end
|
|
@@ -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.2
|
|
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-
|
|
12
|
+
date: 2020-09-29 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
|