nfg_ui 0.9.10 → 0.9.11
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/app/assets/images/nfg_ui/email/icons/fa-check-circle-o-success.png +0 -0
- data/app/assets/images/nfg_ui/email/icons/fa-check-circle-success.png +0 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_card.scss +2 -2
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_custom.scss +1 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_custom_forms.scss +1 -1
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_illustration.scss +7 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_nav_step.scss +18 -5
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_backgrounds.scss +1 -1
- data/app/assets/stylesheets/nfg_ui/network_for_good/email/settings/_settings.scss +7 -7
- data/app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/custom/_nav_step.scss +1 -1
- data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_custom.scss +1 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_custom_forms.scss +1 -1
- data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_illustration.scss +7 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_nav_step.scss +18 -5
- data/app/views/nfg_ui/email/_alert.html.inky-haml +10 -0
- data/lib/nfg_ui/components/elements/step.rb +22 -8
- data/lib/nfg_ui/components/foundations/illustration.rb +28 -0
- data/lib/nfg_ui/components/foundations/image.rb +59 -1
- data/lib/nfg_ui/components/traits/illustration.rb +14 -0
- data/lib/nfg_ui/components/traits.rb +1 -0
- data/lib/nfg_ui/version.rb +1 -1
- data/lib/nfg_ui.rb +1 -0
- metadata +9 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 37b2e7b7b4c8b2e62f45ec3a6cc614ead5e1e1d5185f0fef6aac4a5460e4f51b
|
|
4
|
+
data.tar.gz: 9d30ccac7ea061ca5a94aa8d9152eb876ba805f15012b6bca7780d646aba0d6f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 375c586299953774ce05089df29da43eb026330b5da4cfb16737280dcdb035d891c5eb8872620fe15458492496f09c8fcde34127b9a8536242321ee9e83891f5
|
|
7
|
+
data.tar.gz: 925061f2c371184898bcba22591d68284de2fd844c915dd7a443550d94a691c198bb38297aa30c6c9fd51aabf2714ace8bad437f304b092abd801f2f996fc4ce
|
|
Binary file
|
|
Binary file
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
padding: 0;
|
|
68
68
|
.custom-control-label {
|
|
69
69
|
margin-bottom: 0;
|
|
70
|
-
padding: ($spacer * .5)
|
|
70
|
+
padding: ($spacer * 1.5) $spacer ($spacer * 2);
|
|
71
71
|
border: $border-width solid $border-color;
|
|
72
72
|
border-radius: $border-radius;
|
|
73
73
|
cursor: pointer;
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
// Background connector bar between items
|
|
10
|
-
&::
|
|
10
|
+
&::before {
|
|
11
11
|
position: absolute;
|
|
12
12
|
top: (($spacer * .5) - .1rem);
|
|
13
|
-
|
|
13
|
+
right: 50%;
|
|
14
14
|
width: 100%;
|
|
15
15
|
height: ($border-width + 1px);
|
|
16
16
|
background-color: $border-color;
|
|
@@ -20,20 +20,33 @@
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
// Removes the background connector bar on the last item
|
|
23
|
-
&:
|
|
24
|
-
&::
|
|
23
|
+
&:first-child {
|
|
24
|
+
&::before { display: none; }
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
// Various states
|
|
29
29
|
&.visited, &.active {
|
|
30
|
+
&::before { background-color: $primary; }
|
|
30
31
|
.step-indicator {
|
|
31
32
|
color: $white;
|
|
32
33
|
background-color: $primary;
|
|
33
34
|
border-color: $primary;
|
|
34
35
|
}
|
|
35
36
|
}
|
|
36
|
-
&.
|
|
37
|
+
&.active {
|
|
38
|
+
.nav-link {
|
|
39
|
+
.step-indicator::after { opacity: 1; }
|
|
40
|
+
}
|
|
41
|
+
~ .visited {
|
|
42
|
+
&::before { background-color: $secondary; }
|
|
43
|
+
.step-indicator {
|
|
44
|
+
background-color: $secondary;
|
|
45
|
+
border-color: $secondary;
|
|
46
|
+
&::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($secondary, 0.5); };
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
37
50
|
&.disabled {
|
|
38
51
|
cursor: default;
|
|
39
52
|
pointer-events: none;
|
|
@@ -119,15 +119,15 @@ $button-rounded: $global-rounded;
|
|
|
119
119
|
// 6. Callout
|
|
120
120
|
// ----------
|
|
121
121
|
|
|
122
|
-
$callout-background:
|
|
123
|
-
$callout-background-fade:
|
|
122
|
+
$callout-background: #e5f5fd;
|
|
123
|
+
$callout-background-fade: 88%;
|
|
124
124
|
$callout-padding: 12px;
|
|
125
125
|
$callout-margin-bottom: $global-margin;
|
|
126
|
-
$callout-border: 1px solid
|
|
127
|
-
$callout-border-secondary: 1px solid
|
|
128
|
-
$callout-border-success: 1px solid
|
|
129
|
-
$callout-border-warning: 1px solid
|
|
130
|
-
$callout-border-alert: 1px solid
|
|
126
|
+
$callout-border: 1px solid $primary-color;
|
|
127
|
+
$callout-border-secondary: 1px solid $secondary-color;
|
|
128
|
+
$callout-border-success: 1px solid $success-color;
|
|
129
|
+
$callout-border-warning: 1px solid $warning-color;
|
|
130
|
+
$callout-border-alert: 1px solid $alert-color;
|
|
131
131
|
|
|
132
132
|
// 7. Menu
|
|
133
133
|
// -------
|
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
.nav-item {
|
|
6
6
|
|
|
7
7
|
&.visited, &.active {
|
|
8
|
+
&::before { background-color: $primary; }
|
|
8
9
|
.step-indicator {
|
|
9
10
|
color: color-yiq($primary);
|
|
10
11
|
background-color: $primary;
|
|
11
12
|
border-color: $primary;
|
|
12
13
|
}
|
|
13
14
|
}
|
|
14
|
-
&.visited::after { background-color: $primary; }
|
|
15
15
|
|
|
16
16
|
.step-indicator {
|
|
17
17
|
&::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($primary, 0.5); }
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
padding: 0;
|
|
69
69
|
.custom-control-label {
|
|
70
70
|
margin-bottom: 0;
|
|
71
|
-
padding: ($spacer * .5)
|
|
71
|
+
padding: ($spacer * 1.5) $spacer ($spacer * 2);
|
|
72
72
|
border: $border-width solid $border-color;
|
|
73
73
|
border-radius: $border-radius;
|
|
74
74
|
cursor: pointer;
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
// Background connector bar between items
|
|
10
|
-
&::
|
|
10
|
+
&::before {
|
|
11
11
|
position: absolute;
|
|
12
12
|
top: (($spacer * .5) - .1rem);
|
|
13
|
-
|
|
13
|
+
right: 50%;
|
|
14
14
|
width: 100%;
|
|
15
15
|
height: ($border-width + 1px);
|
|
16
16
|
background-color: $border-color;
|
|
@@ -20,20 +20,33 @@
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
// Removes the background connector bar on the last item
|
|
23
|
-
&:
|
|
24
|
-
&::
|
|
23
|
+
&:first-child {
|
|
24
|
+
&::before { display: none; }
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
// Various states
|
|
29
29
|
&.visited, &.active {
|
|
30
|
+
&::before { background-color: $primary; }
|
|
30
31
|
.step-indicator {
|
|
31
32
|
color: $white;
|
|
32
33
|
background-color: $primary;
|
|
33
34
|
border-color: $primary;
|
|
34
35
|
}
|
|
35
36
|
}
|
|
36
|
-
&.
|
|
37
|
+
&.active {
|
|
38
|
+
.nav-link {
|
|
39
|
+
.step-indicator::after { opacity: 1; }
|
|
40
|
+
}
|
|
41
|
+
~ .visited {
|
|
42
|
+
&::before { background-color: $secondary; }
|
|
43
|
+
.step-indicator {
|
|
44
|
+
background-color: $secondary;
|
|
45
|
+
border-color: $secondary;
|
|
46
|
+
&::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($secondary, 0.5); };
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
37
50
|
&.disabled {
|
|
38
51
|
cursor: default;
|
|
39
52
|
pointer-events: none;
|
|
@@ -9,20 +9,26 @@ module NfgUi
|
|
|
9
9
|
|
|
10
10
|
include NfgUi::Components::Utilities::Iconable
|
|
11
11
|
|
|
12
|
+
include NfgUi::Components::Traits::Active
|
|
12
13
|
include NfgUi::Components::Traits::Step
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
# Override #active from Activatable
|
|
16
|
+
def active
|
|
17
|
+
# Active is a transitory state for steps
|
|
18
|
+
# So when a step is active, it is automatically visited.
|
|
19
|
+
# This sets visited to true.
|
|
20
|
+
# This is also accounted for in the #active_trait for steps.
|
|
21
|
+
options[:visited] = true if options[:active]
|
|
22
|
+
super
|
|
16
23
|
end
|
|
17
24
|
|
|
18
|
-
def
|
|
19
|
-
|
|
20
|
-
end
|
|
21
|
-
|
|
22
|
-
def visited
|
|
23
|
-
options.fetch(:visited, false)
|
|
25
|
+
def component_family
|
|
26
|
+
:steps
|
|
24
27
|
end
|
|
25
28
|
|
|
29
|
+
# NOTE: DISABLED TOOLTIPS DO NOT YET WORK ON STEPS
|
|
30
|
+
# NAVITEM DOES NOT INCLUDE DISABLEABLE MODULE
|
|
31
|
+
# JR: 06-21-2019
|
|
26
32
|
def disabled
|
|
27
33
|
options[:disabled] || (!visited && !active)
|
|
28
34
|
end
|
|
@@ -33,6 +39,14 @@ module NfgUi
|
|
|
33
39
|
end
|
|
34
40
|
end
|
|
35
41
|
|
|
42
|
+
def step
|
|
43
|
+
options.fetch(:step, nil)
|
|
44
|
+
end
|
|
45
|
+
|
|
46
|
+
def visited
|
|
47
|
+
options.fetch(:visited, false)
|
|
48
|
+
end
|
|
49
|
+
|
|
36
50
|
private
|
|
37
51
|
|
|
38
52
|
def base_element
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module NfgUi
|
|
4
|
+
module Components
|
|
5
|
+
module Foundations
|
|
6
|
+
# Grid doc coming soon
|
|
7
|
+
class Illustration < NfgUi::Components::Foundations::Image
|
|
8
|
+
include Bootstrap::Utilities::Sizable
|
|
9
|
+
include NfgUi::Components::Traits::Size
|
|
10
|
+
include NfgUi::Components::Traits::Illustration
|
|
11
|
+
|
|
12
|
+
def size
|
|
13
|
+
responsive ? nil : super
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
private
|
|
17
|
+
|
|
18
|
+
def component_css_class
|
|
19
|
+
responsive ? '' : 'illustration'
|
|
20
|
+
end
|
|
21
|
+
|
|
22
|
+
def default_responsive
|
|
23
|
+
false
|
|
24
|
+
end
|
|
25
|
+
end
|
|
26
|
+
end
|
|
27
|
+
end
|
|
28
|
+
end
|
|
@@ -5,8 +5,66 @@ module NfgUi
|
|
|
5
5
|
module Foundations
|
|
6
6
|
# Image doc coming soon
|
|
7
7
|
class Image < NfgUi::Components::Base
|
|
8
|
+
include Bootstrap::Utilities::Tooltipable
|
|
9
|
+
|
|
10
|
+
def css_classes
|
|
11
|
+
[
|
|
12
|
+
super,
|
|
13
|
+
('img-fluid' if responsive)
|
|
14
|
+
].join(' ').squish
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
# Prefer image, image is used
|
|
18
|
+
# on other components that pull in
|
|
19
|
+
# the image (e.g. Illustration)
|
|
20
|
+
def image
|
|
21
|
+
options.fetch(:image, nil)
|
|
22
|
+
end
|
|
23
|
+
|
|
8
24
|
def render
|
|
9
|
-
|
|
25
|
+
image_tag(view_context.image_path(image_location), **html_options)
|
|
26
|
+
end
|
|
27
|
+
|
|
28
|
+
# Flag if the image should utilize responsive settings or not.
|
|
29
|
+
# This typically does thigns like
|
|
30
|
+
# apply specific css classes (e.g.: 'img-fluid') to the rendered component
|
|
31
|
+
def responsive
|
|
32
|
+
options.fetch(:responsive, default_responsive)
|
|
33
|
+
end
|
|
34
|
+
|
|
35
|
+
# Allow :src to come through
|
|
36
|
+
# since :src is a native and
|
|
37
|
+
# viable to way source a image path / url
|
|
38
|
+
def src
|
|
39
|
+
options.fetch(:src, image)
|
|
40
|
+
end
|
|
41
|
+
|
|
42
|
+
private
|
|
43
|
+
|
|
44
|
+
def component_css_class
|
|
45
|
+
''
|
|
46
|
+
end
|
|
47
|
+
|
|
48
|
+
def default_responsive
|
|
49
|
+
true
|
|
50
|
+
end
|
|
51
|
+
|
|
52
|
+
# Provide a fallback image location and default to src
|
|
53
|
+
# :src will default to the :image option
|
|
54
|
+
# if :src is not set.
|
|
55
|
+
#
|
|
56
|
+
# We prefer the :image keyword here because of its specificity and to pass between components.
|
|
57
|
+
#
|
|
58
|
+
# Ex: `:button, image: '...'`
|
|
59
|
+
def image_location
|
|
60
|
+
src || ''
|
|
61
|
+
end
|
|
62
|
+
|
|
63
|
+
# :src is removed because we leveage the #image_tag helper method.
|
|
64
|
+
#
|
|
65
|
+
# the image_tag helper method automatically turns the first argument into the `src` attribute.
|
|
66
|
+
def non_html_attribute_options
|
|
67
|
+
super.push(:image, :src, :responsive)
|
|
10
68
|
end
|
|
11
69
|
end
|
|
12
70
|
end
|
data/lib/nfg_ui/version.rb
CHANGED
data/lib/nfg_ui.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.9.
|
|
4
|
+
version: 0.9.11
|
|
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: 2019-
|
|
12
|
+
date: 2019-07-01 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: bootstrap
|
|
@@ -334,6 +334,8 @@ files:
|
|
|
334
334
|
- app/assets/images/nfg_ui/app_icon/safari-pinned-tab.svg
|
|
335
335
|
- app/assets/images/nfg_ui/app_icon/site.webmanifest.erb
|
|
336
336
|
- app/assets/images/nfg_ui/email/icons/fa-caret-right.png
|
|
337
|
+
- app/assets/images/nfg_ui/email/icons/fa-check-circle-o-success.png
|
|
338
|
+
- app/assets/images/nfg_ui/email/icons/fa-check-circle-success.png
|
|
337
339
|
- app/assets/images/nfg_ui/email/icons/fa-facebook.png
|
|
338
340
|
- app/assets/images/nfg_ui/email/icons/fa-linkedin.png
|
|
339
341
|
- app/assets/images/nfg_ui/email/icons/fa-twitter.png
|
|
@@ -370,6 +372,7 @@ files:
|
|
|
370
372
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_custom_questions_questionnaire.scss
|
|
371
373
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_custom_receipt_language.scss
|
|
372
374
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_email_preview.scss
|
|
375
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_illustration.scss
|
|
373
376
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_interaction.scss
|
|
374
377
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_mobile.scss
|
|
375
378
|
- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_nav_step.scss
|
|
@@ -456,6 +459,7 @@ files:
|
|
|
456
459
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_default.scss
|
|
457
460
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_story.scss
|
|
458
461
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_footer_links.scss
|
|
462
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_illustration.scss
|
|
459
463
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_nav_step.scss
|
|
460
464
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_slat.scss
|
|
461
465
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_social_share.scss
|
|
@@ -473,6 +477,7 @@ files:
|
|
|
473
477
|
- app/models/nfg_ui/application_record.rb
|
|
474
478
|
- app/views/nfg_ui/app_icons/_icons.html.haml
|
|
475
479
|
- app/views/nfg_ui/email/README.md
|
|
480
|
+
- app/views/nfg_ui/email/_alert.html.inky-haml
|
|
476
481
|
- app/views/nfg_ui/email/_button.html.haml
|
|
477
482
|
- app/views/nfg_ui/email/_email_signature.html.haml
|
|
478
483
|
- app/views/nfg_ui/email/_footer.html.haml
|
|
@@ -615,6 +620,7 @@ files:
|
|
|
615
620
|
- lib/nfg_ui/components/foundations/color.rb
|
|
616
621
|
- lib/nfg_ui/components/foundations/grid.rb
|
|
617
622
|
- lib/nfg_ui/components/foundations/icon.rb
|
|
623
|
+
- lib/nfg_ui/components/foundations/illustration.rb
|
|
618
624
|
- lib/nfg_ui/components/foundations/image.rb
|
|
619
625
|
- lib/nfg_ui/components/foundations/input.rb
|
|
620
626
|
- lib/nfg_ui/components/foundations/typeface.rb
|
|
@@ -664,6 +670,7 @@ files:
|
|
|
664
670
|
- lib/nfg_ui/components/traits/dismiss.rb
|
|
665
671
|
- lib/nfg_ui/components/traits/dropdown_toggle.rb
|
|
666
672
|
- lib/nfg_ui/components/traits/icon.rb
|
|
673
|
+
- lib/nfg_ui/components/traits/illustration.rb
|
|
667
674
|
- lib/nfg_ui/components/traits/list_group.rb
|
|
668
675
|
- lib/nfg_ui/components/traits/muted.rb
|
|
669
676
|
- lib/nfg_ui/components/traits/nav.rb
|