Styled configurator

1 files changed, 66 insertions, 0 deletions

diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx
new file mode 100644
index 000000000..7c601da1c
--- /dev/null
+++ b/packages/website/ts/@next/pages/instant/select.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
+import {Heading, Paragraph} from 'ts/@next/components/text';
+
+export interface SelectItemConfig {
+    label: string;
+    value?: string;
+    onClick?: () => void;
+}
+
+interface SelectProps {
+    value?: string;
+    id: string;
+    items: SelectItemConfig[];
+    emptyText?: string;
+}
+
+export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, emptyText }) => {
+    return (
+        <Container>
+            <StyledSelect id={id}>
+                <option value="">{emptyText}</option>
+                {items.map((item, index) => <option key={`${id}-item-${index}`} value={item.value} selected={item.value === value} onClick={item.onClick}>{item.label}</option>)}
+            </StyledSelect>
+            <Caret width="12" height="7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1L6 6 1 1" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></Caret>
+        </Container>
+    );
+};
+
+Select.defaultProps = {
+    emptyText: 'Select...',
+};
+
+const Container = styled.div`
+    background-color: #fff;
+    border-radius: 4px;
+    display: flex;
+    width: 100%;
+    position: relative;
+`;
+
+const StyledSelect = styled.select`
+    appearance: none;
+    border: 0;
+    font-size: 1rem;
+    width: 100%;
+    padding: 20px 20px 20px 20px;
+`;
+
+const SelectAllButton = styled.button`
+    appearance: none;
+    border: 0;
+    font-size: 0.777777778rem;
+    display: block;
+    opacity: 0.75;
+`;
+
+const Caret = styled.svg`
+    position: absolute;
+    right: 20px;
+    top: calc(50% - 4px);
+`;