Repository: codypearce/material-bread
Pull request #400 (2020-06-11 15:33:13)

MAT-26 Match card component styles
<!--- The title of this PR should be a Jira issue ID and summary.  Example: `TCK-100 Add something to something` -->

## Issue Link
<!--- Please link to the Jira issue here or delete this section -->
https://fullstacklabs.atlassian.net/browse/MAT-26

## Checklist:
<!--- Go over all the following points, and put an `x` in all the boxes that apply -->
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [ ] All new and existing tests passed locally.


Patch:
diff --git a/src/Components/Card/Card.stories.js b/src/Components/Card/Card.stories.js
index 2740bb0..f8648c0 100644
--- a/src/Components/Card/Card.stories.js
+++ b/src/Components/Card/Card.stories.js
@@ -22,7 +22,7 @@ export default storiesOf('Components|Card', module)
   .addParameters({ jest: ['Card'] })
   .add('simple', () => (
     <Container scroll>
-      <Header title={'Card'} />
+      <Header title={'Simple Card'} />
 
       <Card style={{ flex: 1, marginBottom: 20, padding: 16, maxWidth: 400 }}>
         <Text style={{ fontSize: 14, textAlign: 'center', marginBottom: 8 }}>
@@ -91,7 +91,7 @@ export default storiesOf('Components|Card', module)
   ))
   .add('full card', () => (
     <Container scroll>
-      <Header title={'Card'} />
+      <Header title={'Full Card'} />
 
       <Card style={{ maxWidth: 400, width: '100%', marginBottom: 50 }}>
         <CardHeader
@@ -123,7 +123,18 @@ export default storiesOf('Components|Card', module)
           }
         />
         <CardContent>
-          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>
+          <Text
+            style={{
+              fontSize: 18,
+              fontWeight: '500',
+              marginBottom: 8,
+            }}>
+            Prince of Dragonstone
+          </Text>
+          <Text style={{ fontSize: 14, marginBottom: 16 }}>
+            You&apos;ve got the North in you
+          </Text>
+          <Text style={{ fontSize: 16 }}>
             Ran out of bleach for beard, but Daenerys says it looks cool.
           </Text>
         </CardContent>
@@ -281,7 +292,7 @@ export default storiesOf('Components|Card', module)
               style={{ flex: 1, width: '100%' }}
               source={{
                 uri:
-                  'https://images.pexels.com/photos/955463/pexels-photo-955463.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=800',
+                  'https://images.pexels.com/photos/1124002/pexels-photo-1124002.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
               }}
               resizeMode="cover"
             />
@@ -491,7 +502,9 @@ export default storiesOf('Components|Card', module)
           }
           title={'Mario'}
           subtitle={'Hero. Plumber. Brother.'}
-          action={<IconButton name="more-vert" size={24} />}
+          action={
+            <IconButton name="more-vert" size={24} color={'rgba(0,0,0,.54)'} />
+          }
         />
         <CardMedia
           image={
@@ -503,9 +516,7 @@ export default storiesOf('Components|Card', module)
           }
         />
         <CardContent>
-          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>
-            Movember is over.
-          </Text>
+          <Text>Movember is over.</Text>
         </CardContent>
         <CardActions
           rightActionItems={[
@@ -527,7 +538,11 @@ export default storiesOf('Components|Card', module)
             paddingBottom: 0,
           }}
           action={
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}>
               <IconButton name="star" size={24} color={'rgba(0,0,0,.47)'} />
               <IconButton name="delete" size={24} color={'rgba(0,0,0,.47)'} />
               <IconButton
@@ -554,7 +569,7 @@ export default storiesOf('Components|Card', module)
 
         <CardContent style={{ paddingTop: 4, paddingBottom: 16 }}>
           <Text
-            style={{ color: 'rgba(0,0,0,1)', fontSize: 18, marginBottom: 4 }}>
+            style={{ color: 'rgba(0,0,0,1)', fontSize: 16, marginBottom: 4 }}>
             Where is the Princess?
           </Text>
           <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>
