station 0.0.118 → 0.0.123

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. checksums.yaml +4 -4
  2. data/Dockerfile +1 -1
  3. data/lib/nexmo_developer/Gemfile +10 -10
  4. data/lib/nexmo_developer/Gemfile.lock +146 -136
  5. data/lib/nexmo_developer/app/assets/stylesheets/application.css +8 -1
  6. data/lib/nexmo_developer/app/controllers/static_controller.rb +1 -0
  7. data/lib/nexmo_developer/app/models/tutorial/file_loader.rb +11 -7
  8. data/lib/nexmo_developer/app/models/tutorial/task.rb +27 -1
  9. data/lib/nexmo_developer/app/presenters/code_snippets_home_presenter.rb +26 -0
  10. data/lib/nexmo_developer/app/presenters/footer.rb +2 -3
  11. data/lib/nexmo_developer/app/presenters/header.rb +0 -31
  12. data/lib/nexmo_developer/app/views/contribute/code-snippets/how-to-update-code-snippets.md +1 -1
  13. data/lib/nexmo_developer/app/views/contribute/code-snippets/sample-code-snippet.md +1 -1
  14. data/lib/nexmo_developer/app/views/contribute/guides/markdown-guide.md +3 -3
  15. data/lib/nexmo_developer/app/views/layouts/application.html.erb +0 -1
  16. data/lib/nexmo_developer/app/views/layouts/documentation-index.html.erb +0 -1
  17. data/lib/nexmo_developer/app/views/layouts/documentation.html.erb +6 -0
  18. data/lib/nexmo_developer/app/views/layouts/landing.html.erb +4 -2
  19. data/lib/nexmo_developer/app/views/layouts/page.html.erb +0 -1
  20. data/lib/nexmo_developer/app/views/layouts/partials/_code_snippets_home.html.erb +38 -0
  21. data/lib/nexmo_developer/app/views/layouts/partials/_footer.html.erb +33 -32
  22. data/lib/nexmo_developer/app/views/layouts/partials/_header.html.erb +90 -31
  23. data/lib/nexmo_developer/app/views/layouts/partials/_locale_switcher.html.erb +3 -4
  24. data/lib/nexmo_developer/app/webpacker/javascript/components/concatenation/character_counter.js +5 -3
  25. data/lib/nexmo_developer/app/webpacker/javascript/components/jwt_generator/JwtGenerator.vue +1 -1
  26. data/lib/nexmo_developer/app/webpacker/javascript/components/search/Search.vue +80 -19
  27. data/lib/nexmo_developer/app/webpacker/javascript/sidenav/index.js +14 -10
  28. data/lib/nexmo_developer/app/webpacker/javascript/topnav/index.js +33 -0
  29. data/lib/nexmo_developer/app/webpacker/javascript/volta_tabbed_examples/index.js +3 -1
  30. data/lib/nexmo_developer/app/webpacker/packs/application.js +16 -5
  31. data/lib/nexmo_developer/app/webpacker/stylesheets/application.scss +4 -0
  32. data/lib/nexmo_developer/app/webpacker/stylesheets/custom/_core.scss +8 -4
  33. data/lib/nexmo_developer/app/webpacker/stylesheets/custom/_landing.scss +500 -0
  34. data/lib/nexmo_developer/app/webpacker/stylesheets/layout/_footer.scss +45 -23
  35. data/lib/nexmo_developer/app/webpacker/stylesheets/layout/_header.scss +163 -138
  36. data/lib/nexmo_developer/app/webpacker/stylesheets/layout/_search.scss +2 -5
  37. data/lib/nexmo_developer/app/webpacker/stylesheets/objects/_navigation.scss +19 -2
  38. data/lib/nexmo_developer/lib/tasks/ci.rake +23 -1
  39. data/lib/nexmo_developer/public/vonage_developer_logo.svg +26 -0
  40. data/lib/nexmo_developer/version.rb +1 -1
  41. data/package.json +34 -33
  42. data/station.gemspec +12 -12
  43. data/yarn.lock +1359 -1123
  44. metadata +74 -71
  45. data/lib/nexmo_developer/app/presenters/topnav.rb +0 -23
  46. data/lib/nexmo_developer/app/presenters/topnav_item.rb +0 -19
