feat: add MultiSelect component skeleton

2 files changed, 80 insertions, 1 deletions

diff --git a/packages/website/ts/components/ui/multi_select.tsx b/packages/website/ts/components/ui/multi_select.tsx
new file mode 100644
index 000000000..329e76bd5
--- /dev/null
+++ b/packages/website/ts/components/ui/multi_select.tsx
@@ -0,0 +1,57 @@
+import { colors } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { zIndex } from 'ts/style/z_index';
+
+import { Container } from './container';
+import { Overlay } from './overlay';
+import { Text } from './text';
+
+export interface MultiSelectItemConfig {
+    value: string;
+    displayText: string;
+    onClick?: () => void;
+}
+
+export interface MultiSelectProps {
+    selectedValues: string[];
+    items: MultiSelectItemConfig[];
+    backgroundColor?: string;
+    textColor?: string;
+}
+
+export class MultiSelect extends React.Component<MultiSelectProps> {
+    public static defaultProps = {
+        backgroundColor: colors.white,
+        textColor: colors.darkGrey,
+    };
+    public render(): React.ReactNode {
+        const { items, backgroundColor } = this.props;
+        return (
+            <Container backgroundColor={backgroundColor} borderRadius="4px">
+                {_.map(items, item => (
+                    <MultiSelectItem key={item.value} displayText={item.displayText} onClick={item.onClick} />
+                ))}
+            </Container>
+        );
+    }
+}
+
+export interface MultiSelectItemProps {
+    displayText: string;
+    isSelected?: boolean;
+    onClick?: () => void;
+}
+
+export const MultiSelectItem: React.StatelessComponent<MultiSelectItemProps> = ({
+    displayText,
+    isSelected,
+    onClick,
+}) => (
+    <Container shouldDarkenOnHover={true} onClick={onClick}>
+        <Container borderBottom="1px solid black" padding="0px 15px">
+            {displayText}
+        </Container>
+    </Container>
+);
diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx
index d63975e31..0dac0f9ec 100644
--- a/packages/website/ts/pages/instant/config_generator.tsx
+++ b/packages/website/ts/pages/instant/config_generator.tsx
@@ -3,6 +3,8 @@ import * as React from 'react';
 
 import { Container } from 'ts/components/ui/container';
 import { Select, SelectItemConfig } from 'ts/components/ui/select';
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
 
 import { ZeroExInstantBaseConfig } from '../../../../instant/src/types';
 
@@ -18,7 +20,10 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps> {
         const { value } = this.props;
         return (
             <Container>
-                <Select value={value.orderSource as string} items={this._generateItems()} />
+                <ConfigGeneratorSection title="Standard Relayer API Endpoint">
+                    <Select value={value.orderSource as string} items={this._generateItems()} />
+                </ConfigGeneratorSection>
+                <ConfigGeneratorSection title="What tokens can users buy?">BLAH</ConfigGeneratorSection>
             </Container>
         );
     }
@@ -36,3 +41,20 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps> {
         this.props.onConfigChange(newConfig);
     };
 }
+
+export interface ConfigGeneratorSectionProps {
+    title: string;
+    actionText?: string;
+    onActionTextClick?: () => void;
+}
+
+export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSectionProps> = props => (
+    <Container marginBottom="30px">
+        <Container marginBottom="10px">
+            <Text fontColor={colors.white} fontSize="16px" lineHeight="18px">
+                {props.title}
+            </Text>
+        </Container>
+        {props.children}
+    </Container>
+);