🌐✨First pass at internationalizing amp-story

extensions/amp-story/0.1/_locales/default.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {LocalizedStringBundleDef, LocalizedStringId} from '../localization';
+
+
+/**
+ * Localized string bundle used for English strings.
+ * @const {!LocalizedStringBundleDef}
+ */
+export default {
+  [LocalizedStringId.AMP_STORY_EXPERIMENT_ENABLE_BUTTON_LABEL]: {
+    string: 'Enable',
+  },
+  [LocalizedStringId.AMP_STORY_EXPERIMENT_ENABLED_TEXT]: {
+    string: 'Experiment enabled.  Please reload.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
+    string: ':(',
+  },
+  [LocalizedStringId.AMP_STORY_SYSTEM_LAYER_SHARE_WIDGET_LABEL]: {
+    string: 'Share',
+  },
+  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
+    string: 'Expand your window to view this experience',
+  },
+  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
+    string: 'You must enable the amp-story experiment to view this content.',
+  },
+  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
+    string: 'The page is best viewed in portrait mode',
+  },
+  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
+    string: 'We\'re sorry, it looks like your browser doesn\'t support ' +
+        'this experience',
+  },
+};

extensions/amp-story/0.1/_locales/en.js

@@ -0,0 +1,134 @@
+/**
+ * Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {LocalizedStringBundleDef, LocalizedStringId} from '../localization';
+
+
+/**
+ * Localized string bundle used for English strings.
+ * @const {!LocalizedStringBundleDef}
+ */
+export default {
+  [LocalizedStringId.AMP_STORY_EXPERIMENT_ENABLE_BUTTON_LABEL]: {
+    string: 'Enable',
+    description: 'Label for a button that enables the amp-story experiment.',
+  },
+  [LocalizedStringId.AMP_STORY_EXPERIMENT_ENABLED_TEXT]: {
+    string: 'Experiment enabled.  Please reload.',
+    description: 'Text that is shown once the amp-story experiment has ' +
+        'been successfully enabled.',
+  },
+  [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
+    string: 'Next',
+    description: 'Label indicating that users can navigate to the next ' +
+        'page, in the amp-story hint UI.',
+  },
+  [LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL]: {
+    string: 'Back',
+    description: 'Label indicating that users can navigate to the previous ' +
+        'page, in the amp-story hint UI.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
+    string: 'Could not copy link to clipboard :(',
+    description: 'String shown in a failure message to inform the user that ' +
+        'a link could not be successfully copied to their clipboard.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT]: {
+    string: 'Link copied!',
+    description: 'String shown in a confirmation message to inform the user ' +
+        'that a link was successfully copied to their clipboard.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL]: {
+    string: 'Email',
+    description: 'Button label for the share target that shares a link via ' +
+        'email.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK]: {
+    string: 'Facebook',
+    description: 'Button label for the share target that shares a link via ' +
+        'Facebook.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS]: {
+    string: 'Google+',
+    description: 'Button label for the share target that shares a link via ' +
+        'Google+.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK]: {
+    string: 'Get Link',
+    description: 'Button label for the share target that shares a link via ' +
+        'by copying it to the user\'s clipboard.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN]: {
+    string: 'LinkedIn',
+    description: 'Button label for the share target that shares a link via ' +
+        'LinkedIn.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST]: {
+    string: 'Pinterest',
+    description: 'Button label for the share target that shares a link via ' +
+        'Pinterest.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS]: {
+    string: 'SMS',
+    description: 'Button label for the share target that shares a link via ' +
+        'SMS.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SYSTEM]: {
+    string: 'More',
+    description: 'Button label for the share target that shares a link via ' +
+        'deferral to the operating system\'s native sharing handler.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR]: {
+    string: 'Tumblr',
+    description: 'Button label for the share target that shares a link via ' +
+        'Tumblr.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER]: {
+    string: 'Twitter',
+    description: 'Button label for the share target that shares a link via ' +
+        'Twitter.',
+  },
+  [LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP]: {
+    string: 'Whatsapp',
+    description: 'Button label for the share target that shares a link via ' +
+        'Whatsapp.',
+  },
+  [LocalizedStringId.AMP_STORY_SYSTEM_LAYER_SHARE_WIDGET_LABEL]: {
+    string: 'Share',
+    description: 'Label for the expandable share widget shown in the ' +
+        'desktop UI.',
+  },
+  [LocalizedStringId.AMP_STORY_WARNING_DESKTOP_SIZE_TEXT]: {
+    string: 'Expand your window to view this experience',
+    description: 'Text for a warning screen that informs the user that ' +
+        'stories are only supported in larger browser windows.',
+  },
+  [LocalizedStringId.AMP_STORY_WARNING_EXPERIMENT_DISABLED_TEXT]: {
+    string: 'You must enable the amp-story experiment to view this content.',
+    description: 'Text for a warning screen that informs the user that ' +
+        'they must enable an experiment to use stories.',
+  },
+  [LocalizedStringId.AMP_STORY_WARNING_LANDSCAPE_ORIENTATION_TEXT]: {
+    string: 'The page is best viewed in portrait mode',
+    description: 'Text for a warning screen that informs the user that ' +
+        'stories are only supported in portrait orientation.',
+  },
+  [LocalizedStringId.AMP_STORY_WARNING_UNSUPPORTED_BROWSER_TEXT]: {
+    string: 'We\'re sorry, it looks like your browser doesn\'t support ' +
+        'this experience',
+    description: 'Text for a warning screen that informs the user that ' +
+        'their browser does not support stories.',
+  },
+};

