Fix devdocs by specifying displayName on the LanguagePickerExample co…

…mponent

The devdocs/design page relies on displayName being specified to correctly
show the name of the example. If the component doesn't have a displayName,
the function 'name' property is used, which has a nonsense name in minified
production builds, e.g., 't'.

Also updated the docs with instructions how to specify displayName on a ES6
class.

client/components/language-picker/docs/example.jsx

@@ -12,6 +12,8 @@ import LanguagePicker from 'components/language-picker';
 import Card from 'components/card';
 
 class LanguagePickerExample extends PureComponent {
+	static displayName = 'LanguagePickerExample';
+
 	state = {
 		disabled: false,
 		loading: false,

client/devdocs/design/README.md

@@ -11,17 +11,17 @@ The file of the example component should reside into a `/docs` folder in the sam
 
 ```
 // component definition
-- client/component/popover/index.jsx 
+- client/component/popover/index.jsx
 
 // example component
-- client/component/popover/docs/example.jsx 
+- client/component/popover/docs/example.jsx
 ```
 
 #### Component name convention
 
 By convention the name of example component should ends with the `Example` word so for in the Popover case the name should be `PopoverExample`. The Devdocs-design component will take over to clean and show the right name in the web page.
 
-If the example component is created using `React.createClass` then uses `displayName` to define its name:
+If the example component is created using `React.createClass` then use `displayName` to define its name:
 
 ```js
 module.exports = React.createClass( {
@@ -31,10 +31,11 @@ module.exports = React.createClass( {
 } );
 ```
 
-If you use ES6 `class` the name will be defined in function of the class name:
+If you use ES6 `class` then define the name as a static `displayName` property:
 
 ```es6
 class PopoverExample extends PureComponent {
+	static displayName = 'PopoverExample';
 	// ...
 }
-```
+```