station 0.0.97 → 0.0.104

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. checksums.yaml +4 -4
  2. data/Dockerfile +6 -5
  3. data/Gemfile +1 -1
  4. data/Gemfile.lock +1 -1
  5. data/bin/nexmo-developer +1 -44
  6. data/docs/How-To-Use.md +1 -1
  7. data/lib/nexmo_developer/.ruby-version +1 -1
  8. data/lib/nexmo_developer/Dockerfile +1 -1
  9. data/lib/nexmo_developer/Gemfile +6 -6
  10. data/lib/nexmo_developer/Gemfile.lock +24 -22
  11. data/lib/nexmo_developer/app/controllers/dashboard_controller.rb +1 -1
  12. data/lib/nexmo_developer/app/presenters/sidenav_item.rb +2 -2
  13. data/lib/nexmo_developer/app/presenters/tutorial_list_item.rb +3 -3
  14. data/lib/nexmo_developer/app/services/translator/file_translator.rb +18 -12
  15. data/lib/nexmo_developer/app/services/translator/smartling/api/upload_file.rb +4 -2
  16. data/lib/nexmo_developer/app/services/translator/translation_request.rb +3 -2
  17. data/lib/nexmo_developer/app/services/translator/utils.rb +28 -1
  18. data/lib/nexmo_developer/app/views/contribute/guides/markdown-guide.md +70 -48
  19. data/lib/nexmo_developer/app/views/tutorial/list.html.erb +1 -1
  20. data/lib/nexmo_developer/app/views/use_case/_index.html.erb +1 -1
  21. data/lib/nexmo_developer/app/webpacker/javascript/volta/volta.js +108 -21
  22. data/lib/nexmo_developer/app/webpacker/stylesheets/application.scss +1 -1
  23. data/lib/nexmo_developer/app/webpacker/stylesheets/objects/_use_cases.scss +1 -1
  24. data/lib/nexmo_developer/lib/tasks/smartling.rake +1 -1
  25. data/lib/nexmo_developer/nexmo_developer.rb +44 -0
  26. data/lib/nexmo_developer/version.rb +1 -1
  27. data/package.json +13 -13
  28. data/station.gemspec +5 -5
  29. data/yarn.lock +378 -320
  30. metadata +38 -156
  31. data/lib/nexmo_developer/public/packs-test/css/application-5047da33.chunk.css +0 -14950
  32. data/lib/nexmo_developer/public/packs-test/css/application-5047da33.chunk.css.map +0 -1
  33. data/lib/nexmo_developer/public/packs-test/css/application-a5fa0fdb.chunk.css +0 -15085
  34. data/lib/nexmo_developer/public/packs-test/css/application-a5fa0fdb.chunk.css.map +0 -1
  35. data/lib/nexmo_developer/public/packs-test/css/application-f92656e6.chunk.css +0 -13
  36. data/lib/nexmo_developer/public/packs-test/css/application-f92656e6.chunk.css.map +0 -1
  37. data/lib/nexmo_developer/public/packs-test/css/application-f9d1bdbc.chunk.css +0 -13
  38. data/lib/nexmo_developer/public/packs-test/css/application-f9d1bdbc.chunk.css.map +0 -1
  39. data/lib/nexmo_developer/public/packs-test/js/0-e58f598fb97314a89835.chunk.js +0 -59763
  40. data/lib/nexmo_developer/public/packs-test/js/0-e58f598fb97314a89835.chunk.js.map +0 -1
  41. data/lib/nexmo_developer/public/packs-test/js/application-21483bf220c794127fa9.chunk.js +0 -6405
  42. data/lib/nexmo_developer/public/packs-test/js/application-21483bf220c794127fa9.chunk.js.map +0 -1
  43. data/lib/nexmo_developer/public/packs-test/js/application-6e53f67bc3230c42f9dd.chunk.js +0 -7839
  44. data/lib/nexmo_developer/public/packs-test/js/application-6e53f67bc3230c42f9dd.chunk.js.map +0 -1
  45. data/lib/nexmo_developer/public/packs-test/js/application-76d5a80c3775a7e2327a.chunk.js +0 -6405
  46. data/lib/nexmo_developer/public/packs-test/js/application-76d5a80c3775a7e2327a.chunk.js.map +0 -1
  47. data/lib/nexmo_developer/public/packs-test/js/application-c6f3e7a9d98562f76890.chunk.js +0 -6619
  48. data/lib/nexmo_developer/public/packs-test/js/application-c6f3e7a9d98562f76890.chunk.js.map +0 -1
  49. data/lib/nexmo_developer/public/packs-test/js/application-d280e78dd4f9d3d9b466.chunk.js +0 -6405
  50. data/lib/nexmo_developer/public/packs-test/js/application-d280e78dd4f9d3d9b466.chunk.js.map +0 -1
  51. data/lib/nexmo_developer/public/packs-test/js/runtime~application-1c11a8c601900ade80b6.js +0 -155
  52. data/lib/nexmo_developer/public/packs-test/js/runtime~application-1c11a8c601900ade80b6.js.map +0 -1
  53. data/lib/nexmo_developer/public/packs-test/js/vendors~application-6518249ed8d7aa985a8b.chunk.js +0 -61849
  54. data/lib/nexmo_developer/public/packs-test/js/vendors~application-6518249ed8d7aa985a8b.chunk.js.map +0 -1
  55. data/lib/nexmo_developer/public/packs-test/js/vendors~application-bc967911d70f3f4a5151.chunk.js +0 -59077
  56. data/lib/nexmo_developer/public/packs-test/js/vendors~application-bc967911d70f3f4a5151.chunk.js.map +0 -1
  57. data/lib/nexmo_developer/public/packs-test/js/vendors~application-d2bde7a8e622fafdeb1d.chunk.js +0 -61843
  58. data/lib/nexmo_developer/public/packs-test/js/vendors~application-d2bde7a8e622fafdeb1d.chunk.js.map +0 -1
  59. data/lib/nexmo_developer/public/packs-test/js/vendors~application-eb13e7814c54bf76b364.chunk.js +0 -62431
  60. data/lib/nexmo_developer/public/packs-test/js/vendors~application-eb13e7814c54bf76b364.chunk.js.map +0 -1
  61. data/lib/nexmo_developer/public/packs-test/manifest.json +0 -85