@@ -1 +1,8 @@
1
- //= require stylesheets/nexmo-oas-renderer
1
+ //= require stylesheets/nexmo-oas-renderer
2
+
3
+ .Adp-use-cases__background {
4
+ filter: blur(100px);
5
+ }
6
+ .Adp-platform__background {
7
+ filter: blur(100px);
8
+ }
@@ -67,6 +67,7 @@ class StaticController < ApplicationController
67
67
  end
68
68
 
69
69
  def landing
70
+ @homepage = true
70
71
  render layout: 'landing'
71
72
  end
72
73
 
@@ -9,13 +9,7 @@ class Tutorial::FileLoader
9
9
  end
10
10
 
11
11
  def path
12
- @path ||= Nexmo::Markdown::DocFinder.find(
13
- root: root,
14
- document: doc_name,
15
- language: ::I18n.locale,
16
- code_language: code_language,
17
- format: format
18
- ).path
12
+ @path ||= doc.path
19
13
  end
20
14
 
21
15
  def content
@@ -25,4 +19,14 @@ class Tutorial::FileLoader
25
19
  def yaml
26
20
  @yaml ||= YAML.safe_load(content)
27
21
  end
22
+
23
+ def doc
24
+ @doc ||= Nexmo::Markdown::DocFinder.find(
25
+ root: root,
26
+ document: doc_name,
27
+ language: ::I18n.locale,
28
+ code_language: code_language,
29
+ format: format
30
+ )
31
+ end
28
32
  end
@@ -1,5 +1,7 @@
1
1
  class Tutorial::Task
2
- attr_reader :name, :code_language, :current_step
2
+ extend ActiveModel::Naming
3
+
4
+ attr_reader :name, :code_language, :current_step, :errors
3
5
 
4
6
  delegate :yaml, :path, to: :@file_loader
5
7
 
@@ -10,6 +12,8 @@ class Tutorial::Task
10
12
  @code_language = code_language
11
13
  @current_step = current_step
12
14
  @file_loader = load_file!
15
+
16
+ @errors = ActiveModel::Errors.new(self)
13
17
  end
14
18
 
15
19
  def load_file!
@@ -21,6 +25,14 @@ class Tutorial::Task
21
25
  )
22
26
  end
23
27
 
28
+ def validate!
29
+ unless ['introduction', 'conclusion', 'prerequisites'].include? name
30
+ path.present?
31
+ end
32
+ rescue ::Nexmo::Markdown::DocFinder::MissingDoc => _e
33
+ @errors.add(:name, message: "could not find the file: #{name}")
34
+ end
35
+
24
36
  def active?
25
37
  @name == @current_step
26
38
  end
@@ -55,4 +67,18 @@ class Tutorial::Task
55
67
  def description
56
68
  @description || yaml['description']
57
69
  end
70
+
71
+ # The following methods are needed for validation
72
+
73
+ def read_attribute_for_validation(attr)
74
+ send(attr)
75
+ end
76
+
77
+ def self.human_attribute_name(attr, _options = {})
78
+ attr
79
+ end
80
+
81
+ def self.lookup_ancestors
82
+ [self]
83
+ end
58
84
  end
@@ -0,0 +1,26 @@
1
+ class CodeSnippetsHomePresenter
2
+ def code_snippets
3
+ @code_snippets ||= config['code_snippets'].map do |snippet|
4
+ OpenStruct.new(
5
+ html: Nexmo::Markdown::Renderer.new.call(
6
+ <<-STRING
7
+ ```code_snippets
8
+ source: '#{snippet['source']}'
9
+ ```
10
+ STRING
11
+ ),
12
+ title: snippet['title']
13
+ )
14
+ end
15
+ end
16
+
17
+ def cache_key
18
+ @cache_key ||= config['code_snippets'].join('-')
19
+ end
20
+
21
+ def config
22
+ @config ||= YAML.safe_load(
23
+ File.open("#{Rails.configuration.docs_base_path}/config/business_info.yml")
24
+ )
25
+ end
26
+ end
@@ -11,9 +11,6 @@ class Footer
11
11
  config = YAML.safe_load(open_config(config))
