abraham 1.5.3 → 2.0.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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c5e2441be140ebda54d2e6d25d2bab0f9ff1c4a60c074ad47f05e56675f70ec6
4
- data.tar.gz: 5389309e36ef642778c020ec0674143ea96875c7694b96ecc7fe5644cf87ceaf
3
+ metadata.gz: c8a61048b60ffe74990a86c146886551d315f2da86eb70ce31f5b28dcdb4fe5e
4
+ data.tar.gz: 8dc414098b445450cf739cec4b5b43b4b15c0322bacbc2d5dc4b2ba3f2e3aa45
5
5
  SHA512:
6
- metadata.gz: fb21305418c187e1f72eededaa0a4a40a3d7af01cf819b18a34d96f0015c322a70f4ac1cb227ac0d8107e30093695d0a2f21af6d0f01a0d9457b75853fc79b32
7
- data.tar.gz: 6dff4bceecb90c0ef59246a8442fa605498fd4c6870df9e4ae68cff5b8b70b585e2604607086ca40323b3adba5bf26d66945a234e2845b223f64b697b2aeb30d
6
+ metadata.gz: 17a96b08513bd5adda880abe973557c685b8c4b4d0aba48475ec6c1dcf5fcda2192f72a3536ab5fa01f7740353dcc38e24e9a2a8236a3e3684c17050b679f486
7
+ data.tar.gz: 57d9abd011c6168fabfba830288f0855a9a24e40a634254264d453efb3d2c556d7ef685b751729bcd9e69ba460cf0652415d20ab82f03244a2e85775d869eebd
data/README.md CHANGED
@@ -6,11 +6,12 @@ _Guide your users in the one true path._
6
6
 
