fix #8 and #7

components/form/admin/types/dropdown.type.tsx

@@ -1,9 +1,8 @@
-import {Form, Input} from 'antd'
+import {Button, Col, Form, Input, Row} from 'antd'
 import React from 'react'
 import {AdminFieldTypeProps} from './type.props'
 
 export const DropdownType: React.FC<AdminFieldTypeProps> = props => {
-  // TODO add dropdown options
   return (
     <div>
       <Form.Item
@@ -13,6 +12,69 @@ export const DropdownType: React.FC<AdminFieldTypeProps> = props => {
       >
         <Input />
       </Form.Item>
+
+      <Form.List
+        name={[props.field.name, 'options']}
+      >
+        {(fields, { add, remove }) => {
+
+          return (
+            <div>
+              {fields.map((field, index) => (
+                <Form.Item
+                  wrapperCol={{
+                    sm: { offset: index === 0 ? 0 : 6 },
+                  }}
+                  labelCol={{ span: 6 }}
+                  label={index === 0 ? 'Options' : ''}
+                  key={field.key}
+                >
+                  <Row gutter={16}>
+                    <Col span={12}>
+                      <Form.Item
+                        wrapperCol={{ span: 24 }}
+                        name={[field.name, 'title']}
+                        style={{marginBottom: 0}}
+                      >
+                        <Input placeholder={'Title'} />
+                      </Form.Item>
+                    </Col>
+                    <Col span={8}>
+                      <Form.Item
+                        wrapperCol={{ span: 24 }}
+                        name={[field.name, 'value']}
+                        style={{marginBottom: 0}}
+                        rules={[
+                          { required: true, message: 'Please provide a value' }
+                        ]}
+                      >
+                        <Input placeholder={'Value'} />
+                      </Form.Item>
+                    </Col>
+                    <Col span={4}>
+                      <Button danger onClick={() => remove(index)}>
+                        Remove
+                      </Button>
+                    </Col>
+                  </Row>
+                </Form.Item>
+              ))}
+
+              <Form.Item
+                wrapperCol={{
+                  sm: { offset: 6 },
+                }}
+                labelCol={{ span: 6 }}
+              >
+                <Button
+                  type={'dashed'}
+                  onClick={() => add()}
+                >Add Option</Button>
+              </Form.Item>
+            </div>
+          )
+        }}
+      </Form.List>
     </div>
   )
 }

components/form/admin/types/radio.type.tsx

@@ -1,10 +1,8 @@
-import {Form, Input} from 'antd'
+import {Button, Col, Form, Input, Row} from 'antd'
 import React from 'react'
 import {AdminFieldTypeProps} from './type.props'
 
 export const RadioType: React.FC<AdminFieldTypeProps> = props => {
-  // TODO Add radio support
-
   return (
     <div>
       <Form.Item
@@ -14,6 +12,69 @@ export const RadioType: React.FC<AdminFieldTypeProps> = props => {
       >
         <Input />
       </Form.Item>
+
+      <Form.List
+        name={[props.field.name, 'options']}
+      >
+        {(fields, { add, remove }) => {
+
+          return (
+            <div>
+              {fields.map((field, index) => (
+                <Form.Item
+                  wrapperCol={{
+                    sm: { offset: index === 0 ? 0 : 6 },
+                  }}
+                  labelCol={{ span: 6 }}
+                  label={index === 0 ? 'Options' : ''}
+                  key={field.key}
+                >
+                  <Row gutter={16}>
+                    <Col span={12}>
+                      <Form.Item
+                        wrapperCol={{ span: 24 }}
+                        name={[field.name, 'title']}
+                        style={{marginBottom: 0}}
+                      >
+                        <Input placeholder={'Title'} />
+                      </Form.Item>
+                    </Col>
+                    <Col span={8}>
+                      <Form.Item
+                        wrapperCol={{ span: 24 }}
+                        name={[field.name, 'value']}
+                        style={{marginBottom: 0}}
+                        rules={[
+                          { required: true, message: 'Please provide a value' }
+                        ]}
+                      >
+                        <Input placeholder={'Value'} />
+                      </Form.Item>
+                    </Col>
+                    <Col span={4}>
+                      <Button danger onClick={() => remove(index)}>
+                        Remove
+                      </Button>
+                    </Col>
+                  </Row>
+                </Form.Item>
+              ))}
+
+              <Form.Item
+                wrapperCol={{
+                  sm: { offset: 6 },
+                }}
+                labelCol={{ span: 6 }}
+              >
+                <Button
+                  type={'dashed'}
+                  onClick={() => add()}
+                >Add Option</Button>
+              </Form.Item>
+            </div>
+          )
+        }}
+      </Form.List>
     </div>
   )
 }

components/form/types/dropdown.type.tsx

@@ -1,9 +1,11 @@
-import {Form, Input} from 'antd'
+import {Form, Select} from 'antd'
-import React from 'react'
+import React, {useState} from 'react'
+import {StyledSelect} from '../../styled/select'
 import {FieldTypeProps} from './type.props'
 
-export const DropdownType: React.FC<FieldTypeProps> = ({field}) => {
+export const DropdownType: React.FC<FieldTypeProps> = ({field, design}) => {
-  // TODO add dropdown options
+  const [open, setOpen] = useState(false)
+
   return (
     <div>
       <Form.Item
@@ -11,8 +13,13 @@ export const DropdownType: React.FC<FieldTypeProps> = ({field}) => {
         rules={[
           { required: field.required, message: 'Please provide Information' },
         ]}
+        initialValue={field.value || null}
       >
-        <Input />
+        <StyledSelect design={design} open={open} onBlur={() => setOpen(false)} onFocus={() => setOpen(true)} onSelect={() => setOpen(false)}>
+          {field.options.filter(option => option.key === null).map(option => (
+            <Select.Option value={option.value} key={option.value}>OK{option.title || option.value}</Select.Option>
+          ))}
+        </StyledSelect>
       </Form.Item>
     </div>
   )

components/form/types/radio.type.tsx

@@ -1,10 +1,9 @@
-import {Form, Input} from 'antd'
+import {Form, Radio} from 'antd'
 import React from 'react'
+import {StyledRadio} from '../../styled/radio'
 import {FieldTypeProps} from './type.props'
 
-export const RadioType: React.FC<FieldTypeProps> = ({field}) => {
+export const RadioType: React.FC<FieldTypeProps> = ({field, design}) => {
-  // TODO Add radio support
-
   return (
     <div>
       <Form.Item
@@ -12,8 +11,19 @@ export const RadioType: React.FC<FieldTypeProps> = ({field}) => {
         rules={[
           { required: field.required, message: 'Please provide Information' },
         ]}
+        initialValue={field.options.map(option => option.value).find(value => value === field.value)}
       >
-        <Input />
+        <Radio.Group>
+          {field.options.filter(option => option.key === null).map(option => (
+            <StyledRadio
+              design={design}
+              value={option.value}
+              key={option.value}
+            >
+              {option.title || option.value}
+            </StyledRadio>
+          ))}
+        </Radio.Group>
       </Form.Item>
     </div>
   )

components/styled/radio.tsx

@@ -0,0 +1,39 @@
+import {Radio} from 'antd'
+import {RadioProps} from 'antd/lib/radio/interface'
+import React from 'react'
+import styled from 'styled-components'
+import {FormDesignFragment} from '../../graphql/fragment/form.fragment'
+
+interface Props extends RadioProps {
+  design: FormDesignFragment
+}
+
+const Field = styled(Radio)`
+  color: ${props => props.design.colors.answerColor};
+  border-color: ${props => props.design.colors.answerColor};
+  background: none;
+  
+  .ant-radio {
+    .ant-radio-inner {
+      border-color: ${props => props.design.colors.answerColor};
+      
+      &::after {
+        background: ${props => props.design.colors.answerColor};
+      }
+    }
+    
+    &::after {
+      border-color: ${props => props.design.colors.answerColor};
+    }
+  }
+  
+  .anticon {
+    color: ${props => props.design.colors.answerColor};
+  }
+`
+
+export const StyledRadio: React.FC<Props> = ({children, ...props}) => {
+  return (
+    <Field {...props}>{children}</Field>
+  )
+}

components/styled/select.tsx

@@ -0,0 +1,51 @@
+import {Select} from 'antd'
+import {SelectProps} from 'antd/lib/select'
+import React from 'react'
+import styled from 'styled-components'
+import {FormDesignFragment} from '../../graphql/fragment/form.fragment'
+import {transparentize} from './color.change'
+
+interface Props extends SelectProps<string> {
+  design: FormDesignFragment
+}
+
+const Field = styled(Select)`
+  .ant-select-selector {
+    color: ${props => props.design.colors.answerColor};
+    border-color: ${props => props.design.colors.answerColor} !important;
+    background: none !important;
+    border-right: none !important;
+    border-top: none !important;
+    border-left: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+  }
+  
+  :focus {
+    outline: ${props => props.design.colors.answerColor} auto 5px
+  }
+  
+  :hover,
+  :active {
+    border-color: ${props => props.design.colors.answerColor};
+  }
+  
+  input {
+    background: none !important;
+    color: ${props => props.design.colors.answerColor};
+    
+    ::placeholder {
+      color: ${props => transparentize(props.design.colors.answerColor, 60)}
+    }
+  }
+  
+  .anticon {
+    color: ${props => props.design.colors.answerColor};
+  }
+`
+
+export const StyledSelect: React.FC<Props> = ({children, ...props}) => {
+  return (
+    <Field {...props}>{children}</Field>
+  )
+}

graphql/fragment/admin.form.fragment.ts

@@ -14,6 +14,20 @@ export interface AdminFormPageFragment {
   }[]
 }
 
+export interface AdminFormFieldOptionFragment {
+  key?: number
+  title?: string
+  value: string
+}
+
+export interface AdminFormFieldLogicJumpFragment {
+  fieldA?: string
+  valueB?: string
+  expressionString?: string
+  jumpTo?: string
+  enabled: boolean
+}
+
 export interface AdminFormFieldFragment {
   id: string
   title: string
@@ -21,6 +35,15 @@ export interface AdminFormFieldFragment {
   description: string
   required: boolean
   value: string
+
+  options: AdminFormFieldOptionFragment[]
+
+  logicJump: AdminFormFieldLogicJumpFragment
+
+  rating?: {
+    steps?: number
+    shape?: string
+  }
 }
 
 export interface AdminFormFragment {
@@ -82,6 +105,24 @@ export const ADMIN_FORM_FRAGMENT = gql`
       description
       required
       value
+      
+      options {
+        key
+        title
+        value
+      }
+      
+      logicJump {
+        fieldA
+        valueB
+        expressionString
+        jumpTo
+        enabled
+      }
+      rating {
+        steps
+        shape
+      }
     }
     
     selfNotifications {

graphql/fragment/form.fragment.ts

@@ -15,6 +15,20 @@ export interface FormPageFragment {
   }[]
 }
 
+export interface FormFieldOptionFragment {
+  key?: number
+  title?: string
+  value: string
+}
+
+export interface FormFieldLogicJumpFragment {
+  fieldA?: string
+  valueB?: string
+  expressionString?: string
+  jumpTo?: string
+  enabled: boolean
+}
+
 export interface FormFieldFragment {
   id: string
   title: string
@@ -22,6 +36,15 @@ export interface FormFieldFragment {
   description: string
   required: boolean
   value: string
+
+  options: FormFieldOptionFragment[]
+
+  logicJump: FormFieldLogicJumpFragment
+
+  rating?: {
+    steps?: number
+    shape?: string
+  }
 }
 
 export interface FormDesignFragment {
@@ -62,6 +85,24 @@ export const FORM_FRAGMENT = gql`
       description
       required
       value
+      
+      options {
+        key
+        title
+        value
+      }
+      
+      logicJump {
+        fieldA
+        valueB
+        expressionString
+        jumpTo
+        enabled
+      }
+      rating {
+        steps
+        shape
+      }
     }
     
     design {