12
12
  {
13
13
  name: config['name'],
14
- subtitle: config['subtitle'],
15
- logo_path: config['assets']['footer_logo']['path'],
16
- logo_alt: config['assets']['footer_logo']['alt'],
17
14
  status: config['footer']['links']['status'],
18
15
  social_links: config['footer']['links']['social'],
19
16
  navigation_links: config['footer']['links']['navigation'],
@@ -45,6 +42,8 @@ class Footer
45
42
  word.upcase
46
43
  elsif word == 'apis'
47
44
  'APIs'
45
+ elsif word == 'sdk'
46
+ 'SDK'
48
47
  else
49
48
  word.titleize
50
49
  end
@@ -3,31 +3,6 @@ class Header
3
3
  after_initialize!
4
4
  end
5
5
 
6
- def logo_path
7
- @logo_path ||= config['assets']['header_logo']['path']
8
- end
9
-
10
- def small_logo_path
11
- @small_logo_path ||= config['assets']['header_logo']['small_path'] ||
12
- config['assets']['header_logo']['path']
13
- end
14
-
15
- def logo_alt
16
- @logo_alt ||= config['assets']['header_logo']['alt']
17
- end
18
-
19
- def name
20
- @name ||= config['name']
21
- end
22
-
23
- def subtitle
24
- @subtitle ||= config['subtitle']
25
- end
26
-
27
- def hiring_link?
28
- hiring_display
29
- end
30
-
31
6
  def sign_up_path
32
7
  @sign_up_path ||= config['header']['links']['sign-up']['path']
33
8
  end
@@ -47,10 +22,4 @@ class Header
47
22
  File.open("#{Rails.configuration.docs_base_path}/config/business_info.yml")
48
23
  )
49
24
  end
50
-
51
- def hiring_display
52
- raise 'You must provide a true or false value for the hiring display parameter inside the header section of the config/business_info.yml file' unless config['header']['hiring'].try(:has_key?, 'display')
53
-
54
- config['header']['hiring']['display']
55
- end
56
25
  end
@@ -7,7 +7,7 @@ description: This topic describes a method for updating code snippets in GitHub
7
7
 
8
8
  ## Introduction
9
9
 
10
- Updating code snippets and testing thoroughly can catch people out. You might end up with errors while trying to build NDP, or while running it locally. Here’s the procedure the tech writing team uses, which is not the only one, but it provides a good starting point for developing your own methods.
10
+ Thorough testing is essential when updating code snippets as some unintended consequences can occur if you're not careful. You might end up with errors while trying to build NDP, or while running it locally. Here’s the procedure the tech writing team uses, which is not the only one, but it provides a good starting point for developing your own methods.
11
11
 
12
12
  > Remember: code snippet repos are in submodules as far as NDP is concerned. If you are not familiar with submodules it’s probably worth doing a little background reading on them first.
13
13
 
@@ -1,5 +1,5 @@
1
1
  ---
2
- title: Quick howto on a simple thing
2
+ title: Quick how to on a simple thing
3
3
  navigation_weight: 5
4
4
  ---
5
5
 
@@ -102,7 +102,7 @@ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia od
102
102
 
103
103
  **Inline styles**
104
104
 
105
- 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.
106
106
 
107
107
  You can define inline `code block` with backticks.
108
108
 
@@ -122,7 +122,7 @@ They auto-magically color when you use verbs like [POST] or [DELETE]
122
122
  |
123
123
  | Here is some hidden content.
124
124
  |
125
- | Markdown _still_ works `here`!
125
+ | Markdown *still* works `here`!
126
126
  |
127
127
  | Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
128
128
 
@@ -131,7 +131,7 @@ They auto-magically color when you use verbs like [POST] or [DELETE]
131
131
  |
132
132
  | Here is some hidden content.
133
133
  |
134
- | Markdown _still_ works `here`!
134
+ | Markdown *still* works `here`!
135
135
  |
136
136
  | Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
137
137
  ````
@@ -10,6 +10,5 @@
10
10
  <%= yield %>
11
11
  </main>
12
12
  </div>
13
- <%= render partial: 'layouts/partials/footer' %>
14
13
  </body>
15
14
  </html>
@@ -10,7 +10,6 @@
10
10
  <main class="Vlt-main Vlt-main--light Nxd-main" tabindex="2">
11
11
  <%= render partial: 'layouts/partials/notices' %>
12
12
  <%= yield %>
