aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/sandbox.tsx22
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx2
-rw-r--r--packages/instant/src/style/media.ts13
3 files changed, 37 insertions, 0 deletions
diff --git a/packages/instant/src/components/sandbox.tsx b/packages/instant/src/components/sandbox.tsx
new file mode 100644
index 000000000..04e4c7935
--- /dev/null
+++ b/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)}
+ `;
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 88c838567..8fd4d56c3 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/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>
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index fa7571077..5a0cba668 100644
--- a/packages/instant/src/style/media.ts
+++ b/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}`;
+};