[New] DirectionProvider: add lang prop

Author: jpnelson

README.md

@@ -55,14 +55,30 @@ Usage example:
 import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';
 ```
 
-```js
+```jsx
 <DirectionProvider direction={DIRECTIONS.RTL}>
   <div>
     <ForwardsLabel />
   </div>
 </DirectionProvider>
 ```
 
+To set the `lang` attribute on the wrapping element, provide the `lang` prop to `DirectionProvider`.
+
+Usage example:
+
+```jsx
+import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';
+
+<DirectionProvider direction={DIRECTIONS.RTL} lang="ar">
+  <div>
+    <ForwardsLabel />
+  </div>
+</DirectionProvider>
+```
+
+Note that `lang` and `direction` are independent – `lang` only sets the attribute on the wrapping element.
+
 ## AutoDirectionProvider
 
 Use `AutoDirectionProvider` around, for example, user-generated content where the text direction is unknown or may change. This renders a `DirectionProvider` with the `direction` prop automatically set based on the `text` prop provided.
@@ -83,6 +99,8 @@ import AutoDirectionProvider from 'react-with-direction/dist/AutoDirectionProvid
 </AutoDirectionProvider>
 ```
 
+`AutoDirectionProvider` also supports the `lang` prop in the same way as `DirectionProvider` does.
+
 [package-url]: https://npmjs.org/package/react-with-direction
 [npm-version-svg]: http://versionbadg.es/airbnb/react-with-direction.svg
 [travis-svg]: https://travis-ci.org/airbnb/react-with-direction.svg

src/AutoDirectionProvider.jsx

@@ -11,6 +11,7 @@ const propTypes = forbidExtraProps({
   direction: directionPropType.isRequired,
   inline: PropTypes.bool,
   text: PropTypes.string.isRequired,
+  lang: PropTypes.string,
 });
 
 const defaultProps = {
@@ -22,6 +23,7 @@ function AutoDirectionProvider({
   direction,
   inline,
   text,
+  lang,
 }) {
   const textDirection = getDirection(text);
   const dir = textDirection === 'neutral' ? direction : textDirection;
@@ -30,6 +32,7 @@ function AutoDirectionProvider({
     <DirectionProvider
       direction={dir}
       inline={inline}
+      {...(lang && { lang })}
     >
       {React.Children.only(children)}
     </DirectionProvider>

src/DirectionProvider.jsx

@@ -14,6 +14,7 @@ const propTypes = forbidExtraProps({
   children: PropTypes.node.isRequired,
   direction: directionPropType.isRequired,
   inline: PropTypes.bool,
+  lang: PropTypes.string,
 });
 
 const defaultProps = {
@@ -45,10 +46,10 @@ export default class DirectionProvider extends React.Component {
   }
 
   render() {
-    const { children, direction, inline } = this.props;
+    const { children, direction, inline, lang } = this.props;
     const Tag = inline ? 'span' : 'div';
     return (
-      <Tag dir={direction}>
+      <Tag dir={direction} {...(lang && { lang })}>
         {React.Children.only(children)}
       </Tag>
     );

tests/AutoDirectionProvider_test.jsx

@@ -87,4 +87,14 @@ describe('<AutoDirectionProvider>', () => {
 
     expect(wrapper.find(DirectionProvider)).to.have.prop('inline', true);
   });
+
+  it('passes the lang prop to DirectionProvider', () => {
+    const wrapper = shallow((
+      <AutoDirectionProvider text="a" lang="en">
+        <div />
+      </AutoDirectionProvider>
+    )).dive();
+
+    expect(wrapper.find(DirectionProvider)).to.have.prop('lang', 'en');
+  });
 });

tests/DirectionProvider_test.jsx

@@ -37,6 +37,14 @@ describe('<DirectionProvider>', () => {
     expect(wrapper).to.have.prop('dir', direction);
   });
 
+  it('renders a lang attribute when the lang prop is set', () => {
+    const direction = DIRECTIONS.RTL;
+    const wrapper = shallow(
+      <DirectionProvider direction={direction} lang="ar">{children}</DirectionProvider>,
+    );
+    expect(wrapper).to.have.prop('lang', 'ar');
+  });
+
   it('broadcasts the direction when the direction prop changes', () => {
     const direction = DIRECTIONS.LTR;
     const nextDirection = DIRECTIONS.RTL;