13
- <%= render partial: 'layouts/partials/footer' %>
14
13
  </main>
15
14
  </body>
16
15
  </html>
@@ -5,6 +5,12 @@
5
5
  <body class="Nxd-template" data-push-state-root="<%= canonical_path %>">
6
6
  <%= render partial: 'layouts/partials/header' %>
7
7
  <div id="Vlt-sidenav" class="Vlt-sidenav Nxd-sidenav Vlt-sidenav--animate Vlt-sidenav--rounded">
8
+ <div class="Vlt-sidenav__block Vlt-sidenav__block--logo">
9
+ <div id="Vlt-sidenav-collapse-trigger" class="Vlt-sidenav__collapse">
10
+ <svg class="Vlt-sidenav__collapse__close"><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-chevron-left"></use></svg>
11
+ <svg class="Vlt-sidenav__collapse__open"><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-menu"></use></svg>
12
+ </div>
13
+ </div>
8
14
  <div class="Vlt-sidenav__scroll">
9
15
  <nav class="sidenav" id="sidenav" data-active="<%= active_sidenav_item %>" aria-label="Documentation">
10
16
  <% cache_unless params[:namespace].present?, ['sidenav', I18n.locale] do %>
@@ -2,7 +2,7 @@
2
2
  <html lang="en">
3
3
  <%= render partial: 'layouts/partials/head' %>
4
4
 
5
- <body class="<%= theme %>" data-push-state-root="<%= canonical_path %>">
5
+ <body class="<%= theme %> Adp-landing <%= @homepage && 'Adp-homepage' %>" data-push-state-root="<%= canonical_path %>">
6
6
  <%= render partial: 'layouts/partials/header' %>
7
7
  <div class="wrapper wrapper--tint">
8
8
  <%= render partial: 'layouts/partials/notices' %>
@@ -12,6 +12,8 @@
12
12
  </div>
13
13
  <%= yield %>
14
14
  </div>
15
- <%= render partial: 'layouts/partials/footer' %>
15
+ <% if @homepage %>
16
+ <%= render partial: 'layouts/partials/footer' %>
17
+ <% end %>
16
18
  </body>
17
19
  </html>
@@ -10,6 +10,5 @@
10
10
  <%= yield %>
11
11
  </main>
12
12
  </div>
13
- <%= render partial: 'layouts/partials/footer' %>
14
13
  </body>
15
14
  </html>
@@ -0,0 +1,38 @@
1
+ <% presenter = CodeSnippetsHomePresenter.new %>
2
+
3
+ <div class="Adp-code-snippets-listing glide">
4
+
5
+ <div class="glide__arrows" data-glide-el="controls">
6
+ <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
7
+ <svg class="Vlt-icon Vlt-white">
8
+ <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-left" />
9
+ </svg>
10
+ </button>
11
+ <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
12
+ <svg class="Vlt-icon Vlt-white">
13
+ <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-right" />
14
+ </svg>
15
+ </button>
16
+ </div>
17
+ <div class="glide__bullets" data-glide-el="controls[nav]">
18
+ <button class="glide__bullet" data-glide-dir="=0"></button>
19
+ <button class="glide__bullet" data-glide-dir="=1"></button>
20
+ <button class="glide__bullet" data-glide-dir="=2"></button>
21
+ </div>
22
+
23
+ <div class="glide__track" data-glide-el="track">
24
+ <% cache presenter.cache_key do %>
25
+ <div class="glide__slides">
26
+ <% presenter.code_snippets.each do |snippet| %>
27
+ <div class="glide__slide" data-glide-autoplay="4000">
28
+ <p class="Adp-code-snippet__title"><b><%= snippet.title %></b></p>
29
+ <div class="Adp-code-snippet">
30
+ <%= snippet.html.html_safe %>
31
+ </div>
32
+ </div>
33
+ <% end %>
34
+ </div>
35
+ <% end %>
36
+ </div>
37
+
38
+ </div>
@@ -2,49 +2,50 @@
2
2
  <% info = Footer.new.items %>
3
3
 
4
4
  <div class="container">
