card component

package.json

@@ -12,7 +12,7 @@
   "config": {},
   "size-limit": [
     {
-      "limit": "25 KB",
+      "limit": "30 KB",
       "webpack": false,
       "path": "dist/**/!(*.test).js"
     }
@@ -75,7 +75,7 @@
   },
   "dependencies": {
     "@bluebase/component-mapper": "^1.4.0",
-    "@bluebase/components": "^5.1.0",
+    "@bluebase/components": "^5.1.1",
     "@material-ui/core": "^3.9.3",
     "@material-ui/lab": "^3.0.0-alpha.30",
     "deepmerge": "^3.2.0",

src/components/Button/__stories__/Button.stories.tsx

@@ -1,12 +1,12 @@
-import { ButtonProps } from '@bluebase/components';
+import { Button, /*ButtonProps*/ } from '@bluebase/components';
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { getComponent } from '@bluebase/core';
+// import { getComponent } from '@bluebase/core';
 import storiesOf from '@bluebase/storybook-addon';
 import { withInfo } from '@storybook/addon-info';
 import { withKnobs } from '@storybook/addon-knobs';
 
-const Button = getComponent<ButtonProps>('Button');
+// const Button = getComponent<ButtonProps>('Button');
 
 const stories = storiesOf('Button', module);
 
@@ -15,109 +15,109 @@ stories.addDecorator(withKnobs);
 
 stories
 
-.add('Contained Buttons', () => (
-	<React.Fragment>
-		<Button variant="contained" onPress={action('button-press')}>
-			Default
+	.add('Contained Buttons', () => (
+		<React.Fragment>
+			<Button variant="contained" onPress={action('button-press')}>
+				Default
 		</Button>
-		<Button variant="contained" color="primary" onPress={action('button-press')}>
-			Primary
+			<Button variant="contained" color="primary" onPress={action('button-press')}>
+				Primary
 		</Button>
-		<Button variant="contained" color="secondary" onPress={action('button-press')}>
-			Secondary
+			<Button variant="contained" color="secondary" onPress={action('button-press')}>
+				Secondary
 		</Button>
-		<Button variant="contained" color="secondary" disabled onPress={action('button-press')}>
-			Disabled
+			<Button variant="contained" color="secondary" disabled onPress={action('button-press')}>
+				Disabled
 		</Button>
-		<Button variant="contained" onPress={action('button-press')}>
-			Link
+			<Button variant="contained" onPress={action('button-press')}>
+				Link
 		</Button>
-	</React.Fragment>
-))
+		</React.Fragment>
+	))
 
-.add('Text Buttons', () => (
-	<React.Fragment>
-		<Button>Default</Button>
-		<Button color="primary">
-			Primary
+	.add('Text Buttons', () => (
+		<React.Fragment>
+			<Button>Default</Button>
+			<Button color="primary">
+				Primary
 		</Button>
-		<Button color="secondary">
-			Secondary
+			<Button color="secondary">
+				Secondary
 		</Button>
-		<Button disabled>
-			Disabled
+			<Button disabled>
+				Disabled
 		</Button>
-		<Button>
-			Link
+			<Button>
+				Link
 		</Button>
-	</React.Fragment>
-))
+		</React.Fragment>
+	))
 
-.add('Outlined Buttons', () => (
-	<React.Fragment>
-		<Button variant="outlined">
-			Default
+	.add('Outlined Buttons', () => (
+		<React.Fragment>
+			<Button variant="outlined">
+				Default
 		</Button>
-		<Button variant="outlined" color="primary">
-			Primary
+			<Button variant="outlined" color="primary">
+				Primary
 		</Button>
-		<Button variant="outlined" color="secondary">
-			Secondary
+			<Button variant="outlined" color="secondary">
+				Secondary
 		</Button>
-		<Button variant="outlined" disabled>
-			Disabled
+			<Button variant="outlined" disabled>
+				Disabled
 		</Button>
-		<Button variant="outlined">
-			Link
+			<Button variant="outlined">
+				Link
 		</Button>
-	</React.Fragment>
-))
+		</React.Fragment>
+	))
 
-.add('Sizes', () => (
-	<React.Fragment>
-		<Button size="small">
-			Small
+	.add('Sizes', () => (
+		<React.Fragment>
+			<Button size="small">
+				Small
 		</Button>
-		<Button size="medium">
-			Medium
+			<Button size="medium">
+				Medium
 		</Button>
-		<Button size="large">
-			Large
+			<Button size="large">
+				Large
 		</Button>
-		<Button variant="outlined" size="small" color="primary">
-			Small
+			<Button variant="outlined" size="small" color="primary">
+				Small
 		</Button>
-		<Button variant="outlined" size="medium" color="primary">
-			Medium
+			<Button variant="outlined" size="medium" color="primary">
+				Medium
 		</Button>
-		<Button variant="outlined" size="large" color="primary">
-			Large
+			<Button variant="outlined" size="large" color="primary">
+				Large
 		</Button>
-		<Button variant="contained" size="small" color="primary">
-			Small
+			<Button variant="contained" size="small" color="primary">
+				Small
 		</Button>
-		<Button variant="contained" size="medium" color="primary">
-			Medium
+			<Button variant="contained" size="medium" color="primary">
+				Medium
 		</Button>
-		<Button variant="contained" size="large" color="primary">
-			Large
+			<Button variant="contained" size="large" color="primary">
+				Large
 		</Button>
-	</React.Fragment>
-))
+		</React.Fragment>
+	))
 
 
-.add('Width', () => (
-	<React.Fragment>
-		<Button color="primary">Normal</Button>
-		<Button color="primary" fullWidth={true} >Full Width</Button>
-	</React.Fragment>
-))
+	.add('Width', () => (
+		<React.Fragment>
+			<Button color="primary">Normal</Button>
+			<Button color="primary" fullWidth={true} >Full Width</Button>
+		</React.Fragment>
+	))
 
 
-.add('Title Prop', () => (
-	<React.Fragment>
-		<Button color="primary" title="Contained" variant="contained" />
-		<Button color="secondary" title="Outlined" variant="outlined" />
-		<Button color="primary" title="Text" variant="text" />
-	</React.Fragment>
-));
+	.add('Title Prop', () => (
+		<React.Fragment>
+			<Button color="primary" title="Contained" variant="contained" />
+			<Button color="secondary" title="Outlined" variant="outlined" />
+			<Button color="primary" title="Text" variant="text" />
+		</React.Fragment>
+	));

src/components/Card/_stories_/Card.stories.tsx

@@ -0,0 +1,121 @@
+
+import { CardProps, CardActionsProps, CardHeaderProps, CardCoverProps, CardContentProps } from '@bluebase/components';
+import Avatar from '@material-ui/core/Avatar';
+import Collapse from '@material-ui/core/Collapse';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import IconButton from '@material-ui/core/IconButton';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import React from 'react';
+import ShareIcon from '@material-ui/icons/Share';
+import Typography from '@material-ui/core/Typography';
+
+import { getComponent } from '@bluebase/core';
+import storiesOf from '@bluebase/storybook-addon';
+import { withInfo } from '@storybook/addon-info';
+import { withKnobs } from '@storybook/addon-knobs';
+
+const Card = getComponent<CardProps>('Card');
+const CardCover = getComponent<CardCoverProps>('CardCover');
+const CardContent = getComponent<CardContentProps>('CardContent');
+const CardActions = getComponent<CardActionsProps>('CardActions');
+const CardHeader = getComponent<CardHeaderProps>('CardHeader');
+
+const stories = storiesOf('Card', module);
+
+stories.addDecorator(withInfo);
+stories.addDecorator(withKnobs);
+
+stories
+
+  .add('SimpleCard Stories', () => (
+    <RecipeReviewCard />
+  ));
+
+
+function RecipeReviewCard() {
+  const [expanded, setExpanded] = React.useState(false);
+
+  function handleExpandClick() {
+    setExpanded(!expanded);
+  }
+
+  return (
+    <Card style={{ width: 400 }}
+    >
+      <CardHeader
+        left={
+          <Avatar aria-label="Recipe">
+            R
+          </Avatar>}
+        right={
+          <IconButton>
+            <MoreVertIcon />
+          </IconButton>
+        }
+        title="Shrimp and Chorizo Paella"
+        description="September 14, 2016"
+      >
+        {}
+      </CardHeader>
+      <CardCover
+        style={{ width: 400, height: 400 }}
+        source={{
+          uri: 'https://www.careerz360.pk/cdn.careerz360.pk/Content/UserData/empr/f1172787-3c92-459c-a5cc-5a9b7da8613e/profile_pics/thumbnail_bd47c439-bf95-4c30-8be8-fe77023194a0.png'
+        }}
+      // title="Paella dish"
+      />
+      <CardContent>
+        <Typography component="p">
+          This impressive paella is a perfect party dish and a fun meal to cook together with your
+          guests. Add 1 cup of frozen peas along with the mussels, if you like.
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <IconButton aria-label="Add to favorites">
+          <FavoriteIcon />
+        </IconButton>
+        <IconButton aria-label="Share">
+          <ShareIcon />
+        </IconButton>
+        <IconButton
+
+          onClick={handleExpandClick}
+          aria-expanded={expanded}
+          aria-label="Show more"
+        >
+          <ExpandMoreIcon />
+        </IconButton>
+      </CardActions>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent>
+          <Typography paragraph>Method:</Typography>
+          <Typography paragraph>
+            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
+            minutes.
+          </Typography>
+          <Typography paragraph>
+            Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
+            heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
+            browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken
+            and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and
+            pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add
+            saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
+          </Typography>
+          <Typography paragraph>
+            Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
+            without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
+            medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook
+            again without stirring, until mussels have opened and rice is just tender, 5 to 7
+            minutes more. (Discard any mussels that don’t open.)
+          </Typography>
+          <Typography>
+            Set aside off of the heat to let rest for 10 minutes, and then serve.
+          </Typography>
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+}
+
+export default RecipeReviewCard;

src/components/Card/_test_/Card.test.tsx

@@ -0,0 +1,15 @@
+import { Card } from '../';
+import React from 'react';
+import { Text } from 'react-native';
+import { shallow } from 'enzyme';
+
+
+test('Card component component should show children', () => {
+	const component = shallow(
+    <Card>
+      <Text>Card</Text>
+    </Card>
+  );
+  // expect(component).toMatchSnapshot();
+	expect(component.find('Text')).toBeDefined();
+});

src/components/Card/index.tsx

@@ -0,0 +1 @@
+export { default as Card } from '@material-ui/core/Card';