refactor(ui): avatar - apply mappings

akveo · Apr 8, 2019 · 7203d2b · 7203d2b
1 parent 228114a
commit 7203d2b
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 25 deletions.
diff --git a/src/framework/ui/avatar/avatar.spec.tsx.snap b/src/framework/ui/avatar/avatar.spec.tsx.snap
@@ -14,10 +14,9 @@ exports[`@avatar: matches snapshot * appearance * default 1`] = `
   style={
     Array [
       Object {
-        "borderRadius": 24,
-        "height": 48,
-        "margin": 16,
-        "width": 48,
+        "borderRadius": 20,
+        "height": 40,
+        "width": 40,
       },
       Object {},
     ]

diff --git a/src/framework/ui/common/mapping.json b/src/framework/ui/common/mapping.json
@@ -8,9 +8,6 @@
           "roundCoefficient": {
             "type": "number"
           },
-          "margin": {
-            "type": "number"
-          },
           "width": {
             "type": "number"
           },
@@ -36,6 +33,9 @@
             }
           },
           "size": {
+            "tiny": {
+              "default": false
+            },
             "small": {
               "default": false
             },
@@ -44,6 +44,9 @@
             },
             "large": {
               "default": false
+            },
+            "giant": {
+              "default": false
             }
           }
         },
@@ -52,7 +55,6 @@
       "appearances": {
         "default": {
           "mapping": {
-            "margin": 16
           },
           "variantGroups": {
             "shape": {
@@ -67,17 +69,25 @@
               }
             },
             "size": {
+              "tiny": {
+                "width": 24,
+                "height": 24
+              },
               "small": {
+                "width": 32,
+                "height": 32
+              },
+              "medium": {
                 "width": 40,
                 "height": 40
               },
-              "medium": {
+              "large": {
                 "width": 48,
                 "height": 48
               },
-              "large": {
-                "width": 64,
-                "height": 64
+              "giant": {
+                "width": 56,
+                "height": 56
               }
             }
           }

diff --git a/src/playground/src/ui/screen/avatar.component.tsx b/src/playground/src/ui/screen/avatar.component.tsx
@@ -21,8 +21,6 @@ interface State {
   isRadio4Checked: boolean;
 }
 
-const SIZE: string = 'large';
-const SHAPE: string = 'rounded';
 const SOURCE: ImageSourcePropType = { uri: 'https://randomuser.me/api/portraits/men/3.jpg' };
 
 class AvatarScreen extends React.Component<Props, State> {
@@ -38,38 +36,74 @@ class AvatarScreen extends React.Component<Props, State> {
           <Text style={this.props.themedStyle.textDescription}>Default</Text>
           <View style={this.props.themedStyle.containerPreviewRow}>
             <Avatar
-              size={SIZE}
+              style={this.props.themedStyle.component}
               source={SOURCE}
             />
             <Avatar
-              size={SIZE}
+              style={this.props.themedStyle.component}
               source={SOURCE}
             />
             <Avatar
-              size={SIZE}
+              style={this.props.themedStyle.component}
               source={SOURCE}
             />
           </View>
         </View>
         <View style={this.props.themedStyle.containerSection}>
-          <Text style={this.props.themedStyle.textDescription}>Custom</Text>
+          <Text style={this.props.themedStyle.textDescription}>Size</Text>
           <View style={this.props.themedStyle.containerPreviewRow}>
             <Avatar
               style={this.props.themedStyle.component}
-              size={SIZE}
-              shape={SHAPE}
+              size='giant'
+              source={SOURCE}
+            />
+            <Avatar
+              style={this.props.themedStyle.component}
+              size='large'
               source={SOURCE}
             />
             <Avatar
               style={this.props.themedStyle.component}
-              size={SIZE}
-              shape={SHAPE}
+              size='medium'
               source={SOURCE}
             />
             <Avatar
               style={this.props.themedStyle.component}
-              size={SIZE}
-              shape={SHAPE}
+              size='small'
+              source={SOURCE}
+            />
+            <Avatar
+              style={this.props.themedStyle.component}
+              size='tiny'
+              source={SOURCE}
+            />
+          </View>
+        </View>
+        <View style={this.props.themedStyle.containerSection}>
+          <Text style={this.props.themedStyle.textDescription}>Shape</Text>
+          <View style={this.props.themedStyle.containerPreviewRow}>
+            <Avatar
+              style={this.props.themedStyle.component}
+              shape='square'
+              source={SOURCE}
+            />
+            <Avatar
+              style={this.props.themedStyle.component}
+              shape='rounded'
+              source={SOURCE}
+            />
+            <Avatar
+              style={this.props.themedStyle.component}
+              shape='rounded'
+              source={SOURCE}
+            />
+          </View>
+        </View>
+        <View style={this.props.themedStyle.containerSection}>
+          <Text style={this.props.themedStyle.textDescription}>Custom</Text>
+          <View style={this.props.themedStyle.containerPreviewRow}>
+            <Avatar
+              style={this.props.themedStyle.customComponent}
               source={SOURCE}
             />
           </View>
@@ -97,7 +131,9 @@ export default withStyles(AvatarScreen, (theme: ThemeType) => ({
     fontSize: 18,
   },
   component: {
-    backgroundColor: 'gray',
+    marginHorizontal: 4,
+  },
+  customComponent: {
     width: 80,
     height: 80,
   },