From a1f12555a1f55c0ea7f665f8e1b7cb112f4fe74f Mon Sep 17 00:00:00 2001
From: Artur Yorsh <10753921+artyorsh@users.noreply.github.com>
Date: Mon, 8 Apr 2019 14:28:12 +0300
Subject: [PATCH] refactor(ui): apply checkbox mappings

---
 .../ui/checkbox/checkbox.component.tsx        |  15 +-
 .../ui/checkbox/checkbox.spec.tsx.snap        |  56 +++--
 src/framework/ui/common/mapping.json          | 200 +++++++++++-------
 .../checkmark/checkmark.component.tsx         |  37 ++--
 .../src/ui/screen/checkbox.component.tsx      |  35 +++
 5 files changed, 229 insertions(+), 114 deletions(-)

diff --git a/src/framework/ui/checkbox/checkbox.component.tsx b/src/framework/ui/checkbox/checkbox.component.tsx
index 673eed985..8cd0749de 100644
--- a/src/framework/ui/checkbox/checkbox.component.tsx
+++ b/src/framework/ui/checkbox/checkbox.component.tsx
@@ -157,7 +157,7 @@ export class CheckBox extends React.Component<Props> {
   };
 
   public render(): React.ReactElement<TouchableOpacityProps> {
-    const { style, themedStyle, text, ...derivedProps } = this.props;
+    const { style, themedStyle, disabled, text, ...derivedProps } = this.props;
 
     const {
       container,
@@ -170,13 +170,20 @@ export class CheckBox extends React.Component<Props> {
     const [iconElement, textElement] = this.renderComponentChildren(componentStyle);
 
     return (
-      <View style={container}>
+      <TouchableOpacity
+        style={container}
+        activeOpacity={1.0}
+        disabled={disabled}
+        onPress={this.onPress}
+        onPressIn={this.onPressIn}
+        onPressOut={this.onPressOut}>
         <View style={highlightContainer}>
           <View style={highlight}/>
           <TouchableOpacity
+            activeOpacity={1.0}
             {...derivedProps}
+            disabled={disabled}
             style={selectContainer}
-            activeOpacity={1.0}
             onPress={this.onPress}
             onPressIn={this.onPressIn}
             onPressOut={this.onPressOut}>
@@ -184,7 +191,7 @@ export class CheckBox extends React.Component<Props> {
           </TouchableOpacity>
         </View>
         {textElement}
-      </View>
+      </TouchableOpacity>
     );
   }
 }
diff --git a/src/framework/ui/checkbox/checkbox.spec.tsx.snap b/src/framework/ui/checkbox/checkbox.spec.tsx.snap
index d980cc4ed..814d9a204 100644
--- a/src/framework/ui/checkbox/checkbox.spec.tsx.snap
+++ b/src/framework/ui/checkbox/checkbox.spec.tsx.snap
@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`@checkbox matches snapshots * active 1`] = `
-<View
+<TouchableOpacity
+  activeOpacity={1}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -20,7 +24,7 @@ exports[`@checkbox matches snapshots * active 1`] = `
     <View
       style={
         Object {
-          "backgroundColor": "#DDE1EB",
+          "backgroundColor": "#EDF0F5",
           "borderRadius": 6,
           "height": 40,
           "position": "absolute",
@@ -35,12 +39,13 @@ exports[`@checkbox matches snapshots * active 1`] = `
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
+      size="medium"
       status="primary"
       style={
         Object {
           "alignItems": "center",
-          "backgroundColor": "#284DE0",
-          "borderColor": "#284DE0",
+          "backgroundColor": "#D9E4FF",
+          "borderColor": "#2541CC",
           "borderRadius": 3,
           "borderWidth": 1,
           "height": 24,
@@ -168,11 +173,15 @@ exports[`@checkbox matches snapshots * active 1`] = `
       />
     </TouchableOpacity>
   </View>
-</View>
+</TouchableOpacity>
 `;
 
 exports[`@checkbox matches snapshots * active: default 1`] = `
-<View
+<TouchableOpacity
+  activeOpacity={1}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -206,6 +215,7 @@ exports[`@checkbox matches snapshots * active: default 1`] = `
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
+      size="medium"
       status="primary"
       style={
         Object {
@@ -339,11 +349,16 @@ exports[`@checkbox matches snapshots * active: default 1`] = `
       />
     </TouchableOpacity>
   </View>
-</View>
+</TouchableOpacity>
 `;
 
 exports[`@checkbox matches snapshots * checked.disabled 1`] = `
-<View
+<TouchableOpacity
+  activeOpacity={1}
+  disabled={true}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -379,6 +394,7 @@ exports[`@checkbox matches snapshots * checked.disabled 1`] = `
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
+      size="medium"
       status="primary"
       style={
         Object {
@@ -512,11 +528,15 @@ exports[`@checkbox matches snapshots * checked.disabled 1`] = `
       />
     </TouchableOpacity>
   </View>
-</View>
+</TouchableOpacity>
 `;
 
 exports[`@checkbox matches snapshots * default 1`] = `
-<View
+<TouchableOpacity
+  activeOpacity={1}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -550,6 +570,7 @@ exports[`@checkbox matches snapshots * default 1`] = `
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
+      size="medium"
       status="primary"
       style={
         Object {
@@ -683,11 +704,15 @@ exports[`@checkbox matches snapshots * default 1`] = `
       />
     </TouchableOpacity>
   </View>
-</View>
+</TouchableOpacity>
 `;
 
 exports[`@checkbox matches snapshots * with text 1`] = `
-<View
+<TouchableOpacity
+  activeOpacity={1}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   style={
     Object {
       "alignItems": "center",
@@ -722,6 +747,7 @@ exports[`@checkbox matches snapshots * with text 1`] = `
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
+      size="medium"
       status="primary"
       style={
         Object {
@@ -859,14 +885,14 @@ exports[`@checkbox matches snapshots * with text 1`] = `
     style={
       Object {
         "color": "#0D1C2E",
-        "fontSize": 14,
+        "fontSize": 13,
         "fontWeight": "600",
-        "lineHeight": 16,
+        "lineHeight": 24,
         "marginHorizontal": 12,
       }
     }
   >
     Text
   </ForwardRef(WrappingElement)>
-</View>
+</TouchableOpacity>
 `;
diff --git a/src/framework/ui/common/mapping.json b/src/framework/ui/common/mapping.json
index 9e5874b2c..e440dcda7 100644
--- a/src/framework/ui/common/mapping.json
+++ b/src/framework/ui/common/mapping.json
@@ -761,6 +761,23 @@
             "white": {
               "default": false
             }
+          },
+          "size": {
+            "tiny": {
+              "default": false
+            },
+            "small": {
+              "default": false
+            },
+            "medium": {
+              "default": true
+            },
+            "large": {
+              "default": false
+            },
+            "giant": {
+              "default": false
+            }
           }
         },
         "states": {
@@ -789,32 +806,21 @@
       "appearances": {
         "default": {
           "mapping": {
-            "width": 24,
-            "height": 24,
             "borderWidth": 1,
             "borderRadius": 3,
-            "textMarginHorizontal": 12,
-            "textFontWeight": "font-primary-regular-text-weight",
-            "textLineHeight": "font-primary-regular-text-line-height",
+            "textFontWeight": "600",
             "textColor": "font-primary-color",
-            "iconWidth": 12,
-            "iconHeight": 12,
             "iconTintColor": "opacity-transparent",
-            "textFontSize": "font-primary-regular-text-size",
-            "highlightWidth": 40,
-            "highlightHeight": 40,
             "highlightBorderRadius": 6,
-            "highlightBackgroundColor": "transparent",
+            "highlightBackgroundColor": "opacity-transparent",
             "state": {
               "active": {
-                "highlightBackgroundColor": "gray-light"
+                "highlightBackgroundColor": "color-basic-200"
               },
               "checked": {
                 "iconTintColor": "color-white"
               },
               "indeterminate": {
-                "iconHeight": 4,
-                "iconBorderRadius": 6,
                 "iconTintColor": "color-white"
               },
               "disabled": {
@@ -835,19 +841,10 @@
                 "backgroundColor": "color-primary-200",
                 "state": {
                   "active": {
-                    "borderColor": "color-primary-600",
-                    "backgroundColor": "color-primary-600"
+                    "borderColor": "color-primary-700"
                   },
                   "checked": {
-                    "borderColor": "color-primary-500",
-                    "backgroundColor": "color-primary-500"
-                  },
-                  "indeterminate": {
-                    "borderColor": "color-primary-500",
                     "backgroundColor": "color-primary-500"
-                  },
-                  "checked.active": {
-                    "borderColor": "color-primary-600"
                   }
                 }
               },
@@ -856,19 +853,22 @@
                 "backgroundColor": "color-success-200",
                 "state": {
                   "active": {
-                    "borderColor": "color-success-600",
-                    "backgroundColor": "color-success-600"
+                    "borderColor": "color-success-700"
                   },
                   "checked": {
-                    "borderColor": "color-success-500",
-                    "backgroundColor": "color-success-500"
-                  },
-                  "indeterminate": {
-                    "borderColor": "color-success-500",
                     "backgroundColor": "color-success-500"
+                  }
+                }
+              },
+              "info": {
+                "borderColor": "color-info-500",
+                "backgroundColor": "color-info-200",
+                "state": {
+                  "active": {
+                    "borderColor": "color-info-700"
                   },
-                  "checked.active": {
-                    "borderColor": "color-success-600"
+                  "checked": {
+                    "backgroundColor": "color-info-500"
                   }
                 }
               },
@@ -877,19 +877,10 @@
                 "backgroundColor": "color-warning-200",
                 "state": {
                   "active": {
-                    "borderColor": "color-warning-600",
-                    "backgroundColor": "color-warning-600"
+                    "borderColor": "color-warning-700"
                   },
                   "checked": {
-                    "borderColor": "color-warning-500",
-                    "backgroundColor": "color-warning-500"
-                  },
-                  "indeterminate": {
-                    "borderColor": "color-warning-500",
                     "backgroundColor": "color-warning-500"
-                  },
-                  "checked.active": {
-                    "borderColor": "color-warning-600"
                   }
                 }
               },
@@ -898,47 +889,16 @@
                 "backgroundColor": "color-danger-200",
                 "state": {
                   "active": {
-                    "borderColor": "color-danger-600",
-                    "backgroundColor": "color-danger-600"
+                    "borderColor": "color-danger-700"
                   },
                   "checked": {
-                    "borderColor": "color-danger-500",
-                    "backgroundColor": "color-danger-500"
-                  },
-                  "indeterminate": {
-                    "borderColor": "color-danger-500",
                     "backgroundColor": "color-danger-500"
-                  },
-                  "checked.active": {
-                    "borderColor": "color-danger-600"
-                  }
-                }
-              },
-              "info": {
-                "borderColor": "color-info-500",
-                "backgroundColor": "color-info-200",
-                "state": {
-                  "active": {
-                    "borderColor": "color-info-600",
-                    "backgroundColor": "color-info-600"
-                  },
-                  "checked": {
-                    "borderColor": "color-info-500",
-                    "backgroundColor": "color-info-500"
-                  },
-                  "indeterminate": {
-                    "borderColor": "color-info-500",
-                    "backgroundColor": "color-info-500"
-                  },
-                  "checked.active": {
-                    "borderColor": "color-info-600"
                   }
                 }
               },
               "white": {
                 "borderColor": "color-white",
                 "backgroundColor": "color-white",
-                "iconTintColor": "opacity-transparent",
                 "state": {
                   "active": {
                     "borderColor": "color-white",
@@ -951,9 +911,93 @@
                   },
                   "indeterminate": {
                     "iconTintColor": "color-primary-500"
-                  },
-                  "checked.active": {
-                    "borderColor": "color-white"
+                  }
+                }
+              }
+            },
+            "size": {
+              "tiny": {
+                "width": 16,
+                "height": 16,
+                "iconWidth": 8,
+                "iconHeight": 8,
+                "highlightWidth": 24,
+                "highlightHeight": 24,
+                "textFontSize": 11,
+                "textLineHeight": 16,
+                "textMarginHorizontal": 8,
+                "state": {
+                  "indeterminate": {
+                    "iconHeight": 2,
+                    "iconBorderRadius": 1
+                  }
+                }
+              },
+              "small": {
+                "width": 20,
+                "height": 20,
+                "iconWidth": 10,
+                "iconHeight": 10,
+                "highlightWidth": 32,
+                "highlightHeight": 32,
+                "textFontSize": 13,
+                "textLineHeight": 20,
+                "textMarginHorizontal": 10,
+                "state": {
+                  "indeterminate": {
+                    "iconHeight": 2,
+                    "iconBorderRadius": 1
+                  }
+                }
+              },
+              "medium": {
+                "width": 24,
+                "height": 24,
+                "iconWidth": 12,
+                "iconHeight": 12,
+                "highlightWidth": 40,
+                "highlightHeight": 40,
+                "textFontSize": 13,
+                "textLineHeight": 24,
+                "textMarginHorizontal": 12,
+                "state": {
+                  "indeterminate": {
+                    "iconHeight": 3,
+                    "iconBorderRadius": 1.5
+                  }
+                }
+              },
+              "large": {
+                "width": 32,
+                "height": 32,
+                "iconWidth": 16,
+                "iconHeight": 16,
+                "highlightWidth": 48,
+                "highlightHeight": 48,
+                "textFontSize": 15,
+                "textLineHeight": 32,
+                "textMarginHorizontal": 12,
+                "state": {
+                  "indeterminate": {
+                    "iconHeight": 4,
+                    "iconBorderRadius": 2
+                  }
+                }
+              },
+              "giant": {
+                "width": 40,
+                "height": 40,
+                "iconWidth": 20,
+                "iconHeight": 20,
+                "highlightWidth": 56,
+                "highlightHeight": 56,
+                "textFontSize": 17,
+                "textLineHeight": 40,
+                "textMarginHorizontal": 12,
+                "state": {
+                  "indeterminate": {
+                    "iconHeight": 4,
+                    "iconBorderRadius": 2
                   }
                 }
               }
diff --git a/src/framework/ui/drawable/checkmark/checkmark.component.tsx b/src/framework/ui/drawable/checkmark/checkmark.component.tsx
index ee8e6f735..7233dd979 100644
--- a/src/framework/ui/drawable/checkmark/checkmark.component.tsx
+++ b/src/framework/ui/drawable/checkmark/checkmark.component.tsx
@@ -20,27 +20,31 @@ export class CheckMark extends React.Component<Props> {
   };
 
   private getComponentStyle = (source: StyleType): StyleType => {
+    const { width, height, backgroundColor } = source;
+
     return {
       container: {
-        width: source.width,
-        height: source.height,
+        width: width,
+        height: height,
       },
       // the dependence of the variables was determined experimentally. Changes may be needed later.
       shape: {
-        width: source.width * 0.2,
-        height: source.height * 0.833,
-        borderTopLeftRadius: source.height * 0.333,
-        borderTopRightRadius: source.height * 0.333,
+        borderWidth: width * 0.125,
+        borderTopLeftRadius: height * 0.5,
+        borderTopRightRadius: height * 0.5,
+        borderBottomLeftRadius: height * 0.5,
+        borderBottomRightRadius: height * 0.5,
+        borderColor: backgroundColor,
+        backgroundColor: backgroundColor,
       },
       left: {
-        height: source.height * 0.667,
-        left: source.width * 0.167,
-        top: source.width * 0.167,
-        backgroundColor: source.backgroundColor,
+        left: width * 0.125,
+        top: width * 0.25,
+        height: height * 0.65,
       },
       right: {
-        right: source.width * 0.167,
-        backgroundColor: source.backgroundColor,
+        right: width * 0.175,
+        height: height * 0.875,
       },
     };
   };
@@ -53,8 +57,8 @@ export class CheckMark extends React.Component<Props> {
 
     return (
       <Component style={[container, styles.container]}>
-        <Component style={[left, shape, styles.left, styles.shape]}/>
-        <Component style={[right, shape, styles.right, styles.shape]}/>
+        <Component style={[shape, left, styles.shape, styles.left]}/>
+        <Component style={[shape, right, styles.shape, styles.right]}/>
       </Component>
     );
   }
@@ -66,12 +70,11 @@ const styles = StyleSheet.create({
   },
   shape: {
     position: 'absolute',
-    top: 0,
   },
   left: {
-    transform: [{ rotate: '-35deg' }],
+    transform: [{ rotate: '-40deg' }, { translateY: 1 }],
   },
   right: {
-    transform: [{ rotate: '45deg' }],
+    transform: [{ rotate: '40deg' }, { translateY: 1 }],
   },
 });
diff --git a/src/playground/src/ui/screen/checkbox.component.tsx b/src/playground/src/ui/screen/checkbox.component.tsx
index 37eb822b0..95b44bdd1 100644
--- a/src/playground/src/ui/screen/checkbox.component.tsx
+++ b/src/playground/src/ui/screen/checkbox.component.tsx
@@ -127,6 +127,41 @@ class CheckBoxScreen extends React.Component<Props, State> {
             />
           </View>
         </View>
+        <View style={this.props.themedStyle.containerSection}>
+          <Text style={this.props.themedStyle.textDescription}>Size</Text>
+          <View style={this.props.themedStyle.containerPreviewColumn}>
+            <CheckBox
+              style={this.props.themedStyle.component}
+              size='giant'
+              checked={true}
+              text='Place your text'
+            />
+            <CheckBox
+              style={this.props.themedStyle.component}
+              size='large'
+              checked={true}
+              text='Place your text'
+            />
+            <CheckBox
+              style={this.props.themedStyle.component}
+              size='medium'
+              checked={true}
+              text='Place your text'
+            />
+            <CheckBox
+              style={this.props.themedStyle.component}
+              size='small'
+              checked={true}
+              text='Place your text'
+            />
+            <CheckBox
+              style={this.props.themedStyle.component}
+              size='tiny'
+              checked={true}
+              text='Place your text'
+            />
+          </View>
+        </View>
         <View style={this.props.themedStyle.containerSection}>
           <Text style={this.props.themedStyle.textDescription}>Text</Text>
           <View style={this.props.themedStyle.containerPreviewColumn}>