nfg_ui 0.9.10 → 0.9.11
Sign up to get free protection for your applications and to get access to all the features.
- 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
|