feat: add <InlineWidthQuery> component

src/InlineWidthQuery/__story__/story.tsx

@@ -0,0 +1,49 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {InlineWidthQuery} from '..';
+import {View} from '../../View';
+import {WindowSizeSensor} from '../../WindowSizeSensor';
+import ShowDocs from '../../../.storybook/ShowDocs';
+
+storiesOf('UI/InlineWidthQuery', module)
+  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/InlineWidthQuery.md')}))
+  .add('Example', () =>
+    <InlineWidthQuery>
+      <View maxWidth={300}>
+        Up to 300px
+      </View>
+      <View>
+        More than 300px
+      </View>
+    </InlineWidthQuery>
+  )
+  .add('100px increments', () =>
+    <InlineWidthQuery>
+      <View maxWidth={100}>
+        Up to 100px
+      </View>
+      <View maxWidth={200}>
+        100px - 200px
+      </View>
+      <View maxWidth={300}>
+        200px - 300px
+      </View>
+      <View maxWidth={400}>
+        300px - 400px
+      </View>
+      <View maxWidth={500}>
+        400px - 500px
+      </View>
+      <View maxWidth={600}>
+        500px - 600px
+      </View>
+      <View maxWidth={700}>
+        600px - 700px
+      </View>
+      <View>
+        700px+
+      </View>
+    </InlineWidthQuery>
+  )

src/InlineWidthQuery/index.tsx

@@ -0,0 +1,10 @@
+import {h} from '../util';
+import {WidthQuery} from '../WidthQuery';
+import {SizeSensor} from '../SizeSensor';
+
+export const InlineWidthQuery = (props) =>
+  h(SizeSensor, null, (state) =>
+    h('div', null,
+      h(WidthQuery, state, props.children)
+    )
+  );