extensions/amp-story/0.1/amp-story-bookend.js

@@ -112,12 +112,12 @@ function buildArticleTemplate(articleData) {
       {
         tag: 'h2',
         attrs: dict({'class': 'i-amphtml-story-bookend-article-heading'}),
-        text: articleData.title,
+        unlocalizedString: articleData.title,
       },
       {
         tag: 'div',
         attrs: dict({'class': 'i-amphtml-story-bookend-article-meta'}),
-        text: articleData.domainName,
+        unlocalizedString: articleData.domainName,
       },
     ],
   });
@@ -150,7 +150,7 @@ function buildArticlesContainerTemplate(articleSets) {
       template.push({
         tag: 'h3',
         attrs: dict({'class': 'i-amphtml-story-bookend-heading'}),
-        text: articleSet.heading,
+        unlocalizedString: articleSet.heading,
       });
     }
     template.push({
@@ -188,12 +188,12 @@ function buildReplayButtonTemplate(doc, title, domainName, opt_imageUrl) {
       {
         tag: 'h2',
         attrs: dict({'class': 'i-amphtml-story-bookend-article-heading'}),
-        text: title,
+        unlocalizedString: title,
       },
       {
         tag: 'div',
         attrs: dict({'class': 'i-amphtml-story-bookend-article-meta'}),
-        text: domainName,
+        unlocalizedString: domainName,
       },
     ],
   });

extensions/amp-story/0.1/amp-story-desktop.css

@@ -322,9 +322,8 @@ div.i-amphtml-story-top {
 }
 
 /* Share text for share box */
-.i-amphtml-story-share-pill:after {
+span.i-amphtml-story-share-pill-label {
   font-family: 'Roboto', sans-serif!important;
-  content: 'SHARE'!important;
   position: absolute!important;
   right: 15px!important;
   text-align: center!important;
@@ -335,6 +334,7 @@ div.i-amphtml-story-top {
   margin: auto!important;
   color:#fff!important;
   box-sizing: initial !important;
+  text-transform: uppercase !important;
 }
 
 /* background for the share box */

extensions/amp-story/0.1/amp-story-hint.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import {LocalizedStringId} from './localization';
 import {Services} from '../../../src/services';
 import {dict} from '../../../src/utils/object';
 import {renderAsElement} from './simple-template';
@@ -54,7 +55,8 @@ const TEMPLATE = {
                   tag: 'div',
                   attrs: dict({'class':
                       'i-amphtml-story-hint-tap-button-text'}),
-                  text: 'Back',
+                  localizedStringId:
+                      LocalizedStringId.AMP_STORY_HINT_UI_PREVIOUS_LABEL,
                 },
               ],
             },
@@ -84,7 +86,8 @@ const TEMPLATE = {
                   tag: 'div',
                   attrs: dict({'class':
                       'i-amphtml-story-hint-tap-button-text'}),
-                  text: 'Next',
+                  localizedStringId:
+                      LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL,
                 },
               ],
             },

extensions/amp-story/0.1/amp-story-share.js

