base card

Author: Arjun-sna

package-lock.json

@@ -42,7 +42,9 @@
   },
   "dependencies": {
     "babel-eslint": "^8.2.3",
+    "classnames": "^2.2.6",
     "react": "^16.3.2",
+    "react-css-themr": "^2.1.2",
     "react-dom": "^16.3.2"
   }
 }

package.json

@@ -0,0 +1,20 @@
+:local(.card) {
+  background: #AEAEAE;
+  border-radius: 6;
+  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);
+  display: flex;
+  flex-direction: column;
+  font-size: 12;
+  overflow: hidden;
+  width: 100%;
+
+  // @apply --reset;
+
+  &.raised {
+    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);
+  }
+}

src/card/defaultTheme.scss

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { themr } from 'react-css-themr';
+import classnames from 'classnames';
+// import { CARD } from '../identifiers';
+import defaultTheme from './defaultTheme.scss';
+
+const Card = ({ children, className, raised, theme }) => {
+  const classes = classnames(theme.card, {
+    [theme.raised]: raised,
+  }, className);
+
+  return (
+    <div data-react-toolbox="card" className={classes}>
+      {children}
+    </div>
+  );
+};
+
+export default themr('CBCard', defaultTheme)(Card);

src/card/index.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Card from './card';
 
 const Index = () => (
   <div>
-    Hello React!
+    <Card>
+      <span>SomeContent</span>
+    </Card>
   </div>
 );
 

src/index.js

@@ -1,7 +1,7 @@
 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',
@@ -33,9 +33,10 @@ module.exports = {
         ],
       },
       {
-        test: /\.s?[ac]ss$/,
+        test: /\.scss$/,
+        include: path.resolve(__dirname, './src'),
         use: [
-          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
+          'style-loader',
           'css-loader',
           'sass-loader',
         ],
@@ -44,7 +45,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',