Merge pull request #5 from Codebrahma/card

Card

Author: prasanna1211

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["env", "react"]
+  "presets": ["env", "react", "es2015", "es2017", "babel-preset-stage-3"]
 }

package-lock.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.11",
@@ -42,7 +43,12 @@
   },
   "dependencies": {
     "babel-eslint": "^8.2.3",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-es2017": "^6.24.1",
+    "babel-preset-stage-3": "^6.24.1",
+    "classnames": "^2.2.6",
     "react": "^16.3.2",
+    "react-css-themr": "^2.1.2",
     "react-dom": "^16.3.2"
   }
 }

package.json

@@ -0,0 +1,38 @@
+:local(.card) {
+  background: #FFFFFF;
+  border-radius: 3px;
+  padding: 10px;
+  min-width: 300px;
+}
+
+:local(.noPadding) {
+  padding: 0;
+}
+
+:local(.wrapContent) {
+  display: inline-block;
+}
+
+:local(.elevation-low) {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+              0 3px 1px -2px rgba(0, 0, 0, 0.2),
+              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+:local(.elevation-medium) {
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+              0 1px 10px 0 rgba(0, 0, 0, 0.12),
+              0 2px 4px -1px rgba(0, 0, 0, 0.2);
+}
+
+:local(.elevation-high) {
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+              0 6px 30px 5px rgba(0, 0, 0, 0.12),
+              0 8px 10px -5px rgba(0, 0, 0, 0.2);
+}
+
+:local(.cardHeader) {
+  font-weight: bold;
+  font-size: 18px;
+  padding: 5px 0;
+}

src/card/defaultTheme.scss

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
+import defaultTheme from './defaultTheme.scss';
+
+const Card = ({ 
+  children, 
+  className, 
+  theme,
+  wrapContent, 
+  elevation,
+  noPadding,
+  header, ...other
+}) => {
+  const classes = classnames(theme.card, theme[`elevation-${elevation}`],{
+    [theme.wrapContent]: wrapContent,
+    [theme.noPadding]: noPadding,
+  }, className);
+  const headerClass = classnames(theme.cardHeader);
+  let cardHeader;
+  if (typeof header === 'string') {
+    cardHeader = (<div className={headerClass}>
+                    <span>{header}</span>
+                  </div>)
+  } else if(typeof header === 'function') {
+    cardHeader = header();
+  }
+
+  return (
+    <div data-react-toolbox="card" className={classes} {...other}>
+      {cardHeader}
+      {children}
+    </div>
+  );
+};
+
+Card.prototype = {
+  theme: PropTypes.object,
+  wrapContent: PropTypes.bool,
+  noPadding: PropTypes.bool,
+  elevation: PropTypes.oneOf(['low', 'medium', 'high']),
+  header: PropTypes.oneOf([PropTypes.string, PropTypes.func]),
+}
+
+Card.defaultProps = {
+  elevation: 'low',
+}
+
+export default themr('CBCard', defaultTheme)(Card);

src/card/index.js

@@ -0,0 +1,33 @@
+## Card
+
+The base card component.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `children` | `Any` |  | All child component to be rendered inside a cardview |
+| `className` | `String` |  | Additional class(es) for custom styling. These classes will be added along with library specific styles |
+| `wrapContent` | `Boolean` | `false`  | If `true` sets the width of the parent card to width of its content else sets width to maximum available width inside its parent  |
+| `elevation` | `String` | `low`  | This set elevation/depth of shadow of the card. The possible values are `low`, `medium`,`high`  |
+| `noPadding` | `Boolean` |  `false` | If `true` card container will not give padding by default  |
+| `header` | `String`/`Component` |  | If a string is supplied, it will set as title of card with library specific styling. If a React component is supplied that component will be renderd as a header  |
+
+### Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `card`   | Class used for the root element.|
+| `cardHeader` |  Class used for header component if card renders header by itself |
+
+### Usage
+```
+  <Card
+      header='Card String header'
+      wrapContent
+      noPadding
+      theme={customTheme}>
+      <span>Card Content</span>
+      <span>Card Content</span>
+      <span>Card Content</span>
+  </Card>
+```

src/card/readMe.md

@@ -0,0 +1,7 @@
+:local(.card) {
+  border-radius: 4px;
+}
+
+:local(.cardHeader) {
+  color: gray;
+}

src/customcard.scss

@@ -1,9 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Card from './card';
+import customTheme from './customcard.scss';
 
 const Index = () => (
   <div>
-    Hello React!
+    <Card
+      header='Card String header'
+      wrapContent
+      theme={customTheme}>
+      <span>Card Content</span>
+      <span>Card Content</span>
+      <span>Card Content</span>
+    </Card>
   </div>
 );
 

src/index.js

@@ -2,7 +2,7 @@ const path = require('path');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
+const path = require('path');
 const devMode = process.env.NODE_ENV !== 'production';
 const htmlWebpackPlugin = new HtmlWebPackPlugin({
   template: './src/index.html',
@@ -35,7 +35,7 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        include: path.resolve(__dirname, 'docs'),
+        include: path.resolve(__dirname, './src'),
         use: [
           'style-loader',
           'css-loader',
@@ -46,7 +46,7 @@ module.exports = {
   },
   plugins: [
     htmlWebpackPlugin,
-    new BundleAnalyzerPlugin(),
+    // new BundleAnalyzerPlugin(),
     new MiniCssExtractPlugin({
       filename: devMode ? '[name].css' : '[name].[hash].css',
       chunkFilename: devMode ? '[id].css' : '[id].[hash].css',