7
7
  ![Watercolor Sheep](https://upload.wikimedia.org/wikipedia/commons/e/e4/Watercolor_Sheep_Drawing.jpg)
8
8
 
9
- Abraham injects dynamically-generated [Shepherd.js](http://github.hubspot.com/shepherd/docs/welcome/) code into your Rails application whenever a user should see a guided tour. Skip a tour, and we'll try again next time; complete a tour, and it won't show up again.
9
+ Abraham injects dynamically-generated [Shepherd](https://shepherdjs.dev/) JavaScript code into your Rails application whenever a user should see a guided tour. Skip a tour, and we'll try again next time; complete a tour, and it won't show up again.
10
10
 
11
11
  * Define tour content with simple YAML files, in any/many languages.
12
12
  * Organize tours by controller and action.
13
13
  * Plays nicely with Turbolinks.
14
+ * Ships with two basic CSS themes (default & dark) -- or write your own
14
15
 
15
16
  ## Requirements
16
17
 
@@ -36,7 +37,7 @@ $ rails db:migrate
36
37
  Install the JavaScript dependencies:
37
38
 
38
39
  ```
39
- $ yarn add jquery js-cookie shepherd.js
40
+ $ yarn add jquery@^3.4.0 js-cookie@^2.2.0 shepherd.js@^6.0.0-beta
40
41
  ```
41
42
 
42
43
  Require `abraham` in `app/assets/javascripts/application.js`
@@ -45,29 +46,26 @@ Require `abraham` in `app/assets/javascripts/application.js`
45
46
  //= require abraham
46
47
  ```
47
48
 
48
- Require a Shepherd.js CSS theme in `app/assets/stylesheets/application.scss`
49
+ Require a CSS theme in `app/assets/stylesheets/application.scss`
49
50
 
50
51
  ```
51
- //= require "shepherd.js/dist/css/shepherd-theme-default"
52
+ *= require abraham/theme-default
52
53
  ```
53
54
 
54
- Shepherd.js provides the following themes:
55
+ Abraham provides the following themes:
55
56
 
56
- - `shepherd-theme-arrows`
57
- - `shepherd-theme-arrows-fix`
58
- - `shepherd-theme-arrows-plain-buttons`
59
- - `shepherd-theme-dark`
60
- - `shepherd-theme-default`
61
- - `shepherd-theme-square`
62
- - `shepherd-theme-square-dark`
57
+ - `theme-default`
58
+ - `theme-dark`
63
59
 
64
60
  Update `config/abraham.yml` if you choose a different theme:
65
61
 
66
62
  ```
67
63
  defaults: &defaults
68
- :default_theme: 'shepherd-theme-arrows'
64
+ :tour_options: '{ defaultStepOptions: { classes: "theme-dark" } }'
69
65
  ```
70
66
 
67
+ You can also [write your own Shepherd theme](https://shepherdjs.dev/docs/tutorial-03-styling.html) based on Shepherd's [default CSS](https://github.com/shipshapecode/shepherd/releases/download/v6.0.0-beta.1/shepherd.css).
68
+
71
69
  Tell Abraham where to insert its generated JavaScript in `app/views/layouts/application.html.erb`, just before the closing `body` tag:
72
70
 
73
71
  ```erb
@@ -136,6 +134,24 @@ Rails.application.configure do
136
134
  end
137
135
  ```
138
136
 
137
+ ## Upgrading from version 1
138
+
139
+ Abraham v1 was built using Shepherd 1.8, v2 now uses Shepherd 6 -- quite a jump, yes.
140
+
141
+ If you were using Abraham v1, you'll want to take the following steps to upgrade:
142
+
143
+ 1. Update your gem to the latest version
144
+ 1. Fix your yarn dependencies to use the right versions
145
+ 1. Shepherd no longer provides a set of themes. Abraham maintains two of the legacy themes: default and dark. You'll want to choose one of those or migrate your theme to the new Shepherd structure.
146
+ 1. Abraham now exposes the entire Shepherd configuration object, so your `abraham.yml` file should now fully define the `tour_options` value instead of `default_theme`
147
+ 1. There's been a slight change to `initializers/abraham.rb`. You can just change line 22 to:
148
+
149
+ ```rb
150
+ config.abraham.tour_options = abraham_config[:tour_options]
151
+ ```
152
+
153
+ If you have any trouble at all, please [submit an issue](https://github.com/actmd/abraham/issues) for assistance!
154
+
139
155
  ## Contributing
140
156
 
141
157
  Contributions are welcome!
@@ -150,6 +166,8 @@ Everyone interacting in Abraham's codebase, issue tracker, etc. is expected to f
150
166
 
151
167
  This Rails engine contains a test app called `dummy` with controller and system tests. They'll all get run with `rails t`.
152
168
 
169
+ Please note that if you change anything in the `lib/generators` folder (i.e. configuration, intializer, migration) you'll need to migrate the `dummy` app accordingly.
170
+
153
171
  Final testing should be done in a standalone Rails app, following the README instructions.
154
172
 
155
173
  To install the `abraham` gem with a local path:
@@ -160,7 +178,7 @@ gem 'abraham', path: '~/Workspace/abraham'
160
178
 
161
179
  #### Automated testing
162
180
 
163
- We use TravisCI automatically testing this rails engine. For test history, venture over to [TravisCI](https://travis-ci.com/actmd/abraham).
181
+ We use TravisCI to automatically test this engine with Rails 5.1, 5.2, and 6.0. For test history, venture over to [TravisCI](https://travis-ci.com/actmd/abraham).
164
182
 
165
183
  ### Releasing
166
184
 
@@ -0,0 +1,194 @@
1
+ .shepherd-button {
2
+ background: #3288e6;
3
+ border: 0;
4
+ border-radius: 3px;
5
+ color: hsla(0, 0%, 100%, .75);
6
+ cursor: pointer;
7
+ margin-right: .5rem;
8
+ padding: .5rem 1.5rem;
9
+ transition: all .5s ease;
10
+ }
11
+
12
+ .shepherd-button:not(:disabled):hover {
13
+ background: #196fcc;
14
+ color: hsla(0, 0%, 100%, .75);
15
+ }
16
+
17
+ .shepherd-button.shepherd-button-secondary {
18
+ background: #f1f2f3;
19
+ color: rgba(0, 0, 0, .75);
20
+ }
21
+
22
+ .shepherd-button.shepherd-button-secondary:not(:disabled):hover {
23
+ background: #d6d9db;
24
+ color: rgba(0, 0, 0, .75);
25
+ }
26
+
27
+ .shepherd-button:disabled {
28
+ cursor: not-allowed;
29
+ }
30
+
31
+ .shepherd-footer {
32
+ border-bottom-left-radius: 5px;
33
+ border-bottom-right-radius: 5px;
34
+ display: flex;
35
+ justify-content: flex-end;
36
+ padding: 0 1rem 1rem;
37
+ }
38
+
39
+ .shepherd-footer .shepherd-button:last-child {
40
+ margin-right: 0;
41
+ }
42
+
43
+ .shepherd-cancel-icon {
44
+ background: transparent;
45
+ border: none;
46
+ color: hsla(0, 0%, 50.2%, .75);
47
+ font-size: 2em;
48
+ cursor: pointer;
49
+ font-weight: 400;
50
+ margin: 0;
51
+ padding: 0;
52
+ transition: color .5s ease;
53
+ }
54
+
55
+ .shepherd-cancel-icon:hover {
56
+ color: rgba(0, 0, 0, .75);
57
+ }
58
+
59
+ .shepherd-has-title .shepherd-content .shepherd-cancel-icon {
60
+ color: hsla(0, 0%, 50.2%, .75);
61
+ }
62
+
63
+ .shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
64
+ color: rgba(0, 0, 0, .75);
65
+ }
66
+
67
+ .shepherd-title {
68
+ display: flex;
69
+ font-size: 1rem;
70
+ font-weight: 400;
71
+ flex: 1 0 auto;
72
+ margin: 0;
73
+ padding: 0;
74
+ }
75
+
76
+ .shepherd-header {
77
+ align-items: center;
78
+ border-top-left-radius: 5px;
79
+ border-top-right-radius: 5px;
80
+ display: flex;
81
+ justify-content: flex-end;
82
+ padding: 0.5rem 1rem 0;
83
+ }
84
+
85
+ .shepherd-has-title .shepherd-content .shepherd-header {
86
+ padding: 1rem;
87
+ }
88
+
89
+ .shepherd-text {
90
+ font-size: 1rem;
91
+ padding: 1rem;
92
+ }
93
+
94
+ .shepherd-text p {
95
+ margin-top: 0;
96
+ }
97
+
98
+ .shepherd-text p:last-child {
99
+ margin-bottom: 0;
100
+ }
101
+
102
+ .shepherd-content {
103
+ border-radius: 5px;
104
+ outline: none;
105
+ padding: 0;
106
+ }
107
+
108
+ .shepherd-element {
109
+ border-radius: 5px;
110
+ box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
111
+ max-width: 400px;
112
+ outline: none;
113
+ z-index: 9999;
114
+ line-height: 1.2;
115
+ }
116
+
117
+ .shepherd-element,
118
+ .shepherd-element *,
119
+ .shepherd-element :after,
120
+ .shepherd-element :before {
121
+ box-sizing: border-box;
122
+ }
123
+
124
+ .shepherd-element .shepherd-arrow {
125
+ border: 16px solid transparent;
126
+ content: "";
127
+ display: block;
128
+ height: 16px;
129
+ pointer-events: none;
130
+ position: absolute;
131
+ width: 16px;
132
+ z-index: 10000;
133
+ }
134
+
135
+ .shepherd-element.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow,
136
+ .shepherd-element.shepherd-pinned-top .shepherd-arrow {
137
+ bottom: 0;
138
+ border-top-color: #232323;
139
+ left: 50%;
140
+ transform: translate(-50%, 100%);
141
+ }
142
+
143
+ .shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow {
144
+ border-bottom-color: #232323;
145
+ left: 50%;
146
+ top: 0;
147
+ transform: translate(-50%, -100%);
148
+ }
149
+
150
+ .shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-arrow {
151
+ border-bottom-color: #303030;
152
+ }
153
+
154
+ .shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow,
155
+ .shepherd-element.shepherd-pinned-right .shepherd-arrow {
156
+ border-right-color: #232323;
157
+ left: 0;
158
+ top: 50%;
159
+ transform: translate(-100%, -50%);
160
+ }
161
+
162
+ .shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow,
163
+ .shepherd-element.shepherd-pinned-left .shepherd-arrow {
164
+ border-left-color: #232323;
165
+ right: 0;
166
+ top: 50%;
167
+ transform: translate(100%, -50%);
168
+ }
169
+
170
+ .shepherd-modal-overlay-container {
171
+ -ms-filter: progid:dximagetransform.microsoft.gradient.alpha(Opacity=50);
172
+ filter: alpha(opacity=50);
173
+ fill-rule: evenodd;
174
+ height: 0;
175
+ left: 0;
176
+ opacity: 0;
177
+ overflow: hidden;
178
+ pointer-events: none;
179
+ position: fixed;
180
+ top: 0;
181
+ transition: all .3s ease-out, height 0ms .3s, opacity .3s 0ms;
182
+ width: 100vw;
183
+ z-index: 9997;
184
+ }
185
+
186
+ .shepherd-modal-overlay-container.shepherd-modal-is-visible {
187
+ height: 100vh;
188
+ opacity: .5;
189
+ transition: all .3s ease-out, height 0s 0s, opacity .3s 0s;
190
+ }
191
+
192
+ .shepherd-modal-overlay-container.shepherd-modal-is-visible path {
193
+ pointer-events: all;
194
+ }
@@ -0,0 +1,40 @@
1
+ @import "_common";
2
+
3
+ .theme-dark.shepherd-element {
4
+ background: #232323;
5
+
6
+ .shepherd-text {
7
+ color: #eee;
8
+ }
9
+
10
+ .shepherd-title {
11
+ color: #fff;
12
+ }
13
+
14
+ &.shepherd-has-title .shepherd-content .shepherd-header {
15
+ background: #303030;
16
+ }
17
+
18
+ &.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow,
19
+ &.shepherd-pinned-top .shepherd-arrow {
20
+ border-top-color: #232323;
21
+ }
22
+
23
+ &.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow {
24
+ border-bottom-color: #232323;
25
+ }
26
+
27
+ &.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-arrow {
28
+ border-bottom-color: #303030;
29
+ }
30
+
31
+ &.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow,
32
+ &.shepherd-pinned-right .shepherd-arrow {
33
+ border-right-color: #232323;
34
+ }
35
+
36
+ &.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow,
37
+ &.shepherd-pinned-left .shepherd-arrow {
38
+ border-left-color: #232323;
39
+ }
40
+ }
@@ -0,0 +1,40 @@
1
+ @import "_common";
2
+
3
+ .theme-default.shepherd-element {
4
+ background: #fff;
5
+
6
+ .shepherd-text {
7
+ color: rgba(0, 0, 0, .75);
8
+ }
9
+
10
+ .shepherd-title {
11
+ color: rgba(0, 0, 0, .75);
12
+ }
13
+
14
+ &.shepherd-has-title .shepherd-content .shepherd-header {
15
+ background: #e6e6e6;
16
+ }
17
+
18
+ &.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow,
19
+ &.shepherd-pinned-top .shepherd-arrow {
20
+ border-top-color: #fff;
21
+ }
22
+
23
+ &.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow {
24
+ border-bottom-color: #fff;
25
+ }
26
+
27
+ &.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-arrow {
28
+ border-bottom-color: #e6e6e6;
29
+ }
30
+
31
+ &.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow,
32
+ &.shepherd-pinned-right .shepherd-arrow {
33
+ border-right-color: #fff;
34
+ }
35
+
36
+ &.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow,
37
+ &.shepherd-pinned-left .shepherd-arrow {
38
+ border-left-color: #fff;
39
+ }
40
+ }
@@ -1,9 +1,5 @@
1
1
  <script>
2
- var tour = new Shepherd.Tour({
3
- defaults: {
4
- classes: '<%= Rails.configuration.abraham.default_theme %>'
5
- }
6
- });
2
+ const tour = new Shepherd.Tour(<%= Rails.configuration.abraham.tour_options.html_safe unless Rails.configuration.abraham.tour_options.nil? %>);
7
3
 
8
4
  tour.on("complete", function() {
9
5
  // ajax
@@ -26,7 +22,8 @@
26
22
  });
27
23
 
28
24
  <% steps.each_with_index do |(key, step), index| %>
29
- tour.addStep('step-<%= key %>', {
25
+ tour.addStep({
26
+ id: 'step-<%= key %>',
30
27
  <% if step.key?('title') %>
31
28
  title: "<%= step['title'] %>",
32
29
  <% end %>
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Abraham
4
- VERSION = "1.5.3"
4
+ VERSION = "2.0.0"
5
5
  end
@@ -1,5 +1,8 @@
1
1
  defaults: &defaults
2
- :default_theme: 'shepherd-theme-default'
2
+ # Add any valid Shepherd.js configuration JSON here
3
+ # and it will be passed into the `new Shepherd.Tour()`
4
+ # initializer.
5
+ :tour_options: '{ defaultStepOptions: { classes: "theme-default" } }'
3
6
 
4
7
  development:
5
8
  <<: *defaults
@@ -19,6 +19,6 @@ Rails.application.configure do
19
19
 
20
20
  abraham_config = Rails.application.config_for :abraham
21
21
  config.abraham = ActiveSupport::OrderedOptions.new
22
- config.abraham.default_theme = abraham_config[:default_theme]
22
+ config.abraham.tour_options = abraham_config[:tour_options]
23
23
  config.abraham.tours = tours
24
24
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: abraham
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.5.3
4
+ version: 2.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Jonathan Abbett
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2019-09-04 00:00:00.000000000 Z
11
+ date: 2019-10-17 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sassc-rails
@@ -77,6 +77,9 @@ files:
77
77
  - Rakefile
78
78
  - app/assets/config/abraham_manifest.js
79
79
  - app/assets/javascripts/abraham/index.js
80
+ - app/assets/stylesheets/abraham/_common.scss
81
+ - app/assets/stylesheets/abraham/theme-dark.scss
82
+ - app/assets/stylesheets/abraham/theme-default.scss
80
83
  - app/controllers/abraham_histories_controller.rb
81
84
  - app/helpers/abraham_helper.rb
82
85
  - app/models/abraham_history.rb