wip: mediachoice experiment

packages/instant/src/components/sandbox.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { MediaChoice, stylesForMedia } from '../style/media';
+import { styled } from '../style/theme';
+
+// export const Sandbox: React.StatelessComponent<{}> = props => {
+//     return <div>Hi</div>;
+// };
+
+// TODO: handle string too
+interface SandboxProps {
+    width: MediaChoice;
+}
+export const Sandbox =
+    styled.div <
+    SandboxProps >
+    `
+    display: block;
+    border: 1px solid black;
+    background-color: yellow;
+    ${props => stylesForMedia(props.width)}
+    `;

packages/instant/src/components/zero_ex_instant_container.tsx

@@ -12,6 +12,7 @@ import { ColorOption } from '../style/theme';
 import { zIndex } from '../style/z_index';
 
 import { SlideAnimationState } from './animations/slide_animation';
+import { Sandbox } from './sandbox';
 import { SlidingPanel } from './sliding_panel';
 import { Container, Flex } from './ui';
 
@@ -27,6 +28,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
     public render(): React.ReactNode {
         return (
             <Container width="350px" smallWidth="100%" smallHeight="100%" position="relative">
+                <Sandbox width={{ sm: '10px' }}>Test</Sandbox>
                 <Container zIndex={zIndex.errorPopup} position="relative">
                     <LatestError />
                 </Container>

packages/instant/src/style/media.ts

@@ -1,3 +1,5 @@
+import { InterpolationValue } from 'styled-components';
+
 import { css } from './theme';
 
 export enum ScreenWidths {
@@ -17,3 +19,14 @@ export const media = {
     medium: generateMediaWrapper(ScreenWidths.Md),
     large: generateMediaWrapper(ScreenWidths.Lg),
 };
+
+/// media helper
+export interface MediaChoice {
+    sm: string;
+    md?: string;
+    lg?: string;
+}
+// TODO: handle string too
+export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
+    return media.small`width: ${choice.sm}`;
+};