feat: work needed to bring in self contained styles

.gitignore

@@ -9,10 +9,15 @@
 # production
 /build
 /lib
-/src/**/index.js
 # Readme copy for github pages site
 /src/_playground/documentation/Home/README.md
 
+#index files
+/src/**/index.js
+
+#size-limit output
+/dist
+
 # misc
 .DS_Store
 .env.local

.size-limit

@@ -1,8 +1,7 @@
 [
   {
     name: "Fundamental-React Size",
-    webpack: true,
-    path: "lib/index.js",
-    limit: "50 KB"
+    config: "config/webpack.config.sizeLimit.js",
+    limit: "400 KB"
   }
 ]

README.md

@@ -25,18 +25,22 @@ You will need to install [Node and Node Package Manager](https://www.npmjs.com/g
 
 For an existing react application, follow the steps below:
 
-1. Install `fundamental-react` and `fundamental-styles`.
+1. Install `fundamental-react`.
 
     ```
-    npm install fundamental-styles fundamental-react
+    npm install fundamental-react
     ```
 
-1. Load the `fundamental-styles` styles. If using create-react-app, this will be in `App.css`.
+1. As some components are currently packaged together with their respective `scss`, you will need to edit your webpack configuration to handle these files. See [sass-loader](https://github.com/webpack-contrib/sass-loader).
 
-    ```scss
-    @import '~fundamental-styles/dist/fundamental-styles-ie11.min.css';
+1. Load the `fundamental-styles` styles. This is now packaged as a dependency with `fundamental-react`. If using create-react-app, this will be in `App.css`.
+
+    ```css
+    @import '~fundamental-styles/scss/fundamental-styles-ie11.css';
     ```
 
+    > **NOTE:** Once all components are packaged with their respective `scss`, this step will not be needed.
+
 1. Import components as needed. See [Component Documentation](https://sap.github.io/fundamental-react/) for examples and API details.
     ```javascript
     import { Alert } from 'fundamental-react/Alert';
@@ -49,6 +53,7 @@ For an existing react application, follow the steps below:
     > **NOTE:** Importing from specific component is recommended. Doing so will bring in only the component you are using instead of the whole library, which will reduce your bundle size significantly.
 
 
+
 ## Versioning
 
 The `fundamental-react` library follows [Semantic Versioning](https://semver.org/). These components strictly adhere to the `[MAJOR].[MINOR].[PATCH]` numbering system (also known as `[BREAKING].[FEATURE].[FIX]`).

config/jest/jest.config.js

@@ -1,20 +1,12 @@
-import Adapter from 'enzyme-adapter-react-16';
-import { configure } from 'enzyme';
-
-configure({ adapter: new Adapter() });
-
-//https://github.com/FezVrasta/popper.js/issues/478
-if (global.document) {
-    document.createRange = () => ({
-        setStart: () => { },
-        setEnd: () => { },
-        commonAncestorContainer: {
-            nodeName: 'BODY',
-            ownerDocument: document
-        }
-    });
-}
 
 module.exports = {
-    'testURL': 'http://localhost/'
+    'rootDir': '../../',
+    'verbose': true,
+    'testURL': 'http://localhost/',
+    'testMatch': ['**/*.test.js'],
+    'setupFiles': ['./config/jest/setup.js'],
+    'moduleFileExtensions': ['js', 'json', 'jsx', 'scss', 'node'],
+    'moduleNameMapper': {
+        '^.+\\.(css|scss)$': 'babel-jest'
+    }
 };

config/jest/setup.js

@@ -0,0 +1,16 @@
+import Adapter from 'enzyme-adapter-react-16';
+import { configure } from 'enzyme';
+
+configure({ adapter: new Adapter() });
+
+//https://github.com/FezVrasta/popper.js/issues/478
+if (global.document) {
+    document.createRange = () => ({
+        setStart: () => { },
+        setEnd: () => { },
+        commonAncestorContainer: {
+            nodeName: 'BODY',
+            ownerDocument: document
+        }
+    });
+}