diff --git a/src/Components/Card/CardActions/CardActions.js b/src/Components/Card/CardActions/CardActions.js
index 696ef10..f919b31 100644
--- a/src/Components/Card/CardActions/CardActions.js
+++ b/src/Components/Card/CardActions/CardActions.js
@@ -36,8 +36,8 @@ class CardActions extends Component {
             onPress={item.onPress}
             name={item.name}
             size={item.size ? item.size : 24}
-            color={item.color ? item.color : 'rgba(0,0,0,.57)'}
-            style={{ marginLeft: 8 }}
+            color={item.color ? item.color : 'rgba(0,0,0,.54)'}
+            style={{ marginLeft: 16 }}
           />
         );
       } else {
diff --git a/src/Components/Card/CardActions/CardActions.styles.js b/src/Components/Card/CardActions/CardActions.styles.js
index e23515e..1bf7c68 100644
--- a/src/Components/Card/CardActions/CardActions.styles.js
+++ b/src/Components/Card/CardActions/CardActions.styles.js
@@ -1,8 +1,7 @@
 import { StyleSheet } from 'react-native';
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 8,
-    paddingVertical: 8,
+    padding: 24,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
diff --git a/src/Components/Card/CardContent/CardContent.js b/src/Components/Card/CardContent/CardContent.js
index 9ffe7f6..57c3cf7 100644
--- a/src/Components/Card/CardContent/CardContent.js
+++ b/src/Components/Card/CardContent/CardContent.js
@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import withTheme from '../../../Theme/withTheme';
 import Ripple from '../../Ripple/Ripple';
+import styles from './CardContent.styles';
 
 class CardContent extends Component {
   static propTypes = {
@@ -17,7 +18,7 @@ class CardContent extends Component {
     if (onPress) {
       return (
         <Ripple
-          style={[{ padding: 16 }, style]}
+          style={[{ padding: 40 }, style]}
           onPress={onPress}
           {...rippleProps}>
           {children}
@@ -25,7 +26,7 @@ class CardContent extends Component {
       );
     }
 
-    return <View style={[{ padding: 16 }, style]}>{children}</View>;
+    return <View style={[styles.contentContainer, style]}>{children}</View>;
   }
 }
 
diff --git a/src/Components/Card/CardContent/CardContent.styles.js b/src/Components/Card/CardContent/CardContent.styles.js
new file mode 100644
index 0000000..3c2bd04
--- /dev/null
+++ b/src/Components/Card/CardContent/CardContent.styles.js
@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+const styles = StyleSheet.create({
+  contentContainer: {
+    padding: 24,
+    fontSize: 16,
+    color: '#000000',
+    lineHeight: 24,
+    letterSpacing: 0.44,
+  },
+});
+
+export default styles;
diff --git a/src/Components/Card/CardHeader/CardHeader.js b/src/Components/Card/CardHeader/CardHeader.js
index b75db67..4459b61 100644
--- a/src/Components/Card/CardHeader/CardHeader.js
+++ b/src/Components/Card/CardHeader/CardHeader.js
@@ -19,7 +19,7 @@ class CardHeader extends Component {
   _renderAction() {
     const { action } = this.props;
     if (!action) return null;
-    return <View style={styles.right}>{action}</View>;
+    return <View style={styles.actions}>{action}</View>;
   }
 
   _renderText() {
diff --git a/src/Components/Card/CardHeader/CardHeader.styles.js b/src/Components/Card/CardHeader/CardHeader.styles.js
index 0f74eb9..8f19b24 100644
--- a/src/Components/Card/CardHeader/CardHeader.styles.js
+++ b/src/Components/Card/CardHeader/CardHeader.styles.js
@@ -1,12 +1,19 @@
 import { StyleSheet } from 'react-native';
 const styles = StyleSheet.create({
   container: {
-    padding: 16,
+    padding: 24,
     borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: 'rgba(0,0,0,.2)',
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+
+  actions: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
   left: {
     flexDirection: 'row',
     flexShrink: 1,
@@ -19,16 +26,19 @@ const styles = StyleSheet.create({
   },
 
   title: {
-    fontSize: 14,
+    fontSize: 20,
     fontWeight: '500',
-    lineHeight: 20,
-    color: 'rgba(0,0,0,.87)',
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    color: '#000000',
     flexWrap: 'wrap',
+    marginBottom: 7,
   },
   subtitle: {
     fontSize: 14,
-    lineHeight: 20,
-    color: 'rgba(0,0,0,.6)',
+    lineHeight: 16,
+    letterSpacing: 0.25,
+    color: '#212121',
     flexWrap: 'wrap',
   },
 });
diff --git a/src/Components/Card/CardMedia/CardMedia.js b/src/Components/Card/CardMedia/CardMedia.js
index ad28700..1c4be0b 100644
--- a/src/Components/Card/CardMedia/CardMedia.js
+++ b/src/Components/Card/CardMedia/CardMedia.js
@@ -17,7 +17,7 @@ class CardMedia extends Component {
   };
 
   static defaultProps = {
-    height: 194,
+    height: 155,
   };
 
   _renderText() {
diff --git a/src/Components/Card/CardMedia/CardMedia.styles.js b/src/Components/Card/CardMedia/CardMedia.styles.js
index 7d82b20..a74ce5a 100644
--- a/src/Components/Card/CardMedia/CardMedia.styles.js
+++ b/src/Components/Card/CardMedia/CardMedia.styles.js
@@ -9,20 +9,23 @@ const styles = StyleSheet.create({
   },
   textContainer: {
     position: 'absolute',
-    left: 16,
-    bottom: 16,
+    left: 24,
+    bottom: 24,
   },
 
   title: {
-    fontSize: 16,
+    fontSize: 20,
     fontWeight: '500',
-    lineHeight: 20,
-    color: 'rgba(255,255,255,.87)',
+    lineHeight: 24,
+    color: '#FFFFFF',
+    letterSpacing: 0.15,
+    marginBottom: 7,
   },
   subtitle: {
     fontSize: 14,
-    lineHeight: 20,
-    color: 'rgba(255,255,255,.87)',
+    lineHeight: 16,
+    color: '#FFFFFF',
+    letterSpacing: 0.25,
   },
 });
 
diff --git a/src/Components/Fab/FabSpeedDial/FabSpeedDial.js b/src/Components/Fab/FabSpeedDial/FabSpeedDial.js
index d05bf34..c35b153 100644
--- a/src/Components/Fab/FabSpeedDial/FabSpeedDial.js
+++ b/src/Components/Fab/FabSpeedDial/FabSpeedDial.js
@@ -25,7 +25,6 @@ class FabSpeedDial extends Component {
 
   state = {
     open: false,
-    fabIcon: 'add',
     actionAnimationsScale: [
       new Animated.Value(0),
       new Animated.Value(0),
@@ -48,20 +47,6 @@ class FabSpeedDial extends Component {
     this.setState({ open: !this.state.open });
   }
 
-  toggleFabIcon() {
-    const { fab } = this.props;
-    const { open } = this.state;
-
-    let fabIcon;
-    if (typeof fab != 'string') {
-      fabIcon = open ? 'clear' : fab.props.icon;
-    } else {
-      fabIcon = open ? 'clear' : fab;
-    }
-
-    this.setState({ fabIcon });
-  }
-
   animateActions() {
     const { onPress } = this.props;
     const { open } = this.state;
@@ -76,7 +61,6 @@ class FabSpeedDial extends Component {
       this.closeAnimation();
     }
 
-    this.toggleFabIcon();
     if (onPress) onPress();
   }
 
@@ -165,12 +149,11 @@ class FabSpeedDial extends Component {
 
   _renderFab() {
     const { fab, style, fabProps } = this.props;
-    let { fabIcon, open } = this.state;
 
     if (typeof fab == 'string' || fab instanceof String || !fab) {
       return (
         <Fab
-          icon={fabIcon}
+          icon={fab}
           onPress={() => this.animateActions()}
           style={style}
           {...fabProps}
@@ -178,8 +161,6 @@ class FabSpeedDial extends Component {
       );
     } else {
       return React.cloneElement(fab, {
-        label: open ? '' : fab.props.label,
-        icon: fabIcon,
         color: fab.props.color ? fab.props.color : 'white',
         onPress: () => this.animateActions(),
       });
diff --git a/src/Components/Fab/FabSpeedDial/FabSpeedDial.stories.js b/src/Components/Fab/FabSpeedDial/FabSpeedDial.stories.js
index 9a3846e..65f8b30 100644
--- a/src/Components/Fab/FabSpeedDial/FabSpeedDial.stories.js
+++ b/src/Components/Fab/FabSpeedDial/FabSpeedDial.stories.js
@@ -27,8 +27,8 @@ export default storiesOf('Components|Fab/FabSpeedDial', module)
     <Container>
       <Header title={'Fab SpeedDial'} />
 
-      <View style={{ flex: 1, position: 'relative', paddingTop: 350 }}>
-        <FabSpeedDial actions={actions} />
+      <View style={{ flex: 1, position: 'relative', paddingTop: 400 }}>
+        <FabSpeedDial actions={actions} style={{ marginTop: 400 }} />
       </View>
     </Container>
   ))
@@ -36,10 +36,11 @@ export default storiesOf('Components|Fab/FabSpeedDial', module)
     <Container>
       <Header title={'Fab SpeedDial'} />
 
-      <View style={{ flex: 1, position: 'relative', paddingTop: 350 }}>
+      <View style={{ flex: 1, position: 'relative', paddingTop: 400 }}>
         <FabSpeedDial
           extended
           actions={actionsExtended}
+          style={{ marginTop: 400 }}
           fab={<Fab label="Open" icon="add" />}
         />
       </View>
diff --git a/src/Components/IconButton/IconButton.js b/src/Components/IconButton/IconButton.js
index 569d5d6..6ed447a 100644
--- a/src/Components/IconButton/IconButton.js
+++ b/src/Components/IconButton/IconButton.js
@@ -56,8 +56,8 @@ class IconButton extends Component {
         disabled={disabled}
         style={[
           {
-            height: size + 8,
-            width: size + 8,
+            height: size,
+            width: size,
             justifyContent: 'center',
             alignItems: 'center',
           },


Test patch:
diff --git a/src/Components/Card/CardActions/__snapshots__/CardActions.test.js.snap b/src/Components/Card/CardActions/__snapshots__/CardActions.test.js.snap
index 2f2e403..653b113 100644
--- a/src/Components/Card/CardActions/__snapshots__/CardActions.test.js.snap
+++ b/src/Components/Card/CardActions/__snapshots__/CardActions.test.js.snap
@@ -9,8 +9,7 @@ exports[`CardActions Renders 1`] = `
         "flexDirection": "row",
         "flexWrap": "wrap",
         "justifyContent": "space-between",
-        "paddingHorizontal": 8,
-        "paddingVertical": 8,
+        "padding": 24,
       },
       undefined,
     ]
diff --git a/src/Components/Card/CardContent/__snapshots__/CardContent.test.js.snap b/src/Components/Card/CardContent/__snapshots__/CardContent.test.js.snap
index 4c7ec56..2906f2c 100644
--- a/src/Components/Card/CardContent/__snapshots__/CardContent.test.js.snap
+++ b/src/Components/Card/CardContent/__snapshots__/CardContent.test.js.snap
@@ -5,7 +5,11 @@ exports[`CardContent Renders 1`] = `
   style={
     Array [
       Object {
-        "padding": 16,
+        "color": "#000000",
+        "fontSize": 16,
+        "letterSpacing": 0.44,
+        "lineHeight": 24,
+        "padding": 24,
       },
       undefined,
     ]
diff --git a/src/Components/Card/CardHeader/__snapshots__/CardHeader.test.js.snap b/src/Components/Card/CardHeader/__snapshots__/CardHeader.test.js.snap
index 2bf734b..1c21f49 100644
--- a/src/Components/Card/CardHeader/__snapshots__/CardHeader.test.js.snap
+++ b/src/Components/Card/CardHeader/__snapshots__/CardHeader.test.js.snap
@@ -9,7 +9,7 @@ exports[`CardHeader Renders 1`] = `
         "borderBottomWidth": 0.5,
         "flexDirection": "row",
         "justifyContent": "space-between",
-        "padding": 16,
+        "padding": 24,
       },
       undefined,
     ]
diff --git a/src/Components/Card/CardMedia/__snapshots__/CardMedia.test.js.snap b/src/Components/Card/CardMedia/__snapshots__/CardMedia.test.js.snap
index 35056cd..772b4cd 100644
--- a/src/Components/Card/CardMedia/__snapshots__/CardMedia.test.js.snap
+++ b/src/Components/Card/CardMedia/__snapshots__/CardMedia.test.js.snap
@@ -12,7 +12,7 @@ exports[`CardMedia Renders 1`] = `
         "width": "100%",
       },
       Object {
-        "height": 194,
+        "height": 155,
       },
       undefined,
     ]
@@ -21,8 +21,8 @@ exports[`CardMedia Renders 1`] = `
   <View
     style={
       Object {
-        "bottom": 16,
-        "left": 16,
+        "bottom": 24,
+        "left": 24,
         "position": "absolute",
       }
     }