Translation strings for FeaturesPanel

app/soapbox/features/ui/components/features_panel.js

@@ -1,10 +1,29 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Icon from 'soapbox/components/icon';
 import { NavLink } from 'react-router-dom';
+import { injectIntl, defineMessages } from 'react-intl';
 
-export default class FeaturesPanel extends React.PureComponent {
+const messages = defineMessages({
+  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit Profile' },
+  messages: { id: 'navigation_bar.messages', defaultMessage: 'Messages' },
+  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
+  security: { id: 'navigation_bar.security', defaultMessage: 'Security' },
+  lists: { id: 'column.lists', defaultMessage: 'Lists' },
+  bookmarks: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
+});
+
+export default
+@injectIntl
+class FeaturesPanel extends React.PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  };
 
   render() {
+    const { intl } = this.props;
+
     return (
       <div className='wtf-panel promo-panel'>
         <div className='promo-panel__container'>
@@ -12,42 +31,42 @@ export default class FeaturesPanel extends React.PureComponent {
           <div className='promo-panel-item'>
             <NavLink className='promo-panel-item__btn' to='/settings/profile'>
               <Icon id='user' className='promo-panel-item__icon' fixedWidth />
-              Edit Profile
+              {intl.formatMessage(messages.edit_profile)}
             </NavLink>
           </div>
 
           <div className='promo-panel-item'>
             <NavLink className='promo-panel-item__btn' to='/messages'>
               <Icon id='envelope' className='promo-panel-item__icon' fixedWidth />
-              Messages
+              {intl.formatMessage(messages.messages)}
             </NavLink>
           </div>
 
           <div className='promo-panel-item'>
             <NavLink className='promo-panel-item__btn' to='/bookmarks'>
               <Icon id='bookmark' className='promo-panel-item__icon' fixedWidth />
-              Bookmarks
+              {intl.formatMessage(messages.bookmarks)}
             </NavLink>
           </div>
 
           <div className='promo-panel-item'>
             <NavLink className='promo-panel-item__btn' to='/lists'>
               <Icon id='list' className='promo-panel-item__icon' fixedWidth />
-              Lists
+              {intl.formatMessage(messages.lists)}
             </NavLink>
           </div>
 
           <div className='promo-panel-item'>
             <NavLink className='promo-panel-item__btn' to='/auth/edit'>
               <Icon id='lock' className='promo-panel-item__icon' fixedWidth />
-              Security
+              {intl.formatMessage(messages.security)}
             </NavLink>
           </div>
 
           <div className='promo-panel-item'>
             <NavLink className='promo-panel-item__btn' to='/settings/preferences'>
               <Icon id='cog' className='promo-panel-item__icon' fixedWidth />
-              Preferences
+              {intl.formatMessage(messages.preferences)}
             </NavLink>
           </div>