station 0.0.97 → 0.0.104

data/lib/nexmo_developer/app/services/translator/smartling/api/upload_file.rb

@@ -53,8 +53,10 @@ module Translator
         def file
           @file ||= begin
             file = Tempfile.new
-            file.write Nexmo::Markdown::Pipelines::Smartling::Preprocessor.new.call(
-              File.read("#{Rails.configuration.docs_base_path}/_documentation/#{I18n.default_locale}/#{@translation_request.file_uri}")
+            file.write(
+              Nexmo::Markdown::Pipelines::Smartling::Preprocessor.new.call(
+                File.read(@translation_request.file_path)
+              )
             )
             file.rewind
             file.close

data/lib/nexmo_developer/app/services/translator/translation_request.rb

@@ -1,11 +1,12 @@
 module Translator
   class TranslationRequest
-    attr_reader :locale, :frequency, :file_uri
+    attr_reader :locale, :frequency, :file_uri, :file_path
 
-    def initialize(locale:, frequency:, file_uri:)
+    def initialize(locale:, frequency:, file_uri:, file_path:)
       @locale    = locale
       @frequency = frequency
       @file_uri  = file_uri
+      @file_path = file_path
     end
   end
 end

data/lib/nexmo_developer/app/services/translator/utils.rb

@@ -11,12 +11,33 @@ module Translator
       end
     end
 
+    def locale_with_region(locale)
+      case locale.to_s
+      when 'ja', 'ja-JP'
+        'ja-JP'
+      when 'cn', 'zh-CN'
+        'zh-CN'
+      else
+        locale.to_s
+      end
+    end
+
     def storage_folder(filename, locale)
       if filename.starts_with? '_documentation'
         dir_path = Pathname.new(file_uri(filename)).dirname.to_s
         "#{Rails.configuration.docs_base_path}/_documentation/#{locale}/#{dir_path}"
+      elsif filename.starts_with? '_use_cases'
+        "#{Rails.configuration.docs_base_path}/_use_cases/#{locale}"
       elsif filename.starts_with? 'config/locales'
         Pathname.new(file_uri(filename)).dirname.to_s
+      elsif filename.starts_with? 'config/tutorials'
+        pathname = Pathname.new(filename.gsub("config/tutorials/#{I18n.default_locale}/", ''))
+        dir_path = pathname.dirname.to_s == '.' ? '' : "/#{pathname.dirname}"
+        "#{Rails.configuration.docs_base_path}/config/tutorials/#{locale}#{dir_path}"
+      elsif filename.starts_with? '_tutorials'
+        pathname = Pathname.new(filename.gsub("_tutorials/#{I18n.default_locale}/", ''))
+        dir_path = pathname.dirname.to_s == '.' ? '' : "/#{pathname.dirname}"
+        "#{Rails.configuration.docs_base_path}/_tutorials/#{locale}#{dir_path}"
       else
         dir_path = Pathname.new(file_uri(filename)).dirname.to_s
         "#{Rails.configuration.docs_base_path}/_documentation/#{locale}/#{dir_path}"
@@ -36,7 +57,13 @@ module Translator
     end
 
     def file_uri(filename)
-      filename.gsub(%r{_documentation/[a-z]{2}/}, '')
+      if filename.starts_with? '_documentation'
+        filename.gsub(%r{_documentation/[a-z]{2}/}, '')
+      else
+        filename.gsub(%r{(_use_cases|_tutorials|config/tutorials)/#{I18n.default_locale}/(.*)}) do |_|
+          "#{$1}/#{$2}"
+        end
+      end
     end
   end
 end

data/lib/nexmo_developer/app/views/contribute/guides/markdown-guide.md

@@ -28,19 +28,19 @@ navigation_weight: 3
 
 The purpose of the metadata is to provide useful information in the following areas:
 
-* Algolia search results (that is when you search in NDP)
-* Google (and other external search engine) search results
-* Information for the navbar (also sometimes called the table of contents or TOC)
+-   Algolia search results (that is when you search in NDP)
+-   Google (and other external search engine) search results
+-   Information for the navbar (also sometimes called the table of contents or TOC)
 
 The meta data items that can be used are described in the following table:
 
-Metadata | HTML generated | Description
-----|----|----
-`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.
-`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.
-`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).
-`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).
-`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.
+| Metadata            | HTML generated                                                        | Description                                                                                                                                                                                                                                                                                                                                                                  |
+| ------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `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.                                                                                                                                                                     |
+| `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.                                                                                                                                                                                                   |
+| `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).                                                                                                                                                         |
+| `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).                                                                                                                                                                                                                  |
+| `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. |
 
 ### Example
 
@@ -62,15 +62,15 @@ When using `title` bear in mind that while something like "Overview" may be fine
 
 Ideally task (step) or other active topics should include a gerund. For example:
 
-* Installing the Vonage Command Line Interface (CLI)
+-   Installing the Vonage Command Line Interface (CLI)
 
 Topics providing reference information would have a noun-based title, for example:
 
-* The Conversation object
+-   The Conversation object
 
 To provide greater context in external search results a corresponding `meta_title` might contain much more specific information, for example:
 
-* The Vonage Conversation API Conversation object
+-   The Vonage Conversation API Conversation object
 
 ### Writing an effective `description`
 
@@ -89,7 +89,9 @@ This appears in external search engine results. While navbar titles such as "Ove
 **Headings**
 
 # I am a H1
+
 ## I am a H2
+
 ### I am a H3
 
 > 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
 
 **Inline styles**
 
-Text can be **bold**, *italic* or ***bold and italic***. You could use ~~strikethrough~~ but please don't.
+Text can be **bold**, _italic_ or **_bold and italic_**. You could use ~~strikethrough~~ but please don't.
 
 You can define inline `code block` with backticks.
 
@@ -152,13 +154,13 @@ Find out ^[more](Tooltips are useful for when you have more information to conve
 >
 > Indentations are 4 spaces.
 
-* Alpha
-* Bravo
-    * Charlie
-    * Delta
-        * Echo
-    * Foxtrot
-* Golf
+-   Alpha
+-   Bravo
+    -   Charlie
+    -   Delta
+        -   Echo
+    -   Foxtrot
+-   Golf
 
 **Ordered Lists**
 
@@ -171,7 +173,7 @@ Find out ^[more](Tooltips are useful for when you have more information to conve
     1. Three
     2. Four
         1. Five
-    1. Six
+    3. Six
 3. Seven
 
 ## Code
@@ -184,11 +186,11 @@ See our detailed [code examples guide](/contribute/guides/code-examples) for adv
 >
 > You'll have to view the `markdown-guide.md` source to see how since showing you the syntax would result in it being processed.
 
-Key | Description
--- | --
-`TO_NUMBER` | The number you are sending the SMS to
-`API_KEY` | You can find this in your [account overview](https://dashboard.nexmo.com/account-overview)
-`API_SECRET` | You can find this in your [account overview](https://dashboard.nexmo.com/account-overview)
+| Key          | Description                                                                                |
+| ------------ | ------------------------------------------------------------------------------------------ |
+| `TO_NUMBER`  | The number you are sending the SMS to                                                      |
+| `API_KEY`    | You can find this in your [account overview](https://dashboard.nexmo.com/account-overview) |
+| `API_SECRET` | You can find this in your [account overview](https://dashboard.nexmo.com/account-overview) |
 
 ## Tabbed Content (custom plugin)
 
@@ -229,10 +231,10 @@ Note that `tabbed` is set to `true` for tabbed folder content.
 
 Example files can be found in the folder `_documentation/en/client-sdk/setup/add-sdk-to-your-app`:
 
-* `.config.yml`
-* `android.md`
-* `ios.md`
-* `javascript.md`
+-   `.config.yml`
+-   `android.md`
+-   `ios.md`
+-   `javascript.md`
 
 The rendered output can be found [here](/client-sdk/setup/add-sdk-to-your-app/javascript).
 
@@ -288,21 +290,21 @@ Andrew->>China: I am good thanks!
 
 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.
 
-Language | Key | Text
--- | -- | --
-English | none | Hello World
-Spanish | `es` | [Hola Mundo](lang: 'es')
-French | `fr` | [Bonjour le monde](lang: 'fr')
-Brazilian Portuguese | `pt-BR` | [Olá Mundo](lang: 'pt-BR')
-Hebrew | `il` | [שלום עולם](lang: 'il')
+| Language             | Key     | Text                           |
+| -------------------- | ------- | ------------------------------ |
+| English              | none    | Hello World                    |
+| Spanish              | `es`    | [Hola Mundo](lang: "es")       |
+| French               | `fr`    | [Bonjour le monde](lang: "fr") |
+| Brazilian Portuguese | `pt-BR` | [Olá Mundo](lang: "pt-BR")     |
+| Hebrew               | `il`    | [שלום עולם](lang: "il")        |
 
 ## Anchors (custom plugin)
 
 Adding custom anchors and retaining support for old headings can be done as such:
 
-````
+```
 ⚓ This is the old heading
-````
+```
 
 This would produce the following HTML:
 
@@ -312,12 +314,12 @@ This would produce the following HTML:
 
 If you are adding support for a changed header this would normally go above the old heading as such:
 
-````
+```
 ⚓ Send with Short Message Service
 ⚓ Send with SMS
 
 # Sending an SMS
-````
+```
 
 ### Example
 
@@ -365,9 +367,9 @@ image: public/assets/screenshots/da5f952d465355c19eb888fa1049844b31e090c2.png
 
 The HTML `<audio>` element can be utilised in Markdown with the following syntax:
 
-````
+```
 🔈[https://developer.nexmo.com.s3.amazonaws.com/assets/ssml/06-phonemes.mp3]
-````
+```
 
 This produces the following output:
 
@@ -377,9 +379,9 @@ This produces the following output:
 
 You can use syntax such as:
 
-````
+```
 Welcome to [~dynamic_content_example~]
-````
+```
 
 This will render as:
 
@@ -405,7 +407,7 @@ Alternatively, you can specify the concepts to list manually if you need to show
 
 ````
 ```concept_list
-concepts: 
+concepts:
   - voice/voice-api/call-flow
   - messaging/sms/delivery-receipts
 ```
@@ -414,7 +416,27 @@ concepts:
 This produces the following output:
 
 ```concept_list
-concepts: 
+concepts:
   - voice/voice-api/call-flow
   - messaging/sms/delivery-receipts
 ```
+
+## Snippet Variables (custom plugin)
+
+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.
+
+The variables are defined in `config/code_snippet_variables.yml`
+
+````
+```snippet_variables
+- NEXMO_API_KEY
+- TO_NUMBER
+```
+````
+
+Produces the following output:
+
+```snippet_variables
+- NEXMO_API_KEY
+- TO_NUMBER
+```

data/lib/nexmo_developer/app/views/tutorial/list.html.erb

@@ -38,7 +38,7 @@
 
               <p><%= tutorial.description %></p>
 
-              <a href="<%= tutorial.url %>/<%= params[:code_language] %>" class="Vlt-<%= Card::COLOUR.fetch(tutorial.subtitle, 'blue') %>-dark Nxd-card__cta">
+              <a href="<%= tutorial.url %>/<%= params[:code_language] %>" class="Vlt-<%= Card::COLOUR.fetch(tutorial.subtitle, 'blue') %>-darker Nxd-card__cta">
                 <%= t('read_more') %>
                 <svg class="Vlt-icon Vlt-icon--smaller">
                   <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-arrow-thin-right" />

data/lib/nexmo_developer/app/views/use_case/_index.html.erb

@@ -27,7 +27,7 @@
 
               <p><%= use_case.description %></p>
 
-              <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">
+              <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">
                 <%= t('read_more') %>
                 <svg class="Vlt-icon Vlt-icon--smaller">
                   <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-arrow-thin-right" />

data/lib/nexmo_developer/app/webpacker/javascript/volta/volta.js

@@ -1,6 +1,6 @@
 import Tooltip from './tooltip.min.js';
 
-/**
+/* @preserve
  * Copyright (c) 2001-present, Vonage.
  *	
  * Core of volta
@@ -310,6 +310,11 @@ Volta.accordion = function () {
 				this.trigger.addEventListener('click', function(){
 					self.toggle();
 				});
+				this.trigger.addEventListener('keydown', function(event) {
+					if (event.code === 'Space' || event.code === 'Enter') {
+						this.trigger.click();
+					}
+				});
 			}
 		},
 		close: function(trigger) {
@@ -319,6 +324,7 @@ Volta.accordion = function () {
 
 			trigger.classList.remove(classes.triggerActive);
 			panel.classList.add(classes.contentClosing);
+			trigger.setAttribute("aria-expanded", "false");
 
 			panel.style.height = window.getComputedStyle(panel).height;
 			panel.offsetHeight; // force repaint
@@ -361,6 +367,7 @@ Volta.accordion = function () {
 
 			trig.classList.add(classes.triggerActive);
 			panel.classList.add(classes.contentOpening);
+			trig.setAttribute("aria-expanded", "true");
 
 			var startHeight = panel.style.height;
 			panel.style.height = 'auto';
@@ -640,6 +647,7 @@ Volta.dropdown = function () {
 		noCloseBlock: 'Vlt-dropdown__block--noclose',
 		panel: 'Vlt-dropdown__panel',
 		panelContent: 'Vlt-dropdown__panel__content',
+		selected: 'Vlt-dropdown__link--selected',
 		selection: 'Vlt-dropdown__selection',
 		switch: 'Vlt-switch',
 		switchSlider: 'Vlt-switch__slider'
@@ -653,21 +661,32 @@ Volta.dropdown = function () {
 			this.selection = this.dropdown.querySelector('.' + _class.selection);
 			this.isSelectionVisible = !!this.selection;
 			this.btn = this.dropdown.querySelector('.' + _class.btn) || this.dropdown.querySelector('.' + _class.btnLegacy);
+			this._links = this.dropdown.querySelectorAll('.' + _class.link);
 			this._suppress = supressClickHandler;
 
 			if(!this._suppress) {
 				this._addEventListener();
 			}
 		},
+		_openEventHandler: undefined,
+		_keyboardEventHandler: undefined,
 		_addEventListener: function(){
-			var openHandler = this.open.bind(this);
-			this.dropdown.addEventListener('click', openHandler, { once: true })
+			this._openEventHandler = this.open.bind(this);
+			this._keyboardEventHandler = this.keyboardNavigation.bind(this);
+
+			this.dropdown.addEventListener('click', this._openEventHandler, { once: true });
+			this.dropdown.addEventListener('keydown', this._keyboardEventHandler, { once: true });
+
+			this._links.forEach(function(link) {
+				link.addEventListener('keydown', this._keyboardEventHandler);
+			}.bind(this));
 		},
 		close: function(text) {
 			if(text) {
 				this._setDropdownSelectionText(text);
 			}
 			this.dropdown.classList.remove(_class.expanded);
+			this.dropdown.setAttribute("aria-expanded", "false");
 
 			if(!this._suppress){
 				this._addEventListener();
@@ -696,31 +715,95 @@ Volta.dropdown = function () {
 			}
 
 			var text;
-			if(parentIsPanel && Volta._hasClass(e.target, _class.label)) {
+			if (parentIsPanel && Volta._hasClass(e.target, _class.label)) {
 				text = e.target.innerHTML;
-			} else if (parentIsPanel) {
+			} else if (parentIsPanel && e.keyCode !== 27) { // esc
 				var label = e.target.querySelector('.' + _class.label);
-				if(label) {
+				if (label) {
 					text = label.innerHTML;
 				}
 			}
 
+			document.querySelector('body').removeEventListener('click', this._closeEventHandler);
+			this.dropdown.removeEventListener('keydown', this._keyboardEventHandler, { once: true });
+			this.dropdown.removeEventListener('click', this._openEventHandler, { once: true });
+
+			this._links.forEach(function(link) {
+				link.removeEventListener('keydown', this._keyboardEventHandler);
+			}.bind(this));
+
 			this.close(text);
+		},
+		keyboardNavigation: function(e) {
+			e.preventDefault();
+			e.stopPropagation();
+
+			if (e.keyCode === 27) { // esc
+				this._closeEvent(e);
+			}
 
-			document.querySelector('body').removeEventListener('click', this._closeEventHandler );
+			if (e.code === 'ArrowDown' || e.code === 'ArrowUp' || e.code === 'Enter' || e.keyCode === 32) { // 32 = spacebar
+				this._links.forEach(function(link) {
+					link.setAttribute('tabIndex', '-1');
+				});
+
+				if (e.currentTarget.classList.contains(_class.wrapper)) {
+					this.dropdown.classList.add(_class.expanded);
+					this.dropdown.removeEventListener('click', this._openEventHandler, { once: true });
+
+					var selectedLink = this.dropdown.querySelector('.' + _class.selected) || this._links[0];
+
+					if (selectedLink) {
+						selectedLink.setAttribute('tabIndex', '0');
+						selectedLink.focus();
+					}
+				}
+
+				if (e.code === 'ArrowUp') {
+					var nextItem = e.currentTarget.previousElementSibling;
+				}
+
+				if (e.code === 'ArrowDown') {
+					var nextItem = e.currentTarget.nextElementSibling;
+				}
+
+				if (nextItem && nextItem.classList.contains(_class.link)) {
+					nextItem.setAttribute('tabIndex', '0');
+					nextItem.focus();
+				}
+
+				if (!this._suppress && e.currentTarget.classList.contains(_class.wrapper)) {
+					this.closeEventHandler();
+				}
+			}
+
+			if (e.code === 'Enter' && !e.currentTarget.classList.contains(_class.wrapper)) {
+				e.currentTarget.click();
+			}
 		},
 		open: function(event) {
-			if(event) {
+			if (event) {
 				event.preventDefault();
 				event.stopPropagation();
 			}
 
 			this.dropdown.classList.add(_class.expanded);
+			this.dropdown.setAttribute("aria-expanded", "true");
 
-			if(!this._suppress){
-				this._closeEventHandler = this._closeEvent.bind(this);
-				document.querySelector('body').addEventListener('click', this._closeEventHandler );
+			var selectedLink = this.dropdown.querySelector('.' + _class.selected) || this._links[0];
+
+			if (selectedLink) {
+				selectedLink.setAttribute('tabIndex', '0');
+				selectedLink.focus();
 			}
+
+			if (!this._suppress) {
+				this.closeEventHandler();
+			}
+		},
+		closeEventHandler: function() {
+			this._closeEventHandler = this._closeEvent.bind(this);
+			document.querySelector('body').addEventListener('click', this._closeEventHandler);
 		},
 		_setDropdownSelectionText: function(text) {
 			if(this.isSelectionVisible) {
@@ -1308,9 +1391,6 @@ Volta.tab = function () {
 
 					link.index = index;
 					link.addEventListener('keyup', _this._keyUpEventListener.bind(_this));
-					link.addEventListener('toggle', function () {
-						_this.toggle(link);
-					});
 					link.addEventListener('click', function () {
 						_this.toggle(link);
 					});
@@ -1375,6 +1455,7 @@ Volta.tab = function () {
 
 			this._activeLink.setAttribute('tabindex', '0');
 			this._activeLink.setAttribute('aria-selected', 'true');
+			this._activeLink.focus();
 			if (this._activePanel) {
 				this._activePanel.removeAttribute('hidden');
 			}
@@ -1538,12 +1619,10 @@ Volta.tooltip = function () {
 		left: 'Vlt-tooltip--left',
 		tooltip: 'Vlt-tooltip',
 		top: 'Vlt-tooltip--top',
-		right: 'Vlt-tooltip--right'
+		right: 'Vlt-tooltip--right',
+		large: 'Vlt-tooltip--large'
 	}
 
-	var currentTooltip = undefined,
-		currentTooltipContent = undefined;
-
 	return {
 		create: create,
 		init: attachTooltipHandlers
@@ -1567,6 +1646,7 @@ Volta.tooltip = function () {
 	 */
 	 function create(tooltip) {
 		var placement;
+		var size;
 
 		if (Volta._hasClass(tooltip, _class.bottom)) {
 			placement = 'bottom';
@@ -1578,10 +1658,16 @@ Volta.tooltip = function () {
 			placement = 'right';
 		}
 
+		if (Volta._hasClass(tooltip, _class.large)) {
+			size = ' Vlt-tooltip--large';
+		} else {
+			size='';
+		}
+
 		var template = 
-			'<div class="Vlt-tooltip--js" role="tooltip">' +
-				'<div class="tooltip-arrow Vlt-tooltip__arrow"></div>' + 
-				'<div class="tooltip-inner Vlt-tooltip__content"></div>' + 
+			'<div class="Vlt-tooltip--js' + size + '" role="tooltip">' +
+				'<div class="tooltip-arrow Vlt-tooltip__arrow"></div>' +
+				'<div class="tooltip-inner Vlt-tooltip__content"></div>' +
 			'</div>';
 
 		var title = tooltip.title;
@@ -2142,4 +2228,5 @@ Volta.menu = function () {
 	}
 }();
 
+
 export default Volta;