@@ -13,14 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import {LocalizedStringId} from './localization';
 import {Services} from '../../../src/services';
 import {Toast} from './toast';
 import {
   copyTextToClipboard,
   isCopyingToClipboardSupported,
 } from '../../../src/clipboard';
 import {dev, user} from '../../../src/log';
-import {dict} from './../../../src/utils/object';
+import {dict, map} from './../../../src/utils/object';
 import {isObject} from '../../../src/types';
 import {listen} from '../../../src/event-helper';
 import {px, setImportantStyles} from '../../../src/style';
@@ -32,13 +33,19 @@ import {throttle} from '../../../src/utils/rate-limit';
  * Maps share provider type to visible name.
  * If the name only needs to be capitalized (e.g. `facebook` to `Facebook`) it
  * does not need to be included here.
- * @const {!JsonObject}
+ * @const {!Object<string, !LocalizedStringId>}
  */
-const SHARE_PROVIDER_NAME = dict({
-  'gplus': 'Google+',
-  'linkedin': 'LinkedIn',
-  'system': 'More',
-  'whatsapp': 'WhatsApp',
+const SHARE_PROVIDER_LOCALIZED_STRING_ID = map({
+  'system': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SYSTEM,
+  'email': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_EMAIL,
+  'facebook': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_FACEBOOK,
+  'linkedin': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINKEDIN,
+  'pinterest': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_PINTEREST,
+  'gplus': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_GOOGLE_PLUS,
+  'tumblr': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TUMBLR,
+  'twitter': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_TWITTER,
+  'whatsapp': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_WHATSAPP,
+  'sms': LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_SMS,
 });
 
 
@@ -86,7 +93,7 @@ const LINK_SHARE_ITEM_TEMPLATE = {
     'class':
         'i-amphtml-story-share-icon i-amphtml-story-share-icon-link',
   }),
-  text: 'Get Link', // TODO(alanorozco): i18n
+  localizedStringId: LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK,
 };
 
 
@@ -118,6 +125,10 @@ function buildProviderParams(opt_params) {
  * @return {!Node}
  */
 function buildProvider(doc, shareType, opt_params) {
+  const shareProviderLocalizedStringId = dev().assert(
+      SHARE_PROVIDER_LOCALIZED_STRING_ID[shareType],
+      `No localized string to display name for share type ${shareType}.`);
+
   return renderSimpleTemplate(doc,
       /** @type {!Array<!./simple-template.ElementDef>} */ ([
         {
@@ -130,7 +141,7 @@ function buildProvider(doc, shareType, opt_params) {
                 'type': shareType,
               }),
               buildProviderParams(opt_params))),
-          text: SHARE_PROVIDER_NAME[shareType] || shareType,
+          localizedStringId: shareProviderLocalizedStringId,
         },
       ]));
 }
@@ -148,12 +159,13 @@ function buildCopySuccessfulToast(doc, url) {
     children: [
       {
         tag: 'div',
-        text: 'Link copied!', // TODO(alanorozco): i18n
+        localizedStringId:
+            LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT,
       },
       {
         tag: 'div',
         attrs: dict({'class': 'i-amphtml-story-copy-url'}),
-        text: url,
+        unlocalizedString: url,
       },
     ],
   }));
@@ -174,6 +186,9 @@ export class ShareWidget {
 
     /** @private {?Element} */
     this.root_ = null;
+
+    /** @private {?Promise<?./localization.LocalizationService>} */
+    this.localizationServicePromise_ = null;
   }
 
   /** @param {!Window} win */
@@ -189,6 +204,8 @@ export class ShareWidget {
     dev().assert(!this.root_, 'Already built.');
 
     this.ampdoc_ = ampdoc;
+    this.localizationServicePromise_ =
+        Services.localizationServiceForOrNull(this.win_);
 
     this.root_ = renderAsElement(this.win_.document, TEMPLATE);
 
@@ -224,7 +241,13 @@ export class ShareWidget {
           dev().assert(this.ampdoc_))).canonicalUrl;
 
     if (!copyTextToClipboard(this.win_, url)) {
-      Toast.show(this.win_, 'Could not copy link to clipboard :(');
+      this.localizationServicePromise_.then(localizationService => {
+        dev().assert(localizationService,
+            'Could not retrieve LocalizationService.');
+        const failureString = localizationService.getLocalizedString(
+            LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT);
+        Toast.show(this.win_, failureString);
+      });
       return;
     }