5
- <div id="footer-outbound-links">
5
+ <div class="Vlt-grid">
6
+ <div id="footer-outbound-links" class="Vlt-col">
7
+ <div class="Nxd-logo Vlt-white" id="footer-logo">
8
+ <a href="/" class="Nxd-logo__image">
9
+ <%= image_tag '/vonage_developer_logo.svg', alt: 'Vonage Developer Logo' %>
10
+ </a>
11
+ </div>
6
12
 
13
+ <% if info[:status] %>
14
+ <a href=<%= info[:status]['path'] %> target="_blank" class="Vlt-badge-combined" rel="noopener">
15
+ <span class="Vlt-badge Vlt-white Nxd-api-badge"><%= info[:status]['text'] %></span><span class="Vlt-badge Vlt-badge--purple Nxd-api-status">Loading</span>
16
+ </a>
17
+ <% end %>
7
18
 
8
- <div class="Nxd-logo Vlt-white" id="footer-logo">
9
- <a href="/" class="Nxd-logo__image">
10
- <%= image_tag info[:logo_path], alt: info[:logo_alt] %>
11
- </a>
12
- <hr class="Nxd-product__separator">
13
- <div class="Nxd-product__title">
14
- <h5 class="Vlt-white"><%= info[:name] %></h5>
15
- <small><%= info[:subtitle] %></small>
19
+ <% if info[:social_links] %>
20
+ <div id="footer-social-links">
21
+ <% info[:social_links].each do |target, url| %>
22
+ <a href=<%= url %> class="footer-link" target="_blank" rel="noopener" title="<%= target %>">
23
+ <svg class="Vlt-icon Vlt-grey">
24
+ <use xlink:href="/symbol/volta-brand-icons.svg#Brand-icon-<%= target %>" />
25
+ </svg>
26
+ </a>
27
+ <% end %>
28
+ </div>
29
+ <% end %>
16
30
  </div>
17
- </div>
18
31
 
19
- <% if info[:status] %>
20
- <a href=<%= info[:status]['path'] %> target="_blank" class="Vlt-badge-combined" rel="noopener">
21
- <span class="Vlt-badge Vlt-white Nxd-api-badge"><%= info[:status]['text'] %></span><span class="Vlt-badge Vlt-badge--purple Nxd-api-status">Loading</span>
22
- </a>
23
- <% end %>
32
+ <div class="Vlt-col"></div>
24
33
 
25
- <% if info[:social_links] %>
26
- <div id="footer-social-links">
27
- <% info[:social_links].each do |target, url| %>
28
- <a href=<%= url %> class="footer-link" target="_blank" rel="noopener" title="<%= target %>"><i class="icon icon-<%= target %>"></i></a>
34
+ <% info[:navigation_links].each do |topic_arr| %>
35
+ <div class="Vlt-col">
36
+ <h5><p><b><%= Footer.navigation_category_titleize(topic_arr[0]) %></b></p></h5>
37
+ <% topic_arr[1].each do |link| %>
38
+ <a href="<%= Footer.navigation_link(link) %>" class="Vlt-grey"><p><%= Footer.navigation_link_text(link) %></p></a>
29
39
  <% end %>
30
40
  </div>
31
41
  <% end %>
32
- </div>
33
42
 
34
- <% info[:navigation_links].each do |topic_arr| %>
35
- <div>
36
- <h5><%= Footer.navigation_category_titleize(topic_arr[0]) %></h5>
37
- <% topic_arr[1].each do |link| %>
38
- <a href="<%= Footer.navigation_link(link) %>"><%= Footer.navigation_link_text(link) %></a>
43
+ <div id="footer-support" class="Vlt-col">
44
+ <h5><p><b>Support</b></p></h5>
45
+ <% info[:support_links].each do |name, url| %>
46
+ <a href=<%= Footer.support_link(url) %> target="_blank" rel="noopener" class="Vlt-grey"><p><%= Footer.support_link_text(name) %></p></a>
39
47
  <% end %>
40
48
  </div>
41
- <% end %>
42
-
43
- <div id="footer-support">
44
- <h5>Support</h5>
45
- <% info[:support_links].each do |name, url| %>
46
- <a href=<%= Footer.support_link(url) %> target="_blank" rel="noopener"><%= Footer.support_link_text(name) %></a>
47
- <% end %>
48
49
  </div>
49
50
  </div>
50
51
  </footer>
@@ -1,34 +1,34 @@
1
1
  <% header = Header.new %>