@@ -53,8 +53,10 @@ module Translator
53
53
  def file
54
54
  @file ||= begin
55
55
  file = Tempfile.new
56
- file.write Nexmo::Markdown::Pipelines::Smartling::Preprocessor.new.call(
57
- File.read("#{Rails.configuration.docs_base_path}/_documentation/#{I18n.default_locale}/#{@translation_request.file_uri}")
56
+ file.write(
57
+ Nexmo::Markdown::Pipelines::Smartling::Preprocessor.new.call(
58
+ File.read(@translation_request.file_path)
59
+ )
58
60
  )
59
61
  file.rewind
60
62
  file.close
@@ -1,11 +1,12 @@
1
1
  module Translator
2
2
  class TranslationRequest
3
- attr_reader :locale, :frequency, :file_uri
3
+ attr_reader :locale, :frequency, :file_uri, :file_path
4
4
 
5
- def initialize(locale:, frequency:, file_uri:)
5
+ def initialize(locale:, frequency:, file_uri:, file_path:)
6
6
  @locale = locale
7
7
  @frequency = frequency
8
8
  @file_uri = file_uri
9
+ @file_path = file_path
9
10
  end
10
11
  end
11
12
  end
@@ -11,12 +11,33 @@ module Translator
11
11
  end
12
12
  end
13
13
 
14
+ def locale_with_region(locale)
15
+ case locale.to_s
16
+ when 'ja', 'ja-JP'
17
+ 'ja-JP'
18
+ when 'cn', 'zh-CN'
19
+ 'zh-CN'
20
+ else
21
+ locale.to_s
22
+ end
23
+ end
24
+
14
25
  def storage_folder(filename, locale)
15
26
  if filename.starts_with? '_documentation'
16
27
  dir_path = Pathname.new(file_uri(filename)).dirname.to_s
17
28
  "#{Rails.configuration.docs_base_path}/_documentation/#{locale}/#{dir_path}"
29
+ elsif filename.starts_with? '_use_cases'
30
+ "#{Rails.configuration.docs_base_path}/_use_cases/#{locale}"
18
31
  elsif filename.starts_with? 'config/locales'
19
32
  Pathname.new(file_uri(filename)).dirname.to_s
33
+ elsif filename.starts_with? 'config/tutorials'
34
+ pathname = Pathname.new(filename.gsub("config/tutorials/#{I18n.default_locale}/", ''))
35
+ dir_path = pathname.dirname.to_s == '.' ? '' : "/#{pathname.dirname}"
36
+ "#{Rails.configuration.docs_base_path}/config/tutorials/#{locale}#{dir_path}"
37
+ elsif filename.starts_with? '_tutorials'
38
+ pathname = Pathname.new(filename.gsub("_tutorials/#{I18n.default_locale}/", ''))
39
+ dir_path = pathname.dirname.to_s == '.' ? '' : "/#{pathname.dirname}"
40
+ "#{Rails.configuration.docs_base_path}/_tutorials/#{locale}#{dir_path}"
20
41
  else
21
42
  dir_path = Pathname.new(file_uri(filename)).dirname.to_s
22
43
  "#{Rails.configuration.docs_base_path}/_documentation/#{locale}/#{dir_path}"
@@ -36,7 +57,13 @@ module Translator
36
57
  end
37
58
 
38
59
  def file_uri(filename)
39
- filename.gsub(%r{_documentation/[a-z]{2}/}, '')
60
+ if filename.starts_with? '_documentation'
61
+ filename.gsub(%r{_documentation/[a-z]{2}/}, '')
62
+ else
63
+ filename.gsub(%r{(_use_cases|_tutorials|config/tutorials)/#{I18n.default_locale}/(.*)}) do |_|
64
+ "#{$1}/#{$2}"
65
+ end
66
+ end
40
67
  end
41
68
  end
42
69
  end
@@ -28,19 +28,19 @@ navigation_weight: 3
28
28
 
29
29
  The purpose of the metadata is to provide useful information in the following areas:
30
30
 
31
- * Algolia search results (that is when you search in NDP)
32
- * Google (and other external search engine) search results
33
- * Information for the navbar (also sometimes called the table of contents or TOC)
31
+ - Algolia search results (that is when you search in NDP)
32
+ - Google (and other external search engine) search results
33
+ - Information for the navbar (also sometimes called the table of contents or TOC)
34
34
 
35
35
  The meta data items that can be used are described in the following table:
36
36
 
37
- Metadata | HTML generated | Description
38
- ----|----|----
39
- `title` | N/A | This is the title for the topic that will be displayed in the navbar. This main be different to that display at the top of the topic. It is displayed in the Algolia search results when you search NDP.
40
- `description` | N/A | This is the short description for the topic. It is displayed in the Algolia search results when you search NDP. It should indicate the nature of the content of the topic.
41
- `meta_title` | `<head><title>The title</title>...</head>` | Used for SEO in external search engine results. This should be more descriptive than the `title` to provide additional context in the absence of the navbar. [Further reading](https://moz.com/learn/seo/title-tag).
42
- `meta_description` | `<head><meta name="description" content="The description">...</head>` | Used in external search engine results. Provides SEO. Should be no more than 160 characters. [Further reading](https://moz.com/learn/seo/meta-description).
43
- `navigation_weight` | N/A | A hint to position the topic in the navbar where a particular position is preferred. The lower the number used the higher in the navbar the item will appear. Overrides information defined in `config/navigation.yml`. In most cases you only need to add a `navigation_weight` item if your topic is not automatically displayed in your preferred position in the navbar.
37
+ | Metadata | HTML generated | Description |
38
+ | ------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
39
+ | `title` | N/A | This is the title for the topic that will be displayed in the navbar. This main be different to that display at the top of the topic. It is displayed in the Algolia search results when you search NDP. |
40
+ | `description` | N/A | This is the short description for the topic. It is displayed in the Algolia search results when you search NDP. It should indicate the nature of the content of the topic. |
41
+ | `meta_title` | `<head><title>The title</title>...</head>` | Used for SEO in external search engine results. This should be more descriptive than the `title` to provide additional context in the absence of the navbar. [Further reading](https://moz.com/learn/seo/title-tag). |
42
+ | `meta_description` | `<head><meta name="description" content="The description">...</head>` | Used in external search engine results. Provides SEO. Should be no more than 160 characters. [Further reading](https://moz.com/learn/seo/meta-description). |
43
+ | `navigation_weight` | N/A | A hint to position the topic in the navbar where a particular position is preferred. The lower the number used the higher in the navbar the item will appear. Overrides information defined in `config/navigation.yml`. In most cases you only need to add a `navigation_weight` item if your topic is not automatically displayed in your preferred position in the navbar. |
44
44
 
45
45
  ### Example
46
46
 
@@ -62,15 +62,15 @@ When using `title` bear in mind that while something like "Overview" may be fine
62
62
 
63
63
  Ideally task (step) or other active topics should include a gerund. For example:
64
64
 
65
- * Installing the Vonage Command Line Interface (CLI)
65
+ - Installing the Vonage Command Line Interface (CLI)
66
66
 
67
67
  Topics providing reference information would have a noun-based title, for example:
68
68
 
69
- * The Conversation object
69
+ - The Conversation object
70
70
 
71
71
  To provide greater context in external search results a corresponding `meta_title` might contain much more specific information, for example:
72
72
 
73
- * The Vonage Conversation API Conversation object
73
+ - The Vonage Conversation API Conversation object
74
74
 
75
75
  ### Writing an effective `description`
76
76
 
@@ -89,7 +89,9 @@ This appears in external search engine results. While navbar titles such as "Ove
89
89
  **Headings**
90
90
 
91
91
  # I am a H1
92
+
92
93
  ## I am a H2
94
+
93
95
  ### I am a H3
94
96
 
95
97
  > Custom extension: Headings have their own slugified ID's for deep linking. For example the `h1` has an ID of `i-am-a-h1`
@@ -100,7 +102,7 @@ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia od
100
102
 
101
103
  **Inline styles**
102
104
 
103
- Text can be **bold**, *italic* or ***bold and italic***. You could use ~~strikethrough~~ but please don't.
105
+ Text can be **bold**, _italic_ or **_bold and italic_**. You could use ~~strikethrough~~ but please don't.
104
106
 
105
107
  You can define inline `code block` with backticks.
106
108
 
@@ -152,13 +154,13 @@ Find out ^[more](Tooltips are useful for when you have more information to conve
152
154
  >
153
155
  > Indentations are 4 spaces.
154
156
 
155
- * Alpha
156
- * Bravo
157
- * Charlie
158
- * Delta
159
- * Echo
160
- * Foxtrot
161
- * Golf
157
+ - Alpha
158
+ - Bravo
159
+ - Charlie
160
+ - Delta
161
+ - Echo
162
+ - Foxtrot
163
+ - Golf
162
164
 
163
165
  **Ordered Lists**
164
166
 
@@ -171,7 +173,7 @@ Find out ^[more](Tooltips are useful for when you have more information to conve
171
173
  1. Three
172
174
  2. Four
173
175
  1. Five
174
- 1. Six
176
+ 3. Six
175
177
  3. Seven
176
178
 
177
179
  ## Code
@@ -184,11 +186,11 @@ See our detailed [code examples guide](/contribute/guides/code-examples) for adv
184
186
  >
185
187
  > You'll have to view the `markdown-guide.md` source to see how since showing you the syntax would result in it being processed.
186
188
 
187
- Key | Description
188
- -- | --
189
- `TO_NUMBER` | The number you are sending the SMS to
190
- `API_KEY` | You can find this in your [account overview](https://dashboard.nexmo.com/account-overview)
191
- `API_SECRET` | You can find this in your [account overview](https://dashboard.nexmo.com/account-overview)
189
+ | Key | Description |
190
+ | ------------ | ------------------------------------------------------------------------------------------ |
191
+ | `TO_NUMBER` | The number you are sending the SMS to |
192
+ | `API_KEY` | You can find this in your [account overview](https://dashboard.nexmo.com/account-overview) |
193
+ | `API_SECRET` | You can find this in your [account overview](https://dashboard.nexmo.com/account-overview) |
192
194
 
193
195
  ## Tabbed Content (custom plugin)
194
196
 
@@ -229,10 +231,10 @@ Note that `tabbed` is set to `true` for tabbed folder content.
229
231
 
230
232
  Example files can be found in the folder `_documentation/en/client-sdk/setup/add-sdk-to-your-app`:
231
233
 
232
- * `.config.yml`
233
- * `android.md`
234
- * `ios.md`
235
- * `javascript.md`
234
+ - `.config.yml`
235
+ - `android.md`
236
+ - `ios.md`
237
+ - `javascript.md`
236
238
 
237
239
  The rendered output can be found [here](/client-sdk/setup/add-sdk-to-your-app/javascript).
238
240
 
@@ -288,21 +290,21 @@ Andrew->>China: I am good thanks!
288
290
 
289
291
  Inline [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag) support, using both primary language tags and subtags, is provided using the following syntax.
290
292
 
291
- Language | Key | Text
292
- -- | -- | --
293
- English | none | Hello World
294
- Spanish | `es` | [Hola Mundo](lang: 'es')
295
- French | `fr` | [Bonjour le monde](lang: 'fr')
296
- Brazilian Portuguese | `pt-BR` | [Olá Mundo](lang: 'pt-BR')
297
- Hebrew | `il` | [שלום עולם](lang: 'il')
293
+ | Language | Key | Text |
294
+ | -------------------- | ------- | ------------------------------ |
295
+ | English | none | Hello World |
296
+ | Spanish | `es` | [Hola Mundo](lang: "es") |
297
+ | French | `fr` | [Bonjour le monde](lang: "fr") |
298
+ | Brazilian Portuguese | `pt-BR` | [Olá Mundo](lang: "pt-BR") |
299
+ | Hebrew | `il` | [שלום עולם](lang: "il") |
298
300
 
299
301
  ## Anchors (custom plugin)
300
302
 
301
303
  Adding custom anchors and retaining support for old headings can be done as such:
302
304
 
303
- ````
305
+ ```
304
306
  ⚓ This is the old heading
305
- ````
307
+ ```
306
308
 
307
309
  This would produce the following HTML:
308
310
 
@@ -312,12 +314,12 @@ This would produce the following HTML:
312
314
 
313
315
  If you are adding support for a changed header this would normally go above the old heading as such:
314
316
 
315
- ````
317
+ ```
316
318
  ⚓ Send with Short Message Service
317
319
  ⚓ Send with SMS
318
320
 
319
321
  # Sending an SMS
320
- ````
322
+ ```
321
323
 
322
324
  ### Example
323
325
 
@@ -365,9 +367,9 @@ image: public/assets/screenshots/da5f952d465355c19eb888fa1049844b31e090c2.png
365
367
 
366
368
  The HTML `<audio>` element can be utilised in Markdown with the following syntax:
367
369
 
368
- ````
370
+ ```
369
371
  🔈[https://developer.nexmo.com.s3.amazonaws.com/assets/ssml/06-phonemes.mp3]
370
- ````
372
+ ```
371
373
 
372
374
  This produces the following output:
373
375
 
@@ -377,9 +379,9 @@ This produces the following output:
377
379
 
378
380
  You can use syntax such as:
379
381
 
380
- ````
382
+ ```
381
383
  Welcome to [~dynamic_content_example~]
382
- ````
384
+ ```
383
385
 
384
386
  This will render as:
385
387
 
@@ -405,7 +407,7 @@ Alternatively, you can specify the concepts to list manually if you need to show
405
407
 
406
408
  ````
407
409
  ```concept_list
408
- concepts:
410
+ concepts:
409
411
  - voice/voice-api/call-flow
410
412
  - messaging/sms/delivery-receipts
411
413
  ```
@@ -414,7 +416,27 @@ concepts:
414
416
  This produces the following output:
415
417
 
416
418
  ```concept_list
417
- concepts:
419
+ concepts:
418
420
  - voice/voice-api/call-flow
419
421
  - messaging/sms/delivery-receipts
420
422
  ```
423
+
424
+ ## Snippet Variables (custom plugin)
425
+
426
+ When writing a code snippet, you may need to define variables that the snippet will use and provide a description of each. The description will be shown in the selected language if a translation is available.
427
+
428
+ The variables are defined in `config/code_snippet_variables.yml`
429
+
430
+ ````
431
+ ```snippet_variables
432
+ - NEXMO_API_KEY
433
+ - TO_NUMBER
434
+ ```
435
+ ````
436
+
437
+ Produces the following output:
438
+
439
+ ```snippet_variables
440
+ - NEXMO_API_KEY
441
+ - TO_NUMBER
442
+ ```
@@ -38,7 +38,7 @@
38
38
 
39
39
  <p><%= tutorial.description %></p>
40
40
 
41
- <a href="<%= tutorial.url %>/<%= params[:code_language] %>" class="Vlt-<%= Card::COLOUR.fetch(tutorial.subtitle, 'blue') %>-dark Nxd-card__cta">
41
+ <a href="<%= tutorial.url %>/<%= params[:code_language] %>" class="Vlt-<%= Card::COLOUR.fetch(tutorial.subtitle, 'blue') %>-darker Nxd-card__cta">
42
42
  <%= t('read_more') %>
43
43
  <svg class="Vlt-icon Vlt-icon--smaller">
44
44
  <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-arrow-thin-right" />
@@ -27,7 +27,7 @@
27
27
 
28
28
  <p><%= use_case.description %></p>
29
29
 
30
- <a href="<%= url_for(controller: 'use_case', action: :show, document: use_case.relative_path, only_path: true) %>" class="Vlt-<%= Card::COLOUR.fetch(use_case.subtitle, 'blue') %>-dark">
30
+ <a href="<%= url_for(controller: 'use_case', action: :show, document: use_case.relative_path, only_path: true) %>" class="Vlt-<%= Card::COLOUR.fetch(use_case.subtitle, 'blue') %>-darker">
31
31
  <%= t('read_more') %>
32
32
  <svg class="Vlt-icon Vlt-icon--smaller">
33
33
  <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-arrow-thin-right" />
@@ -1,6 +1,6 @@
1
1
  import Tooltip from './tooltip.min.js';
2
2
 
3
- /**
3
+ /* @preserve
4
4
  * Copyright (c) 2001-present, Vonage.
5
5
  *
6
6
  * Core of volta
@@ -310,6 +310,11 @@ Volta.accordion = function () {
310
310
  this.trigger.addEventListener('click', function(){
311
311
  self.toggle();
312
312
  });
313
+ this.trigger.addEventListener('keydown', function(event) {
314
+ if (event.code === 'Space' || event.code === 'Enter') {
315
+ this.trigger.click();
316
+ }
317
+ });
313
318
  }
314
319
  },
315
320
  close: function(trigger) {
@@ -319,6 +324,7 @@ Volta.accordion = function () {
319
324
 
320
325
  trigger.classList.remove(classes.triggerActive);
321
326
  panel.classList.add(classes.contentClosing);
327
+ trigger.setAttribute("aria-expanded", "false");
322
328
 
323
329
  panel.style.height = window.getComputedStyle(panel).height;
324
330
  panel.offsetHeight; // force repaint
@@ -361,6 +367,7 @@ Volta.accordion = function () {
361
367
 
362
368
  trig.classList.add(classes.triggerActive);
363
369
  panel.classList.add(classes.contentOpening);
370
+ trig.setAttribute("aria-expanded", "true");
364
371
 
365
372
  var startHeight = panel.style.height;
366
373
  panel.style.height = 'auto';
@@ -640,6 +647,7 @@ Volta.dropdown = function () {
640
647
  noCloseBlock: 'Vlt-dropdown__block--noclose',
641
648
  panel: 'Vlt-dropdown__panel',
642
649
  panelContent: 'Vlt-dropdown__panel__content',
650
+ selected: 'Vlt-dropdown__link--selected',
643
651
  selection: 'Vlt-dropdown__selection',
644
652
  switch: 'Vlt-switch',
645
653
  switchSlider: 'Vlt-switch__slider'
@@ -653,21 +661,32 @@ Volta.dropdown = function () {
653
661
  this.selection = this.dropdown.querySelector('.' + _class.selection);
654
662
  this.isSelectionVisible = !!this.selection;
655
663
  this.btn = this.dropdown.querySelector('.' + _class.btn) || this.dropdown.querySelector('.' + _class.btnLegacy);
664
+ this._links = this.dropdown.querySelectorAll('.' + _class.link);
656
665
  this._suppress = supressClickHandler;
657
666
 
658
667
  if(!this._suppress) {
659
668
  this._addEventListener();
660
669
  }
661
670
  },
671
+ _openEventHandler: undefined,
672
+ _keyboardEventHandler: undefined,
662
673
  _addEventListener: function(){
663
- var openHandler = this.open.bind(this);
664
- this.dropdown.addEventListener('click', openHandler, { once: true })
674
+ this._openEventHandler = this.open.bind(this);
675
+ this._keyboardEventHandler = this.keyboardNavigation.bind(this);
676
+
677
+ this.dropdown.addEventListener('click', this._openEventHandler, { once: true });
678
+ this.dropdown.addEventListener('keydown', this._keyboardEventHandler, { once: true });
679
+
680
+ this._links.forEach(function(link) {
681
+ link.addEventListener('keydown', this._keyboardEventHandler);
682
+ }.bind(this));
665
683
  },
666
684
  close: function(text) {
667
685
  if(text) {
668
686
  this._setDropdownSelectionText(text);
669
687
  }
670
688
  this.dropdown.classList.remove(_class.expanded);
689
+ this.dropdown.setAttribute("aria-expanded", "false");
671
690
 
672
691
  if(!this._suppress){
673
692
  this._addEventListener();
@@ -696,31 +715,95 @@ Volta.dropdown = function () {
696
715
  }
697
716
 
698
717
  var text;
699
- if(parentIsPanel && Volta._hasClass(e.target, _class.label)) {
718
+ if (parentIsPanel && Volta._hasClass(e.target, _class.label)) {
700
719
  text = e.target.innerHTML;
701
- } else if (parentIsPanel) {
720
+ } else if (parentIsPanel && e.keyCode !== 27) { // esc
702
721
  var label = e.target.querySelector('.' + _class.label);
703
- if(label) {
722
+ if (label) {
704
723
  text = label.innerHTML;
705
724
  }
706
725
  }
707
726
 
727
+ document.querySelector('body').removeEventListener('click', this._closeEventHandler);
728
+ this.dropdown.removeEventListener('keydown', this._keyboardEventHandler, { once: true });
729
+ this.dropdown.removeEventListener('click', this._openEventHandler, { once: true });
730
+
731
+ this._links.forEach(function(link) {
732
+ link.removeEventListener('keydown', this._keyboardEventHandler);
733
+ }.bind(this));
734
+
708
735
  this.close(text);
736
+ },
737
+ keyboardNavigation: function(e) {
738
+ e.preventDefault();
739
+ e.stopPropagation();
740
+
741
+ if (e.keyCode === 27) { // esc
742
+ this._closeEvent(e);
743
+ }
709
744
 
710
- document.querySelector('body').removeEventListener('click', this._closeEventHandler );
745
+ if (e.code === 'ArrowDown' || e.code === 'ArrowUp' || e.code === 'Enter' || e.keyCode === 32) { // 32 = spacebar
746
+ this._links.forEach(function(link) {
747
+ link.setAttribute('tabIndex', '-1');
748
+ });
749
+
750
+ if (e.currentTarget.classList.contains(_class.wrapper)) {
751
+ this.dropdown.classList.add(_class.expanded);
752
+ this.dropdown.removeEventListener('click', this._openEventHandler, { once: true });
753
+
754
+ var selectedLink = this.dropdown.querySelector('.' + _class.selected) || this._links[0];
755
+
756
+ if (selectedLink) {
757
+ selectedLink.setAttribute('tabIndex', '0');
758
+ selectedLink.focus();
759
+ }
760
+ }
761
+
762
+ if (e.code === 'ArrowUp') {
763
+ var nextItem = e.currentTarget.previousElementSibling;
764
+ }
765
+
766
+ if (e.code === 'ArrowDown') {
767
+ var nextItem = e.currentTarget.nextElementSibling;
768
+ }
769
+
770
+ if (nextItem && nextItem.classList.contains(_class.link)) {
771
+ nextItem.setAttribute('tabIndex', '0');
772
+ nextItem.focus();
773
+ }
774
+
775
+ if (!this._suppress && e.currentTarget.classList.contains(_class.wrapper)) {
776
+ this.closeEventHandler();
777
+ }
778
+ }
779
+
780
+ if (e.code === 'Enter' && !e.currentTarget.classList.contains(_class.wrapper)) {
781
+ e.currentTarget.click();
782
+ }
711
783
  },
712
784
  open: function(event) {
713
- if(event) {
785
+ if (event) {
714
786
  event.preventDefault();
715
787
  event.stopPropagation();
716
788
  }
717
789
 
718
790
  this.dropdown.classList.add(_class.expanded);
791
+ this.dropdown.setAttribute("aria-expanded", "true");
719
792
 
720
- if(!this._suppress){
721
- this._closeEventHandler = this._closeEvent.bind(this);
722
- document.querySelector('body').addEventListener('click', this._closeEventHandler );
793
+ var selectedLink = this.dropdown.querySelector('.' + _class.selected) || this._links[0];
794
+
795
+ if (selectedLink) {
796
+ selectedLink.setAttribute('tabIndex', '0');
797
+ selectedLink.focus();
723
798
  }
799
+
800
+ if (!this._suppress) {
801
+ this.closeEventHandler();
802
+ }
803
+ },
804
+ closeEventHandler: function() {
805
+ this._closeEventHandler = this._closeEvent.bind(this);
806
+ document.querySelector('body').addEventListener('click', this._closeEventHandler);
724
807
  },
725
808
  _setDropdownSelectionText: function(text) {
726
809
  if(this.isSelectionVisible) {
@@ -1308,9 +1391,6 @@ Volta.tab = function () {
1308
1391
 
1309
1392
  link.index = index;
1310
1393
  link.addEventListener('keyup', _this._keyUpEventListener.bind(_this));
1311
- link.addEventListener('toggle', function () {
1312
- _this.toggle(link);
1313
- });
1314
1394
  link.addEventListener('click', function () {
1315
1395
  _this.toggle(link);
1316
1396
  });
@@ -1375,6 +1455,7 @@ Volta.tab = function () {
1375
1455
 
1376
1456
  this._activeLink.setAttribute('tabindex', '0');
1377
1457
  this._activeLink.setAttribute('aria-selected', 'true');
1458
+ this._activeLink.focus();
1378
1459
  if (this._activePanel) {
1379
1460
  this._activePanel.removeAttribute('hidden');
1380
1461
  }
@@ -1538,12 +1619,10 @@ Volta.tooltip = function () {
1538
1619
  left: 'Vlt-tooltip--left',
1539
1620
  tooltip: 'Vlt-tooltip',
1540
1621
  top: 'Vlt-tooltip--top',
1541
- right: 'Vlt-tooltip--right'
1622
+ right: 'Vlt-tooltip--right',
1623
+ large: 'Vlt-tooltip--large'
1542
1624
  }
1543
1625
 
1544
- var currentTooltip = undefined,
1545
- currentTooltipContent = undefined;
1546
-
1547
1626
  return {
1548
1627
  create: create,
1549
1628
  init: attachTooltipHandlers
@@ -1567,6 +1646,7 @@ Volta.tooltip = function () {
1567
1646
  */
1568
1647
  function create(tooltip) {
1569
1648
  var placement;
1649
+ var size;
1570
1650
 
1571
1651
  if (Volta._hasClass(tooltip, _class.bottom)) {
1572
1652
  placement = 'bottom';
@@ -1578,10 +1658,16 @@ Volta.tooltip = function () {
1578
1658
  placement = 'right';
1579
1659
  }
1580
1660
 
1661
+ if (Volta._hasClass(tooltip, _class.large)) {
1662
+ size = ' Vlt-tooltip--large';
1663
+ } else {
1664
+ size='';
1665
+ }
1666
+
1581
1667
  var template =
1582
- '<div class="Vlt-tooltip--js" role="tooltip">' +
1583
- '<div class="tooltip-arrow Vlt-tooltip__arrow"></div>' +
1584
- '<div class="tooltip-inner Vlt-tooltip__content"></div>' +
1668
+ '<div class="Vlt-tooltip--js' + size + '" role="tooltip">' +
1669
+ '<div class="tooltip-arrow Vlt-tooltip__arrow"></div>' +
1670
+ '<div class="tooltip-inner Vlt-tooltip__content"></div>' +
1585
1671
  '</div>';
1586
1672
 
1587
1673
  var title = tooltip.title;
@@ -2142,4 +2228,5 @@ Volta.menu = function () {
2142
2228
  }
2143
2229
  }();
2144
2230
 
2231
+
2145
2232
  export default Volta;