Repository: codypearce/material-bread
Pull request #406 (2020-06-16 15:31:35)

MAT-25 Add full card story
<!--- 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-25

## 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.
- [x] All new and existing tests passed locally.


Patch:
diff --git a/src/Components/Button/TextButton/TextButton.stories.js b/src/Components/Button/TextButton/TextButton.stories.js
index 9326ea8..8886287 100644
--- a/src/Components/Button/TextButton/TextButton.stories.js
+++ b/src/Components/Button/TextButton/TextButton.stories.js
@@ -305,7 +305,7 @@ export default storiesOf('Components|Buttons/Text Button', module)
           loading
           icon={<Icon name="archive" />}
         />
-
+      </View>
     </Container>
   ))
   .add('disabled', () => (
diff --git a/src/Components/Card/Card.js b/src/Components/Card/Card.js
index 53139a3..a4c21a6 100644
--- a/src/Components/Card/Card.js
+++ b/src/Components/Card/Card.js
@@ -51,6 +51,7 @@ class Card extends Component {
           {
             borderWidth: outlined ? StyleSheet.hairlineWidth : 0,
             borderBottomColor: 'rgba(0,0,0,.4)',
+            maxWidth: 500,
           },
         ]}
         testID={testID}>
diff --git a/src/Components/Card/Card.stories.js b/src/Components/Card/Card.stories.js
index f8648c0..b37a3c8 100644
--- a/src/Components/Card/Card.stories.js
+++ b/src/Components/Card/Card.stories.js
@@ -93,6 +93,87 @@ export default storiesOf('Components|Card', module)
     <Container scroll>
       <Header title={'Full Card'} />
 
+      <Card style={{ maxWidth: 400, width: '100%', marginBottom: 50 }}>
+        <CardHeader
+          thumbnail={
+            <Avatar
+              type="image"
+              image={
+                <Image
+                  source={{
+                    uri:
+                      'https://images.pexels.com/photos/2906664/pexels-photo-2906664.png?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
+                  }}
+                />
+              }
+              size={48}
+            />
+          }
+          title={'Title'}
+          subtitle={'Metadata'}
+          action={
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}>
+              <IconButton
+                name="favorite-border"
+                size={24}
+                color={'rgba(0,0,0,.47)'}
+              />
+              <IconButton
+                style={{ marginLeft: 12 }}
+                name="share"
+                size={24}
+                color={'rgba(0,0,0,.47)'}
+              />
+              <IconButton
+                style={{ marginLeft: 12 }}
+                name="more-vert"
+                size={24}
+                color={'rgba(0,0,0,.47)'}
+              />
+            </View>
+          }
+        />
+        <CardMedia
+          image={
+            <Image
+              style={{ flex: 1, width: '100%' }}
+              source={{
+                uri:
+                  'https://images.pexels.com/photos/994605/pexels-photo-994605.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
+              }}
+              resizeMode="cover"
+            />
+          }
+        />
+        <CardContent>
+          <Text
+            style={{
+              fontSize: 18,
+              fontWeight: '500',
+              marginBottom: 8,
+            }}>
+            Title
+          </Text>
+          <Text style={{ fontSize: 14, marginBottom: 16 }}>Metadata</Text>
+          <Text style={{ fontSize: 16 }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque
+            felis, eleifend in dolor eu, pellentesque finibus erat. Vestibulum
+            eleifend sapien et felis pulvinar cursus.
+          </Text>
+        </CardContent>
+        <CardActions
+          rightActionItems={[
+            { name: 'favorite-border' },
+            { name: 'share' },
+            { name: 'more-vert' },
+          ]}
+        />
+      </Card>
+
       <Card style={{ maxWidth: 400, width: '100%', marginBottom: 50 }}>
         <CardHeader
           thumbnail={
diff --git a/src/Components/Card/CardActions/CardActions.styles.js b/src/Components/Card/CardActions/CardActions.styles.js
index 1bf7c68..a474064 100644
--- a/src/Components/Card/CardActions/CardActions.styles.js
+++ b/src/Components/Card/CardActions/CardActions.styles.js
@@ -2,6 +2,7 @@ import { StyleSheet } from 'react-native';
 const styles = StyleSheet.create({
   container: {
     padding: 24,
+    paddingTop: 16,
     flexDirection: 'row',
     justifyContent: 'space-between',
     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 653b113..77753f0 100644
--- a/src/Components/Card/CardActions/__snapshots__/CardActions.test.js.snap
+++ b/src/Components/Card/CardActions/__snapshots__/CardActions.test.js.snap
@@ -10,6 +10,7 @@ exports[`CardActions Renders 1`] = `
         "flexWrap": "wrap",
         "justifyContent": "space-between",
         "padding": 24,
+        "paddingTop": 16,
       },
       undefined,
     ]