2
2
  <%= render partial: 'layouts/partials/post-body-tags' %>
3
3
 
4
- <div class="Nxd-header">
5
- <header id="header" class="Nxd-header__main">
4
+ <div class="Adp-header">
5
+ <header id="header" class="Adp-header__main Vlt-M-plus">
6
6
  <a tabindex="0" id="skip-to-navigation" href="#sidenav-first" class="Vlt-btn Vlt-btn--outline Vlt-btn--primary Vlt-btn--app">Skip to navigation</a>
7
7
  <a tabindex="0" id="skip-to-content" href="#primary-content" class="Vlt-btn Vlt-btn--outline Vlt-btn--primary Vlt-btn--app">Skip to content</a>
8
- <div class="Nxd-logo">
9
- <a href="/" id="logo" class="Nxd-logo__image Vlt-M-plus">
10
- <%= image_tag header.logo_path, alt: header.logo_alt %>
11
-
12
- <hr class="Nxd-product__separator">
13
- <div class="Nxd-product__title Vlt-black">
14
- <h4><%= header.name %></h4>
15
- <small><%= header.subtitle %></small>
16
- </div>
8
+
9
+ <nav class="Adp-header__nav">
10
+ <a href="https://vonage.com" title="Vonage.com" target="_blank" rel="noopener noreferrer" class="Vlt-grey">
11
+ Vonage.com
12
+ <svg class="Vlt-icon Vlt-icon--large Vlt-grey">
13
+ <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-arrow-outbound" />
14
+ </svg>
17
15
  </a>
18
- <a href="/" id="logo-small" class="Nxd-logo__image Vlt-S-only">
19
- <%= image_tag header.small_logo_path, alt: header.logo_alt %>
16
+ <a href="https://www.vonage.co.uk/communications-apis/pricing/?icmp=l3nav_pricing_novalue" title="Pricing" target="_blank" rel="noopener noreferrer" class="Vlt-grey">
17
+ Pricing
18
+ <svg class="Vlt-icon Vlt-icon--large Vlt-grey">
19
+ <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-arrow-outbound" />
20
+ </svg>
21
+ </a>
22
+ <a href="https://help.nexmo.com/hc/en-us" title="Support" target="_blank" rel="noopener noreferrer" class="Vlt-grey">
23
+ Support
24
+ <svg class="Vlt-icon Vlt-icon--large Vlt-grey">
25
+ <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-arrow-outbound" />
26
+ </svg>
20
27
  </a>
21
- <% if header.hiring_link? %>
22
- <a href=<%= careers_path %> class="Vlt-M-plus Vlt-badge Vlt-badge--purple Vlt-badge--transparent Vlt-badge--small Nxd-product__hiring">
23
- <span id="header-hiring"><%= t('.hiring') %></span>
24
- </a>
25
- <% end %>
26
- </div>
27
28
 
28
- <nav class="Nxd-header__nav">
29
- <a class="Nxd-main-header__link Vlt-M-plus Vlt-black" href="https://vonage.com/communications-apis">Vonage.com</a>
30
29
  <%= render partial: 'layouts/partials/locale_switcher' %>
