fix: Add Intl.js polyfill for Safari and update READMEs on polyfill s…

…ervice.

README.contribute.md

@@ -8,6 +8,11 @@ SCSS, all transpiled by [Babel](http://babeljs.io/).
 The project is also set up for unit testing with code coverage, i18n with 
 [React Intl](https://github.com/yahoo/react-intl/wiki), and hot reloading.
 
+## Polyfill Service
+
+If you require the use of polyfills to support browsers like Internet Explorer, use 
+[Polyfill.io](https://cdn.polyfill.io/v2/docs/examples) to construct your polyfill requests for specific features.
+
 ## Continuous Integration
 
 To hook up your project to Origami continuous integration, a one-time manual process is currently required. 
@@ -77,7 +82,7 @@ To see the coverage results locally, execute:
 
 Shoot for 100% code coverage.
 
-### Governance
+### Spec Compliance
 
 Determine if your component passes a series of checks for Origami v2 compliance.
 

README.md

@@ -1,4 +1,4 @@
-## Welcome Origami Developer 
+## Welcome Component Developer
 
 This is the starting project template for a standalone Origami v2 component.
 

README.usage.md

@@ -12,8 +12,19 @@ React and ReactDOM (v0.14 or v15) are external dependencies required to use this
 
 This component targets the styling in the Pearson Elements SDK.
 
-If you require the use of polyfills to support browsers like Internet Explorer (e.g. CustomEvent), please use 
-[Polyfill.io](https://cdn.polyfill.io/v2/docs/examples) to construct your polyfill requests for specific features.
+## Polyfills
+
+The following [Polyfill.io](https://cdn.polyfill.io/v2/docs/examples) features are recommended for consuming this 
+component cross-browser:
+
+```html
+<script src="https://cdn.polyfill.io/v2/polyfill.js?features=CustomEvent,Intl.~locale.en,Intl.~locale.fr"></script>
+```
+
+The CustomEvent polyfill is for Internet Explorer, and the Intl.js polyfill is for Safari. As you support more languages,
+add them to the list of polyfills. 
+
+If your browser already supports a feature, the service will automatically optimize and leave out unnecessary polyfills.
 
 ## How to Consume in an Application
 

demo/index.html

@@ -15,7 +15,8 @@ <h2>This demo is styled using the Elements SDK.</h2>
         <!-- External dependencies for React, polyfills -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
-        <script src="https://cdn.polyfill.io/v2/polyfill.js?features=CustomEvent&gated=1"></script>
+        <!-- CustomEvent polyfill is for IE, Intl.js polyfill is for Safari -->
+        <script src="https://cdn.polyfill.io/v2/polyfill.js?features=CustomEvent,Intl.~locale.en,Intl.~locale.fr"></script>
         <!-- Locally hosted demo server -->
         <script src="http://localhost:8081/webpack-dev-server.js"></script>
         <!-- Demo build of component -->

main.js

@@ -31,7 +31,7 @@ export default class MyComponent {
 
     ReactDOM.render(
       <IntlProvider locale={locale} messages={translations[locale]}>
-        <ComponentOwner data={config}/>
+        <ComponentOwner data={config} />
       </IntlProvider>,
       document.getElementById(config.elementId)
     );