31
- <a href=<%= header.sign_up_path %> class="Vlt-btn Vlt-btn--secondary Vlt-btn--app" data-ab="try_button_v2"><b>
30
+
31
+ <a href=<%= header.sign_up_path %> class="Vlt-btn--white Vlt-btn--app Vlt-btn--outline Vlt-btn--small" id="signup" data-ab="try_button_v2"><b>
32
32
  <% ab_test(:try_button_v2, header.sign_up_text.map { |s| ["{ #{t(".#{s}")} }", "< #{t(".#{s}")} />"] }.flatten) do |s| %>
33
33
  <%= s %>
34
34
  <% end %>
@@ -37,21 +37,80 @@
37
37
  </nav>
38
38
  </header>
39
39
 
40
- <nav id="subnav" class="Nxd-header__sub">
41
- <button id="Vlt-sidenav-mobile-trigger" class="Vlt-btn Vlt-btn--link"><svg><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-menu"></use></svg></button>
40
+ <section id="subnav" class="Adp-header__sub">
41
+ <div class="Vlt-header__backdrop"></div>
42
+ <nav>
43
+ <a href="/" class="subnav-logo">
44
+ <%= image_tag '/vonage_developer_logo.svg', alt: 'Vonage Developer Logo', class: 'logo' %>
45
+ </a>
42
46
 
43
- <div class="Nxd-header__sub__menu">
44
- <% Topnav.new(@navigation).items.each do |item| %>
45
- <a href=<%= item.url %> class="<%= item.css_classes %>"><%= item.title %></a>
46
- <% end %>
47
- </div>
47
+ <ul class="Adp-header__sub__menu Vlt-M-plus">
48
+ <li class="Vlt-tabs__link">
49
+ <a href="<%= use_cases_path %>"><p><b class="Vlt-white"><%= I18n.t('layouts.partials.header.use-cases') %></b></p></a>
50
+ </li>
51
+ <li class="Vlt-tabs__link">
52
+ <a href="<%= documentation_path %>"><p><b class="Vlt-white"><%= I18n.t('layouts.partials.header.documentation') %></b></p></a>
53
+ </li>
54
+ <li class="Vlt-tabs__link Vlt-tabs__link-menu">
55
+ <button class="Vlt-btn Vlt-btn--link">
56
+ <p><b class="Vlt-white"><%= I18n.t('layouts.partials.header.tools') %></b></p>
57
+ <svg class="Vlt-icon Vlt-icon--smaller Vlt-grey">
58
+ <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-down" />
59
+ </svg>
60
+ </button>
61
+ <div class="Vlt-topmenu">
62
+ <div class="Vlt-topmenu__items">
63
+ <div class="Vlt-topmenu__item">
64
+ <a href="<%= static_path('tools') %>"><p><b class="Vlt-white"><%= I18n.t('layouts.partials.header.tools') %></b></p></a>
65
+ </div>
66
+ <div class="Vlt-topmenu__item">
67
+ <a href="<%= extend_path %>"><p><b class="Vlt-white">Integrations</b></p></a>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </li>
72
+ <li class="Vlt-tabs__link Vlt-tabs__link-menu">
73
+ <button class="Vlt-btn Vlt-btn--link">
74
+ <p><b class="Vlt-white"><%= I18n.t('layouts.partials.header.community') %></b></p>
75
+ <svg class="Vlt-icon Vlt-icon--smaller Vlt-grey">
76
+ <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-down" />
77
+ </svg>
78
+ </button>
79
+
80
+
81
+ <div class="Vlt-topmenu">
82
+ <div class="Vlt-topmenu__items">
83
+ <div class="Vlt-topmenu__item">
84
+ <a href="<%= static_path('community') %>"><p><b class="Vlt-white">Community hub</b></p></a>
85
+ </div>
86
+ <div class="Vlt-topmenu__item">
87
+ <a href="<%= static_path('startups') %>"><p><b class="Vlt-white">Startup program</b></p></a>
88
+ </div>
89
+ <div class="Vlt-topmenu__item">
90
+ <a href="<%= static_path('voyagers') %>"><p><b class="Vlt-white">Voyagers program</b></p></a>
91
+ </div>
92
+ <div class="Vlt-topmenu__item">
93
+ <a href="https://stackoverflow.com/questions/tagged/nexmo" target='_blank' rel='noopener noreferrer'><p><b class="Vlt-white">Stackoverflow</b></p></a>
94
+ </div>
95
+ <div class="Vlt-topmenu__item">
96
+ <a href="https://github.com/vonage" target='_blank' rel='noopener noreferrer'><p><b class="Vlt-white">Github</b></p></a>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </li>
101
+ </ul>
102
+
103
+ <svg class="Vlt-icon Vlt-icon--large Vlt-grey Vlt-S-only Adp-header__hamburger">
104
+ <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-menu" />
105
+ </svg>
106
+ </nav>
48
107
 
49
108
  <% if search_enabled? %>
50
- <%= form_tag '/search', method: :get do %>
109
+ <%= form_tag '/search', method: :get, class: 'Vlt-M-plus' do %>
51
110
  <div id="search-app">
52
111
  <input type="text" id="searchbox" name="query" placeholder="Search" name="query" autocomplete="off" value="<%= @search_term || '' %>">
53
112
  </div>
54
113
  <% end %>
55
114
  <% end %>
56
- </nav>
115
+ </section>
57
116
  </div>